PS/AE Tutorial: Creating Animated Clean Stream/Twitch Alerts
HTML-код
- Опубликовано: 11 сен 2024
- ► Follow me on Twitter - / sesohq
► FREE Starter Pack (AEJuice ) -bit.ly/3UygLlp
► Liquid Elements (AEJuice) - bit.ly/3FOfylU
► Check out my Everything Pack - goo.gl/TbOnjO
► Check out my Store (Sellfy) - goo.gl/6yKGEj
Video Description: In this video, I teach you guys how to make a clean alert box in Photoshop, to then move it into after effects where the use of key framing and easy ease, with a bit of AE Juice to spice up the animation. To then finalizing and apply it to steamlabs where you guys can now how your own custom stream alert box made by you!
Table of Content:
4:01 - How to design a clean alert box
9:14 - Tips to getting pop in alert box
13:13 Starting Animation
30:58 - how AE Juice works
35:57 - Render settings
37:24 - How to Convert to WeBM
43:20 - How to move text over in CSS for stream labs.
Order Designs - bit.ly/2mXlCiF ( Contact Form/Website )
www.sesohq.com
Liquid Elements: -----------------------------------------------------------------------
aejuice.com/pr...
SAVE 36% with the Bundle!
Liquid Elements pack is included in the Motion Design Bundle:
aejuice.com/pr...
You get this and other great products with a 36% discount
Support Center:
aejuice.com/su...
Become AEJuice Affiliate Partner:
aejuice.com/af...
----------------------------------------------------------------------------------------------------
Join my Discord - / discord
Instagram - / sesohq
Behance - www.behance.ne...
Secret Download - bit.ly/2OIGEO3
Song - n/a (Beginning song is: Sorrow - Kalypso)
The soundtrack is used for entertainment purposes only. No copyright infringement intended. All credits for the song(s) go to artist(s)/label(s).
Thanks for the video Seso! Just a heads up, the facecam was blocking the 3D Rotation keyframes as you were doing them around 19:38 so we couldn't see you adjusting the Y-Rotation. If anyone's confused, you can see the exact keyframe he created for the Y-Rotation at 23:01.
gotta love a good comment.
@@SesoHQ tutorial on a orange splash transition you used in the video? 🤗
I can't do this rotation part, can someone help me? it doesn't work for me...
IF YOU GET A BLACK BACKGROUND WHEN YOU RENDER:
THE FIX IS USING MEDIA ENCODER TO RENDER AS WEBM FILE FROM AFTER EFFECTS. BE SURE TO TURN ON TRANSPARENCY IN THE MEDIA ENCODER VIDEO SETTINGS, AND USE MAX RENDER SETTINGS.
impossible for me to find the transparency in the media encoder any tips for that ?
my problem is when i render it with the webm codec it works in streamlabs just fine. But the webm file doesnt have a transparent background in premiere
I have a transparent background after I re-import and check the footage, but it has a black background in streamlabs.
still doesn't work
I downloaded the webm add-on for premiere, exported from ae as an Avi file with transparency, imported that to premiere and rendered as a webm. It works fine now.
This was so dope. You've got such a great personality. Really needed this video. Smashed out my own alerts package in a day after finishing this off.
Bro I just came across your channel at like 4am, and Ive been following your tutorials ever since, subbed & liked all the videos ive seen thus far, great content and great explanations and great guidance.
Tryna learn how to do stream kinda stuff for clients and using the background image is soo smart and useful ty homie 👑
thank u so much for this! this was my first time using after effects and now im super excited to practice more :)
I chose to render using AVI, since I was able to have that be transparent in Premire. However, when I convert the AVI to WEBM using Convertio, CloudConvert, or a WEBM plugin for Media Encoder (FNord), the transparency is lost for me and a black box fills the background. Any solutions for this?
having the same problem :/
the transparity is lost for me even when I do it right...
You're definitely doing an amazing job at these tutorials!
Bro i used this tutorial for a social logo pop up (You actually gave me the idea while i was watching this video for the first time). I learned a lot from this video so i want to thank u for that.
in the begining I saw his energy man and I instantly sub I like this guy keep it up
this is cool but i have a problem
how can i remove the black background from the alert
i did a song lyrics alert but i dont know how to remove the black background i want to see the lyrics only
the hopefullest video i saw in my life thank you that you explain how i can add my alerts into streamlabs
I was literally in the middle of watching your other twitch alerts video wtf
POG
Bro im glad i found your channel, instant subscribe. Loving seeing more POCs doing design and/or tech related things on youtube
Really really awesome. Thank you! Only note is people may have to try different file converters to ensure the background stays transparent.
my after effects render setting are the same, in obs the file is transparent but when making it my follower alert it has a black box in the background any help?
I was just watching the video you made on this topic from 6 months ago! Lol solid timing
aMuzz ayyy
Yo, Man! Thank You for helping me with that alert pop-up box.
It's really rare to find RUclipsrs like you that explain everything you need.
You have subscribe and like from me!
Keep up good work! :)
Hey! I followed your steps but when I put it on obs streamlabs the backround isnt transparent :(
Make sure its rendered right :)
render with RGB ALPHA
my background wont be transparent.... pls help
did you fix this? i need help :(
FFmpegYAG is a great tool for it make sure to export your file in .mov to your desktop add it to FFmpegYAG, set format to .webm in the program, set video codec to default before doing that set bitrate to 20000k (yes I didnt make a mistake with the "k") and nothing else
I also had a problem with convert.io not keeping the transparency of the .mov over to the .webm. I'm not sure why this worked, but I did the exact same conversion on YouConvertIt and it worked perfectly. Hope this helps
send it to media encorder
@@Saivarun11 i sent it to media encoder and converted it online and i still have a black background. i followed the vid step by step (allegedly)... any advice?
@@Ty-jc5qv before saving check keep alpha channel in media encoder
And render
@@Saivarun11 i just tried that and it comes out really fucked up but when i rendered it as an avi on AE its perfectly fine. i threw over some gameplay in PP to make sure too. its just like the conversion webm add a black background regardless idk tho
i liked the video before watching it cuz the intro is so good
Amazing work my dude, I know I'm late but this really helps me in learning more about AE. I subscribed just to keep up with ya! Keep up the amazing tutorials man!
How did you get it transparent in OBS? Followed the entire tutorial, pretty much to the letter and when using it on stream labs i keep getting the black background. I have made sure there is no background on teh animation. What am I missing?
same, did you solve it?
@Theoo put a Green background and in obs u put a Chroma Key
Are these project files available for purchase or download?
I don't know how to get rid of my black background when I export the alert from after effects. I can't access my media encoder so I've just been exporting as a quicktime then converting it to a webm file. But when I test it, the background is black and I'm getting really frustrated. Someone plz help
i have the same problem
Done converted the file, but it is not transparent here too =(
for me the same :( and i have no idea to fix it. pls help
I had a similar problem, just change the background color to green and then use a chroma key in obs.
Hope this helps :D
@@schnitzistudios2602 In some case it could work i guess but sometimes it can look crapy in somecase xS now i finde another solution for this Problem i downloaded a Plug in for Adobe Media encoder and i can now render my own Webm file and have not to convert it from another website or other stuff :D For the Plug-in search fnordware and then on the page click on Webm there is an download for the Plug-in it works perfectly fine for me :)
@@itsonlyyucky8277 thx, will try
@@itsonlyyucky8277 nice work it
it works but when i change the margin the black background pops up
First time Ive seen ya! FIRE. I LOVE the speed at which you talk. And I LOVE AE! LETS FIRKKKEN GOOOOO! Liked and subbed Blessings!
Loved you're video. I've been scavanging youtube for something like this for two weeks!!
My guy, so good. Beautiful work
I always have problems with diffrent people with bigger names, so the text will not be on the middle of the alerts any tips for that?
in my AEJuice window theres no cog to change the style. is that just a paid function? It's just not there.
To anyone that is having problems with the black background I render my file with After Effects and then I used Adobe Media Encoder to save the file as a webm, this is how I solved the problem hope it helps someone.
i do that and it works fine in streamlabs, but its a black background in premiere
Thank. you. so. much!
this is super helpful, but what if someones name is longer, the margin would have it not centered, right?
Hey Seso I need help with moving the text down, do you know how to do that?
Amazing video!! how do we adjust the text to go up or down in the custom code editor?
Question for you, new to after effects but my on my after effects it doesnt allow me to click in between seconds, and only shows seconds. How do I have it show the milliseconds also?
You can export as webm with alpha channel from Adobe Media Encoder, which if you're using AE, you should also have AME installed.
Thank for this video man. Now i really found a nice tutorial to my overlay thanks
great video and personality bro! Thanks a bunch for this!
when i put it into the converter, the result had a black background in Streamlabs, any ideas?
when i use the convert website it keeps putting a random black background.
same
Same
did you solve it?
@@Railandergamer1 In some case it could work i guess but sometimes it can look crapy in somecase xS now i finde another solution for this Problem i downloaded a Plug in for Adobe Media encoder and i can now render my own Webm file and have not to convert it from another website or other stuff :D For the Plug-in search fnordware and then on the page click on Webm there is an download for the Plug-in it works perfectly fine for me :)
- Stole that from a comment further down, hope it helps
How would you move the text down instead of left or right?
Youre the best Adobe/Twitch overlay/alerts youtuber in the world 10/10 but in the newer video there are some parts where you just press buttons and dont tell how
my background still isnt transparent though i already checked its supposed to be transparent
Any solution for that? I'm having the same issue
@@DevHeimbold still nothing for me
Can I have some help because I have a black background when it’s transparent on AE
Me too
@@jorgevalencia6651 Where it says Active camera above your timeline there is a picture of a transparent image, it is highlighted blue on Seso's screen
Where it says Active camera above your timeline there is a picture of a transparent image, it is highlighted blue on Seso's screen
EggyMammalッ I have that but when I change the file to a webm file it has a black background
@@vexix4 Before rendering on the WebM settings you need to make sure you have check mark on INCLUDE ALPHA CHANNEL
my background is black instead of being transparent
idk what i did wrong
Yeah, i have the same problem :( Can somone help us?
before you export to render ensure you have the transparency on... next when you go to render you should see a blue word in the render tab that says 'lossless'
click that and a new window will open up. make sure in the box that says RGB..set it to RGB + Alpha...then render
@@klutzkeebs Yeah, i know. But when I convert it to .webm and put it on streamlabs then a black background appears :( And i don't know how to fix it.
I tried almost everything
@@NEKTLIVE hmmm i dont use the convert program i use media encoder idk how to help you im sorry
but if there is an option to change to alpha render in the converter i would double check and make sure that is selected
Great tutorial, helped out so much!
When i active the alert in obs the background become black, and my file have a transparent background, any idea how to change this? thanks guys
@@Kitsuneunbx
I solved it using APowerSoft converter, I hope it helps!
Where it says Active camera above your timeline there is a picture of a transparent image, it is highlighted blue on Seso's screen
@@eggyfnnz thank you very much mate
@@trebor_sabre No problem my bro! I'm glad this helped you out and it worked! 😀
@@eggyfnnz i wonder if you could help me again, when i exported it and then rendered it, i went to compress it and then put it in streamlabs but then the transparency is lost and is replaced with a black box, any idea on how to get rid of the black box ive been trying all day
U r awesome 💜 i learn a lot for this
Good tutorial! it works fine, although when i try to add the Webm to OBS ,it has a black background eventhough its set as transparent. I can see when i test the alert in OBS that the animation is playing ,but the black background is blocking it.. how do i get rid of this??
tac0 did you figure out how to fix this?
did you figure this out? im having the same issue.
@@mrmatt108 no. when I export as a webm it works in OBS Studio but you have to render the alpha channel too when exporting. it will have a black background but if you put it into streamlabs alert and copy the link to OBS Studio it should make the black background go away. IT WILL NOT work in streamlabs OBS though.
@@mrmatt108 Yes I did! took me roughly 10-15 hours to figure it out over 3 days, but i did the exact same thing but eventually it worked.
this is what i did:
First of all i restarted the program, followed the guide from scratch, when i was done i opened the project for rendering in Adobe encoder, Selected the WEBM format, On the right side there the file name is, there should be some kind of "advanced" button, where you can manually change settings to the render. Under "video" i found further down something about "Alpha" or "Transparancy" i CHECK marked it,and tada-it worked. Sorryt i dont remember the exact names, i havnt got AAE installed to check. Try it out! worked for me
@@austinlynn1686 see me respons in this conversation!
shout out to AE juice for the free stuff man. damn. They so nice
This is good stuff man, thank you so much!
Seso can you help me, when i render the video, he always stay with black background. I all ready render it 5 times. Please help
Thanks for this man! Keep it going!
thanks for the video seso, i need help i when convert video mov to webm and upload to the streamlabs, the animation has a gray background HELP MEEE PLEASE
Seso! You made a videos let’s goo bro I’m definitely going to try and make this
You can export the video directly into WebM with the fnord extension for Adobe Media Player, the instead of rendering on AE, render on Media Player. Less steps, less waiting
To anyone that is still wondering why there is a black background. IF you are using AE 2020 17.0.6 and AME (Adobe Media Encoder). Just use AME and export it directly as a WEBM file. YOU MUST MAKE SURE THAT YOU HAVE "INCLUDE ALPHA CHANNEL" CHECKED BEFORE ENCODING under the settings! After that, it'll stay transparent. You don't need to do any converting using an online site. You're done.
Hey! I did all your steps but when I put it into After Effects it doesn't seperate all the different parts of the alert, it just combines everything into one and I can't do any thing from their on cause it will do it to the background and the whole thing which I don't want.
From 6:14 to 6:20 that step doesn't work for me? any other suggestions?
Cheers from Portugal. Nice tutorial. Subscribed and will watch more of you content. :) Take care and see you soon
Thanks for the video, It really was a step by step.
I have question for you though...
For some reason, I get the a Black box under the alert when it is activated (in OBS). I know that the background is transparent, because when i apply i to video in Premiere it plays correctly (no black background).
Any ideas? What the issue could be.
Next to active camera in the box where you move the "icon boxes: there is the veiw grid option
Grim Spyder did you ever figure out a fix?
i have the exact opposite of your problem. Works fine in OBS but in premiere it gives me a black background
@@Zezuu You had to have had the background layer either still visible or you did not turn on the transparent background setting in AE
Have you found a solution to this? I am experiencing the same problem.
Such a nice Intro!!!
Valeu ai, foi o único que postou o CSS. Que era o que eu realmente tava interessada em saber.
I had experienced a problem, The webm just got black background
Marky Grey Pacanza me to
Has anyone figured out why there's a black background. I'm on AE 2020. Did literally every single one of the steps. Did the whole RGB+Alpha. Tried multiple different codecs that support the alpha channel which is needed FOR transparency. Nothing is working AT ALL. After converting to WebM and putting it on streamlabs and opening OBS. There is still a black background.
To anyone that is still wondering why there is a black background. IF you are using AE 2020 17.0.6 and AME (Adobe Media Encoder). Just use AME and export it directly as a WEBM file. YOU MUST MAKE SURE THAT YOU HAVE "INCLUDE ALPHA CHANNEL" CHECKED BEFORE ENCODING under the settings! After that, it'll stay transparent. You don't need to do any converting using an online site. You're done.
Thank you for this. I literally tried EVERYTHING!!!
@@Nannigans Yo dude, where do you check alpha channel included
@@thedilma581 Just scroll down in all of the settings on the right side, it'll be under video. There will be a box that says "include alpha channel" that you can check
bro thank you so much 🙏 my guy your awesome
fire video man :)
ty ty
To change the text above the box, would I have to go back into photoshop and the reanimate it all again in ae or is there a way to do it in ae?
Thanks a lot Mr. Seso!
My rendered Quicktime file is only transparent on after effects when I turn on the transparency grid. I've tried Sony Vegas and premiere pro without any difference. I've looked around and seen other videos doing the same thing you did, but it doesnt work for me! Pls help!
Thank you! it really helps me a lot!
Good video. I have a doubt. How can I make the plugin know in this alert, when I put it in AE, it modifies the transformed rectangle and makes it normal. I do not know how I can do to put it on the entire edge of the masks.
Hey Seso, just purchased your Everything Pack ! Only issue is I was an idiot and didn't read the description properly, and didn't opt in to the email thing... Will I still get the files sent over? Can provide proof of purchase
I'm making a simple alert, following your instructions. It simply slides in from left to right and back again. After exporting it from After Effects as an AVI, the file was 300mb (!) despite only being 5 seconds in length. The image I imported into AE is only 40kb. The composition size is only 400px x 600px. Can you think of a reason for this huge increase in size?
Thanks so much for this!
It took me quite a while but i managed to make myself some nice looking alerts for my channel!
I did however, have to follow a comment below regarding rendering in Adobe Media Encoder instead as i kept getting a white background on the finished project when i used that website!
Thanks for the tutorial! :)
@PANCHITO FRANCO I didn't use a website as it wouldn't work.
I used Adobe Media Encoder.
Why is mine such bad quality when I upload it to my stream labs?
To fix the black backround export through media encoder go to video settings scroll down and click inclue alpha channel and it will be transparent to export as a webm you need to download a plugin called fnordware
When I try the webm animation on the streamlabs alert box it just keeps looping, any idea how to fix it? Thanks!
Cool Tutorial I liked.
beautiful vidio 🌹🌹🌹🌹🌹
Bell gang, love u seso
Zen IDXK u da best
epic tutorial
Thanks for the video and thanks for sharing your knowledge Seso! great videos! Just a question, for some reason, when compiling the composition to QuickTime, I have the same settings as you do, but I dont really know why the result is a .mov file of 2 or 3 GBs! Same happens if I try to do an animated cam overlay. Is this normal? What I am missing here? Hope you read this, it would very helpful to clear this.
Im having a hard time with the transparency issue could you to a tutorial please
with the rendering?
Did you figure it out?
@@ihateyou8006 not sure because when I put the link in obs and test the notification. The background is still dark
@@Eaero when I render as rgb+alpha typically it comes out as transparent. if i put it into premiere or something. But a client i did some work for recently, uploaded the animations i made to his OBS. and it still has the black background. im trying to figure it out to help him fix it but ill let you know. try RGB+alpha though.
When i import the file to ae and click the groups the background is black how do i fix that?
im not too sure what you mean
@@SesoHQ When importing into AE, is setting a black background out of nowhere, and also mainting 1080p resolution, even though i cropped it in Ps previously
satevisuals turning caps lock off and deleting the background from PS fixed it for me.
APowerSofts video converter lets you convert videos over 1 Gigabyte for free. No one else lets you do that. Would highly recommend that over any other converter. Also has a desktop app you can download in case you don't want to do it through the browser.
but it didn't make my alert transparent. nothing is making it transparent
Can you make the same video but for transitions and Stream Package?
Seso common man you have 100 of comments how to fix that black background problem when we import on stream labs....please tell us how to fix that.....what are u doing?
just sounds like 100 people that didn't render with alpha +rgb
Mr. genius problem is not alpha+rgb. Its the website(convertio) u are using to convert WebM. It removes the alpha channel. So we have to use media encoder to solve this. Thanks but no thanks for the convertio. Great video by the way.
@@TheSamGames logorith codec if the problem is converting. Odly enough my problem didn't arise, so they messed up way before. but use that codec and everything is aok no need to convert.
@@SesoHQ OK. I want to end my alert text first after that my alert animation. But when I set the timing it cut the whole animation from the end. Any kind of css help
and @seso if the problem isnt convertio, why did it work changing converter.
Great video! thanks !
35:30 simple but dope! COOOL!!!
Got notification from discord❤
This did not work for me I went step by step and at the end when I tried testing out the pop up notification nothing popped up please help me
What photoshop version are you using right now?
it still has a black backround for me?
How do I make sure the length of the name doesn’t go out of the alert?
Why do I have black background when I put it on streamlabs
Very helpful. Ty :)