Branding Twitch

Thoughts on creating a Twitch overlay

overlay

This article will outline everything you need to create your first overlay for a regular Twitch channel. A few things you should keep in mind before starting all the way to saving it as a PNG file. It’s not going to be super technical but rather more a guide on what to think about. If you’ve read a any of my case studies you probably have already gotten a insight into my process. See this as an additional resource what goes on when I work with clients but also as a guide that you can use to create your own Twitch overlay.

  • Things to think about
  • Programs for creating overlays/logos
  • Looking at the problems and solving them
  • “Sketching”
  • Creating the Twitch overlay
  • Animated files
  • Saving with transparency
  • Placement in OBS/X-Split

Things to think about

If the very first thing you’re doing is looking at how good your Twitch overlay it’s going to look you’re going at it the wrong way. It’s not about looking good, since looking good is subjective however solving the problems isn’t. Still we need to decide the direction and therefor it goes as follows:

Content

You need to think about is what content are you producing and what’s your personality. They will steer both, style, color and logo selection. Sit either by yourself or even better with a friend to come up with these things.

Style

2000px-BYR_color_wheel.svgThe only real question you need to ask is; what feeling do I want to convey with your Twitch overlay? We’ll dig deeper into exactly how to figure out what that means later.

Colors

Pick a key color and then 1 to 3 complementary colors. The more colors you have the harder it will be to balance it. A quick tip is to use something like coolors.co for a fun and interactive way of picking a color scheme that you like for your Twitch overlay.

Logo

Avatar Twitch Branding

Avatar Twitch Branding

Logos can be a tricky subject. It will be your face outwards no matter if you pick a avatar, shape or text logo. Having a “face” will always be a more recognizable thing than anything else. It gives it a more personal touch, even if a text logo can do the same with different styles. A shape logo falls somewhere between the two, and can fall on both sides as well, if done the wrong way. Base it from the content and personality you want to put forth with your content and your Twitch overlay.

Typefaces

As with colors try to keep it at around 1 or 2 typefaces and choose typefaces with several font options (bold, black, heavy, thin, italic etc) instead.

Plugins

Write down what plugins you use that needs any graphical addition to fit. I can’t go over all of the different plugins that you can use since they all differ. Some use CSS/HTML, some many different images or only one.

Programs

There are different programs you can use to create you Twitch overlays. You don’t need to lock yourself down to Photoshop, the others might not be as developed but you’re not going to need all of the features in Photoshop anyway, and if you think you’re going to need all the functions your using it wrong.

Photoshop

It’s the most known and most used and what I use to create Twitch overlays. However that comes with a price and at this point it’s monthly price. This might not be an option for most people, it’s great value if you’re going to use more than Photoshop or if you’re a professional, but if not you’re wasting your money for services you’re not going to use. As I said you’re not even going to use all of the features in Photoshop to create a Twitch overlay.

Paint Shop Pro

This is a great program that actually can keep up with Photoshop in features. It’s fairly cheap and all you really need is the ability to use layers. It’s been a long time since I used Paint Shop Pro but it was the first photo editing program I used when I started many years I ago.

Photoshop Elements

Going to put this here, not because I endorse it but because it exists and can be a gateway into Photoshop… maybe, I transitioned from Paint Shop Pro to Photoshop with ease. It costs more than Paint Shop Pro and have less features but it has the Photoshop brand and you can open PSD files, that can be a plus if you’re working with a designer.

GIMP

GIMP for Twitch overlayI’m not a fan of GIMP at all. I think the UI is bad and you need to do a lot to make it feel right. It’s probably because I’m more  used to the other programs but it also has some general UX things that are bad. However if you get around these and train yourself a bit you will be able to work with it. I’ve used it a few times and I already understand what most of it does and what capabilities it have. While it in the long run don’t measure up to Photoshop or Paint Shop Pro it’s still a very capable program and that it’s free is not a bad thing.

Illustrator and Inkscape

When it comes to creating vector art these two are the go to programs. Illustrator is part of Adobes package so that will cost you a monthly fee and Inkscape is a very capable free choice. Why do you want vectors? Thy’re indefinitely re-sizable and never loose quality since they’re mathematical equations rather than pixels. If you’re making a avatar or logo these should be used exclusively. These two programs are made for this purpose and while you can use the Pen tool in Photoshop, the program don’t contain all of the tools that Illustrator or Inkscape has.

Looking at the problems

Figure out the problems you have and what you can do about them rather than focus on how things look. I always start with a moodboard, something you can skip if you want, but the most important part is the sketch. Knowing what you need and what problems you’re solving you can quickly start to figure out what you can do to solve them.

Identify the problems

This is a difficult step if you’re not know what you’re looking for. Take a look at the notes you took from “Things to think about” there you will see everything you’re going to need and also see all the problems you might have. The content will always be the key, it tells you what you need and what issues you might have. It can be simple things like that you current Twitch overlays don’t match the content you’re making or the personality you’re putting forward.

Solving problems

Since there are so many different ways of solving problems it would be impossible to give you a rundown of them all. What I can mention is the reason why it’s better to look at the problems over trying to look good it’s because most Twitch overlays, both the ones I’ve seen people use and the ones you can buy are creating more problems then they’re solving.

