How to Create Animated Stream Alerts / Twitch Alerts / PhotoShop / After Effect

I’m really digging into the animated stream alerts lately. The animated alerts make for a stream pop up quite a lot more! We actually did get animated alerts for a client from Fiverr earlier which were pretty cool but I wanted to learn how to do them myself also. You know we like to know how to do stuff over here! 😀

Why would you want to get animated alerts?

They certainly make your stream pop out more in the streaming genre. Most of the streamers don’t tend to use their time for their alerts and we have seen that creating 3 variations of each alert actually increases the subscriptions and donations happening. We also did set up different sounds for each alert. People are really looking forward to seeing those different kinds of alerts!

Today’s video is coming from Seso. Who has created an awesome really in-depth guide on how you can create Animated Stream Alerts / Twitch Alerts for your stream with AEJuice, PhotoShop and After Effect. It actually isn’t that hard to create custom alerts with these two tools! Make sure to get Sesos Everything Pack!

PS/AE Tutorial: Creating Animated Stream/Twitch Alerts

Video Transcript

– ♪ Never let you go ♪

– Yo, what is going on guys? It’s your boy Seso here bringing you guys a video here today bringing you guys a Photoshop slash After Effects tutorial today. Showing you guys how to make your own very cool Twitch alerts. Now this is one of the things I’ve been asking quite a lot from a lot of individuals, or have been asking to do from quite a lot of individuals. And I think I killed it, I think we did pretty good on it, of course I just recorded the video myself just doing the intro for you guys, but it’s kind of crazy because at the first well of course I started learning this this morning at least it was just like, there was a few things I just couldn’t find cause no one just like talked about it or what not. So hopefully you find the things that you’ve been looking for in this video here today. This video is actually also sponsored by AEJuice.

[elementor-template id=”10226″]

These individuals came to be about a month ago, and when I was working on a lot of stream stuff, for like After Effects and what not. They came to me and showed me this stuff right here, and it’s actually way way too cool to just pass up and not do honestly. Just basically think of it as an asset pack of like really cool motion kind of stuff that will work for logos, starting soon screens, literally anything, honestly. You’re probably gonna see me using a lot of this kind of stuff to kind of just like make things look pretty kind of things.

But it’s really cool, their project manager actually comes with a free starter pack, so if you guys check the description down below right now, you’ll see it says like free starter pack, and you can just get basically the actual starter pack of a few little assets, not little they’re actually quite a bit of them in there, but also the actual project manager sort of plug-in that makes it super, super easy for you guys to actually work in like this right here. All you gotta do is go to window, AE Pack Manager 3, and when it opens up, you simply just go to this.

This is the starter pack right here for you guys. So like look at the little explosions, like, it’s kind of crazy. They even have text animations for like text. Oh, yikes. Like this stuff right here, this stuff right here I was gonna have way too much fun with. Like this stuff being like, starting soon, like I’m gonna have way too much fun with this pack personally but I think it’s just really cool. This stuff comes in for free when you guys go ahead and just use the link down below and it’s very very dope. This other stuff that you can actually purchase. This is stuff that I personally use, some of this stuff in the video I’ve used electricity. And the one that’s an experiment as well. We do a quick scroll through of this for you guys, you can see some of this stuff. It’s really quality, it’s really dope and I honestly highly suggest that you guys check this stuff out.

It just, it’s just one of those things where if you’re like a motion designer or what not, it’s one of those investments that’ll last you guys a lifetime kind of thing, and I truly, truly, truly mean that as you guys know. I only take sponsor for stuff that I really care about. But yeah, hope you guys enjoy this video, we’ll jump first of all into Photoshop, and then we’ll run into After Effects, and then we’ll run back into Photoshop. And then run you guys into Streamlabs and you guys hopefully will enjoy another video here today. With that being said, much love, I’ll talk to you guys later Seso HQ out, peace.

All right guys, so I’m gonna basically start off in today’s video on how to actually create your own sort of document sized page here. So the document size that I’m personally working in, or that I originally worked in, excuse me, was a simple 1920×80 just like so, I pressed create, and then you have your obviously your basic sort of background, right? So for me, the way I ended up getting this more smaller size was basically using this as like hey, just think about it as a way, this is where the game play is and what not, how big do you want your alert to be?

Sizing your Stream Alert

So essentially what I ended up doing was kind of like making my own little rectangle and what not and kind of like saying you know, where to size it out, maybe that’s too big or what not. I’ll just fill it in really quick so you can just see, right? You can size it out, kind of figure out what size you really want to work with. And when you say like, hey, this is the kind of size that I want, you just drag it in the middle, or somewhere around the middle, and you press the C on your keyboard which is the crop tool, and then simply just crop around it. So if you want to actually design inside this bigger sort of 1920x1080p, you know document size then be my guest, right?

But just simply just move this into a spot where you know it has a fair amount, I guess you’d say breathing room. But this is where the document size you wanna be working in just simply because it makes it really really easy for smaller sizes when it comes to like GIF images or if you ended up using your own hosting sites actually host a different sort of AVI or MOV or what not, you know what I mean? So it’ll be a lot more easier for the actual sizing to be you know, really using in a sense, right? So you don’t have to go beyond a certain size, which is like, I believe it’s only 20 megapixels or whatever on the Streamlab’s hosting sites, that’s why you gotta use a certain GIFs or what not. We’re not 20 megapixels, it’s like, whatever, it’s small.

Creating the Stream Alert Box

