Kinetic - Setup Guide

General Information

Thanks for checking out the Kinetic Stream Pack. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take 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 and other third party software is not required to use this product, however specific components can be edited in Photoshop and After Effects, as we provide some of the original files.

The alerts, overlays, and widgets have been designed for use with OBS Studio, Streamlabs OBS and XSplit. Please make sure your streaming software is up to date before using this product. If you are not familiar with how to set up and use streaming software, we strongly suggest checking out the below tutorial before moving on:

OBS Studios Tutorials by NerdOrDie

Before You Install

Fonts Used

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

Blue Theme Primary Colors

  • Blue 1: #12B0F9
  • Blue 2: #0f48c2
  • Blue 3: #080a33
  • Blue 4: #2d458a
  • White: #FFFFFF
  • Black: #000000

Purple Theme Primary Colors

  • Purple 1: #a33dff
  • Purple 2: #7115c9
  • Purple 3: #4b256d
  • Purple 4: #130620
  • White: #FFFFFF
  • Black: #000000

Green Theme Primary Colors

  • Green 1: #4baa00
  • Green 2: #245503
  • Green 3: #162c02
  • Grey 1: #424242
  • White: #FFFFFF
  • Black: #000000


Installation Guide

Installing the Alerts

In your downloaded files, open up the standard alert folder.

  1. Click the Alerts Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as “Kinetic Stream Package”. 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. Navigate to “Alert Box” 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 1000 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.

Once you’ve added this into your streaming software test the alerts to make sure they’re working properly.

Delaying Text-to-Speech

If you’re planning on using text-to-speech you may need to delay them from being read, as there is an intro animation. To do this, you can change the Alert Text Delay in the Streamlabs base options. If you’re using alert variations (such as re-subs) you will need to  update in the variations as well.

Custom Alert Options

These options are found in the Custom Fields tab. They will give you additional options to customize your alerts.

Installing the Overlays – Streamlabs OBS

The following steps are specific to Streamlabs OBS and the .overlay file. Only Streamlabs OBS can make use of the .overlay file. If you’re using streaming software other than Streamlabs OBS, please follow the steps in the “Overlays” and “Scenes” sections.

  1. Download and install StreamLabs OBS if you haven’t already
  2. Unzip the files you’ve downloaded onto your computer.
  3. Open/Run Streamlabs OBS.
  4. Open the Streamlabs OBS settings by clicking the settings wheel at the bottom left corner
  5. Click on “Scene Collections” on the left of the pop-up menu
  6. Click on “Import Overlay File”
  7. Browse to your unzipped files
  8. Select the “.overlay” file

*NOTE: After selecting the file, it may take several minutes to for all the resource to load. This will setup the transition (if included) and multiple Scenes (Starting, Ending, BRB etc…)

Creating your overlays

We’ve set up a few scenes for you already and have included most of the items available with your full download.

  • Duplicate any scenes that you need multiples of
  • Swap out any elements you would like to, from your main download (for example different icons or webcam border)
  • Change the label sources label type if desired, in the source properties

Installing the Overlays – Streamelements

In your downloaded files, open up the Streamelements alert folder.

  1. Head over to Streamelements.com and ensure you’re logged in.
  2. Double click the Streamelements Overlay set up link from your downloads
  3. This link will automatically open up the Streamelements website and begin the import.
  4. You should get a notification at the top of the Streamelements website stating the import was successful
  5. Head over to “My Overlays”
  6. You should now find the imported Overlay scenes named after the pack they are from, and what they’re intended for.
  7. Click on the “Launch Overlay” to get the URL for your alerts
  8. Paste this URL as a “Browser Source” in your streaming software.

*NOTE: The Streamelements links are specific to your platform. You can only use the Twitch link for Twitch, and YouTube for YouTube.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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 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 your 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.

Editing the Language and Text in Your Overlays

To change the language or text used in your overlays you may use the blank versions of our supporter sections / overlays. From there, you will need to add text sources with the text needed on top of your supporter sections. We recommend using the fonts listed above in the “before you install” section. You can also use image sources to add the icons we’ve included in your downloads as well.

Setting up your scenes in standard streaming software:

  1. The scenes will be divided up into media sources (video files), image sources, and text sources.
  2. Add any new media sources for each scene
  3. Set thees sources to looping, and select a local file
  4. To reduce CPU or encoding resources, make sure “Close File When Inactive” is checked
  5. Add in image sources for icons (found in the icon folder) if desired
  6. Add in text sources, using the recommended font, and place next to the icon if desired.
  7. 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 1000
  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. Select Browse for the “Video File” and choose the stinger file found in the “Screens” folder
  4. Make sure “Transition Point Type” is set to “Time (milliseconds)”
  5. Set the “Transition Point (milliseconds)” to 1000
  6. Leave other settings on their defaults
  7. Hit Done

Editing the Stinger After Effects File

We’ve included the stinger transition After Effects CC file for users that would like to edit the colors used in the stinger transition. This file is intended for users that have knowledge with AE, as we cannot provide support for it.

Once you’ve downloaded and unzipped the files from Nerd or Die, open up the files included. You’ll see a folder for the event list and standard alerts.

Event List

  1. Click the Widget Quick Setup link in your downloaded files to begin installing this event list.
  2. If you’d like, choose “Create Profile” and name it something appropriate such as “Kinetic”. 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 using a size of at least 800 by 600. This may change depending on the font sizes and amount of events you’d like to show.
  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.

Fire off a few test events to make sure that things are working properly.

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 have no effect on this widget
  • Font — allows you to pick the font family user in this package, the default font is Titillum.
  • 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 enable the animations coming from the right side .
  • DO NOT — change the custom HTML/CSS options unless you know HTML/CSS/JS – we do not support custom changes.

Custom Options

These options are found in the Custom Fields tab. They will give you additional options to control the appearence of your event list.

The widgets included in this package are set up specifically for Streamlabs users and some utilize the customization options now available.

  1. Click the appropriate “Quick Setup” link in your downloaded files (widgets folder) to begin installing these goal widgets.
  2. If you’d like, choose “Create Profile” and name it something appropriate such as “Kinetic”. The import link will only override the widgets that you’re choosing to install. For example: if you’re importing the design for a donation goal, this will not effect your alerts or goal widgets. This means you can import these into other existing profiles.
  3. Select “Use” for the profile you want to import into.
  4. Copy your widget URL.
  5. Paste this URL as a “Browser Source” in your streaming software. The width of this widget will adapt to the width set in your source properties. We recommend using 1050 width and 100 height. You can scale down within your streaming software if needed.

Custom Settings

If you’d like to make changes the colors, font, and orientation of the goal widget you can do so in the Settings > Custom Fields tab.

  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 “Kinetic”. 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.

After Effects project file (source)

While we have prepared this file up to be very user friendly, we do expect that you have experience with After Effects and methods of exporting video files. If you are not comfortable with the software, we do not recommend you include this in your purchase. Here are some basic instructions to get you started:

  1. Open the Kinetic AE File
  2. Select the “@Master Control” composition from the project list
  3. Find the “Color” layer within the composition, inspect the Effects and you will find global controls for the color of the entire package.
  4. Tweak these values to your liking
  5. “File > Export > Add to Render Queue” each composition as required. You will need to save as a format that supports alpha (.mov and .webm).

Changing the Icon Colors for the Alerts, Event List, and Alert List

If you’d like to edit the color of the alert icons or event list animations, you can do so with a color correction filter. Right click your sources and add a color correction filter, you can adjust the hue, brightness, and saturation of this source. Please note: this will change all the colors in this source. We recommend leaving the custom options at their default in order to get the best results.

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.


Changelog

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

  • No major updates yet!


Interface - Setup Guide

General Information

Thanks for checking out the Interface Stream Pack. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take 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 and other third party software is not required to use this product, however specific components can be edited in Photoshop and After Effects, as we provide some of the original files.

The alerts, overlays, and widgets have been designed for use with OBS Studio, Streamlabs OBS, XSplit, and BEBO. Please make sure your streaming software is up to date before using this product. If you are not familiar with how to set up and use streaming software, we strongly suggest checking out the below tutorial before moving on:

