General Information

Thanks for your interest in the Glitch overlay and alerts stream package. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com . Please note that these items can be purchased separately or in a bundle. This page will guide you through the setup process. If you have any questions that aren’t answered in this setup guide, please feel free to contact us.

Photoshop is not required for any portions of this product.

Animated elements are supplied as WEBM files. These are video formats supported by browsers, such as those integrated in streaming software. This package has been designed for use with OBS Studio, XSplit Broadcaster, BEBO, StreamLabs OBS, and most other streaming softwares. Please make sure your software fully supports WEBM files. If you are not familiar with how to set up your new overlay with either of these streaming applications, we strongly suggest checking out the below tutorial before moving on:

Before You Install

If you’d like to match the style of the overlay and alerts, use the fonts listed below.

  • Titillium – This is the primary font used
    • Please refer to this guide on downloading Google Fonts

Installation Guide

The event list is custom designed from the ground up for StreamLabs users. It includes many options, but is very easy to setup.

Installing the Event List

  1. Click the Widget Quick Setup link in your downloaded files to begin installing these alerts (found in the Event List folder).
  2. If you’d like, choose “Create Profile” and name it something appropriate such as “Glitch”. The import link will only override your event list. This means you can combine this event list with any other scene collections you’ve made in StreamLabs. If you want to save your old event list, it’s highly recommended to do this in a new profile.
  3. Select “Use” for the profile you want to import into.
  4. Navigate to “Widget URL” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software. We recommend setting the size to at least 300 wide and 600 tall. This size may change depending on your customization options.
  6. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the StreamLabs OBS .overlay file, you may not need to complete this step if your event list box is already added in.

Customizing the Event List

This widget includes a lot of custom features, please read through this list in order to understand them all.

StreamLabs Base Options

  • Theme and Theme Color will have no effect on this widget
  • Enable Events allows you to decide which events you want to display inside the widget
  • Min Options let you set how many viewers for hosts, bits, or raiders for raids will trigger an event
  • Max Events let’s you change how many events are displayed at once
  • Background Color is only for preview purposes
  • Text Color will change the color of the usernames
  • Font allows you to pick the font family user in this package, the default is Titillium, which will match the rest of the designs
  • Animation and Animation Speed will have no effect on this widget
  • Fade Time will hide the widget after X seconds, 0 always displays the widget
  • Other Options will allow you to flip the widget. For example, enabling the Flip Y will make the events come from the bottom. Flip X will enabled the animations coming from the right side (to edit where the text is, please see Custom Fields).
  • DO NOT change the custom HTML/CSS options unless you know HTML/CSS/JS – we do not support custom changes.

Custom Fields Options

On top of the base options for StreamLabs, we’ve created custom fields that you can use to edit this package even further.

Click the “Custom Fields” tab to begin. DO NOT click “reset code” or “remove overlays”.

  • Glitch Frequency – lower is more often, 0 to disable – an amount that determines how often the glitch effect is triggered. Lower means more often. Set this to 0 to disable glitches. We recommend between 5 and 40. Glitches will always be played when events entered. Default: 5.
  • Text Alignment -the direction your text is aligned to. This is a text field that by default is set to “left”. If you want to change it, you may update the text field to read “left”, “center”, or “right”, do not include the quotes inside the text box.  Default: left.
  • Tag – Font Size – how big do you want tags? These will generally be “Follower”, “Subscriber”, etc. Default: 12.
  • Tag – Font Color – what color you’d like the tag font to be.  Default: #FFFFFF.
  • Tag – Space between tag and username – the distance between the tag and the username. Default: 4.
  • Section – Space between each section – the margin between each section. Default: 0.
  • Section – Padding (vertical and horizontal)  – The space between the text and borders of each section. Default: 14 (top and bottom), 20 (left and right).
  • Section – Background color -The background color of each section. Default: #000000.
  • Section – Background opacity – The opacity for the background color, lower value will mean you can see through it more. Default: 50.
  • Section – Opacity for right side of background – Want the colors to fade out as they head towards the right side of the section? Increase this value (please note that this will be flipped if you selected Flip X). Default: 0.
  • Divider – Height – How tall the divider is. Default: 4.
  • Divider – Color –  The color of the divider. Default: #FFFFFF.

