Skip to content

EditionsPhotoArt

Curated Content On Photography

  • Home
  • Privacy Policy

How to Add Graphics and Overlays to Live Video With Open Broadcaster (OBS)

Open Broadcast Software Studio, or OBS for short, is the ‘go to’ software for quick and easy, free (and open-source) broadcasting and streaming. The interface is simple to use and allows you to customise your video with graphics—it’s a great tool to add polish and professionalism to your broadcast. Let’s take a look at a few of the ways you might want to use graphics, and how you can do that within OBS.


Streaming Graphics

Just like in other types of video, graphics are an important part of your broadcast or stream, and they give important extra information to viewers. The key graphics elements for live video are overlays, banners, panels, alerts, and logos. Streaming graphics such as OBS live overlays are key to helping your audience to quickly recognise and, hopefully, connect emotionally with you and your stream.

1. How to Add Overlay Graphics in OBS Studio

An overlay can be a very simple graphic, as uncomplicated as a border that goes around the frame of your video. Wondering how OBS live overlays work? Live streamers on Twitch are big on using overlays because they give you scope to personalise your content. You can also use OBS overlays as placeholders for ‘starting soon’ and ‘thanks for watching,’ so that you aren’t leaving viewers with a blank screen.

Make Your Own Overlay

Learning how to add overlays on OBS is easier than you think. You can create your own overlay, and we’ve got a great guide to how you can do that in Photoshop that’s worth checking out.

twitch overlay for OBS on placeittwitch overlay for OBS on placeittwitch overlay for OBS on placeit
Instead of looking for free overlays for OBS, check out this Twitch overlay for OBS from Placeit

If Photoshop seems overwhelming, try Placeit. With Placeit, you can make channel graphics by using interactive templates to customise existing designs in your web browser. This is a great way to get something that looks professional and can be adjusted to suit your brand, whilst not forcing you to create something from scratch or learn another new program.

Get some help from professionals by working with premium templates. You’ll get much more quality than with free overlays for OBS. Check out the step-by-step tutorial on how to make an overlay with Placeit for full details.

Add Your Overlay

To add overlays on OBS (I’ll add this Placeit example which I’ve modified slightly), select the Scene you want to add it to—mine is ‘Test‘—and then go to Sources > Add > Image.

overlay in OBSoverlay in OBSoverlay in OBS
The overlay imported into OBS. You can use this to create Twitch overlays.

And your OBS overlay image is superimposed above your video source. Now you know how to add overlays on OBS. Use this tutorial to create Twitch overlays. It’s easy!

A Quick Note on Scenes

Scenes in OBS are a way to set up your preferred layout, video sources, and audio settings for a particular type of broadcast or stream. If you make videos across different themes, if you’re a gamer who streams more than one game, or if you have two or more video feeds going (a camera on a host and screen-capture from your gameplay, for example), you’ll find Scenes very handy.

Scenes are not the same as Profiles, which you can set up to contain stream keys, encoder settings, output size, and so on. You use Profiles and Scenes in combination with each other.

When you set up your Scene, you can then add things like graphics, as above, which will become accessible when you want to stream in that specific way. For more, check out our tutorial on how to use Scenes in OBS to switch between sources.

2. How to Add Text in OBS

Text, of course, doesn’t strictly come under graphics, but there are two ways to add it in OBS. The first is to directly input it through the Source menu (Add > Text), and the second is to create it elsewhere and then import it as an image.

To do this, simply create your desired text in your usual program, like Photoshop.

sample text created in Photoshopsample text created in Photoshopsample text created in Photoshop
Sample text created in Photoshop

Save it as a PNG file to preserve the transparent background. Then, in the Sources box, click Add > Image.

add text as an imageadd text as an imageadd text as an image
Adding text as an image in OBS

It’ll ask you to create a name for your source, so call it something appropriate and then, when prompted, navigate to where your image is saved on your computer and add it. You’ll immediately see it appear on the screen.

