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 · 3 minutes

Add an animated overlay in OBS Studio

Our overlays, alerts and counters are web pages. OBS shows them with a browser source, on a transparent background.

  1. 01

    Open your scene

    In the Sources panel, click the plus button at the bottom left.

  2. 02

    Choose “Browser”

    Give it a clear name, for example “Aghenor Overlay”, then confirm.

  3. 03

    Set the page

    Paste the address, or tick “Local file” and select the pack's HTML file.

  4. 04

    Set the size

    Set the width to 1920 and the height to 1080 for a 16:9 scene. For an alert or a counter, a smaller size is enough.

  5. 05

    Lighten the source

    Tick “Shutdown source when not visible” so pages don't run for nothing.

  6. 06

    Fit it to the screen

    Right-click the source, Transform, Fit to screen. Place it above your game capture.

Keep going

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 →OBS and Streamlabs

A “stream starting” countdown for OBS

Generate the address with the free tool and paste it into a browser source.

2 minutes →