Inibetween Overlay Example

Free Downloads from Our OBS Studio Guide

In our OBS Studio tutorial series we talked about free resources that will be available - this post is where you can download any resources we used inside of OBS, for free!Read more


Filters in OBS Studio

Filters in OBS Studio

In this post I’m going to show you how to use filters to modify your sources in OBS Studio. This will allow you to do things like cropping, green screen effects, image mask/blends, and even delay certain sources.Read more


Sources in OBS Studio

In-depth Look At Sources in OBS Studio

Let's take an in-depth look at each source that OBS studio offers. The version I’m showing currently is OBS Studio with Browser installer. You can download it here if needed. Sources are the key components in OBS Studio that will allow you to create different scenes to broadcast to Twitch, Hitbox, YouTube gaming and more.Read more


Best OBS Studio Settings

Best OBS Studio Settings

What are the best OBS studio settings for Twitch?  Well the answer to the question might not be what works for you.  What we really need to find out is what are the best settings for your stream. In this tutorial I'll guide you through how to make the right choices for your Twitch channel. Read more


Downloading and Installing OBS Studio

Installing and Setting Up OBS Studio

Let’s get right into how to install and set up OBS Studio. To start, go to https://obsproject.com/ - on the left we’ll see options for OBS classic and on the right we’ll see options for OBS studio. If you’re using Mac or Linux, then select the appropriate download here. However, if you’re using Windows, let’s actually go ahead and click “Download” at the top. We’re doing this because we want to grab the version of OBS studio with the browser source built in, meaning we can basically open web pages through OBS.Read more


OBS Studio Versus Classic

OBS Studio Vs Classic

Let’s talk about the difference between OBS Studio Vs Classic. If you’ve ever streamed before, you may have already used OBS Classic, the original version of OBS. If you’re new to streaming you can skip this post and move onto installing OBS Studio.

If you're not sure if it's time to make the change, then read on and learn why it's time to uninstall the original version and move to Studio.
Read more


OBS Studio Tutorial Series

OBS Studio Tutorial Series

I'd like to introduce our new OBS Studio Tutorial Series.  We're going to walk through how you can begin streaming with OBS studio from start-to-finish in this complete guide.Read more


IT Shizuma Twitch Design

ITShizuma's Twitch Design

Our latest commission project is big for two reasons. First, we got to complete a rebranding for ITShizuma.  She actually talks about the design process and her stream on her website, check out the article here.  The second reason is that we can now officially welcome Chris as the newest member to the Nerd or Die team!  We'll get more into what Chris will be bringing to NoD in a bit, but let's first check out the new designs.Read more


WebFeature

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.

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.