Setting Up an OWN3D Overlay in OBS Studio | Twitch

hello welcome to today's video today we are going to be building an overlay in obs studio and we're going to be using an owned overlay uh there will be a link in the description from where i got this one and all the files in case you would like to get a similar one i'm also going to show you some tips and tricks in obs studio that will make your life a lot easier when setting up two streams so let's get started here we'll just put this down here so the first thing i want to let you know about obs studio is um i see a lot of people so you've got your scenes over here that we're going to be building today and a lot of people i see running a audio input capture here but you don't actually need that like you can add your microphone as a source right here but as long as you see your microphone in the audio mixer right here and the sound is going up then you don't need to add an audio device here if the sound's working here your stream will be able to hear you as well same with if you're recording so we'll get that out of the way um these are the files from the glitch pro overlay that i bought in here you can see you've got some panels you've got your profile your youtube banner which i've used um the banner here and you can see i've got their panels here which is a nice addition with the overlay um so we've got the animated overlays as well as the still images but for this we're going to show you how to use animated ones so for here we have our starting screen so we will add a new source and for anything that's animated we want to use uh where is this here let's do a video source actually let's try this a scene that's what we want so um oh no i lied sorry that's not what we want either let me see here so this is my normal gaming overlay that i have built these latest tags down here aren't attached to the camera frame as part of this overlay so i'll show you how we can build all that together as well and i'll show you this transition here we just need to find okay so i just needed to look at what we're doing here sorry about that media source is what we're looking for so we will do rename it something we'll do tutorial starting usually i would use glitch pro starting so that i know it's which overlay it is in which starting screen because that's the name of this package that i purchased so we will create a new one the name is already oh because i have this already as a name for my scene we have to change it for the source and then what we want to do is find the local file so we'll go down find where that file is so we are doing the starting one so that should be in the intermission banner ending pause starting starting and starting blank we'll go with the regular starting one and then you want to make sure you set it to loop so that the animation restarts when it gets to the end restart playback we want checked as well this one you don't have to use that'll just use your hardware instead of the software when it works which could make it harder on your pc we don't want to check this and this should be okay now so here we go we've got our starting screen and you can see here there's the timer it's a 12 second animation and because we set it to loop once it gets to the end it will just start over and what i like to do is if you're playing around with other sources in here sometimes you might accidentally grab this one and move it so once you have it in place i would recommend just locking it then that prevents you from accidentally moving it around and this is the show hide so we can have sources here that you just want to hide so once you've got your animation set like this everything looks good we want to add some labels here for our socials so in that case what you would just do is add text let's see i want i already have one for my twitter so we'll call this one tutorial twitter we want the text right here to be oops w x k y i don't really care what font and i want the color as white so we can change the font here transform the text all uppercase to lowercase if we want add a gradient i don't really care about that stuff for this one it shouldn't matter we just want to make sure that we use white because we're putting it on a black background so once i click ok then i can put this drag the size oop drag the size of it down until it fits and then put it right over top of there and voila just like that and another thing that i like to do to keep everything neat and organized is first of all we'll lock that in place while we do this let's just add two more really quick as a sample we'll do this again but it there where we want it and say we don't have a youtube we just want to do these ones for now what i recommend is because these labels are just um the same thing a couple labels for your screen i would recommend right clicking on them and grouping them we'll group this as our labels and then you can lock the group and these can't be moved either but also the good thing about grouping is if you unlock the group and you click on the group it will move everything in the group together so that way you don't have to fine tune if you've got everything fit but say you need to move your background image and everything else is off a little bit if it's grouped together you can move them both at the same time and then you just lock them again if you only want to move one you can still just click on the individual one and move it around as well and lock that so that's how we built our starting screen that is animated sorry we just add it as a video source and then add our labels and that's it now for transitions if you have a transition you can see when i switch between these there's the little glitch here so you might have on view i make sure that i have all these set up here we want our scenes which is the bottom left our sources next to that the audio mixer the controls i like having the stats on there um the chat and the stream information all handy so it's really up to you but uh down here where the twitch stats are we have scene transition so if we go settings properties for our scene transition here we can select our video file which when i browse files animated transmission here's my animated transmission and then we want zero millisecond for the transition point we don't need audio monitoring or fade style you can play with that more if you want to but for me i'm just going to select this video file click ok and now i have my glitch pro transition set so when i switch between we get this this little mini transition here so we'll set up our be right back screen here and also uh you just click on the scenes in the left to switch between them unless you have a stream deck you can program buttons to do that for you when you adjust the touch of a button there's also phone apps you can get to use your phone as a stream deck so that you don't have to minimize your game for example you can just switch effortlessly between scenes our be right back is similar we still have the microphone here so we know that it's picking up my volume even without the source let's add another media source tutorial vrb screen it's going to be similar to our last one so we will find the local file it's in our intermission um maybe yeah it should be in our intermission here intermission let's try bg loop it okay this is just the background so let me double check in here which one we want ending ending pause okay we want this pause one here nope not that one so i'll just go properties we want pause right here okay and there we go here's our pause screen now so as per usual we can lock that right away and now we can't move it around it just fits our screen and we would do the same thing that we did on our starting now that you've already created these labels here for your twitter instagram etc when we go to this other source right here what we can do is click add text and we can add existing our tutorial twitter that we made we can add and it's already here for us all we have to do is put it in place like that so you don't need to create your text multiple times it's just as easy if you've already got it there to add text add existing instagram because once the source exists you can use it on all of your once the yeah once the text source exists you can use it on all your scenes equally without there being any issues so all right sorry this was the instagram one not that it matters but just like that and then we could group them again if we wanted to etc so now we've got our starting screen we've got our scene transition between them in there be right back so now we're going to do this chatting one so for this one what i'm going to do is add another media source let's go see i have my glitch pro talk here but for this we will just add it again tutorial um talking screen and we wanted to the source to be visible so okay now we'll go into here talking banner so let's try the one that has this one i think that's the one we want to try first loop it okay yeah perfect so for this one we'll just lock it as normal um so this one we can't have the white labels down here but we can still have them up here so again that's very simple to add our existing text tutorial at existing tutorial twitter put this right up here and you can do the same with the other ones as well [Music] now at the bottom here for these ones we would need black no i don't know how you want to do your labels personally i use a program i run stream streamlabs stream labels while i am streaming so that anytime somebody follows me what this does is it updates a text file so as the text file updates due to my stream labels i go like this i go add text this text we want um latest follower test we'll create a new one so this one we want it to read from file so because our stream labs chatbot is updating files as we get followers text file we will browse and where are the labels so these are all the files that the streamlabs labels creates so for us we just want most recent follower so open that text document rush take tachyo 1710 this is our guinea pig because this one's on white background we just want the color to be black select okay we'll leave all the text as is background color you can play with the fine tune settings if you want but we'll leave that as is okay and now the good thing about these stream labs labels is that as somebody follows me when i'm running stream labs as somebody follows me even if i'm streaming this will update the text file and as soon as the text file updates um this label down here will update too so there's no manual intervention needed and we would do the same for our follower donator subscriber chair etc and then i would group those together by themselves so once we've got these tags up here and our labels down here for this screen i like to use the webcam in the big screen and my game or whatever else in the little screen and possibly the chat here so for the camera we'll add source we want video capture device so i'm going to add existing i use this is nvidia broadcast right here i filter my logitech streamcam into nvidia broadcast and then this way i can have like say background blur which we have and then i use nvidia broadcast as my camera source so i've already got that in obs here so we will add the nvidia broadcast and bam is like that so you might also get your video as a square when you first add it to obs so you can right click and then in here what i do is properties and then you set your resolution here you need your resolution to match the output that you're using for your camera so because i have my camera set up is 1920x1080 in here i have to make sure i have 1920x1080 in here or else it'll just be a black square but once you click the actual resolution and we want highest fps we can click ok so now our camera's here and what we want to do is fit this right in here like this but it still looks funny so the order your sources are here are the order that they show up so if we put the nvidia broadcast down at the bottom it puts it right under our talking screen here which is has a transparent spot here and here so that cleans up the corners a little bit we can just line that up there lock that in place and now we have our camera here so that you can see hello and it's all locked in place we can't accidentally move it around and then for me for this screen i like to have up in the top right little window my game that i'm playing so that people can see if i'm on an intermission or just waiting so for that what we do is i like to add you can add window capture and it will add a specific window for example um let's just go create new let's go and add our um browser so we want which window do we want we want the oh actually we'll use this as a sample so uh our windows explorer here that we have this folder we'll use that as our windows select capture method automatic okay and then we would just shrink this down to the size we want here and i'll place it down down down underneath our banner so that there it is and now if i was doing something in the game or in here lock it quick so if i move around in these folders you can see what i'm doing as the source changes so again i usually use a game source for that so that you can see my game in the background while we're waiting and for that what i do is game capture you can do display capture which will capture your first monitor your second monitor etc game capture um we'll use game capture two so what i have is it's just set to capture any okay yeah so here you go we can add whichever window we want i have it set to capture any full screen application so that as soon as i open my game up this sword and the source recognizes it it'll see it in here where i have it set i don't i haven't worried about any of this other stuff or any other overlays oh so if you have like a discord overlay or steam overlay this will set it so that it captures that over top of your game and it shows up in your stream as well but we don't really care about that so i do capture full screen okay and then because we don't have one here right now is why it looks that size so if i were to open it then it would show up on here properly and then we could drag it into place now we have room for a talking box right here so in my talking screen what i have you can see down here is the chat but i don't actually have the own chat anymore so what i would do is you can come over to say streamlabs here something like this and there's probably a widget for it chat box yeah so i'll show you an example of this so we're here with a widget we want to add our chat box uh i'm not gonna configure all the font size and the background color and the emotes and stuff right now but as we're just using this for an example so we'll copy this widget url so now we have our chat box widget copied we can go back to obs and so adding a url source we click add we want browser for this i want um will be my chat for the tutorial okay so the url we paste the one that we just copied which is our chat widget the width and height shouldn't matter body i don't care if you want to edit the custom css you can but you can also edit that all on here as you want it to look like let's see um we'll add it here first we don't want it to shut down when not visible or to refresh when it becomes active shouldn't matter so we'll click ok so this right here now is our chat box so oh wait first of all let's see i don't want it to be this way so i want to transform it i want it to first of all center it what else do we want to do transform you can flip stuff horizontal and vertical here if you want to fit it to screen um stretch it so we will let's see because this one isn't shaping nice with us let's go um oops i didn't want to do that well now i just screwed everything up here so let's go back to that and let's let's adjust what we broke so preview scaling our where is the canvas size here so if you do screw up your canvas size there is oh wait so you go into your settings go down to video and then we want 1920x1080 again 1920x1080 apply okay and now everything's back to the size it should be so if you do screw up your settings that is possible but this i can edit now to be whatever size it's not stuck as a rectangle so i will put it start it right here fill it out in that box so now that we've got the chat box there let's test it out so testing okay i see it's super tiny in there so what we would just have to do is play with it and get it in the options to the size that we want again i use a different chat but that's how you would do it you add the browser source and then here we go so we would just have to adjust the scaling so that it doesn't change with the size like that for this one specific source i'm again as you can see not good with scaling so i don't know if i necessarily want to play with that but once you set up your chat you can just put it in there like that lock it and that's how you create your starting screen now we will go to yeah so here's our chatting screen again we could just add a browser source we've already got our tutorial chat box here okay place it right there and done but like i said you'd have to play with the scaling so that it doesn't look as small or that can probably all be done on here as well where you can change the font size you can change the color of the messages whether you want to use show badges and this is where you can edit it as well so let's see if i want the box theme this is what it's going to look like we want it to show moderator badges show sub badges etc so you can create it all here and the nice thing about browser sources is once you've got this url already in here as your source any changes you make in streamlabs here will automatically adjust your source without you having to re-add it so let's say i've got this box and i go down here and save it now that that's been saved i can go back here and i can see that i have the box text now again it's not lined up properly because you'd have to play with the scaling but you don't have to add the source or do anything you just edit it on the site again and it's good to go just like that there's a smile for you now we're gonna go to our gameplay scene so what i like to do here is we add our game capture we'll just use my existing one and we'll have this locked at the very background so this will be at the very bottom because everything we want in our overlay will go over top of this one so again mic here shows that it's working we don't need to add the microphone source so let's see what we can add um i want to add uh the face cam let's see because we want to add one of these webcam overlays so let's see what we can do is first of all add actually i'll show you a couple things here so we'll add a media source i'll add an existing because i've already got this one here just looped it so let's say we want our camera right here just to build it for now and we want our video capture device add existing okay drag drag the size of this down and we want this to be roughly that size fit in there and we put it now underneath our camera so that bam they're together and so one thing uh you can do is what i did personally is there were the camera overlays like this which uh well i'll show you another one we'll use um tutorial cam 2 i don't know if there's the first one so we'll browse we'll go to twitch glitch pro files we want our animated webcam overlay and let's see we want the one that has streamer name and stuff etc okay loop it okay so see how this one has a spot for the name at the top they also had one where the camera frame has a spot for follower recent follower and donation but i didn't like the way it looks i wanted to build my own so what i did is i just used the regular frame and put my camera in it and i made it big like this so both of them are i'll extend this one first and then i'll click this one i'll extend it make sure it fits under there then i'm just going to lock both those two in place and then i'll show you how i built my other frame so in here we can add a media source and then i'll show you what i did with the existing so my glitch pro latest follower let's see this is the animation for the latest follower and i wanted to use this with my camera but i didn't want it laid out the way that they had it so for example here um because it's hard to work with a black background i'll just go like this um let's go red let's do the color red images oops let's go um open in new window all right well we've got a red background that we can work with so in here we'll just add our or we'll edit our game capture for the time being so that we'll capture specific window and we'll capture the which one microsoft edge nope that wasn't the one let's try that one or we'll hide the game capture and what we'll just do is add a window capture add existing browser oh yeah we've got this whatever it's a white background we can still use it instead of the dark one so i will take this place it down at the bottom i'll actually go to a different folder so that we can see as much tutorial there we go stuff i did from a different tutorial i'm creating emotes but there now we've got the white background it'll be a little easier to see in place so we'll just put that right there lock it so we can't accidentally move it because we're working with the camera one here so i will click my latest follower move that around i want it right here let's say i want that sized half right there add a another vlc or sorry another media source let's say we want our latest subscriber as well we want to make that a little bit bigger and so i like to make it all bigger here so i can see what i'm doing and play with the sizes so we'll get that all lined up like that we've got follower subscriber we'll add another media source and we can add cheer place this right here roughly the same size and then this is just a way to build your own custom camera overlay styles let's go add another media source and i think we just need the donation one so we'll add donation place it here and there we go see now i've got four of these that are set up how i want them they're included the ones that i have and they're all with my camera here so what i want to do is take all of these latest ones and my camera and my nvidia broadcast here create everything together and group it as a set of items so camera cam geez camera test so now that i have um the grouper what i'll do is if i lock each one of these in the grouper but not the grouper itself now that i've built this overlay i can move everything together so i made it all big so that i could line it up all good group it all together and now we can resize it to the size we want here and say we want our camera here there and everything stays all together then if you just lock that in place everything's locked you unlock that you can move it all together or if you unlock the group and unlock one item at a time so like just say this then i can just adjust this one but we'll keep it locked in there and then our camera and it helps because you can resize everything so you can make it big to get it all lined up how you want and then group it resize it small and put it where you want it so as you can see that's what i've done right here i put them all together put them in my camera grouper and then i've added my labels as well so in my cam overlay here i have my latest follower byte my latest sub latest cheer and i've got the white labels so that when i unlock my cam overlay my labels my camera everything all comes together at once it's just a super easy way to move things and group them all together sorry and keep everything consistent and then another trick that you can use is once you get this um so if i'm blowing my nose or if i have to sneeze or something i don't want to be on camera quick you can set up hotkeys to enable or show or hide entire groupers so i have this set as my cam overlay group here we'll show you with this gameplay one so we just made our camera test right here right now if we go into our settings here and go to hotkeys there is a so on our scene we want the tutorial gameplay scene so we have our camera test grouper right so show camera test let's say i want this as my number five and a hide as my number six once i click apply then i can click five or six on my grouper here to hide my camera or show it so if you just wanna again remove it quick temporarily you can just simply at the touch of a button add remove add remove in your hotkeys there and another thing that you can do with your hotkeys that i like is start and stop recording because you can record videos with obs studio here but also right here on my it's not in here hold on first of all i'll get rid of these okay right down here so if you scroll down in your hotkeys down to microphone you can me i have my microphone set to mute and unmute with my asterisk and minus key on my number pad so what happens is this microphone as you can see here when i'm talking now i hit my mute button it automatically mutes it and nobody can hear my microphone you don't see the levels going up anymore hit this button again you can hear me so i keep my microphone and my camera together so i can quickly mute my microphone turn the camera off if i need to for whatever reason in a pinch and then bring them back just like that at the touch of a button so that's a good thing to know using hotkeys to show and hide your settings and there's also in case you did want to didn't want to use the camera one like this you just wanted the regular camera you add the other sources the same way it would be just a media source let's add existing um let's go create new actually just leave it as media source for now browse in our files here we have our overlay so i do have say the top banner overlay i could use you just loop it okay place this where you want it and then if you place your black labels over top of it and then lock them and group them again you can resize and move them all around together without affecting the way everything's positioned but again personally that's your choice you could have it how you want at the bottom at the top i like using the ones under the camera now and a good thing to note is the more browser sources you have in here the more processing power it's going to use for you while you are streaming so i tried to get rid of as much but say you wanted a follower goal you could we don't need this screen anymore you could go back to your stream labs go to alert box and we want a all widgets sorry then let's see say we want a follower goal we could just go in here what you do is you reset your goal or end it sorry um follower goal say our goal amount is 100 and we have 50 followers right now end it random date and we start our goal so this is what our goal looks like right here and you can manage the themes and the colors up here if you want to and change that so once we have this we'll copy the url we can go over to obs remove that add a browser source we'll add our follower goal let's create new okay and then we want the url that we copied okay and now this has our follower goal right here so i can place that at the bottom if i want make it bigger and as mentioned before if you go on to stream labs now and change your follower goal you don't need to re-add the url source it'll just stay here easy for you to manage another thing that um comes with some of the owned tv overlays is you have first of all your panels in here and your stream alerts so how to add stream alerts we will see we've got the new bits the new follower actually we have um animations i'm pretty sure animated alerts yeah right here so we've got a new follower animation and let's say we want to add that so for the animations and alerts what i do is you go back to your stream labs here and link it to your account and then so down here we have follows so you click on your follows how you want your layout set up and how you want it to fade the message template you can set up here i just have it set to show the name but this tells you all what you can add and then now for the image i chose the video source of my glitchpro new follower and the sound follow that came with glitchpro as well so you go back here now let's say actually let's copy this first of all we'll copy our widget url here go back let's add into our tutorial gameplay let's add a browser we want this as our alerts okay select our browser url add it and then so say we want our alerts in the middle of the screen we can also test how you have it set up so this is where our url is for our alerts so we can go here now and if i click test follow go back to obs i can see this is what the follow alert will look like it'll show that i have a new follow it'll test with the name i turned the volume all the way down on the sound so we can't hear it but for subscriptions for example glitch pro alert for new subscription and we want the subscriber.wave so let's test a sub so now here's the alert here's the sound it's a test i can place them over here if i want but that's how you add browser sources some other things that you can add that we use here are i've got a tts browser source a game one that set up for promoting a game so i just keep that down there just hide it you can add capogen for your emoji alerts if you want pictures on your screen like this you just add the source you can add an image if you want to still image not an animation i've already got this image selected so we can do that i can place this anywhere if i wanted to place him on my face while i'm playing it would just look ridiculous but yeah that's so that's how you add different um devices in here i believe if you're streaming from console and you have a capture card it would be a game capture and you select your elgato or whatever as that source and then just put it at the background instead of your display capture or windows capture so again you don't need your audio input either as long as your microphone is right here people can hear you so that's about it for this tutorial for setting up your overlay in obs if you have any questions or there's anything i missed or anything you recommend that's good to know please uh leave it down in the comments below and let me know and let everyone else know thank you for stopping by i hope this video helped you set up your overlays and all your key bindings and things like that and good luck and we'll see you out there streaming

Channel: Pygowsky

Views: 5,603

Keywords: #obs, #tutorial, #own3ed, #overlay, #twitch, #streamlabs, #pro, #guide, #studio, #obsstudio, #stream, #streamer

Id: TmgcDpRfC-E

Length: 42min 45sec (2565 seconds)

Published: Thu Jun 03 2021