Using Color Filters to Enhance Your Overlay

Enhance Your Overlay Using Color Filters

So, you’ve just downloaded the latest overlay pack from Nerd or Die, and you want to change the color of the overlay to suit your brand colors.

But how do you do this?

Luckily enough, this Color Filter tutorial will make this easier for you. The following six-step method is the most straight-forward way to immediately change your overlay colors in OBS Studio.

Get Started

Before we start, you need:

Nerd Or Die Overlay PackageOBS Studio

Step 1

Load up OBS and ensure you have the latest version.


Tip: Always run OBS in administrator mode-it runs more efficiently-on Windows. As stated by dodgepong on the obsproject forums, OBS version 24.0.3 (and beyond) includes a fix on Windows that helps alleviate the framerate rendering issues that some instances of OBS are having. To test this, run a game with high GPU needs, such as Apex Legends. Run OBS in administrator mode, then Open the ‘Stats’ window under. View > Stats, or View > Docks > Stats. Check to see if your FPS matches in-game FPS.

Step 2

Create a new Scene Collection. This is for testing purposes in this tutorial only, and makes it easier in the long run.

Step 3

Add a new Source, and locate the cam overlay media from your Nerd Or Die Overlay Pack. If it is animated, it will need to be added as a ‘Media Source’. If it is just a static image, then add the source as an ‘Image’. 

The easiest way, however, is if you have a ‘Super Charged’ overlay pack from our collection. You can use the ‘Quick Install’ Option!  Just go to Tools > Scripts > Hit the ‘+’ Icon > Go to where you’ve put Overlay Folder > Open OBS Studio Quick Install Folder > Open the ‘.lua’ file.

From here, you can install all scenes, or whatever scene you want. There are helpful text files in the pack folders as well.

Step 4

In this example, there is a cam frame, so we named it “Cam Overlay”, name this however you see fit.

Now, right-click the Cam Overlay and click “Filters”.

Step 5

Click the “+” button under the “Effect Filters” window and select “Color Correction”.
In this diagram, we have other options there, ignore those, you only want “Color Correction”.

Step 6

The hue shift method. If your source element has multiple colors, and you want to shift all the colors of the element, then we recommend using hue shift.

Slide to change the colors with the ‘Hue Shift’ Slider. Using this slider will change the color and 

shade of the base overlay element, it’s easy find the exact fit for your stream and brand colors. 

Remember, in the Nerd or Die packs, there are different colored base versions of whatever element you want to change. Therefore, it will start with a different color, and you may find that using another version will help you find the right color.

Tip: For easy future reference, take note of the numbers to the right of the slider and put them in a safe text file for later reference. You never know when you’ll need it! Believe me, you’ll kick yourself if you don’t!


The color picker method. If you source element is a solid color, and you’d like to change it to an exact solid color, then we recommend using the color picker.

Click the ‘Select color’ option.

Here you’ll be able to enter in an exact hex code in the HTML box, choose from the pick color screen, or even use the RGB values.

While this is more exact that shifting the hue, saturation, and/or brightness, the downside will be that it will overlay the selected color on the entire source. We generally only recommend this option for sources that will be one solid color.

Tip: Sometimes (rarely) when using this method you won’t get the exact hex code you’re entering. We’ve found it’s best to start with sources that are white. However, if your source element is not white, you can first add a color correction filter where you drop the saturation to -1.00 and boost the brightness up to 1.00, which will cause your source to turn white. From here, you can add a second filter on top, and enter in the exact color value you’d like.

That’s it, you’re done changing the colors of your overlay. You can do this with each source, or if you need to, put them all in bulk–all that creativity and freedom is over to you.

We hope this tutorial has helped you out, and we have a whole collection of easy-to-follow tutorials. So, if there’s a question that you’re burning to know the answer to, make sure to come back and take a look at the article section here or join us in our Discord #help channel and we’ll be glad to assist.


Customizable Twitch Panels

Profile Panel Maker

Free Custom Profile Panels for Twitch and Mixer


