How to Make FREE Animated Overlays for Twitch Youtube OBS streaming

all right second time's the charm hey guys get level here and today we are going to cheat that's right we're going to cheat we're going to be creating an animated overlay that will not require any motion design or video editing software in fact it's not going to require any software at all we're gonna use our knowledge using photo p which is a web-based free photoshop pretty much and a media source inside of obs studio or streamlabs obs we're gonna be using the filter image mask blend and when you put all of that together boom animated overlay all of that completely for free nothing that we're gonna be using here will require you to pay any money at any point so i'm particularly excited for this one let's listen to a message from our sponsor and then we can start this portion of the video is sponsored by own pro own pro is a complete service to help you jump start your streaming career by offering you every single thing that you need in order to become the streamer you've always wanted to be you'll get access to over 600 overlay packs and alerts you'll get widgets such as events list stream labels you need help managing your stream here's a custom chat bot own pro even went as far as creating copyright free music just to make sure you stay on the safe side on pro has the biggest library of overlay packs on the internet and allows you to install them in one click look at that there's so many now i've been working with owned for a while now so they decided to throw in 50 off of their pro plan so if you want to upgrade simply use code guile g-a-e-l for fifty percent off but i'll let you find this out at own dot gg slash guy level pro that is o w n 3d dot gg slash guy level pro so you can hear me see that second time's the charm it's because i messed up completely the first time let's start a new go to photopia.com actually let me just refresh boom yeah i want to lose everything that's fine boom you go to photopia.com this is what you're gonna see you're gonna click on new project and up there we're gonna put 300 when it comes to the dpi it's going to change your width and height what you can do is select that type 1920 correctly not like me and then 1080. this is the size of your canvas if this is the size of your canvas i must say and uh we're going to select the rectangle tool right there if you don't see like a rectangle just click hold and then pick rectangle boom drag there and you're going to pick your background color we're gonna do we're gonna go with a gradient type of um a gradient a grayscale type of design because we are going to assume that the animated part will be the colored part okay and that will also allow you to pick whatever color scheme you want so everything i'm gonna do here in photopia is gonna be black and white and then we're gonna use uh white for example as our transparency color in order to add our moving background underneath it are you keeping up are you keeping up okay cool so now uh the most basic thing that you do usually with an intermission screen is that you create some shapes for the camera you create a shape for the game lobby and then you create a shape for chat let's do that right now with a rectangle and let's go ahead and do this for example boom in order to make sure that this is going to be centered i can press ctrl a press v to have the move tool ctrl a just selects everything so you can see here and then with the move tool whenev when you have a selection you have this menu right there that allows you to align stuff and right now i want it to align to the vertical axis so boom now it's aligned as you can see but it's the exact same color so what we can do is double click on the icon next to the shape and then change the color we're not going to see it because it's underneath it right now boom and then drag this up okay now it's visible you can press ctrl d to deselect alright or you can go to select and then deselect here okay so this is where our camera is going to be let's uh keep that selected and let's go back to our shape tool click rectangle tool and up top here where it says stroke we want to add a stroke that's going to be solid color boom and we want that solid color to be white okay 4.4 pixels is reasonable so we're going to keep it there click away in order to see the result and as you can see we have a beautiful stroke right there i'm going to press v to bring up my move tool i'm going to hold alt and i'm going to drag this and i'm gonna try to keep the same margin that we have on the left to the right i feel like that looks good uh if you're doing this at home take your time you know don't rush stuff i'm rushing stuff because i'm doing a tutorial on this side here i pressed ctrl alt t in order to transform this is what the little boxes are i'm going to drag this side in order to create what will eventually be my chat box and also my gameplay lobby right you don't have to follow the same margins as the outsides although it would probably look better that's completely fine now we're going to do a little trick with the rectangle tool we're going to click once and we're going to type 1920 by 1080 this will assure that we create a new rectangle that's going to be 16 by 9 which is the aspect ratio of our canvas basically and uh if you're playing a video game since this is what we're gonna display top right it's going to be 16 by nine also now it created it i can press ctrl alt t i can hold alt and shift in order to scale it down shift will maintain the proportion as you can see and alt will use the middle anchor point to do so it's just faster when you hold hold it like that so i'm going to try to place it top right and align it i can press ctrl plus in order to zoom in a little bit there you go and i can use the arrow keys to place it perfectly so that it aligns mostly with the left part when it comes to the the height all right and now i'm going gonna hold shift bottom corner bottom left corner and this is what i want to align right there nice okay the reason why we don't care about the top of the previous layer it's because it's the chat it's gonna go underneath anyways so i can press ctrl alt t with the chat selected i need to rename them so i don't lose you um or i don't get lost myself and then you want to try to recreate pretty much the same margin you have there there so it just looks more harmonious you don't have to also i'm eyeballing it no idea if this is correct it doesn't matter it doesn't look correct ctrl t again that looks good kind of um let's name them so you can double click on the names in order to rename them so this is chat uh this is gonna be the lobby of my game play because if i'm into intermission screen i would like to imagine that i'm not in the middle of a game right and this is gonna be the camera this is where the camera will be the face cam if you will and this is our background image so b k g control minus in order to zoom out and we have something that looks uh pretty decent if you ask me now if you want to add like extra decoration in order for it not to be you know rectangle-ish like that you can do it right now add some more white uh because the white parts are going to be transparent remember that part something that i like to do is just create like a little as trapezoid would trapezoid be the the correct term here ctrl alt t right click go perspective and widen it like that right click click scale and then just drop it down a little bit and then we can place it over there okay press enter double click on the shape to access the color when it's a shape layer boom why is it not oh it's underneath it okay let me put all the way up we're going to call this one decoration like deco boom uh you can hold ctrl on your keyboard and then click on one of the shapes in order to select to create a selection around the pixels of your layer so for example right now it's the camera i would like to select it i'm going to hold ctrl click on here boom i have a select selection what this allows me to do with decoration selected here uh with the move tool selected also is to align it horizontally boom now it's exactly in the middle of this layer i can press ctrl d to deselect and i can do the same thing for chat for example i can hold alt drag up to duplicate it click and drag ctrl alt t right click flip vertically ctrl plus in order to zoom in place it approximately hold alt in order to scale from the middle keyboard arrows boom boom boom um hold ctrl and then click on the chat to select to create a selection around the chat and then align it vertically uh horizontally boom so that is in the middle of the chat that looks decent now of course you can do more you can add even more decoration you know what let's do it let's let's add more decoration let me create something kind of thin like that maybe okay that's nice control alt t uh hover around the corner in order to create a rotation to get the rotation and then hold shift to have precise rotation for example i'm going from 60 to 45 60 45 i can just place it randomly around here actually no i don't i don't like that idea let's do this it's it's probably going to complicate stuff a little bit later on so let's not do that okay now we want to create maybe some decoration aspect for the background because we want remember we want basically everything that's going to be white we want it to be transparent and to reveal our animated background right which will have a bunch of colors we'll be moving and all of that so let's create uh let's say um just random maybe um those honeycomb patterns let's do this okay uh no let's control z on that and let's put six sides up top you have the number of sides and if you want a corner radius you can do that too press enter and uh let's create this i'm holding shift so it doesn't go everywhere and i believe this is nice now with the move tool selected i press v for that i'm gonna hold alt click and drag to duplicate them and i'm gonna try to place it wherever it feels right and every time you release it it basically creates a brand new one you can eyeball it it doesn't have to be perfect but of course it's gonna look better if it's really perfect i'm i'm making a tutorial um you should spend more time on it than i am i'm communicating ideas all right let's uh group all of them so i'm going to hold shift with the top one selected i'm just going to click the bottom one press ctrl g to con to create a folder a group if you will and i'm going to place that right on top of my background so it's still visible but it's going to be underneath um the rest so press v move tool selected and you can just place it like that you can control alt t and hold shift to maintain proportions like that i like that idea that's pretty cool let's hold alt and drag drop like this obviously you can still um rotate them and and all of that let's do this a little bit ctrl alt t rotate it maybe make it smaller holding shift i think that's nice let's hold alt and then drop around here i do want to rotate that too like that i think that's nice i think that is uh pretty nice now there's two things that we need to do we need to successfully export an image here that will serve as the overlay that will be on top of our background and on top of our camera so we need to cut a hole in this for the camera to go through but the thing is our background is a solid background we also need to have a hole in the background so now cutting and cutting a hole here in photo p is pretty easy because it's an image editing software and it's going to be a transparent png so we're going to do that with ease no problem whatsoever when it comes to the animated background that we're gonna use we will use an alpha mask meaning that we're gonna use an image that will serve as a transparency map what you need to remember is that white reveals in black hides all right before we do all that we need to bring everything together so i'm going to click on the top one here i'm going to click on the background while holding shift and group him up boom so now it is everything is grouped up i'm going to press ctrl a which will select everything and i'm going to go to edit and click copy merge so it's shift ctrl c all right so right now we have a copied a copy of everything that is visible within that selection what we can do now is ctrl v and now we basically paste a flat version of our image i'm going to turn off that background background too so with that layer selected i'm going to go to select and i'm going to find color range and again i'm going to click on wherever white is basically remember that white is the color that we want to eliminate if you will because we want it to be transparent fuzziness we're going to go ahead and bump that up as much as we can and click okay what this will do is give us a selection of everything that is white now the thing is we don't want it to bleed out the selection is probably not perfect as you can see we might want to do more like uh expand it expand it uh one pixel for example click ok and now we are cooking with gas whatever that expression actually means what we can create now is a mask if we go all the way down we click on mask raster mask it's going to show us this and this does not look good that's fine it's because the mask is inverted we can press ctrl i while the mask is selected boom now we have what should be our overlay the thing is i forgot to uh cut a hole for a couple of things really i forgot to cut a hole for the camera and also the gameplay so we just want to make it easier right in order to um just drag and drop the gameplay behind it in obs and the camera so i'm going to do now is go back to my actual folder and i'm going to create some selections i'm going to hold ctrl the folder is not visible right now because if it was it would be filled up like that and i'm going to create i'm going to hold ctrl and click on the icon of the camera so now you can see there's um there's a selection around the camera and i'm gonna do the same thing for the lobby i'm gonna hold except i'm gonna press shift at the same time so it so it adds it okay so click okay ctrl shift click and now as we can see we have a selection except it's kind of uh going over our transparency here we don't want that so let's go to select modify we did expand earlier we can do contract except this time we want like three pixels all right let's control minus to zoom out that looks good and now we're gonna use a trick which is holding alt on your keyboard and then click on the mask so you can just see what the mask looks like basically remember white reveals black hides and we can see all of the white that we hid with the black uh mask so let's go to that gradient tool let's click and hold until we find the paint bucket tool nice uh on our foreground color at the bottom here we can click and go all the way to black click ok and we're gonna paint bucket this mask sorry hold alt click on the mask to see the mask and we're gonna click here and here nice and then we can click again on the mask to reveal the rest control d to deselect and this is our overlay this is our current overlay this is what it looks like we're going to go ahead and export this also we can see here in the mask there's some there's some issues so you can go ahead and use a selection in order to get rid of that so i press m i believe yes it's m use the paint brush and just go over it so you don't have weird artifacts all right okay just click to see oh this is your overlay right now okay so first of all like just going off of that you're pretty much done but let's uh click file export as png all right oh those are the the previous ones let's call this one new boom and this is your overlay this is the intermission screen the reason why we're doing intermission screen is because it's the most complicated one and if you can do this you can do the rest like easily like starting soon easy clap press save and there you go your intermission screen is currently saved now what we need to do is create a mask that will go above our video that we will download and this is where we need to be careful because we want a hole for the camera and we also want a hole for the game lobby on our video when we're doing a mask so we're going to use the principle of the of the image mask white reveal black hides but we need to make sure that we place them correctly right now we do want to have a border around everything we do want that border around our actual mask tool so let me turn this off and let me do this i'm going to collapse the folder i'm going to duplicate the folder just to make sure i don't mess up okay i'm gonna turn off the one at the bottom you know why you would you all right so we have this here i don't know why my hexagons are natural oh because they're in the folder that is a weird thing photo p you're watching this i i don't know if it's when i'm holding alt it just shuts down everything in a folder like that's not that's not something that photoshop has anyways we need to turn those off i just wanted to make sure okay boom all right so now we want everything to be visible everything that is going to be visible we want it to be white everything that is going to be hidden we want it to be hidden we want it to be black okay so first of all our background here we want that to be completely white that's for sure nice we don't want chat to be hidden right we're gonna turn that off and this is pretty much this is pretty much it except those are not purely black so we're gonna change that a little bit we're gonna double click on lobby make it pure black we're gonna double click on camera and we're gonna make it pure black right there okay and this is gonna be the mask for the background image the background video uh file export as png save and call this one bkg alpha mask okay cool now from there what you need to do is find a stock video that you can use as your background video as your color or whatever your style that you're going for i like to go to pexels.com because it's uh it's free it's really cool and there's a lot of like this huge variety not associated with them and i like to type in abstract and i have all of those really really cool animations some of them are like photorealistic some of them are and uh it's all good stuff we want something that is bright colorful and that moves a lot actually this is cool but we also want something that is 16x9 so if you download something that is portrait mode this is not gonna work because we have an alpha mask that's supposed to go on top of it so we can click here and as you can see this one was made by then christian padul i hope that's how you pronounce your name uh make sure you read the the rights that you have this is uh free to use and uh right there if you would like to donate or follow the creator on instagram that is also possible so i'm just gonna save this right here and then um i believe we are ready if i didn't mess up anything we should be ready let me go back to obs and um this is gonna be complicated since i'm using obs in order to i'm actually gonna wait for it to download that was 107 megabytes also another thing if you want your animation to be seamless try to download something that loops but this is complicated i don't want to spend the time on it so yeah if you find graphics that is perfectly looped it is better for you so it doesn't cut abruptly when it starts over basically okay it's finally done downloading all right how we're gonna do this so this is obs studio hi in order to add the overlay it's an image right it was a png it's a transparent png you click plus you go to image you add it right in order to add the background that we just downloaded you click media source because it's media it's it's a video in order to add the alpha mask you will right click on the media let me just show you so media source find the video make sure you loop it so it plays back forever boom that's the video right now it's a gigantic it's a 4k 60 fps apparently i'm going to i should show you let me turn off uh preview so no more inception with media source select i'm going to right click transform fit this screen okay so now it's it should be the right size and it is okay cool let me turn it off just so you can see what i'm doing i'm gonna right click on it go to filters under effect filters i'm gonna click the plus to add a new filter i will pick image mask blend i will click ok and i will click browse and find the background alpha mask right okay so now it is supposed to add the transparency if i turn it on like that you can see there's a hole for my face and there's a hole for the lobby gameplay let me turn the preview on just so i can see what i'm doing yes it's working pretty well nice let me turn that off so you can still see me hi uh let's add the image as i said let's click plus add image click ok click browse and find the overlay intermission click open boom is what it looks like and this is what it looks like let me turn on the preview so i can see what i'm doing nice nice nice and if you combine this with also the media source this is this is what you made you made this you make this happen okay let me go ahead and and um let me go ahead and fit my camera under there let me right click on my camera transform fit the screen boom and then i'm going to drag it until it seems like it kind of fits i'm gonna flip it right click transform flip horizontal all right and i can hold alt in order to crop my camera if i really really didn't want to see it to the right here but i don't need to do that because i can just put the gameplay on top of it right this is not supposed to be there you can just put the gameplay on top of it it's completely fine now i don't have a game running right now but i can add an extra media source with some gameplay just to demonstrate to you how beautiful this is and that's how i messed up my audio for the rest of the video every time the apex is showing there's loud gunshots and i didn't take that into account basically i just dragged the media source or the gameplay on top of my camera and uh here it was and uh there you go basically this was the full camera overlay plus gameplay plus animated overlays in the background look at me i'm super excited i don't realize there's a bunch of loud gunshots going on in the background oh wow if i wanted to change the color for example of the background which is this right there and i can turn that down just just so you can see what i'm doing let me turn off the preview i would right click on it go to filters and i can add a color correction filter color correction okay and then play with the shoe and now i can have whatever colors i want whatever color i want right there every color every color is here and if you know this is double color a little bit um for example this is orange and yellow and you just want orange you can go to color multiply and just select a color and go with orange and it should be orange all around and if not you can play with the saturation you can play with the hue you can do whatever you want look at all the possibilities isn't it beautiful so this particular background doesn't have a lot of thing going on when it comes to the corners so basically if you want to replace it you can just double click on it and then browse it already has the alpha mask applied so you can just replace it by another background video and look at that look at look how excited i am like how easy i made this for you just that easy also if you want to add your chat i have videos on how to do all that stuff technically you know you should be making overlays from scratch animated overlays from scratch if you don't know how to add your chat to a basic overlay and also if you are too lazy to do all of that and you want pre-made overlays already done you can go to gumroad.com get level uh my outro was way way way longer than that but i have to cut it short because of the loud apex going in the background hopefully you guys understand the principle is just about creating basic image graphics and combining them with stock footage in order to create animated overlays together i hope that was very very clear um once again uh i think i will yeah i will put a link of that specific overlay on photopia i will put that in this the description so check it out uh sorry for messing up the audio at the end so this is kind of weird but yeah thank you guys so so much for watching i will see you guys later go out there make me proud look at me not realizing get level out

Channel: Gael LEVEL

Views: 2,813

Rating: 4.9779005 out of 5

Keywords: tips, twitch advice, live stream, live streaming, live streaming tips, twitch tv, twitch overlay, twitch overlay photoshop, twitch overlay template, twitch overlay photopea, photopea, photopea tutorial, photopea for beginners, animated twitch overlay, animated twitch overlay tutorial, animated overlay for stream, animated overlay obs, how to make twitch overlay, twitch, twitch tips

Id: YxRRFIr79ro

Length: 25min 2sec (1502 seconds)

Published: Wed Nov 10 2021