For this guide we’re going to install OBS plugins, set up some global sources, and create a couple of scenes. To start, make sure that OBS is not currently open. The first plugin we are going to install is called the Video Source Plugin. We are going to download the 64-bit version of this plugin because that is the version of OBS we are going to use in this tutorial. After you download the .Zip file, you can simply extract the files directly into your plugins directory. This directory can be found on your computer in Program files > OBS > Plugins and that’s it!
How to install OBS Plugins
We now have the capability of using video sources in OBS 64-bit. I recommend installing the 32-bit version of this plugin as well. Just simply download the 32-bit files and then install them into your 32-bit OBS directory. This will be located in Program Files x86 > OBS > Plugins. While we are at it lets grab our second plugin called the CLR browser plugin. For me the CLR Browser is one of my favorite additions to OBS. There are a lot of great applications that you can take advantage of by utilizing this plugin. Again, we are going to download the .Zip files we need from the OBS website. If you can’t find this on their front page simply search Google for CLR Browser OBS plugin and you should find it as the first result. We are going to install this plugin the exact same way we did with the Video Source Plugin. Again, I recommend installing both the 32-bit and the 64-bit versions.
You might need to upgrade your MS Visual C++ Run Times to 2013. Click download and choose the x86 or x64 accordingly. Also, upgrade your .NET installation to 4.5.x, the web install or offline install can be found at these links. Thanks /u/EasilyRead on Reddit for this reminder!
OBS Global Sources
Now that we have all of our plugins and dependencies properly installed let’s go ahead and launch the 64-bit version of OBS. If everything was done correctly, then OBS should start right up without any warning messages. With OBS open let’s take a second to talk about global sources. Using global sources is something I wished I learned the first time I launched OBS. It would have made my life way easier. A global source is basically a source that can be added to any one of your separate scenes while sharing the same settings. They available to use, and constantly running, at any point during your streaming session. This is going to help us a lot down the line. When making global source it is important to choose what is and what isn’t going to be used across multiple scenes. Since we are going to use a video for an animated background across many of our scenes, let’s go ahead and create it as a global source. To create a global source click the Global Sources button.
This will open up the global sources menu. Next, hit Add and choose Add Video. For my stream I am going to use a video for an animated background, however if you do not have a video and want to use an image instead, simply select Image. If you are not sure how to add images yet, don’t worry we are going to cover that in a little bit. Let’s go ahead and use Video. I am going to name my global source ‘Animated Background’ and hit OK. Now, I am going to see the video source settings, these are the settings that are going to be applied to the source any time you use it in any scene.
I am going to set my video settings to using Video Width at 1920 and Video Height at 1080, this is the resolution of the video I am using. The only other setting I am going to change is the Playlist Setting, for this I am going to enable Playlist Looping. This setting is perfect for something like an animated background as it is going to allow our video to play on a loop.
In the section that says enter a File Path or URL Pointing we are going to want to enter the location of our video. The easiest way to find this location is by navigating to your video > right click it > hit properties > location section. We can highlight the location and hit CRTL+C to copy and then paste it in the area for File Path or URL Pointing. Now type \ + the name of the file (don’t forget to include the extension such as .mp4). Last, make sure to hit the plus to add the video into the Playlist Editor.
We are going to hit Ok and now our first global source is created and can use it in any scene we’d like.
Setting up scenes in OBS
Let’s create a scene to store our source into. A scene is basically a collection of sources that can be customized per section. This is going to help us out when we stream because sometimes when we stream we are going to do some different things. So for this tutorial we are going to create an introduction scene, a scene that is going to be used when we are primarily talking to viewers, a scene that is going to be used when we are primarily playing a game, and then a scene we are going to use when we are ending our stream. Right click in the Scene section hit Add Scene, type in “Introduction Scene” and click Ok. Right click in the sources section go to Add > Global sources > and select the animated background global source that we already created. Now that we have added the global source to our scene we can hit Preview Stream to see that everything is working properly. Before I go any further I want to make sure that my animated background is working properly. After we verify that everything is working properly I could hit Stop Stream but I am going to leave Preview Stream on. This is because you can edit your scene while preview stream is enabled.
The next item I want to add is an image that is going to be on top of my background that says a welcome message and shows the logo of Nerd Or Die. This image is going to be used on this scene only, so we are not going to make it a Global Source. To do this we are going to right click in the sources section and go to Add > Image > then type in the name “Welcome Image” > hit Ok. We are now going to be shown the Image Settings.
The first thing we are going to need to do is Browse to the image location that we are going to use and hit Ok once we find it, to add it in. We are going to leave the Color on white, Opacity at 100, and Check for File Changes unchecked. The next section Color Key is a an advanced feature that we will cover later. We are going to leave it unchecked for now and hit Ok. I should note that I used a .png file for this image and it was sized at 1920 by 1080 pixels. This allows me to use transparencies. Also, when I add this image in as a source I don’t have to resize it at all. It will appear where I want because I want it to fill up the entirety of the screen.
Now I want to add in another image that isn’t included on my first image. I am going to go ahead and right click and add an image just like I did before. This time when I find the image I want to use, I am going to notice that I need to re-size it just a little bit and place it properly.
The first thing I am going to do is click Edit Scene. I am going to drag the little red squares to size it down and then I am going to drag it over, while click and holding in the middle of the image, into the bottom right section of my scene. Another way that I could do this is by right clicking the image > going to Position/Size > then hit Move to Bottom. I can repeat this process but click Move to Right Edge. This one will position exactly where I need it, in the bottom right corner.
I think our introduction scene is looking pretty good! I am going to go ahead and hit Stop Preview. The reason for this is we are going to make another Scene and Global Source. I like to set these up without preview enabled, but it isn’t required. To add another Global Source just go back into the global source settings > add > and since this is for our webcam we are going to add a Video Capture Device. We are going to name this source “Webcam” and click Ok. Now, just make sure your device is set to the webcam that you use. There are a lot of other options here, and you can definitely check out the OBS website and learn more about what they do. Typically you don’t need to change anything else. Go ahead and hit Ok and our global source is created.
It is important to know that if you ever need to make changes to global sources, you can click properties in the global source menu. From there you can go back into the settings and tweak what you need.
Let’s make another scene, I am going to call mine “Big Webcam” since this scene will have my webcam sized larger than normal. I like to use this scene when I talk to my viewers or there is a lack of action in the games that I am playing. Before we do that let’s go ahead and add in the animated background and a few other images that are going to make up this scene. This process should be relatively straightforward for you. I am going to add in the global source of my animated background to make up the background of the scene, then I am going to add in some images that I already designed.
After I hit Start Preview you can see in my scene that the structure of it is that I have a source called animated background on the bottom, a source called bottom layer above that, and at the very top is something I call the top layer. You can also check-mark or uncheck the boxes next to your sources to make them appear or not appear.
It is important to know that OBS treats anything stacked in your sources kind of like you are setting them on top of each other. This is similar to how layers work in Photoshop. So, what I am going to need to do is position my webcam in between my top layer and my bottom layer. This is just how I designed the scene to look. Let me show you how to move around sources after I add in my webcam global source. Simply right click the source you’d like to move > > click Move Down. This is going to move it down just below my top layer and above my bottom layer. This is where I need it to get the effect that I want, it is sort of sandwiched between two images. Now I need to hit Edit Scene, position my webcam where I need it, and then resize it how I would like it. Remember, you can drag the little red squares to resize any source.
We only have one more thing to add in this scene, but first we are going to go to Stop Preview. We are going to add in our game capture here, but we want to use a Global Source. This is because we are going to use our game captures for multiple scenes. Go to Global Sources > Add > Game Capture. Now type in the name “Game Capture. In the Application Setting drop down we want to make sure we have our game selected and then click Ok. Now, our Game Capture is set as a Global Source. You should know that the game source is going to be set at the resolution that your game is set to. My game is currently in windowed mode and set to 1920 by 1080 pixels, so that it is 16:9 aspect ratio. I designed all the images in my scene around this aspect ratio. Now, I need to move my game capture below my top layer. Next, I am going to hit Edit Scene and then resize and position my game capture to be exactly where I need it. Now this is completely done and we can move on to our next scene.
This next scene is going to be really easy to make because we have already created all our global sources that we need. The first source we are going to add into this scene is going to be our Global Source called “Game Capture”. You want this to be on the very bottom and you also want it to take up the full width of the scene. The next source I would like to add in is my Nerd Or Die logo, but I want it to have a watermark effect this time. I am going to set the opacity of my image source to thirty percent to give it a bit of transparency that will yield a watermark effect.
I am going to resize it using Edit Scene and move it to where I would like it. Now all that is left for me to add is an image I use behind my webcam, an image that I use to show my supporters, my global source of my webcam, a frame (literally black lines that outline my stream area) that I like to keep on top of everything, and a simple name tag. For now, the supporters section is just going to be a background image, however, in our next guide I am going to show you how to add in the top donator and recent donator, as well as have it update live as your donations come in.
From here if you have a second monitor, you can put OBS on your second monitor and then go into your game. Glance over to OBS and make sure everything is looking good. If it isnt use Edit Scene in OBS and change around what you would like.
Let’s go ahead and add in our last scene. Name the scene “Ending Scene”. This scene will just be a simple outro. For myself, I like to keep mine similar in appearance as my intro scene. It just has a different message – so it should be pretty easy for you to set up. If you cannot remember how to do this just go back to the intro section of this guide and set it up just like that.
Once you are finished creating your ending scene we are going to do one more thing to make our stream run a bit smoother. We are going to set some Hotkeys to switch between our scenes. Right click your scene and go to Set Hotkeys. From here you are going to have the Scene Hotkey menu open. I personally prefer to set my hotkeys to the extra macro keys that are found on my keyboard, but if you do not have these available you can use any key, or key combination, that you would like. Just remember that you should choose something that you do not use too often. Let’s go ahead and set our intro scene to use the Hotkey of numpad one. To do this just simply click in the hotkey box and hit numpad one.
If we need to we can click clear, but since we like how it is let’s hit Ok. From here all that is left to do is to set your other scenes to different hotkeys. After that just put on preview mode and hit your hotkeys to watch your stream scenes switch with ease. Now that we are done with this lets go to file and hit save.
With all of this done we are getting really close to being ready to go live, but what we want to do now is add some cool elements to our scene that make our stream really come alive. We are going to set up some donation notifications and other live updates to our stream in the next guide. If you have any questions about this guide please leave them in the comments.
Posts in this series:
- Creating a high-quality stream for twitch from start to finish
- General settings in OBS for Twitch
- Installing plugins, setting up global sources and scenes
- Adding a music scroller and donation, subscriber, and follower notifications
- Setting up TNotifier and adding animations to notifications
- Setting up your Twitch account before you stream
- Going live and improvements to make afterwards