Make custom, personalised Twitch and Mixer Panels for free and without the assistance of Photoshop, GIMP, or any image editing software! We hope this tool can help you improve your presence and professionalism on your platform of choice.  Choose your colors, icon, font size, text to include on the panel, and more!

Get Started

Upgrade your Stream with Twitch Overlays, Alerts, and Widgets

Did you know that Nerd or Die makes a lot more free content for streamers? We also offer premium themes to help you upgrade your channel for a professional appearance.

Free OverlaysPremium Overlays

How to Customize Your Twitch Panels

Follow these simple instructions:

  1. Use the input controls to design your panel.
  2. Click the “Save Panel Image” button
  3. That’s it!  You’re ready to upload them to Twitch or Mixer!

Use the app inputs to make the panel look exactly the way you’d like it to!  I recommend that you start with your panel that will have the most text. As an example, if you’re making two panels with the text “Subscribers”, “Donate”, and “About Me”, you should start with the “Subscribers” panel, as it takes up the most horizontal space.

This method allows you to create a consistency of font sizes and text alignment for all your panels. However, if you don’t want to have the same font sizes, that’s fine too!

Options Available

The follow options are currently available for this app:

  • Left Side Color – This input is done through a color picker. Changing this color will change the background color of the box on the left side. This is the box that contains the icon. By default it is set at #23b85e – you can use the pallette, HSL Slider, or color input to select your color.
  • Right Side Color – This input is done through a color picker. Changing this color will change the background color of the box on the right side. This is the box that contains your panel text.  By default it is set at #101220 – you can use the pallette, HSL Slider, or color input to select your color.
  • Text Color – This input is done through a color picker. Changing this color will change the text color of your panel text. By default it is set at #ffffff – you can use the pallette, HSL Slider, or color input to select your color.
  • Panel Text – This input field controls the text to be included on your panel.  The text will be updated as you type.
  • Icon – The icon dropdown will change the image displayed on your stream panel.  Simply choose any of the pre-made icons and it will be updated on your panel automatically.
  • Text Size – Use the text size slider to select how big you would like your panel text.
  • Text Vertical Align – The text vertical align slider can be used to move your text along the Y-axis.  This option is useful if you’d like to move your text towards the top or bottom of the panel.  On some browsers the text will not be automatically aligned to the middle.
  • Add Padding – For some Twitch panels you will like “padding” or empty space on the bottom of your panels to add space between your image and text that you may be putting underneath it.  Selecting Yes will show the checkerboard, which indicates that there will be empty space added underneath the panel. No will remove the padding and the image will include no empty space on the bottom.
  • Font Family – Allows you to manually set a font of your choosing.  Simply type in the name of any font that you have installed on your local system.

Should I add padding?

The easiest way to make your panels look great, is to “Yes” for padding if the image will be a link.  If the image will not contain a link, then select “No” for padding.

Padding Example
An example of your images with and without padding, as links and non-links.

Looking for Mixer panels?

We got you covered! These panels can be used with your Mixer profile as well! Simply download the images needed as normal, and upload to your Mixer account.

Updates

  • (24/03/20) – Complete rebuild and UI update. View the classic panel maker.
  • Added support for mobile scrolling on webkit devices.
  • Added text box for font input.  This allows users to enter any font they have installed on their system with these panels.
  • Added support to directly input color code into the color picker.
  • (03/08/16) – Added Game Wisp, Crown, Snapchat icons.
  • (03/13/16) – Added Plays.TV, Tumblr, DeviantArt, Keyboard, Mouse, Battle.Net icons.
  • (03/25/16) – Added Playstation, Xbox, Pokemon, PayPal, Extra Life, UPlay, and Thumbs up icons.
  • (07/17/16) – Added download button and file name input.

We hope this free Panel Maker has helped you out!

Enhancing your content with Nerd Or Die doesn’t end here. We have a whole collection of easy-to-follow tutorials.
If there’s questions that you’re burning to know the answer to, you might find them here!

Otherwise, join us in our Discord #help channel and we’ll be glad to assist.


Will Pipeline.gg help improve your stream?

