How YOU Can Make Stream Alerts Like Shroud's!

[Music] hello you guys have jumped into my stream over the last couple of weeks that I've been asking me how the hell the Shroud dukey's alerts have a shroud do his plate walk how do shrimp do his alerts is that right how does shroud shroud alerts how to there we go now I'm pretty certain is a lot more complexity and a lot more trickery going on for his alerts but I can shoot a version that's inspired by the same concept that shroud uses on his stream and show you guys how you can use it for your stream to make some really cool alerts so I said and don't let sir jump into the show let's end on let's jump into the video and show you guys how you can make some really dope alerts for your stream welcome back to the channel guys my name is cemeteries a quick reminder for you want that new stream living Monday Wednesday Friday on Twitch the link to my channel is in the description down below feel free to jump by ask any questions you might have about this video or you need anything else motion graphics or video editing related I'll be more than happy to answer any questions that you might have and if you guys find the video helpful engaging or indeed helpful in any way then be sure to LIKE and subscribe to the channel thank you so let's move on to the basic idea of what shroud alerts are and basically break them down into the main key elements you know an animated element that plays when the others is triggered and it sends smoke trails up and around his webcam border and that triggers the name to appear above his webcam there appears to be some custom coded elements involved with this as well like via CSS or JavaScript that basically makes the alert variations stick around at the bottom with webcam until the next alert plays on his stream that looks like a custom coded thing and that's something that we're not going to cover in this video but I can show you how to make and design the rest of the other that you can potentially use on your stream we're going to be using After Effects for this particular tutorial but you can use whatever animation software you prefer apple motion blender DaVinci Resolve even as long as you can export a transparent video file you're good to go an important thing to remember whenever you are designing these alerts is you need to construct and make your webcam frame that you will be using on your stream inside with the alerts so on it will help you when it comes to animating and designing your alerts because you can use your friend to our extra animation details but it will also how pretty comes to keeping things in line and having some sort of structure to the alert because you don't want things moving by a couple of pixels every so often and ruining everything especially later on down the line good you understand that cool to show you guys how you make these kinds of alerts and actually gonna be using an example I did for a friend of mine for his own channel I'll leave a link to his channel in the description below because I want to see those but in action but basically I used the same shroud alert technique for his design when I was giving him a bit of a fresh look to his channel other than that though those is just jump in and start animating so starting off I'm actually gonna make a composition that's gonna be larger than my intended webcam frame size so if my webcam frame he's going to be 720p inside I'm going to make this composition fifteen hundred by 1950 just to give us a bit extra padding to you know make room for the extra animations that we're gonna be doing inside and around the webcam border and inside of that composition I have a secondary composition that's just a 1280 by 720 p composition that is just housing a white outline webcam border that's going to be my point of reference but when I do any of my animations and that's pretty simple it's just a shape layer inside of a 720 bit composition and it's just sitting there - yeah make sure it don't get lost and most webcam friends don't need to be larger than 720p because your webcam frame for your gaming scene doesn't need to be that large you're gonna have all the content and the gameplay and all those stuff behind you it doesn't need to be huge so 720p webcam size is perfect and let's move on to our next step and that is actually giving this guy a little bit of a border a bit of a grade it's actually the full video showing those how you can make an animated webcam border inside of After Effects I'll put a link in the description or in the corner up here I think anyway that video goes into some real depth showing you guys how you can make an animator webcam border inside of After Effects and showing you how pretty simply so we're gonna recreate those steps right here and make ourselves an animated gradient border for our webcam frame now that we have our gradients border animated it's time to bring in the anchor point that will basically animate whenever an alert is triggered on stream on shroud over Lake his logo animates changes color and shoot smoked trout up and around the webcam so we're gonna be doing a very similar thing here where the anchor point will react to different levels and types of alerts for this example and for this video I'm going to show you guys how you can animate one type of alert but the it's rinse and repeat pretty much four areas of alert that you're gonna be designing animating for your stream so I'm gonna be using my friends logo for this and they're gonna be bringing that in what I'm gonna do now is basically send to this pup in the middle but put it at the bottom half of his webcam border right here the one thing I want to do now is to add a bit of an outline to the logo by basically erasing a portion of the webcam frame so it looks as though the logo is just sitting perfectly in place inside and cutting out some of the webcam border and the Easter of doing that is by duplicating going to the bottom layer of the logo go into the layer layer styles and having a stroke to it expanding the sugar just a little bit to give you a little bit more of a width they want your nose in precompose this layer by going to layer precompose and then naming it say outline mask and I want to make sure you move all of your action boots into the new composition by clicking move on attributes into the new composition pretty simple really click OK and you basically now have a version of the logo that has an outline that you can now use to cut up a portion of the webcam within the basic way of doing that is by going to the blend mode over here and then ticking silhouette alpha and what that will do is as you can see it actually could at the section of the webcam frame from the rest of the air line it's only keeping what we need and getting rid of what we don't need what I like to do from here is I was actually like to parent the logo outline to the original logo so if I do change the scale of the original logo the outline scale to the end and get lost somewhere and have to keep track of things it's easy to remember just scale the original logo and the applying scales with it now we are pretty much ready to move on to the main alert and I think I'm gonna work on a subscriber alert first and the easiest way of actually animating all these elements is by duplicating the original webcam animation composition that you are using for your entire alert set for wine it keeps things nice and tidy so you know where things are but also you have a frame to work off of you have a basis you have some structure there you know what you're gonna be animating you know where things are because everything is in place so I'm gonna duplicate the webcam composition for our animations and I'm gonna rename this to be our subscriber alert and from here I'm actually gonna bring in some elements that I use a fair bit whenever I'm working to the rat effect so it's a pack called arty FX I'll leave a link for this in the description I think the last time I checked it was like $69 I think on graphic River or on the umberto market or believe it whatever it's called but it's a fantastic pack full of graphic elements that you guys can use inside of your After Effects projects and I've use these a fair bit throughout my time so go found some really cool effects that I want to implement and bring into the alert for a subscriber alert and then start animating and bringing everything together okay so happy with the selection of effects that we picked out and I'm gonna be using for this alert the next thing I want to do is actually animate the logo tachi scale up and then slam down and have shoots of an electricity sparking up from it and then have like you know bits of smoke on a shooting away from me that will look pretty cool and pretty epic so we're gonna make that and show you guys how you can do that kind of affect your success on the keyboard clicking a keyframe here for the scale animator just say 10% of 35 and then your scale back down to 25 and what we're doing is actually using a tool called motion v2 you can find that from mograph again I'll leave a link to all these things in the description down below but you can grab this it's a really useful tool for animating it is really cool sleek animation styles and it makes a bit quicker for me to reproduce animations for doing these kinds of things okay so whenever actually the logos scaling up and slamming down or gonna know is actually introduce some extra elements like electricity and smoke to really pan out this alert and make it look super cool and super awesome so there we go we now actually have the arty effects elements added into the rest of our element the logo scaling down slamming down and sending shockwaves of smoke and electricity out to the rest of the alerts the next few steps are really simple and really easy to do all we need to do is turn off the webcam frame from the subscriber alert and then add a fade in and fade out to the main logo at the start and at the end of the composition once that's done all you don't need to do is actually double check the positioning by dragging the subscriber alerts on top of the original webcam frame we made just to check the positioning and the sizing and make sure everything lines up correctly from that just export the webcam frame and the subscriber alert separately makes you turn off the subscriber alert when you go to export after you've done all your testing otherwise you can have the subscriber alert baked into the webcam frame so just keep an eye eat to make sure you turn that off before you export your webcam frame got it cool just rinse and repeat this step for every other alert that you have and you've pretty much done the hardest part what I like to do for each different type of loads like to increase the intensity and the dramatics of each one a follow alert isn't gonna be as dramatic or as intense as a massive gifted sub alert so add some extra stuff for the other alerts to differentiate them and yeah that's pretty much it the next step isn't adding these to your stream and I like to convert these files using an online WebM converter I'll link the one that I use in the description then but I'll feel free to use whichever one takes your fancy ok so now you're in your stream alerts provider of shows I personally use zoom elements because it's gonna be the easiest and the best when it comes to actually lining everything up and you'll see why in just a little bit so I've made a brand new stream elements overlay that's exactly the same size as our After Effects compositions and 1500 by 950 we're going to add our frame that we exported from After Effects and convert it to our WebM file we're gonna bring that into the stream elements overlay and as you may remember it is also 1500 by 950 it is a 1 to 1 scale ratio so when you drag it and resize it all you need to do is type in the size of the video file and it will match the size of the overlay the next step isn't adding the alert box and that also needs to be 1500 by 950 because we made the alerts from the same size of the original webcam composition are you seeing a pattern because I think I am then all you need to do is add in the different alert types using the WebM video files you converted and put them in the correct alert stop but make sure you have on the layout text / image selected otherwise your text is going to be completely hidden you won't know what the hell is going on in the sizing will be completely off make sure that is ticked on every single alert variation and you should be good to go before we go any further I really just need to get something off my chest extreme elements you know I love you you know I've seen your praises day in and day out you know I recommend you whenever somebody comes into my stream and asks do you use stream labs or stream elements you know what I say I say stream elements because it's better but some things need to change I can't go on the way we've been going it's 2019 so 2020 why can I not copy and paste alerts from one to the other I have designed a whole set why can I not copy and why is everything happening when I want to record an amount you're basically why do I have to manually enter every single type of change to animation to text margins to font size to variations between every single alert why this has to change it needs to signed every designer that's ever used stream elements hey it's Carrie oh you forgot the text at the sound another overlay Tobs and voila you have now made a pretty cool set of alerts that are exactly the same we're not exactly the same we're inspired by the ones that Stroh uses on his string and that's pretty much it guys thank you so much for watching don't think I do streaming every Monday Wednesday Friday on touch linked to my channel it's in the description down below and also you guys gonna share your ideas what you've done in your creations with the larger community we have an amazing disco that can be a part of evidence that is also in this question down below what's the other thing is so much for watching and I'll see you in the next video bye bye I've been a jackass he's a jackass Jeff and I just said Happy New Year jack

Channel: Sam Woodhall

Views: 141,587

Keywords: animated facecam overlay, animated overlay, awesome twitch alerts, creating professional stream designs, how to, how to animate twitch alerts, how to create clean designs, how to get better production on stream, how to make graphics for mixer, how to make graphics for streaming, how to make graphics for twitch, how to make my stream look better, how to make shroud alerts, how to make twitch alerts, shroud, shroud twitch alerts, twitch, twitch alerts

Id: q38HuH0bKZs

Length: 13min 37sec (817 seconds)

Published: Fri Jan 10 2020