Overlays exist to frame the content, and the commonest mistake is letting them compete with it. A viewer who is reading your webcam border instead of watching the game has been distracted by decoration.
What the Stream Overlay Creator does
Builds a stream overlay you can add as an OBS source — the frame around your content, including webcam borders and information panels.
Deliberately static rather than animated: an animated overlay re-encodes every frame it touches, which costs CPU your encoder needs.
Open the Stream Overlay Creator and follow the settings and checks below.
Design and setup
| Setting | What it means |
|---|---|
| Output | An overlay image for OBS |
| Animated? | No — static, to protect encoder CPU |
| Add to OBS as | An image source above your game/camera |
| Safe area | Keep the centre clear |
| Chat and alerts | Add separately as their own sources |
| Transparency | Preserved, so content shows through |
| Privacy | Generated in your browser |
How to use it
- Design the frame, keeping the middle of the canvas empty.
- Add it as an image source above your game and camera.
- Check it against actual gameplay, not a still — moving content is where clutter shows.
A practical quality check
Leave the bottom third emptier than feels right. Platforms overlay their own controls, captions and chat prompts there, and on mobile the player UI covers more of it again. An overlay that looks balanced in OBS can have its lower elements completely hidden for a large share of your audience.
Common questions
Will an overlay slow my stream?
A static one costs almost nothing. Animated overlays and browser sources running effects do consume CPU, and that is CPU your encoder is competing for — which shows up as dropped frames rather than as a slow overlay.
How much of the screen should it cover?
Less than you think. The content is what people came for; the overlay is a frame. If a viewer has to look past your design to see the game, the design is too big.
Where do alerts and chat go?
As separate sources, added on top. Keeping them independent means you can move or disable them per scene without rebuilding the overlay.
Should it match my channel art?
Yes — consistent colour between overlay, banner and emotes is what makes a channel feel deliberate. The Stream Asset Sizer handles the other pieces at the correct dimensions.
Useful next tools
- Stream Alert Creator — Design follower, sub and donation alert graphics.
- Brb Overlay — A styled page to drop into OBS as a browser source.
- Starting Soon Screen — Make a starting-soon screen with countdown for OBS.
- Stream Asset Sizer — Correct sizes for Twitch and YouTube banners, avatars and panels.
Vootkit provides a browser tool and educational guidance, not a guarantee that every browser, device or third-party platform will accept every file. Platform specifications can change, so verify important publishing requirements with the destination service.
Try the tools from this guide
Keep reading
How to Create a BRB Screen and Countdown Overlay
Creates a \"be right back\" card to switch to during a break — sized for a stream canvas and ready as an OBS source.
How to Style a Stream Chat Overlay With CSS
Creates a styled chat overlay to add as a browser source in OBS, so messages appear on the stream itself.
How to Resize Emotes and Stickers Without Losing Clarity
Resizes a single image into the exact set of sizes a platform requires, in one pass — because you need all of them, not one.