Will Pipeline.gg improve your stream?

If you haven’t already heard, Pipeline is a new paid, members only service and community for streamers looking to fast-track improvement of their content. Is it worth it? We became a member for a few months and here’s what we found…

Read more15% off Membership

Disclaimer: After several months of membership we wrote this article. Nerd Or Die chose to partner with Pipeline to share their product information.
Pipeline have provided an exclusive discount on their subscription for us to share with our Nerd Or Die audience.

Pipeline overview - a premium, members only community

With an ever-increasing number of people getting in to live streaming the knowledge available is plentiful, but there’s few opportunities to bring that all under one roof and nowhere better than Pipeline.

A paid-for, members only community for streamers looking to fast-track improvement of their content.
With more and more people looking to turn their hobby into content for the masses, there’s never any guarantee on achieving success (whatever that is for you), but Pipeline looks to give the best information to help make it possible.

Pipeline membership is open to everyone, however we think it’s most beneficial for new and upcoming streamers or those who feel ‘stuck’ and are in need of inspiration. With a simple on-boarding process you’ll be thrown into a plethora of quality content to digest from day one.

“Our focus is on lowering the barrier to entry, as a new streamer it can be really intimidating to make sense of all the platforms, hardware and software,”

Stephen Ellis (Pipeline.gg founder)

There’s lots to digest, but we'll take you through 3 main areas of Pipeline we'd like to highlight
The Playbook, Masterclass, and of course, Group Mentorship.

The Playbook

The Playbook is an indispensable collection of information on streaming, covering the following major areas.

  • Foundations: Nailing down your niche and what you need to start building.
  • Community: The importance of the core community that will carry you towards turning streaming into a career.
  • Revenue: Exploring a range of monetisation options and when or how to consider becoming a business.
  • Growth: Understanding algorithms, platform strategy and knowing how to collaborate.
  • Systems: Setting yourself up whilst growing your career and the importance of support networks and handling of finances, design, editing and legal.

Masterclass

There’s currently four areas of Masterclass but these are expected to expand on a monthly basis. Each area contains in depth information from experienced figureheads.

  • StoneMountain64 it the man for the Youtube masterclass. He explains YouTube’s all important algorithms and how to re-purpose your livestream content to fully utilise YouTube and it’s billions of daily video views.
  • The mobile streaming masterclass from PUBG Mobile Pro HotJukes shares insight on using mobile streaming and covers caveats such as proper design as well as an in depth look at his entire personal setup and process.
  • RyaStream takes the Simulation streaming masterclass, a former truck driver who is now one of the most popular simulator streamers explains the important of recognising specific genres and building a community around the games you love.
  • Finally the Discord masterclass from Bird and Flo of the Pipeline team goes into great detail on managing discord communities small and large using years of experience and technology.

Group Mentorship

The group mentorship section is packed full with pages of stream specific videos from a variety of well-known names in the industry covering a vast selection of information. Creativity, collaboration, confidence and content are just a few of the areas they touch on.

These videos go into details of tried and tested techniques to help you improve as a streamer.

As well as concentrating on important areas specific to your streaming quality and content including those mentioned above, there’s some insightful content such as finding the balance between your own life and the important of utilising the support of those around you.

There's more to Pipeline than the courses

There’s no denying the courses and videos are great resources, but we’ve found there’s even more value when becoming a member. Here’s a summary of the extra inclusions.

Becoming a Streamer Podcast

The “Becoming a Streamer” Podcast from StoneMountain64 and the co-founder of Pipeline, Snoopeh, episodes are free to all and well worth visiting to get an idea of the range of knowledge, advice and guidance available from the team over at Pipeline. Each episode they chat with reputable streamers amassing millions of followers and subscribers.

Pipeline Blog

The Pipeline Blog covers a range information from news relating directly to the Pipeline website and service, but also interviews and articles concentrating on content creation, copyright, income, branding, events and much more. You will find pages and pages of free information that can prove invaluable as you take those early steps in your streaming career as well as advanced tips and strategies for those looking to further their knowledge and understanding of the streaming industry.

