It’s 2016 and we’re seeing more and more YouTube personalities coming over to Twitch. CinnamonToastKen isn’t an exception and recently made his mark on the Twitch map and we’re seeing him everywhere rocking his Twitch t-shirt. I connected with CinnamonToastKen through itmeJP and from there we started talking about his future on both Twitch and YouTube (but mostly CinnamonToastKen Twitch branding).
Ken is pretty foreign to both Twitch and branding in general. That sort of took my by surprise that he hadn’t had any real branding or a update for several years. When it comes to YouTubers coming to Twitch there’s a lot of things that needs to be looked at and it’s something I’ve been looking at for the last few weeks and there will eventually be a article about it.
Me and Ken talked a bit over Skype to get it all right from the start. We both agreed that was needed was a better visual direction that matched up with that he had already built and so he can build it up even better. Ken had a few things that he wanted to keep as visual and that being the toast and a bear hat and the rest was up to interpretation. An aspect that I wanted to bring with that was a more clean and clear look than other with a similar stream vibe.
When you look at this moodboard I want you to pay attention to the color theme and the playfulness of the illustrations that I’ve decided to take inspiration from. Even as far down as the typeface combination of the clean typeface and the more wild expressive one (more on that later). There’s not that much to say here as we agreed pretty fast on that it had the look and feel that we both wanted to more forward with.
Using the key elements that Ken wanted to keep I start to sketch out a first draft. This first draft is always very rough and only shows a blueprint and not really the entire style. In my case since I do an illustration and not a drawing so the style don’t really come through that well in the sketch, in my opinion. I sketch with a Wacom tablet and a regular opacity sensitive brush on a large canvas.
After getting the sketch approved by Ken I moved from Photoshop over to Illustrator. By creating blocks and working from the background to the foreground. You can see in the outline preview that there’s a lot of layers that makes up even an illustration that might look easy on the surface. That’s sort of the first pitfall for most illustrators/designers in that they look at others work and don’t understand that there’s a lot more then what meets the eye.
I also created additional illustrations that aligned with names Ken uses for his subscribers and community. When you’re working with a community that’s growing and a community that you know is going to have a strong impression from the start, since they’re most likley Ken’s closest followers that are going to follow Ken into whatever he chooses to do.
The illustration for the donation and subscribers are pretty straight forward and is a play on BLT, in that it’s a sandwich but also stands or Beautiful Little Toasters. Here you can also see the re-usages of things from the avatar illustration. By taking the sunglasses from the bear hat and eyes and expression from the Ken part of the avatar we’re getting a familiar yet different look. The same goes for the BLT sub sandwich where I re-use the eyes once again, you can see that in the final imagery.
From the start I knew that I wanted to have somethings on the overlay dynamic. It makes it easier for the streamer to update and not have to do extra work. They fire up their overlay in OBS/Xsplit and it updates automatically with the Twitch API or a simple script that outputs the right result on screen. No need to open up Photoshop or run plugins for things to work. The out of the box solution is what we’re aiming for in the future.
At this stage everything is only in Photoshop so none of the dynamic things are actually implemented and it’s all static before I make it into HTML/CSS and Vidar takes the next step and creates the dashboard and injects the Twitch API.
Here you can also see that I’ve implemented the typeface from the moodboard and created the logo for CinnamonTostKen. It’s all hand drawn so it’s not a typeface so sadly you can’t find it online. I wanted to that so I easily could add the bite marks and crumbs under my own terms instead of having to trust that the typeface I picked would suit it.
Twitch dynamic overlay
In case you haven’t read the explanation for itmeJP’s latest break screen you probably should read that as well. For this one we wanted to keep that very same function but change up the look of it. We also wanted to add a countdown that wouldn’t need any additional plugin, software of screen capture to work.
The big difference here, from the itmeJP version, is the design of it. This isn’t as linear but still has a sleek, clean and clear design. I didn’t want it to get lost in the otherwise expressive illustration and logo so using a clean look was the best solution.
When I start a HTML/CSS project I use Initializr as my boilerplate to get started fast with the code, css etc. If find it easier to have that as base so I can jump in and re-create the Photoshop design quickly. When I have that setup I can easily add my divs and overlay the plus sign with another div. When I have all of the blocks ready it’s easy to add text, images and boxshadow to get it all looking the same. After that I hand it over to my developer, Vidar, and he can quickly start doing his thing.
For the countdown we’re using AM/PM setting. The first implementation had it in MM:SS format but since it’s America and streamers tend to set their streams after a AM/PM schedule we wanted to safeguard for the future and have the feature as a set it and forget it. Ken can easily set it through the dashboard by saving a json file to the same folder and he get’s the countdown.
Here’s the final version of CinnamonToastKen Twitch branding that you can can see in full action over on his Twitch channel. All the way from Twitch panels, cards and all the way to social media banners. I hope you enjoy what we created here and you can expect a lot more in the near future as I’m constantly talking with everything from e-sport houses, partnered streamers, companies and un-partnered streamers.
The goal here is to be able to keep bringing simple dynamic overlays to the masses. We don’t want it to be something that’s only for bigger streamers but something that smaller streamers can use as well. That way they can not only compete byt also have it a lot easier instead of hunting down several different plugins to do 1 thing.
Are you ready for real Twitch branding and dynamic overlays? I’ve work with both partnered and non-partnered Twitch streamers and done so for over 3 years. For me this is full time and I’m dedicated to my clients and my craft. I do both branding, visual branding and consulting 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.[mks_button size=”medium” title=”Twitch branding and consulting” style=”rounded” url=”http://twitch.livespace.se/” target=”_blank” bg_color=”#eeee22″ txt_color=”#0a0a0a” icon=”fa-arrow-right” icon_type=”fa”] [/mks_two_thirds] [mks_one_third][mks_icon icon=”fa-twitter” color=”#000000″ type=”fa”] @visiblespeech
Pew – pew – pew – SUPERHOT. I’ve got a new computer and I’ve started to play games again. I love puzzel-esque games like SUPERHOT and The Witness. Where I can play for maybe a few minutes and get back to working when done. Do you have any recommendations?
Also I’ve started doing yoga everyday. Used to do it twice a week but now I’m on day 13 of daily yoga. Feels good for the body and mind. Feeling ready to take on the world the rest of the year!
Have a great weekend my friend!