Anyway, but yeah, so this is how I got my document to size, that’s how I’ll basically be working inside in this one right here. I’m just gonna really quickly just kind of go over the pen tooling really, cause like I said, the design doesn’t matter. So I’m just gonna go ahead and show you guys how I at least did it and if you guys choose and you kind of like this style, I’ma actually show you guys what the background, and you know, look behind it maybe so you can see a little more better, you know, that looks pretty good. So what I ended up doing is just simply using the pen tool. Now for you if you’re working with a theme, this can be texturized this can be I don’t know, liquidy, I don’t know, I mean it can have whatever the heck you guys want it to have, honestly. But in this sense here, all I ended up doing was using the pen tool, and then just kind of pen tooling out this very cool simple sort of… We edited this for the overlay, actually, the other week. And I hold shift to make these cool little perfect 45 degree cuts, right?

And I’m holding shift to make a straight line. And I just come up here, this is what I end up doing, and I wanted another cut right here, So I’m gonna say go up here. It’s a little actually off, but. It’s cause I actually, what I ended up doing was shrinking it down so, this cut here, I’m just gonna follow it for the heck of it, right? And I’m just gonna go right here and then connect it. Just so you guys know, like I said, this is not really the portion I really wanna show, but just the sense of just, if you guys really thought this was really cool, I’ma show you guys. We’re gonna fill this in with black, right? So this is just simply what we have right here, is this little black bar right here. This is where the text should be laid out. So be mindful, let’s say if it’s a donation, you’re gonna have to make sure it’s more, I guess, for a default size, right?

Cause we’re not using any coding where it comes to like JavaScript where you can actually kind of cut or how do you say, give you guys a correct sizing, but I believe it’s JavaScript, where they can kind of like cut down on what the length of the actual message is. So you just gotta be fair with the amount of default space that you’re gonna be having. So for me, I know I’ll probably only be using this for maybe like a donation, like I said, something like a subscription or a follow. So just give enough space for the actual name to be, like I believe the max amount of characters you can have on Twitch is like, I don’t know, probably like around 15 or below, probably like 12, I don’t know. But just be careful with the amount of space you’re having so it just becomes not a problem in the future, right?

So what I’m gonna do now is I’m gonna go ahead, double click on this, just throw on a nice little simple gradient. And the gradient I believe I use for me personally, which is something around like this area rate, I don’t know, let’s say right here, ‘kay? So for this one here, it’s just the black on the left hand side, pure black. And then on the right hand side here, this is the hex code 12151A, press okay, press okay again, then press okay again. Right so that’s our first little bar here, right here. Right? So what I ended up doing just to make it more techy, so in that sense here, what I’m gonna quickly just do is just do this little, this first icon bar.

So you just don’t have to keep putting it up. But what I wanna do is just simply go like this, pen tool this out just like so, you can do any shape, you can do whatever the heck you guys want, be mindful once again, I’m gonna say it once again cause I feel like you could be like, yo Seso, what’s the point of this? Really just to show you guys, you know, you can just do it here first and then work in After Effects. So yeah, what I ended up doing for this here was I made a white little gradient here. And I believe I have this one already set to this really cool sort of off-white blue. D2D9F1, and the middle here is just actually just E7EEFF, really close to white.

And on our far right side I believe it’s D9E3FB. So that’s the little gradient there. And that can just stay just like so. And I’ll put the logo in after or whatever I’ll most likely just use this alert box that I had in the beginning and I’ll just gonna delete what I did for you guys, just so I can make sure, you know, really quick with transitions and stuff like that. So yeah now we have our bar done with the little gradient overlay that we have, our little icon box. Right you can name it as so, I’m just gonna group this together so you don’t have to worry about this right now. Let’s turn it on really quickly, too. ‘Kay, cool, so I’m gonna do, just say for the heck of it, I’m just gonna make it a little bit more different for the sake of whatever. But I was gonna say you know, in these little cuts here, you’re gonna have a little bit more fun, and add these really cool bits of color in.

I’m just gonna add like a cool pink this time, cause I feel like pink’s, or that reddish pink is like one of the coolest colors I feel like ever. Right, I think that looks pretty cool. And then you can do the same thing way on the bottom here. Right? I’m just basically really working with the pen tool, really, really being rough and kind of I guess you would say non, I have no real thought through it, I’m just kind of like adding stuff for more of a techy feel. And it kind of feels cool so I’m gonna say hey. I’ll add in this color here again, right? Just like so, so all I ended up doing, cause I don’t, right click, fill path, drop down, contents, color, it’s how you choose your color, press okay, just like so. And then I believe we’ll have maybe this one, maybe we can have this one here compliment this little icon box right here, and then I’ll make it this cool gradient but from before, right?

[elementor-template id=”10226″]

And then on the far right side here, maybe we can do, no let’s actually do this entire thing. So let’s actually take this entire thing, and make it do like this. I’m just gonna be different from what I did before. Just for the sake of showing you guys I can be fun and random, you know what I mean? So I’ll just fill this in, this is already has the actual gradient overlay on to it, that looks pretty cool, and that can literally just be your box.

So honest to God, like I said, it’s just this as simple as just kind of figuring something out. If you have a different theme, maybe you have like, for instance, just sake of content, like a Naruto theme and you can have this like be a scroll and then you can have the scroll be a simple little asset, right? And then you can have like a really cool scroll kind of, you know plain or texture and then have that roll out. That’d be kind of fun, right?

