NEWBuild your whole pack of animated scenes with the Scene Workshop: free to try, one look included free. Try it now
FRENES
Menu

Guides · OBS and Streamlabs · 8 minutes

How to install a full stream overlay in OBS

A full overlay is a set of scenes that follow each other: starting soon, in game, break, end. The idea is to build them once, in the right order, then test everything before you go live.

  1. 01

    Get the pack ready

    Download your pack, or generate one in the Scene Workshop (free to try), and unzip it into a stable folder. The guide “Install the Scene Workshop pack, scene by scene” goes through the files.

  2. 02

    Import or add by hand

    If an overlay comes with an OBS scene collection, import it from the Scene Collection menu, then “Import Scene Collection”. The Workshop pack comes as HTML pages: in that case you add the scenes yourself, in the next steps.

  3. 03

    Create one scene per screen

    At least four scenes: Starting soon, In game, Break, End. Give them clear names, you will find them faster during the stream.

  4. 04

    Respect the source order

    In the sources list, the top is in front. For the game scene, from bottom to top: the game capture, the webcam, the overlay (with its transparent center), then the alerts and the chat.

  5. 05

    Add each page as a source

    For each scene, add the matching HTML page as a browser source using “Local file”, at 1920 by 1080, then fit it to the screen (right-click, Transform, “Fit to screen”).

  6. 06

    Choose the transition

    Keep a simple fade or add a stinger between scenes: the guide “Set up a transition stinger in OBS or Streamlabs” explains the setting.

  7. 07

    Test everything before the stream

    Start a test recording and go through every scene. Check the fonts, the sound, the countdown and a fake alert, then watch the recorded file.

Keep going

OBS

Add an animated overlay in OBS Studio

An HTML page or a web address becomes an overlay: the method for all our overlays.

3 minutes →Streamlabs

Add an animated overlay in Streamlabs Desktop

Same principle as in OBS, with Streamlabs wording.

3 minutes →Cheat sheet

The right sizes: screens, banners, emotes

The cheat sheet of dimensions to know for Twitch, Discord and YouTube.

2 minutes →