OBS Studio Overlay Setup Guide for Streamers

Want to give your Twitch or YouTube stream a professional look? Installing a StreamSpell overlay in OBS Studio is easier than you think.

In this step-by-step guide, we’ll walk you through everything from scenes to alerts—no fluff, just what you need to get started.

‍

Manual Overlay Installation in OBS Studio

1. Creating the Social Media Scene

• Click the “+” in the “Scenes” box > select “Add Scene” and name it “Social Media.”

• In the “Sources” box, click “+” > choose “Text (GDI+)” > “Create New.” Duplicate this until you have four text layers.

• Go to your Stream Package folder > open Icons > Social Media and drag the icons into OBS “Sources.”

• Right-click the icons > Transform > Center to screen. Resize and position each one manually.

‍

2. Creating the Starting Scene

• In “Scenes,” select or add a scene called “Starting.”

• Drag the Starting.webm file from the “Screens” folder into “Sources.”

• Click the gear icon > Properties > check “Loop.”

• Add your Social Media scene by clicking “+” > “Scene” > choose “Social Media.” Resize as needed.

‍

‍

3. Creating the Ending, BRB & Offline Scenes

• Repeat the Starting Scene steps above but rename accordingly and use the appropriate .webm file.

‍

4. Creating the Intermission Scene

• Follow the Starting Scene steps, naming it “Intermission.”

• Add webcam: Sources > “+” > “Video Capture Device” > “Custom” resolution > 1920x1080 or 1280x720.

‍

‍

• Position webcam beneath Intermission.webm in the “Sources” list.

• Add Display Capture if needed > adjust to fit.

• Drag label icons from Icons > Label folder into “Sources” and position them.

• To add chat box: Log into Streamlabs > Widgets > Chat Box > copy URL. In OBS: Sources > “+” > “Browser” > name “Chatbox” > paste URL > resize.

‍

5. Setting Up Your Transition

• Go to “Scene Transitions” > select “Stinger.” Name it “Transition.”

• Browse and select the Transition.webm file.

• Go to “Scene Transitions”> click the three dots (⋯) next to your selected transition > choose “Properties.”In the new window, adjust the “Transition Point (ms)” to your preferred timing (e.g., 1000–1200 ms) > click “Preview Transition” to test the result.

‍

6. Creating the Live Scene

• Add a new scene named “Live.”

• Drag Webcam.webm and two Overlayslot.webm files from the “Overlay” folder into “Sources.”

• Add labels from the Label folder.

• Select each .webm source > Filters > check “Loop.”

• Add webcam: Sources > “+” > “Video Capture Device” > 1920x1080 > drag below “Game Capture.”

‍

• Optional: Group all icons by selecting “+” > “Group” and moving sources into the group folder.

‍

7. Installing Stream Alerts via Streamlabs (Quick Method)

• Unzip the Files:
  After you download your StreamSpell package, you’ll get a ZIP file — it’s like a digital folder that keeps everything organized in one place. To use your overlays, just double-click the ZIP file and extract (or “unzip”) it.
  Most computers let you do this with a right-click > “Extract All” option. Once unzipped, you’ll see all your files ready to use!

‍

• Open the Tutorial: Go to the folder named "Tutorials", "Setup Guide", or "Install Files" (the name may vary depending on the package version). Double-click the .URL file—usually named "Streamlabs Alerts" or something similar—to open the setup link in your browser.

• Create Widget Theme: Click “Create a New Widget Theme” > name it > click “Create.”

• Use the Theme: Click “Use” > copy the alert URL.

• Add to OBS: In OBS, go to Sources > “+” > “Browser” > name it “Alert” > paste URL > position.

• Test It: In Streamlabs, click “Test Follow” or other options to confirm setup.

• Select Your Platform: Use the dropdown menu on the left sidebar (under the alert categories like Twitch, YouTube, Kick, etc.) to select your streaming platform and apply the correct settings.

‍

💡 Need help installing your stream overlay?

‍If you purchased a StreamSpell package and need help setting it up, visit our Support Page — we’ve got step-by-step tutorials for OBS Studio, Streamlabs, StreamElements, Elgato Marketplace, and more.From installing widgets to setting up scene collections, we’ve got your back!

‍

Related Guides

• OBS Studio Guide: Learn how to stream like a Pro
• Can’t Decide Between OBS and Streamlabs? We Can Help!

‍

Final Note

Thanks for reading this OBS Studio setup guide!
Now you’re ready to create a professional-looking stream with your new overlay package.
If you ever get stuck, feel free to reach out — we’re here to help! 💙

‍

💙 Extra Resources

Find more animated stream overlays, animated stream alerts, animated transitions, Stream Deck Icons, emotes and badges, stream widgets (Chat Box, Event List, Goal Bar), and custom stream designs:

• StreamSpell Store
• Custom Design Services
• StreamSpell Portfolio
• StreamSpell Etsy Store

‍
Thank you for following our blog!
See you in the next post 💙