OBS Studios Tutorials by NerdOrDie

Before You Install

Fonts Used

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

Colors Used

  • Primary Red: #E6004E
  • Secondary (Dark): #00171C


Installation Guide

Alerts - Streamlabs

Installing the Alerts – Streamlabs

In your downloaded files, open up the standard alert folder.

  1. Click the Alerts Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as package name. The import link will only override your alert package. This means you can combine these alerts with any other scene collection/widgets 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. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software.

Once you’ve added this into your streaming software test the alerts to make sure they’re working properly.

Delaying Text-to-Speech

If you’re planning on using text-to-speech you may need to delay them from being read, as there is an intro animation and sounds. To do this, you can change the Alert Text Delay in the Streamlabs base options. If you’re using alert variations (such as re-subs) you will need to  update in the variations as well.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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.

Custom Alert Options

These options are found in the Custom Fields tab.

  • Font Family
  • Pause Time — How long the alert waits before it animates out
  • Top Text — First Area
  • Top Text — Second Area
  • Top Text — Font Size
  • Top Text — Text Color
  • Bottom Text
  • Bottom Text — Font Size
  • Bottom Text — Text Color
  • First Area of Top Text — Font Weight
  • All Other Font Weight — 
  • Letter Spacing – Pixels between each letter
  • Text Transform —
  • Shape Colors — Color of the corner shapes and scan lines
  • Background Colors — Color of background of the main alerts
  • Text Shadow Colors — Color of text behind the main alert text
  • Custom Sounds Volume — Set to 0 to mute custom sounds, and use Streamlabs default instead.
  • Intro Sound — Plays when alert appears
  • Looping Background Sound — Loops during alert
  • Outro Sound — Plays when alert animates out
  • User Message — Background Color
  • User Message — Background Color Opacity
  • User Message — Color box that appears while typing message

Installing the Alerts – Streamelements

In your downloaded files, open up the Streamelements alert folder.

  1. Head over to Streamelements.com and ensure you’re logged in.
  2. Double click the Streamelements Alert set up link from your downloads
  3. This link will automatically open up the Streamelements website and begin the import.
  4. You should get a notification at the top of the Streamelements website stating the import was successful
  5. Head over to “My Overlays”
  6. You should now find the imported alerts named after the pack they are from.
  7. Click on the “Launch Overlay” to get the URL for your alerts
  8. Paste this URL as a “Browser Source” in your streaming software.

*NOTE: The Streamelements links are specific to your platform. You can only use the Twitch link for Twitch, and YouTube for YouTube.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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.

Custom Alert Options

These options are found in the Custom Fields tab.

  • Font Family
  • Pause Time — How long the alert waits before it animates out
  • Top Text — First Area
  • Top Text — Second Area
  • Top Text — Font Size
  • Top Text — Text Color
  • Bottom Text
  • Bottom Text — Font Size
  • Bottom Text — Text Color
  • First Area of Top Text — Font Weight
  • All Other Font Weight — 
  • Letter Spacing – Pixels between each letter
  • Text Transform —
  • Shape Colors — Color of the corner shapes and scan lines
  • Background Colors — Color of background of the main alerts
  • Text Shadow Colors — Color of text behind the main alert text
  • Custom Sounds Volume — Set to 0 to mute custom sounds, and use Streamlabs default instead.
  • Intro Sound — Plays when alert appears
  • Looping Background Sound — Loops during alert
  • Outro Sound — Plays when alert animates out
  • User Message — Background Color
  • User Message — Background Color Opacity
  • User Message — Color box that appears while typing message

Installing Alerts, Goals, Chatbox and other Widgets in Streamlabs (If included)

In your downloaded files, open the folder to the widget you would like to install.

*(Alerts are a separate download. All other widgets can be found with the Overlays download)
  1. Click the Quick Setup link to begin installing the Widget.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as package name. The import link will only override your selected widget. This means you can combine these with any other scene collection/widgets you’ve made in Streamlabs. If you want to save your old widgets, it’s highly recommended you create the new profile.
  3. Select “Use” for the profile you want to import into.
  4. The page will automatically take you to the Widget settings for the widget you just imported.
  5. Click on the “Copy” button next to the unique URL.
  6. Paste this URL as a “Browser Source” in your streaming software.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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.

Installing Alerts, Goals, Chatbox and other Widgets in Streamelements (If included)

In your downloaded files, open the folder to the widget you would like to install.

*(Alerts are a separate download. All other widgets can be found with the Overlays download)

In your downloaded files, open up the Streamelements Widget or Alert folder.

  1. Head over to Streamelements.com and ensure you’re logged in to the correct account.
  2. Double click the Streamelements Quick Setup link for the widget you want to import.
  3. This link will automatically open up the Streamelements website and begin the import.
  4. You should get a notification at the top of the Streamelements website stating the import was successful
  5. Head over to “My Overlays”
  6. You should now find the imported widget named after the pack they are from.
  7. Click on the “Launch Overlay” to get the URL for your alerts
  8. Paste this URL as a “Browser Source” in your streaming software.

*NOTE: The Streamelements links are specific to your platform. You can only use the Twitch link for Twitch, and YouTube for YouTube, and Facebook for Facebook.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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.

Installing the Overlays – Streamlabs OBS

The following steps are specific to Streamlabs OBS and the .overlay file. Only Streamlabs OBS can make use of the .overlay file. If you’re using streaming software other than Streamlabs OBS, please follow the steps in the “Overlays” and “Scenes” sections.

  1. Download and install StreamLabs OBS if you haven’t already
  2. Unzip the files you’ve downloaded onto your computer.
  3. Open/Run Streamlabs OBS.
  4. Open the Streamlabs OBS settings by clicking the settings wheel at the bottom left corner
  5. Click on “Scene Collections” on the left of the pop-up menu
  6. Click on “Import Overlay File”
  7. Browse to your unzipped files
  8. Select the “.overlay” file

*NOTE: After selecting the file, it may take several minutes to for all the resource to load. This will setup the transition (if included) and multiple Scenes (Starting, Ending, BRB etc…)

Creating your overlays

We’ve set up a few scenes for you already and have included most of the items available with your full download.

  • Duplicate any scenes that you need multiples of
  • Swap out any elements you would like to, from your main download (for example different icons or webcam border)
  • Change the label sources label type if desired, in the source properties

Installing the Overlays – Streamelements

In your downloaded files, open up the Streamelements alert folder.

  1. Head over to Streamelements.com and ensure you’re logged in.
  2. Double click the Streamelements Overlay set up link from your downloads
  3. This link will automatically open up the Streamelements website and begin the import.
  4. You should get a notification at the top of the Streamelements website stating the import was successful
  5. Head over to “My Overlays”
  6. You should now find the imported Overlay scenes named after the pack they are from, and what they’re intended for.
  7. Click on the “Launch Overlay” to get the URL for your alerts
  8. Paste this URL as a “Browser Source” in your streaming software.

*NOTE: The Streamelements links are specific to your platform. You can only use the Twitch link for Twitch, and YouTube for YouTube.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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 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.

Editing the Language and Text in Your Overlays

To change the language or text used in your overlays you may use the blank versions of our supporter sections / overlays. From there, you will need to add text sources with the text needed on top of your supporter sections. We recommend using the fonts listed above in the “before you install” section. You can also use image sources to add the icons we’ve included in your downloads as well.

Setting up your scenes in standard streaming software:

  1. The scenes will be divided up into media sources (video files), image sources, and text sources.
  2. Add any new media sources for each scene
  3. Set thees sources to looping, and select a local file
  4. To reduce CPU or encoding resources, make sure “Close File When Inactive” is checked
  5. Add in image sources for icons (found in the icon folder) if desired
  6. Add in text sources, using the recommended font, and place next to the icon if desired.
  7. 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 2000
  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 4000
  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 2000
  7. Leave other settings on their defaults
  8. Hit Done

Editing the Stinger After Effects File