Pipeline Discord

Finally, the Pipeline Discord. We all know you love our helpful Discord community – but we recommend Pipeline’s members only Discord too. It houses thousands of streamers, new and experienced under one roof. All there with the same goal and ready to help each other. It’s an invaluable resource of live help and assistance from the community as well as top names in the industry. Finally, a place you can ask those pressing questions about your next steps in streaming progress!

Conclusion: Pipeline is an investment in yourself

There’s no denying some of the content and advice can be found for free elsewhere if you go digging. But from our experience, none of those are as linear, articulate or as concise as what Pipeline has to offer. In addition to this, the community of like-minded members are great to leverage ideas and provide feedback.

If your goal is to become the next big streamer, we all know there’s no template to get there. However, if you want to improve you stream process easier and more fun, Pipeline may be the tool for you.

Using the link below, not only do you get 15% off your membership, but there’s a 30 day money back guarantee for anyone unhappy with the content.

Pipeline have confidence in the information and tools they’re sharing with their members and we recommend giving it a go. We would love to hear feedback from our community on their progress.


The Advanced Overlay Maker - Version 2

The Advanced Overlay Maker for Streamlabs OBS has just received a major update that is free to all users. Using your feedback we've created what we think is the easiest and most adaptable overlay making system yet.Read more


Faster Overlay Set Up in OBS Studio

We’re always trying to make our Nerd or Die overlays as easy as possible to implement into OBS Studio, but some of the tricks don’t come from the overlays themselves–the real tricks are found in knowing how to move through OBS Studio like a pro.

We’re going to quickly set up a Nerd or Die overlay directly into OBS Studio to show you just how fast you can get your overlays up and running in everyone’s favorite broadcasting software.

QUICK • FAST • EASY

We’re going to use our Glitch 2 overlay pack as our example. This overlay comes with “Quick Install” links for StreamElements and Streamlabs users, but you won’t find a quick install link for streamers who are just using base OBS Studio, unless you’re using our new Super Charged overlays. But that doesn’t mean your overlays can’t be installed quickly.

Dragging and Dropping in OBS Studio

There wasn’t a single link that can be used to automatically import overlays into OBS Studio until we created Super Charged overlays, but that’s not to say things won’t change down the line. OBS Studio’s new drag and drop feature makes moving overlays into your Scene a very quick process.

Inside your “Graphics Assets” folder of the Glitch 2 overlay download, you’ll find everything you need to drag and drop into your Scene to create a complete overlay. Let’s build a “Starting Soon” Scene.

When dragging and dropping, it’s always best to start with your foundations: the assets that will make up the background of your Scene. The reason for this is that everything you drag into a scene will stack on top of another. There’s a way to re-order these assets, but save yourself some time by building from the bottom-up.

We’re going to start by dragging in a background from the “Scenes” folder. Choose whichever color combination catches your eye. You’ll notice in each of these folders are actual MP4 files that will create a dynamic background–one that actually moves like a video.

Drag in the “Stream_Starting” MP4 file directly into the “Sources” window of OBS Studio where it will automatically populate your Broadcast Window. Remember, with MP4 sources, it’s best to set them to loop by double clicking on the source and checking the box for “Loop.” Always save those options!

Easily drag and drop resources from your folders, into OBS. After dragging and dropping, don’t forget to loop animated resources!

We’ve already done a large haul of the work simply by pulling in the background, but we can also add some other graphic assets that will complete the overlay. For example, adding your social handles and a schedule is a great move for building out a “Starting Soon” Scene. So let’s do that, shall we?

Let’s start simple: Bringing the social icons and schedule graphic into the scene. Now, if you’ve been paying attention, OBS Studio’s new drag and drop feature is still in play. Let’s open up the “Icons” folder found directly in the root of the “Graphic Assets” folder. Inside here, you’ll find an icon for anything you could ever need.

If you’re wanting to advertise your Discord, find the Discord icon and drag it on in. Facebook? Find the icon and drag that sucker in. The new cult you’re starting? We don’t have an icon for that yet but we’re always taking suggestions at [email protected].