Save Changes when done.

Installation of this product involves using media, image, and text sources. If you’re unfamiliar with these, please make sure to familiarize yourself with the streaming software you use.

  1. Unzip the files you’ve downloaded onto your computer.
  2. Open your streaming software. Add animated parts (WEBM files) by adding “media sources” and locating your desired overlay elements. There are preset layouts OR modular elements to customize to your needs. Mix and match as needed.
  3. Skip this step if you do not need to add custom text to the labels. The easiest way to add you custom text is to load one of the blank WEBM files and add a ‘text’ layer over the top using the recommended font.
  4. To add dynamic supporter tags, add in text sources and connect them to the appropriate text file. This will be done using apps like StreamLab’s Stream Labels or the Muxy Ticker. We recommend using the fonts listed in the “before you install” section.
  5. Any scenes can be set up in a similar process (Starting Soon, BRB, etc.). In your new scenes you will add in media files from the “Screens” folder, images from the “Icons”, and text sources to add custom text needed. Again, please use the recommended font.
  6. Please use any demo images or movies for reference on recommended layouts.

This alert package is set up specifically for Streamlabs users and utilizes the customization options now available.

In order to customize the colors of this alert pack, please refer to the NoD_Glitch_Readme file found in your Glitch Alerts folder.

New Update – Custom sounds now added. You’ll find options to mute and increase/decrease the volume in your custom fields

  1. Click the Alerts Quick Setup link in your downloaded files to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as “Glitch Alerts”. The import link will only override your alert package. This means you combine these alerts with any other scene collection you’ve made in StreamLabs. If you want to save your old alerts, it’s highly recommended to do this in a new profile.
  3. Select “Use” for the profile you want to import into.
  4. Customize the colors if desired (refer to the NoD_Glitch_Readme file).
  5. Navigate to “Alert Box” and copy your unique URL.
  6. Paste this URL as a “Browser Source” in your streaming software. We recommend setting the size to at least 1260 wide and 800 tall.  If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the StreamLabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

Installation with StreamLabs OBS is simple, and can be done in a matter of seconds! Follow the instructions below:

  1. Download and install Streamlabs OBS if you haven’t already
  2. Open the StreamLabs OBS “Settings” box.
  3. Click the “Overlays” tab.
  4. Select “Import Overlay” and then select the proper .overlay file. This file is included in the “StreamLabs OBS” folder.
  5. Adjust any text sources to customize for your stream.
  6. Adjust the alert sources as needed (you may want to resize the Alert Box sizes in the properties of this source).
  7. Double check all other sources. Please note that some text boxes may remain blank. For example, the “New Tip” text source may not show any names, as you might not have any new tippers.

Please note – at the creation of this guide, the stinger transition will not be imported into StreamLabs OBS. You will need to add this manually. Refer to the instructions in the “Stinger Transition” tab.

Setting up your scenes may involve some simple work as well. Please review the “Scene (Starting, BRB, Ending)” tab for more information.

Setting up your scenes in standard streaming software:

  1. In a new scene, add a media source
  2. Set this source to looping, and select a local file
  3. Add in a custom background image, video, or use the “Abstract Backgrounds” that we’ve included
  4. Add another media source, set to looping, and select the appropriate Stream- .WEBM file (Starting, Intermission, Ending)
  5. If using the intermission design with a camera frame, you can add a media source under the frame
  6. Add in image sources for icons (found in the icon folder) if desired
  7. Add in text sources, using the recommended font, and place next to the icon if desired.
  8. Duplicate scenes and change as needed.

Using StreamLabs OBS import for scenes? All scenes will be set up once you’ve imported the package, please refer to the “StreamLabs OBS” tab.

Setting up a stinger transition between scenes is easy with OBS Studio.

