6 Ways to Make Sure Your Twitch Overlay Doesn’t Suck

LVLUP Dojo
5 min readNov 30, 2016

--

Disclaimer: this is a basic checklist of what you want in a streaming overlay. Keep in mind, every stream is different and this is not a be-all end-all list of what to do, but a good way to get you started in the right direction.

Let’s run through a scenario. You’ve been watching live streams for a while now, you have a slew of streamers you consider your favorites, and you’re getting a little curious. Nothing wrong with a little curiosity, it’s completely normal. There’s nothing to be afraid of, so let’s go ahead and say it together. I want to start my own stream.

Nice.

Don’t overlook the basics. Once you’ve passed step one, which is signing up, you’re going to want to start thinking about your overlay, which is essentially a graphic layer that lays over your stream, hence the word “overlay.” This is where people put their sponsorship information, top donations and donators, as well as subscriber counts and other elements that add personality and identity to your channel.

1. PAY ATTENTION TO THE FOCUS

What’s the focus of your stream? Is it game play or entertainment? Prioritize your overlay so that the most important elements get the most exposure. If you’re streaming for entertainment, maybe you want to make your webcam bigger than someone who is streaming a game competitively. On the other hand, if you’re playing competitively, you’ll want to maximize the amount of game that people are seeing and minimize the “bells and whistles” on your overlay. Get a feel for the streamers that you like -the guys and girls that you really enjoy watching- in order to dissect their overlay and decide what you like about it. Don’t rip off popular streamers, that’s not the way to the top. Train yourself to notice when an overlay grabs your attention, and, more importantly, to take the time to figure out what exactly captured your attention. For example, let’s say you stumble across a stream and fall in love with the overlay. You see that the webcam feed is in the left corner of the screen. Instead of jumping to the conclusion that you need to put your webcam feed in the left corner to be successful, look at the ratios of the webcam feed vs. the gameplay. Did the streamer put his/her webcam feed in that position because it would cover information important to the gameplay? Make sure you don’t simply follow along with the other streamers based on face value or “Oh, this looks cool.”

2. RATIOS, RATIOS, RATIOS.

I hate universal rules, they never apply to all circumstances. That being said, NEVER sacrifice quality for size. Don’t overcrowd your stream. Bigger isn’t always better. Make sure that game feeds, webcams, images, and fonts all maintain proper ratios and don’t get stretched out just to fit the design of your overlay.

3. COLOR PALETTE

Imagine you’re in an art gallery. You step through the doors and instantly see a painting in the first room that is absolutely gorgeous. I don’t know what you’re into, let’s say it’s a painting of a gigantic, creamy, and perfectly moist, ice cream sandwich. The only problem is the neon pink frame around it is so damn bright that it almost hurts to look at. It’s like looking directly into the sun if your little sister went ham on the sun with her bedazzling kit. It could be the Monalisa of ice cream sandwich portraits and it wouldn’t even matter. Hot pink, neon yellow, stupidly named “electric blue”, and other bright colors can be considered hot. When designing your overlay you want to use cool colors for your main color, and hot colors for accent colors. Long story short, you don’t want your stream to hurt your viewers eyes when they’ve been watching for 10 hours straight.

4. K.I.S.S.

K.I.S.S. stands for, “Keep It Simple Stupid”. This should be used as a general rule of thumb when designing your overlay, especially when it comes to fonts. Don’t go font crazy. There are a lot of cool fonts out there on the interwebz, but that doesn’t mean you have to use them all! Pick one and stick with it throughout your overlay, and, if you want a little variety, change the thickness or bold/italicize specific words. You don’t want the font usage to distract from the gameplay.

5. SPONSORS, LOGOS, AND SOCIAL BUTTON PLACEMENT

We’re going to draw from the last point on this one and remember that we want to keep things as simple as possible. Simplicity equals velocity and we want your viewers to land on your channel, understand that they want to watch it, and make the decision to stay, as quickly as possible. Keep your logos and icons organized and grouped together. Again, you don’t want to distract your viewers from what they came for.

6. DON’T ASSUME

My uncle always used to say, “When you ASSUME, you make an ASS out of U and ME.” Don’t assume your viewers are idiots, you have plenty of text fields across your channel to let your viewers know who you are and what’s going on. Don’t put too much information on your overlay. Keep it clean, keep it simple.

Now that you’ve got the golden rules of designing your stream layout, check out these resources to help you build your first overlay.

DO IT YOURSELF

Photoshop

Photoshop is a little pricey, but if you already have it or want to pick it up, (it’s a very useful tool and will save you money in the long run when you need graphics and buttons made) it’s one of the best ways to make a completely personalized overlay..

Gimp

If you think you have the design chops, but don’t want to cough up the pesos for Photoshop, check out Gimp. It’s a free online alternative to Photoshop, although it doesn’t include all the fancy bells and whistles that Photoshop comes equipped with.

PAY SOMEONE ELSE

Fiverr

There are a bunch of gigs you can get done on Fiverr for a reasonable price (well.. around five bucks). Don’t expect a masterpiece, but if you’re looking for something quick that will get you going- this is the place.

TwitchOverlay

Firstly, we have absolutely no affiliation with these guys. That being said, they have some awesome template overlays that you can buy for $10–30 and some free ones you can download as well.

Hybrid

In the past year or so, a few really cool tools have surfaced on the interwebz to allow gamers like ourselves to design overlays in a template based cloud service like Strexm Just connect your twitch channel and pick a theme! They let you build your first overlay for free, and if you want to add some extra features they have a pretty reasonably priced marketplace that lets you make your overlay more customized. If you’re trying to figure out how to build a twitch overlay, and your first overlay at that, this is a fast way to start.

LVLUP Dojo Courses

Build aFollowing — Live Streaming — Tyler “Ninja” Blevins

The Daily Routine — Content Creation — FaZe Apex

Leadership in eSports — eSports/FPS — FaZe Clayster

Building a Team — eSports/FPS — OpTic Scump

Manipulating the Meta — eSports/FG — Justin Wong

Tournament Pressure — eSports/FG — TSM ZeRo

Build a Brand — Digital Marketing — Nicolas “Exitec” Cole

Visit the Dojo

--

--

LVLUP Dojo

Video courses and resources for competitive gamers, streamers and content creators. www.lvlupdojo.com