Create Minimal Stream Overlays From Scratch! (Without Photoshop!)

I'm gonna show you how to create this overlay in OBS from scratch literally from a brand-new OBS install on top of that we're gonna create this without using any complicated and expensive software like Photoshop actually pretty funny someone actually asked me how long I've been using Photoshop and I was like this is actually my own design that I'm currently using for my intermission scene and I really like it I really like minimal clean designs for your stream because it allows you to convey as much information as you need without it distracting your viewers from what's really important which should be your game and you and just so you know I have no experience in art I'm not a professional designer I don't know how Photoshop works I haven't taken a part since my senior year of high school when my art teacher crushed my hopes and dreams I'm guessing most of you are in the same position as I am except for the crushing your hopes and dreams part I hope that's never happened to you but I assure you you'll see by the end of this video just how easy it is to create a professional minimal clean design for your stream this video is brought to you by nobody well I do have merch so I guess go buy my merch sup guys is an idea before we dive right in let's do a quick overview of what exactly we're gonna be making so here's the overlay again we got a nice big camera which by the way I recommend every streamer has a scene like this and in the bottom right corner we've got a shrunk down window of the game that we're playing and this would be a scene that I'd recommend you use like let's say you're queuing up for game VAP X you switch to this full webcam view and that will just allow you to interact with your audience and give them a more intimate experience you might notice that my camera looks like it's super wide but it's really just a sixteen by nine camera with the top and bottom crop top we'll talk about that in a second and if you pay attention to the background you'll still see the camera but it's got this nice blurry effect to it that makes it look like it's got this glassy thing going on around the perimeter of the camera we've got these two lines that have a two-tone gray into it and the border actually animates in a circle then in the top two corners we got a little widget that shows some metrics or sub count follower count and viewer count and on the other side we've got another widget which shows my local time I thought this was kind of cool to add because I don't really see this in a lot of people's streams but for me personally because I live in Australia and I know that my time zone is really different to most people that are watching my stream I thought was just neat to have my time there so people know that it's nighttime and not like 8:00 in the morning and then finally the one thing everybody keeps asking me about underneath my camera I've got this horizontal scrolling chat widget I know some people don't really see the point of displaying twitch chat on stream for me personally as a viewer when I type a message in chat I just like knowing that the streamer has received my message because then I know if they're ignoring me or not which seems to be the case most of the time like what do people like me men but I understand that showing chat messages on screen can create some unnecessary visual clutter which is why I like this sideways Chad because it allows you to still show the chat messages on stream that's nice and low profile and doesn't get in the way of much all right so really three minutes into the video so let's actually start doing stuff we're just not by trading the border for our webcam if you've been watching my channel for a while you know that I've already done a video on how to create these animated borders but that video requires using hitfilm express and I did save the start of this video that we wouldn't be using any complicated software now be cheating we're not gonna be doing that so we're in my discord he goes by Theo woo Theo boo I don't know he saw my video and then he just thought himself let's just make nutty's video completely obsolete so instead of going through the whole process of creating these animated WebM files he just created a website that allows you to customize your animated border in like five seconds if you go to the link in the description box down below you'll see the website for the border generator where you can change things like the width the height how thick the borders are the colors you can even make a circle if you want if you don't want to use a rectangle for me I chose two colors that match the lighting in my camera so I chose a purple and blue border then I adjusted the width and the height and the border thickness to my liking now I know it looks like we're creating a rectangle and we really only need two bars but don't worry we're gonna crop this off later after that click get URL and then copy that generated link into OBS as a browser source just make sure to add some extra width and height to the browser source because it seems like there's a lot of blank space around the border after that you can crop the browser source by holding down the Alt key and then dragging in from the sides position it as close to the center of your canvas as possible you can actually right click the browser source go to transform and then click Center to screen and you're pretty much done alright thanks for watching guys I'll see you guys next time wait that was the first step one even halfway done okay next step we're gonna start adding in our main sources that we're gonna start by adding in our webcam I assume you guys already know how to add a webcam just right-click to add a video capture device then we can do the same thing that we did with a camera boarder hold down the Alt key then drag from the top and the bottom until it fits within the camera border and then if you won you can also add in your game source and then lay it on top of the camera and just shrink it and put it in the corner you could also create another rectangular camera border for your game window it's the exact same process as the first one just generate a new border with a different width and height and then create a new browser source exactly the same thing so how do we get the blurry camera for the top and bottom in the background we're gonna be doing that using an OBS plugin called stream effects now I'm gonna assume that you guys already know what stream X is since I've talked about it in like four different videos at this point but in case you don't know click the eye thing to see the other videos that I've already done in it actually I probably should have mentioned at the start of this video that this is only gonna work with OBS studio so if you're using stream labs OBS then I'm sorry Steven but you need to get with it we don't use stream labs OBS on this channel what we want to do is apply a blur filter to our camera but we don't want to apply it to our original camera because well you guys want to see your face right so first we're gonna create a source mirror of our camera so that way we can apply filters to it without affecting our original camera source right click on the source mirror go to filters then we're gonna add two filters the first one is gonna be a color correction filter and we're gonna turn the brightness all the way down and then we're also gonna turn the contrast down a little bit basically we just want to create a little bit of a separation between our main webcam and our background by making the background darker and then the second filter is of course gonna be the blur filter which you're only gonna see if you've installed this stream effects plug-in properly so if you don't see it there then make sure you've done that okay so onto the fun stuff we're gonna be adding three widgets to our overlay we're gonna be adding a metrics widget a local time widget and then finally the horizontal sideways chat widget all of these are stream elements widgets so if you already using stream elements then just go to the website and then sign in with your Twitter account I believe these work for twitch and mixer I don't think they all work for YouTube if it doesn't I'll let you know we're gonna start off with the metrics widget so this widget shows your followers subs and viewer count now if you don't know how stream elements works you can create a blank a new overlay and then inside of that overlay you can start adding a whole bunch of things to of the metrics that we need are already included in stream elements and that would be our all-time total follower town and our all-time total subscriber count but the one metric that you're not gonna find in this list is your viewer count now I wish that stream elements would add this to the list but where the hell is it man I want that add that for us luckily one of the dudes in the discord his name is mr. boost and by the way you're gonna be here his name a lot he created a view count widget so if you go into the link in the description box you can just click it it'll automatically install the widget as its own separate overlay to your stream elements account now I wish it wouldn't create a brand new overlay and instead it was like a widget that you can install into one of your existing overlays but apparently that's not a stream elements works so that's cool I guess anyway once you've installed mr. boost viewer count overlay you can change the font to whatever you like the list of fonts will be any one of the normal google fonts but if there's like a custom font that you have installed on your PC then you can go into the settings and write some custom CSS to change the fun to whatever you want I'm using a font called the I just bit my tongue I'm using a fun to call the Uni sans caps I'll leave a link to it if you guys want it but other than that you can start adding labels for your total follow cam and total subscriber count' then just position them on your overlays and if you have any custom icons you want to use for each of these metrics then add these in as images as well this is what the final result looks like for my widget once you're happy with it click this link to copy the URL add it as a browser source in OBS then just position the widget somewhere on your canvas where you think it looks nice next up is the clock widget which is installed exactly the same way as the viewer can't widget just click the link in the description box now again this is gonna create a brand new overlay in your stream elements account like I said I really wish you could just add the widget to the overlay that we already have I mean you can do it but it takes a long time and I don't really feel like you're just playing it it's like 2 a.m. man I just want to eat pizza and fall asleep once you have it installed you can change the date format so if you want to show a 12 hour or 24 hour time if you want to show just the date or just the time by default mr. boost is actually set up the date format just exactly how I like it specifically like what a dude man didn't even ask you for that really the only change I'm gonna make to this is I'm gonna change the font to yume sans caps like we did with the last would but yeah that's the clock widget I just copied the URL create a new browser source and then position it on the canvas how I like and finally the widget that you guys have been waiting for is the sideways chat widget this one is another creation by mr. boost who's like you guys don't know mr. boost now this guy's like the mr. beast of stream elements widgets again there will be another link in the description box it's gonna install yet another overlay to your stream elements account this widget only works on Twitch and mixer I'm pretty sure it doesn't work on YouTube and Facebook unfortunately one of the reasons I like streaming on Twitch by the way everyone just develops for twitch with this widget you can of course change the fonts but you could also change the color of user names so if you want to show your normal twitch user name colors you can show that or if you want to set it to a custom color you can choose that too you can also write a list of user names that you'd like to ignore so maybe you don't want bought messages appearing on the chat or maybe there's just like a particular person that you don't like you know like Steven god I hate that guy anyway first even once you're happy with it copy the URL add another browser source then put it into OBS again and just position your chat underneath your camera and there you go you have your own customized stream overlay that just happens to look exactly the same as mine yeah good job man good job in the plagiarism so here is our final product now of course if you really want to in fact I would encourage it you can take some creative liberties and change things to make them fit your own aesthetic your own branding in your own design I just thought I'd show off my design because a lot of people were asking the same questions about how I setup different elements in my overlay so you can stop asking me now Steven man we're just really rare young Steven today but that's gonna do it for this video and guys as always links to the discord in the description I don't know how to speak today in the description box down below you guys can also follow me on my twitch stream i stream four nights a week and guys just please watch me like I'm begging you I'm very lonely alright I'll see you guys next week [Music]

Channel: nutty

Views: 149,621

Keywords:

Id: Rs75ovA7Fvo

Length: 12min 25sec (745 seconds)

Published: Mon Jun 08 2020