No products in the cart.
- 23 Nov
Adding Overlays To OBS – Step by Step
- May 20, 2023
- by Liam Doherty
So you’ve decided to give your stream a new look. If you’ve already got a stream overlay the next step is to learn how to add them to your Twitch, YouTube or Facebook stream using OBS. Luckily one powerful and completely free piece of broadcasting software is available to help. We are of course talking about OBS. This software gives you the ability to add all sorts of graphics and animations to your stream. It’s robustness allows you to create quite advanced scenes and set ups, whilst always giving you full control over the layout.
How To Add Overlays To OBS
Before getting into the steps it’s important to note that there are 4 different kinds of overlays that can be added to OBS. These are animated, image, browser and text overlays. Each type has a different set up process that we’ll cover to get you set up as quick as possible. Lets start off by showing you how to add animated overlays to OBS.
Launch OBS studio and create a new scene. If you’ve created a scene before which you would like to add an overlay to, simply select it in the Scenes section to make it active. To create a new scene, press the + icon in Scenes section. Typically this button is in the lower left on the default layout. Enter a name for the new scene and hit OK.
An alternative way to create a scene is to Right Click within the scenes area and select Add. A prompt will then show asking for the scenes name. Enter a name a press OK.
Create a new media source. Locate the + Icon in the sources section. In the new sources menu select Media Source. There are quite a few different sources available to choose from. For the purpose of animated overlays you have to use the media source.
An alternative way to create a media source in OBS is to Right Click within the Sources area then Add -> Media Source.
With Create New option selected, enter a name for the source and press OK. The alternative option Add Existing can be used if you want to make a copy of an existing source. When it comes to naming sources use descriptive names so that sources can be easily identifiable. As your scenes become more complex a good naming convention will help keep everything organised.
From the Properties window select Browse and select your overlay file. Once you select browse a new window will show, use this to locate the overlay file on your computer. Once you find the overlay file select it and press Open. Finally enable the Loop option. This ensures the animation will start playing again after it finishes. Select ok to finish adding the overlay to your scene.
If you don’t see a browse button in the properties window, confirm that Local File checkbox is enabled.
Once the image overlay has been added to the scene, you might need to resize it. To do this quickly, right click the overlay in the preview window and select Transform -> Fit To Screen. If the images aspect ratio is different to your canvas resolution in OBS, you’ll need to manually resize the image. Do this by dragging (hold left click) the corners. You’ll notice that OBS maintains the aspect ratio of the overlay when you resize.
If you hold Shift + Left Click whilst resizing you can resize the overlay source without being locked to it’s aspect ratio.
Additionally holding Alt + Left Click whilst dragging the corners will crop the overlay source.
In some cases you might find that using animated overlays causes your stream to lag. If you’ve tried optimising the files to be smaller using the WebM format without improvement, you should try using image overlays. Adding a static image overlay to OBS follows many of the same steps as adding animated ones.
Select the + button in the Sources section, then select Image from the menu. This will add a new image source to the scene. The + button is typically found at the bottom of the sources section.
Another way to create an image source is to Right Click within the sources section then Add -> Image.
Enter a name for the source and press OK.
Select Browse and a new window should appear. From here, locate the image file on your computer. Select the file and press Open. Once the file is added to the source press Ok.
- If the image needs resizing you can follow the same process as animated overlays.
Video Tutorial
If you’re someone who find it easier to follow along with a video tutorials we’ve found a great step by step tutorial to follow. If reading and following steps at your own pace is more your style then continue down the page for in depth instructions of the process.
How To Add Chroma Key / Green Screen Overlays To OBS
In some cases your overlays might not be transparent and instead have a green color. This is common for some overlay making apps that don’t let you export the file with transparency values. If you’re using OBS there’s a great filter for removing the green parts of an overlay making them see through. We’ll assume that you’ve already added the overlay to OBS using the guide above.
Begin by right clicking the overlay source from the Sources section and select Filters.
Now select the + icon from the filters dialog.
Select Chroma Key from the options.
From the chroma key settings dialog, you’ll want to make sure to set Key Color Type to whichever color you want to key out. In our case we’re keying out the green and so set it to Green.
Now you’ll notice that the green portion of the overlay has been keyed out. Make sure that your overlay doesn’t have the same colors in it as the color you choose to key out.
How To Add Streamelements Overlay To OBS
Setting up overlays from Streamelements in OBS might seem a bit confusing initially. To solve that we’ve put together some easy to follow steps. If you already know how to create an overlay within Streamelements and want to know how it plugs into OBS, skip ahead to step 10. Streamelements keeps all of your overlays in the cloud, so setting them up in OBS is quite different to how you would set up other overlays that typically exist on your computer.
Navigate to my overlays from the Streamelements dashboard. Locate the side bar on the left hand side then select Streaming Tools -> My overlays. If you’re already signed in you can go straight there.
Select New Overlay button. This will open the overlay editor in a new tab.
Set resolution to 1080p from the dropdown options and then press Start. This step sets the size of the canvas that we’re using to place the overlay.
Select Add Widget -> Static/Custom -> Video. The add widget button can be found in the left side bar. Once you select this a selection menu will pop up. You should now have a video widget added to the overlay.
Add your overlay file by selecting Change Video. This button is located in the settings section of the sidebar. When you first add the video widget the Settings section is already expanded. If you can’t see the Settings section, simply select the video layer again. You can either select the video layer by clicking it in the canvas, or by expanding the Layers section at the top of the left hand sidebar, then select the video layer.
Select Upload -> Select Files from the uploader menu. Now locate the overlay file you wish to upload from your computer and press Open. Once uploaded hover over the uploaded overlay and press Submit.
We need to make sure a few settings are set. Set video size as Scaled To Fit. Make sure to enable Loop. Finally expand the Position, size and style section. Loop needs to be enabled to make sure the video starts to play again after finishing.
Set Width 1920 and Height 1080. Now press Center Widget. This will make your overlay full screen on a 1080p canvas. Alternatively you can drag the corners of the overlay to change it’s size.
Select Save. The save button is located at the top right of the overlay editor. If you haven’t already entered a name for the overlay you’ll be prompted to enter a name upon pressing save. Simply enter a name and press save again,
Copy Overlay URL by selecting the icon from the top bar in the editor.
Launch OBS studio. Either create a new scene or select an existing scene where you want to add an overlay. To create a new scene, press the + icon in Scenes section. Typically this button is in the lower left on the default layout. Enter a name for the new scene and hit OK
Create a browser source. Do this by selecting the + icon in the Sources section of OBS. Then select Browser from the list of options.
Enter a name for the new source and press OK.
Paste the URL you copied from step 10 into the URL section. Set Width 1920 and Height 1080. Press Ok and your Streamelements overlay will now be added to OBS. If you’re using a different canvas size in OBS adjust the Width and height accordingly. For example, if you’re using a 720p canvas in OBS the browser source dimensions should be 1280×720.
How To Add Controller Overlay To OBS ?
Adding a controller overlay to OBS is a great way to show off to your viewers. Often very skilled players will use this kind of overlay as it can help viewers understand the skill of the players, but also can help them learn new tricks. A very popular use of this overlay is in games such as Rocket League.
As always if you prefer to follow along with a video tutorial then we’ve found a great one for you. To get step by step instructions keep reading.
Connect your controller. Go to the gamepad viewer website. Press any button on your controller and the pop at the bottom should disappear.
Select Player 1 from the Currently Viewing dropdown. This will then bring up a preview of the controller.
Select the controller that you’re using from the controller select drop down. Gamepad viewer will do it’s best to guess which controller you are using. However if it’s struggling to detect your controller simply select it manually.
With the controller selected start testing all the buttons on your controller. Using the preview controller, the corresponding buttons should react to when you press the button on your physical controller. Once you’re satisfied that all the buttons are being detected, move to the next step.
Select the hamburger icon to open up the menu sidebar.
From this menu select Generate URL
Click the link at the top of the generate URL settings window to copy it.
Launch OBS, within the Sources section press the + icon and then select Browser from the options list.
Enter a name for the new source, make sure that Create New is selected then press OK.
Paste the URL that you copied from step 6 into the URL section. Set Width 1280 and Height 720. Press Ok and the controller overlay will now be added to OBS. The width and height that you set should be relative to your canvas size.
You can now resize the controller source in OBS by holding Left Click at one of the corners and dragging it. Reposition the controller overlay by holding Left Click within the sources red boundary box and dragging it on screen.
How To Add A Keyboard & Mouse Overlay To OBS ?
Adding a keyboard overlay is really straightforward using the following plugin for OBS. These keyboard overlays are great for competitive players as it shows all your viewers how much skill is involved in competitive gaming.
Head over to the plugins downloads page. If you are not running an OBS version above 28.0 we reccomend that you update it. Otherwise you will have to use an older version of the plugin.
On the plugin page, scroll to the bottom to find the Assets section. Select the input-overlay-5.0.0-windows-x64-Installer.exe to begin downloading it. This file will be used to install the plugin to OBS.
You’ll also need to download input-overlay.v5.0.0rc1-8d04a98.presets.zip. This is a folder of presets which will be used later in the tutorial.
Once both files are finished downloading, navigate to the folder in which they were downloaded. Start by right clicking the input-overlay-5.0.0-presets file and selecting Extract to “input-overlay-5.0.0-presets\”.
This will create a new folder with all the extracted files. You can open it and you’ll see a bunch of presets. We’ll come back to this folder later on.
Next we’ll install the plugin to OBS. In your downloads folder double click the file input-overlay-5.0.0-windows-x64-Installer to begin installation. You might be prompted by windows defender. Simply select More Info then press Run Anyway.
Follow the installation process. If you’ve installed OBS somewhere other than the default location then, make sure to locate the correct folder during the installation process.
Once Installed, launch OBS. In the Sources section press the + icon and then select Input Overlay
Give the source a name and then press OK.
A properties window will now show up where you can set up the Input overlay. Start by pressing Browse to locate the Overlay Image File.
In the new selection window, navigate to the presets folder that we set up in step 2. Select the wasd folder and press Open
Inside the wasd folder select the image file named wasd and once again press open.
Now select Browse again to select the Overlay Config File.
Navigate to the same folder we used to select the image file (OBS will probably open the same location by default). You will know you’re in the correct folder if you see two files named wasd-full and wasd-minimal. We’re going to select the wasd-minimal and then press Open.
Finish off by pressing Ok to add the input overlay to the scene.
You can now reposition the overlay by holding Left Click within the red boundary box and dragging it around. And reposition it by holding Left Click whilst dragging one the corners.
Setting Up The Mouse Overlay
Using the same plugin you can set up a mouse input overlay. To do this simply follow the steps above. However at Step 8 open the folder mouse and then select the image file also called mouse. Then at Step 10 you’ll select a different config file called mouse-no-movement.
You’ll notice that each preset has a few different config files. Feel free to experiment with these by changing them within your Input Overlay source. You can quickly change a config file by right clicking the Input Overlay -> Properties and repeating from Step 9 onwards.
Creating Custom Presets
If you’re not happy with any of the default presets you can have a go at making your own. The plugin gives details on how to create your own presets. Although it might seem complicated initially once you’ve seen the video tutorial the whole process is a lot easier to tackle.
Video Tutorial
If you’d prefer to follow a visual tutorial the following video is a great resource. However the video is a few years old and also uses an older version of the plugin. This older version is a lot less streamlines and has a lot more steps involved just to get the plugin installed.
Importing Overlays To OBS Using Scene Collections
Quite often when you buy stream overlays they’ll contain quick install files to get your overlay files set up as fast as possible without all the hassle. We’ll show you exactly how to import these quick install files into OBS. For this guide we’ll be using our own Lofi City package as an example. However any stream package that contains an OBS scene collection file will work with the same process.
Launch OBS, and from the top menu select Scene Collections -> Import
Select Add from the Scene Collection Importer window.
Select your scene collection file and press Open. Scene collection files can be recognised by their file type which is noted as Json Source File.
Your scene collection is now added to the importer. It should be checked by default upon adding. If not simply check the box the select Import.
Switch to the new scene collection by selecting Scene Collections from the top menu. Select your scene collection from the dropdown menu. In our case we’re selecting the scene collection called Package
You’ll now be shown a missing files prompt. This is normal, select Search Folder. We need to tell OBS where to search for the animation files.
Select the folder containing your animated files and Select Folder. If your stream package has been built correctly all the animated files should be matching the names required by the scene collections importer.
The highlighted fields should now be populated if all the files were found correctly. Press Apply to finish importing
Getting Overlays For OBS
In order to add your overlays to add your first need to find overlays that are compatible. Luckily there’s no shortage of options out there. You can either get overlays pre-made by designers or make the overlays yourself.
If you want to get started as quickly as possible we recommend finding a free stream overlay and following our guide for adding them to OBS. Creating an overlay from nothing is time consuming, but if you want full control over your streams look then it’s a better option.