So just kind of give you guys different ideas and what not but just be mindful, it’s just like as simple and don’t worry too much about this. But I’m gonna move this into After Effects to at least show you guys the process of creating it into an actual GIF, into an actual Twitch alert afterwards. So I wanna throw this inside, like I said before, I’m gonna use this right here. Which is the one I already made before, and it’s nothing really that much different, literally just a different cut out, you know what I mean? So what I’m going to do is just jump this into After Effects right now, and let’s get this thing going. All right guys so before you hop onto After Effects of course make sure you guys save your actual PSD, under somewhere you can definitely find it at. I just saved mine on my desktop as alert bar.

Adding Stream Alertbox to After Effects

So what I’m gonna end up doing for me is I’m gonna go to After Effects here. I’m gonna go to file, import, right? I’m gonna go to import file, right just like so. And on my desktop, like I said before, I’m gonna type in the word alert box, that’s what it’s called, dot PSD, press import. Now for the record, a lot of people say, can’t you do this inside After Effects?

For sure, but I’m just so comfortable just doing it like this for some reason, where I just design in Photoshop and move it into After Effects, just cause simply I don’t know the tools as well as I know Photoshop wise. And if I wanna add textures and stuff like that. Just for the simple sake of being comfortable. Just be mindful, like the entire first step is all about you what your theme wants to be, and this step is more or less what you probably wanna know.

So important kind, if you’re importing of course from a PSD, make sure you do composition, retain layer sizes and then also make your layer options, editable layer styles, right? Press okay. So once you have that open, you see it right here on your actual file projects right here. You just wanna simply just double click on the word, that actually has a word composition here, so alert box. So now you’re gonna have this right here.

So I made sure, I’d lay my background layer delete. So we of course, in an actual Twitch alert, you don’t wanna have a background, you wanna have it be transparent and so with that being said, you wanna make sure that this is no longer be showing, so make sure you of course take that off. Now also make sure you have this toggled, cause if not it’s gonna be black as well still, you’re gonna be really, really, confused.

So make sure you guys also turn this on, which is the transparency grid, which will make sure to allow you guys to know if there’s anything ever, I guess not transparent, right? I’m gonna zoom in for a second, so I’m gonna just do a very simple sort of like, two tick kind of thing, right? I’m just gonna simply make the actual icon box come up to show my logo, and I’m gonna make the actual rest of it come out, and then we’ll of course time the actual text and stuff being presented to us.

Start Key Framing the Stream Alert

And I believe the actual, how do you say, the composition settings should be around 13 seconds. I’m ’bout to say 13 seconds is where I believe, I think the actual default Twitch alert sounds is 12 seconds so this is me not doing any JavaScript, so we’re only really gonna be working with, if we need to change anything, CSS and HTML if we ever have to like change any thing when it comes to moving the text around or whatever, right? So when it comes to JavaScript, this is where you probably would figure out how to actually do all of your motion and how much timing is needed for text and what not.

But for the sake of not having to worry about that, just kind of start your animation at you know, whatever frames, but end it at around 13 or 12 to make sure when the actual text goes away for the default text Twitch alert, I’m trying to make sure I’m clear as possible, then it’s around 13 or 12 seconds. So I’m gonna press okay, and that is now that.

So I’m gonna make sure this is also coming out here, all the way, right? Cool so with that being said, 13 second composition setting is how you do that. Also if you didn’t know how to get to that table, just simply right click composition settings, and then just change it right here, duration. This is 13 seconds, this is milliseconds, make sure this is not 13, this right here, if you change this to 13, that’s 13 minutes. This is so you wanna make sure you’re right here in that middle section.

Okay, cool, frame rate, 30 by the way. So what I’m gonna do, is I’ma firstly just take this little icon bar, now if you really want to, you can just leave this background, you won’t need to keep it there. You simply just take this icon bar, what I’m gonna end up doing is I’m gonna say, hey I wanna kind of start this animation to be at around like one second, right?

Cause we don’t really have to have that much empty space, because the longer it takes for you to actually get the animation started, is a longer duration it is for the text to kind of go away or come in and what not, right? So, I’m gonna say one second is perfectly fine. So, if you guys wanted to learn how to get your position into one spot to another, you simply press P on your keyboard, which is the of course, shortcut for the word position here.

So what I’m gonna do is position where, without moving it yet, we’re at that one second mark where I kinda wanna have it be in this area at one second. Take this key frame, just like so, and then at zero frames per second, we’re gonna get this out of frame. Now this is another reason I ended up cutting my PSD down, my actual working document size down, is so this can look like it’s almost popping up in the actual scene of whatever gameplay you’re working on, or whatever, your stream or what not. So it kind of pops into view, without it you kind of probably see it coming up from like the bottom of the screen, flying up.

Now if you wanted that to happen, obviously you just make your document size that big, which is like 200×1080 by the way, right? So now that I have this, if I just quickly play this, of course you’re just going from point A to point B, very very simply, very actually static as well. And to get rid of that sort of like static movement is easy ease. So the way that easy ease is these keyframes here, right? So with these little stopwatches and stuff like that, moving the position from point A to point B, you create keyframes of course. So with keyframes here, if you guys did not know, if you press U on your keyboard, by the way, if you ever need to find your keyframe, let’s say you close down your layer and you’re like, crap how do I get back to it, and you’re like, worst position, or whatever, effects anything, whatever is keyframed, if you press U on your keyboard, it automatically shows you where your keyframes are.

So in my sense, these two things right here are my keyframes. So what I’m gonna do is I’m going to highlight these, excuse me I’m gonna right click them, I’m going to go to keyframe assistance, and I’m gonna go to easy ease. And when my easy ease is selected, they turn into more of like an hourglass feature. So what I’m gonna do here is I’m gonna go to my speed graph here, excuse me, my graph editor, and make sure you’re on speed graph, ‘kay? So this is the big kicker for a lot of people when they get kind of confused, because if you’re in your speed graph here, you’re actually not default on this, so make sure you change from value graph to speed graph, okay? So with that being said, then you have your two keyframes, and this little very simple arc here. So this arc is representing that very quick, or excuse me that very static movement, right?

