How To Make ANIMATED Overlays For Free! (inc. Downloads/Templates)

today I'm gonna show you guys how to make a really simple really clean animated overlay for your twist dream a couple months back I did a complete redesign of my own twitch dream and one of the things that I implemented were these really clean really nice borders that just animate they have these two-tone colors that just rotate around my camera a lot of things that bothers me about a lot of people's overlays is that they're just way over designed so I just wanted to do something that's really minimal and something that's just not distracting now yes there are plenty of videos showing you how to do this kind of overlay from people that are way more talented way more artistic way more creative and just just overall way better people than me but pretty much every tutorial that I looked up always uses paid software like Adobe After Effects or Apple motion and I'm guessing you don't have to use either of those programs or you don't want to pay for them because they're really expensive especially when you consider that you can just pay an artist to go make the overlay for you so with that being said we are gonna be making these overlays without using any paid software only stuff that you can get for free I'm not talking about it like some BS trial software that like I asked you to put your credit card information and then like they start emailing you a bunch of stuff you don't care about and then they steal your information then they send it to the government then the government goes your house and like FBI open up and you're just like please I just wanted to make as well animated overlays also I know some of you guys are super duper lazy like me and but don't worry that's fine so because I'm such a saint I'm gonna leave a timestamp to the end of the video where I can show you where you can just download these overlays or free but for those of you who want to give me that sweet sweet ad revenue let's get right into the video [Music] what's up guys my D before I got started if you guys are interested in more videos on setting up your own twitch stream for making your stream look pretty camera stuff microphones whatever make sure to do all the YouTube subscribe thingies anyway let's talk about setting up this overlay let's break it down we're gonna be making this simple animated border that just has this 2-tone grading that just rotates around the camera and just loops over and over and over again here are the steps to making this and trust me when you find out how to make this you're just gonna be like wait it's really easier to do so the first step is just to create a normal simple rectangle and then we're gonna add a gradient to that rectangle using any colors of your choice so for me I went with like a purple and blue theme for mine because that matches my branding then we're gonna take that rectangle and we're just gonna rotate it using some motion graphic software and we're gonna take that rotating rectangle and then basically just cut out the shape of our camera border kind of like a cookie cutter and that's basically it it's really really simple but in my opinion it looks really dope now the shape of this border could be literally anything that you want it to be it could be like a square it could be a circle it could be a star shape you can do whatever you want with it so we're gonna need two things the first is some kind of image editing software preferably something that is vector based so similar to Adobe Illustrator but we're gonna be using something free called Inkscape and the second thing we're gonna need is some kind of software to do the actual animation so we're gonna be using hitfilm express because it's completely free it's pretty easy to use and I get to be honest just like the only one that I actually know how to use you'd probably also do this in DaVinci Resolve actually I know you can do in DaVinci Resolve so if you use that you can try that too it's gonna be the exact same concept but this video I'm gonna assume that you have some basic knowledge of how timelines work in video editing software and what keyframes are if you have no idea what keyframes are that's okay you might still be able to follow along this video if you're following along with this video and it starts to get too confusing I have another video that kind of explains what keyframes are as well where I just made like a really really simple stinger transition hitfilm so you get confused to watch that video so go out install both of those programs Inkscape it film Express I've left a link in the description box down below working at both of those programs we're gonna jump over to our PC I'm already at my PC but we're gonna jump load or PC and we're gonna do the first step which is creating the shape of our border god damn that is right okay so the first thing we're gonna do is we're gonna take a screenshot of our game and paste it into Inkscape and the reason why we're gonna do that is we want to get a rough idea of where we're gonna position our camera and how big the border needs to be so for me I've already done that I'm just gonna go paste in my screenshot here and this is where I have my camera set up and then we're also gonna resize this page so that it fits the exact size of our image so the quick way to do that is to just select your screenshot go into file and then go into document properties then in document properties you want to scroll down to resize page content and then you want to click this button that says resize page to drawing or selection and basically all that does is it just resize the page so now the page is exactly the same size as our screenshot now we're just gonna take this line tool and we're just gonna start drawing the shape of our border and the border can be any shape that you want so we're just gonna be creative just make something so I'm gonna fast forward this bit I'm just gonna create a shape and I'll see you guys in the map like a second for you guys so here's the shape I went with I didn't do anything too crazy I just made it a regular rectangle but then I like cut off the corners to make it just a little bit more interesting and edgy we're actually gonna change the color of the border to red you're gonna see why in a second we're gonna go to the stroke here and we're just gonna change the color to red this part is important now if you're going for an irregular shape for your webcam that isn't just a simple rectangle you're also going to need to create a mask if you're going for a rectangle you don't need to do this step but if you're gonna make an irregular shape like the one we're doing you're gonna create a mask and all of math does is just gonna cut out the shape of your camera and I'll show you how to apply that in OBS later so to create the mask we're gonna do exactly the same thing like that we did with our border we're just gonna select the line tool and then we're gonna create the shape and then we'll have hopefully just a solid block and that will be our mask and this is what our mask looks like so we'll just delete this background here just so you can see what's going on so we got the shape of our border and then we got the mask inside and left a little bit of a gap between our outline and our mask just because I think that looks cooler but you can do whatever you want you can make it fit exactly up to you now all that's left to do is to export both the mask and the outline as two separate PNG files and before we export this I'm actually going to resize this page because we don't need this entire page to be exported so we're gonna just resize it the exact same way that we did before so we're just gonna select our outline and our mask and then go document properties and click resize page the drawing or selection and you'll see that the numbers change here I'm actually gonna make the page just a little bit bigger just to leave a bit of a gap around the border just to give us a little bit of space pretty much just resize the page so we'll start by exporting the outline and then we'll do the mask so we'll delete the mask temporarily and then hit ctrl shift E ctrl shift e to go export and then just select page as the export area and just save it as I'm just gonna call it outline and then hit enter and then we're gonna bring our mask back and just do exactly the same thing so we're just gonna get rid of our outline and then export the page and we're gonna just gonna call it mask and hit enter again our final result should look like this we should have one file which is our mask looks like this and then the other one is our outline now that we got that next step we're gonna move on to is animating the border so since we're animating in hitfilm express we're gonna open it up go into new and then we're gonna set our resolution and our framerate the resolution doesn't matter you'll see why in a little bit but the framerate kind of doesn't matter if you use a higher framerate like 60 fps you're gonna use a lot more of your GPU so if your GPU isn't that great you might want to use 30 FPS 30 FPS for what we're gonna be doing is gonna be just fine but for me I'm just gonna set mine to 60 fps okay and then set our duration to and I will just set it to maybe 10 seconds when your project is opened up you want to go and get your outline that you created drag that into your media pool and then drag your outline onto your timeline on your timeline you want to right-click on the outline and you're gonna create a composite shot and basically a composite shot it's just like it basically turns the image into its own self-contained entity that you can layer different objects onto and animate so that's what we want to do so we're gonna make a composite shot now on top of this outline we're gonna create that initial rectangle that we're eventually gonna rotate so to do that we're gonna go into new layer and then add a plane and then we're gonna size the plane big enough so that when you rotate it it covers all edges of this outline so I'm just gonna do like a complete guest and just say I don't know like 512 by 512 should cover cover about okay I did the math and that's exactly the right number so now over the viewer you'll notice we got this big white rectangle that we just moved around it's covering our outline and that's exactly what we want you want to make sure it covers everything so that it doesn't cut any of the corners off you made your rectangle too slow it's gonna cut out some of the corners and it's just not gonna look right then the next step is we're gonna add our gradient to our rectangle so we're gonna expand go into effects we're gonna go to gradients and fills and then go to color grading nice found at first try like instantly you'll see whatever color gradient now we're gonna change the blend to normal so it just creates a normal gradient so we've got that gray to white gradient we're gonna change the colors to whatever colors we want so I'm gonna start change this to a nice purple let's make it a nice switch purple here and then we're gonna change the end color to a nice let's just say you know what we're just gonna leave it white the effect we want is basically to have this rectangle rotate around like this the way we're gonna accomplish this is by keyframing the rotation of the plane so we go down to transform and then select rotation and then click on this circle here that's gonna enable keyframes for the rotation you'll notice that it added a diamond right here and that diamond just denotes the first keyframe and what we want is by the end of the animation it would have done a full rotation so we're gonna move our playhead all the way to the end and then we're gonna increase this number here by 1 and basically all that does is it tells hitfilm by the end of the animation do a full rotation and then if we scroll the playhead along to see our rectangle is moving on its own okay so I think the animation is a little too fast so what I'm actually gonna do is I'm going to go to the editor right clicking the composite shot and then we're gonna change the duration to let's just make it 5 seconds so it's gonna be a half as fast as it was before go back to the composite shot and we want to make sure that we just extend everything to the end and move this keyframe to the end and make sure a plane extends all the way to the end of the animation if we go back and play this again I think that looks a lot better and then finally last step we're gonna cut out the shape of our border so how do we do that we're gonna go to keying and then we're gonna go to Matt enhancement and then add set Matt I totally didn't look that off just then you're gonna want to go and expand this set Matt effect and then your source layer is gonna be that initial outline that we added to our timeline so if we click on it and we see this outline dot PNG that's the outline that we made so we're gonna select that and it just automatically just cuts out of our shape if you go back full quality and play it again there we go we got our full animation out so our animation is fully done all that's left to do now is to export it and hit film Express that's kind of tricky and the reason why it's tricky is because we want to be able to export but with a transparent layer in our final video file the problem with hitfilm express is while it can do that it does it uncompressed so the file sizes are just massive so we're gonna have to do is we're gonna export it uncompressed some hitfilm express but then we're gonna use a converter to transform it into a smaller WebM file that's just tiny and much better to work with the back in hitfilm we're just gonna right click on our composite shot go into export export contents and then we're gonna select here uncompressed avi with alpha and that alphas our alpha transparency layer so we're just gonna output this and we're just gonna call it border and then start exporting okay our export is done so we're gonna open up the file and we're gonna right-click it and we go into properties notice how like this is only like a really really simple really basic animation that's five seconds long and it's a hundred and thirty megabytes if you have something that's even a little bit more complicated this could be like multiple gigabytes and it's insane so we want to compress this down into a smaller file and the way that we're gonna compress it is using a script that I actually wrote myself so I'm gonna leave a link in the description for where you can go to download that'll be in my discord so I'll upload the converter scripts that I wrote so just download that I'll put all the instructions for how to do it but basically what you want to do is just take your big avi file and then drag it onto the script and then I'll start Rhian coding that giant file and make it into a much smaller WebM animation okay your script is done so I'm gonna go into our process folder and we'll have this new border dot WebM animation and we're just gonna open it up and this is our final result so all that's left to do is we're gonna add this into OBS but before we do that for the people who didn't watch the entire video that I worked really really hard on you can download the designs that I've created just go into the link in the description that will link you to the discord and inside the discord there's gonna be a text channel called design files and inside that channel there will be three designs so the first design is just like a normal rectangle with four different colors the second is a sort of it's still a rectangle but with the corner cut out and that all says four colours as well and then the third design is gonna be a circle so it's an animated circle again four different colors just going pick the design that you want and you're gonna want to files one is gonna be a web em animation the second is gonna be a mask that's what we're gonna be working with okay cool so we're all on the same page now whether you watch the video or not now you can open up OBS go into your camera the filters and then add a filter called image mask blend you're gonna change the type to alpha and then select the mask file you either created or the one that you downloaded from the discord essentially all this does is it just cuts out of shape for your camera so if you're using just a normal rectangle you don't have to do this step so you can skip it but if you're using any of the other shapes you're gonna have to add one of these masks and then you're gonna create a new media source so right click add media source and then you're gonna select the WebM animation again that you either created yourself or download from the discord just make sure to check so that the animation loops when it finishes and doesn't just stop at the end of the five seconds press ok and then you'll see your animation appear on your canvas and then just position your camera so that it goes inside of your border and that's basically it put your border your camera wherever you want in your scene you're done so there you go here's your final result but feel free to experiment hitfilm express is really powerful and if you want to go all out and make a really advanced overlay you can do that in hitfilm express the point of this video was not to show you how to make this specific design but really just to point out that hitfilm express exists and you can use it to make overlays because I haven't really seen anyone do that before so do your own research practice using hitfilm express and make something really really creative and if you do make something of your own feel free to share it with the rest of the community in the discord this is a channel there called stream resins where you can post all of your layout designs or and overlays a lot of people have been doing that lately and it's been really awesome to see what kind of things you guys can come up with you guys have any questions leave them in the comments down below also you can catch me my twitch streams i stream four nights a week where we do a lot of just chatting and you can ask me literally any question related to streaming we spent a lot of time talking about that other than that you guys have been awesome and I will catch you guys in the next video [Music]

Channel: nutty

Views: 564,359

Keywords:

Id: VJQs62Rry7o

Length: 17min 14sec (1034 seconds)

Published: Sun Mar 08 2020