Customize Your Twitch Overlay

The Twitch overlay maker is here!  You can use this app to create an overlay image that you can use with your Twitch stream.  Use the options, inputs, and text fields to make your overlay how you like it.  This is the second customizable resource from us, which will allow you to create overlays without the need for Photoshop, GIMP, or other image editing programs.

View Fullscreen App

Some items may appear blurry because of auto scaling. This will not be shown in the exported images.

How to Customize Your Twitch Overlay

  1. Use the controls to customize your overlay.
  2. Right click the overlay area and select “Save Image As..”
  3. You’re done!  You can use this overlay in OBS or upload to any cloud based system.

This app will perform best on on monitors with at least 1920×1080 resolution.

Options Available

The following options are currently available for this app:

  • Choose a Theme – Allows users to choose a preset appearance of the overlay maker. Tweet a picture to @NerdsPwn of your creation to have a chance at your theme being added!
  • Demo Background Image – Changes the background image used to preview your overlay.
  • Section Width – Sets the size inbetween each section.  You can use this option to create a fewer amount of sections by making the value larger.
  • Main Background Size – The height of the main background rectangle.
  • Section Horizontal Position – Controls the horizontal position of entire sections, including dividers.
  • Section Vertical Position – Controls the vertical position of entire sections, including dividers.
  • Top Line Height – The height of the top line.  This by default is an orange line that goes across the top of the main background.
  • Bottom Line Height – The height of the bottom line. This by default is a dark blue line that goes directly below the top line.
  • Top Line Vertical Position – Controls the vertical position of the top line.
  • Bottom Line Vertical Position – Controls the vertical position of the bottom line.
  • Top Line Color – Changes the color of the top line.
  • Bottom Line Color – Changes the color of the bottom line.
  • Main Background Color – Changes the color of the main background.
  • Divider Width – Controls the width of the dividers.  These are by default orange squares.
  • Divider Height – Controls the height of the dividers.  These are by default orange squares.
  • Divider Vertical Position – Sets the horizontal position of the dividers.  These are by default orange squares.
  • Divider Vertical Position – Sets the vertical position of the dividers.  These are by default orange squares.
  • Divider Color  One through Five – Changes the color of each divider.  Starting with one, on the left, extending to five, on the far right.
  • Font (local) – Allows you to use any local font installed on your computer.  Simply type the name into the input field.  This section is case sensitive.
  • Font (Google Web Font) – Choose any Google Web Font and type it into the input field.  Click “Load Web Font” to update your font.  The input field is case sensitive.  For example, type “Oswald” or “Roboto Condensed” (without the quotes) and click the load button.
  • Font Size – Controls the size of the font used.
  • Font Weight – Controls the weight (or thickness) of the font used.  Not all fonts have different font weights.
  • Text Horizontal Offset – Controls the horizontal distance of the text from the dividers.  Use this option to offset the text left or right.
  • Text Vertical Position – Controls the vertical distance of the text from the dividers.  Use this option to offset the text up or down.
  • Text Container – Controls the size of the box that contains the text.  Use this option to force words to the next line by making it smaller.
  • Text Alignment – Sets text to align to left, center, or right.
  • Text Color – Changes the color of the font used.
  • Shadow Color – Changes the color of the shadow behind the font.
  • Text Box One through Five – Changes the text that will be used in each section, starts with one, on the left, and goes to five, on the far right.  You can change “Latest Follower” to “Recent Follower”, for example.  If you do not want anything in any of the sections, simply leave it blank.

Updates

  • (03/24/16) – Added theme system, demo background image, and divider horizontal position.
  • (03/24/16) – Added section horizontal position, section vertical position, text container width, and text alignment.
  • scott patterson

    Now that I have it how do I use it in OBS?

    • Add Scene>Image>Choose This File

  • William Barbosa

    Dude, u have any themes for DOTA 2 ? i look in ur web site, but i dont found :/ thx