So if you guys wanted to play around with that, and kind of mess around how fast things can happen, what I would like to do is say, hey, in the very beginning I want this to be super, super fast, and then just come in, or excuse me, come in super super fast, kind of slow down. But it’s still one second, so it’s not gonna show too much, but for the sake of just, kind of like see how subtle that looks, a little more finesse, I guess you would say. I think it looks personally pretty good. So, I’m just gonna turn that off now, just kind of get back to my timeline, I just simply click back on the actual graph editor. So I’m gonna have that first, very simple fly in animation which looks really cool, very smooth. Now what I’m gonna end up doing is do the same exact thing for my bar here. I’m gonna kind of make it slide out this way, right?

Or camera, yeah that way, right? So what I’m gonna do is go frame by frame ahead, so basically right where I kind of finished off my little icon bar here, so my icon bar coming up. So I’m gonna go to my bar here, I’ma go to maybe like let’s say, we want this to take no more than like two seconds. Okay we’ll say two seconds is our no more, at two seconds we want this to be still frame, at this point right here, that way your text can be showing right now, it’ll last for about 8 seconds, and then it’ll go away, right? So , excuse me, what I wanna also add, is if anyone does know the whole JavaScript and how to work with text, if anyone wants to post an actual, maybe like a template people can use, that would be super, super, really, really helpful, honestly for anyone who’s really wanted to do that, so let’s just use this video as a learning experience for anyone, honestly. Just for the sake of, you know, whatever, you know what I mean? So what I’m gonna do is I’ma go ahead and personally, make sure we go to our position which is P on our keyboard.

Excuse me, and then we’re gonna take this little stopwatch, and we’re gonna click on it, so that way we know for sure at two seconds it’s gonna be in this spot. So I’ma go to about one second, like I said before. And this is done, right? And I’m gonna take this position of the bar, and just simply just click on it, hold shift by the way, it’ll keep it on the same axis. So if I hold shift and click and move it, it’ll move it perfectly on that same straight little line axis, right? Move it all the way out of frame just like so. So if you quickly wanna render it out just see what’s happening, you’re gonna get the fly in, and that little sort of like bar coming in as well. So of course, what you probably suggested is the easy ease keyframe and we’re gonna simple go to the graph editor once again, and we’re gonna make this kind of do the same exact thing.

I’ma say really really fast, and then kinda smooth and kind of like you know slower in the end. So that’s what basically moving these things are. So if you guys wanna get more context, you take this little yellow bar here, this little yellow line, which actually ends up being an anchor point or a, how do you call it, a handle, excuse me. Right you wanna take it, just move this basically as far as you can to the left, which is around maybe a full square but of course you started in the half of the square, so it’ll gonna be a full square basically, cause you end off in the half square here as well. And what I’ma do is take this little bar here, or little handle here, move this a little bit up, just about maybe like, you know honestly a centimeter or two up. And then you wanna take this graph editor, turn it off again, so you can see, it’ll render out really quickly.

It’ll play again, just like so, and it kinda comes in, and I believe it moved, it didn’t move, or is that just how that works? It looks like it moved for some reason for me. No, okay, I thought it moved, the actual bar moved up and down, it kind of looks really weird, does it not? That’s just how, I’m making sure it didn’t move. Let me just check the actual graph editor, I actually don’t know. No it didn’t move, it just looks like that because all the cuts I did kind of gives it that, feel that it’s moving because of this bar right here, and it goes off again, right here. So I thought, it looked like it moving. I’m gonna stop moving, but that looks good. And I’m good with that. As long as I’m not trippin’ I don’t think I’m trippi’, okay, all right, so. Now that it’s basically done, that’s almost the entire animation part of this personal video here, right?

So you have of course your icon bar coming in, and then your bar coming in, it lasts all the way, until around 12 seconds or 13 seconds. What you wanna make sure you do, is you wanna make sure you close it as well. So the way I’m gonna close it, I’m also gonna add the cool little effects, by the way from AEJuice, in a minute here, excuse me. What I’m gonna do, is I’ma just take these keyframes here, copy and paste them, so I’m gonna press control C on my keyboard, I’ma do it a few times, I gotta make sure it’s actually copied on my clipboard. I’ma go to around, this is one second, so I’ma go to around, right before 12 seconds, and I’m gonna press control V.

It’ll give me these keyframes here, just like so, and what you wanna do, is because if you leave it just like this, what’s gonna happen here is, it’s gonna fully go in, and then slowly start going back, so you don’t wanna do that. So to actually fix that, is you simply just take the first, or excuse me, the last keyframe right here, control C, you put it right behind this keyframe here, which is the one you made a copy of in the beginning, right?

So I’ma just put it right behind it, one keyframe behind it and then control V, and that’ll key it nice and steady, all the way until you know, 12 seconds here. So it’s gonna keep it nice and firm in the position that you need to have it last or whatever, right? And then it’ll go away. But you also need to fix this in a second, cause you see how it just quickly goes back like that? All you gotta do, is simply take this second keyframe here now, it’s the second now, take this move this down here, you take the last one move this up here. And that’ll assure you guys that it’ll actually go in, just as simple as it came out. So, let me make sure this renders out. And then it should just simply just go right in now. Perfect, so, obviously the same thing’s wanna happen for the actual icon box here. So control C, we’ll start this off right around here.

