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

These two alerts were not only some of my favorite ideas to work off of, but the subscriber notification was one of the most technically challenging to create. The reason being, is that it was done in just HTML, CSS, and JavaScript.

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.

Once all that was created I put everything into HTML form and used CSS to move the van across the screen. As the van is moving a the DIV, which has overflow set to hidden, that holds the tire tracks and smoke grows with the vans tires. When this was created I wasn’t sure how to work with WebM just yet, as I am now, so I had to actually recreate smoke via JavaScript. Luckily I found a library to work from that allowed me to do this.

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.

Rampge Jackson Twitch Scene Design

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.

Rampage Jackson Intro Scene

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.

rampage panels

New Posts

FlatPack Lite Free Overlay

Premium and Free Twitch Overlays Templates

Twitch overlay templates are what we do best. Here is a selection of freebies…


0 Comments7 Minutes

Free Twitch Overlays

Free Twitch Overlays, Alerts, and Widgets

Free twitch overlays, alerts, and stream widgets are something that we’ve been…


0 Comments9 Minutes

Free Stream Transitions - Matte

Unlock Creativity with the best Free Stream Transitions

In an era where transitions are the stitching that binds visual narratives,…


0 Comments3 Minutes

See All Posts