Place these icons as you see fit–but we recommend using the open space on the far-right of the “Starting Soon” Scene.

Let’s get the schedule asset in there as well. This can be found back in the folder of whatever color combination you selected in the “Scenes” folder. At the top of that folder, you’ll see an “Assets” folder.

In addition to the schedule asset, you’ll notice several brackets that can be used to frame up your social icons. Add them to your Scene if you’re feeling adventurous. Dragging in our schedule asset will complete our time in the “Graphic Assets” folder.

But icons only get us half way there. We’ll still need to create text sources to pair with these icons, displaying our social handles and schedule times.

Creating Text Files

Normally, you can add a Text Source just like any other source in OBS, but a quicker alternative to creating Text sources is to instead use a text (.txt) file.

Why is this quicker?

  • A text file can work as your real-time white board for OBS Studio. Meaning you can erase and update within a text editor and have the changes appear directly in OBS seamlessly.
  • This is as easy as creating a text file and dragging it into OBS Studio. 
  • You can still have all your customization options available to you (font size, family, and color), just as if it were a Text source, but you no longer have the hassle of opening up each source to make updates.

The utility of using a text file in OBS doesn’t stop there. Let’s quickly create a new scene so we can check out another useful aspect of text files.

Dragging and dropping text sources works just like visual sources! Quick and easy! You can also quickly edit a text file and have it update in OBS instantly.

Duplicating Text Properties

While a text file can give us real-time updates when we make changes to the text, the properties like font and size can still be a tedious process, UNLESS you’re the clever sort of streamer whose learned the benefit of duplicating these text files.

Let’s quickly set up a new text file to show our Top Donators. If you’re a Streamlabs user, you’ll have a folder where these stream labels are kept. Better yet, they too are kept as text files that automatically update when changed! Locate this folder–but if you’re not a Streamlabs user, creating a new text file will work all the same.

Drag this file into OBS Studio to create the Text Source, and then right click on the new Source and choose “Properties” to begin making edits to the text. If you’re wanting to keep the Glitch 2 look going, I suggest using the Frostbit font at a height of 20.

Traditionally, you would continue to drag in text file after text file as you populate your Top Donator list, but that would require then also setting them to the new font and the new height, repeating these steps over and over again.

Instead, take your first Text file Source and right click it, selecting “Copy.”

Then, within your Sources window, right click again and select “Paste (Duplicate).” Doing this will create a direct duplicate of your previous text file, with all the same customizations still attached.

But it won’t do you any good to have 2 text files displaying the same information, will it? No, it won’t. So hop into the “Properties” of your duplicate and change the source of the text file to the other donator you’d like to display.

Some of you might not see this as a time saver, since either option brings you into the “Properties” but each method–dragging each Source/duplicating one Source–has its benefits. Your own preferences may decide which method you’d like to rely on.

Creating and Copying Visual Filters

Much like duplicating the properties of a text file, visual filters can be customized once to a single asset, then shared through many assets to create a cohesive color-rich aesthetic for your stream.

I’m going to use a Glitch 2 background for my initial filter creation:

  1. Right clicking on the background as a Source will allow me to access “Filters” which is just right above the “Properties” option we were using for fonts.
  2. Use the ‘+’ icon in the bottom-left of the Filter window and create a new “Color Correction” filter. This will open up a ton of new sliders for you to adjust the base color of your asset.

If you’re using a Glitch 2 asset, “Hue Shift” will be a very useful slider because you can change the color of the asset to any color on the spectrum by dragging your cursor along that slider. This is the quickest way to match the colors of Glitch 2 to your streaming brand.

Hue Shift is only one of many options available in a Color Correction filter. Play around with the other options if you’d like–many of them are familiar options to any streamer who has played with a visual toolset before. Let’s cover just a couple of these other tools.

  • “Saturation” expands and reduces the vividy of your color. Imagine going from a colorless grey on the far left, and a bright neon version of your color on the far right. This is useful for honing in on the exact shade of the color you’re looking for.
  • “Opacity” is another useful tool in the slider group–this option will allow you to change the transparency of your asset if you so choose.

