Stream Overlay / Template OBS Guide: Adding an overlay to your stream
You already have a Twitch channel, but you have the feeling that it still lacks the “certain something”? Or maybe you already have an overlay, but want to exchange it for a more fancy one and aren’t sure what you have to do? Then you’ve come to the right place! In the following article we are going to explain the setup of a stream overlay in five short steps. That way you can be back live in no time at all. At the end, we have summarized all the steps in our “Quick Guide”.
Hint: You haven’t found the right overlay for your stream yet? Then check out our Twitch stream overlay collection. There you will find both, general-purpose overlays and overlays made especially for your favorite game.
Hint 2: You don’t know how to stream with OBS? Check out our OBS streaming guide.
There are two ways you can add a Twitch Overlay for your stream to OBS.
- Incorporating graphics manually (classical approach)
- Import entire scenes directly (easier and more professional)
1. PSD/JPG/PNG – Adding graphic files manually
IMPORTANT: If you bought an overlay and it is available as a PSD or JPG file, you have to convert it into a PNG with a transparent background first! In order to edit PSD files or convert them into PNG files, you need ADOBE Photoshop. If you don’t have it, you should get the PNG file directly from the manufacturer. All Twitch overlays you can buy in our Stream Overlay Shop, are shipped with PSD AND PNG files.
1.1 Adding a new scene
First you have to add a new scene in the “Scenes” box, where you can add the respective elements of your overlay later. Just click on “+” to add and name the new scene. This box is helpful as you can also define several scenes there, between which you can jump back and forth with a mouse click or a keyboard shortcut. Often overlays also have their own graphic for stream start, pause or the offline screen of your channel, which you can define here as an own scene.
1.2 Adding an overlay
Now it’s time to fill your scene with the necessary sources. By clicking on “+” in the Sources box you will get a drop-down menu, where you can add the respective elements to your stream scene. We will first add the desired overlay. To do that select “Image” in the menu.
Whenever you add a new source, the following window appears. For one thing, you can create and name a new source here or add an existing one to your scene. That means, if you already use your webcam in another scence, you won’t have to add and set it up again, but you can transfer it directly from this list. Now name your new source (e. g. “Overlay”) and click OK.
You will now be taken to a new window in which you can add the image file to the OBS scene. Click on “Browse”, find the folder containing your overlay image file and select it. Click OK again and the overlay should now be part of your scene.
Tip: If you want to use a facecam with a suitable frame, simply repeat the steps above with the respective frame image file.
1.3. Adding a play recording
As the next step, we want to integrate the game of your choice into OBS. Click on “+” again and then on “Game Capture”. Name the scene and then enter the settings window. Select “Capture specific window” in “Mode” there. Now you can select your desired game from “Window”. (Note, however, that this is only possible if the game has already been started at that time.)
Make sure that the overlay is above the game recording in the sources order. If this is not the case, first click on the overlay in the Sources box and then on the upward facing arrow at the bottom of the box. If everything worked out, your OBS should look something like this:
1.4. Adding a facecam
Now we are going to add a facecam. If you prefer to stream without a webcam, you can skip this point. Via “+” you return to the Sources selection menu, where you have to select “Video Capture Device” now. Name your facecam and click OK.
From “Device” you can now select your webcam. You can set FPS, resolution and other default settings here. For a more detailed editing of the image, just click on “Configure video” and you will be taken directly to the settings software of your webcam.
Now you have to adjust the size of the cam to fit your frame. To do this, simply mark the webcam in the Sources box by left-clicking on it and then pull on one of the corners of the image. Click on the picture and hold down left-click if you want to move the picture a little.
Hint: As soon as you have adapted the cam to the frame, select the frame and cam in the Sources box by left-clicking on it while holding down the Ctrl key and then move them together within the scene.
After implementing the cam and frame, consider the sequence of the respective sources again and change them, if necessary, using the arrow keys. In the end, your Sources box should look like above.
1.5. Adding donations, followers etc.
Since many overlays offer the possibility to add information about donations, followers etc. to the stream, you might want to display this information in your stream.
This time you choose “BrowserSource” from the source selection and give this source a name (e. g.”Latest follower”).
Depending on the provider, there are different ways to add the desired information to the stream. There is for example the possibility to define follows, subscribers and donations as single sources and display them at different points of the overlay. But you can also generate an “event list”, which for example always shows the last four events.
An example for a popular service would be Streamlabs. All you have to do is connect your Twitch account on streamlabs.com and you can edit the display of your respective stream information immediately. Then you can generate a link that you simply add via the BrowserSource window. Just insert the link as below in the “URL” box. If necessary adjust the height and width and then click “OK”.
As with any other source, you can change the placement and size directly in the scene. Many overlays, as for example our templates, include individual .PNG files to highlight latests followers, recent donations etc.. As described above, all of these elements can be added to your scene through the “Image” section.
Everything done? Then your scene should look like the one above and nothing stands in the way of your stream. Have fun and success!
2. Import complete scene into Twitch (simpler and more professional)
If you have purchased one of our Twitch overlays, you will now receive a short instruction on how to install and customize your overlay with OBS in the shortest possible time.
2.1. Start OBS
All templates provided by us have been tested with the latest OBS version. In principle, downward compatibility should be granted. If there is a problem, make sure you are using the latest version of OBS.
2.2. Installing fonts
Please install all fonts from the folder /fonts on your system. Select all fonts and then click on Install in the context menu (right click).
2.3. Perform scene import
Crux of the matter of the OBS functionality are scenes. We provide you with a complete set of scenes so that you can quickly and easily reach your goal. Select Scene Collection > Import
Select the JSON file (product name overlay scene. json) in the download directory via the selection. This will import the set of scenes and allows you to continue editing. In the category Sources you will now find the following elements:
2.4. Overlay layer
Select the “Overlay” layer by double-clicking it. Then select the correct path to your overlay. png file.
2.5. Text elements
Double-clicking on a text attribute gives you the possibility to modify a text. You can use it to customize all necessary texts according to your wishes.
2.6. Camera source
Double-click to select the correct camera. The alignment is already optimally positioned for you.