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

do you want to design your Twitch stream to make it look nice and snazzy just like this today I'll be showing you exactly how to add overlays to your streams and this will work for OBS Studio streamlabs twitch studio and even Mac and windows users and the best part is is that you don't have to spend a single dollar if you don't want to if that sounds good then drop a quick like on the video so other people can find this video but let me show you how to do it first we're going to go to own Pro which I'll leave Linked In the description down below that you can easily find it now if you've watched some of my previous videos I've talked about own Pro before but literally less than 24 hours this is a brand new version that just came out the old version you'd have to download the stupid OBS plugin that a lot of people were having problems with it didn't work with Mac users but now the new version uses browser sources so that means you can use it for Mac Windows streamlabs twitch Studio OBS whatever you want and luckily they also sponsored today's video so nice but once you make it to the own Pro site we're going to click on the join for free button in the middle and we're going to connect our Twitch account to onpro in order to log into the D dashboard once you're on the dashboard it'll look a lot different than the other one because you can't download that stupid OBS plugin which I hated so much cuz so many people are having so many problems with it so good riddance but now you can see a couple different options but we're going to avert our eyes to the left hand side where it says scene Builder my scenes overlays so on and so forth we're going to start with the scene Builder option so click on scene Builder and you got two choices here you got the complete setup for beginners which I'm going to do or you can work on just a single scene if you just wanted to do like a starting tun screen but you don't want to deal with all the other ones but you know that I am super lazy and like to take the easiest way to do a lot of things so I'm going to click on complete setup cuz it's going to do literally everything for us so I'm going to click on complete setup and then you can choose to do automatic selection or manual selection now if you want to do manual selection it's going to take a little longer you get to manually pick out everything but I'm going to essentially do that in the automatic selection because it's going to be so much faster and easier so why the heck would we not want to do automatic so I'm going to click on automatic and now it's going to going to bring us a bunch of different overlay packages to choose from now if you want to stick with the free version that's totally fine you're going to have five different choices here you can get that fifth one by clicking the arrow there behind my webcam which is so convenient however if you upgraded the premium like I have I can choose between over 400 different overlay packages isn't this nuts so literally you can just scroll through and switch between them at your ease with just a couple clicks so if I wanted to just use this one for like a stream or two wow this one's actually pretty dope literally I can just download this one and then let's say next week I wanted to switch to something different like the sanctuary series all I have to do is just click on this and then I'll create a new one and I can easily switch between them at my little fingertips so if you guys want to upgrade to the premium at any point in time all you have to do is go to the top right corner click your name and then you can go to your subscription status and upgrade to the premium but since I know not everyone has a couple dollars laying in their couch cushions we're just going to be using the free options for this video so everyone can participate sound good so I'm going to pick my favorite one out of the series which is kind of tough between pure chroma and avoid I think those are the dopest is that even a word we're going to click on the avoid Series right here you'll be able to click the Showcase option to get a preview of what's included in this package I think it looks pretty Sleek so I'm going to Simply hit create scenes we're going to give it a couple seconds to prepare itself and now it'll bring us to our my scenes category and while I was doing this it happened to error out I'm guessing that there's still a few bugs that need to be ironed out because it literally just came out less than a day ago so if that happen happens to you all I did was X out of it and then I just went back to scene Builder and just redid the process took like 2 seconds and then it worked on the second time so now that I'm on my scenes I'm able to choose between my scenes folders so this new one I just made and you'll notice that we have a starting soon scene ending scene be right back scene a gameplay scene and then a talking scene which you could either use for just chatting or you could also use as a gameplay scene it's really up to you so we're going to start very simply with the starting soon screen so we're going to click on starting soon we're going to click anywhere we're on there and it's going to bring us to our little editor now so if you want to use the mouse wheel you can zoom out a little bit give yourself some more room to breathe and it's actually pretty intuitive like if I wanted to change my username for Twitter or Instagram or YouTube or just move anything on the screen all I have to do is hover my mouse over it I'll click and then well that was a bad example cuz the alert box is there so I'm going to hit back and I'm going to click over here and it's going to click on whatever is there so if I want to make it larger I can make it larger want to make it smaller make it smaller it's up to you really you can just drag and drop on here if I wanted to change the text on here I just double click and then it'll bring me to the text box on the left I can put in my name and just pretty much customize it to what I want to have for my stream let's say that I don't want to have an Instagram there like I don't have an Instagram let's go and click on Instagram and I can hit the delete key and it'll just delete it or if you're like oh man Cody I wish I didn't do that you can go to the top right corner and hit undo and it's going to bring it back so instead of maybe be deleting it you can go to the left hand side where it's highlighted and hit the eyeball button and it'll just hide it so that way if you do want to make an Instagram or something you can easily go back and do it there now this is awesome because it's pretty much already done like the starting soon screen is basically done for us but there's a few things that you need to keep in mind the first one that I'll go over is that you can add your own graphic so if you click add graphic you can go and check out the different libraryies so you can add like little webcam overlays you can add some other stuff it might be limited to if you have the premium or these are free so you'll be able to use those overlays you can do like intermission webcam icon alert social icons and stuff so like this is like Discord epic games Facebook that's actually a nice touch I didn't know they did that so if you want you can go and add these so let's say I wanted to add Discord instead of uh Instagram and we just go there click on it make it smaller and basically just do the same thing and if you want to be lazy like me then I'm going to go and get the text I'm assuming I can do this I'm going to just try it on the Fly here I'm going to hold control C C to copy and I'm going to press crl + V to paste and would you look at that it made a new text box so now I'm just going to drag it over here I'll double click on it and then I'm going to change my name to there and where'd you look at that we have our new Discord instead of Instagram so I actually didn't know that until recording this video so shout outs to own that was pretty dope so I'll just quickly change my YouTube username and then we're going to touch on the alert box so see this alert box here you want to make sure it's always on the top but for the alert box right now we never actually made an alert box yet which can be a little confusing so we're going to take a quick breather and hit save in the top right corner to make sure all of our settings are saved which including the uh username for YouTube that's kind of weird I don't know why it's not showing up there so what I'm going to do is just click on this again it should say C paw I don't know why it's not so I'm just going to literally copy and paste this one cuz it's the same and then go there well actually not delete the whole thing but but just delete that text box or hide it I guess you could with that little eyeball then I'm going to drag it there so little workarounds on the fly like that are going to get you so far in the streaming industry so just be known that there are a few bugs I guess or I'm just stupid one or the other either is likely so just know how to make little workarounds and stuff and don't be afraid if something's not working exactly the way that I'm saying in the video and it's not working for you just take a deep breath and I'm sure there's a little alternative and if you guys have any questions or run into any bugs instead of asking me in the comments your best bet is to go in the bottom left corner where it says help and support and then you'll be able to find intuitive guides here as well as 24/7 Live support so we click that and then you can literally ask your specific question in this little chat support thing from the people who actually made this product so instead of asking me who only used this product for like less than a day now you should ask the experts if you run into any problems so we're going to hit save in the top right corner and we're going to go and work on that alert box real quick we're going to hit save and go to the top left and hit back to overview says it still isn't saved yet so I'm going to hit save one more time and then maybe refresh I'm going to hit refres okay it it did say save there I don't know what the heck I did different but it's okay so I'm going to go back to the top left corner hit back to overview and we're going to go to the stream Essentials where it says alerts so here you can see that I have a couple alert boxes here but we're going to actually add a new one so I'm going to click on create new alert I'm going to call this one I already forgot what the name of the package is I think it's a void alerts so I'm going to guess it's that and then hit create and then I'm going to go to the pro alert library but if you wanted to upload from your own Graphics or gifts or whatever you can upload them with this option here however I just want to have the matching one to make it look nice so I'm going to hit Pro alert library and then I'm going to find it right here the avoid so I'm going to click that it's going to bring up and import all of the alerts like follow subscribe resub so on and so forth so you can feel free to click on the activate one for whatever alerts you want to be included in this alert box naturally you'll probably want to go ahead and just activate all of them I don't know why I'm stuttering I think it's just my anxiety but I'm going to go and basically turn on all of them and then I'm going to click on edit alert for the follower follow Jesus I can't talk follower alert and you can change the alert title right here so blank is now following you can change it to now has joined the sub club or whatever the heck you want you can also go down and change the alert design if you will have a different design you want to use you can feel free to hit the pencil icon and edit the style you can also choose the layout of it and you can also change basically everything else about it including what sound plays so if you don't like this sound which honestly I'm not a huge fan of the alerts sounds from owned so if I click on edit alert design you can actually go to the Pro Sounds which is I guess coming soon shame on me or if you have the premium subscription you can go through the epidemic sounds and you have a ton of different options but you're also able to upload your own file so if you have like your own audio file that you downloaded somewhere you can upload it here and use that as the sound that will play with your alert now since I'm too lazy to do that right now just going to leave it blank I'm going to hit X and instead of just get rid of it I'm going to deal with it for now and I'm going to turn it down to like maybe 20% cuz that mother effer is going to be pretty loud and then you can also choose text to speech voice if you want to have text to speech for your alert but you can preview it conveniently behind my cam so I'm going to hide that that's what it looks like and if it's not popping up you can hit pause and then play and it's going to play the alert now if you want to hear what the sound sounds like you can hit the unmute sound and then pause and then play and then now it'll go through except if you can't hear the sound you have to wait for the next Loop which it says right here so I'm assuming they're going to iron that out soon but we're just going to give it a couple seconds and let it Loop and I'll let you take a listen to what it sounds like holy cow that's loud Jesus all right so the the owned alert sounds are just really loud and obnoxious for my taste that might be your cup of tea that's totally fine I don't judge so you might want to go and swap some things out but now at least you know how to if you choose to now that our alert box is customized to how we want it you can click on the save in the top right corner and then we'll go back to my scenes on the left hand side go to the one we were working on which happens to be a void and then starting soon screen click on that my phone is ringing you could probably hear that that's convenient for filming I'm going to wait for that to finish all right so now that my phone has finally effed off I'm going to go and delete the old alert box here and I'm going to click add widget and then you can feel free to choose and check out some of these you can add like a countdown timer you can add like a gif you can add image text video whatever you want but we're going to go to the live tab right here and we're going to see we have alert box chat box or labels which is like latest follower latest sub Etc but we're going to use the alert box here click on add widget and we're going to use the one that we just did which happens to be the avoid alerts so we're going to hit insert alert box and then we have our alerts here and as always when you're using alerts you want to make sure that they are at the top of the list otherwise you're going to have problems so now that our starting soon screen is pretty much done let me show you how to import it into your streaming software and then I'm going to go over the gaming scene because it gets a little more complicated after that so as always we're going to go to the top right corner and hit the save button to save our changes is and if we look at the top left corner it's going to go from unsaved to saved hopefully it did not so I'm going to click it again and hopefully it'll actually saved this time there we go it just saved so make sure to double save and double check that your saves are actually getting saved so once we've gone through that ordeal we're going to click on the copy overlay URL and then we're going to choose complete scene we will go over the foreground and background in a couple minutes so just be patient with me but we're going to start with complete scene here so we're going to click on copy over overlay URL and then we're going to open up our streaming software I'm going to use OBS Studio but you can use twitch Studio or streamlabs if you want so I've opened up my streaming software and the first thing I'm going to do is rightclick my scene and rename it so that way I can be nice and organized I'm going to call it starting soon and then once we are in our scene I'm going to go to sources I'm going to add a new source and we're going to add a browser Source excuse me Jesus and then I'm going to call this one starting soon I'm going to hit okay okay it says it's already in use so that's convenient I'm going to do starting soon 1 2 3 because Fu and we're going to hit okay and then I'm going to paste in the URL we just copied change the width to 1920 and the height to 1080 so once I do those three things I'm going to hit okay Give It 2 seconds to load and bada boom bada bing we got our starting soon screen looking clean and looking good right there and really that's all you need to do for the starting soon screen but when we go to the gaming scene is where it gets a little more complicated so if you need to take a breather just in and out so let's move on to the gaming scene so now that we're back on owned we can go to the top left corner and hit back to overview and it's going to bring us back to our scene so we're going to go back into our folder here and then you can see we have an ending scene and a BRB scene which is literally exactly the same process of what we did for the starting soon scene so feel free to rinse and repeat for those options if you even want to use them but then we have another two which is the overlay scene which is basically just like a full screen gaming scene we also have a talking scene which could also be used as a gaming scene as well so I'm going to do the principles in the talking scene but you can apply those to the other scene if you want it's pretty much the same exact process you just have to know how to do it so we're going to open up the talking scene first so we'll click on that and then you'll see we already have everything pretty much imported for us because when we linked our Twitch account by logging into own Pro with it it automatically gave it access to the chat the recent follower the recent sub the recent cheer and if you want to do recent donations you'll have to use own's donation system which I guess real quick I'll go over first thing you'd want to do is go to the top right corner click on your little icon then you can go to account settings and then you will import your PayPal email address right here and then once you've done that then you'll go to the tools option and then you can enable your donation page here and that's the little link that you'll give your viewers to send you donations and that way owned can track them and it'll show your most recent donation through owned but if you don't want to do that that's totally fine I don't blame you we'll just ignore that part we can actually go to my scenes we're going to click on avoid and then we're going to go back to the talking scene at the bottom and hopefully now that I've been like going through the website a bit you're starting to feel a little more comfortable cuz I want you guys to feel safe and comfortable and not freak out if one thing's not going perfectly fine so hopefully we're doing okay on that front and if we are drop a like so that way I know that you guys are getting use from this video so for example let's just say I'm lazy I don't want to do the donation stuff I'll click on the donation and then I'm going to click the hide button and boom it's not even there anymore so I don't have to worry about it if you want I can just go and drag this in the middle and no one's going to know a freaking difference that it was there so don't even worry about it so now if I just want to go I can click off the screen on this little gr part and it'll bring back all these options here so really what we want to do now is add our webcam down here because that's where we'll put it and then if we want we can put our gameplay here our computer screen anything that we want to put in this box we are more than welcome to so that's kind of why I said that something just dropped on my foot why did my plug just fall that was weird sorry about that so you can put like your gameplay here you computer screen whatever you want you can use it as a gameplay scene if you want so in order to do that that's where we're going to have to split it between the foreground and the background so if you see here anything in the background will be exported as the background and anything in the foreground will be in the foreground makes sense right so now what we're going to do everything is to our liking right now we're going to click save in the top right corner and then we're going to click copy overlay URL and instead of doing the complete scene we're going to click on background first cuz we're going to put the background in the back right so we're going to click on copy overlay URL go back to our streaming software I'm going to make a new scene and I'm going to call it uh let's say talking or just chatting or gaming I don't know I'm just going to call it gaming one I guess click okay and then now we're going to add another browser Source let's call this gaming background we're going to paste in that URL we got once again 1920 by 1080 so we do those three things and hit okay give it a second to load it's going to pop up here and now this is where we're going to put our little sandwich filling so we have the bread which is the background we need to put our sandwich fillings in which is our gameplay our screen whatever and our webcam and then we're going to put the other piece of bread which is the foreground to make it a nice delicious streaming sandwich now I know that's a pretty cringy analogy but hopefully it helps you remember it better so if we were using this for example I'm going to add a webcam which is video capture device don't know why I'm talking weird again I'm going to do that click okay and then I'm going to choose my crappy webcam from the list cuz I'm using the other two for the YouTube video hit okay going to make this a little bit smaller and try and fit it into this black hole as best as I can don't take that out of context and then now I'm going to add my game play so in this case you can add a game capture a window capture or display capture if you have no idea what the heck I'm talking about go back and watch my mega video on how to stream on Twitch I go over everything in extreme detail leave it in the top right corner for you if you haven't watched it yet but I'm just going to want to display my screen so I'm going to do display capture hit okay and we're going to capture our screen so this is what I'm currently recording on so just for you guys I'm going to have you guys look at that that's going to be our entertainment for now I'm going to go and approximately get it to the size and area where it is to the best of my ability you can also use the arrow keys on your keyboard do like like little micro edits and movements and I think that looks pretty good so now we need to go back to mpro and get the foreground URL to put into OBS so let's go back so now we're here we're going to go to foreground hit copy overlay URL then go back now we're going to add a new browser Source I'm going to call this gaming foreground hit okay I'm going to paste in the new URL in the 1920x 1080p you guys are getting the hang of this by now hopefully hit okay give it a couple seconds to pop up and there you go now we have the actual overlays over our webcam and over our gameplay so obviously you can click on your webcam and display capture to like move them around a little bit if you need to just to fine-tune everything and you'll be good to go now really important these are the sources right so make sure the foreground is the topmost thing and the background is the backmost thing for example if I move the foreground to the bottom you're not going to see it right if I move it above the background that's great but my my captures are still above it so you have to make sure that the foreground is at the top the background is at the bottom and your little sandwich materials are in the middle of the sandwich so for the live chat I'm just going to go into streamlabs and type in a message I'm going to say hi please hold on one second hi YouTube send it and boom perfect we have hi YouTube and then I got my streamlabs little Cloud bot which I also have another video on so top right corner if you want to see that after this but we got like all of our recent followers Subs cheers we got webcam gameplay play chat and now we really just want to test the alerts so I'm going to bring up owned Pro and OBS Studio next to each other so you get a better idea of what's going on all right so I have them side by side and what I'm going to do is click on test alert make sure our alert box is on the top of the um the foreground thingy and then hit follow or whatever like alert you have activated and set up now keep in mind though that when I hit follow it's going to play in this little owned web page and it's going to play in OBS studio now that means means that if you have your audio set up correctly you're going to hear an echo because it's going to play twice makes sense right and if you guys are wondering no you do not have to have the own proo website open when you're streaming literally just make all of your changes that you want to make and then you never have to keep it open again if you don't want to it will literally just be inside OBS through that browser Source URL there is no need to keep the onpro website open at all after you've done everything so I'm going to click follow it's going to play the alert in own Pro it's going to play the alert in OBS studio and if we don't hear the audio in OBS Studio I'm going to show you how to fix it so first we're going to hit follow it's going to play the uh the audio in owned Pro except you notice that is the wrong alert style because we never added our new alert box which means you got to go to the alert box we're going to delete that one add widget we're going to go to live add the alert box and make sure to add the avoid alerts that's the one that we did it used the other alert set for whatever reason not sure why so that's why we have to insert the alert box make sure it's at the top click save save those changes click it once make sure it saves it's currently not saving so low key I'm just going to start saving twice from now on please yep for whatever reason it got an error so I'm going to click it again give it two more seconds and hopefully it'll save there we go saved in the top left so now that we have our proper alert let's try and test that again we're going to hit follow and now the alert of the avoid series perfect that one popped up except you noticed that it didn't change there because we need to go into the gaming forecast or foreground or whatever and then we're actually going to go and refresh the cach of the current page so click that it's going to refresh all of the metadata coming from the website so now when we test the alert it will be the updated alert that we saved in mpro so you can see it there and if for whatever reason you're not getting alert audio through OBS studio so for example I'm going to test the alert and then quickly closed own Pro website and just keep OBS open and we're going to see what happens with the audio so I'm going to speedrun this real quick ready so I'm going to go follow close open full screen and let's take a listen so we are getting the audio it's coming through like the desktop audio however for whatever reason if you're not getting the alert audio or you can't hear it then all you have to do is double click the gaming foreground Source we're going to hit control audio via OBS hit okay and then now it brings up the gaming foreground audio mixer bar we're going to click on the dots and then go to Advanced Audio properties then we'll go to gaming foreground here and we'll change monitor off to Monitor and output because when you monitor something you're going to be able to hear it on your end and when you output something your audience is also going to hear that sound so if you are not getting the alert audio you're going to want to do exactly this however if you are getting alert audio then you need not worry about this and just forget I said anything and if you wanted to check out that other game gaming scene you go to the top left here back to overview click on your package then go to the one that we didn't go and work on yet that'll bring us here so basically it's just like a minimal gaming package thing where it just has the like stream labels at the top your alert box which you'll have to swap out for the new one and then you would just do the same exact thing we did before except you wouldn't need to do foreground and background it would literally just be um complete scene cuz there's nothing in the background but you can feel free to get fancy with it as well and make all the edits and changes now like I said this literally just came out less than 24 hours ago so I will not be surprised if you run into any bugs or issues and if you do please take advantage of the help and support 24/7 Live Support options here and report them so that way they can fix them as soon as possible and depending on when you're watching this video if you're watching it a month from now a year from now things may have changed so keep an eye on the pin comment down below for any changes that you need to know about otherwise watch this video to the side of me it's going to take your stream to the next level my name's Cody and I'll see you in the next one

Channel: Cpaws Music

Views: 46,344

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

Id: jN2cDW7Hvig

Length: 25min 0sec (1500 seconds)

Published: Fri Feb 02 2024