text added will appear in sources and can be adjustedtext added will appear in sources and can be adjustedtext added will appear in sources and can be adjusted
Text added will appear in Sources and can be resized and placed

When it’s on your screen, you can resize and position it as appropriate, and you even have the option to reduce the opacity.

3. How to Add Motion Graphics in OBS

If you’re able to create video content in a suite like Premiere Pro or After Effects, then you can use those graphics in OBS. While you won’t be able to directly edit or change the content in OBS, you can make things like lower thirds or animated logos and render them out to an MP4 or other video file to include in your Scene.

If you want to go all out and make a user interface for your feed, but you don’t have the design skills or patience to design a full GUI for your stream, check out these heads-up display design kits from Elements.

Here’s a quick example I made, a lower third, and how to add it to your Scene:

Try Adding Graphics in OBS Studio

Adding graphic elements to a video can make it look like a more expensive and expressive production. Quite often, as with most things, less is more, so try to have a few well-made and consistent design elements that you use frequently, rather than a big mix of stuff. It’s wise to use Profiles and Scenes to keep different broadcasts separate and—if you want—to give each its own identity.

The great thing about being able to use animated graphics rather than just images in OBS Studio is that it opens up a world of possibilities about the kinds of graphics you can create. As well as making things from scratch in an editing suite, you can access a wide range of templates that you can adjust and then render out, giving you a bank of graphics to use.

Heads-up display graphic tempate - computer-control designs on a black brackgroundHeads-up display graphic tempate - computer-control designs on a black brackgroundHeads-up display graphic tempate - computer-control designs on a black brackground
HUD User Interface Set by codetoform, Envato Elements

Top Resources From Envato to Help You Make Great Video

Here are more resources from Envato to keep you learning and making awesome streaming video.

Envato Elements: Unlimited Downloads

On Envato Elements, you have access to hundreds of video templates all included in the subscription. This means you can create some branding to go with your broadcast or live stream—an animated logo for example, or a set of lower thirds. Callouts can be useful for things like tutorials or unboxing broadcasts, and there are any number of animated graphics that would fit into most projects, so you can experiment and see what works for you.

Elements offers millions of stock items: photos, music, video clips, fonts, video project templates for After Effects, Premiere Pro, Final Cut Pro, and Motion, and creative courses from Envato Tuts+, all with a single subscription.

Download Free Video, Free Music, and Free Templates From Mixkit

Check out Mixkit for free stock videos, free stock music, and free templates for Adobe Premiere Pro.

Make a Motion Graphics Video Online With Placeit

Placeit is an online video maker with professionally designed motion graphics templates.

Read the Envato Video Marketing Guide

Boost your video marketing skills with our comprehensive guide. You’ll learn video marketing from start to finish.

