How To Add Overlays In OBS | Scenes & Sources (2022)

in this video i'm gonna buy an overlay pack you can do the same thing or use one you already have and then i'm gonna show you how to install an overlay pack together with your game your webcam a count on timer etc until tv was kind enough to sponsor this video as well as let me buy whatever i want from their store and give you a 50 discount code the code is stevian you can find the link to their website in my description this here is the homepage of their website there's a bunch of different stuff here but the two main things people buy on this website are the complete overlay packs and then custom emotes which you can find right here under make your own supermodes and then click here this is a complete wizard to create your personal emote then generate it on the bottom and then here you can select which of these emotes you want to buy and then check out however this is not what we're here for i want to buy a complete overlay pack and then show you how to install all the elements and again you can choose whatever pack you want however i got a lot of questions from people buying packs from this website because they sponsor me a lot so in this video i'm giving everyone a chance to follow along and install a whole package together with me okay i think i just found the one i wanna buy so when you click on an overlay when you scroll to the bottom you can find an interactive showcase now look how cool this transition looks let's click on it here on the left that looks kinda sick let's look at the alerts i'm gonna click on follower yeah this also looks nice the final thing i wanna check is the just chatting overlay and this also looks pretty cool i'm gonna buy this overlay i'm gonna buy the premium pack here let's click on add to cart and apparently there is a 50 sale going on right now but it's definitely not always so just know you can always use my coupon code tvn click on apply and then get 50 of your price at all times so i just completed the checkout now if you buy an overlay pack on any website or if you download a free overlay pack you will always have a download button obviously and then you will probably get a zip folder then once the package finished download then you can probably copy it and then move it to your documents for example let's paste it here and then right click and extract all if you just click extract it will extract right here and then inside you will probably find a bunch of things now there is a quick start folder so let's check that you can install the fonts in the pack here so you just double click it then click on install on the top left and it's installed then step two was streamlabs import we don't need that and step three help we also don't need that you've got me so let's go to files here and then this is the whole content of the overlay pack let's check the third folder here system okay we don't need this so this is what we'll be installing in obs so let's open obs now and the way graphics work in obs studio is at the middle black screen here is the preview so there you will see everything that you're installing this is where you build your stream and then on the bottom you have three important windows so the audio mixer here this is where all your audio sources will appear and i'm gonna talk about this later because there are some things that are important to know but the most important things to set up your graphics are the scenes and the sources now the scenes on the left here these act like folders that hold all the sources in the middle so if we make a scene starting soon for example and click on okay then we will get a new scene here on the left this was the basic one and this is the new one you can make as much of them as you want i made the ones we're going to use now if you want to delete the scene you can just right click it and then go to remove click on yes and it's gone these are the four scenes we're gonna install today so as i said these scenes hold sources and to add a source you can also just click on the plus icon and these are the most important things to set up your stream so for example we can add our webcam here you go to video capture device you call it webcam then click on ok and then here as your device you select your webcam in this case is the elgato facecam that i've installed you can just click on ok and then you will get your source here in the middle now before you change too much of your graphics here you want to go to settings and then to video here on the left and make sure that these are the right resolution so for me it's going to be 1080p here i'm gonna select it two times and then click on ok because as you can see if you set up everything with the wrong resolution then you will have to restart all over again if you want to make something full screen you just right click go to transform and then to fit to screen and if your source is the same aspect ratio as your canvas here it will fit perfectly so on the side you can just rescale things if you only want to use a part of your webcam so for example in this case this whole side is completely useless so i can hold alt on my keyboard and then just cut off one of the sides by dragging this as you see this way and my webcam isn't really positioned correctly let's try to move it a bit like this so that way you can just be on the side and waste as little screen space as possible however since we're using a graphics pack here that isn't custom made i'm gonna use this because the webcam border will fit around this size now i added this webcam here in the starting soon screen it was a test but if you want to get it to your in-game scene for example you can easily add the same source multiple times by just adding it and then instead of giving it a name and creating it you can click on add existing here and then select another video capture device in this case that you've already added which is this one here which is our webcam in the starting soon scene so then you just add it again right here and this can be another size for example like this when we go to starting soon now here it's small and we can just click delete enter we don't need it here but we do need it in our in-game scene and here we go now let's start adding some graphics here and we're gonna add the starting soon screen first so let's go here to animated intermission banner and then we have two choices we have intermission starting blank and then here we have just starting now to be honest i don't know the difference so we're gonna install them both in most cases you can actually just drag something over here and then drop it and it's gonna be installed here but you can also just add something on the bottom through the plus icon here and then for an image you go to image and for a video you choose media source so we're gonna do that because it's an animated overlay we're gonna click on browse and then you just look for your overlay in this case it's dark zone dark zone files animated intermission banner and then we've added this one before so let's add the blank version now and click on ok and let's compare both now as you will see in a second this overlay here will disappear because it has completed one cycle and there we go if you have an overlay that constantly needs to be looping and just repeating itself you just gotta double click the overlay and then you gotta enable loop here so i'm gonna click on okay i'm gonna do the same thing for the other one click on okay and let's make it a bit smaller so as you see this was not the blank one and here we have my twitter my instagram and then on the other one that said blank you don't have all that stuff now i'm gonna delete this one because i wanna use the one with the promotion i'm gonna right click it go to transform and then fit to screen and now we can easily add our twitter handle etc you just click on the plus icon here then you go to text you could give it a name or not let's call it twitter click on ok and then just type your twitter here so in my case it's the video nerd yt sadly at the video nerd has been taken by an inactive account for eight years however i can't get it so this is what i have to work with and now you can click on select font here to change the complete style so you can take another font here on the left you can change the font style here to make it bold and you can also change the size for example to 60 let's click on ok click on ok and you can also resize it here but you got to be careful making it smaller doesn't really matter that much because as you can see when i make it bigger it will start to get pixelated so if you don't want the pixelation to happen you gotta double click it in the sources click select font and then change the size here let's close this now okay i'm gonna make it smaller and then i'm gonna position it here as my twitter and then you can do the same thing for instagram and youtube i'm not going to do it right now because i want to save some time another thing you might want to add here is a countdown timer and there's a really easy way i'm going to add this url here in the description of my video you just go to that and then here you can easily configure your countdown timer and then click on get my timer on the bottom and then you will get one like this but you can completely customize it on this page now i'm not gonna go over all of this i'm just gonna change a few settings that most people will want to use so let's say starting minutes here is 20 starting seconds default is zero that's fine we don't need to change this the font size 100 let's make it 300 and the text color let's make it black so hashtag and then five times zero like this and all the other stuff we don't need but the end text this is important for example stream starting so the end text here is when your countdown reaches zero then this text here will appear i'm gonna click on get timer and then this will be our countdown i'm quickly gonna show you the end text let's make it zero minutes and three seconds let's click on get my timer three two one and then stream starting this is perfect i'm just gonna make it 20 minutes again and then when you click on get my time here just copy the url on the top here you press ctrl c then you go back to obs here you click on the plus icon and then this is something really important you add a browser source now this is being used by a lot of online tools because what this allows you to do is it allows you to add a webpage here so you could add for example google.com then click on ok and now you will see google here but you can't interact with it you can't click on it you can only scale it and then view the web page now services that are using this for example are alerts you configure your alerts online i will add a few links in the description for that and then they give you one url you paste it here in the browser source and then it will show the alerts for example but we do the same thing with our countdown timer we copy the url we paste it here we click on ok and then we will get our countdown now it was foolish of me to make it black because it needs to be white if you don't know which code you need to enter here to get your specific color you just click on google color picker control plus click to open it in another tab and then you just select your color here in my case i'm gonna make it white and then here the hex color you just copy this you go back to the tool and then you paste it here as your text color now let's click on get my timer copy the url on top go to obs open the browser source replace the url there and then click on ok and now we've got a white timer which we can position right here and this is perfect now let's go to in-game here because we've already added our webcam and i want to show you how to add the border and actually it's not really necessary to explain because it's the same thing as before you just add a media source you call it webcam border you click on ok you click on browse and then in the graphics pack folder you can find animated webcam overlay and in here you will have a bunch of options now i'm just going to take this one webcam blank because this is pretty clean i'm going to make sure i enable loop here so it doesn't disappear after one cycle and then this is the webcam overlay now this is gonna be pretty hard to adjust correctly here because it's pretty small so what you can do here is just making them bigger let's start with the webcam here you make it big like this and then you can just fix the border here but the background is black so this is gonna be a bit awkward i can't really see it so what i'm gonna do is i'm gonna use this to show you another source because right here you see color source you just click on it click on okay and you can click on select color choose a color i'm just gonna take something like orange for a game click on okay and then you've just added a solid color and now i can show you the next thing because these sources here work like layers if i drag this color source to the bottom here you will see the rest appearing again so make sure your game is on the bottom i'm going to show you this later then your webcam and then on top of that your border so now we can adjust it perfectly here you can also just select the border hold shift select the webcam and then drag it over here for example now you can select the border again and then fix it like this and when you're finished you can click your border click your webcam we could have done this before by the way you just right click and then group selected items and now it will go in a folder you call it webcam and then you can just close this folder here and then to move your webcam you just click the folder it will select everything that's in it and then this way you can make your webcam smaller again and then position it over here so one last time if your webcam doesn't fit or you want to zoom it in etc you can select it here in the sources and then in this case for example let's make it a bit bigger first i'm going to select the folder make it bigger now select the webcam and then you could reframe it for example something like this i'm going to hold alt on my keyboard and then i'm just going to cut of a site like this here i can make it bigger or could have an extra side make it a bit bigger and then this way good of the right side and now i've completely zoomed in my webcam reframed it and it still works i can just select the folder again make it smaller and position it here now you know everything you need to know to set up your webcam the border overlays on the background for example and the same thing works for other things like adding graphics for labels for example let's check the folder actually to see what else is here and what i need to explain to you so alerts i'm gonna talk about this later then intermission banner this is like the starting zoom screen that we added so for example this here i showed you how to import it i showed you how to loop it to make sure it never goes away then here you have overlay and i'm quickly gonna go to the endgame scene and drag it over there because indeed this is a graphic to add your latest subscriber latest follower etc you can also delete it and then add them separately for example this here is latest donation there we go you can use it like this you can make it a bit bigger but it's going to be pixelated so you can position it like this in the corner for example and then add your latest donator here i'm gonna delete it right now let's check the folder again so now before adding our game here we can go to the intermission scene and then we can quickly set up this here so our overlay pack from owned here has a folder for the intermission banner by the way a bunch of these things here are animated almost all of them but they also have static options for example here stream talking banner psd this will be a photoshop file containing the talking banner and what we want to add in the intermission scene here is in my case intermission pause blank oops i just opened it we can just drag it over here drop it and then it's here again you can also add it with a media source instead and also again don't forget to loop your video files now instead of just a simple pulse screen here as an intermission you can also add a screen with your chat and then your game and your webcam etc and the pack we got from mount also has that if you got the same thing you will definitely find it in the folder if you got something else you might not have it but in all these specs there is an animated talking banner and again i'm gonna choose the blank one without the social media promo and just drag it over here i will delete the pause banner let's make it loop again so it doesn't disappear and you can't see it now because this is black but let me add a webcam here add existing one video capture device we've already added one there we go this is our webcam i'm gonna move the webcam below the stalking banner and as you see here this middle window here is transparent to add your webcam or your game and the same thing here on the top right now this intermission scene here is for example while you're in queue in league you can add your league launcher here on the top right and then add your webcam in the middle and then your chat right here on the bottom right so you can just talk to your chat people can see the cue they can see the chat on the screen and that's a really good way to fill some time or just have a heart to heart with your chat doesn't matter as you can see i just launched minecraft and now when i all tap out of it in obs here let's go to the end game scene because now i can click on the plus icon then choose game capture right here click on ok and then change the mode to capture specific window and then add my game here in the window drop down so right here this is my game just click on ok and you might not see that in the beginning because you need to open your game first now the game capture will be hooked so now you can all tap out of it and there we go this is the last frame before i closed it and again now you can go to the intermission scene and just like with the webcam we can now add a second game capture here and then just select add existing choose the game capture we just added in another scene and again it will need to hook if you add a new game capture you need to launch your game one time before you can actually see it in obs here so now we can make it smaller then move it below the overlay and then we can just adjust it here on the top right and then make it fit like this and then now you can just talk to your chat people see you big on the screen they also see your game in the corner there then also add alerts on the screen for new followers etc now since we already have a bunch of scenes here on the left it's about time to add our transition now here on the bottom you see scene transition and if you click on the drop down then you have your cut and your fade so you can change it to cut and then when you change them on the left you simply immediately cut to them but you can also click here on add stinger you just click on okay then click on browse then in your graphics pack you go to the stinger transition you go to the animated transition folder here and then you've got a transition without sound and then one with sound i'm gonna choose the one without and now you've gotta set the transition point i'm gonna make this a bit bigger here so we see all the options and to find the transition point you need to know how long your transition is so i'm gonna go to the animated transition folder here right click it go to properties go to details on the top right and it says it's one second now i think this could be one and a half etc but it's a quick transition so as my transition point i'm gonna choose half of the duration it is in milliseconds so i'm gonna select 500 which is half a second then click on okay and then make sure that here your stinger that we just made is selected and then when you change your scene as you see this is the transition so what's happening now is pretty simple when you click on a transition then obs will wait 500 milliseconds before actually making the cut to the next scene and since the overlay transition here is being displayed you don't see obs cutting to the next scene the animation fills the screen then it cuts and then you see the next scene and as you see this is our countdown timer we made the font a bit big because stream starting isn't correctly on the screen maybe we can change the resolution let's double click it and let's change the width to 1500 let's click on ok and i think this would fix it you can always change the resolution here double clicking it changing this in case something doesn't fit on the screen now it probably will and now the next thing you should do is adding alerts on the screen then also making sure that your chat appears right here and also adding labels on the screen for recent follower recent donation top donation etc now explaining all those things would make this video way too long so i'm gonna add a few links in the description for alerts labels your chat all that stuff now since this video was sponsored by owned if you want to buy one of their packages the link is in the description they are all high quality fully animated michael tv and gives you 50 of the price if you enjoyed this video then please give it a like subscribe to the channel for more content and i hope i will see you in one of my next videos have a nice day

Channel: The Video Nerd

Views: 272,244

Keywords: own3d, own3d.tv, own3d.tv tutorial, own3d tutorial, own3d setup, own3d graphics pack, own3d tutorial twitch, own3d overlays, obs overlays, how to add overlays in obs, add overlays in obs, add overlay in obs, obs overlay, obs graphics, obs tutorial, obs sources, obs scenes and sources, obs scenes tutorial, stream overlay tutorial, stream overlay obs, obs animated overlay, own3d.tv.overlay, own3d.tv twitch overlay, setup own3d, overlay setup, obs overlay setup, obs

Id: cWn0JwvYMa4

Length: 18min 20sec (1100 seconds)

Published: Sun Jan 23 2022