Control V, we’re gonna take this last one here, control C, put it behind the keyframe here, control V, and then we’re gonna go ahead and take these and just swap them now. So this one goes here, this one goes here, right? So now, I’ma go back again, as you can see, renders out, and comes in, you wait for the text, this is where, hey someone donated $1,000, right? And there you go. So if you guys actually wanted to be more, you know the actual bar comes out first and then the actual, how do you say, the icon box, right? We’re gonna take the bar, and just move this further back. So you want this to come out first and then the this comes down.

I believe that’s a little more accurate to how I want it to be. Now you see how the bar is actually going away around 11 seconds, that might be a problem for the sake of it. If I need to go back in the composition to re-render it at 14 seconds, then we do that as well. But just keep in mind, like I said before, it should be around 12, 13 seconds, so this might be a little bad in the sense, so I might actually have to you know, go over here, and go to like 14 seconds here and then extend this. Which I’m just gonna do for the sake of the video. That way we kind of have it be more round that 12 second mark originally, so when it fades away, the text fades away, we’re not just getting lost, the text’s not just getting lost, right? So that being said, we’re pretty cool, and we’re pretty good to go. So I’m gonna show you guys, this is really cool, the fun things now.

This is the fun part for me. So when you actually download the manager, it’s in your windows. So if you wanna go to AEJuice Pack Manager 3. Now they gave me a license of course, so I do have different, I have other ones. This is the starter pack by the way. The starter pack has a few things, like this right here is actually pretty cool. These are still pretty cool, honestly for a starter pack. This stuff right here, these can make for some really cool little pop ups, so you wanna, maybe if you want your actual how do you say your Twitch alert or whatever to be a simple little burst like this, just kinda burst out and then show the text itself, that can be cool in itself cause you just, of course, how do you say, your Streamlab, you can still change your text around, you know what I mean, you just have to be at a default text, which a yikes.

But see this kind of stuff here? It’s very very cool, circles, little fun little just, I can’t explain how cool it is, because for me personally, I just see a couple you know, tens of videos, you know what I mean? This kind of stuff, what the heck? I didn’t know they had this though. But this is all a starter packs, what the heck, look at that. How cool can that be? If you throw this in first and then just have like a very simple side bar, how we did with the actual bar right here, kind of just slide out, right but more in this kinda style here, more like a, almost just like an outline, I’m giving you guys so many ideas. If I saw this, I probably would’ve done that first.

Adding Asset Elements from AEJuice

Anyway, we’re gonna throw into, we’re gonna excuse me, go into the liquid elements which personally, is the license they also gave me as well. I believe this was $99 but it comes with a crap ton of things. The one I used was electricity, so I wanna use the same one. Before I use that one, I’m gonna use the one I use for the icon box to kind of burst. So, I’ma click on this, I’ma click on the word import, and it’s just simply import, as you can see, it gives you this folder here, it says do not edit, so make sure you guys do not edit it. I’ma go ahead and exit this out. And now, I’ma simply just take this, zoom out a little bit, and I’ma make this a little bit more smaller, ‘kay? I’m gonna throw this behind.

Now let’s play with it a little bit. I need to find out where the icon box comes up right around here so this is where I want this to be, ‘kay? So now it should kind of come up and be surrounded here, I’ma make sure I move this around a little bit more. Okay, so I have, I just wanna make sure I place I kinda place in the right spot. I’ma drag this below my icon box. Now this actually can be replaced with the one that I showed you guys that was free.

So this is gonna be replaced, just the same thing that’s happening right now, just do this one with this right here. Right, this explosion, right? That works perfectly fine. Delete this, get rid of this, right? So it’s just gonna be nice little swoop. And I’m gonna change this to orange actually. I’ma change this little thing to orange. Way I personally did that, I don’t know if there’s a setting to fix it. Oh, I can show you guys that too really quickly.

Windows, this pack right here. Excuse my ear’s like weirdly poppy, and I have no idea, so I keep trying to like yawn, anyway, if you guys actually click on this here. I’m just gonna go here for this one I believe. So I don’t know if all of them have it, but this personally has this one, so I’m gonna go to let’s just say, the combo ones, right? I’ma click on this, if you guys click on the settings, it actually shows you a different, they have different like layers so you can have rough edges, pixelated one looks super, super cool, you could make some really cool pixel kind of banners or, banners, pixel kind of animations very, very easily with this pack here.

So I don’t know, I think this is honestly way, way, way too cool, and I think they’re way too cool to be giving me this kind of stuff. Cause I’ma use it, honestly. So, like I said before, you know change the color of this right here, this little explosion thing, cause everything is orange, this is blue. So the way I personally ended up doing it, was I took the hue and saturation, so the way I brought it up really quickly is under effects and presets, just type in hue. And you get hue and saturation, you just simply click this, drag this onto experiment one, and I’ma just drag this up a little bit more. I wanna kinda of get the orange and the thing in place, but I’ll just change it to orange.

I’ma take the master hue here, and kind of just take this, and kind of move this around till I find like an orange. I believe this is as orange as it’s gonna get maybe, like right here. And then a little saturation up a little bit more. Right how close is this. It’s a little more lighter, so it should be a little more yellow-er. Yellow-er? Yellow. Like that, and I’ll say like, this, we’re trying to get as close as possible for now. And I’m gonna say maybe that’s pretty good, right? It’s a little more darker, for the sake of the video, that’s okay, I’ll fix it for the sake of you guys for the video and what not, but this is pretty cool. Now you’re starting to get a little more cooler kind of just features to it.

