One of the most remarkable elements of a streamer’s content is the overlay used with their game and camera. It’s a visual element that allows you to bring personality and structure to the look of your feed and can lead to additional flow interaction when done right.
However, while the overlays available through Streamlabs OBS and other preset packs available online are often of good quality, they will not be unique. As the pool of free overlays is shared by many other streamers, you may decide you want something more tailored for your stream or add some personal touches.
Creating your own and customizing it however you want isn’t as difficult as you might think. There are tools available that will let you create custom stuff for things like Subscribers, Bits, and Subs, and put them together in an overlay for your streaming software. One tool you can use to create your own Twitch overlay is Canva.
Canva is a free, browser-based design program that lets you use a large number of shapes and elements on a canvas that you can then export to your computer to insert into your workflow.
You can use apps like Paint and GIMP as alternatives, but they usually don’t offer as many designer-focused features and elements as Canva. This guide will focus on Canva as a resource for your designs.
Although the ability to export with a transparent background requires their paid service, you can give the background a color that you don’t intend to use and just chroma key the background. shot out of frame. This means that you can have your design streaming in front of your gameplay.
Create a new overlay
To create an overlay that will work with your setup, head to the Cavna website and create an account. After that, on the homepage, navigate to Create Design at the top right. Here you will have a choice of a template to use, but to get the size you need choose Custom Size at the bottom.
For that, you’ll want to use 1920 by 1080 pixels, and then click the Create New Design button. As long as the canvas has the same aspect ratio as your stream, which is usually a standard 16: 9 widescreen, you can import it into your streaming software and scale it down to one of the standard resolutions in that range. ‘aspect. Typically your output would be 1080p or 720p.
Once there, you’ll be taken to a blank canvas, with tabs on the left side that will allow you to add and remove items. This is where you can start shaping the look of your overlay.
Use the Elements tab to select shapes and objects to place on the canvas, as well as any text you feel is appropriate. You can also import images from your computer if you have a ready-made element, such as a logo, and have it as a permanent element on your overlays.
While Canva includes a premium service to offer expansive graphics for you to use if you wish, shapes and text elements are plentiful in the free tier for you to create something personal and good quality.
You can go as easy or as simple as you want, using the form elements to place the areas you want to contain alerts, such as your latest followers or top donors. By combining different shape elements together, you can create unique looking visual graphics for your overlay.
In a game scene overlay, you can create your own visuals to sit in front of your capture. You don’t have to follow the same convention as most of the predefined overlays, where there are areas at the top of the screen with graphics to place your alerts.
It’s often put there to provide maximum exposure for everyone in your community who interacts with the feed, but it’s up to you to decide how far you want to deviate from standard design conventions. With time and effort, Canva is flexible enough to let you create a great design.
During the process of creating your overlay, you can change the color of the background layer to contrast the color of your elements. This will help you see if they stand out against the background of your feed. Black or white are neutral colors, good to use against brighter colors to test their appearance during construction.
As you add more layers, your overlay should start to take shape. For things like your face camera, you don’t need to be entirely precise about your camera size. OBS Studio and OBS Streamlabs will let you crop sources on either side, so you don’t need to be precise with sizing. This can be changed in your streaming software.
Just place the elements where you want them to be and offer labels in the instance you want an area to contain something specific. This includes if you have an idea of where you want to place recent alerts, such as latest subscribers, followers, or donations.
Once you are happy with how your overlay looks and want to see how it looks in your streaming software, first go to the background tab and change the background color- plan in a different color from all other elements.
Green is the most common color used in chroma-keying, where you remove it from a piece of backing to allow background transparency. This will be what will allow you to place it on your gameplay.
You can also experiment with Canva’s animation settings to create an interesting effect when you change scenes. These can be added to OBS and used to animate your overlay when you switch to them, the only change being that it would use a media source rather than an image. Adding this to your feed will be explained below.
Adding your design to your feed
Once completed, at the top of your browser will be the option to download the image. Click on it and you will be given the option to choose the type of file to use. If you have an overlay with no animated elements included, it is recommended that you export it as a PNG file for the best quality. A JPEG will also work if you need to conserve space on your computer.
With an overlay using one of the available animations, you will need to download the file as MP4 from the list.
After downloading it, move the file to a location that you can find easily. Then open up your streaming software and head to the scene where you want to use your newly created overlay. In your sources, add an image source and make it your PNG of your overlay. It will be at the top of your source list, but you can move it if needed in your streaming software, above your game source and your camera if you are using one.
The process of removing the green background is similar in the options of the stream software. Once the image file is added to your scene, right click on it in your source list and head to Filters.
In OBS Studio, under the Effects Filters box, click the plus icon, then add a “Chroma Key” filter.
For Streamlabs OBS, under Visual Presents, click the plus icon and add a “Chroma Key” filter at the bottom of the list.
You will be asked to choose a color to filter out of the image. Choose the color that you set your image background to and you will find that it is now transparent in front of your game source.
For Twitch studio, on the scene you want to add your overlay to, from the main screen, click Edit scene at the bottom, and then in the Layers section on the left, tap the plus icon.
Here you want to add a picture and then tap Add. A new layer will be added to your Layers section, but to import your overlay into that layer, to the right under “Choose Image”, click “Browse”.
You will then see a small library of some of Twitch’s emotes and images. To add your overlay to this, tap on the Browser option, which will take you through your computer’s directory. Find your picture and open it, then with it highlighted in media library, press Select.
Resize the image to fit your screen. Then use the plus symbol under Chroma Key on the right side of the interface, and it will automatically apply the filter and should remove the background. It will be green by default, but you can change it using Edit Color Key and using either automatic color detection, or by tapping the color swatch and choosing the color to remove.
If you have an animated overlay, you will need to add a media source, rather than an image source. Apply the chroma key as you would an image file, but to avoid looping animations, in OBS Studio and OBS Streamlabs, right-click on the source and go to Properties.
Make sure that the “Loop” and “Show nothing at end of playback” options are turned off and “Restart playback when source becomes active” is turned on. This will ensure that your overlay will remain on screen after the animation is complete.
On Twitch Studio, while you’ve selected the media layer, you just need to turn off the ‘Loop’ option, and it will keep the overlay at the end of the animation.
From there, your overlay is almost ready to go. Simply place your camera source in the right place and move your browser items, such as your chat box and alerts, to the right place.
You can create as many overlays as you want for each of your screens, playing around with opacity, background images, and shape elements to suit your style. You can also use the same style if you want to stream to YouTube and Facebook while still using OBS Studio or Streamlabs OBS.
Once all are imported, you’ll be ready with your new custom overlays to show off to the world.