Kali Muscle Stream Design

KaliMuscle Stream Design and Branding

One of my most recent projects was to work with the YouTuber and new streamer, KaliMuscle. For this project we created a bit more than the usual streaming package, and had a focus on a few over the top notifications, as well as an animated overlay.

Starting with the Logo

From the start I had a strong idea of how to make this logo.  KaliMuscle plays games like Call of Duty, Mortal Kombat, and UFC on stream – making me want to design something a little more fierce than usual.  We stuck with a Mortal Kombat Theme throughout most of the branding.

Kali-No-Flares

Animated Alerts

Hands down, my favorite part of this project was making these notifications.  I’ve personally been leaning towards simple overlays, with a heavy emphasis on notifications, and these are no exception. The video below shows the subscriber and donation notifications that were set up with Muxy.io.

Animated Subscriber Alert

Going off of a Mortal Kombat theme the first thing we created was an animated subscriber notification.  This was created with a mix of Adobe Photoshop and Premiere, as well as HTML, CSS, and JavaScript. Basically, the notification is a sum of multiple images and a video (fire background) – I used CSS to control most of the animation, and a bit of JavaScript for sound, and timings.

Animated Donation Alert

The video also shows the donation notification.  This was accomplished through sprite sheet manipulation, using all CSS. While this could’ve been achieved with something like an animated GIF, I felt that sprite sheets would work a bit better here. GIFs with alpha can sometimes get out of control on their file size, and in this case I wanted to keep the size as small as possible.

Animated Overlay

A small ‘innovation’ I’ve been working on is animated overlays.  This overlay actually links directly to the text files from the Muxy ticker.  Meaning it can actually manipulate the names of the latest subscriber, tips, and more.  It even includes a social media popup, that slides in as the label areas change.  It was tempting to do some more noticeable effects , but in the end I wanted to keep this clean and simple.

Stream Page Design

Putting everything together was the easy part of this project. As you can tell we wanted an orange color to be used throughout most of the designs, so with that in mind I designed the panels.  I like to have one or two bigger panels that emphasizes important aspects of the channel.

StreamPage

The offline image was easy to create with such a strong direction from everything else.  Here’s a bigger look at that image.
offlineimage

Question and Answer Design

Kali does a lot of Q&A’s on stream, so we went ahead and designed a page that showed information about his schedule and stream on the left, and left a large area for his webcam on the right.
qna

Emotes

Since Kali Muscle is already a massive personality online, we wanted to make sure to make some emotes with him included. His sub badge is a pixel dumbbell and the emotes were made to combo with each other or even other Twitch and subscriber emotes.

Kali Emotes