We’ve included the stinger transition After Effects CC file for users that would like to edit the colors used in the stinger transition. This file is intended for users that have knowledge with AE, as we cannot provide support for it.

  1. Open the Interface AE File
  2. In the Interface Stinger comp and scrub to an area that shows the graphics
  3. Select the Control Layer
  4. In the Master Controls panel for this layer, use the control color options to change the colors as needed
  5. Enable “Toggle Transparency Grid” before rendering
  6. Render the Interface Stinger comp as a compatible stinger file (.mov or .webm)

After Effects project file (source)

While we have prepared this file up to be very user friendly, we do expect that you have experience with After Effects and methods of exporting video files. If you are not comfortable with the software, we do not recommend you include this in your purchase. Here are some basic instructions to get you started:

  1. Open the Interface AE File
  2. Select the “@Master Control” composition from the project list
  3. Find the “Color” layer within the composition, inspect the Effects and you will find global controls for the color of the entire package.
  4. Tweak these values to your liking
  5. “File > Export > Add to Render Queue” each composition as required. You will need to save as a format that supports alpha (.mov and .webm).

Changing the Icon Colors for the Alerts, Event List, and Alert List

If you’d like to edit the color of the alert icons or event list animations, you can do so with a color correction filter. Right click your sources and add a color correction filter, you can adjust the hue, brightness, and saturation of this source. Please note: this will change all the colors in this source. We recommend leaving the custom options at their default in order to get the best results.

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.


Changelog

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

  • No major updates yet!


Christmas Overlay + Snow Machine Setup Guide

General Information

Thanks for checking out the Free Christmas Overlays and Widgets. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take 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 and other third party software is not required to use this product, however specific components can be edited in Photoshop.

The alerts and overlays have been designed for use with OBS Studio, Streamlabs OBS and XSplit. Please make sure your streaming software is up to date before using this product. If you are not familiar with how to set up and use streaming software, we strongly suggest checking out the below tutorial before moving on:

OBS Studios Tutorials by NerdOrDie

Before You Install

Fonts Used

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

Colors Used

  • Black: #000000
  • Gold: #C29F4C
  • White: #FFFFFF


Installation Guide

The snow machine is a browser source widget that you can use with most streaming software. Performance works best with software that has “Hardware Acceleration enabled”.

Adding the Snow Machine

  1. Unzip the files included with your download
  2. Add a “Browser Source” to your streaming software
  3. Select local file, and select the HTML file found in the “Preset” Folder
  4. Set the width and height to your desired amount
  5. We recommend disabling “Shutdown Source When Not Visible” and “Refresh Browser when scene becomes active” as this will cause the snow machine to restart.

Creating Custom Settings

We will be releasing a YouTube video about custom settings, coming soon.

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 and text sources to add custom text needed.
  6. Please use any demo images or movies for reference on recommended layouts.

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 1000
  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 1000
  7. Leave other settings on their defaults
  8. Hit Done

Setting up your scenes in standard streaming software:

  1. The scenes will be divided up into media sources (video files), image sources, and text sources.
  2. Add any new media sources for each scene
  3. Set these sources to looping, and select a local file
  4. To reduce CPU or encoding resources, make sure “Close File When Inactive” is checked
  5. Add in text sources, using the recommended font, and place next to the icon if desired.
  6. 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.

The widgets included in this package are set up specifically for Streamlabs users and some utilize the customization options now available.

  1. Click the appropriate “Quick Setup” link in your downloaded files (widgets folder) to begin installing these alerts.
  2. If you’d like, choose “Create Profile” and name it something appropriate such as “Christmas Goals”. The import link will only override the widgets that you’re choosing to install. For example: if you’re importing the design for a donation goal, this will not effect your alerts or goal widgets.
  3. Select “Use” for the profile you want to import into.
  4. Copy your widget URL.
  5. Paste this URL as a “Browser Source” in your streaming software. We recommend setting the size to at least 910 wide by 200 in height. If you’re using the StreamLabs OBS .overlay file, you may not need to complete this step if your widget boxes are already added in.

More Options

You can find more options in the “Custom Fields” tab for each widget. Click on the “Settings” tab and scroll down to find the “Custom Fields” tab.

  • Characters Before Goal – The text characters that will appear before your goal. For example you can enter “$” here.
  • Characters After Goal – The text characters that will appear after your goal. For example you can enter “bits” here.
  • Bell Ring Count – How many times the bell rings on goal met. Set to -1 for infinite.
  • Goal Met Sound – The sound file to play when the goal is reached.
  • Goal Met Volume – The volume of the sound that plays when the goal is reached. Set to “0” to mute.

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. Unzip the “Crusader” files you’ve downloaded onto your computer.
  3. Open the Streamlabs OBS “Settings” (top right “gear” icon).
  4. Click the “Scene Collections” tab.
  5. Select “Import Overlay File” and then select the .overlay file. This file is included in the “Streamlabs OBS” folder.
  6. Adjust any text sources to customize for your stream.
  7. Add any alert sources as needed (you may want to resize the Alert Box sizes in the properties of this source).
  8. 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.

Important

For any video file, you will need to enable “Close File When Inactive”, as this may not be checked by default. If you do not do this, your video files will run while not showing, and use a significant amount of CPU or Encoding Resources.

Creating your overlays

We’ve set up a few scenes for you already and have included most of the items available with your full download.

  • Duplicate any scenes that you need multiples of
  • Swap out any elements you would like to, from your main download (for example different icons or webcam border)
  • Change the label sources label type if desired, in the source properties

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.


Changelog

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

  • No major updates yet!


Dropzone - Setup Guide

General Information

Thanks for checking out the Dropzone Stream Pack. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take 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 and other third party software is not required to use this product, however specific components can be edited in Photoshop.

The alerts and overlays have been designed for use with OBS Studio, Streamlabs OBS and XSplit. Please make sure your streaming software is up to date before using this product. If you are not familiar with how to set up and use streaming software, we strongly suggest checking out the below tutorial before moving on:

OBS Studios Tutorials by NerdOrDie

Before You Install

Fonts Used

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

Colors Used

  • Base Colors:
    • Black: #000000
    • Gold: #C29F4C
    • White: #FFFFFF
  • Pack Colors:
    • Orange: #FFB000
    • Pink: #FF00F8
    • Green: #0BFF00
    • Blue: #00AFFF


Installation Guide

Installing the Alerts – Streamlabs

In your downloaded files, open up the standard alert folder.

  1. Click the Alerts Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as package name. The import link will only override your alert package. This means you can combine these alerts with any other scene collection/widgets 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. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software.

Once you’ve added this into your streaming software test the alerts to make sure they’re working properly.

Delaying Text-to-Speech

If you’re planning on using text-to-speech you may need to delay them from being read, as there is an intro animation and sounds. To do this, you can change the Alert Text Delay in the Streamlabs base options. If you’re using alert variations (such as re-subs) you will need to  update in the variations as well.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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.

Changing Alerts Color

This pack comes with 5 different color choices. The default alerts imported are orange. If you’d like to change your alerts, use the following process:

*Please make sure to extract the alert files in the download prior to starting this process*

  1. Head over to your alert customizations (Widget > Alerts)
  2. Click on the alert you would like to change
  3. In the default “Image” location, click on the small picture square
  4. A pop up window will appear
  5. Click on the Green Cloud icon
  6. Search for the file you would like to use
  7. Allow the chosen file a brief moment to be uploaded
  8. Click “Select” at the bottom right hand corner.
  9. Lastly, scroll to the bottom of the alert settings and click “Save”

Installing the Alerts – Streamelements

In your downloaded files, open up the Streamelements alert folder.

  1. Head over to Streamelements.com and ensure you’re logged in.
  2. Double click the Streamelements Alert set up link from your downloads
  3. This link will automatically open up the Streamelements website and begin the import.
  4. You should get a notification at the top of the Streamelements website stating the import was successful
  5. Head over to “My Overlays”
  6. You should now find the imported alerts named after the pack they are from.
  7. Click on the “Launch Overlay” to get the URL for your alerts
  8. Paste this URL as a “Browser Source” in your streaming software.

*NOTE: The Streamelements links are specific to your platform. You can only use the Twitch link for Twitch, and YouTube for YouTube.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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.

Changing Alerts Color

This pack comes with 5 different color choices. The default alerts imported are orange. If you’d like to change your alerts, use the following process:

