35% OFF SALE
00days
04hrs
59mins
01secs
steampunk design

Steampunk Package Analysis : How To Design Twitch Overlays

This blog post will attempt to breakdown some of our favorite elements from our Brass Empire streaming package. If you are wondering how to design Twitch overlays then you should gain some valuable insight from this post.

We will discuss the planning and process involved in taking a general theme or idea and turning it into a fully animated stream design.

Additionally we will go into detail on how we achieved certain effects that we think are pretty interesting.

Planning

Planning can be a bit of a pain especially when you have an idea and are eager to get started.

As tempting as it may be to dive straight into the design, planning may help save you a few headaches along the way.

When we sat down and started planning the Brass Empire package our first goal was to gather as many reference images as possible.

The easiest way to get reference images is though a google search. Try find a common theme throughout the images to identify exactly which elements think work well together.

Do the same with videos on YouTube.

In our case we identified three main elements that we wanted to use throughout the design to achieve the steampunk look

  • Mechanical gears and levers
  • Worn shiny metal
  • Heat waves

Once we had these three elements decided it was just a case of experimenting and trying different things to achieve the look we wanted.

In addition to having an idea of the elements we wanted, we also created a color palette from these images. We describe how to build a color palette here.

Working On The Design

We design all of our graphical elements in Photoshop and animated in After Effects.

Before even designing the actual overlay elements, we created an experimentation file. In here we created lots of different gears mechanisms and practiced creating different metallic structures.

Once we had built up a number of elements that’s when we dived into designing the actual overlay elements.

To help in showing you how to design Twitch overlays we have included some time lapse’s of how we designed and animated the stinger transition and alerts.

Transition Speed Art

Hopefully this speed art of the brass empire transition can give you an idea of some of the techniques used to create it.

Alerts Speed Art

This speed art of how we made the brass empire alerts will show you how be created the graphics and then animated them.

Mechanical Iris

The main moving part of the transition is a circular door opening mechanism. This was one of our favorite elements in the stream overlay design.

The correct name for such a mechanism is Mechanical Iris. After some research we were able to find some blue prints with all of the anchor points and elements scaled proportionately.

From this we could design the elements and then line each anchor point up in after effects.

One of the more tricky problems that needed to be solved to pull off this effect was related to how the blades overlapped one another. Each blade is both being overlapped and simultaneously overlapping another blade.

If you are familiar with after effects you will know you could pretty easily get this effect by positioning the element hierarchically. However once you come back around full circle you need the bottom blade to overlap the top blade.

This was pretty easily solved with masking, although quite time consuming.

Green Goo Container

This container can be found on the webcam overlay and also the alert box. The idea was to have some sort of steampunk styled cartridge filled with a green glowing goo.

First off the container was created with Photoshop. We made sure to keep the inside of the container and the face of the container separate so that when animating later the goo could in between.

The goo and glow was created and animated in after effects. To start off we added some solid’s and mask them to fit within the container. Then using cc bubbles from the effects panel, we could create a bubble simulation.

Finally we created another solid and masked it around the inner face-plate. Dropped on some glow effects and turned down the opacity.

Conclusion

At this point you will have a much better idea of our process from taking an idea into a fully fledged stream package.

These concepts will hopefully help show you how to design Twitch overlays.

We included some specific details on how we created some of our favorite elements of the design.

From a working mechanical iris in after effects to animated glowing goo.

Hopefully these can help you in creating your designs or spark some of your own ideas.