How to make a FULL Twitch Overlay pack - FREE Templates

I am pretty mad because the first time I recorded this video I sounded like this listen we're going on a mission today the mission is to create a full twitch overlay pack as fast as possible but on the bright side that means that you are getting two free overlay packs in this video I want to show you how to make a full twitch overlay pack as fast as possible using free tools and also giving you access to the free templates so we're going to stretch get into the sponsor and then we can begin I've been yapping about owned Pro for a while now their goal is to give you everything you need to start as a streamer starting with a huge library of overlays a chatbot widgets everything you can think of but now they got something new a stream overlay maker on the left on their stream design you will see scene Builder you can choose a complete setup or just a single scene Let's Do complete automatic selection will create five different scenes for your stream and in less than a minute you will have a full professional scene setup in manual selection you can browse the library and pick the scenes that you want let's go with automatic and the choice here is kind of wild owned is known for having the biggest library of overlays on the internet let's pick this one you get a preview of what it looks like you can see your scenes your alerts your camera overlays you're starting soon screens your stinger Transitions and just click create scenes congrats you have five scenes already created for you let's quickly edit the text by clicking on it and this is the scene Builder with a lot of options this text seems to be in that folder and now I can type whatever I want nice now click save and copy the overlay URL in your broadcasting software you want to add a browser Source paste the link that you just copied and adjust the size we know it's 1920 by 1080 and click okay congrats it was that easy to create your starting soon screen do the same with the rest of the scenes and your complete setup can be done in 10 minutes max own Pro offers a gazillion more options but I'll let you check it out by going to own. g/g Lev proo that is O WN 3d. g/g levelpro all right we just watched the 10-minute setup now let's get into the 10 hours setup you want to go to photopia this is Photoshop but free online before we even get to create creating you can immediately click on templates type my name in the search bar and you'll see well the overlay I created earlier and a bunch of other stuff that you can use for completely free you can customize them change stuff change the text and make it yours but for now we're going to create a new one fun fact I actually asked you guys to vote on the color for this overlay pretending that I didn't know it was going to be blue anyways go to photopia you want to make sure you're in full screen because that's where the Photoshop and photopia shortcuts will match exactly so if you learn photopia I call it photopia it's photo you're actually learning Photoshop you could literally put this on your resume go to new project we're going to start with the base file which is usually the offline screen or the starting soon screen let me call this one offline 1920 by 1080 and I'm going to make the DPI 300 you don't have to make it 300 but I like doing that let's go with black for the background color and click create I'm actually going to use something to highlight my mouse cuz I don't think I'm going to have time to do a lot of zooming so you can pay attention all right I also have input history so you can see what I'm pressing at all times in case I forget to say something so this is photo p on the left side we're going to have all the tools to create stuff to move stuff and Etc and on top here we're going to have the options for those tools on the right I'm going to have my layers list if your photopia doesn't totally look like that you're probably going to have some ads on the right side but the awesome people at photopia actually gave me an account so that I wouldn't be cluttering the screen for you one thing to keep in mind is that some tools are hidden behind other tools for example here I have the gradient tool you can press G to access it you can click and hold and then now you have the paint bucket tool isn't that beautiful so here you're going to have foreground color and background color foreground color is your selected color click on it once and then pick a color that you want we're going to go for the color that we want in our background this is the part where you choose your color scheme and all that good stuff we're going to go for generic gamer boy stuff because that's that's what seems to work that's what I have to do for you to click on the thumbnail and with the pain bucket tool selected and of course the back background layer select that I'm going to click once boom and now it changed I'm going to unlock this background just in case I want to do stuff to it later it won't let me edit it if it's locked unlock okay get ready this is where it's going to go fast perhaps I'm going to go ahead and click on the rectangle tool or press U if you don't see the rectangle just click hold choose rectangle I'm going to create a rectangle like that on the layers list I'm going to double click on the icon here to give it a color and this is where we kind of pick our main main color scheme which is that kind of blue click okay press V to select the move tool this is where you can select and move stuff and I'm going to hold alt this is one way of duplicating stuff I'm going to hold alt click and then drag hold alt click drag and wow I duplicated it now how do I transform this make it smaller and scale it contrl t for transform I can just hold shift make it thin and we basically want to do like half maybe like that do it again hold alt click drag contrl t hold shift and there we go nice I like those together so what I'm going to do is in the layer list I'm going to hold shift click on the one at the bottom it's going to select all of them in between right click and merge them merge layers that means they're all one single layer now press contrl T to transform them hover around one of the corners to get the rotation tool click hold shift to make it incremental so boom 30% uh 15 30 45 isn't that nice let's go with 30° and I'm going to place it somewhere around here I'm going to click at the bottom here hold shift to stretch it and there you go this is like the the main color I'm not totally satisfied with it so I'm going to double click and perhaps change it a little bit yeah I feel like this this is more Punchy of a look click okay and now I'm going to click on the background because when you click on a layer whatever you create is going to go on top of it in the case of a shape it will create a new layer that will be just on top of it in the list this is of course by the order of whatever is going on here I'm going to create another rectangle it doesn't matter exactly what it look like maybe close to a square press contrl T rotate it a little bit and this is going to be like faded stuff that's going to be in the background hold shift to stretch a little bit nice I'm going to press V for the move tool hold alt click drag to duplicate same thing again nice same thing again like that pretty cool what I can do now is basically go to um go to them 1X one and slightly change the color just to make it look more complex than it really is we're going to lower the opacity anyways double click on the icon then select all of them holding shift contrl G to group them don't group them actually uh right click and merge them merge layers and then lower the opacity I just realized that changing the color did nothing that was a bad idea just lower the opacity here and we're going to do something else I'm going to duplicate this the second way to duplicate is to hold alt on the layers list click and drag up and it created the same thing at the exact same same spot so now I can click and I can just move this around a little bit to give it more complexity since it's already like half transparent oh it duplicated it more times than I wanted to contrl Z to go back okay something weird happened there there we go control T maybe rotate it a little bit to create more chaos more Randomness nice let's do this once more duplicate contrl T and let's just rotate this maybe scale it down a little bit all right I like to click on the background layer just to see what I'm doing and um now I want to take the layer that's all the way at the bottom and I want to add a filter I'm going to go to filters go to blur and go with gosan blur gosan blur uh and it says this layer is not editable what we're going to do is right click rasterize so it's no longer just a shape that you can scale however you want it is now just pixels blur gos and blur and that should work there you go and as you can see it is blurring pretty nicely cool we're going to do the same thing here rasterize filter blur Goss and blur and this time we went to blur a little bit less same thing here right click rasterize filter blur gos and blur and even less 6 I think that's okay I'm going to group all of this plus the background together so holding shift select all of them contrl G and now I want to create what I what I like to call like assets just little things little details that I'm going to probably Place everywhere to populate the whole thing I like to do it now so with the uh rectangle tool I'm going to create a rectangle I'm going to create another rectangle like that press control T right click go to perspective and drag the corner just like that now while holding shift I'm going to drag the top here and this is like the graphic designer easy button to make things look futuristic and gamer e press enter place it uh press V to go move tool and then place it approximately where it seems like it should be that bottom one you can contrl t on it hold control and now you can skew it so you click and drag the bottom one like that and you can see it's being skewed press enter and this is what we created basically find those two things merge them right click merge layers you can double click on the icon to pick the color we can go with white but I'm probably going to duplicate it hold alt drag up or down double click and this time I want to just immediately color pick this color cuz that's going to be our main color so we have this and we have that that is cool we get and put those things in the corner um on my shape tool I want to click hold go to custom shape I want to find something like some Arrow you can type find arrow and it will find a bunch of arrows which is cool we even have the exact arrow that I'm looking for I'm going to click once I'm going to click hold shift to make it proportional and I'm going to drop it okay make sure I bring that up so I don't confuse them you should be naming your layers but I'm trying to go fast I'm going to duplicate it hold alt bring it up double click and we want white Arrow back to the custom shapes here we're going to find something like this I think I like that boom hold shift to maintain proportions nice bring that down duplicate it holding alt and make it white all right this is basically all of the assets that we're going to use to populate this I'm going to select all of them and group them contrl G to group double click to change the name and let's do assets T the name so every time you want like to add more details you can just in here and then copy you can of course move them around V for move tool like that so you can visualize them a little bit better let's turn off the asset layer by clicking on the I and um let's start doing text you can click on T and then click once on the canvas then type your text starting soon or offline image let's start with offline image for no reason in particular and you actually need to select the whole thing if you want to modify it I'm just pressing shift and pressing up to just select everything that's like a window tip that's not a photo tip and up top remember that's where you get the options for whatever tool you have we're using the text tool so the options are going to be here up top we can bump up the size and also we can find the color right there of the text boom now if you want more options about the text cuz it's not everything here you can go to window and click on character and that's going to appear here now you have options for the tracking for example I can click on the word drag and yeah create more space in between the letters maybe turn that down just a little bit you can click outside of the text while it's selected to move it or you can just go back to the move tool so you can see how it's actually going to look I kind of want it to be slightly embedded in there so it looks like there's more depth uh another thing that I'm going to do is I'm clicking on assets so whatever I create is going to be on top of it I'm going to click and hold click on line and I just want to add a line just a decorative line if you will I'm going to make it six pixels wide and I'm going to click and I'm going to drag and it's going to be white but we can change the color by double clicking on it clicking on this color which is our main color and it's not too bad we're going to do a very generic type of um overlay but at least you know you don't have to pay someone on Fiverr to do it nothing wrong with people trying to make money on Fiverr but hey I'm an educational content if you want to be the next guy on Fiverr to do it congrats you're learning now another cool thing about the shapes you click and you hold go to custom shape again is that they already have social media in photo which is cool so if you want your your Twitter your you can already add that here by clicking click hold make it proportional nice you want to know what else they have uh [Music] YouTube cool I'm going to create it right next to this one because I know that I wanted it to be pretty much the same size not bad you see it's adding it here so X is going to be there Boom YouTube is going to be there boom let's go back what else people use Tik Tok of course it's there nice click hold shift drag V for move tool and now you can uh move click hold shift so it doesn't go up and down if I let go of shift it's going to go everywhere just hold shift it's going to be linear going to place it around here we're going to have three of them X is going to be second you put them in the order of importance to you my main content is on YouTube this we're making this for twitch so we don't need twitch to show up here then let's add some more text how do we do it click T boom and put your at at your name select it all shift top uh remove the tracking I'm going to put 0% oops going to put zero% press enter and when it comes to the format I don't want it to be black I want it to be medium it's more visible or maybe even regular there you go it's thinner you can do the size like that remember we were transforming by pressing contrl T remember the good old days you can do the same thing again you can click on the Move tool press contrl T the reason why we don't press V for the move tool here is because well you're in the type tool if you press V it's going to type V that's not what you want now I want to duplicate I'm going to make sure that this is in a good order what is that Tik Tok boom always name your layers sometimes I do select your name hold alt click drag by also pressing shift so it's linear click drag also pressing shift because it's linear alt is for duplicating and then shift is for keeping it linear we can see that there's more there's like maybe too much space here so we're going to move the Tik Tok a little bit I'm going to press control to select both of them I have the move tool selected I'm going to use the arrows on my keyboard to give them a little bit of space brother I am struggling all right to give it more personality if you will you can double click on the T this is how you change text by the way you double click on the T icon next to the layers list boom I'm going to select just the off I'm going to click on the color and I'm going to click on that color and now I have off that's going to be this color I can click on anything else to to select it easy clap or Reno and everything that is left from now on basically is uh decoration I get that this doesn't look super great for now but I'm going to show you how to easily make it look better I'm going to go all the way to the top and I'm going to add a new layer at the bottom here new layer cool I'm going to go to my brush tool right click make it quite big quite quite quite big lower the hardness so it's going to be a soft brush adjust the size really really adjusted opacity I want that to be low so it's going to be a very very well semi-transparent brush so we can have more control I can see that my main color here is white we don't want that I'm going to hold alt to bring up a Color Picker I'm going to click and basically the darkest color on the image right now is that dark blue and that's what we're going to use to create a little bit of a gradient so I'm clicking dragging click drag clicking and dragging clicking and dragging clicking and dragging clicking and dragging clicking clicking clicking I'm even going to do it on the left side also clicking and dragging it's going to be less visible but you'll see nice I'm going to do at the bottom a little bit we're just adding more Dimension to this whole thing click click click click click click so it looks less perfect looks more random more organic if you will click click drag click drag click drag cck click drag then I'm going to go on uh my this is where you get your blending mode where it says normal you have all of this these options it's basically oh how do you want it to affect whatever is underneath it and we can play around with it usually you want to go with overlay because that usually affects both the darks and the highlights and this actually looks pretty good it colors it a little bit better if I turn it off before after before after we get like a nice gradient and it brings your eyes to this offline text my nose is so itchy today remember our assets let's use them let's use them for good turn on the assets and basically pick and choose the ones that you want I definitely want this one here I'm going to press V for the move tool tool and I can press control while I have the move tool selected to click on something and it will select it immediately so I don't have to go find it in the layers list if you find yourself clicking and selecting accidentally on top left you're going to see Auto Select uh you can just set that on so I can click here it will find it uh but I don't like using that because you can easily choose something that you don't want to so hold control if you want to activate it Release Control when you don't Release Control it's not your fault and the way we're going to use the assets is by holding all duplicating in putut and dragging outside of the group it may seem like we're spending a lot of time on an offline image and we'll never make a full over a pack but once the first one is done guess what the rest is like easy peasy press contrl T click on one corner drag it down and we just want tiny details that's what we're creating here things that kind of break the uniformity of this whole thing okay I think you get the point duplicate them outside of the group place them I'm going to fast forward this part one thing you can do with transform is when you press contrl T for example I want this but I want it symmetrically like bottom right I can right click flip horizontally right click FP flip vertically and now I have it and I can just place it there to create some form of symmetry pretty cool right okay back to the time lapse for example here I realized that all of the things that I'm creating where I'm placing them are behind this blue thing I do like the ones that I placed so far but this one needs to go on top of it boom and there it is visible back to the time lapse we going to do something risky here you can hold space By the way to grab the hand and move your canvas around contrl plus to zoom in contrl minus to zoom out contrl plus contrl minus or subtract okay I'm gonna turn off the asset folder and um yeah that's pretty much what we have if you want to go complete complete lazy designer and I'm not saying that as a as a negative thing but basically easy things to make your design look fuller you can hold alt um duplicate your offline see offline right was here I'm dragging it into the background folder control T make it huge click on the corner to rotate holding shift 30° place it like this hold alt we're on the Move tool press shift to translate it like this move it around a little bit so it doesn't look the same same thing again bring it up just like that and then play with the opacity or add like a blur to them so bottom one opacity you want that to be barely visible so you're adding basically fake details it's just the same word duplicated multiple times also you can just make the blending mode overlay so it actually affects the colors of course you're going to play with the opacity again in our case we already have a lot of detail in the background so so it doesn't work as well but we can just bring the opacity back up overlay opacity 100 overlay opacity 100 and in this case we're going to add a blur can I add a blur to text directly nope rasterize what okay that's weird it did rasterize it all right filter blur gajin blur there you go and you want to give it more blur 11 pixels that's nice so I'm going to select both of those I'm going to rasterize them then I'm going to give them a blur gos and blur 10 pixels not bad I'm going to uh make them different opacities not too bad this is basically just adding fake details I'm not a huge fan of like the squares that I added maybe some of them are too much there's one layer that I don't like and there we go this one kind of missed the blur actually adding more blur to one of the background layers there we go one extra thing that we can do to really bring up that color scheme is we can go on the top layer in our background folder which I should call background background and that's going back to the brush tool tool with a very soft brush and almost transparent brush we're going to go with 1,000 opacity maybe 6% hold alt to pick the color you want the brightest spot basically like that and we want to create a new layer bottom here to create new layer there we go and I'm basically going to add a little bit of more blue that's like that and I'm going to click bring it away click click what would that look like if we set it to Overlay for the blending mode not bad we can keep clicking while it's in overlay mode it just brings out the blue and underneath it but if we set it to linear Dodge not great but whatever we're going to lower the opacity I kind of like the effect the final effect anyways let's uh let's wrap it up for the offline image so that we can move on to everything else one last thing that I'm going to do is I'm going to add an overlay on top of everything because we have some gradients and gradient sometimes will look weird you can see like the separation I like to add a little bit of grain and that's like one tip to make your gradients look a little bit better so I'm going to add a new layer and I'm going to go to edit fill and then here I'm going to find overlay as my blending mode and under fill I want gray gray should be basically 50% in between white and black nice that's exactly what we want we want to go to filter we want to go to noise and we want to go to add noise we want our noise to be monochromatic and we want it to be super duper low 2% would that work click okay and now we just need to set this to Overlay now this is the type of detail that you don't really see the effect of it but it's there I promise you it's there you can add more noise if you feel like it's not really doing its job Okay I lied one more thing to the offline text and I'm going to clean all of this actually I should clean it now collapse the background and what we have is the main shape here that's a look too offline the underline and then details and socials blah blah blah okay cool I'm going to select the offline and I want to show you something pretty cool turn off my camera for that while offline is selected the text you can go to effects and this is where you can add stuff like bevel and boss uh shadows and stuff like that for now though I don't know if I want like a a whole bevel it would basically look like that and make it more um 3D is looking affected by the Light I kind of like the very flat gradient look so I'm going to keep it like that so I'm G I can turn off the bevel here and I'm just G to add a gradient overlay so on top of this I'm adding a black and white thing but I can change the blending mode of the gradient overlay right there and I can set it to linear burn this is basically a darkening then I can bring it down like that when it to be quite subtle not bad except now the underline it pops out more than the text so we're going to click the underline go to effects go to gradi and overlay and I want basically the sides to be darker and the middle to be brighter so I'm going to go to normal so I can see what I'm doing push the opacity all the way up and the style needs to be reflected cool except now it's at 90° so that doesn't work press zero click away cool so you can see the middle is dark the outside is white so let's click reverse and we have the opposite now I can scale this up so the gradient is less concentrated in one spot and go to blending mode and I want overlay or linear burn just like before and just lower the opacity so it doesn't affect the bright Parts click okay and this is it let me click on background just so you can see what I've done all right H that was a lot that was a lot actually I don't like the gradient let me play with it some more on the underline all right on my counter that's like 1 hour that I've been recording maybe this is where we're going to go fast I'm going to start by by um EXP exporting this if you've done this and you were following Al loone or you're going to do this in the future you going go to file export as PNG to save your stuff click okay and this is the first overlay which is also available we're going to call this one offline nice and I'm going to make it a template you can see the other ones you can type my name or just type the word fast forgot to put my name in there and you'll have access to those very different design but not that different either we're going to call this one quick instead of fast and this is all that we're going to do fast we're going to do um next one will be the starting soon then intermission screen labels bar panels Banner camera overlay Avatar and we'll be done so this one is called quick or should I call it speed let's call it speed speed offline twitch overlay G level for tutorial and it's right there look at it isn't it beautiful cool so next thing is going to be starting soon and I'm going to show you how to do that so all we have to do to change change the text is click on the t double click on the T and we're going to type soon okay going to click once more to deselect hold alt drag up to duplicate we've done this like 20 times now double click on the T on this one and we're going to type starting and I'm going to type it like lowercase select it all shift Arrow up go on the color here click pick the brightest click okay choose the move tool crl T and let's bring it down move it around and this is where you have to decide you know exactly how you want to format this we can make it exactly the same size or you can even make it smaller for a cleaner look maybe half the size for example nice and you can even make the whole thing bigger so hold shift crl T and do this this will give us more flexibility for the other stuff like be right back or ending ending stream or whatever but this is going to be the template for that so if you want to change the text you're going to have the starting text and you're going to have the soon text and double click on the T type whatever you want be right back would BB right and then you double click on the T for soon and you would type back or for caps back for example right and fun fact we're done with the with this overlay next stop intermission screen so we can get kind of creative with this let me go ahead and uh turn off the text cuz we're not going to be needing it we're going to click and drag them to the bin boom by text if you want to keep the underlined and the socials you can do so I'll select them select that group with them holding control control T can resize them a bit I want to guess that you might want your labels bar you know with your recent follower and all that to be at the bottom so we're going to put this up top but you can always turn it off if you don't want to have it at all let's make sure the underline actually matches it contrl t and talking for 1 hour and my voice is feeling it I don't know what this is but uh I got to get rid of it how to create a frame for your account camera or for your gamep playay or whatever you want to do I'm going to go right underneath this blue thing cuz I kind of want it to be cut out and still have the blue thing on top of it click on underline here going to go to I'm going to press you for the shape tool but I'm going to click and hold to have a rectangle and usually if you want like the full screen as in like a 1080p camera you want the whole 16x9 you just click once and then you type the resolution of your camera you make sure to uncheck this so it's not one by one 1080 and this will be it all too big contrl T drag the corners or you can just make it 720p it's also 16 by9 so this would be like what your full camera would be but of course we don't need it to be that wide most of the time we can just have it look a little bit better and bring this up so don't worry about how this looks this is just the frame double click to change the image make it even gives you a better idea all right so now this is the camera frame if you want to add details to it we're going to duplicate it we're going to go in the shape options here and we're going to turn off The Fill see fill click on the color and be like no fill you want to go to stroke which is the outline and you're going to be like yes I want a solid color as my outline you're going to click on that color and then you're going to click on whatever color you want it to be nice it added it but it's a little a little um it's a little thin so click on the Arrow next to one pixel and drag it up you will see the difference nice 8 pixel seems nice all you have to do now is basically add some details if you want to add some details we have our details here like blue thing or you can just grab them from the assets I'm just going to duplicate them from here directly hold alt uhoh I got the spinning wheel of death that's not good please don't crash please don't crash please don't crash you guys see my look you guys think this is easy you guys see what I do just to give you access to free stuff just to teach you how to do stuff valuable skills that you can use to make money there are whole associations out there recruiting people they have workers that are just tasked to go on your Twitch chat ask you if you need a graph graic designer because it's so lucrative all right let's give up let's click again close the program wait what how did it what it saved it photo P photo p is the best how did it save it that makes no sense okay cool what all right so um Go full screen press U for the shape tools and uh we had eight pixels for the outline we're going to move that actually I'm going to remove the underline all Al together move the socials so they make more sense either all the way there more kind of centered nice what was I doing oh yeah I just wanted to duplicate something hold alt click up nice control T transform hold shift to rotate release enter bring it somewhere you can see it so on top of the frame uh contrl T flip it horizontally and just scale it down nice I'm going to do the same thing here contrl T right click flip vertically also flip horizontally enter click drag place it on details two I actually don't like those arrows here that's better but I'm also going to duplicate one of them bring it on top of our camera contrl T rotate holding shift make it uh quite big place it like that change the color and we're going to learn about something called a clipping mask a clipping mask is basically having one layer attached itself to all the visible layers of the one underneath it for example I just want the white part to only show up on the blue part since we have it separated right this is the frame right there I just need to put that layer right on top of it that's the layer I'm going to click drag bloop in order to create the clipping mask I'm going to hold alt click once on it and there you go now you can see the outline of the actual shape but if I move it it's only going to move on the visible Parts including here cuz they're not merged but that is exactly what I'm looking for it's basically an easy way to add details to your piece if you will duplicate it once more I think that's nice okay how do we cut out a hole in this whole thing thankfully our background is one single group although we do have that top layer for the grain thing it's going to be annoying but not really I'm going to hold control on my keyboard make sure you can see this in order to select a specific layer or all the visible pixels on the layer hold control on your keyboard and click on the icon so now it's selecting that frame that we created first right so we can visualize now we just have to create a mask for the background you click on the group background and here you will see raster mask now it did the opposite and what we need to do is invert the mask a mask is basically a black and white layer where white will reveal and black will hide if I hold alt and click on that layer you see what it looks like we want the opposite in order to invert colors we press control I so now if I go back holding alt and clicking on the mask it's doing the effect that I want it to do now how do we create the same mask for our grain layer that is all the way up top our noise layer if you will I can hold alt click on the mask drag it up put it on there and just like that we have it but we can see that our vignette effect is also affecting the mask which is annoying but we just have to drag the mask there we go ooh okay now we have an interesting problem it is affecting more than we want it why am I making my life so complicated we actually want it to affect this part so we just need to select that blue thing here and manage to go back and paint black on the mask hold control find your blue thingy boom there it is you can see that this is not included you can also find it press control shift to add additional parts to your mask it is probably in details 2 and it's probably a b actually no it's in details one and it's B thing and there it is so control to prepare for the selection shift to make it additional and click bo ya now go back to your vignette click on the mask all right and basically I held alt to see the mask just go to the paint bucket tool under the gradient tool here and we actually want white in here so that the vignette is visible we seem to have white as our foreground color just click once we can see that some artifact click again click again click again click again click again and you can press contr D to deselect all right it's not perfect but it will do hold alt click on the mask again you can see that is beautiful now you can create a part for your chat if you want to and you can also add an additional like screen if you want like a another part like maybe this is your interation screen so your face will be here and then your gameplay if you're in a Lobby you're queuing you want it to be there um the cool thing is that we already have a frame for our camera here and it's all of that let me group them together and we're going to call it camera frame this is where it gets complicated and it's gets like difficult to explain I'm going to duplicate this group and call it Lobby frame we want it to be on top of the blue thing drag drop contrl T we can scale it down enter uh V for move tool and to keep it kind of uniform we actually want to size it the same way that we want to size like chat not too bad we're losing a lot of uh real estate if you will just to preserve that design but I'm not too mad about it that looks good now we can go inside that group and we can make sure that the colors are inverted we want white basically for that frame it's the shape four copy double click and in this case since we just want to change the color of the outline press U while you have it selected and go back to the stroke up here and choose white nice B Arrow copy we can make that um Blue double click on it click okay double click boom and we have our little details so B thing and a b thing copy make that white make that white nice since it's a frame and we're going to use it for chat we can also copy that group call this one chat box V for move tool click hold shift to keep it linear nice go inside the group and we're going to change the shape crl T and here we're going to hold shift to stretch BAS basically the the initial frame hold shift track down just like that so your chat will be in here you just have to move this part which is one of the B tangs it's this one and bring it down of course at any point if you want to go back to the assets folder and duplicate stuff and move them around okay BR Arrow copy is those little Stripes here you can duplicate them more hold alt drag up put some in the corner here hold alt drag put one there that's a cute little pattern one more okay if you don't want to have problems reading chat for example if the text is uh white or even black you don't want the colors to clash you might want to add an extra little frame so basically you duplicate this Frame and then you fill it and then you lower the opacity duplicate hold alt drag down press U for the options go to White it's going to fill it go to Black turn off the stroke for the duplication because you don't need it twice and um let's go with a color soft light for the blending mode so you can do that or you can just keep it normal and lower the opacity I think that's pretty cool now of course um if you just want to place your gam playay here maybe we should cut out this part so let's do that it's in the lobby frame we have this shape 4 that we kept press control click on the icon and then basically go everywhere you have your mask in the background for example clicked on the mask pressing alt paint bucket tool this time you want it to be black if you want to switch between foreground and background you press X boom boom boom click a couple times just to make sure for the vignette I'm going to do the same thing here for the noise I'm going to do the same thing here except now we want the blue thingy our shape one basically to also have a mask there so while let select it press add raster mask so it does the opposite but press control I to invert the mask there you go and if you have specific Parts like this in the details for example that have that you just need to copy the mask to them so you need to find them copy The Mask to them found this one hold alt click on the mask drag and drop it on it braah I had this weird artifact and I couldn't find it turns out my mask has like half a pixel I'm going to press M to bring out the mask tool that's why I click multiple times through the paint bucket tool sometimes it doesn't do its job there you go contrl D to deselect okay we did that oh my as much as I'm not super satisfied with how much this is eating in uh if you have any sponsors if you have a logo if you have things like that that you want to display you you can just place it in here if you have any type of Graphics that you want to animate or whatever but the uh intermission is done oh my remember it's a hydrate oh my and there it is it is saved okay cool all right so I'm going to collapse everything it's probably going to look like a mess actually no we're good okay cool and I'm going to create the labels bars just so I can then crop it and Export it separately so we imagine that the labels bar would be at the bottom here I can go to my shapes and create a parametric shape we want it to have six sides so a hexagon you want to do this hold I'm holding shift so it snaps to the corners pressing space to move it while I'm creating it and basically you create a little background for each spot double click that you can add some sort of gradient overlay if you want click effects you don't see it but gradient overlay style you want radial reverse Landing mode you want something dark linear burn can work multiply can work I like linear burn so much just lower the opacity and then you can do the intensity with scale you can even click and move it a little bit and we're going to create another we're going to click on rectangle let's say like that cool contrl T I'm going to hold control on my keyboard click on the bottom handle here I'll make sure it's not randomly just selecting The Anchor Point there you go and then I'm going to move this in like that V for move tool it wasn't enough moving so do it again cool so here I went with the exact same design pretty much from the other overlay that I made I don't necessarily like that so we can modify it just a little bit I'm going to duplicate this holding alt click drag crl T going to drop this and I'm basically going to drop this I'm using the arrows on my keyboard here to give it like a tiny bit of detail I'm going to duplicate that part again and I want to contrl T over the corners 30° rotation press enter and I'm going to use this to create a mask I want to cut out part of this just to add fake details again press control click on it now you can turn it off you don't need it anymore our hexagon we're going to select it create a mask crol I to invert the mask and there we go we got a little a little hole in our exagon what was the purpose none it just looks more cool cuz more details equals more cool I deleted that shape that we made and congrats you pretty much have yourself a um a single labels bar now depending on what you want followers can be hearts let's click on the shape tool custom shape so let's search for hearts click drag hold shift to maintain proportions double click on icon make it white to be fair you can make it like a darker blue if you don't want it to grab too much attention if you want to center it compared to our hexagon you can select our hexagon hold control while the heart is selected press V for the move tool and up top you'll see your align tool center horizontally Center vertically and technically it should be in the center control D to deselect and congrats we created our first label I'm going to call this one heart I'm going to group up all that stuff crl G and that's label one with the group selected contrl minus to zoom out hold alt click hold shift drag nice so this is of course label two delete the heart pick another shape or you get tips let's go with dollar click drag Center it contrl DD select hold alt drag Up Click shift slide label three delete the icon pick another icon let's say if your that's your top tipa if it's sub it can be a star if it's like a top Tipper you can put a crown hexagon Center beam bam boom cool you can group all of them together so you can move all of them together and um yeah we can imagine that the labels could be over there but we're going to export them separately which means that you can place them wherever you want in your overlay all right so I can turn off the background I'm going to go to crop here or just press C I'm going to click drag press enter there you go now I can save and we did it speed labels bar twitch overlay G level right there all right let's do panels we're going to go back to this screen in order to get quote unquote inspiration I'm going to click all the way to the top I'm going to go find a rectangle and I'm going to click once and basically give it the size that I usually do my panels at so I go for 640 and it can be like 2 two something 220 okay that made no sense because I definitely didn't click to unlink the aspect ratio right there there you go clicked once so uh what did I say 640 not bad you can always change it you can be like you know what maybe too too small maybe 640 by 171 I think that would be pretty cool nice contrl a to select everything and while you have the move tool selected just place it in the middle Center vertically and horizontally then from there I'm going to lower the opacity and this this is basically what we want to bring everything into for example our text I can bring it here like that press control T and here's the thing for uh text and panels I usually type the biggest text that I can type and usually that text is Instagram so that every other text if that if Instagram fits basically everything else will fit without changing the size of the text because it looks messy if your panels have different text sizes you can also lower the tracking there you go cuz small text like about might feel a little a little too tiny otherwise we can select that frame basically to make sure that we're good hold control click once select our Instagram text and Center it control D to deselect I personally would probably like keep it that way but you don't have to and basically play around with a bunch of stuff to bring them all in there I think I'm going to time-lapse that part too okay so what we're going to do now we're going to zoom in we're actually going to crop it already press C to crop we're going to crop approximately inside of this Frame press enter and if you want to really make it you know a little a little cool we're going to turn off first of all our guide delete that we can cut one of the corners basically or multiple of the corners and um there's multiple ways of doing that let's just group up everything group and I'm going to create a square create the Square contrl t 30° enter V move tool and just place it here duplicate it place it here so this represents what we're going to cut out press control on one of them on one of the icons hold shift to add to that selection here now select the folder and create a mask of course the mask takes what's in the selection crol I to invert it and delete your two squares and we have the Circle of Death okay it managed to save a huge part so let's here we go again one thing I'm going to do is make sure that my text is centered and it's only going to be centered when you type text here go to paragraph and it's not centered which is fine just Center it there you go from now on you want to change this double click boom about me or about me that simple and now we can save the panel and there it is all right there cool now we can do the banner we're going to start from the B right back like this time we're going to use the same method to go up top boom bam bam unlik this and um 1920 x [Music] 480 is approximately the size for twitch banners contrl a V for move tool align it boom bam now we know everything needs to be within that rectangle there's not much information to put in a banner really especially with twitch putting you know your your channel trailer and all that so we're just going to keep the socials I'm going to leave the text in case you want to type something but basically just the socials make them smaller and place them somewhere one thing I'm going to do here so it doesn't only show basically the bright part of the blue shape here is I'm going to stretch the vignette crl t hold alt to drag from the middle I'm going to hold shift to just stretch the height we're going to get more of that gradient within it nice and we're ready the crop hold press C going to say hold C uh when you get that frame here we can also do hold alt drag the top until we're inside that white frame you can also see the numbers next to my mouse press enter nice get rid of that guide here's our banner and the banner is published shall we do our camera overlay we can use the intermission frame for that so we're going to get rid of things that we don't need like the socials that blue frame here for sure even the vignette and also the noise just to make sure we don't have weird artifacts Lobby frame and chat box bye-bye we currently have a mask on our camera frame now we're going to get rid of that by right clicking on the mask delete raster mask it's also there delete nice we have our whole thing back let's delete it from the background also although we're not going to we're not going to use the background okay so let's make sure that we don't have anything inside of this like that all of that must go but also some of the stuff I I want inside there like this W thing copy let's maybe put it in there like that this is useless this is useless maybe this one this one off now the BR Arrow copy that we have here that's basically going to add some white details we want more of it maybe hold alt click drag and you get got it hold alt click drag and you got it I just need a way to create a mask that only encapsulates all of that thankfully we had this shape earlier right hold control click on it but we have an issue it's in the middle of our outline so we're additionally going to add the outline to the selection by holding control shift that's plus selection basically and shape four copy is our out outline click on it and you can see it now takes the whole thing so we can just group up everything press contrl G and then click add raster mask nice oh no but the the background but the background turn it off okay and to make sure that we crop it properly we can hold control and click on the raster mask that we created so it selects it press C and press enter now of course this is a camera overlay that is uh pretty wide this is a full 1080p basically camera overlay you can always turn it 90° to make it a portrait size camera overlay or you can come in here modify it make it thinner if you will but we're done we did it what I'm going to do is I'm going to keep the background just so that it's visible in the preview so it looks good just turn it off when you get here recording time 2 hours 20 minutes there it is and finally we can do kind of a template for the Avatar let's do it I'm going to base it off the BRB when I immediately turn turn off the background turn off the noise turn off the vignette don't turn off the vignette actually but do restricted to that shape by creating a clipping mask hold alt click on it while it's right on top of it and there you go so without vignette with vignette without vignette with vignette I'm turning on the background here just so I can see what I'm doing we're going to press C for cropping and I'm immediately going to make this a square one to one press enter and now we can move stuff around we can even duplicate some stuff I'm going to duplicate the details one and I can already see the outline of everything control D to deselect if it accidentally selects stuff we can do that if you want to quickly visualize how it would look as a circle cuz twitch especially has a circle you can hold control while creating a circle mask and basically those are the parts that will be visible doesn't have to be anything fancy really all right this is enough um we could add a circle mask to the background best way to do it I'm going to create an ellipse make it perfect place it crl a center Center contrl d control click on the shape turn it off click on the background create a mask crol I invert the background invert the mask sorry crol I invert the AY contrl I hello control I what is happening I think my my control key is not working anymore no it's working cuz I see it turning on Auto Select what's happening so it's image adjustment invert guess that works there we go not the best looking one but hey we got there and uh we're done we did it we did it go to photo.com click on templates type my name in the search bar and you will find the speed overlay pack as well as the fast overly pack next time that I teach you how to do something step by step if you want to skip the step by step part I'm going to make you pay I don't know what else to say um hopefully this does well cuz this is what uh 6 hours of recording in total I know we did the typical gamer boy overlay we will be making more of those those work the most hopefully this video hopefully this is not like a bad performing video and depending on how well this does I'll show you how to do different styles for now I need to go eat I need to go edit this 2hour and 31 minute long video and I'll see you next time go out there make me proud G level tired and out

Channel: Gael LEVEL

Views: 2,832

Keywords: twitch overlay tutorial, twitch, overlay, tutorial, twitch overlay, twitch overlay free, twitch overlay pack free, stream overlay tutorial, stream overlay pack, stream overlay template, twitch overlay template, twitch overlay tutorial obs, twitch overlay template psd, twitch overlay template free, twitch overlay template psd free, obs stream overlay template free, stream overlay template free download, free download overlay, free download overlay streaming, overlays

Id: 8RSB5K0B8-E

Length: 52min 59sec (3179 seconds)

Published: Sun Feb 18 2024