*Please make sure to extract the alert files in the download prior to starting this process*

  1. Head over to your alert customizations (Widget > Alerts)
  2. Click on the alert you would like to change
  3. In the default “Image” location, click on the small picture square
  4. A pop up window will appear
  5. Click on the Green Cloud icon
  6. Search for the file you would like to use
  7. Allow the chosen file a brief moment to be uploaded
  8. Click “Select” at the bottom right hand corner.
  9. Lastly, scroll to the bottom of the alert settings and click “Save”

Installing the Overlays – Streamlabs OBS

The following steps are specific to Streamlabs OBS and the .overlay file. Only Streamlabs OBS can make use of the .overlay file. If you’re using streaming software other than Streamlabs OBS, please follow the steps in the “Overlays” and “Scenes” sections.

  1. Download and install StreamLabs OBS if you haven’t already
  2. Unzip the files you’ve downloaded onto your computer.
  3. Open/Run Streamlabs OBS.
  4. Open the Streamlabs OBS settings by clicking the settings wheel at the bottom left corner
  5. Click on “Scene Collections” on the left of the pop-up menu
  6. Click on “Import Overlay File”
  7. Browse to your unzipped files
  8. Select the “.overlay” file

*NOTE: After selecting the file, it may take several minutes to for all the resource to load. This will setup the transition (if included) and multiple Scenes (Starting, Ending, BRB etc…)

Creating your overlays

We’ve set up a few scenes for you already and have included most of the items available with your full download.

  • Duplicate any scenes that you need multiples of
  • Swap out any elements you would like to, from your main download (for example different icons or webcam border)
  • Change the label sources label type if desired, in the source properties

Installing the Overlays – Streamelements

In your downloaded files, open up the Streamelements alert folder.

  1. Head over to Streamelements.com and ensure you’re logged in.
  2. Double click the Streamelements Overlay set up link from your downloads
  3. This link will automatically open up the Streamelements website and begin the import.
  4. You should get a notification at the top of the Streamelements website stating the import was successful
  5. Head over to “My Overlays”
  6. You should now find the imported Overlay scenes named after the pack they are from, and what they’re intended for.
  7. Click on the “Launch Overlay” to get the URL for your alerts
  8. Paste this URL as a “Browser Source” in your streaming software.

*NOTE: The Streamelements links are specific to your platform. You can only use the Twitch link for Twitch, and YouTube for YouTube.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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 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.

Editing the Language and Text in Your Overlays

To change the language or text used in your overlays you may use the blank versions of our supporter sections / overlays. From there, you will need to add text sources with the text needed on top of your supporter sections. We recommend using the fonts listed above in the “before you install” section. You can also use image sources to add the icons we’ve included in your downloads as well.

Setting up your scenes in standard streaming software:

  1. The scenes will be divided up into media sources (video files), image sources, and text sources.
  2. Add any new media sources for each scene
  3. Set thees sources to looping, and select a local file
  4. To reduce CPU or encoding resources, make sure “Close File When Inactive” is checked
  5. Add in image sources for icons (found in the icon folder) if desired
  6. Add in text sources, using the recommended font, and place next to the icon if desired.
  7. 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 2000
  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 2000
  7. Leave other settings on their defaults
  8. Hit Done

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.


Changelog

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

  • No major updates yet!


Crusader - Setup Guide

General Information

Thanks for checking out the Crusader Stream Pack. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take 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 and other third party software is not required to use this product, however specific components can be edited in Photoshop.

The alerts and overlays have been designed for use with OBS Studio, Streamlabs OBS and XSplit. Please make sure your streaming software is up to date before using this product. If you are not familiar with how to set up and use streaming software, we strongly suggest checking out the below tutorial before moving on:

OBS Studios Tutorials by NerdOrDie

Before You Install

Fonts Used

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

Colors Used

  • Black: #000000
  • Gold: #C29F4C
  • White: #FFFFFF


Installation Guide

Installing the Alerts – Streamlabs

In your downloaded files, open up the standard alert folder.

  1. Click the Alerts Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as package name. The import link will only override your alert package. This means you can combine these alerts with any other scene collection/widgets 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. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software.

Once you’ve added this into your streaming software test the alerts to make sure they’re working properly.

Delaying Text-to-Speech

If you’re planning on using text-to-speech you may need to delay them from being read, as there is an intro animation and sounds. To do this, you can change the Alert Text Delay in the Streamlabs base options. If you’re using alert variations (such as re-subs) you will need to  update in the variations as well.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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.

Installing the Alerts – Streamelements

In your downloaded files, open up the Streamelements alert folder.

  1. Head over to Streamelements.com and ensure you’re logged in.
  2. Double click the Streamelements Alert set up link from your downloads
  3. This link will automatically open up the Streamelements website and begin the import.
  4. You should get a notification at the top of the Streamelements website stating the import was successful
  5. Head over to “My Overlays”
  6. You should now find the imported alerts named after the pack they are from.
  7. Click on the “Launch Overlay” to get the URL for your alerts
  8. Paste this URL as a “Browser Source” in your streaming software.

*NOTE: The Streamelements links are specific to your platform. You can only use the Twitch link for Twitch, and YouTube for YouTube.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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.

Installing the Overlays – Streamlabs OBS

The following steps are specific to Streamlabs OBS and the .overlay file. Only Streamlabs OBS can make use of the .overlay file. If you’re using streaming software other than Streamlabs OBS, please follow the steps in the “Overlays” and “Scenes” sections.

  1. Download and install StreamLabs OBS if you haven’t already
  2. Unzip the files you’ve downloaded onto your computer.
  3. Open/Run Streamlabs OBS.
  4. Open the Streamlabs OBS settings by clicking the settings wheel at the bottom left corner
  5. Click on “Scene Collections” on the left of the pop-up menu
  6. Click on “Import Overlay File”
  7. Browse to your unzipped files
  8. Select the “.overlay” file

*NOTE: After selecting the file, it may take several minutes to for all the resource to load. This will setup the transition (if included) and multiple Scenes (Starting, Ending, BRB etc…)

Creating your overlays

We’ve set up a few scenes for you already and have included most of the items available with your full download.

  • Duplicate any scenes that you need multiples of
  • Swap out any elements you would like to, from your main download (for example different icons or webcam border)
  • Change the label sources label type if desired, in the source properties

Installing the Overlays – Streamelements

In your downloaded files, open up the Streamelements alert folder.

  1. Head over to Streamelements.com and ensure you’re logged in.
  2. Double click the Streamelements Overlay set up link from your downloads
  3. This link will automatically open up the Streamelements website and begin the import.
  4. You should get a notification at the top of the Streamelements website stating the import was successful
  5. Head over to “My Overlays”
  6. You should now find the imported Overlay scenes named after the pack they are from, and what they’re intended for.
  7. Click on the “Launch Overlay” to get the URL for your alerts
  8. Paste this URL as a “Browser Source” in your streaming software.

*NOTE: The Streamelements links are specific to your platform. You can only use the Twitch link for Twitch, and YouTube for YouTube.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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 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.

Editing the Language and Text in Your Overlays

To change the language or text used in your overlays you may use the blank versions of our supporter sections / overlays. From there, you will need to add text sources with the text needed on top of your supporter sections. We recommend using the fonts listed above in the “before you install” section. You can also use image sources to add the icons we’ve included in your downloads as well.

Setting up your scenes in standard streaming software:

  1. The scenes will be divided up into media sources (video files), image sources, and text sources.
  2. Add any new media sources for each scene
  3. Set thees sources to looping, and select a local file
  4. To reduce CPU or encoding resources, make sure “Close File When Inactive” is checked
  5. Add in image sources for icons (found in the icon folder) if desired
  6. Add in text sources, using the recommended font, and place next to the icon if desired.
  7. 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 1000
  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 2000
  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 1000
  7. Leave other settings on their defaults
  8. Hit Done

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.


Changelog

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

  • No major updates yet!


Uplink_stream_readme_banner

The Lucky Spin Slot Machine Widgets - Setup Guide

General Information

Thanks for checking out the Lucky Spin Slot Machine Widgets. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take 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.

