How To Make a Twitch Overlay – Streaming Your Tournament

by Fabio

This is the second part of our ongoing guide series on esports tournament broadcasting, where we explain – from the ground up – how to bring an esports competition to life visually. After we have covered how to use capture cards and record your game’s video output, we’re now going to focus on making your broadcast visually appealing. If you take a look at how the likes of ESL and DreamHack present their events online, they never just show the raw video game screen. Instead, they show graphics from their sponsors, edit in overlays with useful statistics, and, most importantly, build their own logos into the scene. If you want to come across as more than a mere amateur, you will have to create and display your own overlays. So here’s our tutorial on how to make a Twitch overlay!

What Streaming Overlays Do I Need?

First off, you’ll need a logo design. If you’re not particularly talented when it comes to drawing and designing, you should delegate this task. You can find lots of help online. But most importantly there are sites that connect you to artists for a very low price. Services such as Fiverr will enable you to create a great looking logo design for (probably) less than $30. 

Now that you’re set with your logo, you might want to pay attention to how you present your sponsors. Taking a cue from popular tournament organizers, you can use a corner of your screen and block it with some sort of square. There, you can either display all the sponsors at once or have them fade in and out. 

Screenshot from ESL’s overlay for ESL One: Road to Rio

Since you’re likely going to broadcast more than one match, you will need a break screen. Here it would make sense to create an animation. However, a simple static image will suffice at the beginning. A break screen should normally include the outcome of the previous match and the match that is up next. You can, for instance, block off a part of the screen with this information and then run a video next to it. This way you’ll have something that your viewers can watch and have all important information visible as well.

Lastly, you’re probably not going to be streaming from a huge studio. Instead, you’ll be sitting in a room and commentating matches with a headset. That’s not bad for a start! To splice it up, you might want to consider picking up a webcam. Working that signal into the broadcast is a cakewalk in most streaming programs. Now you just need to design an overlay in which to display the webcam feed. Basically, there needs to be a square hole to stick your animated face into. You can splice it up by displaying your name under it, or the score of the match that you’re discussing at that moment. This is also a great opportunity to show your sponsors once again.

Screenshot from GRID Esports’ overlay for the #HomeSweetHome Cup

What Programs Can I Use to Create a Streaming Overlay?

There are possibly hundreds of different photo editing applications on the internet, but for learning how to make a Twitch overlay, you’re best advised to work with programs like Adobe Photoshop or GIMP. GIMP is free to use, so if you’re just starting off, this is presumably your best option.

Whatever software you choose, you need to make sure that it supports transparent .png files! These overlays lie on top of your game’s video output. It looks awful if they are just solid blocks. With semi-transparent forms, you can separate the content of your overlays enough from the game without it looking subpar. 

Before you start creating your own free streaming overlay, you need to take a screenshot of the game that you’re going to broadcast. Import it into your editing program, since you will need to know where and where not to put parts of your overlay. For instance, the upper left corner in CSGO and the lower-left corner in Dota 2 should be off-limits, because of the mini-maps. With this reference image, you can now carefully plan around the existing game overlay. Be careful to work in the resolution that you’re going to stream with (or better). Otherwise, the overlay will appear pixelated as it has to be scaled up. 

Of course there isn’t one technique that you can apply to make your overlays look nice. Generally, you should try to work with a limited color palette. Nowadays, design is usually very minimalist and websites or apps feature only two or three distinct colors in their layout. So if you’re freshly learning how to make a Twitch overlay, then this is a great time to decide on some sort of corporate design. You should lay out ground rules, which includes colors and fonts that you want to use in your graphics.

Adding the Overlay to Your Stream

Now that you have your own free YouTube, Mixer or Twitch overlays ready, you will have to import them into your streaming program of choice. This process is actually the easiest part of how to make Twitch overlays. We’ll show how to do it in Open Broadcaster Software (OBS).

Read this: Organizing an Esports Tournament, a Helpful Guide

After creating a scene, you can populate it with all sorts of sources. Here, you can simply add an image source, which will display on top of your stream. You can even move and resize it. But since we designed it with the game in mind already, you shouldn’t need to do that.

Now, everything is very much set. As you can see now, learning how to make a Twitch Overlay is really not that challenging. Of course you will need to work on your designing skills if you want to really create awesome overlays and maybe even animations. However, you should have gained a basic understanding now. 

You may also like