Sodapoppin's Overlay and Alert Design

I was given the opportunity to work with Sodapoppin, one of of the biggest streamers on Twitch. This all came about because a fan of the site tagged me in a Twitter post (thanks K!TTeN).  I enlisted the help of Froyd, who worked on the initial design for the overlay and the motion graphics. We created in-game overlays, a custom intro/intermission screen, and some of my favorite alerts yet. Let's take a look at how it all came together.Read more


Stonefire Animated Overlay

Stone Fire Complete Stream Package

Stone fire is now available as both an animated paid version, as well as a static free version. It includes multiple layouts designed for casual and variety streamers. We also created layouts specifically for broadcasters that play League of Legends and Dota 2.

Read more


Rampage Jackson Twitch Design

Rampage Jackson's Twitch Stream Design

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.

Read more


Social Media Popup Animation

Social Media Animation - Free Resource

An update version of our popular Social Media Popup is now available, with our new social media animation! This time we've included new features that didn't make the first version - and that make it easier to customize and use in your stream. This include the ability to add your own custom icons, change the color of the popup, assign different pause times, as well as choose different Google Webfonts.

Read more


scene-maker-thumb

Free Scene Maker - Make Your Own Intro, Brb, and Outro Scenes

The free scene maker is now available! It’s been awhile since we’ve released a free resource, but I hope this new free resource makes it worth the wait. With our scene maker, you can create and customize your own intro, be right back (AFK), and outro scenes quickly, easily, and of course for free. You can even make scenes that feature your game play in the background while you wait for in-game queues.

Get the Scene Maker!

Read more


Darkness429 Stream Design

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.

Read more


Call of Duty: Infinite Warfare Free Overlay

Our next free overlay is now live! This time, it’s free Call of Duty: Infinite Warfare overlay - which was designed to work for other first person shooters as well! In this post, we'll also take a look at the animated version - which is available in the Nerd or Die shop.

Read more


Make Free Twitch Panels

Free Overwatch Twitch Panels

We're very excited to bring you our newest free resource - Overwatch Twitch Panels! With this free resource you can customize and save your own unique panels, using only a web browser. We designed this with our Animated Overwatch Overlay and custom notifications in mind, so if you’re using those, it should fit in nicely with your stream design.


Having trouble viewing this app? Click Here.





How to Customize Your Overwatch Twitch Panels

  1. You can watch the video at the top of this post or read the instructions below to design and customize your panels.
  2. When finished, use the filename input and download button to save your panel to your computer.
  3. Enjoy! You can now upload the saves file to your Twitch page.

Example Panel Designs

Options Available for the Overwatch Twitch Panels

  • Icon color - Click inside the color selector box to choose the color of the icons. Palette colors are available on the left side. The right side has options for color slider boxes to get a more unique color. You can also use the input box below to enter in an exact color hex code if you’d like. For example, #FFFFFF will yield white.
  • Text color - This works just like the icon color option, but controls the color of the text on the panel. It is recommended to choose a color that has contrast with the background. This will make it easier to read.
  • Background color - A drop down option that allows you to select different background panel designs. More color options maybe be added in the future. Let us know what colors you’d like to see in the comments below.
  • Badge color - A drop down option that allows you to choose a color for the area surrounding the icon. Again, there is only a few options here - so make sure to check back for any updates to this if the color you’d like to see isn’t added just yet.
  • Panel text - A text input box allows you to set what the text says. When designing panels it is usually recommended to startwith the longest word, in order to keep text sizes uniform.
  • Icon dropdown - I can simply select the Twitter, and it will swap in the Twitter icon. You’ll probably notice a list of icons - but please let me know if you think we left any out that are important to streamers. I made sure to put in a “blank” icon - for all of you that use Photoshop, Gimp, or similar, and want to take this design to the next level. We also included a Nerd or Die icon in the list - in case you’d like to credit our site or YouTube channel in anyway, we always appreciate that.
  • Font Family - A text input box that allows you to set the font to use for your panel text. By default Oswald is entered here. Any font installed on your system will work in the input box. Please note that it spaces are generally not required and maybe cause your font to not load properly. For example, if you install the font Big Noodle Titling on your system, the correct input will be BigNoodleTitling - you may need to restart your browser with any new fonts used.
  • Text Size - Range slider input that increases or decreases your text size.
  • Text Horizontal Align - Range slider input that changes the horizontal positioning, or left and right positioning of the text. By default it’s set to 130px.  With italic text you may want to move the input down just a bit.
  • Text Vertical Align - Range slider input for the vertical, or up and down, positioning of the text.
  • Filename and Download Button - A text input and button. You can save the file by entering a filename in this last text box, and then hitting download. For example, if you enter twitter into the text input box and hit download, we’ll have a file named twitter.png saved on our computer. If you're experiencing any issues with the download button, you can also right click the panel, and click “save image as…” but of course using the button with the filename is recommended.

Have any recommendations or issues with the app? Let us know!

We'd love to improve this app even further so feel free to comment on this post to let us know what you think is missing! Please leave any troubleshooting issues in the comments below, as others may have similar problems. Let us know what icons and color combinations are missing... or perhaps we might even do new badge styles as well!


Animated Overwatch Overlay Featured

Animated Overwatch Overlay for OBS, Twitch and More

Our animated Overwatch Overlay is now available in the Nerd or Die store.  In this post we'll talk about how you can set it up in a couple of minutes, as well as customize it a bit to your liking.Read more