How to Set Up a Twitch Overlay - LevelSkip - Video Games
Updated date:

How to Set Up a Twitch Overlay

Louis Vigil is a live stream producer based out of Los Angeles. He has produced broadcasts for a variety of gaming and esports events.

One of the best ways to make your Twitch stream stand out is to add an overlay on top of you gameplay. This article will discuss how to make twitch overlay, various elements you can add and where you can find free twitch overlays.

Making your first twitch overlay depends on what elements you wish to add. Most overlays include a frame from your webcam. You can create a simple frame for your webcam in XSplit Broadcaster, which is free streaming software.

After you add a webcam, right click on it and go to devices.

After you add a webcam, right click on it and go to devices.

Step 1: Add Your Webcam

  • In XSplit Broadcaster, go to source, go to devices, go to video and select your webcam.
  • Right click on your webcam in the source list and click on the effects tab. Here you can select your custom webcam frame shape along with pick the colors and size of the frame.
how-to-setup-a-twitch-overlay

You can create more intricate webcam overlays using image or video files.

  • To add these to XSplit Broadcaster, simple drag and drop them into XSplit from your file browser.
  • Make sure you have set these files on a higher layer than your webcam in XSplit Broadcaster by using the source list. You can find out more about how media files can be used in XSplit Broadcaster by watching the video below.
how-to-setup-a-twitch-overlay

Step 2: Add Alerts as a Webpage URL Source

The next important part of a Twitch overlay is alerts for new followers and subscribers. Viewer interaction is one of the most important aspects of Twitch and it is important to thank your viewers for following or subscribing. These alerts come from various web based services such as Player.me.

  • To add these alerts to XSplit Broadcaster, you will need to get the distinct URL each alert service gives you.
  • Once you have this URL, go to add sources and click on webpage.
  • Paste the URL in the text area and click ok.

Most of the time, the source will automatically adjust and place itself on the scene, but you can also right click on the source to adjust the position or manually resize the websource.

how-to-setup-a-twitch-overlay

Step 3: Set Alerts Audio to ‘Stream Only’

If you have set up a Twitch alert with a noise, you may not want to hear the noise but have it only play on the stream.

  • To configure this audio in XSplit Broadcaster, right click on the websource and make sure you are on the HTML tab.
  • In the audio output section select stream only audio.

Don’t feel limited to just adding alerts for followers and subscribers. Streamers over the years have gotten creative in ways to promote following or subscribing to their channels. Some of the commonly seen Twitch overlays for followers and subscribers are goal counters, display recent followers and trains that start a countdown after every new subscriber.

how-to-setup-a-twitch-overlay

Find Free Overlays on Player.me

If you are looking for free twitch overlays or twitch overlay templates, there are many sites that offer templates that include overlays for webcams, alerts, start and end screens. One such site is Player.me. It offers hundreds of overlay templates that are designed for some of the most popular games to stream. Player.me also offers a overlay editor so you can customize specific aspects of your overlay such as the webcam frame placement and what alerts you wish to display.

how-to-setup-a-twitch-overlay

How to Improve Performance of Web-Based Overlays

Most of these sites that offer templates are web-based, so they can be added as web sources in XSplit Broadcaster.

XSplit Broadcaster has a few features that will improve the performance of web-based overlays.

  • First go to tools, then settings and click on the advanced tab.
  • In this menu enable browser source special optimization. This will allow for smoother animation on Twitch overlays that have animation.
  • Now when you add a web based source, right click on the source and in the display section enable 60fps.
how-to-setup-a-twitch-overlay

Moving Overlays From One PC to Another

If you ever need to change PCs, XSplit Broadcaster has a useful feature from transferring your Twitch overlays.

  • In the main window, open the extensions menu and click on the presentation packager extension.
  • The presentation packager extension will save all you sources including the media files into a zip file along with a presentation file.
  • You can take this zip file to another PC and open the presentation file, which will automatically setup all your scenes and Twitch overlays in XSplit Broadcaster.
how-to-setup-a-twitch-overlay

Other Things to Keep in Mind

If you wish to create or commission your own Twitch overlays, there are some simple guidelines to follow.

  • You will want to create graphics for your overlay that fit a 16:9 aspect ratio.
  • When creating motion graphics, you want to make sure to keep file sizes small so that there isn’t any delay when switching scenes.
  • If you need to add a large file, you will want to set XSplit Broadcaster to keep the file in memory. Right click on the large media file and enable keep source in memory.
  • Also make sure to add transparency to any frames you make for your webcam overlays so that your camera isn’t covered.
  • When you are customizing your overlay, remember that your overlay isn’t supposed to distract from the content, which is your gameplay and reactions.
  • Some common mistakes are having too many elements on the twitch overlay that cover up the gameplay or putting in loud distracting sounds that will annoy the audience and viewer.
  • Always keep in mind that people are there to watch your gameplay and experience your personality, so don’t add elements that take away from that.
  • Another good practice is to create different Twitch overlays for different games.

That about covers all it takes to setup or make a twitch overlay and how you find free twitch overlays. If you have any questions make sure to reach out to @XSplit on social media or join their discord.