Make TWITCH Overlays for FREE Without Photoshop (Tutorial)

hey if for some reason you didn't know i stream on twitch go follow my twitch channel hey guys get level here and today we're gonna be making some graphic design inside of a browser without using photoshop but really using something that is pretty much just as good as photoshop what it is free yes something that i hear a lot in this streaming community is oh i can't do this i can't do that i don't have photoshop i don't know how to use photoshop you don't need to have photoshop to learn how to use photoshop you don't need photoshop to learn graphic design you don't need photoshop to put an image in another image uh today today i'm just going to demonstrate okay okay so let's say that i want to make some twitch graphics i'm going to go to photopia.com and this is exactly what it looks like when you go there as you can see it's completely empty and it gives you a couple of choices you can actually open photoshop files in there so if you download a template that is a psd you can open it in photopia and modify it as if you had photoshop anyways so let's do new project for example right they have this bunch of templates we're not going to use any of that we know the size of what we want let's say that we're making an offline image for example that is 1920x1080 uh and it is pixel of course height is going to be 1080 wait with yes 1080 okay and the dpi we're gonna go for 300 because we want that stuff to look high quality you don't necessarily have to but whatever background is going to be white and let's click create oh would you look at that we have a 1080p white background a new project okay so the first thing that i like to do is work on a dark gray background it's it has kind of like that gamer feel again i'm not actually an expert in photopia this is like the second time i'm ever using it so it's easy to figure out because it's supposed to be intuitive i'm looking for something that looks like the paint bucket tool there you go i hold uh the click on this and then paint bucket tool or you can press g and then g again to switch between the gradient tool whatever now you're gonna go here in your foreground color you click once and then you pick whatever color you want okay i want a dark gray as i said uh boom and let me click once this is not working it doesn't want me to put it on the background oh never mind it did okay cool now we're going to create a new layer so layers work the way you would imagine transparent sheets would work i have this one that is completely full and if i do anything on top of it okay that's on a separate layer everything is transparent except for what i just wrote so i can just turn off that layer and it disappears how beautiful is that okay every time you have a new layer you want to separate things so you you can maybe come back uh okay let me create another um square well rectangle and here i like to add as much as i don't like general borders i like to have my stuff in some sort of border-ish let me uh click on the fill we're gonna get rid of that fill and we only want the stroke to be white so we're gonna pick a color here and then click white and uh at some point hope that it will show up okay i'm gonna click on the move tool i'm gonna press ctrl and plus to go closer it doesn't seem to be showing anything i'm gonna click on the rectangle again uh make sure that this is not bugged or anything there you go it's like it wasn't bugged it just was too a little too short let's click away on the layer tab so it doesn't give us that selection blue thingy or just click on another layer okay so this is what it looks like i'm gonna press ctrl and minus and i'm going to press ctrl a to select everything then select that layer and go to the move tool and up top here you can see alignment so if you want to align it left middle right middle and top middle bottom i'm going to click middle just to make sure that our main rectangle is in the middle and it's not going to move okay and then you can press ctrl d to this to deselect all right cool so right now we just have rectangles now let's do what i call the easy buttons for graphic designers we're going to create a couple of um rectangles we're going to duplicate them and then we're going to make them slanted and then we're going to paste them you're going to see it's going to be great so right now i have one rectangle it's the same it's the same as the the other one we don't want that we don't want a border we actually want a solid color and we want that sort of solid color to be white or this is the part where we should probably pick a color so i'm gonna click here and i know you guys love your blue overlay so let's go let's go with blue let's go with this bright-ish blue and uh that's nice now i'm going to go back to the move tool i'm going to hold alt on my keyboard and then drag this this is going to duplicate it all right pay attention to the little lines that show up because they help you align stuff do the same thing hold alt on your keyboard and then drag it to where it seems like it is the same distance if not you can use the arrow tools okay what i'm going to do now is hold shift on my keyboard and as you can see we created those three blue shapes i'm going to press ctrl g and that groups them into a neat little folder now we can duplicate that folder if we want yeah but for now let's go ahead and i don't know let's uh oops let's press ctrl shift t to transform nope not not even that i don't know how to transform in this what's it called transfree transform it's alt ctrl t okay so click alt ctrl t or just go and i'm gonna hold you can just rotate it so hover around the corner here and then rotate i believe if you want precise rotation you need to hold shift so you get like increments of 15 degrees i believe or 30 degrees i don't remember anyways we want a diagonal like that that seems fun press enter i'm going to press v on my keyboard to go back to the move tool so i can move this and i'm gonna move it over there you get that peppa oh for there okay uh now you can duplicate the folder or i believe if i hold alt here it will know what i want to duplicate holding alt clicking dragging and boom look at would you look at that would you look at that now that's beautiful okay cool now um what do we want to show on our star on our did i say offline image let's say starting it's the same thing pretty much okay let's say we want to do something as simple as just type starting soon okay we're going to click on the text tool because that will help you add a text yay you got it and we're going to type starting press enter and then soon so it's two different lines right now it's teeny tiny and the color is black so we can see so we're gonna switch the color by clicking here but i believe also clicking on the foreground color here will help and you see the size is 24 we can click on size and actually move our mouse while holding it um this is weird i don't think this is meant to be like that let me ctrl z let me press ctrl a to select all of the text and then try that again i don't i don't like the way this is moving let's go with white okay um let's expand another tab right here you'll see something that says cha that's character so we get a little more options there and now let's try switching up the size that is absolutely weird i'm gonna double click on the t here to make sure i select everything oh okay it's still 24 okay i was right uh it just wasn't selected and i typed starting sue like the big brain that i am oh control a doesn't work that's why okay cool don't do con control a to select your text just manually select it or double click on the t on the text layer to make that happen let's make it white or you know white is cool but let's make this one the same color as over there because that's part of the color scheme now black white and then an accent color we're gonna pick this and then please tell me there's a color picker there it is it's automatic and just click here nice look at that look how beautiful this is okay cool now let's pick a font uh depending on what font you have uh installed on your computer you can actually load the font so it will be like hey where did you where did you download the font and then you go find it or you can use the font that is already in here they have some pretty cool fonts some crazy don't go too crazy with them come on like it has to be readable also we're not in 1990s so chill with the uh with the exaggerated graphic design uh look we're looking for something bold um and that is very readable okay i actually like that uh leading if it's what i believe leading is basically the space between different lines so i'm gonna bring the leading a little closer uh if you want to make it center this paragraph tab here you just click paragraph i think that's what we're gonna use i'm gonna click on the move tool i'm gonna click ctrl a to select everything and then since i have the move tool selected i can line it up up here remember left middle right top middle down just literally look at the uh thingies now if you want to make everything very very very easy on yourself you can go to a stock footage website uh there's pixabay is a good one and you can type things like i don't know galaxies i i absolutely hate galaxy graphic design like there's nothing wrong with them but everyone uses them so it's kind of uh annoying let's type abstract if you want something abstract and let's see what we can find that might look good let's go with this thing right here cool we can right click it i believe you should probably download it but you'll you decide you can download it full uh hd and if i come here and i press ctrl v it paste it in in the smallest quality ever okay okay we might have to download it then let's go here and type download and click download i'm not a robot at least i'm i don't think so let's click ok make sure that you know what you're downloading and you know what the license is for that stuff um so that you don't mess it up okay good now let's delete that layer because we don't want it boom and then let's click open and place because that will open the file and then place it on top of whatever you were doing that's what i believe at least it's right there yes is it so small the world will never know now you can drag the corner and as you can see it's stretching it and you don't want anything to be stretched okay first rule of graphic everything is the first full of graphic design you don't want anything to be stretched okay stretch not good so hold shift in order to maintain the proportions and that way it doesn't look like jello it actually looks like snowy mountains all right don't don't be scared if it's completely black now i'm a little scared though i'll i'll admit uh you might want to center it or whatever it's kind of lagging but my internet connection is also trash so i'm not too surprised um yeah it would be really cool if i can see what's going on here no okay no it doesn't want to show me what's going on uh turn that off turn that on okay it opened that in another that's not normal but okay okay okay i keep pressing ctrl t what was it ctrl alt t there you go for the transform tool uh wait a second what what size is that thing what size is my canvas right now my canvas might be a little too big let me just make sure okay let me place this and then we're going to go to image i'm lagging a lot canvas size why is it 8 000 by 4 that doesn't make any sense but all right let's retype 1920 make sure this is not selected 1080. click ok turn this off okay okay i'm going to select all of my uh i'm going to select everything basically and now i'm going to press ctrl alt t to transform and then i'm going to bring bring him down in order to not only make sure that it doesn't stretch you need to hold shift for that but in order to basically mirror the transform so that it's going towards the middle you need to hold also shift maintain proportion and alt in order for it to go towards the middle instead of on the direction that you're pulling it from there we go and now we have something relatively decent cool press enter press control plus to zoom in okay now this is a 1080p i was wondering why why it was looking so weird just make sure you do a little little bit of adjustments in there you can control a and center stuff again um like the starting sun you want that centered for sure and that little border there you want that centered we're going to go ahead while the border is selected in the layers we're going to click on the shape tool and then we're going to lower the thickness of it right there nice so where was i about this planet uh picture thingy there it is oh my god i keep pressing ctrl t um ctrl alt t to transform alt for the anchor point to be in the middle and then shift to maintain proportion let's do this boom like that okay now let's drag it on top of uh underneath the border so between the background and this is what it would look like on top here you will see in on the layer tab there's opacity let's just drag that down like uh crazy and technically you have yourself a starting zoom screen and and the cool thing here is that from there you should be able to you know if you don't take this into account and just turn off the starting soon you can use this to make your banner for example let me open up a new project um new and this one is going to be 640 because the twitch panel they ask you to be um they ask it to be 320 in order to make it look the more hd you go with 640. i usually go 640 by 640 and then decide what the height is going to be so i'm going to press c and that should um open up the crop tool and then here i can determine how high i want it to be but the width is going to be 640 for sure so we're going to be in hd boom um press enter oh why is it wide like that okay that's not that's not really intuitive anyways let's uh let's crop it properly it might not be 640 in total but we'll be close to that boom okay so now what i can do is press ctrl a and uh hopefully that works control c or control shift c so basically oh wait i need to i need to fix those little things because we're seeing the this part we don't want that there you go and there you go cool so ctrl a ctrl shift c i i don't know if that's going to work and control v that did absolutely work so control alt t to transform and you can see it's huge and you want to make that way smaller hold alt and shift maintain proportion and also make it um from the middle cool so you can do that and from there control plus to zoom in you can go to the text and type whatever text you want this is the about me uh one little tip for the text though okay control a doesn't work i need to remember that go to character here change the color uh one thing to remember here one of my tips for banners if i can speak uh banners is to actually type whatever the the longest word is going to be in my case it's usually instagram i like the lowercase i actually really like the lowercase it's usually instagram so i usually size it with instagram with the word instagram because no other word is going to be this long so i can maintain the proportion of the words so all of your panels are going to be you know about uh artwork if you know um what else uh donate subs subscribe there you go and as you can see they all fit with the same size and it's gonna really look good that way if every every single piece of text has the same size don't don't be going crazy on me and uh for this you know you can i can hold alt duplicate this turn off that go there and type flying and for example one two three and boom this one let's say that i want to make it white uh now it's white and that's pretty much it and then of course if you want to center it remember ctrl a until you see those dots all around go make sure you have the move tool selected middle middle and for example right now i didn't have the right layer offline is what i want to center middle middle and there you go currently offline and this is how you do it if you want to add like social media and stuff like that you can just look for the png files on on google image and then drag and drop them does that work i personally uh like to keep a little stock of them for example i have this and those are all transparent so if i want to drag twitter here twitter shows and it's transparent ctrl alt t to transform wait wait smart object needs to be rasterized okay that's fine just right click here and then rasterize it boom and now i can do that oh that's a weird way of dealing with it uh hold shift and i can place it wherever you get the point i'm not gonna actually add a twitter control d deselect and from there of course um you need to export you go to file export you know export as png cool export as png you see the size here remember it's the same thing um quality 100 and it tells you even the size it's going to be click save and then pick wherever you want to put it then you can upload it to your twitch channel if you want to learn how to upload those things to your twitch channel i have so many videos on that uh don't worry about that this was just the hey this is pretty much photoshop online you can access this from your browser this is on chrome i'm not using a software i didn't download i didn't install anything uh you can probably access this from an ipad uh from from a phone although it's probably complicated to use on a phone but basically here it is it might be a little buggy uh depending on your computer depending on your internet connection but this is amazing and using that same technique i could have continued and made the banner off of that same image and made uh you know an intermission screen if i wanted something like uh transparent i could have used like some some masks and etc it's hopefully this is clear enough for you to get like the general principle of hey this is how you can start making your stuff right now another advice is don't go crazy with the colors don't go crazy with the images pick one or two colors stick with them on everything don't change colors between the offline the banner that make it look like everything belongs to the same twitch channel all right and there you go this is an easy method of creating your own twitch graphics uh if you are a beginner obviously if you're gonna do this in the long run don't just look up how to do twitch overlays how to do twitch this is basic graphic design if you want to learn graphic design type you know how to do graphic design or graphic design ideas graphic design examples and try to figure out how to do certain things how to add a gradient how to use mask how to use the pen tool when to use the pen tool how to all of that how to change colors and on layers and everything anyways hopefully this was informative if it was please leave a like click on the like button like right now of course you can subscribe if you want more info on stuff like that and uh if you don't have the time to do all of that you can just go to gumbro.com get level and actually get pre-made overlays that are just ready for you to go and the good news is that most of them are also very much free no excuses there okay once again i stream on twitch so check me out on twitch and right now youtube will tell you what they think is the best video you should watch next at the bottom of it you should definitely click on that video because it's my latest video and i will see you guys next time don't forget to get your uh streamer brain mug this is so not visible available link in the description and i will see you guys next time go out there make me proud get level out

Channel: Gael LEVEL

Views: 50,360

Rating: 4.8922558 out of 5

Keywords: twitch, streaming, twitch tips, how to, tips, twitch advice, live stream, live streaming, live streaming tips, twitch tv, twitch overlay, twitch overlay photoshop, twitch overlay tutorial, overlay without text, twitch overlay tutorial obs, twitch overlay template free, twitch overlay template, twitch free overlay, twitch free overlay maker, best free twitch overlays, 2021, how to make twitch overlays, starting soon screen, starting soon screen twitch, Twitch tips 2021

Id: bZyRDYwG51c

Length: 21min 0sec (1260 seconds)

Published: Thu Jan 28 2021