Quick note: You cannot adjust the Hue of a pure black or pure white asset. The Hue Shift slider will only work with assets that are already using a color besides one of these two.

If you do find yourself dealing with a pure white or black asset, you can use the “Color Picker” option found at the bottom of the Color Correction window to customize these base colors to any color you could imagine. It’s a great alternative to the Hue Shift slider.

To copy a filter you’ve created on any Source, right click the Source and use the “Copy Filters” option found within the drop down.

Pasting them into a new Source is just as easy. Right click, and right below the previous option, you’ll see “Paste Filters.” Done and done.

A lot of the tricks we’ve covered above save you time in your initial creation, but what about taking things a step further: Using Scenes to cut your customization workload by fractions of the time.

Grouping With Scenes

As your Sources window gets more jam-packed with every added Source, it’s useful to employ a very hidden trick that bends the utility of an OBS Scene.

A Scene in OBS Studio is traditionally used to create displays built from various assets that are ready to go at a single click. This is a great way to effectively switch between a “Stream Starting” Scene and a “Gameplay” Scene within seconds–and without having to move things around.

Scenes at their base are just organized groups. You can use this feature to create a collection of assets that you can then be used in other Scenes. It’s very meta, I know. Let’s use a real example to make things more clear.

Let’s create a brand new Scene and add a Webcam asset from the Glitch 2 overlay pack, as well as a Donator Box below it. After we add the three text assets to the Donator Box, we now have 5 Sources existing within this Scene. 5 is a lot to manage, but that number can grow and grow to the point of insanity!

With just these 5 Sources, let’s rename this Scene “–Webcam and Supporters” and those two dashes aren’t a mistake.

I’m using these dashes to denote that I’m never going to ever switch to this Scene on stream. It’s a hint to myself that I should never click on this Scene when I’m transitioning between Scenes.

Essentially what I’ve done is I’ve brought these FIVE Sources and I’ve packaged them into ONE Source. If I return to my original Scene, I can now add another Source and in the drop-down, you’ll see I can in fact add a Scene as a Source.

Any changes I make to “Properties” or if I add “Filters” to this Source, it will change ALL 5 of those assets at once! That’s called streamlining right there.

Using this method is incredibly useful if you have a grouping of assets that appear in multiple scenes. Social icons, Supporter Bar, and Webcam Frames are great examples of assets a streamer may use in multiple Scenes. Instead of having to create each of these assets for each of their Scenes, they’re now packaged in a way that can be added only once per Scene.

We hope these tips have been useful in speeding up the cumbersome setup of your OBS Studio broadcast. The fun of streaming is actually streaming, but these initial steps need to be taken so that you’re looking your best when you go live. For more tips and tutorials, keep your eyes on NerdorDie.com!


Twitch Halloween Overlays

The spooky times are upon us, and to celebrate Halloween we'd like to release free overlays that were designed specifically for Halloween. Currently we have two different styles to choose from. The first is a webcam and alert pack, and the second is a simple image pack that's separated by each piece of the overlay, so that you can pick and choose which graphics you'd like to use for your own overlay.Read more


Twitch Design Darkmode

The Best of Twitchcon 2019

The Twitchcon announcements have been rolling in, some good and some bad, but overall we're excited to see these updates. From changes to your channel page design to better mod tools, we'll be covering announcements made by Twitch CEO Emmet Shear at Talkin' Twitch, as well as some information that has been caught our attention elsewhere.Read more


Wireframe placeholder

Twitch Overlays - Templates and Free Downloads

Twitch Overlays for Streamers and Content Creators

Twitch overlay templates are what we do best. We’ve been making Twitch overlays that are used by hundreds of thousands of streamers, and we’re always looking for more ways to provide streamers templates the best overlay templates around. To do this, we make our overlays, alerts, and widgets easy to use and as customizable as possible. We’ll be answering the most common questions people have about Twitch overlays, as well as overlays you’d find on YouTube, Mixer, Facebook and other streaming platforms.