Don’t be intrusive with your Twitch overlays. Colors, text and size should all work together to create the optimal viewing experience for your viewers. It’s not about trying to cram in as much information as possible but rather present it in the best way. If the best way is to have big buttons, sound effects and big text then that’s what you should go with of course, but that’s something you should identify while writing down the notes about your content.

Don’t cover things up that shouldn’t be covered up, your Twitch overlay needs to be flexible. It’s not a one size fit all, and that’s why you shouldn’t buy cheap overlays that are made to be a one size it them all. It won’t work with your setup, and even if it does work with one game it probably won’t work with the next. Creating your own or having a template that is extremely flexible is the optimal solution. If you’re creating your own or creating for someone else keep in mind how you easily can move things around.

Different plugins have different graphic interfaces, some use only image and some uses CSS/HTML/JavaScript. If you want to integrate, and you should, them into your Twitch overlay in someway you’ll need to do the research on them. That might mean you will have to do some compromises with your Twitch overlay to make it all work together, but it’s better to solve the problems then having a bad experience for your viewers.

The Sketch

photoshopThis don’t mean you have to do it by hand. I tend to use vector blocks on a 1080p base. It’s a quick way to test out what works and what doesn’t as long as you know what each color means and have a clear goal in the back of your head. Keep this as simple as possible there’s no need for adding a bunch of style and effects. You want to be able to quickly change things while you’re testing things out.

Layout/Twitch overlay

Now you can take your sketch, and if you used vector blocks you can start to apply style on top of them. You can use them as base or re-create them, what ever workflow works the best for you. Personally I create a new document and start duplicating things in one by one and working witch each new element I add.

As I’ve said making things look good is secondary at first. Get everything in place before you start to really work on each detail. Move from thing to thing as to not get stuck on details, it even happens to me and spending too much time on one thing will only delay things. It will look bad before it starts to look good, as with a stream you need to be okay with that until you get further along with the design.

When it comes to making things look good there’s really no guideline since it’s very subjective. However remember that you have your moodboard from earlier, use that as a inspiration source and if you need more there’s a ton of design inspiration sites out there. The best way is to look at your moodboard and then actually sleep on it for a bit, wait a day or two and let what you’ve looked at sink in before you start. Let things happen naturally and don’t be afraid to go out on a limb.

The placement of things is one of those things that really comes down to the games you play. Be careful not to cover up things are relevant to the gameplay. The ability to change the position of things or having different Twitch overlays can really save your stream. I will argue that having a simpler Twitch overlay that you can easily move around or change depending on game is a better option for someone that switches between games often. While having a more static is great for example a show or if you’re only playing a handful of games.

Lastly remember that not everyone watches on a big screen or in source. It’s up to you if you want to proof for this, and until we can see the exact numbers for each stream it’s more or less a guessing game, if you want to play that.

Animated files

There are more than one way to animate something for X-Split and OBS. The first one, and probably most known, is a animated .gif. They lack good quality but works for smaller things. This works the best for smaller things with only a small set of colors. It has the benefit that they can be transparent, if you’re getting a weird halo around your saved .gif’s add a matte behind it (in the “save for web” tab in Photoshop).

You can also use video files to have things animate, like background, intro screen, break screen etc. This works the best for bigger graphics and not really for smaller things, but it is possible with the right idea behind it. You can key out a color, but the result might vary depending on the source. Use a program like Adobe After Effects

X-Split recently introduced the function of using a .mov (other codecs are available) alpha channel converted to webM alpha channel for transitions. It’s something I’ve already tested out and there will be coming things both in shows/channels I’ve worked with but also a article here. Sadly OBS don’t (as this article is written) have any support for alpha channel video file transitions.

Another great way to use animations is with CSS/HTML and JavaScript. There’s a lot you can do with these functions and they’re only growing and isn’t really limited by the streaming programs but rather by the coding language itself. There are a few limitations that won’t let you do certain things but it’s things that you probably won’t use. It’s also the best way to create something custom that you easily, if you know the language, can change.

Saving and saving with transparency

Talked a bit about alpha channel in the previous section, that is the same as transparency only a different name. Both .PNG and .gif files have the ability to maintain their alpha channel when you save them with a alpha. This is the best way to save out Twitch overlays. While .gif is limited in colors, and are best suited for animated files .png file don’t have that limit on colors but can’t save animations.

Placement in OBS/X-Split

The way I like to do it is to have everything in one PSD file in Photoshop and then copy each element into a new document with the same dimensions. When that copies over to the new document it will maintain the dimensions and add the alpha around the copied element. Then I save that file with those dimensions, with all of the alpha space around it without cropping it down, this way it’s possible to drop them into place without having to try to place them by hand.

There really aren’t any rules here, what works for one game might not work for the next and that’s why I’m once again, and as a last statement repeat, let the content dictate the Twitch overlays/layouts and let your personality dictate style/colors.

If you have any questions regarding this article, have something you want me to write about or if you have questions in general you can find me on Twitter @visiblespeech. If you have business inquires you can e-mail me at daniel@livespace.se or use the contact from to start a conversation.

About the author

Daniel

Daniel

Do you need Twitch branding done the right way? I've work with both partnered and non-partnered Twitch streamers and done so for over 4 years. For me this is full time and I'm dedicated to my clients and my craft. I do both branding, visual branding and brainstorming based on understanding you, your community and your channel. If that sounds interesting to you then you should check out my Twitch services/portfolio/client list and contact me right away. twitch.livespace.se

Leave a Comment

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close