Start by choosing the canvas your stream will use, then design graphics to fit it. In OBS, add them as image, text or browser sources, place them above the footage they label, and check the result at the size viewers will see.
A graphic is useful when it makes the stream easier to follow without covering its main content. A speaker label, current topic or break notice can help; a decorative frame that competes with the picture usually cannot. There is no single overlay size or layout that suits every stream.
Choose the stream’s aspect ratio and canvas
Set the target canvas before you make the graphics. For a conventional widescreen production, OBS Project recommends a 16:9 resolution such as 1920×1080 or 1280×720. Those are examples for that format, not a universal prescription: your intended output and source material should guide the choice. Check the current OBS aspect-ratio guide if you need to confirm the relationship between a source and your canvas.
A 16:9 canvas is wider than it is tall. If you design an overlay for that shape and then stretch it into a different shape, circles can become ovals and text or logos can look distorted. Stretching is not a reliable way to preserve an image’s appearance. Instead, set the target dimensions in your design workflow and compose the elements for that space.
For example, if your main programme is a widescreen video and you want a small topic label in one corner, build the label on a canvas matching the programme’s intended output. If the channel uses a different orientation or format, use that format’s dimensions instead. The important point is that the design canvas and the scene you are building should agree; do not assume that a graphic prepared for another destination will fit unchanged.
In OBS, distinguish between the base canvas and the output resolution in your settings. They may be configured differently. A mismatch can mean the scene is scaled on output, so inspect the final scene rather than relying only on how a source looks in an editor. OBS documents its scaling and aspect-ratio behaviour; use the settings appropriate to your production, then verify the result in the preview.
Plan a simple layout before opening the editor
List what the graphic needs to communicate, then decide which information belongs on screen continuously and which only belongs in a particular scene. A devotional stream might need a programme or artist label; a local news loop may need a topic or location; a study channel may need a quiet title card or session label. These are examples, not requirements. If a label does not help someone understand the current picture, consider leaving it out.
Keep the main subject’s area clear. For a video of a speaker, avoid placing a name bar over their face. For a rain or ambience video, a large frame around the edges may take attention away from the scene viewers came to watch. Place marks and labels where they do not obscure the material, and leave breathing room between the edge of the canvas and the text.
Sketch the layout before building it. Mark the video area, any areas that must stay unobstructed, and the positions for labels or logos. Think about how the same scene will look on a desktop player and on a smaller screen. A graphic that seems modest in a full-size preview can take up a large share of a phone display.
If the stream changes programmes, make a short inventory of scenes and their graphics. A starting screen, main programme and break screen may each need different information. This is also a useful point to consider how the visual elements will sit alongside a playlist for an always-on YouTube stream in India: the schedule decides what viewers hear or see over time, while a graphic should identify the current segment without suggesting something that is no longer playing.
Create graphics with readable text
Use short labels, not paragraphs. Viewers need to recognise text while attending to the video, and the stream may be displayed much smaller than your design canvas. A few words such as a topic, programme name or speaker’s name are generally easier to scan than a sentence explaining the whole stream. If you need detailed information, put it in the channel description or another place viewers can pause and read.
Use strong contrast between text and its background. Light text over changing footage may disappear as the picture changes; a solid or partially opaque backing can make a label easier to read. Conversely, make sure a backing is only as large as it needs to be. If transparency is important because the video should show through, export an asset format and settings that preserve it, then check the actual file in OBS. Elgato’s stream overlay guide gives PNG for static and WEBM for animated transparent overlay examples. Confirm that your chosen programme supports the format and test the export before relying on it.
Choose a type size and weight that remain clear in the scene preview at a reduced size. Avoid thin lettering over busy footage. A practical check is to zoom out or view the OBS preview at the approximate size a viewer might see, then read the text without leaning in. If you cannot identify it quickly, simplify the wording, strengthen the contrast or increase its size within the available space.
Treat decoration as optional. Shadows, borders and animation can distinguish an element, but each one adds another visual feature that may compete with the programme. A static transparent label is often enough for a continuous channel. If you do use motion, make sure it does not repeatedly pull attention away from the content, and test the animation in the scene rather than judging only a still preview.
For a design service or template editor, set the canvas to the target aspect ratio before positioning content. Canva’s overlay creation page is an example of a visual-editor workflow, but check its current export choices and settings before you depend on a particular format. A template is a starting point, not proof that its elements will fit your scene or remain readable at stream size.
Add image and text sources in OBS
For a static graphic, add an image source to the scene and select the exported file. For a name or label that you may edit in OBS, use a text source. OBS’s broadcast tutorial for a break screen demonstrates the basic idea of layering a background, text overlay and capture source. The same principle applies to a simple information label: keep each element as a source when you want to position or change it separately.
OBS sources are layered. The source higher in the list appears in front of sources below it, so a graphic intended to sit over the video must be above that video source. If it is hidden, inspect the source order before rebuilding the asset. If a graphic appears as an opaque rectangle when you expected the footage to show through, check whether the exported file really has transparency and whether you selected the intended version.
A browser source can suit a graphic that is already a webpage, changes dynamically, or is easier to manage as one composed layout. OBS Browser Source can load a local file or a URL and offers configurable viewport dimensions and frame rate; see the OBS Browser Source documentation for its current behaviour. Set the viewport to match the intended design dimensions, and confirm that the page renders correctly inside the scene. A webpage that looks right in a normal browser is not automatically positioned or scaled correctly in OBS.
Choose the least complicated source type that fits the job. For a fixed logo and a label that seldom changes, separate image and text sources are straightforward to inspect. For a page-based panel, a browser source may keep several elements together. There is no performance comparison implied here; the practical difference is how you want to edit and compose the graphic.
| Approach | Useful when | What to check |
|---|---|---|
| OBS image and text sources | The graphic is static or you want to adjust its elements independently | Correct file, transparency, source order and placement in each scene |
| OBS Browser Source | The graphic is a webpage, dynamic or composed as one page | Local file or URL, viewport dimensions and how the page renders in OBS |
| Design editor plus OBS | You want to build assets visually or start from a template | Canvas ratio, export transparency and readability after importing |
Position and size elements in the scene
Once sources are added, place them with the programme picture in mind. A label belongs near the information it describes, but not over the person or action viewers need to see. Check the edge of the canvas as well: leave a margin so text does not seem clipped or pressed against the frame. The right margin depends on the layout, so inspect the actual scene rather than applying a universal measurement.
Resize a source proportionally when you need it smaller or larger. Do not force a mismatched design to fill the canvas merely to remove empty space; that can warp the content. If the graphic does not fit, return to the source design and adapt its layout to the target canvas. For a small logo, retaining its original proportions matters more than filling a particular rectangle.
Use OBS’s preview and transform controls to arrange sources. If you crop an image intentionally, check that the crop does not remove letters, a logo edge or a transparent margin the layout depends on. If you are unsure whether an item is too large, compare it with the primary subject and see whether it draws the eye first. A lower-third title can be visible without becoming the largest element in the picture.
When several scenes share an overlay, verify them separately. A label positioned safely over one video might cover a face, subtitle or important corner in another. If the scenes differ substantially, make scene-specific versions or adjust the source placement for each rather than assuming one position will work everywhere. For a channel where the programme changes while the broadcast continues, the guide to changing videos in a YouTube Kirtan stream without ending the broadcast is relevant to the programme side of that workflow; graphics still need checking against each scene they accompany.
Check overlays at stream size
A large preview can conceal problems. Reduce the OBS preview or view a test output at the size you expect people to watch. Check each label for legibility, each transparent area for the picture showing through, and every edge for accidental clipping. Also look for elements that obscure an important part of the source video.
Check the whole viewing path where practical. A scene can look balanced on a monitor but feel crowded in a smaller player, particularly when a persistent label occupies a large portion of the picture. Twitch’s extension design guidance discusses designs that adapt as browser and player sizes change. Although its guidance is for Twitch extensions, the general lesson is useful: layouts encounter changing display sizes. Do not assume that an element will appear at the same physical size for every viewer.
Inspect every scene that uses the graphic, including opening, break and return-to-programme scenes. Confirm that source visibility is what you intend, the correct version of the asset is selected, and transitions do not reveal an unwanted background or an element in the wrong place. If you use a browser source, wait for its content to render and check that it has not shifted, failed to load or retained an unexpected page background.
This is also a sensible point to check that the programme itself remains visible behind the overlay. For a continuous channel, the graphic should support the long-running viewing experience rather than cover the picture throughout it. A 24/7 stream encoder-settings checklist addresses a different part of production, but it is useful to keep the picture and the graphic in view together when checking the complete output.
Adjust after a test run
Run a private or otherwise suitable test before relying on the scene for a public broadcast. Check the actual encoded or player output if your workflow allows it; the OBS preview alone cannot confirm every aspect of the final display. Look for the same issues you checked in the scene: distortion, clipped edges, low contrast, unexpected opacity and graphics covering essential content.
Make one or two deliberate changes at a time. If text is hard to read, first shorten it or improve contrast; if it is still unclear, adjust its size or position. If the whole asset looks stretched, revisit its aspect ratio rather than compensating by changing unrelated scene elements. A change in the design canvas may require repositioning sources and repeating the preview check.
Ask someone who was not involved in making the graphic to identify its text and explain what it communicates. This is a practical check, not a formal measure of engagement. If they notice the frame before the programme, or cannot tell what a label says, simplify the composition. Do not add more decoration in response to a problem caused by unclear information.
For an always-on channel, also consider what happens when you are not at the computer. A file-based programme can continue around the clock, but updating a graphic still requires a correct asset and a scene that has been checked. If the specific pain is keeping a prepared video on air without leaving your own computer running, StreamNeo turns an uploaded file into a YouTube live stream, so you can switch your computer off while the broadcast is monitored and restarted automatically if it drops. It does not create or validate the graphic: prepare and check the visual in your production workflow first.
Before committing, compare the operating options on the pricing page. When the file and channel are ready, start free — 24-hour trial, no card.
FAQ
What size should a live-stream overlay be?
There is no one size that suits every stream. Match the design canvas to your target scene and output; OBS recommends 16:9 examples such as 1920×1080 or 1280×720 for conventional widescreen content. Confirm the final appearance in OBS and in a reduced-size preview.
Can I stretch an overlay to fit my scene?
Avoid relying on stretching to fit a different aspect ratio: it can distort text, logos and other shapes. Adapt the design to the target canvas instead, then check that its proportions and placement look right in the scene.
Should I use an image source or a browser source in OBS?
Use image and text sources for straightforward static elements you want to position independently. A browser source can suit a webpage-based or dynamic layout, but its viewport and rendering need checking in OBS. Choose based on how the graphic is built and maintained.
How can I tell whether text is readable on stream?
Check the actual scene at a smaller preview size, not only on the full design canvas. If the wording is difficult to read quickly, shorten it, improve its contrast or adjust its size and position, then test again.