The widgets have been designed for use with OBS Studio, Streamlabs OBS, XSplit, and BEBO. Please make sure your streaming software is up to date before using this product. If you are not familiar with how to set up and use streaming software, we strongly suggest checking out the below tutorial before moving on:

OBS Studios Tutorials by NerdOrDie


Installation Guide

Installing the Alerts

Once you’ve downloaded and unzipped the files, open up the alert folder. You’ll see a few folders and links. Open up the Streamlabs folder to get started with the installation.

  1. Click the Alerts Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as “Lucky Spin Slot Machine”. 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. However, if you want to override your current alerts, and use this with an event list or something like that, you can choose whichever profile you’d like.
  3. Select “Use” for the profile you want to import into.
  4. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software. The default size of 800 by 600 will work just fine, but if you want to display user messages under the slots, then we recommend bumping that up to around 800 to 1000. If you need to scale down, you can do so directly inside of OBS Studio.

Once you’ve added this into your streaming software test the alerts to make sure they’re working properly.

Delaying Text-to-Speech

If you’re planning on using text-to-speech you may need to delay them from being read, as there is an intro animation. To do this, you can change the Alert Text Delay in the Streamlabs base options. If you’re using alert variations (such as re-subs) you will need to  update in the variations as well.

The Uplink Slot Machine a theme for the Lucky Spin Slot Machine.

Custom Fields

The custom fields will control various aspects of your slot machine. Please find the “custom fields” tab in each alert to make the changes needed.

  • Font Family – decides what font to use for the alerts. Please note that the user message will need to be adjusted in its own tab.
  • Chance to win – percentage chance that a spin wins.
  • Chance to match two – percentage chance that the widget has a chance to match two slots, but still lose.
  • Motion blur – adds blur to the icons while they spin. This can use a bit of CPU, but honestly makes the overall movement of the icons to look so much better. I recommend setting this to 1 or at most 2.
  • Enable Text – choose if you want the username and tag text that’s displayed above the slot machine to show. If you just want to hide this info, just set this to “no”
  • Line One and Line Two options – Line one represents the top line of the text area, generally where the username is, and line two represents the line of text below that, in our tip alert example, this will be the line with the amount tipped.
  • Text Templates – dynamic text template to display, you can enter in name, amount, count, etc. here inside of curly braces, or simply use plain text aswell.
  • Text color – will be the color of the text in each respective area.
  • Background color – color behind each text area.
  • Background Opacity – how opaque or see through this color is. Having this higher will make the color more solid, lower will make it more see through.
  • Slot machine frames colors – includes primary, secondary, and tertiary colors. Changing these options will effect various parts of the design, so if you look at the actual frame of the slot machine, you should get a sense of where each of these options will change.
  • Icons  colors – includes primary, secondary, and tertiary colors. These icon color settings will allow you to change our preset icons to whatever colors you’d like.
  • Optional – Custom Icon Sheet – allows you to upload your own custom sprite sheet. We’ve included a template that you can use to create your own icon sheet, inside of Photoshop. Sprite sheet template has cells that are 72×72 pixels.
  • Do you want to display the background copy? – While this option may use slightly more CPU, it should not have much impact on your system. However, if you’re very CPU conscious or if you just don’t like the look of the copied shadow graphic, you can disable that here.
  • Background Copy – djust the opacity of the cloned area.
  • Background Copy – X and Y offset will adjust where the background copy is located.
  • Volume slider – adjust the volume of the included custom sounds.
  • Sound files for the slot machine. You may upload and change the sound files as you see fit.
  • Sound that plays when the slot machine appears/starts
  • Match sounds – sounds that will play once each reel stops, and they will be dynamic for if you match 1, 2, or 3 icons. In our included example, the tone and excitement of the sound amps up as you match more.
  • Spinning Sound – sound that the reels make while they’re spinning.
  • Winner sound – plays all slot reels match.
  • Loser sound – no one wants to hear this one.

Important: when backing up, restoring, or transferring custom fields, you can only use the specific theme with their unique custom fields. For instance, if doing this for the Uplink theme, you must use the Uplink Custom Fields.

Backing Up Your Custom Fields

  • Click on the “Edit Custom Fields” button, again be very careful to not delete or change anything here.
  • Click inside of the text box, right click, and hit select all. This will select all of the code inside of the custom fields tab.
  • Now, right click and hit copy, to copy all of the code.
  • Before you do anything else, hit the “Update” version to close the custom field editor. It is very important that you click the update button before you move on to the next step. You’ll know this has been done properly if the code is now gone, and you’re presented with the options from before.
  • Open up a text editor on your computer, the most simple program for this is notepad.
  • Paste in your copied code, by using right click and paste, into the notepad.
  • Save this as a text file.

Restoring or Transferring Your Custom Fields

You can use any backed up code to restore or transform your custom fields from alert to another.

  • Open your backed up custom fields and copy all of the custom code, you can do this with right click and select all followed by right clip and copy.
  • Select the alert that you’d like to import your custom options to.
  • Scroll down to the custom fields tab, and click the “Edit Custom Fields” button.
  • Select all of the text inside again by right clicking and clicking select all, then hit backspace to delete all of the code.
  • Finally, paste in the code that we have copied, by using right click and paste, then hit “Update” to apply this code.
  • Hit save changes and test your alert.

Creating a Slot Machine Alert in an Existing Widget Theme / Alert Set

Caution: this method will override any existing alerts. If you need to restore your alerts to defaults, you can use the “Reset Code” button found under the Custom HTML, CSS, and JS tabs.

This example will explain how to use your current alert theme with your regular tips, but then use the slot machine for the top tipper of your session. Please note that you can use this method in any standard alert or alert variation.

  1. Inside the alert widget theme that you want to add the slot machine to, open up the donation tab. For this instance, we’re going to create a variation, but please note that this method can work with standard alerts as well.
  2. In the variation tab we’re going to click “Add a variation with default settings.”
  3. Set the variation name and condition towards the top. The other options, with the exception of the alert duration, do not matter in this case. You will need to set the alert duration to an appropriate time to account for the winning animation and sound. Generally this is around 14-16 seconds.
  4. Click Enable Custom HTML/CSS.
  5. Completely delete all code in all three of these tabs (HTML, CSS, JS). Right click and select all when active inside of the text boxes, then hit delete or backspace.
  6. Open the downloaded files, and open up the “code” folder for the theme you’d like to install.
  7. Open up the HTML text file. Select all the code here with right click and select all, then copy with right click and copy.
  8. Go back into Streamlabs and paste inside the HTML tab with right click and paste.
  9. Go back into the code folder, open the Custom Fields text file (make sure you are using the same theme for both the HTML and custom field steps),
  10. Back in Streamlabs, click the “add custom fileds” button, select the custom fields tab. Delete all the code that is in by default.
  11. Paste in the code you have copied with right click and paste.
  12. Hit update to apply the custom fields. Tweak your custom fields as needed.  You will likely need to add in the sounds as well, which can be done the standard method of uploading sounds in Streamlabs. If the options are not working properly, you may need to refresh the page AFTER saving changes.
  13. Save settings and test your variation.

You can repeat this process in any type of alert, to make it a slot machine alert. You can also use your backed up custom field code (from the same theme) instead of using the default custom code you’ve downloaded.

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.


Changelog

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

  • No major updates yet!


Apex - Setup Guide

General Information

Thanks for checking out the Apex Stream Pack. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take 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 and other third party software is not required to use this product, however specific components can be edited in Photoshop and After Effects, as we provide some of the original files.

The alerts, overlays, and widgets have been designed for use with OBS Studio, Streamlabs OBS, XSplit, and BEBO. Please make sure your streaming software is up to date before using this product. If you are not familiar with how to set up and use streaming software, we strongly suggest checking out the below tutorial before moving on:

OBS Studios Tutorials by NerdOrDie

Before You Install

Fonts Used

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

Colors Used

  • Accent Red: #F65945
  • Navy Blue: #122F49
  • White: #FFFFFF


Installation Guide

Installing the Alerts – Streamlabs