A little more characteristic to it, or characters to it, excuse me. Also, I just realized that we didn’t fix the, it comes in really slow at the end here, or goes away really slow, we want this gonna be really quickly, or excuse me, go away really quick. So what I’m gonna do is I’ma take these keyframes and move these in. And this can help me eliminate also the timeline issue that I was saying before. This right here should be like this. Right so now it goes away a little more quicker. Right so when you see this coming up to the end, it’ll go away really, really quick, right? A little more quicker, cause you don’t want it to be, you know last forever.

Okay. So then you have a little fun little liquid kind of stuff coming in first. Kind of gets engulfed there. Now what I wanna personally do here, is I’ma go back into this pack, go to windows, go to AEJuice manager. Now, like I said, whatever free ones work in your aspect, just let it be, but I have this really cool electricity. I think it was number two, I’ma import this one. Kay, you see how slick, look how easy that is, it’s kinda scary how easy that is. And I wanna take the rotation tool here, rotate this holding shift. And I’ma make this more smaller, excuse me, click on this, make this a little more smaller. Once again, okay, my right clicks are horrendous.

Please make it a little more smaller, ‘kay. We’re gonna zoom in, and we’re gonna say like right here. I’ma make a little bit more smaller again. Okay, I’ll set it right about there. So if I just kind of have this be like this, it’ll look like a electricity’s kind of pushing the actual bar, right? Okay, okay, looks pretty nice, so right? I’ma also add another one, so I’ma simply press control C, control V, right? Move this up here as well. And I’ll move the timing a little bit more, because it’s gonna be a little more after. So, this is gonna come in first, and then this part’s gonna finish it off, this should be a little more down here. And I think, that is pretty badass. Honestly, I’m yes, down for that. Render this out really quickly. Yes, okay, yeah, okay see I’m, like oh dude, I can’t personally wait until I can use this, to like its full potential. But I’m very happy with this, I think it looks cool, really dope and it definitely works out. So here comes the hard part. Not really the hard part but just more paying attention part, okay? Cause you’re probably gonna make this mistake.

So, the way to render this out is, you either go to composition, right? And then go to add to render queue, so either do that or press control M on your keyboard, just like so. Please, why, just why. Why is it when I press record, I swear it was working perfectly fine.

Rendering the Animated Alert Box

Control M for me just does not work, when like I’m recording for some reason. Okay, composition, we’re gonna add a render queue, okay. All right, so, render settings.

You’re at best, you’re at you know 30 frames a second, you know didn’t change anything in here personally, I did not, so I’ma press okay. So I’ma go to out put module here and format. This is what you pay attention to. So I was doing TIF files for this for some reason. Now for whatever reason, if you’re a GIF, or excuse me, if your alert needs to have a background, then you wanna use TIF sequence, right? And then of course, whatever background you have, make sure it’s obviously enabled and checked invisible, right?

But, if you guys do not want to have a background, which is my problem that I had for some reason, I just couldn’t register in my head. You wanna make sure you use PNG sequence. Make sure you click on PNG sequence, the PNG sequence allows you guys to of course to have you know, it’ll be a PNG also inside Photoshop for when you have to render it out as a GIF, which of course PNG’s the only real, besides one other format, that gives you guys a transparent background, because JPEG does not and TIF does not, right? So you wanna make sure you have that checked, excuse me, you know, clicked on. You wanna go to your channels and change it from RGB to RBG + Alpha. Now for me I personally probably do not need to do that.

For the sake of I don’t actually have a background. But just do it, make sure you guys do that, cause that’ll also of course make sure you have a transparent background being enabled when you’re actually rending. So once you have that, you press simply okay, and then you wanna do your output here, and I have mine, we’re gonna go to desktop. I’m just gonna make a new folder. So I’m gonna end up going to my desktop, going in, I can’t show you my desktop for you know, other reasons I don’t wanna show anything I shouldn’t show at the moment. I’m making a new folder and I’m gonna call it bar five. And I’ma now just gonna jump into that folder.

Right, I made a new folder, called it bar five, and simply just gonna call it, well you can call it whatever you guys want. But once you have that, you’re inside the folder, make sure you’re inside the folder cause otherwise you’re gonna have a lot of PNG’s on your desktop, and or wherever you saved it. You press save, you press render, and you just render that baby out. So, we’re gonna throw this into Photoshop and finish you guys off with a cool little, you know the part you guy’s been waiting for. All right guys, so easy part comes in right now. So I’m in my Bar Five folder, when you guys notice, you’re gonna have whatever you named your folder here. You simply just double click on it, and inside this folder is actually gonna be all the PNG’s needed from that zero to 14 second timeline range. So for me, it was 407 frames at 30 frames per second.

Finalize the alert .gif in PhotoShop

So you wanna make sure you select the one that first, that first one right here, you see how that’s actually a background layer? You don’t want that, cause actually in the GIF itself, it’s gonna render out with a background layer, and you don’t want that. So you basically drag and click on the one that actually is fully transparent. But before you do that, you’re just gonna take the first one, right? I’m just gonna take the first one for now, and if the first one’s also transparent, doesn’t matter whatsoever.

Just take the first one, take it and drag it to this little darker gray spot of your timeline, or your Photoshop, and just drag it in, just drop it in, and this’ll give you guys the perfect dimension that you’re gonna obviously need. And then with this being said, you wanna go to your window, you wanna go to timeline, and then once you have this first little layer in here and what not, just to kind of start you guys off, we’re gonna simply go into I believe it’s image, it’s not image, it’s definitely layer. Video layers, new video layer from file, and this right here should be bar five, right?

