I actually met LimaZuluTango at the 2016 TwitchCon and he’s actually from Sweden (same as me). We didn’t however really catch up to do the LimaZuluTango Twitch branding until a few weeks back.
For the LimaZuluTango Twitch branding we wanted to create something that was rather minimal. At the same time we also wanted something that could convey the viking aesthetic that LimaZuluTango have been using for quite some time now. These two things are probably not the first things that are commonly mixed. The goal became to make all of the things combine into the LimaZuluTango Twitch branding you’ll see below. Another thing that had to be kept in mind was the light blue color that LimaZuluTango had already been using.
As you probably can understand there’s for sure things that LimaZuluTango already had in his Twitch branding that had to be incorporated into the new branding. This is not rare and it’s often one of the hardest things when the streamer tries to develop their visual brand on their own. In this case I could come in and take a look at it with fresh eyes and bring in a different perspective.
When putting together the LimaZuluTango Twitch branding I took my time to make it right from the start. This is of course an important step that is often overlooked. The reason why it’s such an important step is because it’s the best opportunity to talk to the client and find the direction for the project.
We actually ended up with 5 different moodboard. There’s nothing bad with that and it actually allows for a much clearer direction. At times it works from the first moodboard but that dsoent’ mean that it has to be like that every time.
Here you can see the final moodboard that was used to create the whole look of the LimaZuluTango Twitch branding.
Sketch and Avatar
For the avatar I used another set of images and reference images of LimaZuluTango. I actually ended up streaming at least 40% of the creation in different stages. I also ended up crafting both axes and a helmet that can be used freely. All of that came from the first rough sketch that I then turned into a illustration inside of Adobe Illustrator. I used a bunch of different techniques to create depth, shadows and textures to the LimaZuluTango avatar.
The axes and helmet all have the same colors to create a more streamlined look and at the same time keep the color scheme down. This aids if LimaZuluTango ever wants to do any prints from this. Since it’s all vector art that mean that in can scale up infinitely without losing quality.
For the first preview I created LimaZuluTango Twitch branding for his panels, starting scene, in-game overlay and alerts (I’ll speak about those alerts later).
As you can see I decided not to overuse the light blue color. Instead I used it as a highlight color. This allows it to stand out a lot more than if I would have create large areas with that color. You can also see that there’s much more of minimal approach but with the darker colors it allows it to be a lot more interesting and alive.
I opted to take good use of the avatar, since it has a lot of interesting details. Again this is where using a vector instead of something hand drawn comes into great use. The flexibility in this allowed me to use it a lot of different interesting ways.
You can also see that I added, the now standard, box art and game title pulled from the Twitch API automatically. It also has a built in countdown that starts when that scene is activated.
Here you can see the final version. I took all of the elements that was in the preview version and applied it across the rest. I did create a few new interesting looks with those thing in mind. Again I want to stretch that using this type of layout and language really does allow to make the LimaZuluTango Twitch branding extremely flexible.
You you can see some very striking imagery when you have the avatar as a large background. It allows for a lot more impact than a little bit of text or a larger avatar. Playing with color, contrast and size really is one of the keys to great design. This does translate very well to when you want to get a message across quickly and without any confusion. And that’s key when you viewers might only come by during a raid or to check it out. If you can catch them in that moment with your entire message it’s a lot likely that they’ll stay and come back next time you’re streaming.
Animated Twitch Alert
Finally I wanted to talk about the alerts that I created for this. The version that’s in OBS has a lot more frames than this and this is only the result of making into a gif. Now for the actual animated Twitch alert I used CSS and I used Muxy to host the alerts. Muxy allows for an easier way to enter both HTML and CSS.
What you see above is a combination of using an animate CSS library and regular standard HTML. There’s no tricks and there’s no 100 days of learning how to code. It’s simply putting two front-end languages to good use in the context of OBS and not the context of a functional website.
To repeat this is not a gif or a video file. This is all PNG files that are then animated using CSS transform and transitions. While it might look like it’s a mountain to climb to get something like this working I can promise you that it’s more of a design job than a coding job. This didn’t take me more than an hour to put together and animate.
If you liked this branding and want to get something similar for your Twitch branding then you should head over to my Twitch services site right now.