Getting Started with Twitch Overlay Templates

When you’re starting out as a new streamer, or even someone that has been in the streaming world for a while, figuring out how to add overlays and alerts to your Twitch, YouTube, Facebook, or Mixer streamers can seem like a daunting task. But don’t worry, we’re going to break down all that you need to know about overlays, so that when you go back live, you’ll be ready to rock!


How do you put an overlay into Twitch, YouTube, Facebook, or Mixer?

Using a Twitch overlay template can be extremely easy. The first thing you need to realize is that you’re not putting one into Twitch, or other streamer services, but you’ll be adding them into your broadcast software. Broadcast software can be programs like OBS Studio, Streamlabs OBS, or XSplit. These programs basically give you a blank canvas that you add your content into. Your content can be anything from a webcam feed, video file, text, and even web pages. The best answer to this question is to learn your software, and add from there.

The process generally is as follows:

  1. Download a free or premium overlay from our store
  2. Unzip the downloaded files
  3. In your broadcast software add the type of source you’d like to use
    1. For images, add an image source
    2. For video files, add a media source
  4. Position and resize the sources as you’d like
  5. That’s it!

Retrowave Stream Overlay for Twitch

What size should a Twitch Overlay be?

The simple answer is that your Twitch overlays should be designed for 1920×1080. This doesn’t mean that your file size will be this resolution, but you should consider this size when thinking about your overlay size. Even if you’re streaming at a lower resolution, you will want to design and use overlays for this size. If your internet improves or you get a new PC, you may want to bump up from the lower resolution to 1080p, and then you’ll be ready to go without redesigning your entire overlay.

A few tips on how to choose the size of your Twitch overlay elements

Start Simple

Start with a simple layout in a file that is 1920×1080. This means add simple shapes like rectangles and circles to this canvas, so that you can get an idea of where things will be and how much space they will take up.

Think about the value of your stream real estate

Above all, consider the value of your stream’s real estate. You are limited with your horizontal and vertical space, so you have to decide what you value the most. Every stream is different, so if you value a bigger webcam and chat box, then make sure they take up the appropriate amount of space.

Think ahead

Future proof your Twitch overlay template and designs. While we recommend 1080p as a good base point to design and plan for, higher resolution streaming is right around the corner.

Think realistically

Consider file size. This is where it gets a little tricky. You might think it’s best to make a 4k design, based on our above tip, but you also have to remember that you might be working with limited resources. Large videos can take up tons of space and even be taxing on your broadcasting software.


How Do I Animate a Twitch Overlay?

This is a question we get asked a lot. The best solution here is to learn some motion graphics software. While you can technically animate Twitch overlays with code such as HTML, CSS, and JS, it ultimately will take a lot more time than using traditional animation software. Since you’re likely making an overlay for yourself or a client, rendering a video or image will be the way to go.

What software do we use at Nerd or Die?

At Nerd or Die we use the Adobe Creative Suite. We like to start with ideas in Photoshop and Illustrator, and then move them into After Effects for animation. Unfortunately, there’s no real short cuts here. Your best place to start, if you’re completely new to this, would be graphic and motion design tutorials for the software you’d like to use.

Are there free alternatives?

Speaking of, there are free alternatives to the Adobe programs, such as GIMP, that should offer you the basic capabilities you’d need to design the overlay. While there are programs that are free for motion graphics, there aren’t any that we’d currently recommend.


Can I use Twitch Overlays with YouTube, Facebook, Mixer and other broadcast software?

Yes! The real question you should be asking is: does this overlay work with the broadcast software that I use? This means that if a Twitch overlay template works with Streamlabs OBS, and you use Streamlabs OBS to stream on Facebook Gaming, you can use that overlay with Facebook. When we create our designs we make sure that they work with OBS Studio, Streamlabs OBS, OBS.Live, and XSplit, which are the most popular broadcast software.


Our complete list of free Twitch overlays, alerts, and stream widgets