And then we’re in bar five, click back into the same exact thing as before, like I said before, don’t click on this one, we’re gonna click on the one that first starts with a transparent. Press open, and then what you’re gonna do is delete this other one right here. Right below it, just like so. So now what’s gonna happen is, if you wanna press play, or space bar on Photoshop, you actually get in Photoshop, the thing you just animated inside After Effects in Photoshop itself, right? So, excuse me, the very easy part comes in next, just gonna show you guys the full thing, rendered out. All right, it’s gonna be nice and smooth, very cool, I think that’s super, super sick. I’m very excited for this.

What I’m gonna do now, is I’ma press control alt shift S. Right, you don’t have to know all that. All you do is go to file, please, file, export, safe for web, right? So once you have this right here, you wanna make sure your settings, I’ll let you guys see right here for me. These are the sort of settings that I personally ended up using that kind of worked the best for me. You can play around the with GIF files, like I said. And also let me make sure I kinda reference this again one more time, if you guys can personally find a way to host a video of higher quality, like a .MOV, a .AVR or whatever you wanna use, that you can host it and kind of have that be the link that you put inside Streamlabs.

If you guys don’t know what I mean by that, just keep this in mind, that when you go into Streamlabs that you be like, oh I see what you’re talking about. Cause this’ll save you, a crap ton of trouble, and if you guys wanna get the best quality possible than that’s one of those things you have to actually do. But for GIFs, since they’re not that big of files right here and Streamlabs gives you up to about two megapixels or whatever to work with, it makes it super easy for you guys to work with GIFs in Streamlabs, it’s just one of those things that kind of how it works. So, make sure you go to GIF right here, in your drop settings, it’s probably on like default JPEG.

.Gif save settings

We’re changing to GIF, selective, diffusion, 256 color, make sure it’s not on 128. 128 gives you a little bit grainy kind of feel, but 256 will give you the most kind of, clearest kind of comp, what is it called, composed colors, sure? Dither at 88%, if you put this all the way up, I feel like it just doesn’t really do much for me. I believe 88 is where I kinda got.

If I put it all the way up, you can kind of see it. Let me see if I zoom in. I guess it would be more or less when you actually render it out you kind of see the difference, so 88 for me personally worked. If you wanna go 100, then try 88, go for it. The actual dither does the amount of dither.

That’s just what it says. And personally for me, if you don’t put it at all, you can still see it looks really, really weird. Why’s it not, it’s not showing a difference right now. Maybe cause I didn’t have, for my other project that I did for the preview, it had a little bit of a different texture and what not, but for me, dither, 88. If it’s different for you, or if you know something, not to use dither, maybe just let me know what it does for sure, for sure in this case right here.

But for me, these are things that I use, I’ma press save now, and then once your press save, it’s gonna ask you where to save it at, I’ma go to my desktop here, right? And I’ma go to bar five, and I’ma go to my alert bar, and just gonna save this as alert follow.

Press save, and it’ll save as a .GIF. So if you go into your, where’s my file, right here. Alert bar, bar five, the file’s now gonna be right here, and that’s gonna be your GIF, and it’s gonna be a nice short amount of size, and you’re gonna throw this into Streamlabs. I’ma show you guys how to do this really quickly because it can be tricky. Hopefully this part here is not too complicated for you guys and or my explanation’s not crappy enough, but we’ll give it a shot right here right now.

So I’ma drop in to Streamlabs, actually logged in to actually put this effect into use. Or what we just made, you know what I mean? All right guys, so we’re inside Streamlabs now, right? We’re of course in our desktop. Of course we’re under the actual Widgets category, and we’re under alert box which is where you wanna change and get your alert box going. So what you wanna do is of course, launch the URL here, launch this URL here, and on the right hand side I kinda already have it, kinda like squished in together so guys can all see it at one point. And I already have the word, if I just kinda like click on the test scriber, you guys can see what happens, it shows you guys a preview of what’s going on in your alerts and what not, right?

How to Add your Animated Stream Alert to StreamLabs

Which is really cool, really intuitive, and really cool for Streamlabs to kind of do that for you guys. So we’re gonna be using that to kind of, you know, gauge and whether or not things need to be changing. So the first thing I wanna do is of course, throw in our actual GIF, okay? So before we do that, make sure your layout, as you can see, it’s Gif and then the text under it, or ‘jif’, if you say ‘jif’, I actually don’t know if I like you.

Okay so we’re gonna do the middle one here, so you wanna make sure you have the actual image, and the text in front of it, that’s the layout that you wanna have. And that way, so if I quickly just press save settings, you can see what happens here, move up. Test subscriber, you would see that the text is now above the image which is what we want personally, cause we have it more like a back plain, and we want the text to be of course in front of it.

So, I’ma go ahead, also I forgot to mention, you see how it says just subscribed, so if you just, I don’t know why I keep pressing save settings, I just kinda have a habit of doing that. Right, you see how it says, it’s just gonna be your name or whatever name happens, just subscribed to you, it’s gonna say the name and then just subscribed, you can actually change it to have it not say just subscribed. And this is one thing I probably should have done, and so you put the words just subscribed or recent follower or something like that, inside the actual box itself when you actually create it. So that’s probably something I should have mentioned, cause I didn’t think about it literally until now, so maybe if you guys wanna make your box and kind of also have like a really cool spot to put like what it is about, or what the description of the box is, that’s probably a pretty good thing to probably do.

