adding overlays to obs - step by step

Adding Overlays To OBS – Step by Step

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.

  1. 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.

    creating a new scene in obs instructions

  2. 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.

    creating a media source within obs

  3. 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.

    naming a media source in OBS

  4. 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.

    setting the media source within obs

  5. 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.

    resizing a source within obs

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.

  1. 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.

    adding an image source to OBS

  2. Enter a name for the source and press OK.

    naming a source in OBS

  3. 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.

    setting the image source in OBS

  4. 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.

  1. Begin by right clicking the overlay source from the Sources section and select Filters.

    adding filters to OBS

  2. Now select the + icon from the filters dialog.

    creating a new filter

  3. Select Chroma Key from the options.

    selecting chroma key within OBS

  4. 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.

    OBS chroma key settings dialog

  5. 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.

    overlay in OBS with green screen chroma key

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.

  1. 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.

    navigating to my overlays section in streamelements

  2. Select New Overlay button. This will open the overlay editor in a new tab.

    creating a new overlay within streamelents

  3. 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.

    setting overlay resolution in streamelements

  4. 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.

    creating video widget in streamelements

  5. 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.

    change video within streamelements overlay editor

  6. 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.

    uploading a file to the streamelements overlay editor

    selecting files to upload within streamelements uploader

    selecting an image file in streamelements

  7. 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.

    changing video layer settings in streamlements

  8. 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.

    setting position and size of overlay

  9. 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,

    saving an overlay in streamelements

    saving an overlays name in streamelements

  10. Copy Overlay URL by selecting the icon from the top bar in the editor.

    copying overlay link in streamelements

  11. 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

    creating a new scene in obs instructions

  12. Create a browser source. Do this by selecting the + icon in the Sources section of OBS. Then select Browser from the list of options.

    creating a browser source in OBS

  13. Enter a name for the new source and press OK.

    naming a source in OBS

  14. 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.

    setting browser source properties in OBS

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.

  1. Connect your controller. Go to the gamepad viewer website. Press any button on your controller and the pop at the bottom should disappear.

    game pad viewer home page

  2. Select Player 1 from the Currently Viewing dropdown. This will then bring up a preview of the controller.

    selecting players in gamepad viewer

  3. 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.

    selecting controller preset from dropdown

  4. Select the hamburger icon to open up the menu sidebar.

    opening hamburger icon in gamepad viewer

  5. From this menu select Generate URL

    generate url in gamepad viewer

  6. Click the link at the top of the generate URL settings window to copy it.

    copying custom url in gamepad viewer

  7. Launch OBS, within the Sources section press the + icon and then select Browser from the options list.

    creating a browser source in OBS

  8. Enter a name for the new source, make sure that Create New is selected then press OK.

    naming source in OBS as controller

  9. 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.

    setting browser source properties in OBS

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.

  1. 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 This is a folder of presets which will be used later in the tutorial.

    keyboard overlay downloadable files

  2. 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.

    extracting a folder in windows

    input overlay presets

  3. 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.

    windows defender run anyway

  4. 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.

    locate obs location

  5. Once Installed, launch OBS. In the Sources section press the + icon and then select Input Overlay

    creating input overlay source in obs

  6. Give the source a name and then press OK.

    naming and input overlay source in OBS

  7. 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.

    selecting the overlay image file for input overlay in obs

  8. In the new selection window, navigate to the presets folder that we set up in step 2. Select the wasd folder and press Open

    selecting wasd preset

    Inside the wasd folder select the image file named wasd and once again press open.

    selecting the wasd image file

  9. Now select Browse again to select the Overlay Config File.

    selecting overlay config files

  10. 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.

    selecting minimal config file for input overlay

  11. Finish off by pressing Ok to add the input overlay to the scene.

    finish adding input overlay to the scene

  12. 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.

    repositioning & resizing in OBS

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.

  1. Launch OBS, and from the top menu select Scene Collections -> Import

    importing scene collections into OBS

  2. Select Add from the Scene Collection Importer window.

    adding scene collection to OBS

  3. 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.

    selecting scene collection files

  4. 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.

    importing scene collection files to obs

  5. 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

    selecting new scene collection in OBS

  6. 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.

    search folder for missing files OBS


  7. 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.

    selecting missing files folder in Obs

  8. The highlighted fields should now be populated if all the files were found correctly. Press Apply to finish importing

    missing obs files foudn in the scene collections importer

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.

This entry was posted in .

Related Posts