Streamlabs OBS guide - Overlay setup (Step by step)

hey guys gal level here and today i'm not going to show you my face because i'm sick my allergies are through the roof and it's too damn hot to be on camera what we're going to talk about today is how to set up your overlay packs inside of streamlabs obs let's say you just downloaded streamlabs obs you've installed it you know everything works well you probably have one scene with one gameplay source but now you want to take it to the next level you bought an overlay pack or you paid in a graphic artist to make a custom one for you now you have all the files you just need to know how can i put it inside of streamlabs obs effectively and this is what i'm going to show you today so quick recap on streamlabs obs dashboard once you are logged in with your account dashboard is basically the streamlabs will be a site this is where you're gonna check all your alerts your widgets this is where you can set up your donation goals and all of that this is where you modify your widgets but also take a look at your account in general themes is of course the overlay or or just graphic design library they also have widget themes now which is awesome you can check it out if you do not have any money or you do not or you just you're just starting and you don't want necessarily to have something personal you can go there they have a all of them are free they have pretty good stuff i recommend it if you really don't have any money and you don't want anything personalized editor is where i spend most of my time when i'm streaming i'm usually on the editor tab uh because i have a live preview i have my scenes i also have my sources where i can toggle things on and off i also have my mixer so i can check my audio levels and my chat on the right side the live tab is where you will find your recent events if someone followed i have a lot of questions from people telling me oh someone's followed me but i didn't get to see the alert so i don't know who it was this is where you usually go to save yourself and say hello sorry i didn't see it when it was happening but thank you um morpheus for the follow for example at the bottom it shows you a live preview you have your mixer and your scenes my only problem is that i do not have access to my sources this is why i don't spend much time on this uh tab so let's go back to the editor so okay let's say your gameplay stream which is the most popular i'm going to try to go as fast as possible so feel free to pause or slow down the video if you have to here you have your scenes here you have your sources what are sources sources are the individual layers that form your scene this is where you're gonna put your alerts we're gonna put images we're gonna put your overlays and scenes are um an assembly of a bunch of sources this is where you will you will have titles such as starting soon scene by back scene gameplay scene so let's start with the gameplay i'm just gonna rename this to gameplay so to avoid confusion [Music] and here the first thing you want to get in is some actual gameplay so click on the plus and we're going to find game capture right there so i'm going to click add source game capture if you're going to use the same if you play multiple games and you're gonna use the same game capture source you can just keep the name game capture because you know whatever game you're gonna be playing is gonna be that source so what you can do here in mode it's gonna say capture any full screen application if you only have one screen you're not gonna have any full screen application so that's bad to go capture specific window and now on a window you can um you can select the specific game that you want to capture in my case it's little nightmares i have it running in the background so we're gonna use that it's not full screen because i don't have to screen i usually play at a lower resolution anyways so i can see chat at the same time on the same screen okay okay so now we're gonna add all the elements that make up a good gameplay screen so it's gonna be um webcam overlay you're gonna have your list bar list whatever you call it and uh you're going to have your bit jar so first things first let's add the camera overlay if you have an image as your camera overlay like a png with transparency or a jpeg you would go to image in my case we're going to be using the fortnite mega overlay pack that i just released on gumroad.com we're going to be using that so we know that the webcam overlay is actually animated so it's a video file so click on media source to import your video file then i click yep add source i'm going to call it camera overlay and we're gonna locate the file okay as you can see here my file is a dot mov file that means it it's video with transparency or with an alpha channel for for those who are experienced so boom we have it here but wait it's gonna disappear after seven seconds and that's not what we want because we forgot to loop this little box here okay so if you have anything that's supposed to go on forever in a loop you just click on the loop thing we're gonna drag this down a little bit so as i said i don't have my camera right now but we're still gonna add a video capture source as it's gonna show my watermark since i use a dslr to live stream so click the plus and uh find video capture device this is where you would also find your webcam i'm going to call this one camera press enter so this is as you can see elgato is also a um capture device but whatever just click okay and now we're just going to place it intelligently try to keep everything proportional no matter what the shape of the camera overlay is what you want to do is hold alt and click and drag on the left or or right on the sides or top bottom and now what we can do is drag this down if you want it to be underneath the camera overlay always i always do my overlays in a way that people can put their cameras behind them so it looks flush it looks perfect and if i have a little bit of like shadows going in it will also affect what's on camera now that we have that set up we're going to go ahead and add um the followers name the the last follower last subscriber we don't have subscribers or donations on this account but that's fine i'm gonna click on text to add one um i'm gonna call this one follower actually i'm gonna call it recent follower naming your stuff in order to not be completely confused while you're streaming is very important so we're not gonna use any of those what we need here is read from file because we're not going to type in the name of the most recent follower ourselves we want a file to do that so when you installed streamlabs obs it probably asks you to choose a specific folder where you want your log files to be and this is where you need to go find your log files mine are in this folder called logs and we're gonna search for a most recent follower double click on it turns out this the most recent stream is oh my god we're going to change the font real quick i would like to have a uh calibri and we're going to click ok and not do that so if you have things that are set and you're you're sure that you're never gonna move them you can go here and click on the little lock pad thing that way if i click and drag see it's not moving i'm gonna do the same thing for the camera and the same thing for the camera overlay for now anyways so recent follower now i can just click and drag without any issue it's a little big that's fine we're gonna drag it down if you want more uh preciseness just use your um up and down arrows or left and right since i don't have subscribers or donators what i'm gonna do is just duplicate this so i'm gonna copy and i'm gonna paste a reference um pasting a reference means that everything that you do to the original file is going to be affected throughout all of them all of the references that you you duplicated if you just duplicate it it's going to create a brand new source and you can affect them individually so i'm going to paste reference once and twice and just drag it down and this should be good so far it's looking pretty good just okay now i know that if ever i switch games and i want my overlay to be somewhere else let me unlock everything that i locked while most of it if i want to move something i don't want to have to move everything separately especially if i'm doing it live on stream and i want to go fast you want to be able to move everything together so what you can do is click and select basically you're going to hold shift and click the top layer in the bottom layer and you can create a group right here this group will call will be called camera pack it's not the most original name now what you can do is select the group and move it plus on top of that if you know that you're not going to be changing any of that it only takes one spot in your sources okay so now let's add a widget what you're going to do is click plus okay and here on the right side you will see widgets and the tip jar is something that i like having on my screen at all times because people like interacting with it so we're gonna click tip jar and add source just call it the jar that's fine um here it's not gonna show you anything if you haven't set it up in your dashboard yet but that's fine it's just gonna load up the default one and we're just gonna do with this for now okay make it smaller i'm gonna drag it bottom right that looks pretty good just like that now i get that some designs do not have uh most recent followers donations and all of that incorporated into the webcam overlay so what you can do here for example is hold alt drag that up click on the little arrow and then turn off those things this this and that and you can group it up again there's one survivor there you go now you have your camera overlay so some designs for example in that fortnite mega pack it's included with it to have a little bar that would include those uh most recent um interactions this one's gonna be an image so we're to click on image it's a png transparent file we're going to call this lower list there's multiple names for it okay it's here lower list just going to click ok this is in a video so there's no worries about it so you can drop it here like that all right actually looks pretty good and if i wanted to add the follower i already have it like here i'm gonna paste a duplicate now we're gonna drag this okay we're gonna copy this this time i'm gonna paste a reference in case i want to move any of it and of course we're gonna do the same thing we're gonna group it up call it lower list group all right so on the right side i purposely left that space empty in case people want to put like social media or anything but if you've seen any streamer you will probably be like hey i see those names they're usually scrolling how do i do that the answer is simple since we have a bunch of references i'm going to do it on one it's going to affect all of them but you will probably have to go one by one to add the filter so yes you right click on the source go to filters click on the plus um choose scroll it's that simple it's that simple click done and then um just choose your speed so horizontal speed there you go now when people have different name sizes what i like to do is limit the width limit limit the width and that means that whatever the size of the name it's not going to overstep those boundaries in that case i'd say it's more 70. there you go maybe a little too fast and now on your lower bar everything is moving we could do the same thing here hold alt [Music] find the first one filters again [Music] make it look good and there you go so now i've showed you how to add video capture devices how to add widgets and also how to add most recent followers and stuff like that and those texts that will automatically update themselves which is awesome so once you have that you're pretty much set cool thing now is that for example you have a camera pack here let's say you have another scene where you need the the exact same camera pack with the exact same sources you can copy the group and then all you have to do is paste either reference or a duplicate i also showed you how to use filters so if the camera overlay pack that you have you don't really like it what you can do is add a filter to the specific overlay so i'm going to click on camera overlay i'm going to right click go on filters and in this case i'm going to choose color correction now i have color correction what i want to shift is the hue and now i have a green camera overlay now it's orange you can also play with the saturation bump it up to make it pop you can also play with the gamma so if you want the lower bar to be the exact same thing you just have to memorize the value the values that you added and it will be the exact same uh color but we're not gonna do that you can also turn off your filter and it will go back to normal and you can come back here switch it on and off all right so now we have our gameplay uh scene we can go ahead and create the other ones this is technically the most complicated oh i almost forgot we need to add the alerts because you need your alerts to be playing on every single uh scene you're in sorry click on plus and on the widgets we're gonna find is it in widgets it should be alert box there we go i'm gonna call it alert box here we have the alert box settings you can put a 1920 by 1080 because that's what i personally enjoy [Music] oh this is good because i'm going to show you um a little technique to move things around so we're going to click done so as you can see it is not centered it's off to the right what you can do is right click here go to transform and then click fit to screen now it's centered and it's scaled perfectly if you want to make sure that our alert box is working we can go down here and click on test widgets because dillard box is a widget and we're going to click on follow to see if we see something there it is now this is not the best example because it is not um in the dashboard is not configured to appear here but there you go and we can see our bit jar is already reacting so now we have our complete gameplay scene let's go ahead and create a starting zoom screen this one is completely empty so let's add our starting soon overlay in our case it's a video so we're gonna go to media source probably call it and add new source click here and here we have our animated uh starting soon screen we're gonna click on loop to make sure that it loops and there you go now the great thing is there are two ways to add sources that you already have in another scene for example if i wanted to the jar here to appear on my starting zoom screen i could either copy it and then paste it i don't think i need you to tell you the the difference between reference and duplicate anymore i'm going to delete it to show you the second way or if i wanted to add the jar again i could go to the jar add source and here you will see i already have an existing source i can just click here and add existing source now my jar is here and i can place it wherever i want if i want my jar to be um somewhere else for example if you want to flip things around you can also right click and go to transform and you can flip vertical flip horizontal and you can of course rotate there we go i kind of like rotating my jar now if you want to add a group of sources in that case you can mostly only copy it so i'm gonna go with the lower list because some people like to see the most recent contributors and i'm gonna go here and paste a duplicate in that case i would suggest a duplicate instead of a reference because it could affect your gameplay if you modify it here your gameplay scene that is now you'll see in this particular overlay pack i always leave this empty space this is where you could either write your name or your slogan or even put something like your social media contact so if i wanted to do that i could go image we'll call it twitter pick add new source i don't really recommend doing it like that it's better like if you have photoshop just create a png and just slap it in there but if you don't have photoshop i can understand just download some social media stocks and you're good now i have twitter here the cool thing is that you can also add filters to that i'm going to add a color correction filter i kind of want this to be white so it contrasts um it it will contrast with the background so i'm just going to go gamma up okay brightness and now what i'm going to do is change media here and i'm going to go ahead and find my alerts inside the fortnite mega pack okay now my image was loaded [Music] so um let's test it out now in order to make this work perfectly i actually have to have my alert be the exact size my alert box i need it to be the exact same size of the image of the alert image i'm going to go here double click and this can't be full screen because it wasn't meant to be full screen so i'm gonna find my image and find out what size it is okay once i find my image i'm gonna right click properties go to details and i should have the exact size okay 904 by 168. now i can place it wherever i want this means that we have a higher chance of having everything be in the middle so top right actually so if i test it now [Music] there was a little bit of lag here let me test it again there you go so this is what it would uh look like of course you can tweak it play with the css make it make it be in the middle or play with the text size or even the custom message i'm gonna try getting rid of the custom message to see if it will be centered [Music] and there we go [Music] so that's pretty much all you need to know to keep your overlays very very clean you know by creating groups by duplicating stuff so for the chat here as you can see everything disappeared when i left what you can do is click here and untick that box that said shut down source when not visible basically when it's not visible when you're on another thing it would just shut it down and reactivate it so now if we type something let's just type the exact same thing all the poggers and we go to starting soon and we come back it should still have them perfect i'm sorry i'm sorry i didn't have the webcam to show you the example but i guess this was pretty pretty um self-explanatory that was still very descriptive you can just imagine my face over there sometimes animated overlays will stop moving all you have to do is just double click and done [Music] um one option that a lot of people don't know about is that you can also add scenes to scenes which is awesome let's say if you have a beer back screen that has a dedicated space for your gameplay screen as you can see here we can actually add it so i could be like hey this is my gameplay screen but we'll be right back you know and everything is just working perfectly let me delete that we copy the social media one all right let me stop tweaking it and just call it a day guys if you have any questions please let me know in the comment section below and i will try my best to answer you hopefully everything was clear you can just switch in between your scenes now and if you cannot switch in between your scenes because you can open up obs you can set up shortcuts that is in settings shortcuts hotkeys my bad and you can actually um go to specific scenes like if you want to go to full screen you could go switch the scene let me put c done and here i press c and it switches the next tutorial i'm going to do is going to be about transitions so it took me a while to work on it because i did not want to just make a tutorial about transitions and not have transitions to give you guys so what i'm going to do is prepare a transition pack it's not going to be free but it's probably going to be 99 cents that way once you know how to add transitions you already have your transitions to to be added you know and if you guys are really interested i might even show how i made them in adobe after effects anyways guys thank you so much for watching while i was sick i'm sorry for the very low energy and very very long tutorial but i will see you guys next time thank you so much once again get a level out [Music] [Music] you

Channel: Gael LEVEL

Views: 498,982

Keywords: streamlabs, streamlabs tutorial, obs, obs streamlabs, streamlabs obs guide, streamlabs obs tutorial, streamlabs obs setup, obs tutorial, best obs settings, slobs, how to use streamlabs obs, slobs mixer, streamlabs youtube, twitch, mixer stream setup, twitch overlay, twitch overlay template, fortnite overlay, fortnite stream tutorial, obs guide, ps4, Livestream fortnite, ninja, twitchtv, fortnite battle royale, how to stream fortnite, mixer overlay, overlay pack, overlay twitch

Id: M9U2_9bjhuE

Length: 28min 38sec (1718 seconds)

Published: Tue Jul 03 2018