How to Make a Stream Overlay: Sizes and Mistakes

In short: an overlay is the graphic layer you place on top of your game and your camera inside OBS: webcam frame, starting and BRB scenes, chat elements and alerts. It’s designed at the size of the OBS base canvas (1920x1080 is the norm) and organized into scenes with separate pieces. This guide explains what a good overlay includes, how to set it up in OBS without it getting distorted and the mistakes you see most.

What an overlay is and what it’s for

When someone enters your stream, the first thing they see is your scene: the game, your camera and everything around it. The overlay is that visual “frame.” It does three jobs:

• Identity: so your channel is recognizable from a single frame.
• Order: it makes clear where the camera sits, where the game goes and where alerts appear.
• Context: it can show your latest follower, a counter or a “be right back” message.

An overlay isn’t the same as alerts: the overlay is the fixed design of your scenes, and alerts are notifications triggered by events. We cover alerts in the alerts guide.

What a complete overlay includes

An overlay package is usually built as a family of scenes in the same style:

Piece	What it’s used for
Starting scene (“starting soon”)	Screen while you wait for people to arrive
Game scene	Frame for the webcam, borders and an open area for the game
Just chatting scene	Large camera for Just Chatting or conversation
BRB scene	A notice that you’ll be right back
Ending scene	Goodbye, socials and next stream
Webcam frame and details	A box that frames your camera in your palette
Chat and event elements	Chat box, event list or labels with the latest follower

According to the OBS alerts guide, the most common dynamic elements are alerts, the event list, the chat box, labels with standalone information (latest follower, latest subscriber) and the “jar” that fills up with event icons.

What size to design it at

There’s no overlay size imposed by the platforms: what rules is the OBS base canvas. According to the general OBS guide, the canvas is the space where you place your sources and usually matches your monitor’s or your game’s resolution. So the rule is simple:

1. Design each scene at the same size as your base canvas. If your canvas is 1920x1080, design at 1920x1080.
2. Keep the canvas fixed. Changing it later forces you to reposition all your sources. If you need to stream at a lower resolution, lower only the output resolution, not the canvas.
3. Remember your platform’s ceiling. Kick supports up to 1920x1080 and 60 fps, and Twitch’s recommendations go up to 1080p60. A 4K overlay is no use if you’re going to stream at 1080p.

If the overlay is a web page (Browser Source)

Many animated overlays and all alerts work with a Browser Source. According to the official OBS documentation:

• The default size is 800x600, so you have to adjust it by hand to the size of your overlay (for example 1920x1080).
• The default CSS leaves the background transparent and removes margins and scrollbars.
• You can enable “Shutdown source when not visible” so the page unloads when it’s off screen, and “Refresh browser when scene becomes active” so it restarts every time you switch scenes.

Images and transparency

For static pieces (frames, borders, text) use an image with a transparent background that fills the whole canvas. That way, when you place it as an image source it covers the whole scene, and whatever is “empty” lets the game or camera show through underneath.

Your channel’s sizes matter too

The overlay lives inside the stream, but your channel has visual pieces outside OBS. On Twitch, for example, the official channel setup help says:

• Recommended profile banner: 1200x480 px; concentrate the art on the left because the page scales according to each person’s window.
• Info panels: images up to 320 px wide (and 300 px tall), under 2.9 MB.
• Profile picture: JPEG, PNG or GIF up to 10 MB.

If you use the same colors, typography and logo across your overlay, panels and banner, your channel looks like a single brand. We cover how to achieve that in the branding guide.

How to set it up in OBS, step by step

1. Set your base canvas in Settings > Video (for example, 1920x1080).
2. Create a scene for each situation: starting, game, chatting, BRB and ending.
3. Add the background sources first (game, camera) and the overlay image with transparency on top.
4. Stretch the webcam frame to the size of the overlay’s box; crop with the Crop/Pad filter if needed.
5. Add your browser sources (alerts, chat, labels) at the very top so no image covers them.
6. Do a short test stream or recording and check that nothing covers game elements.

For the full OBS setup, including CBR and bitrate, see the OBS guide.

Common mistakes

• Covering the game’s interface. Check in your game where the minimap, health and important text are before drawing big borders.
• A tiny webcam or boxes that don’t line up. If the frame doesn’t match your camera, it looks sloppy. Measure the box and fit the camera to it.
• Too many elements at once. Every counter and extra box clutters the image and shifts focus away from you and the game.
• Text that’s too small. On a phone, 12 px lettering is unreadable. Use few words and generous sizes.
• Duplicate alerts. If you copy the alerts source into several scenes and also leave another inside the overlay, the alert plays twice. Keep just one.
• Mixing styles. A neon frame with minimalist panels and emotes in a different style gives the impression of an improvised channel.

Overlays made for your channel

At Epik you can order an overlay a la carte for $20 each. The Boost pack includes a logo, 3 overlays, 3 panels and 1 banner (for a single platform), and the Epik pack adds overlays, frames, panels, banners, emotes, subscriber badges, alerts, TTS and multiplatform OBS setup. Everything is paid in full through PayPal and we start with your brief.