I was anxious to get to work as soon as I found out that I’d be designing Twitch layouts and alerts for Rampage Jackson. Typically my style is a bit more “clean” and “simple”, but being challenged to create something a bit different was especially exciting when creating something for such an electric personality.
Creating Rampage Jackson’s Twitch Alerts
Sub Alert – A-Team Van
If you’re not familiar with Rampage Jackson, his resume includes holding the UFC Light Heavyweight Championship, being an avid gamer, and professional actor. He portrayed B.A. Baracus in the A-Team. So, creating an alert around the iconic A-Team van was a must.
There’s a lot going on in this seemingly simple alert, so let’s break it down.
First, I worked in Photoshop to extract the van and rebuild the tires so that they were in full circle form, which would allow me to spin them. In after effects I then created a sprite sheet of the tires with a bit of motion blur to give it a bit of realism. Originally I tried to simply spin the tires with CSS, but it ended up looking a bit choppy and produced some undesirable effects.
After all that was completed, I simply animated in the name and subscriber message via CSS animation with delay.
Donation Alert – Becoming the Big Bad Wolf
Sometimes when doing commission work your clients do all the heavy lifting for you, in terms of ideas. I was sent a picture of Rampage Jackson wearing this amazing wolf mask. Also, the intro song that is played during his intro scene (which we’ll talk about later) is titled “Big Bad Wolf”. With that information, there was no way that I wasn’t creating an alert in which Rampage morphs into the the big bad animal shown below.
A lot of the prep work for this was done in Photoshop. I set up individual layers for the trees, moon, rampage, and the mask. The alert is simply a combination of placing those images and then animating them with proper timing with CSS. I really recommend checking out Rampage’s stream and seeing this one in action. For some reason it’s one of my favorites that I’ve created to this day.
Intro and Intermission Scenes
The intro and intermission scenes have a similar design, with a couple of subtle differences. When working on some projects it’s important to budget your time properly, and in some cases, rework current designs into other areas. For this reason I decided to spend a lot of time on making one design that included some motion graphics, a glowing logo, and then animated areas to cycle in relevant information.
The idea for the design below is to have an area that can include either a video, with past broadcasts or an intro countdown, or a live feed. I included a section for Twitch chat on the right, a social media popup (which is usable in other scenes) in the bottom right, and then a section that will animate through Rampage Jackson’s schedule, recent merchandise, and latest announcements.
Again, I make use of HTML, CSS, and JS to make this all happen.
Twitch Panels and Overlay
The overlay simply follows the design ideas from the rest of the project. I worked a little bit in After-Effects, with the help of a few plug-ins, to create something that was electric and energetic. Also, it had to be green!
The panels were created to have a subtle reference to Rampage’s UFC days, with a bit of chain in the background. I’m personally a fan of keeping all but one or two panels at a smaller height, and then using a “mega-panel” to emphasize a certain panel.