In your downloaded files, open up the standard alert folder.

  1. Click the Alerts Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as package name. The import link will only override your alert package. This means you can combine these alerts with any other scene collection/widgets 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. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software.

Once you’ve added this into your streaming software test the alerts to make sure they’re working properly.

Delaying Text-to-Speech

If you’re planning on using text-to-speech you may need to delay them from being read, as there is an intro animation and sounds. To do this, you can change the Alert Text Delay in the Streamlabs base options. If you’re using alert variations (such as re-subs) you will need to  update in the variations as well.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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.

Custom Alert Options

These options are found in the Custom Fields tab. Some alerts do not contain all of the options listed below.

  • Font Family – The font family used in the alerts. The default is Titillium Web.
  • Top Line Text Template – The text template towards the top of the alert. You may use tags such as {name}, {months}, {count}, etc. here.
  • Bottom Line Text Template – The text template bottom the top of the alert. You may use tags such as {name}, {months}, {count}, etc. here.
  • Alert Pause Time – How long the alert pauses for after the initial animation. This is not equal to total duration. If you’d like to adjust the total duration you will also need to change the default alert duration setting.
  • Primary Color – The main color used in the alert. This color generally appears behind the section that we include the username in by default.
  • Secondary Color – The accent color used. This color will be used in various parts as accents or highlights.
  • Square Color – At the beginning of each event you will see a square that animates in, use this option to adjust that color.
  • Top Line – Font Color – The color of the font on the top line.
  • Top Line – Font Size – The size of the font on the top line.
  • Top Line – Font Weight – The weight of the font on the top line. Please note that not all fonts support multiple weights.
  • Top Line – Y Offset – The vertical offset, in pixels, to adjust the top line. We just this to center the top line in certain alerts. This option will be helpful when you adjust font sizes, but want to retain a specific appearance.
  • Bottom Line – Font Color – The color of the font on the top line.
  • Bottom Line – Font Size – The size of the font on the top line.
  • Bottom Line – Font Weight – The weight of the font on the top line. Please note that not all fonts support multiple weights.
  • Bottom Line – Y Offset – The vertical offset, in pixels, to adjust the bottom line. We just this to center the bottom line in certain alerts. This option will be helpful when you adjust font sizes, but want to retain a specific appearance.
  • Icon One Color – First Bit Icon to Appear – In the bit alert, an icon appears and then is covered up. This is the color used when you first see that icon.
  • Icon Two Color – Second Bit Icon to Appear – In the bit alert, an icon appears and then is covered up. This is the color used when you see the icon for the second time.

Installing the Alerts – Streamelements

In your downloaded files, open up the Streamelements alert folder.

  1. Head over to Streamelements.com and ensure you’re logged in.
  2. Double click the Streamelements Alert set up link from your downloads
  3. This link will automatically open up the Streamelements website and begin the import.
  4. You should get a notification at the top of the Streamelements website stating the import was successful
  5. Head over to “My Overlays”
  6. You should now find the imported alerts named after the pack they are from.
  7. Click on the “Launch Overlay” to get the URL for your alerts
  8. Paste this URL as a “Browser Source” in your streaming software.

*NOTE: The Streamelements links are specific to your platform. You can only use the Twitch link for Twitch, and YouTube for YouTube.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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.

Custom Alert Options

These options are found in the Custom Fields tab. Some alerts do not contain all of the options listed below.

  • Font Family – The font family used in the alerts. The default is Titillium Web.
  • Top Line Text Template – The text template towards the top of the alert. You may use tags such as {name}, {months}, {count}, etc. here.
  • Bottom Line Text Template – The text template bottom the top of the alert. You may use tags such as {name}, {months}, {count}, etc. here.
  • Alert Pause Time – How long the alert pauses for after the initial animation. This is not equal to total duration. If you’d like to adjust the total duration you will also need to change the default alert duration setting.
  • Primary Color – The main color used in the alert. This color generally appears behind the section that we include the username in by default.
  • Secondary Color – The accent color used. This color will be used in various parts as accents or highlights.
  • Square Color – At the beginning of each event you will see a square that animates in, use this option to adjust that color.
  • Top Line – Font Color – The color of the font on the top line.
  • Top Line – Font Size – The size of the font on the top line.
  • Top Line – Font Weight – The weight of the font on the top line. Please note that not all fonts support multiple weights.
  • Top Line – Y Offset – The vertical offset, in pixels, to adjust the top line. We just this to center the top line in certain alerts. This option will be helpful when you adjust font sizes, but want to retain a specific appearance.
  • Bottom Line – Font Color – The color of the font on the top line.
  • Bottom Line – Font Size – The size of the font on the top line.
  • Bottom Line – Font Weight – The weight of the font on the top line. Please note that not all fonts support multiple weights.
  • Bottom Line – Y Offset – The vertical offset, in pixels, to adjust the bottom line. We just this to center the bottom line in certain alerts. This option will be helpful when you adjust font sizes, but want to retain a specific appearance.
  • Icon One Color – First Bit Icon to Appear – In the bit alert, an icon appears and then is covered up. This is the color used when you first see that icon.
  • Icon Two Color – Second Bit Icon to Appear – In the bit alert, an icon appears and then is covered up. This is the color used when you see the icon for the second time.

Installing Alerts, Goals, Chatbox and other Widgets in Streamlabs (If included)

In your downloaded files, open the folder to the widget you would like to install.

*(Alerts are a separate download. All other widgets can be found with the Overlays download)
  1. Click the Quick Setup link to begin installing the Widget.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as package name. The import link will only override your selected widget. This means you can combine these with any other scene collection/widgets you’ve made in Streamlabs. If you want to save your old widgets, it’s highly recommended you create the new profile.
  3. Select “Use” for the profile you want to import into.
  4. The page will automatically take you to the Widget settings for the widget you just imported.
  5. Click on the “Copy” button next to the unique URL.
  6. Paste this URL as a “Browser Source” in your streaming software.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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.

Custom Options

These options are found in the Custom Fields tab.

  • Layout Type – You can choose either “vertical” or “horizontal”. Vertical will make the events stack vertically. Horizontal will cause the event list to span horizontally, across your screen. You can set the width to whatever you’d like, when using the horizontal option.
  • Name – Font Color – The font color of the names.
  • Name – Font Size – The font size of the names.
  • Name – Font Weight – The thickness of the names.
  • Name – Y-Offset – The vertical offset of the names. This is useful if you change the font family or font size, and want to adjust the position of the names.
  • Name Letter Spacing – The distance between each letter in the names.
  • Tag – Font Color – The font color of the tags.
  • Tag – Font Size – The font size of the tags.
  • Tag – Font Weight – The thickness of the tags.
  • Tag – Y-Offset – The vertical offset of the names. This is useful if you change the font family or font size, and want to adjust the position of the names.
  • Tag Letter Spacing – The distance between each letter in the tags.
  • Primary Color – The main color used in the event list, this color will be the last color to animate and be shown behind the text.
  • Secondary Color – The accent or highlight color used.
  • Square Color – At the beginning of each event you will see a square that animates in, use this option to adjust that color.
  • Icon Color – The color of the icon.
  • Background Opacity – The opacity of background colors. You can set this to “0” to disable the colors completely.
  • Fade Out Position – Where do you want to start events fading out at? Meaning, if this is set to 4 then the 4th event and after will be faded out.
  • Fade Out Opacity – How much you want to fade out the events at the fade out position. The lower this is, the more see-through the events will be.

Installing Alerts, Goals, Chatbox and other Widgets in Streamelements (If included)

In your downloaded files, open the folder to the widget you would like to install.

*(Alerts are a separate download. All other widgets can be found with the Overlays download)

In your downloaded files, open up the Streamelements Widget or Alert folder.

  1. Head over to Streamelements.com and ensure you’re logged in to the correct account.
  2. Double click the Streamelements Quick Setup link for the widget you want to import.
  3. This link will automatically open up the Streamelements website and begin the import.
  4. You should get a notification at the top of the Streamelements website stating the import was successful
  5. Head over to “My Overlays”
  6. You should now find the imported widget named after the pack they are from.
  7. Click on the “Launch Overlay” to get the URL for your alerts
  8. Paste this URL as a “Browser Source” in your streaming software.

