Hey! Here’s yet another case study on Twitch branding. This time it’s for the ManBrave Twitch branding. In this case study I’ll go over the creation from start to finish. With animated Twitch alerts, utilizing textures and using branding colors to their fullest extent.
I knew that I wanted strong colors and I knew that ManBrave wanted to utilize the spartan helmet as a symbol for both his channel and what it stands for. While there’s a lot of those things out there I put it all through my “design filter”. From that I started to boil it down and get a direction for the ManBrave Twitch branding.
As you can see in the moodboard there’s a both a lot of modern styles but also some that has more of a natural texture to them. This is something that came up during the creating of the moodboard and wasn’t set beforehand. That’s why I like the moodboard process so much. You go in with one thing in mind, but you do keep an open mind, and let the images that you find speak to you.
Showed it to ManBrave and we agreed that this was the right direction.
Logo & Sketch
I actually started to sketch by hand while waiting for a game to start in PUBG. This is actually I used to do it in the past. That’s until I got a drawing tablet and from that point on I’ve mostly sketched digitally. However sketching by hand, at least for me, really does allow to get ideas down quickly when you don’t really have access to your drawing tablet. It also allows me to do it on the fly without having to fire up Photoshop and pull out the drawing tablet.
I did however transfer the idea using my drawing tablet once I had that pulled out. I knew that I wanted to get a few more modifications to it before sending it to ManBrave.
As you can see in the final version here you can see that there was a few modifications done after the sketch as well. When you go from sketch to final version there’s always things that show up that you didn’t account for.
For instance having the darker helmet looked good in the sketch but look a bit off when I had it out in Illustrator. I also noticed that the height of it looked odd so i added more height and created a more pointed finish to it.
Of course with that change I lost the M (you can see it right under the nose guard) so I added in the black behind the eyes and a think outline to bring it together.
Once that the logo for the ManBrave Twitch branding was done I moved on to creating a few of the assets. In this case I did starting card, panels and the alerts. All to give ManBrave good insight into what he could expect moving forward.
As you can see there’s a lot of contrast between the colors. This makes what we want to stand out actually stand out. Further down I’ll also explain how the different colors are selected and how they can play off from each other.
You can also see that I’ve written out how the alerts will animate once I get them ready for the ManBrave Twitch branding. This is important since I haven’t done any actually animation for it yet but still want to show what I’m thinking. Why do I think about it that early? Since it can actually effect how it plays out in the rest of the branding. I’ll dig deeper into the animations further down.
Here you have the entire ManBrave Twitch branding. As you can see there’s a bit more variation than you might first expect. It all comes down to understanding the context of each asset instead of only thinking “what would look cool”. What you really should be thinking is “what would work best in this context”.
You can also see that there’s a slight change in the alerts. That’s one of the things that me and ManBrave talked about. In that we wanted to bring in a bit more variation to them and really get them each of them to standout on their own.
Finally I’m using textures combined with the more modern look. This is something yet again that play with the contrast of things. In most cases here the textures are very subtle and not really in your face, and that yet again, speaks to the contrast. Subtle textures combined with the more expressive in your face bold colors.
Animated Twitch Alerts
Here you have the actually animated version of the alert. As you can see I’m utilizing things like CSS filters and a lot of key frames to get the animations looking more free.
All of the effects here are done with CSS and regular images. There’s no video involved whatsoever. This allows for easy changes and future updates a lot easier. There’s no need to render out things or figure out the text delay. All you need to do is change a few lines of code and all of a sudden you have a brand new alert.
For these ones I’m using Muxy to actually get them into the streaming software. It also allows for a lot of variations (all of the ones that you saw in the final version). That’s how we can get the numbers of the month to show up on the helmets. It’s with HTML/CSS that we then can effect them without having to use video files.
Finally I do want to talk about the branding colors. It’s an important step that is often overlooked. The colors that we pick for our branding can speak volumes. Not only in meaning but also in combination and in message.
For the ManBrave Twitch branding the colors are used to create a boldness. To achieve this a lot of the colors and combinations are contrasting each other. While that might not sound impressive that small change creates something that’s a lot more striking than a monotone setup.
On top of that monotone color combinations aren’t the only thing that don’t speak boldness it’s also within all of the different color ranges. For instance pastel colors speaks a very different language compared to neon colors.
For the ManBrave Twitch branding it was also important to use the combinations to create interesting looks when combined with the context. I think the best example is how the offline image on the Twitch pages looks. Instead of being a 1:1 reflection of everything else it has a slightly different look. Why? Simply put if the offline image and the Twitch banner looked the same it would lose all of it’s contrast. Instead By simply on one removing a color and keeping it on the other it creates something a lot more striking.
The offline card in itself has a different look than the other cards. We’re once again using the same color setup but using it differently. It’s not going off-brand with the colors but rather using the strength of the colors. This way we can create something that’s unique in interesting depending on context.
I hope you had a good weekend and thank you for reading this article. Every visit to this site means a lot to me, and no I don’t run ads here so that’s not way. I just like that people are actually showing up every week.
If you want your own Twitch branding, you should check out my Twitch branding services and get in touch as soon as possible.