How to build a complete live stream layout: Start to Finish (COMPLETE GUIDE)

Adamo repos Vox here and I am in the middle of completely overhauling my entire streaming setup I have not streamed in months up until last night at the time of recording and we had a fantastic return to streaming and I'm gonna be doing a lot of different stream setups you already see me seeing me build that arty be glowing streaming PC in the background we've got a few more coming and we've got a lot of streaming content in the works with that I'm doing a tutorial here sponsored by nerd or die on how I set up my insane streaming the layout and overlays in all of that that you all saw in my twitch stream over at twitch.tv slash Evo's Vox and we're gonna be getting to it thanks to nerd or die so link to them that tells them I sent you will be in the description below be sure you check it out I am very excited for this tutorial alright since two days tutorial is of course sponsored by nerd or die we will be picking out and utilizing some of their presets and stream packages that you can get starting at $0 they do have some free resources on the site and some tutorials of their own but we're gonna check out some of the paid options and see what you get in how to set them up but first we need to setup OBS IM using OBS to record this tutorial of course but i do have a separate instance launched and we are just gonna make a brand new profile for my twitch setup here actually I have a twitch profile I'm gonna delete it it was a test I don't need it you you may notice from time to time when I'm setting the stuff up I have a lot of stupid scene collections from what I'm testing stuff but we're gonna we're just gonna start from scratch and then same thing new profile twitch 2019 I like to keep them name the same to match them up and always know which ones I'm using up in here to the settings and we're gonna be doing mostly 1080p based streaming so while I'm my main desktop is 4k I'm gonna leave it at 1080p for now and we're gonna be streaming I'm gonna start my test streaming at 1600 by nine hundred and fifty nine point nine four frames per second of course now you can play around with different scaling and things like that and actually I am going to leave the base resolution 1080p so I can record full res recordings but there is a difference between putting your scaling here in the video settings and in the output tab if you go under advanced you can actually tell it to rescale the output there is actually a difference in that and that if you do it in the output settings that actually puts that workload on the computer or on the encoder versus putting it on just your graphics card so if you're running into performance issues it might be worth just dropping it down and here and unchecking it and output settings I should be fine but it's worth noting all right so we're gonna focus on streaming settings here I will be using x264 in this instance although I do have another machine that has an Nvidia r-tx card that I would be using in vingt 4 but for now we're gonna be using that we're gonna put CBR it is going to be 6k - what at the default audio is 160 so 58 40 I believe yeah do keep in mind that max twitch bitrate recommendation is actually video + audio and you can technically send 6k video but you can run into some issues that's fine we're gonna drop it down to medium actually we're gonna do fast for now just to keep it safe I'm gonna leave the rest of these blank keyframe interval set to 2 because this is going to twitch recording we are gonna do full resolution recordings I'm gonna set it to my dedicated recording drive that's over here in F record I'm gonna make a new full actually have a folder here called twitch that way I know these are specifically my twitch settings now I'm gonna use MKV because if things crash or whatever I can still use the file I'm gonna set it up to record at least 5 audio tracks and we're going to use the env ink encoder default resolution I'm gonna come over here to cqp and that's gonna be 14 which is kind of visually lossless ish and then under preset high quality profile high and just gonna leave the rest on defaults at the moment under audio I'm going to leave the default track for twitch at 160 bitrate so I'm gonna call this twitch down mix but then for the others these will be my recording tracks so I'm gonna set them the highest that it will let me which is of course 320 kilobits per second and these will be my other settings so we're gonna have Mike desktop console if have a game console on poor input discord and so on and then we are gonna set up a replay buffer so I can save out specific clips a lot easier we're gonna set it to a 45 second duration and hit apply and it will do what it can to maintain a replay buffer of 45 seconds you will of course if you're using a replay buffer need to come in here and set a hotkey for saving the replay buffer you don't need a hotkey for starting and stopping it but for actually saving the replay buffer which is right here I already have a button on my Elgato stream deck so I'm gonna press it alt F 8 is apparently it I'm gonna hit apply and we're good to go despite what other tutorials may tell you partial and 601 and env 12 are the best settings when you're live streaming to twitch you can kick it up to 709 kick it up to full you can run into some issues on some web browsers playing back the stream with regards to color representation so we've got OBS configured to live stream to twitch even though we don't have anything in it we're gonna get set into that so we want to make a couple default scenes here so this is scene one I'm gonna add this and make it desktop and I'm just gonna add a display capture we're gonna add one it's gonna be webcam hello I do not have my main light on my head is hurting I don't want it on so it's gonna be a little dark in here today you can see the kitty playing behind me hello kitty now we're gonna start building out our layout we can set up some other scenes but for now we're gonna do this so you can browse neutered ride calm I do have an affiliate link that well it's not an affiliate mom I guess technically is an affiliate link but a link since they're sponsoring me to let them know that I sent you and all that good stuff so be sure to use that if you want to go check out their stuff you can hit SHOP NOW or check out their you know top layouts here and then they have links for their tutorials and stuff we're gonna hit SHOP NOW and you can sort by popularity price or you can search by categories because they have backgrounds overlays custom script gene twitch panels alerts yada yada yada I've actually picked out a few that I really like that is of course the retro wave steering stream package since you know a lot of my channel and branding is 80s and 90s and 2000's retro stuff this obviously appeals to me even if I don't want to use the super cliche graphic that this is you know that that's overdone at this point but I could use some of the elements pretty sprite sound effects they have some pretty cool sound effects then there is this cool little alert system that Scrolls in the name just does a cool little effect with the text there I like that a lot I may use that we've got these overlays and widgets that have this little kind of like pixel confetti effect I kind of like that and then we have this interface one which is all like super hacker theme or something which is kind of cool we may use that now I am going to start with the retro wave package and we will build from there so I may not use all of these in this video now when you check out a package you will be given screenshots as to what's in it so you can view here okay we've got kind of an overlay and it's got new followers subscriber yada yada layouts it's got stream starting and be right back screens you can customize you've got different color options you've got specific alert types you can choose to you don't got to use this specific one you can you know bounce them around if you like kind of neat you've got panels that you can use including Photoshop files so you can actually manually edit them yourself if you have a Photoshop compatible program and know how to use it and then there's this cool little I believe this is a stringer to stinger transition and then there's a lots of information usually I'm pretty much all of these I've looked at with regards to what they have including video demos and other related stuff now when you go to buy it there's actually a few different options you can buy everything or you can buy just the alerts or you can buy just the overlays or you can buy or there's free extras you can get and you can tell it I don't want to pay anything I recommend supporting the people who make this and supporting nerd or die for distributing it but that is an option available - I am going to start with the full stream package for this one and maybe we'll bit in peace some of these together I'm gonna add it to my cart that's the full stream package we are going to check out upon checking out and completing your purchase you will be given a set of download links you do have limited downloads so keep track of these original zip files because you can technically run out of them but you will be given download files for your specific package that you chose so for example the stinger and free extras are a separate download from the overlays which are a separate download from the alerts but you can download them all here so I'm gonna save them 7-zip is of course free and open source and multi-platform I'm gonna right click them all 7-zip extract here for convenience not always the best way to do things but I'll do that here all right we can start building our layout so we have overlay version 1.1 there are stream labs OBS specific files so for example if you have stream labs over yes you can actually just import this overlay preset which will do a lot of the work for you and if there's enough demand I will do a separate stream labs OBS tutorial for this I did want to say before we get too far into actual OBS setup if you're using stream labs OBS this is why people think it's a lot easier to set up is a lot of these integrations are built-in you don't have to go to a web browser and in a lot of these layouts that you buy they will say if they're stream labs OBS optimized or not in the stream labs OBS folder there's actually a dot overlay file that you can import into stream labs OBS itself so you go to the settings cog you go to scene collections and then import overlay file and find your specific overlay so I'm gonna copy my directory here retro wave stream labs preset overlay and it's gonna take a minute to process everything and figure out what the heck you just did and WHAM slam thank you ma'am they even have a welcome screen so it can tell you to follow their guide and everything it's really really cool and they have a lot of the setup already so a lot of these steps that I show in normal OBS are already here I'm not gonna lie having already set up a lot of the stuff I am kind of annoyed that it's so easy they make it really easy for you you've got a PSD file for Photoshop of the specific logo options and an example of what that might look like pretty neat I went ahead and open that up in the background here and then you have overlays in the different colors that you want as well as the panels and some widgets all packaged together with a readme and lots of good information here let's check out the readme yeah it's it that readme was warning me that hey I need fonts that are used here in the setup that I may not have on my machine it tells you the terms and conditions of using it who actually made it you can check out their vendor specific page as well as installation guides tutorial videos and things like that which is really handy so I am going to actually close this so I can actually install the fonts that you know they suggest and these will all be freely available ponts although these are from a couple different websites but the font seems to be the most common I'm gonna make a fonts folder in this folder just so I have all this stuff together because I will be moving moving this to multiple computers I believe I already have that font installed but just in case alright so for google fonts if you ever encounter these these are a little confusing you hit select to this font and then nowhere else on the page does it look like you can download it but you click here where it said family whatever family selected and then that little down arrow is for downloading it's really weird they do not make it obvious because it's meant to be used on the web alright and then once again I'm going to browse to the fonts folder right click all of the zip files and for 7-zip and when were are also has this option extract here ideally it just yeah you have all of the TTF files so you can go to view group by type select all of the font files they might be TTF or OTF right click and hit install it's that easy now I have all the fonts required so we can go back here to our overlay and I should be able to open up that Photoshop file without any major issues assuming the fonts are the still the same name Hey look at that they are all right so we have that one we have that one and we have that one I'm gonna go with this one for now I don't actually know what this is gonna be used for at the moment because I didn't read the instructions that's why you should you can see here the letters kind of get a little close together so we can use Photoshop c-can't roles to kind of fix that holy guacamole not so much and actually all I really want to do is change these letters okay so if you go into one of the overlay folders here for example retro wave overlay default green let's check out green and then overlay these are dot WebM files which is a type of video format that's really easy to work with with things like OBS and then if you play them which we'll play back in a free video player like MPC or VLC you can see what they look like so this would be where you have like your top donations and things like that you can just add those to OBS or follow along and we will set it up specifically how they want it laid out before we get too complicated I am going to set up a be right back stream starting and stream ending and things like that those kinds of scenes as I feel like those are kind of important to production value for a live stream so I'm gonna make a new scene recall this stream starting and then you will add these overlay files as media sources so for stream starting I want the pink screens and there is a background one and then the overlay one which actually has the text because you have a few different text that you can throw up here so I am going to add source add media source we're gonna call this pink BG for background click OK then you have some options for the media source I'm gonna click browse and what I'm going to do to make this easier on myself is click in the title bar or the URL bar here in Windows Explorer and we're gonna copy that text and then in the OBS pop-up here I'm gonna click in there and hit paste make it easier to navigate and we're gonna add the background now this will add it as a global source that you can add to any scene which will make it a little bit easier we are going to enable looping make sure closed is not checked leave it at 100% and we should be good there we go nice beautiful background screen I love it and then we're gonna add another media source and this can be starting soon text browse stream starting loop click OK and the new can position that however you like or make it however big you like depending on what actual layout you want and going on in your stream so for example I can have that there and then we can have overlays going here or we could add chat something like that I'm actually gonna put that in the center for now we're gonna leave it as is it's super simple but we will come back to it and expand on it and I'm gonna move that scene up so it's kind of my first scene so I know what's going on we're gonna make a new scene be right back and then you also see in here that each of these has both a stream ending text that can play and then it also has an offline image but you can either just use or add that to your twitch as twitch lets you just put an offline image actually if you can see here it says my stream is offline so we can add that image I don't know why I dragged it into my media player that's funny or we could add some elements to that image like I have here which we will do later all right everyone ahead and recreated that for the stream ending scene as well using the default layout so now we have dreams starting be right back Stream ending already looking good already looking way better than what I used to use which was mostly static images so we're getting off to a good start so if we're sticking with the overlays here next up we have the webcam frames so this is if you have game play up and you want to add your webcam on top of it and want a nice little frame for your webcam which is really appealing it's what most people are doing and they have two different sizes for if your webcam is 4 by 3 or full 16 by 9 whether you have the sides cropped off or not you'll have to play around with stretching it if your aspect ratio doesn't match so to emulate this I'm gonna set up a scene here cuz obviously I don't have a game play source coming in right now although I can make that happen turn on my ps4 Pro gonna add a new just default source now we'll call this console I'm gonna add my capture card here alright so now we have a dedicated scene with this and then I will make a console plus face cam scene so in this scene I will add video capture device my existing capture card here ok nice let's go ahead and do I have any discs and apparently have the black ops 3 disc in you know what like I'm spore works too it's updating whatever fine you get the idea and then we will add another video capture actually we will add the Blackmagic device which is my webcam but for you it's probably a video capture device so typically what you could do is you could just drag it over here and put it on a scene that's fine hey guys I'm playing a game you can't really see me hang on now you can see me that's a little better but is that good enough is that really what you want if not then you can add one of these scenes so I'm gonna go add media source we're gonna call this webcam frame and I'm actually gonna use the four by three one because that is how I prefer to see face camps and webcams click OK you get a nice square because you don't need to see all this extra room all the mess in the background in my living room unless you have a really nice set or whatever so for this specific use case here I can add this frame over top of my webcam and then you can position the frame where if you like so you can drag it wherever it's not gonna limit you I need by the way if you accidentally do that all the time like I do if you have a source you're never going to move click the lock button I was so grateful they added that so if I want to play and have my face kind of over here because I'm always kind of looking into the frame a bit then I can do that and put it say right here and then drag my FaceCam right underneath line it up in here Center it about where I'm gonna be all the time that's nice lock the webcam frame so we don't mess it up and then you hold alt and drag in if it wants to cooperate sometimes it does not want to cooperate Hey oh it is cooperating it's just doing it differently for whatever reason see I hold alt and it's supposed to crap for whatever reason it's not doing the crop border like I'm wanting it to this must be unique to the Blackmagic source typically if you hold alt on a video source and drag in from the corners it will start it will bring up a green border box and let you crop you can check out my full OBS masterclass for that information there you go now my face cam is framed within this webcam frame which you could have resized by the way and nice and neat here so that is just me got a nice little frame for it that matches the rest of the theme and you're not seeing too much extra space behind me just me some of my background lighting that nice little RGB PC case back there you get the idea [Music] so if you go over here to your twitch dashboard and go to channel you can come over here to video player banner this is where you're gonna upload that offline image I'm not gonna do it just yet because I want to customize it a bit but that's where you update it you have up to ten megabytes so if you add a bunch to the jpg just make sure it's small enough which by the way if you do want to customize it they do provide you all of these icons including a PSD with the icons for you to basically type out your social media accounts or your PC specs or things like that or if you want to use them to make your own twitch panels all of these are provided here for you as helpful little pngs which is really nice alright so now that we have our stream starting and stream be right back and Stream ending scenes setup we can come over here to the different folders and use the icons to create our own information panels on these pages so I'm gonna lock the background and then we can move around the text as we see fit cuz the screen this initial screen is pretty cool saying stream starting everything's animated and things like that like that's already a step above everyone else but if we want to go one step further we can put this up here by the way if you don't like how this is moving around you can go to Settings General snap sources to horizontal and vertical center and then you can snap at other sources and edges and things like that and so you can see it kind of hitched there as it kind of wants to lock in place which makes your life a lot easier alright so we're going to add image we're gonna you got to know what you're doing first so for example we have about cheer well you used the tears for like actual cheer emote development or whatever but you have your About section discord Facebook steam profile there's there's a lot of options here so we're gonna start with discord but since this is pink I'm not sure it'll overweigh will overlay well on the pink theme but we will try it so I'm gonna call it discord underscore pink click okay browse over here pink folder icons and discord and they do have two sizes for it this is the default size yeah you can see here if depending on where you have it it might not be the easiest to see but that's okay alright to go along with the discord icon here which we could make a little bigger if desired you don't want to make it too big to get pixelated or anything we can go plus add a text source we're gonna call this join our discord discord URL click OK for the font you want that big noodle titling that we installed with the package here I have a lot of fonts installed so I'm actually gonna type big new nope big big noodle titling and we're gonna leave it on 36 and default white should be fine although you could maybe add a pink stroke I'm gonna start with that and we're just gonna type a post fox comm slash just cool discord if I can spell and click OK we're gonna pair that up nice and neat next to the discord icon which I have transform reset transform I made it too big so 36 font goes nicely with these icons Center it up and then you can select these two sources at the same time and move them around as desired below your text here I'm gonna put it there for now I'm thinkin like three at the bottom here so we have discord I will add a new text file or new icon file rather image which ones do we want to use we have discord Instagram I'd like to promote through this and then YouTube of course so that works or I could do Twitter but everyone knows Twitter so I'm gonna do Instagram Instagram or actually I'll just do i g-- underscore pink use naming that you know what things are but don't don't require a lot of text Instagram okay drag this over lock it kind of centered get it over here a bit new text source will call this Instagram a post box it's like font again big nude old titling default should be fine click OK by the way if you'd like to keep sources together like the you know like the text with the icon and move them around together without losing track of them select them both in your sources list here right click group selected icon or items and then you can call this discord minimize it I can put these together group insta and then will make a new group for YouTube to I think this is pretty cool you could make them bigger you could add more information I think this is pretty cool you could even make a separate one where you kind of pop your face up when you're first starting over here or something like that now if you were using the same color theming across all of your different sources here you could actually just select these three groups and hit copy and then on Derby right back here for example I can just paste them as references or duplicate so if you do reference then anything actually and only let me just copy one at a time but then anything I change in one will affect the other so if I come down here and go to discord URL and add like some numbers to the end then when I go to be right back that's gonna be changed so theoretically you might not want to do that but if you want to be able to change the text without affecting both copies then you can paste a duplicate however keep in mind the actual image source will still be the same and so if you change this it will still change for the other one so a little iffy and if you want to make sure things are lined up between scenes here you can actually right click a group transform copy transform come to the next one where I click the group transform paste transform and it will put it in the exact same size and place as the other one which is really handy so I'm gonna recreate this in my three scenes and we'll come back ok by the way if you're using the same color scheme or for whatever reason with your setup you want to use the exact same icon layout for all three of these scenes you can actually put these groups in their own scene and nest that scene it's a really powerful functionality of OBS or you can just add the groups so for example if I go to new scene I can click Add group and I can chew existing groups so I can add existing Institue for example and add that back in from the other scene or if I want all three of these on the same scene I can make a new scene call it slide text layer copy these over but you can only do one group at a time which is annoying I keep forgetting I'm just gonna roughly slide these across I'm not actually gonna keep this and then on your scene instead of doing them individually you can add a scene choose scene and choose slide text layer and it adds them all at once so then you can just update the singular scene and it effects all of these I have an entire video about scene nesting if you're curious but ideally you get the gist but I'm not actually gonna do that here since I wanted different colors specifically alright next we are going to tackle the actual overlays if you're in a specific folder for example we're gonna go out to the default here overlay you have a few different ones like I showed you before you have the stacks and then you have the full widths and once again these are WebM files so to add it to a scene for example I'm gonna add it here with my console game play face cam scene I'm gonna add to media source I'm gonna call this overlay full width we want it to loop and then you can choose the clothes file when inactive to save some memory if you'd like go over here overlays I'm gonna choose full width bottom default click OK now I got this nice little layout I looked a little goofy in the media player but it looks really nice here and here you can have it start to scroll in your favorite tippers or cheers or top donators or whatever you can have a bottom overlay but we actually don't want to do it here on this scene because then you'll have to update it every time you want to add it to a different scene so I'm gonna go ahead and remove it this is where you want to make a dedicated scene to nest so we're gonna make a new scene I'm going to call this support overlays and then here we are going to add that media file full width bottom over again loop dragging them place on the bottom and here you can also use say for example the icons to indicate like which things you're featuring so if I want to feature my most recent subscriber I can use the subscribe icon by the way if you didn't know you can just take icons image files and drag them on to the canvas and it will add them as an image source and then if you go to properties here it is an image source kind of a neat I'm gonna put over here and then we're gonna add a text again big noodle is gonna be it but I'm gonna say top subscriber or most recent sub and then you can drag it in and if you need to really nudge it in place you can use the arrow keys to get it exactly where you want and then you have a place for it to fill that out and then we can do the same thing for donations here we have a star for tipping and then for now I'm just going to drag my name identifier here in these Center you can probably say top supporters or something like that but you get the idea now I'm gonna show you the benefit of seen nesting by even though we're not done with this yet I'm gonna go ahead and go to our console facecam scene and we're gonna add this to our scene so add scene and then we're gonna choose the existing scene which is support overlays and click OK and you can see it adds everything we have here to the scene as one source which we can mute or bring back but that means every change we make in this scene is reflected wherever it's shown which is really convenient [Music] so if you don't have stream labels set up log into your stream Labs account or there are alternative programs you could use other than stream labs as versions specifically that's what I'm going to use here and then under widgets they have stream labels as a little introduction setup guide I recommend watching that if you don't know how to use it currently only available for Windows and Mac but Linux support is coming shortly although stream labs OBS is not available for Linux yet go ahead and click Windows if you're on Windows like I am and run the installer keep in mind if you are running stream labs OB as none of this is necessary it is built in but I will have separate videos on stream labs OB else hopefully shortly it does save you a little bit of time with this go ahead and launch it log in with twitch now you need to choose output directory what this is going to do is it's going to make a folder full of text files that it updates automatically and that OBS will detect and automatically change your texts based on so for example I'm going to tell it in My Documents folder to just make a folder actually I have a twitch folder here stream labels I'm gonna tell it to use that folder that way it's always in My Documents folder I always know where it is and then you get a little dashboard of your alerts and things like that this has unfortunately this has to be running at all times on your system during your live streams in order to update in real time so I'm just gonna minimize it now back in our support overlays tab we do want to add more text for our most recent subs and most recent tips so I will add a new text file will call this recent subs and actually I'm gonna take most off of this text and we're just gonna leave this blank we're gonna choose read from file first we're gonna set our font and then click browse and now we're gonna go to where I just told stream labels to save the text file suit so documents twitch stream labels and we want our recent subscribers click OK and I forget this one doesn't let you do like a multiple one list so I'm gonna go ahead and take off the plural of that and just say most recent sub then we have the name here we can resize it kind of Center it up a bit because some names are much longer than others and that will be featured prominently at the bottom of our stream oh it does switch someone else just subscribed on Twitch seemingly while I'm recording now they subscribe six days ago it just had not actually finished updating yet that's really cool well thank you polyglot for subscribing six days ago wasn't live yet thank you and then for most recent tips we are going to again add a new text file actually we are going to make a copy of that one paste it as a duplicate this one is going to be we're gonna name it recent tips read from file all-time top donators there are other ones you can do latest donators whatever we're just gonna do that one for now so you can see what they are boom gives you a list click okay it gives us a nice txt file to work with we're gonna resize it and move it over here nudge it where it needs to go we have two donators that seemingly donated nearly the same amount twice but that's fine you get that and so we added those text files and now when we go back to our console game play face cam thing it's there Greg house 2221 Baker Street I guess is their name I don't know what that means wham-bam and then you can line it up and tinker with it a little bit bigger than our other text but you get the idea I'm not I'm not great with this stuff in terms of actual like alignment and spatial this as you all probably know now alternatively instead of you know this horizontal layout you could use the stacked one below your facecam or something like that but you get the idea alright our stream is looking really good so far but next up we have something really cool and that is the widgets there's a donation goal a follower goal and a bit goal these are actually quick set up links for stream laps if you are using stream lapses overlay system because these are kind of more optimized for stream labs as they actually indicate on the page here it says designed for use for stream labs and stream elements when I'm going to use donation goal double click it's gonna open up my stream labs website we are going to create a new widget theme we're gonna call this retro wave donations create we're gonna use this theme you can follow the tutorial whatever then we set up the settings for the goal so I'm gonna call this I want a Nintendo actually I'll just say Nintendo switch for example go $300 cuz that's how much it is starting him out zero and then end after say February 28th 2019 and going to the other settings you can customize colors ideally this should all be managed by the actual theme itself so we're gonna start donation goal and then copy that widget URL now it's gonna look like the default here don't worry we're gonna go over here to oh yes and then in your support overlays you can make your thing or we're just gonna add it as a browser source here on our game console facecam seen here I'm gonna call this donation widget paste the URL 430 width 200 ish height usually works here framerate doesn't matter too much click OK should load it up with the custom theme this is a little you know it does get hard to read when you make it smaller so I may need to make my FaceCam setup a little bit bigger here and then that will make the donation widget here a little bit bigger on top of it text might still be hard to read at that size but you get the idea now you can see it over top of your webcam here integrates nicely with the theme looks pretty cool and then if you need to test it you could either start it with a current amount or your under donations you can actually add custom donations I've done this a few times my donations you can actually add a donation manually so a post-test lol how much will it be twenty five twenty five save donation BAM filling up the - bar towards me getting it into no switch for example now there's also a folder in the overlays folder here for your twitch panels with Photoshop files that you can edit so you can have ones for your hardware specs and things like that if you want to use those those are fairly straightforward I'm not actually gonna walk through these since this is this tutorials OBS oriented but under your twitch profile here if you go to your actual channel page I do dislike that these are you edit all of these in different places but that's just me under your page these are where your panels are I actually I'm using the free nerd or Die ones at the moment these are some of the default ones they release forever ago and some of these specs need updated I click the toggle where it says edit panels and then you can add the specific images so for example for specs I'm gonna replace that image and I'm gonna choose the hardware one to make it easier I am going to drag-and-drop done that looks a lot better and then you can update your things hit submit and turn off edit panels it's a lot more in line with the theming that we have going so I will swap all of those out and be ready to go next up we need to set up our alerts now you have stream elements ones and stream Labs ones and then you also have the actual webaim's yourself for [Music] just what they look like with the initial animation here with audio which is pretty cool you have high quality ones optimized ones which are just smaller file sizes like half the size and then you have specific stream elements setup links and stream labs setup links so we're gonna go ahead and use the stream labs once you actually have one consistent widget theme across all of stream labs as web sites so while initially I was doing that cuz I wasn't paying attention you do not want to make a new theme for your alerts and for your donation widget and yada yada you want to be using the same theme so whatever theme you just made when you started the donation box you also use for your alerts now to test this as you're moving along go ahead and copy that widget URL and you can add it as a browser source to your scene now again you could do this as a dedicated scene that you add to each one or you can just add the browser source manual each one will call this alerts wham-bam we're gonna leave that at default for now just to see how it looks I'd add to pop up the test alert box for it to work real quick here but then you get a Jenner idea of what it looks like I think it's pretty cool again the little triangle with the grid is you know kind of cliche but then see here we can start adding this to our scenes here so for stream starting for these I actually want this available here kind of in the middle maybe make it a little smaller pop-up right here in the center maybe we'll move our starting soon text up a little bit and then we'll launch a test follow and we can move that appropriately right there it's got a little of that extra Headroom so we can kind of resize a little bit move starting soon down a little bit hit it one more time new sub yeah that music now when it comes to cropping here you can actually test by playing these back to see what the edges are so for example I can see that that triangle is actually not supposed to be cropped off so then when I test it and I see that it is cropped off I'd be like wait a minute that's not quite right come right here two alerts make it a little bit bigger we'll start by making it 800 by 800 test it again perfect possession when I position it exactly how we want and then we can copy it and paste it ideally exactly as it is to each of our status scenes here so copy paste reference and then go ahead for our texts we're gonna copy transform so that we can copy our where we moved them to transform paste transform I believe there's hot keys for this I'm just not bothered to figure it out all right and then we're gonna test it one more time we're gonna test hosting okay you can see that one goes up a little higher so maybe we need to move it down a bit but otherwise it's pretty cool thankfully the alerts are pretty straightforward there they have it super optimized with these shortcuts or you can make your own using the WebM files if desired or move it to stream elements what have you that's pretty straightforward and then we have the free extras which are the stinger transitions which I will absolutely love and the actual chat box which again you have stream out stream Labs quick setup so I'm gonna go ahead and use it amazing these are super easy alright something you may have noticed when I was setting these up is that I made the mistake of making new widget themes for every single one of these you don't want to do that don't listen to e pose just kidding yeah I sometimes do like common mistakes along the way to show that and this is totally what that was so we're gonna start with that donation theme that we were using before so we want that to be active I want to refresh here and make sure that it moves to active we want wretch or waive donations because what happened okay that reset that but then if we test alerts where is it alert box it's gonna show something different let's go show my old alert theme because that's not in this theme so when you're actually using these shortcuts you need to add them to the same theme so instead of separate retro wave alerts donations and chat box and so on like I did you need to use the same theme you already setup once you initially make one so I'm going to use my retro wave donations as a starting point for the chat box now I'm going to copy the chat box and we're gonna add this as a scene to our starting soon scene here just as an example chat box browser source again paste URL you can adjust the height and width as desired there's of course no chatting going on in my inactive stream at the moment so I'm just gonna and before I get banned for spam I should be showing up in the chat box and wham bam thank you ma'am that looks pretty cool so you could resize as desired to fill your gaps or what have you or if I turn it off here and add to the console facecam one browser source chatbox makes a little more sense over here like although you don't want to block and half your game in reality but you get the idea now if you are unhappy with the color options in this set you can't actually change some of them so for example in our support overlays and can go to this full the full width bottom overlay here and go to filters effect filters and we can do color adjustment or add an entire LUT to it if desired something like that so I'm gonna do color correction I'll call this test and you can actually play with like hue shift and so if you don't like the default color scheme you can actually invert it a bit so instead of you know blue and purple it can be pink and orange and greenish or green and yellowish or more green and yellowish you get the idea you can fine-tune it kind of exactly where you'd want it to be and if you get it just right how you like it here and want it on the other stuff you can actually hit copy filters and then for example if I want it on the webcam frame here where I click the webcam frame and hit paste filters and that will change that as well so then if I go to filters you can see before or with without so before after and you can really get the exact look that you're going for which I really appreciate and despite the fact that these are technically compressed video files it's mostly lossless as not long as you're not doing anything too extreme with it [Music] so this is kind of how I would set things up I would change the stream labels a little bit or whatever for a traditional game streaming set up here but I would kind of like a facecam chatting with chat layout which I really like present here in this stream starting soon layout from this interface stream package I really like that I like this background here although I don't know how exactly I'd have to color adjust it which is why I showed you that now I kind of like that you know I like some of these elements here it's got some cool stuff so I want a just kind of what is that one oh that's just showing the different examples I don't think I want all of it but I would like to set up a kind of chatting with you guys lay out here with this weird little like computer chat layout for what I'm just hanging out and chatting into the camera so I'm gonna go ahead and pick that one up cuz I mean these are pretty cheap if you have full stream packages for with the source files for 30 bucks without the source files for 20 bucks overlays free extras and then you can go through and see exactly what it is I like the idea of having even the After Effects project files so off screen I can super go in and customize this myself so I'm gonna go ahead and pick up the full stream package because why not same thing here for example some of my live streams will be a will be cross-platform across twitch and YouTube together and maybe other platforms at some point and so I would like to kind of differentiate which platforms someone come from someone comes from so for example while I have all this setup for twitch I could then set up either like these ohto alerts are kind of more neutral and less platform specific I might set those up for YouTube just so I know that they're a little different or maybe even the pixel pop ones cuz they kind of fit in or maybe I just like the event list from pixel pop here I really like that I might use that for when I show eventless but for now I'm gonna get the interface package Add to Cart all right so to integrate this interface stuff I'm gonna really be stretching myself here because they do not match but just for the sake of example I'm gonna make a new scene it's gonna be called just chatting I'm going to add my webcam source I'm just gonna add it as is at the moment we're gonna add a media source hello media source that's gonna be webcam frame interface we're gonna want it to be looped we want the big large one here go ahead and add that that looks really freaking nice we kind of want it in the middle of the screen for now and we will adjust my webcam accordingly to fit within it here just roughly so already that looks really cool I I'm not gonna lie I really like it in the fact that that animated bit moves back and forth this is pretty cool and if again if I if I don't like the exact color scheme for how it matches I can go here effect filter color correction I want it more purplish no it didn't actually default huh that makes it fit a little bit better for me for now you have the different support bars here I could still reuse the same ones and I might although that glitch effect is pretty cool interface chat box unfortunately that is going to be a separate stream Labs theme and I don't think I can use both at the same time but given that I don't actually have a real use for the other chat box so far I kind of want to try it I'm gonna go ahead and do quick setup here because I can always replace it I'm going to a retro wave that's the new chat box I can actually change the text color and if I mess around with the CSS enough I could change the background color or the actual overlay color but for now I that's fine we're gonna copy the widget URL we're gonna go back to just chatting actually under browser source it should be the existing chat box yeah so then we can have that going obviously resize as desired so I'm gonna group up my webcam source is and so since I want that to be taller I can make it say 1500 tall by more like 400 wide click okay I had that backwards wanted to be a little wider than that there we go then we have a dedicated chat bar here just kind of on the side this is starting to look good get a nice layout going and some just chatting texts right up here I'm gonna go ahead and disable the filter from this at our alert box resize it to be kind of mostly down here go ahead and test that alert box [Music] we also need to set up our stinger transitions we have some both from the retro wave pack as well as the interface one that I purchased which is actually in the free extras there's actually quite a few years I'm gonna play the muted ones we've got these kind of grids so that's from the retro wave and then the interface here which you can customize with the after effects file if you purchase that is that glitch transition which I'm definitely going to use both so to do that you need to go to where it says steam transitions add a transition stinger we'll call this retro wave pink then you need to find the file which is going to be complicated so right away we're gonna use the pink one now you need the you can set whether you hear the audio or only your stream here's the audio I'm gonna leave it just the stream fade option transition point so you can crossfade the audio or just fade it out and in and then you can choose the time or the frame at which point the actual cut between scenes happens within the transition so you kind of just got to figure that out by playing it back it's four seconds long you can see it happens there but that doesn't give you frames so you'll have to either play around with it or open it up in a video editor and try to go frame by frame for it so I'm gonna say if it's 30fps and it was like one second I'm gonna say like 35 frames we're gonna start with that and then we're gonna switch that was a little too soon someone to change that said 35 will do 45 go from there little too soon so maybe we'll just do straight 60 maybe my media player was playing it wrong it doesn't like webaim's yep 60 seems to be perfect so halfway at the halfway point that's probably gonna be pretty common with these that's when it fills the screen and is safe to cut without showing you and so then you can add another one so I could call this stinger interface glitch and then when we change this one that one's a little more complicated to figure out the frame point but you get the idea and then assuming you don't want that obnoxious thing playing every time but just the specific scenes you can leave it on like cut for example and then you can set up for example when I'm switching to just chatting I can go over here to transition over right and choose that glitch so then if I go to say my desktop it's normal but then come back to just chatting it's gonna use that which again I gotta get the timing right but you you get the idea and then there's actually an OBS plugin i don't know if i have this pulled up easily accesible here there's a plug-in here called OBS transition matrix which actually lets you customize like if you're coming from scene A to C and B use this transition otherwise use this transition and can let you get a lot more specific with how you're using it so I haven't dug into this yet and I'm very excited to but this will help alleviate some of those issues where you don't want really long transitions going and then for example console flows + face cam I want that to be that one so come over here that'll do that's transition back over with this one back over with this one you get the idea and then the last step would be to set up your Elgato stream deck or whatever method you have for controlling hotkeys and the sources and switching between things so that you can best you know switch on the fly without having to fumble with OBS I use the elgato stream deck so I just pull it up I'm using the mini on this computer and add specific OBS scenes and sources for switching between them and then I also have a specific source that I wish to mute you do need OBS open while you're setting this up and then you're good to go I have lots of tutorials up on the channel about the stream deck specifically if you're looking for more information on that and here you have it a pretty high quality pretty awesome streaming setup that has integrated alerts and so Media widgets and things still not perfectly aligned but you get the idea awesome animations much more polish and a much higher you know tear user experience than well these are my blank scenes for example but then your typical basic PNG stream layout would provide with a lot of different options a lot of range of customized ability some easy setup with the quick setup links for stream labs and a lot of options available to you and I am pretty stoked clearly I'm not 100% finished with this yet but this is the general idea I'll be going with for my streaming setups and I am so freaking excited I hope you guys are too I will have some more streaming content coming soon here sponsored by nerd or die for this video at least and I do have some really cool streaming builds especially with this theming coming very soon go check out their door dive with my link in the description down below check out these for yourself the fact that they provide you with source files if you pay for them stream lab setups if you're using stream labs OBS it's actually just a single one-click overlay setup this stuff is really awesome and I've never been so happy with a streaming layout and there's still a lot more work to do overall to get it to the final state but this is how you use the files and start setting it up for yourself and it's pretty freaking cool thank you so much for watching guys if you found this video helpful hit the like button down below subscribe for more tech education let me know and streaming guides and let me know in the comment section down below if you have any questions I'm a physics and I'll see you in the next one yeah

Channel: EposVox

Views: 878,273

Rating: 4.8837934 out of 5

Keywords: streamlabs obs tutorial, streamlabs tutorial, slobs layout tutorial, obs studio tutorial, obs studio layout guide, how to build a stream layout in obs, obs studio overlay tutorial, obs studio overlay template, obs studio overlay download, obs studio overlays free, obs studio overlay maker, obs studio alerts tutorial, obs studio webcam frame, obs studio status slides, obs studio screen recording tutorial, how to set up a layout in obs, obs tutorial, free stream graphics

Id: 6EO_28zooIg

Length: 57min 12sec (3432 seconds)

Published: Thu Feb 07 2019