*NOTE: The Streamelements links are specific to your platform. You can only use the Twitch link for Twitch, and YouTube for YouTube, and Facebook for Facebook.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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.

Custom Options

These options are found in the Custom Fields tab.

  • Layout Type – You can choose either “vertical” or “horizontal”. Vertical will make the events stack vertically. Horizontal will cause the event list to span horizontally, across your screen. You can set the width to whatever you’d like, when using the horizontal option.
  • Name – Font Color – The font color of the names.
  • Name – Font Size – The font size of the names.
  • Name – Font Weight – The thickness of the names.
  • Name – Y-Offset – The vertical offset of the names. This is useful if you change the font family or font size, and want to adjust the position of the names.
  • Name Letter Spacing – The distance between each letter in the names.
  • Tag – Font Color – The font color of the tags.
  • Tag – Font Size – The font size of the tags.
  • Tag – Font Weight – The thickness of the tags.
  • Tag – Y-Offset – The vertical offset of the names. This is useful if you change the font family or font size, and want to adjust the position of the names.
  • Tag Letter Spacing – The distance between each letter in the tags.
  • Primary Color – The main color used in the event list, this color will be the last color to animate and be shown behind the text.
  • Secondary Color – The accent or highlight color used.
  • Square Color – At the beginning of each event you will see a square that animates in, use this option to adjust that color.
  • Icon Color – The color of the icon.
  • Background Opacity – The opacity of background colors. You can set this to “0” to disable the colors completely.
  • Fade Out Position – Where do you want to start events fading out at? Meaning, if this is set to 4 then the 4th event and after will be faded out.
  • Fade Out Opacity – How much you want to fade out the events at the fade out position. The lower this is, the more see-through the events will be.

Installing the Overlays – Streamlabs OBS

The following steps are specific to Streamlabs OBS and the .overlay file. Only Streamlabs OBS can make use of the .overlay file. If you’re using streaming software other than Streamlabs OBS, please follow the steps in the “Overlays” and “Scenes” sections.

  1. Download and install StreamLabs OBS if you haven’t already
  2. Unzip the files you’ve downloaded onto your computer.
  3. Open/Run Streamlabs OBS.
  4. Open the Streamlabs OBS settings by clicking the settings wheel at the bottom left corner
  5. Click on “Scene Collections” on the left of the pop-up menu
  6. Click on “Import Overlay File”
  7. Browse to your unzipped files
  8. Select the “.overlay” file

*NOTE: After selecting the file, it may take several minutes to for all the resource to load. This will setup the transition (if included) and multiple Scenes (Starting, Ending, BRB etc…)

Creating your overlays

We’ve set up a few scenes for you already and have included most of the items available with your full download.

  • Duplicate any scenes that you need multiples of
  • Swap out any elements you would like to, from your main download (for example different icons or webcam border)
  • Change the label sources label type if desired, in the source properties

Installing the Overlays – Streamelements

In your downloaded files, open up the Streamelements alert folder.

  1. Head over to Streamelements.com and ensure you’re logged in.
  2. Double click the Streamelements Overlay set up link from your downloads
  3. This link will automatically open up the Streamelements website and begin the import.
  4. You should get a notification at the top of the Streamelements website stating the import was successful
  5. Head over to “My Overlays”
  6. You should now find the imported Overlay scenes named after the pack they are from, and what they’re intended for.
  7. Click on the “Launch Overlay” to get the URL for your alerts
  8. Paste this URL as a “Browser Source” in your streaming software.

*NOTE: The Streamelements links are specific to your platform. You can only use the Twitch link for Twitch, and YouTube for YouTube.

Once you’ve added this into your streaming software, test the widget to make sure they’re working properly.

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. 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 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.

Editing the Language and Text in Your Overlays

To change the language or text used in your overlays you may use the blank versions of our supporter sections / overlays. From there, you will need to add text sources with the text needed on top of your supporter sections. We recommend using the fonts listed above in the “before you install” section. You can also use image sources to add the icons we’ve included in your downloads as well.

Setting up your scenes in standard streaming software:

  1. The scenes will be divided up into media sources (video files), image sources, and text sources.
  2. Add any new media sources for each scene
  3. Set thees sources to looping, and select a local file
  4. To reduce CPU or encoding resources, make sure “Close File When Inactive” is checked
  5. Add in image sources for icons (found in the icon folder) if desired
  6. Add in text sources, using the recommended font, and place next to the icon if desired.
  7. 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 1000
  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 2000
  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 800
  7. Leave other settings on their defaults
  8. Hit Done

Editing the Stinger After Effects File

We’ve included the stinger transition After Effects CC file for users that would like to edit the colors used in the stinger transition. This file is intended for users that have knowledge with AE, as we cannot provide support for it.

  1. Open the Apex AE File
  2. In the Apex Stinger comp and scrub to an area that shows the graphics, around 00:43 is a good place for this
  3. Select the Control Layer
  4. In the Master Controls panel for this layer, use the control color options to change the colors as needed
  5. Enable “Toggle Transparency Grid” before rendering
  6. Render the Apex Stinger comp as a compatible stinger file (.mov or .webm)

apex_stinger

Changing the Icon Colors for the Alerts, Event List, and Alert List

If you’d like to edit the color of the alert icons or event list animations, you can do so with a color correction filter. Right click your sources and add a color correction filter, you can adjust the hue, brightness, and saturation of this source. Please note: this will change all the colors in this source. We recommend leaving the custom options at their default in order to get the best results.

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.


Changelog

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

  • No major updates yet!


PolyColor Event List - Setup Guide

General Information

Thanks for checking out the PolyColor Event List. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take 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.

Our alerts, overlays, and widgets have been designed for use with OBS Studio, Streamlabs OBS, XSplit, and BEBO. Please make sure your streaming software is up to date before using this product. If you are not familiar with how to set up and use streaming software, we strongly suggest checking out the below tutorial before moving on:

OBS Studios Tutorials by NerdOrDie

Before You Install

Fonts Used

If you’d like to match the style of the event list, use the fonts listed below.

To download Google fonts, simply create a selection of fonts, open the drawer at the bottom of the screen, then click the “Download” icon in the upper-right corner of the selection drawer. You can download the fonts to use in mock-ups, documents, or locally on your machine.

Colors Used

The PolyColor Event List uses many colors for different aspects of the alert. You can find these under the “custom fields” tab.


Installation Guide

Once you’ve downloaded and unzipped the files from Nerd or Die, open up the files included. You’ll see a folder for the event list and standard alerts.

Event List

  1. Click the Widget Quick Setup link in your downloaded files to begin installing this event list.
  2. If you’d like, choose “Create Profile” and name it something appropriate such as “PolyColor”. 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. Recommended sizing in OBS for the source is 1920 width and height taller than the list to allow room for animation.
  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.

Fire off a few test events to make sure that things are working properly.

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 have no effect on this widget
  • Font — allows you to pick the font family user in this package, the default font is Rajdhani.
  • 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 enable the animations coming from the right side .
  • DO NOT — change the custom HTML/CSS options unless you know HTML/CSS/JS – we do not support custom changes.

Custom Options

These options are found in the Custom Fields tab.

  • Text Color – The default color of the text used
  • Font – The default font used
  • Alert Text Size – The size of the initial text that pops out when an event happens
  • User Text Size – The size of the username text
  • Event Text Size – The size of the event type text
  • Icon Color – The color of the event type icon
  • Background Color – The background color behind the icon and username
  • Event Type Colors – The color behind the event types, event types include follower, subscriptions, donations, and more
  • Event Type Text – The text that appears when the event is initially shown

Editing these options require changing CSS code. This is only recommended if you have a beginners knowledge of CSS.

Customize icons

We use of FontAwesome for icons, which can be found at http://fontawesome.io/icons/ Click on any icon you want to use in the list/search results and then on the next page find the unicode for the icon.

To edit these from the preset ones in the template, you will need to find the unicode for your icon (i.e:’f2b9‘) and paste this under the proper class. For example, to edit the follow icon you will find .follow user:after in the CSS and then edit the part that reads content:”\UNICODE”;  The slash is important.