Let’s just go here, please, and then here. There we go. So now that I have that out of the way, you wanna make sure your text animation is kinda like around at least somewhat, right of an idea of what your actual text is. So for me, I’m gonna go with pulse cause I feel like it’s the most average one for me here. What I’m gonna go ahead and do, is I’ma go ahead and change media. I’ma go to where it says drop and upload, and I’ma click on this, and I’ma go ahead and just drop in that alert file that we actually rendered out in Photoshop of course, and I’ma open that up. So if you don’t see it, make sure you guys go to where it says my uploads, you click on all files, and then you’ll make sure you see your GIF.

So, I’ma copy my URL, just like so, press select, now this is what I was referring to in the past where I was like hey, if you have a site that hosts your .AVI or dot motion, this is what I meant, right? This is the GIF file that actually Streamlabs personally hosts cause it actually has, you know it can host GIFs, cause it’s not that big of a file. So this is what I’m referring to. If you have a site that you can get the actual .MOV file on this is where you would copy the URL, and then you would throw it actually into your enable, custom, HTML CSS, you would put it right into your HTML here, and you would throw it right under the image DIV.

You would throw it right here. And that’s what’s gonna give you guys that really I guess higher quality, if you can find it, and like I said, find your own way to host your .AVIs or .MOVs. So if you guys wanna have any input on that personally, maybe just leave it in the comment section for everyone else to listen to. With that being said, that’s that. I’ma just save this for a second, cause we’re gonna be in that in a second, maybe. Okay so now that I have this done, I’ma quickly just go ahead and press save settings, and I’ma go ahead and test the subscriber, and this should be, our box here. Now we’re finding the issue is the text is too big. Obviously, we’re gonna go ahead and hang here and take our text size, throw that down about maybe 28 or so, I changed my font already to NTR, it was just the least crappy font in my opinion.

You can’t upload your own fonts I don’t believe either, so that’s kinda whack but NTR’s the one that I ended up using, so what you’re gonna do now is of course change your text color. Now if you have the hex code, which is in Photoshop, if you wanna quickly just kinda go into Photoshop here, find the hex that you used for whatever highlight color you used, take this, you copy it, and then you throw it simply inside, excuse me, this little hex code pattern right here, right? So I’ma press save settings once again. And I’ma click on the word, test subscriber, and let’s see what happens here. And I think, that works. So the sizing itself works really really well for me. And the one thing I’m personally finding out right now is that the actual Streamlab size, the actual Streamlab’s I believe time frame is actually 10 seconds, so for some reason, that’s why I was like, you guys were probably wondering why the rest of the animation didn’t finish, the fade away is fine and what not, but if you actually wanna have the animation finish through, just keep your After Effects settings on the composition setting of 10 seconds.

I was personally wrong, but I did say I wasn’t incredibly sure, I apologize for not knowing, but I know now, it’s 10 seconds so just keep that frame, or keep that composition settings around that mark right there, but right now, I think that’s pretty good. I like where it’s at but the text itself needs to be moved over to the right a little bit more. And it’s a little bit too close to the left, and I want it to be a little more centered, so this is the really cool thing about Streamlabs and being able to actually edit and customize your HTML.

Moving text with CSS, were to drop URL for hosted sites with .mov and .avi web players

So I’ma enable this once again, so if you wanna change your URL, which you wanted to host for your own site or whatnot, that’s where this would go. But we want to go ahead and move the text over more or less to the right side. Now I already know how much I wanna move it over, cause I already tested it out.

However, what you wanna do is you wanna go over to line 30 in the CSS group here. You wanna go where it says text align center, you wanna click around there, and you wanna press space, or excuse me, enter. What that’ll do is it’ll create a new line which is line 31, which is the line we would need to actually be adding into this little alignment fix. So I already have it, actually copy and pasted inside my next monitor here. And what it is, is simply just control V, right? Backspace that little bit, right, so it’s margin, and then hyphen and left, and then I have it 7%. I personally already know it should be around 11%, to move over a little bit more, so it’s basically moving the margin more or less, 11% towards the left hand side.

Now of course, if you need to move it over to the right hand side you’ll still be able to switch that and move it to the right hand side, right? So, what I’ma do now is I’ma press save settings, and what should happen is, very very simply, press test subscriber, it should be moved over quite a bit more, and be fairly centered to where I want to be and I think that is basically it. So, that is basically how I would personally create these things, like I said before, I don’t know coding too much, and nor do I know how to host, I just don’t know how to do it. But hopefully someone in the comment section can help us out. But hopefully this gives you more insight on how to create your own cool Twitch alerts, right?

So with that being said I am done. This tutorial was very long, very tedious, because I just didn’t know exactly how to do everything. But hopefully this video here clears it up for you guys as I basically just kind of summed up everything I learned in six hours into this video here. So hopefully you guys enjoyed today’s video. I just wanna say really quickly as well, thank you guys so very much for the support this month has actually been quite insane if you guys check my Social Blade.

Just the viewers, the subscribers, everything. It’s just like, whoa. Like I appreciate you guys so, so, so very much, and I just wanna let you guys know that for sure. With that being said again, I have no idea what the 200 likes video Sleepy Down’s gonna be, but I do know for sure, very thankful for AEJuice for of course watching this video, and gives us those really cool assets like I said before, you download the manager on their site, just straight up on their site, and then it gives you a really cool starter pack for you guys to go off of. Okay, I’m not gonna say with that being said, though, this time, I’m gonna go ahead and just let you guys go with, thank you guys so very much for watching, I’ll talk to you guys later Seso HQ out. Keep smiling, stay positive, and stay freaking productive guys. Later, peace.

Credits and +1 rep: For Seso for the video  Remember to check her out and follow on social media.