HOW TO ADD OVERLAYS IN STREAMLABS 2024 ✅ (Beginner's Twitch Guide)

do you want to deck out your stream just like this lucky for you in today's video I'm going to teach you how to add overlays into streamlabs so you can spice up your stream if that sounds good to you then drop a quick like on this video so other streamers can find this video and let's step on it just like when I see a spider when it comes to designing our stream we basically have two different options the first option is going through browser sources and the second option is getting the actual raw files which you can import directly into your streaming software like streamlabs so I'll go over both of these options for you but I'm going to start with the first option cuz I actually have a free method for you guys cuz I know you guys are a little cheap skak sometimes just like me so I'll leave a link in the description down below which will leave you exactly right here to today's sponsor own Pro which we're going to get some free overlays in order to spice up our Stream So once you're on this site we're going to click on the join for free button or the login button in the top right if one of them doesn't work and I should mention that if you want to use your overlays for twitch kick YouTube whatever that's totally fine but in order to use this method you're going to want to make a free Twitch account and then log in with Twitch in order to get access access to those overlays so once you've done that click on log in with twitch and I'll see you on the dashboard so once you've logged in this is what the dashboard looks like once we're on this page we're going to go to the leftand side where it says scene Builder and since we like to keep things super easy over on this channel we're actually going to do the beginner option shocker right we're going to click on complete setup because that's going to have everything all set up for us because you know I'm a lazy so but if you wanted to take the harder option and use single scene and build it out yourself that's totally fine but we're going to keep it easy and click on complete complete setup and then obviously do we want the longer setup time or do we want the quicker one I'll let you guys think about that for a second if you said the longer setup time I don't know if I want to be your friend so we're going to click on automatic selection just because it's going to take less than a minute and right here is where I mentioned you can get some free overlays which right now you're like Cody I see highlighted exclusive what the heck are you talking about you liar well calm down friend you're going to scroll down just a smidge and you'll see the free column right here so you'll see five different options for free so all you have to do is just click on one it will bring you a little preview of what it looks like in the Showcase so you'll get all of this stuff completely free which is nice but if you're like I don't like this one you can X out of it and checked out the other ones but the kicker is that you notice that you only get five free ones well that's good and great but they have hundreds and hundreds and hundreds of different overlay packages that you can easily switch between with a few clicks of a button like this cool one right here I actually like this one a lot you can get all those like old aesthetic ones so if you wanted to get access to hundreds and just switch between them super easily then you can upgrade to their paid plan but that's totally optional you absolutely do not have to do that and you can stick with one of these five free ones which I'll be doing in this video because I don't want to force you guys to buy anything you don't want so for this video I'm going to click on the fully animated chroma tab we're going to check out the Showcase just to make sure it looks to our liking and we'll see that we got some rainbow colors I think it looks pretty lit so we're going to click on the create scenes button once we pick the package that we want then we're going to click add fitting alert set so we're going to click on that button it's going to give it a couple seconds to actually create all of our scenes like it did right here so now you can see we got a bunch of different scenes but the first scene that everyone really wants to have is usually a just chatting scene and then a game overlay scene they also have like a starting soon screen which I guess we could start off with because you know starting soon we're starting the video ah bad joke whatever so we're going to start with the starting soon screen so we're going to click on open scene on that option it's going to bring us to the editor in just a moment where we'll be able to make any changes and this is what our animated starting soon screen looks like now if you guys are on the free plan there might be a powered by own image that pops up but obviously you know it's free so you got to take what you get but if you upgraded the pay plan then it'll probably look exactly like this and not have the powered by own but honestly that's such a small minor detail for something that you're getting for free so I wouldn't complain about it so the first thing that we're going to change is actually our socials so if you have an X or an Instagram or a YouTube you're able to easily add your little tag so if you hover your mouse just below it you can double click on that empty box and it'll bring up the text box here and you can type in whatever your handle is you can just rinse and repeat for the other ones normally if you just double click so if you click once it'll just bring up like the everything here so like you can see all of your different social media sources and everything so if you wanted to change let's say the image let's go to the third social media folder open that and then you'll be able to see well this is actually X and not you know YouTube so I guess it's probably the first one yeah so it's the first one but you can actually see that it has the image here so if you wanted to change like the transparency of the image I don't know why you would but you can go and change certain things there or if you wanted to change the graphic so if we click on image change graphic we can go to let's say Discord epic games Facebook they have a couple of free ones that you can choose between so actually they have a lot of free ones that you can choose cuz they all say free and modular so that's actually dope so you can add like your Tik Tok or twitch or whatever I don't know why you'd want to add your Twitch if you're already streaming on Twitch that seems kind of redundant but I digress so if you want add like your Snapchat you can click on the Snapchat graphic and then it'll switch it to Snapchat instead of YouTube then you just go back and then click on the text one so if you hover over these boxes here on the left you'll see that the correlating highlights over in the middle I'm pointing with my finger and you guys can't see my finger I don't know why I did that but you can just hover over the left hand side and it'll highlight on the image what that's going to change so now that it's the Snapchat image we can hover over this one and it says my YouTube so we're going to click on that and change it to my Snapchat then we can go back and then hover over the blank text option and then you can just put in your Social Links and stuff that's not actually my Snapchat by the way but for the purposes of this video let's pretend like it is so you can just go and edit these different icons the way that you want to so I'm just going to go and add all this stuff there and that's pretty much it for your stream is starting soon screen so that's easy peasy right so now how are we going to get this inside streamlabs well that's actually pretty easy because we're going to use browser sources so before we do any of that stuff though we have to make sure to save our changes otherwise none of this will work so if you notice in the left hand side of the corner we have this red I think it says unsaved if we like stretch it out we have to make sure that it says green after we click the save button sometimes we got to press it more than once I don't know why but just in case we're going to press the save button going to do its thing and now it's green so now it says saved so now that all of our changes are saved what we're going to do now is click on this copy overlay URL button now you can see there's a couple different options here for the foreground and background it's not going to matter for our starting soon screen but I'll go over the differences in the next scene for our just chatting or our gameplay scene so for this one we'll keep it easy we're just going to Do complete scene so we're going to click on copy overlay URL and that's going to give us the URL that we need but before we go into that I just forgot about the alert box here so obviously if you wanted to change stuff you could go and change you know the different titles and the different messages and stuff so like this says stay connected so you can change it to like SA tuned so you can go and change it to whatever you want but the alert box specifically you want to make sure that it matches your thing so right now we have the chroma starting soon scene whatever we want to make sure that it says alert chroma alert so if that doesn't say that for whatever reason you can click on change alert box and you can fix it here by adding a new alert box doing it that way it looks like they fixed it before cuz there were some like mismatching but it seems like everything's working fine so just know if that happens to you you can go and make a new alert box Box by let me save this quick we'll go back you can actually make an alert box under this alerts tab on the left hand side create new alert and you'll be able to add it that way but it seems like everything's working fine now so you don't have to worry about that but just in case it did I just want to make sure that none of you guys are left hanging seems like everything's working fine so we'll go to my scenes to go back to what we were working on obviously you can see here that I have a bunch but this one says recently edited because that makes it easier for me to check where I just was so I'm going to click on that and we're going to go back to our starting soon scene give that just a second to load up once again you can go to the copy overlay URL button complete scene we're going to copy that overlay URL and let's head over into streamlabs so I got my empty streamlabs looking right here yours might look a little different and that's okay if you want yours to look like mine you can simply go to the top left corner where it says layout editor and you can change it to different layouts to be able to add different things to your setup just make sure to click on Save changes after you've made all those changes otherwise obviously they're not going to save so let's go back to the editor in the top left this little little movie camera thing and I have a brand new scene here so we're basically starting from scratch so what we're going to do is first I'm going to rightclick that new scene and rename it let's just call it starting soon screen so that way we know what it actually is called if I could spell hit done and so now it says starting soon screen we're going to add a new source and we're going to add a where is it browser Source right here and then we're going to click add Source then we're going to click add new source and instead we're going to call it starting soon screen I guess we can call it source and then hit add source and then now this is where we're going to paste that URL then that we just copied except now we need to change the width and height because right now you can see it doesn't show the whole screen so if we're streaming on our canvas of you know 1080 and we're going to change our width to 1920 and our height to 1080 and so now we can hit close you can see we have our animated starting soon screen right here in inside streamlabs if you have a not so great computer and you notice that your stream is taking a hit because of all of these new browser sources you're adding and just like animations and your stream preview what you can do to ease the pain a little bit is go to your settings in the bottom left corner and then click on hotkeys and then scroll down to where it says toggle performance mode and you can set a hotkey there so that way any time that you press this hotkey you'll switch between performance mode which essentially is just going to hide this preview I have mine on the home key so to press the home key and now it's disabled our stream preview our stream will still be going but we're not going to be previewing it inside streamlabs which is going to save that extra CPU and extra basically performance from your computer if you're noticing you're taking a hit try that out and see if it helps you out not everyone's going to have to do that but I know a lot of you guys are balling out of budget and I respect the hell out of you guys so just know that that is an option for you so now that we got our starting soon screen let me show you how to add a just chatting and a gameplay scene as well because that's pretty much the three things you need so we're back over on own Pro so what we're going to do is go to the top left corner and click that back arrow and that's going to bring us over to our scenes again then we're going to go back into the scenes folder we were working on mine happens to be this one so you can rinse and repeat with the ending scene and the BRB scene it's literally the same exact process as the starting soon screen and I don't want to waste your time so you can feel free to do those but let's do the just chatting scene because I feel like that's one of the most intensive ones to do so they call it talking scene so we're going to click on talking scene and you'll see what I mean there's going to be a lot of different elements here if you're streaming on Twitch then you'll notice that all of your different stream labels have automatically been added so you can see my latest cheer my latest donation my latest uh subscriber my latest follower now the latest donations you'll have to use owns donation system which you can find over on their dashboard if you wanted to do that so I might a set up through streamlabs so actually what I'll do is just highlight it so I'll click on it and I'm just going to delete the whole donation folder and then you can literally just drag and drop these to rearrange it and no one's going to know that it wasn't there to begin with so if you're not a twitch affiliate yet which means you can't get cheers or subs or anything then you can simply just delete these or you can hide them with a little eyeball so that way you can unhide them when you do eventually unlock those features but if you're streaming on kick or YouTube then you can simply just delete them all and then you can put something else there if you'd like or you can just leave them blank doesn't really matter but you also have your live chat for twitch so let's say you're streaming on kick or YouTube or you want multi chat then all you all you have to do is Click there on the live chat you'll go to chat box and then all you have to do is just hide it and then you'll have this blank chat box and then you'll put in your browser source for bot rck or whatever tutorial you watched of mine but you'll do that in streamlabs and not on this page here I'll explain that later otherwise if you're just streaming on Twitch easy peasy just leave it there and you're good to go you can also change the colors and stuff here if you want including more emotes and all that jazz so this is where it gets a little bit tricky so pay attention so basically in our just chatting scene we have two boxes here so let's say that I wanted to have my webcam down here and my screen up here like let's say we want to have this as adjust chatting or a gameplay scene you could really use it as both so what we'll do now is you'll notice that we have a foreground section and a background section so the easy way to do this is first we're going to go to copy overlay URL and we're going to copy the background so we're going to copy that overlay URL for the background and we're going to go into streamlabs so now we're going to start a new scene so I'm going to call this one just chatting SL gameplay cuz really you could use it as either so hit done and then we're going to add a new source we're going to add that browser Source add source and then add a new source instead we'll call it just chatting slash uh what did I say gameplay scene and then hit add Source paste in that URL though I should mention that this should be for the background so we'll fix that in a minute but change the width to 1920 by 1080 and then hit close so I'm actually going to right click this and go to rename and we're going to call it background at the end because it it's going to be important to distinguish the background and foreground so you can see here that this is literally just the background we don't have any of the fun stuff on top because we want to have the overlay on the corners for our webcam and the overlay and the corners for our gameplay scene or whatever you're having there or you can leave it blank it really doesn't matter so what we're going to do now is we're going to add a new source and we're going to add a webcam I'm going to use my crappy integrated webcam because I didn't set up my other webcam for this video so my bad so we're just going to call this crappy webcam and hit adds Source I'm going to use the integrated one on my laptop it's going to look like crap for a minute or two and that's fine so we're going to hit close oh God that's awful but now we can grab our webcam and if you wanted to have your webcam like let's say up here then okay so another thing too is you can rightclick or just literally like highlight over it and then hit the lock button for the background that way you can move your webcam freely without dragging crap around so we're going to put this in the corner and fill it up as best as we can if you wanted to have your webcam here and you can leave that blank that's fine or if you wanted to have you know your computer screen up there that's fine too it's really up to your personal preference and whatever you decide is best for your stream so I'm going to fit this right about there that's good enough let's say we wanted to add our screen capture we can click on screen capture add Source let's just say leave it as screen capture or you can add a new source instead it don't matter add Source let's let's just do you can do automatic capture your entire screen whatever works best for your situation I'm going to do automatic it's not going to capture anything cuz I don't have any games up right now but that's okay so we're going to click on that and we're going to drag it to the little rectangle that we have here you can use the arrow keys on your keyboard to get more of like a fine tune sort of deal that looks good enough for me right now so that's all we need to do at this moment so let's go back to own Pro so now that we're back on own Pro we're going to actually copy the foreground this time and now we're going to go back to streamlabs so now that we're back in streamlabs we're going to go and add a new source browser source and then we're going to do add new source instead we'll call it just chatting SL gameplay and then foreground and we're going to essentially sandwich this on top of our other scene so we have our background all the way at the bottom of the list cuz that's important we have our screen capture and webcam sandwiched in between this and the foreground is the bread on top so we're going to paste in the foreground you L here change this 1920 by 1080 because that's what we're streaming at click close And now you can see that it kind of looks like crap because we need to fix some stuff but that's okay so I'm going to lock the why is my do we Okay that's weird ignore that anyways we are going to lock the foreground and now we're going to take our crappy webcam and kind of try and fit it in this little box here by making it larger or smaller just to get it to fit in that looks good and then then obviously you can see our screen capture is the same so we want to line that up right about there looks pretty good so you got your screen capture there you'd have your Twitch chat there you'd have your webcam here you got all your stuff here though if you notice something guys we messed something up we never hit save changes so it has our donation stuff right there which we changed so let's go back to own Pro and save our changes so now we're going to hit save changes I can't believe I forgot to do that it has the green in the top left now let's go back over to streamlabs now you can see that it has made the update however if it didn't make that update you'll just double click on the source and hit refresh cach of current page and it will force a refresh to make the changes so you can do that for the foreground and the background if you wanted to have your like bot rcks chat over here like you watched my multi chat video or my multi streaming playlist which I'll leave linked in the top right corner then you'll just add your browser Source here so you'll do add new source browser source and then multi chat and then that way you can just place it over in streamlabs and you'll have your multi chat over right here instead of doing it all in own Pro so now we got our starting soon screen and then we got our just chatting scene so let's go back to own Pro so we're back on own Pro we're going to hit save again just because we got to make a practice out of that we're going to go back to the top left corner and now we're going to go back to our chroma tab that we made and then overlay scene overlay 01 don't know why it's called that but that's okay so this is like your standard gameplay scene super basic it's you know pretty standard you got all of your different stream labels up here so if you don't want your donation just delete it and then you can just kind of you know move this to the middle and customize it to how you want but you guys are smart enough to figure that out by now you got your alert box here Chromo alerts easy peasy everything's looking good you want to move your alert box simply just move the alert box it's literally that easy so now it's pretty much done for us so all we have to do is hit save and then copy overlay URL this one's the same you could definitely just do complete scene here so just click on copy overlay URL go back into streamlabs we're going to make a new new scene we'll just call this one game play hit done then you're going to add let's say your screen capture we're going to add the screen capture that we have so you got your gam playay then you can add your video capture device which is your webcam so crappy webcam just put that like here just for the video sake let's say that looks good then we're going to add a browser Source we can call this one game play oh God that was bad game play Source oh God that's still spelled wrong please hit add source we're going to add the URL same thing 1920 1080 you guys should be getting the hang of this by now and boom you got your gameplay scene right here so that's the first option is using own Pro to do it all for you the second option is using another branch called own.tv which I'll show you so a lot of you guys get confused because owned has two branches they have own Pro which is the subscription based service slf free version so you can use that but this is own.tv which if you go here you can individually buy out packages so if you wanted let's say synth Runner series you can pay one time fee for this entire package and you'll get access to all the files including the stuff that you'll need to design your Twitch profile like panels your Twitch Banner uh stuff like that so you'll have access to the actual files and if you don't want to go through own.tv that's fine too but I'll leave this Linked In the description down below but you could also hire someone through Fiverr or Etsy or wherever you want to get the raw files from because the raw files is going to be option number two instead of using browser sources so let's say you get your hands on the raw files whether that be through own.tv here or Fiverr or Etsy or literally whatever let's say you got your hands on files let me show you how to import those so I'm going to add a new scene we're just going to call this starting soon screen 2 hit done and so now we have a blank starting soon area and now if we have the raw files we're going to do add new source and so if you're adding a video so an animated overlay which in this case will be adding an animated starting soon screen you're going to click on media file but if it's not animated you're going to want to choose image because if this one supports pgs jpegs gifs whatever you want to call them this is going to be the image but if it's animated like a video file then you're going to want to choose media file for your option that's really important otherwise it won't work properly so I know that mine's going to be animated so we click on media file add Source I'm going to do add new source instead we'll call it animated starting soon oh my God soon Jesus green hit add source and then now we're going to make sure we hit the loop button so that way when the video finishes it's going to Auto Loop it and it's going to be seamless so now we're going to click browse and locate the folder that we got from own.tv ATC fivr literally whatever so I ended up getting the dark mode series premium package from owned so I'm going to double click on that and there's a cool thing where actually if you hit quick start you can do streamlabs import and it'll show you how to import everything with like a couple button presses but the most important part is that if you want to piece things together like from Fiverr or Etsy you likely won't have the quick start option so you'll have access to the direct files like this and so we're going to find let's see I believe it's animated intermission Banner so there's a bunch of different things here but focusing on the starting soon screen we're going to click on animated intermission banner and now you can see we have a blank one we have ending pause and starting soon we have starting soon with like twitch I think uh not twitch Twitter uh YouTube and something else there but honestly I wouldn't mess around with that cuz you can add it yourself so I'm going to click the starting blank option so I'm going to hit open and now you can see we have our animated starting soon screen with the loop activated so we can hit close and we have that right then and there so easy peasy done if you wanted to add you know a Twitter logo a YouTube logo you can go and download those from Google Images just make sure they're transparent PNG files you'd be able to add those as image sources here and then you can play around and customize it to your little desire here so starting student screen is easy then we'll go to let's say a gam playay scene and then Jesus how do you even sell SC oh my God never mind oh my geez we have to like edit this video bad actually I'm lazy I'm not I'm going to leave it in anyways hit done and now we have our gameplay scene same thing we're going to do a media file so add media file add Source add new source instead call it gameplay 2 doesn't matter add Source Loop and then hit browse so for the gam play we have a couple options just like own Pro if you wanted to have just the minimal one you could do the own Pro overlay package so if you do that hit open it'll have your little like um things up here which then you'll have to go and add they're called stream labels here so that way you can add your know your most recent follower your most recent sub and you can individually add those like that obviously the own Pro option is a lot easier because it does everything for you for the most part but that's an option so if you wanted to do the same thing like we did there that's cool otherwise you double click on here click browse again and go back to your files I believe it is talking Banner yeah so this is talking Banner you have a couple different options here so if you do V1 then it will have this so it has like your live chat then you can add your webcam and your gameplay scene and all your stream labels and stuff you also have a couple different options like blank so that way it's a cleaner it doesn't have those stream labels in for you again and they also have a couple more like this one and then they have one more here so it really depends on your preference on what you want to do but it's the same process so if you wanted to add you know your gameplay scene or your video capture device AKA your webcam then we'll go to crappy webcam and we'll put it over here after we lock it and then webcam let's just say we put it here but the thing is though you want to make sure that your webcam is below it so that way it actually fits into the actual design so that way you can do the same thing with your screen capture and all that stuff and obviously if you go through the raw file method then you're going to have to add the alert box as well because the alert box is not added into these files so basically when you have access to the direct files you're going to have more customization in certain aspects but at the same time it's going to be a little bit more of a pain in the butt to set everything up so it really depends on what your style is and what works best for you to determine whether you should use option one or option two but now watch this video to the side of me to set up those really cool transitions for when you switch between scenes my name's and I will see you in the next one

Channel: Cpaws Music

Views: 3,010

Keywords: how to add overlay to streamlabs, streamlabs tutorial, streamlabs overlay, stream overlay template, free overlays for obs, twitch overlay, free overlays, free stream overlays, obs overlay, how to add overlays in streamlabs, streamlabs overlay tutorial, streamlabs tutorial for beginners, how to add overlay in streamlabs, obs studio overlay tutorial, how to stream to twitch, obs studio tutorial, obs studio, free stream overlays for obs studio, how to setup overlays

Id: DazpelT2STw

Length: 25min 0sec (1500 seconds)

Published: Fri Apr 19 2024