PolyColor Editing Icons

Note: changing the icon may require editing of ‘margin-left’ and ‘top’ values, to properly center them.

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.


Changelog

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

  • No major updates yet!


pixelpop_banner

PixelPop - Setup Guide

General Information

Thanks for checking out the PixelPop Widget Pack. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take 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.

The alerts, overlays, and widgets have been designed for use with OBS Studio, Streamlabs OBS, XSplit, and BEBO. Please make sure your streaming software is up to date before using this product. If you are not familiar with how to set up and use streaming software, we strongly suggest checking out the below tutorial before moving on:

OBS Studios Tutorials by NerdOrDie

Before You Install

Fonts Used

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

  • Anton – This is the primary font used
  • Roboto – This is used for the text box

To download Google fonts, simply create a selection of fonts, open the drawer at the bottom of the screen, then click the “Download” icon in the upper-right corner of the selection drawer. You can download the fonts to use in mock-ups, documents, or locally on your machine.

Colors Used

Color 1: #64E8DE
Color 2: #8a64EB
Text Color: #74ADE6


Installation Guide

Installing the Alerts

  1. Click the Alerts Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as “PixelPop 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. Navigate to “Alert Box” 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 1920 wide and 700 tall (more height is recommended if using messages). 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.

Once you’ve added this into your streaming software test the alerts to make sure they’re working properly.

Delaying Text-to-Speech

If you’re planning on using text-to-speech you may need to delay them from being read, as there is an intro animation. To do this, you can change the Alert Text Delay in the Streamlabs base options. If you’re using alert variations (such as re-subs) you will need to  update in the variations as well.

Custom Alert Options

These options are found in the Custom Fields tab.

  • Font size – The font-size you want to use for your alert, everything will be dynamically calculated from this.
  • Skew Degree – How much to skew the animation
  • Top Line – Changed the text templates used for each alert. You can use dynamic tags like {name}, {amount}, {count}, and {months} in these text boxes.
  • Top Line Font Family – The font family to use for the alerts.
  • Bottom Line – Changed the text templates used for each alert. You can use dynamic tags like {name}, {amount}, {count}, and {months} in these text boxes.
  • Bottom Line Font Family – The font family to use for the alerts.
  • Message Font – The font family to use for the alerts.
  • Color 1 – This will control the colour 1 (left) in the gradient
  • Color 2 – This will control the colour 2 (right) in the gradient
  • Text Color – This is the colour of the Top Line text
  • Pixel Explosion – This is if you want to enable the pixel explosion.
  • Pixel Shape – You can change the shape of the pixel explosion using this drop down
  • Pixel Count – How many pixels do you want to appear, for best results use 60-75
  • Pixel Outro Delay – How long do you want the pixels to appear on the screen, this is in seconds

Once you’ve downloaded and unzipped the files from Nerd or Die, open up the files included. You’ll see a folder for the event list and standard alerts.

Event List

  1. Click the Widget Quick Setup link in your downloaded files to begin installing this event list.
  2. If you’d like, choose “Create Profile” and name it something appropriate such as “Uplink”. 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 using a size of at least 1000 by 1000.
  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.

Fire off a few test events to make sure that things are working properly.

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 have no effect on this widget
  • Font — allows you to pick the font family user in this package, the default font is Rajdhani.
  • 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 enable the animations coming from the right side .
  • DO NOT — change the custom HTML/CSS options unless you know HTML/CSS/JS – we do not support custom changes.

Custom Options

These options are found in the Custom Fields tab.

  • Space between between each event – The space between each event
  • Username Font – The font to use for the names
  • Username Font Size – The font-size for the names
  • Username Text Color – The font color for the names
  • Tag Message Font – The font to use for the events
  • Tag Font Size – The font-size for the event
  • Tag Text Color – The font color for the names
  • Background Color – Background color for the event
  • Opacity of background (%) – Opacity of the background color
  • Skew Degree – How much to skew the animation
  • Color 1 – Icon Box Color – Background color gradient for the icon box (left side)
  • Color 2 – Icon Box Color – Background color gradient for the icon box (left side)
  • Icon Color – Color of the icon

The widgets included in this package are set up specifically for Streamlabs users and some utilize the customization options now available.

  1. Click the appropriate “Quick Setup” link in your downloaded files (widgets folder) to begin installing these alerts.
  2. If you’d like, choose “Create Profile” and name it something appropriate such as “PixelPop”. The import link will only override the widgets that you’re choosing to install. For example: if you’re importing the design for a donation goal, this will not effect your alerts or goal widgets.
  3. Select “Use” for the profile you want to import into.
  4. Copy your widget URL.
  5. Paste this URL as a “Browser Source” in your streaming software. We recommend setting the size to at least 1920 wide by 700 tall. If you’re using the StreamLabs OBS .overlay file, you may not need to complete this step if your widget boxes are already added in.
  6. You will need to start a goal in Streamlabs in order to see the widget appear

Editing the Goal Widgets

You can find custom options for goal widgets in the Settings > Custom Fields tabs.

Goal Progress

  • goalTopFont – The font you want to use for the goal title
  • goalTopFontSize – The font size want for the goal title
  • goalTopFontColor – The font color for the goal title
  • goalBottomFont – The font you want to use for the counter and end date
  • goalBottomFontSize – The font size want for the counter and end date
  • goalBottomFontColor – The font color for the counter and end date
  • percentageFont – The font you want to use for the percentage number
  • percentageFontSize – The font siue you want for for the percentage number
  • percentageFontColor – The font colour want for the percentage number
  • goalWidth – Width of the goal
  • goalHeight – Height of the goal
  • progressThickness – This controls the thickness of the progress bar outline
  • color1 – Colour 1 for gradient you want to use
  • color2 – Colour 2 for gradient you want to use
  • goalVerticalOffset – Change this value to move the goal up and down in your browser source (lower the number the higher it moves)
  • goalHorizontalOffset – Change this value to move the goal left and right in your browser source (lower the number the more to the left it moves)
  • goalHorizontalPosition – Change this to positoin the goal in another position (left, middle, right)
  • prefix – This controls the prefix for the counter (eg $100 / $100)
  • suffix – This controls the suffix for the counter (eg 100 / 100 followers)

Goal Completion

  • fontSize – Font size of the text
  • topFont – Font for the text
  • text – Text you want to display
  • textColor – Colour of the text
  • bottomFont – Font for the sux text
  • alertType – Sub text you want to display
  • skewDegree – How much do you want to skew it by
  • pixelExplosion – Do you want to enable the pixel explosion
  • pixelCount – How many pixels to display
  • pixelOutroDelay – How long do you want the pixels to display on the screen for (every 1000 is 1 second)
  • pixelShape – What shape pixels do you want (square, circle, triangle)

  1. Click the Chat Box Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as “PixelPop”. The import link will only override your chat 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. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software. 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.

Custom Chat Box Options

These options are found in the Custom Fields tab.

  • Chat Size – How many lines to limit the chatbox to
  • Space between between each message – The space between each chat message
  • Chat Username Font – The font to use for the names
  • Chat Username Font Size – The font-size for the names
  • Chat Message Font – The font to use for the messages
  • Chat Message Font Size – The font-size for the messages
  • Chat Message Text Color – The font color for the messages
  • Background Color – Background color for the event
  • Opacity of background (%) – Opacity of the background color
  • Skew Degree – How much to skew the animation
  • Color 1 – Line separator color – Background color gradient for the line separator
  • Color 2 – Line separator color – Background color gradient for the line separator

Color Presets Recommendations

Blue/Green
Color 1: #0CF2AD
Color 2: #00B4FC
Text Color: #26D4D3

The Doc
Color 1: #F40F1A
Color 2: #333333
Text Color: #9E0E18

Shinobi
Color 1: #FFF432
Color 2: #0C5ABB
Text Color: #8FAA7F

Galaxy
Color 1: #5238C9
Color 2: #D2599D
Text Color: #913AA7

Dawn
Color 1: #FEC180
Color 2: #FF8993
Text Color: #FDBC84

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.


Changelog

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

  • No major updates yet!