As a broadcaster that specializes in shooters, Darkness429 wanted us to do our best to make something that was simple, clean, and showed as much of the action as possible. These words are typically what I prefer for my own personal designs, so let’s take a look at what we made and talk about how it was done.

Overlay and Alerts

I had three core ideas when going into the design.

First, I wanted to overlay to be very simple to set up. I took advantage of reading the text files created by Muxy’s Ticker program. This made it easy for Darkness429 to set up, and also allowed me to control the text sizes and positioning directly in CSS.

Watch the Alerts and View Overlay

Second, I wanted the alerts to almost be a part of the overlay. Meaning, when you see the alerts in action they occupy the same space as their corresponding tags. The alerts were done completely with CSS animation. Again, Darkness429’s request was keeping the focus on his game play – so I felt a motion graphics type effect would be interesting enough as an alert, but not overpowering and distracting.

Third, I wanted to take advantage of “controlling” the overlay via JavaScript, since his overlay is basically an HTML page that is reading the text files. In a way, this was a test to see what was possible. It allowed me to launch an event when the a new sub text file was created, and actually change the overlay based on that event. In the end it was a simple way to achieve this effect without any back end programming.

Overlay Example

Screen Design

Creating an intro design was something that came about much later in the process. Due to time constraints we licensed a looping background image and made minor color corrections to it. The idea here was having darkness swirl around a dark version of the logo. Also, while we love countdown timers, we wanted to try something a bit different and we had the logo slowly fill in, similar to a loading bar.

Displayed at 600% Speed

CheerMotes

CheerMotes are still a bit new to myself, so I simply animated current emotes that Darkness429 had already been using. The original artwork was created by another artist, I only added animations to these designs.

 

New Posts

content display preferences twitch uai

How to Update Your Twitch Content Display Preferences

Twitch has just announced a major update to their streaming platform that…


0 Comments3 Minutes

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 Comments6 Minutes

ninja drake mainstream uai

Streamers VS Mainstream Media

The digital landscape is ever-evolving, and with it, the rise of streaming in…


0 Comments7 Minutes

See All Posts