OBS Studio

  1. Under the “scene transitions” section, click the drop down and select “Stinger Transition”
  2. Click the gear icon and select properties
  3. For “video file” click browse and select the stinger.webm found in the “Screens” folder
  4. Set the “transition point type” to time and “transition point” to 1500
  5. Enable sounds by setting “Audio Monitoring” to “Monitoring and Output”
  6. Click OK

StreamLabs OBS

  1. Click the gear icon above your scenes
  2. Set the “Transition” option to “Stinger”
  3. Set the “Duration” to 3000
  4. Select Browse for the “Video File” and choose the stinger file found in the “Screens” folder
  5. Make sure “Transition Point Type” is set to “Time (milliseconds)”
  6. Set the “Transition Point (milliseconds)” to 1500
  7. Enable sounds by setting “Audio Monitoring” to “Monitoring and Output”
  8. Leave other settings on their defaults
  9. Hit Done

You’ll find this item in our “Free Extras” download. Please unzip the files on your computer to use.

  1. Click the Streamlabs Chat Box – Quick Setup link in your downloaded files to install this widget.
  2. If you’d like, choose “Create Profile” and name it something appropriate such as “Glitch”. The import link will only override your chat box widget. This means you combine these alerts with any other scene collection you’ve made in Streamlabs. If you want to save your old chat box widget, it’s highly recommended to do this in a new profile.
  3. Select “Use” for the profile you want to import into.
  4. Navigate to “Widget URL” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software. Select a desired width and height.

Custom options included

Towards the bottom of the widget, you’ll find a tab for “Custom Fields”. Click this tab to reveal more options. Please DO NOT click “Reset Code” or “Remove Custom Fields”. Also, please note that we do not support changes to the HTML, CSS, or JavaScript sections.

  • Align to where? – Which position would you like your chat box to align to? This can be “top” or “bottom” – please do not include the quotes when typing in this entry.
  • Text Alignment – Would you like your text aligned to the “right”, “left”, or “center”? Please do not include the quotes when typing in this entry.
  • Character Separator – The character(s) used to separate the username and message.
  • Font Family – What font would you like to use for this package? Default is “Titillium Web”.
  • Font Weight – The “boldness” of the font. Higher is more bold.
  • Maximum Messages – How many messages do you want to show at one time?
  • Glitch Time – The speed at which the glitch effect happens on the username. Lower is faster.
  • Glitch Effect Repeat – How many times do you want to repeat the glitch effect on the username? We recommend a low amount for active chats.
  • Border Height – The height of a dividing border on the bottom. This is disabled by default.
  • Border Color – The color of the dividing border between each message.
  • Margin – The space between each message.
  • Background Color – The background color of each message.
  • Opacity of Background – The opacity of the background color. Lower will make this more see through.

Customizing Colors

Adjustment of colors can be done in OBS Studio and StreamLabs OBS by using color correction filters. If you’re not familiar with filters, please watch this video.

If you’d like to adjust your Twitch panels, please use the .psd file found inside the “Panels” folder. You may also use the blank.jpg file with any image editing software.

Usage Terms

The user may use these alerts for personal and commercial use. It is intended for one (1) user and one (1) device only. These usage permissions do not expire. Re-distribution is strictly prohibited. The alert graphics and code remain the property of Twitch Temple and Nerd Or Die unless written permission is granted.

Please refer to our Terms and Conditions for more information.

Future Reiterations, Errors and Updates

This version of the alert is provided as is. If there are missing elements or you think something critical needs addressing, please contact us outlining the issue and provide the email used to purchase the product. You are allowed up to 5 downloads per product.

Please follow @NerdsPwn on Twitter for update information.

More designs by Flisky

For more creations by this designer, visit their vendor page.


Changelog

To receive these updates simply re-download the product via the email link, or on your account page when logged in.

  • 5/9/2018 – Added custom sounds + options to mute/increase/decrease volume in the “Custom Fields”
  • 4/9/2018 – Added a “Free Extras” section with a chat box design.