Below you’ll find a list of free overlays and scene designs. While some may have a “suggested” price, you can enter in “0” to receive the item for free.

What Our Users Think of Our Twitch Overlays:

"Such a great balance between good clean design and gamer aesthetic vibes - everything is so consistently visualized. As a complete beginner in this I was expecting hours of complicated tinkering and instead was accompanied by such an amazing tutorial video that it took no time at all to get everything working. Thank you guys, really a no small feat this is!"

Annkelia (verified customer)

Our Best and Most Popular Twitch Overlays and Templates

Kinetic Stream Package

Kinetic is a sleek, exciting Twitch overlay template with multiple color selections available. It’s a template that’s full of character and works well for streamers specialising in fast-paced shooters such as Apex Legends, Fortnite and Overwatch.

Kinetic Twitch Overlay

Interface Stream Package

Interface cuts like a knife as it slides across your Twitch stream. This battle-ready, cyberpunk inspired Twitch overlay template is perfect for those looking for an Apex Legends or Rainbow Six: Siege overlay template.

Interface Twitch Overlay

Apex Stream Package

Apex is the perfect Twitch overlay template for all E-sports commentary streams. It’s light and vivid, ensuring that it’ll grab your viewers’ attention without blocking the action.

Apex Twitch Overlay

Options for every streamer style

As you will see if you check out our store, style is always on our mind. We offer a grand selection of theme-fitting Twitch overlay templates that match the vibe of many popular games of today, but general enough not to push you into a corner. Whether you’re battling through Blackout royale in Call of Duty: Black Ops 4 or you’re playing the long game in DOTA 2, our Twitch overlay templates guarantee you’ll look as good as you play – which we’re assuming is pretty good!

How Do I Customize My Twitch Overlays?

For the perfectionist and creative

If you’re a Twitch streamer with a keen eye for design and further customization, many of our Twitch overlay templates can be purchased with access to the After Effects animated source files, meaning you’ve got full control over every aesthetic aspect of your purchased Twitch overlay template.

How does this benefit you?

Well, we know many professional streamers consider a Twitch overlay template as an asset to their brand. Color coordination and style sync is key for making a killer stream presentation. If you’re familiar with the workings of Adobe After Effects, our source files give any streamer master control of every visual aspect found within our Twitch overlay templates. There’s nothing that can’t be customized to your brand with our source files in your hands.

Kinetic Stream Package AE After Effects files

What Should Your Twitch Overlay Template Include?

Everything you need to start streaming on Twitch, YouTube, Facebook, and Mixer

Our Twitch overlay templates are feature rich. We bundle our overlay templates into full packages that include overlays for webcams, alerts, social bars, and much more. If you’re a user of Streamlabs and Streamlabs OBS we even include quick-setup files to get you going within minutes.

To give you an idea of what’s included in our Twitch overlay templates, to the right is a list of example contents of our packages.

Kinetic Twitch Stream Customizable Alerts

Overlay Package

  • Animated Overlay Files
  • Webcam frames (16:9 and 4:3 ratio)
  • Animated Event List
  • Screen designs (Starting, BRB, ending, and blank versions)
  • Stinger Transitions (blue, purple and green)
  • Quick setup Streamlabs OBS .overlay file
  • Icons for stream and social use
  • Profile panels and editable .psd

Alert Package

  • Fully customizable animated alerts
  • Quick install link for Streamlabs
  • Customize colors of all elements and fonts via our custom fields
  • Change the language and text used


Stream Deck Key Icons Nerd or Die

Free Stream Deck Icon Pack

We’ve designed over 180 free Stream Deck icons that you can use to create the ultimate studio controller. The icon pack has a consistent and clean design, as well as access to a Photoshop .psd file that allows you to create and expand upon the style. If you don’t own a Stream Deck or prefer to use other programs, such as Touch Portal, you’ll have no issues using these icons as they were made at higher resolution to support higher resolution displays. With the addition of the Stream Deck Mini, Stream Deck XL, and Stream Deck mobile, there's now an option that can fit every streamer's budget.Read more