Learn to Stream and Broadcast With Confidence

  • OBS Quick Start: How to Create Live Video for Free With Open Broadcaster Software Studio

    A quickly and easy way to get into live streaming Open Broadcaster Software Studio gives you some simple and effective tools to make your video look more…
    Marie GardinerMarie GardinerMarie Gardiner

    Marie Gardiner

    28 Jul 2020

    Video
  • OBS Quick Start: How to Record Your Screen for Free With Open Broadcaster Software

    Learn how to install and set up Open Broadcaster Software for Linux, Mac and PC. In this tutorial we go through an abridged, quick-start method to begin…
    Kezz BraceyKezz BraceyKezz Bracey

    Kezz Bracey

    25 Jul 2020

    Video
  • Top 3 Looping Video Backgrounds (Stock Footage) for Live Streaming

    Use looping background footage to keep your video production going with no break in the action! Check out these top selections.
    Andrew ChildressAndrew ChildressAndrew Childress

    Andrew Childress

    24 May 2019

    Stock Footage
  • How to Build an Audience For Your Live Stream

    Broadcasting live over the internet is easy. The tough part is getting noticed. Here are four strategies to help you attract and build an audience for your…
    Cindy BurgessCindy BurgessCindy Burgess

    Cindy Burgess

    14 Sep 2016

    Live Streaming
  • How to Improve Webcam Video Picture Quality With OBS Studio (Settings, Exposure, LUTs)

    OBS Studio is a great free and open-source tool for broadcasting, recording and streaming. Here we’ll look at how you can adjust your webcam to get the best…
    Marie GardinerMarie GardinerMarie Gardiner

    Marie Gardiner

    18 Feb 2021

    Video
  • How to Stream Video to Multiple Platforms Simultaneously With Restream and OBS

    Learn how to simultaneously stream your content on multiple platforms using Restream, a one stop solution for easy sharing of your content, and OBS.
    André BluteauAndré BluteauAndré Bluteau

    André Bluteau

    28 Jun 2022

    Video
  • Two Quick Ways to Add Dynamic Text to Your Live Video Stream in OBS

    Dynamic text can be a really useful feature of your live stream, encouraging others to comment, subscribe and donate. Let’s check out a couple of ways you…
    Marie GardinerMarie GardinerMarie Gardiner

    Marie Gardiner

    30 Jun 2020

    Video

About the Authors

Marie Gardiner wrote the text version of this lesson. Janila Castañeda updated the Learn More section on 21 July 2022. Jackson Couse edited and published it.

Related Posts

  • What Is Video Bitrate?

    Let's stomp out the confusion surrounding the term bitrate and find out exactly what it…

  • How to Add Captions to Video in Premiere Pro

    * { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} In this lesson from Tom Graham's free…

  • How to Stream Video to Multiple Platforms Simultaneously With Restream and OBS

    * { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Video platforms and their intricate algorithms are…

Related posts:

  1. 35 Video Logo Animations (In After Effects) AE Templates for 2022 Inspiration
  2. Peter van Agtmael grapples with chronicling the post-9/11 era
  3. 55 More Useful and Stylish Video Templates for After Effects (5 Free)
  4. 50 Free Intro, Title and Opener Templates for Premiere Pro
Published August 3, 2022By Editor
Categorized as Uncategorized Tagged above, ACC, action, active, Amer, art, background, bc, best, big, body, box, bra, bridge, bro, cat, child, city, computer, couple, create, creative, cross, cut, design, detail, details, display, down, dress, eat, eau, eco, edited, effect, emotion, emotional, Expo, Exposure, expressive, face, file, fit, font, four, frame, game, Giving, go, graphic, ground, hand, hat, hav, head, hot, ice, ich, ight, internet, it, j, just, la, lac, lay, leaving, lick, Light, lion, lips, Logo, look, looking, market, men, mix, Motion, multi, music, NP, NY, ol, old, one, open, patience, pea, pensive, person, Photo, photoshop, picture, plate, play, Po, port, professional, profile, project, published, race, range, read, Red, riat, ring, road, rot, rough, round, same, scene, See, selection, Shed, shop, Sign, simple, single, soft, sour, star, stock, stre, stream, studio, suit, tail, tea, text, think, tie, top, transparent, tutorial, two, type, ue, under, up, US, ut, view, way, web, wide, wise, wonder, world, wro

Post navigation

Previous post

Your next LED panel or TV may contain fish waste

Next post

Why young people are embracing NFTs and crypto

Recent Posts

  • The Moment Everything Bags are versatile daily carry and travel bags
  • Early Amazon Prime Day deals: Sony cameras and lenses
  • ADEX Sabah Ocean Partnership Summit 2023 Announces Ghost Net Removal Effort and International Mermaid Competition
  • Isotta Announces Housing for the Sony a7R Mark V
  • Facing the Holidays & Economic Uncertainty: How to Stay Ahead of Marketing for the Rest of the Year
    EditionsPhotoArt
    Proudly powered by WordPress.