Uplink_stream_readme_banner

Uplink - Setup Guide

General Information

Thanks for checking out the Uplink 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 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.

Colors Used

  • Accent Orange: #FFAA00
  • Blue Green: #0D3B3D
  • White: #FFFFFF


Installation Guide

Alert + Event List Setup Guide

Overlay Setup 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.

  • Do you want to clone the entire element, and have it appear behind? Default: true
  • Do you want to tilt the entire element? Please note: we recommend testing this feature with your stream setup, as it uses a decent amount of CPU. Default: true
  • Font – What font family do you want to use for the alert?
  • Font Weight – The thickness of your font. Note: not all fonts support multiple font weight. Default: 500
  • Top Text Area Template – you may use dynamic tags like {months}, {amount}, {name}, {count}, and {product} here. Default: {name}
  • Name – Background Color. Default: #000000
  • Name – Text Color. Default: #FFFFFF
  • Name – Background Color Opacity. Default: 30
  • Middle Text Area Template – you may use dynamic tags like {months}, {amount}, {name}, {count}, and {product} here. Only is in alerts with 3 text field options. Default: SUBSCRIBER
  • Tag – Background Color. Default: #FFAA00
  • Tag – Text Color. Default: #000000
  • Tag – Background Color Opacity. Default: 90
  • Bottom Text Area Template – you may use dynamic tags like {months}, {amount}, {name}, {count}, and {product} here. Default: Welcome!
  • Bottom – Text Color. Default: #FFFFFF
  • Accent Elements Color. The accent elements are generally the orange areas of the alerts. Default: #FFAA00
  • Decorative Elements Color. The decorative elements are generally the green areas of the alerts. Default: #0D3B3D
  • Misc. Elements Color. The decorative elements are generally the whiteareas of the alerts. Default: #FFFFFF
  • Cloned Background Element – Blur Amount. Set this to 0 to disable this feature. Default: 6
  • Cloned Background Element – Opacity. Default: 20
  • Tilt Amount – left and right. Default: -20
  • Tilt Amount – up and down. Default: 0
  • Delay Time – the amount of time to wait after the intro animation completes to animate out. Default: 6
  • Sound File – Used when alert is played.
  • Sound File Volume. Default: 50

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.

  • Do you want to clone the entire element, and have it appear behind? Default: true
  • Do you want to tilt the entire element? Please note: we recommend testing this feature with your stream setup, as it uses a decent amount of CPU. Default: true
  • Font – What font family do you want to use for the alert?
  • Font Weight – The thickness of your font. Note: not all fonts support multiple font weight. Default: 500
  • Top Text Area Template – you may use dynamic tags like {months}, {amount}, {name}, {count}, and {product} here. Default: {name}
  • Name – Background Color. Default: #000000
  • Name – Text Color. Default: #FFFFFF
  • Name – Background Color Opacity. Default: 30
  • Middle Text Area Template – you may use dynamic tags like {months}, {amount}, {name}, {count}, and {product} here. Only is in alerts with 3 text field options. Default: SUBSCRIBER
  • Tag – Background Color. Default: #FFAA00
  • Tag – Text Color. Default: #000000
  • Tag – Background Color Opacity. Default: 90
  • Bottom Text Area Template – you may use dynamic tags like {months}, {amount}, {name}, {count}, and {product} here. Default: Welcome!
  • Bottom – Text Color. Default: #FFFFFF
  • Accent Elements Color. The accent elements are generally the orange areas of the alerts. Default: #FFAA00
  • Decorative Elements Color. The decorative elements are generally the green areas of the alerts. Default: #0D3B3D
  • Misc. Elements Color. The decorative elements are generally the whiteareas of the alerts. Default: #FFFFFF
  • Cloned Background Element – Blur Amount. Set this to 0 to disable this feature. Default: 6
  • Cloned Background Element – Opacity. Default: 20
  • Tilt Amount – left and right. Default: -20
  • Tilt Amount – up and down. Default: 0
  • Delay Time – the amount of time to wait after the intro animation completes to animate out. Default: 6
  • Sound File – Used when alert is played.
  • Sound File Volume. Default: 50

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.

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, BRR 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

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.

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.

Goal Options

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. Below are a list of the settings you can quickly configure.

  • Flip – Do you want to flip the widget horizontally?
  • Font – The font used in the goal widget
  • Accent Color – The main accent color,  controls the color of the top bar
  • Decorative Color – The decorative colors used in the goal widget, by default these are the green elements
  • Vertical Bar Color – The color of the vertical white bar
  • Highlight Font Color – The font color of the current amount
  • Tick Mark Color – The tick marker colors that show on each section
  • Numbers Color – The color of the numbers that appear in the goal widget
  • Goal Amount Font Color – The color of the font for the current amount
  • Goal Completed Font Color – The color of the font that appears when your goal is reached
  • Flash Color – The color that flashes when your goal is reached
  • Font Weight – The thickness of the font
  • Highlight Area Background Color – The color of the bar that highlights the current goal amount
  • Highlight Background Opacity – The opacity of the bar that highlights the current goal amount, increasing this makes the color more solid
  • Prefix – The text and characters that appear before the goal amounts
  • Suffix – The text and characters that appear after the goal amounts

Event List Options

These options are found in the Custom Fields tab.

  • Name – Font Color. Default: #FFFFFF
  • Name – Font Size. The font size of the names. Default: 24
  • Tag – Font Color. Default: #FFFFFF
  • Tag – Font Size. The font size of the names. Default: 24
  • Separator – Font Color. Default: #FFFFFF
  • Font Weight – The thickness of the font for the names. Not all fonts support multiple font weights. Default: 500
  • Icon – Fill Color. The color of the icon. Default: #FFAA00
  • Accent Color – The colors of the bottom pieces of each event. Default: #FFAA00
  • Flash Color – The color of the flash that appears when your event is shown. Default: #FFFFFF
  • Background Opacity – The opacity of the background gradient. Default: 50%
  • Background Gradient Starting Color – The first color for your background gradient. Default: #000000
  • Background Gradient Ending Color – The second color for your background gradient. Default: #000000
  • Text Offset – Offset the text vertically to properly align if needed. Default: 0
  • Fade Out Position – Where do you want to start events fading out at? Default: 4
  • Fade Out Opacity – The opacity of faded out elements. Default: 50
  • Flash Opacity – The opacity of flash when the event is shown. Set to 0 to disable. Default: 60

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.

Goal Options

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. Below are a list of the settings you can quickly configure.

  • Flip – Do you want to flip the widget horizontally?
  • Font – The font used in the goal widget
  • Accent Color – The main accent color,  controls the color of the top bar
  • Decorative Color – The decorative colors used in the goal widget, by default these are the green elements
  • Vertical Bar Color – The color of the vertical white bar
  • Highlight Font Color – The font color of the current amount
  • Tick Mark Color – The tick marker colors that show on each section
  • Numbers Color – The color of the numbers that appear in the goal widget
  • Goal Amount Font Color – The color of the font for the current amount
  • Goal Completed Font Color – The color of the font that appears when your goal is reached
  • Flash Color – The color that flashes when your goal is reached
  • Font Weight – The thickness of the font
  • Highlight Area Background Color – The color of the bar that highlights the current goal amount
  • Highlight Background Opacity – The opacity of the bar that highlights the current goal amount, increasing this makes the color more solid
  • Prefix – The text and characters that appear before the goal amounts
  • Suffix – The text and characters that appear after the goal amounts

Event List Options

These options are found in the Custom Fields tab.

  • Name – Font Color. Default: #FFFFFF
  • Name – Font Size. The font size of the names. Default: 24
  • Tag – Font Color. Default: #FFFFFF
  • Tag – Font Size. The font size of the names. Default: 24
  • Separator – Font Color. Default: #FFFFFF
  • Font Weight – The thickness of the font for the names. Not all fonts support multiple font weights. Default: 500
  • Icon – Fill Color. The color of the icon. Default: #FFAA00
  • Accent Color – The colors of the bottom pieces of each event. Default: #FFAA00
  • Flash Color – The color of the flash that appears when your event is shown. Default: #FFFFFF
  • Background Opacity – The opacity of the background gradient. Default: 50%
  • Background Gradient Starting Color – The first color for your background gradient. Default: #000000
  • Background Gradient Ending Color – The second color for your background gradient. Default: #000000
  • Text Offset – Offset the text vertically to properly align if needed. Default: 0
  • Fade Out Position – Where do you want to start events fading out at? Default: 4
  • Fade Out Opacity – The opacity of faded out elements. Default: 50
  • Flash Opacity – The opacity of flash when the event is shown. Set to 0 to disable. Default: 60

Setting up your scenes in standard streaming software:

  1. These scenes include two main parts, the base design and the light with text
  2. Add two new media sources for each part
  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 a custom background image or video behind both of these sources
  6. Add in image sources for icons (found in the icon folder) if desired
  7. Add in text sources, using the recommended font, and place next to the icon if desired.
  8. Duplicate scenes and change as needed.

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

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

OBS Studio

  1. Under the “scene transitions” section, click the drop down and select “Stinger Transition”
  2. Click the gear icon and select properties
  3. For “video file” click browse and select the stinger.webm found in the “Screens” folder
  4. Set the “transition point type” to time and “transition point” to 1400
  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

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 Uplink_Stinger.aep file
  2. In the Uplink Stinger comp and scrub to an area that shows the graphics, around 01:17 is a good place for this
  3. Select the Control Layer
  4. In the Effects 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 Uplink Stinger comp as a compatible stinger file (.mov or .webm)

Please see the screen shot below as an example of how to change to a blue glitch color.

Uplink Stinger Example

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!


Prestige Stream Package Setup Guide

Prestige Setup Guide

General Information

Thanks for checking out the Prestige stream package. 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, XSplit Broadcaster, BEBO, Streamlabs OBS, and most other streaming softwares. 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

  • Gold: #E6AE23
  • Gold 2: #C3AA63
  • Red: #FF0000
  • Black: #000000
  • White: #FFFFFF


Installation Guide

Alerts, Alert List, and Event List 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 alert / event list and standard alerts. The event list can be set up from the alert list install, by changing the “hide alert” option in custom fields.

Setting up the Event / Alert List

  1. Click the Widget Quick Setup link in your downloaded files to begin installing these alerts (found in the Event List folder).
  2. If you’d like, choose “Create Profile” and name it something appropriate such as “Prestige”. The import link will only override your event list, as this design is an extended version of an 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. Typically, though, I put this option at the size I’m streaming in. This size may change depending on your customization options.
  6. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the StreamLabs OBS .overlay file, you may not need to complete this step if your event list box is already added in.

Fire off a few test events to make sure that things are working properly. Before I forget, if you’ve hit the launch button at the top and you’re using Google Chrome, you will have to click inside the browser in order for the video files to autoplay. This will not be necessary if you’re doing your tests in OBS Studio or Streamlabs OBS, which we recommend.

Why do I hear an echo?

If installed properly you will hear sounds playing from both the Streamlabs preview area and from inside of OBS Studio. If you’re using Google Chrome, you can right click your tab and hit mute site if this issue bothers you. Don’t forget to unmute the site when you’re done testing, as it will mute sounds for the entire website in Chrome.

Customizing the Event / Alert List

After you import everything, these options and settings will be found in the event list tab. While there are the Streamlabs Base Options, not all of them will affect the widget. This is because of the highly customized options we’ve added in.

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 is Orbitron, which will match the rest of the designs
  • Animation and Animation Speed — will have no effect on this widget
  • Fade Time — will hide the widget after X seconds, 0 always displays the widget. This option must be more than 8 seconds if you’re using the alert list, otherwise it will not function properly.
  • 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 (to edit where the text is, please see Custom Fields).
  • DO NOT — change the custom HTML/CSS options unless you know HTML/CSS/JS – we do not support custom changes.

Custom Options

Click on the Custom Fields tab. If you ever experience the page seeming slow after saving options, then simply refresh the dashboard page.

  • Hide alert — do you want to hide the alert portion of this alert list? Setting this to “yes” will make this a standard event list.
  • Alert Pause Time — the amount of time in seconds that the alert pauses for, before it goes into the event list.
  • Alert Video Offset — the amount of pixels to offset the video from the event list. This means if you have this at negative 200, then your alert will appear 200 pixels up from where your event list is positioned. If you increase this to 500, then the alert video will appear 500 pixels below the.
  • Mute sounds – allows you to mute the custom sounds with the alerts.
  • Volume – allows you to adjust the percentage that volume plays back at, these two options are only for the alert portion.
  • List Offset X and Y — The amount of pixels to offset list from the left or right side and top and bottom. So if you increase the X amount to 200, the list will be 200 pixels away from the left or right side of the source window. This depends on if you’re using the Flip X or Y options as well.
  • Animation Speed — The percentage speed that widget animations plays at. We do not recommend changing this if you want to use the custom sounds we’ve included, as it will distort the sound when you speed things up or down. If you have this at 200% then the widget will play at 2x the speed, and 50% will play at half the speed.
  • Hide Name Tag in Alert? — Do you want to hide the name tag in alert portion of this widget? You can set this to no to keep your alerts more minimal.
  • Tag and Name Font Size — List – changse the font sizes in the event list portion.
  • Tag and Name Font Size — Alert – changes the font sizes in the alert portion.
  • Tag and Name Font Color — changes the text color in both the alerts and the event list.
  • Tag and Name Font Weight — the width or boldness of the text.
  • Tag and Name Text Shadow Color – Alert — there are text shadows behind the tag and names in the alerts, this option lets you adjust these colors.
  • Border Color — the alerts have a border color around the name tag and the event list has a border that divides each event, this option will change the color of that area.
  • Big Tip Threshold — the amount a tip needs to be in order to trigger the animation with a wreath around it.
  • Enable User Message — do you want to show the user message for alerts that support it?
  • User Message Offset — the amount of pixels to offset the message vertically. This will be useful if you change the name and tag font sizes for the alert portion.
  • Message Font Size — the font size of the user messages.

Installing the Alerts

In your downloaded files, open up the standard alert folder. We’ve included the alert video files that already have sounded with them, muted version of the alerts, and then the sound files themselves.

  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 “Prestige 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 1260 wide and 800 tall. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

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

Custom Alert Options

These options are found in the Custom Fields tab.

  • Mute sounds — allows you to mute the custom sounds with the alerts.
  • Volume — allows you to adjust the percentage that volume plays back at, these two options are only for the alert portion.
  • Animation Speed — The percentage speed that widget animations plays at. We do not recommend changing this if you want to use the custom sounds we’ve included, as it will distort the sound when you speed things up or down. If you have this at 200% then the widget will play at 2x the speed, and 50% will play at half the speed.
  • Top and Bottom Line Template — changed the text templates used for each alert. You can use dynamic tags like {name}, {amount}, {count}, and {months} in these text boxes.
  • Font — The font family to use for the alerts. The default is Orbitron.
  • Top and Bottom Line Font Size — changse the font sizes of each respective area.
  • Top and Bottom Line Font Color — changed the text color,
  • Top and Bottom Line Font Weight — width or boldness of the text.
  • Top and Bottom Line Text Shadow Color — changed the text shadows behind the tag and names in the alerts, this option lets you adjust these colors.
  • User message offset — the amount of pixels to offset the message vertically. This will be useful if you change the name and tag font sizes for the alert portion.
    • The other user message settings can be found in the user message tab below.

Creating and Editing Variations

You’ll notice that we’ve added some variations to the subscriber and donation alerts, these are found under each of these in the alert variation tab. If you’d like to make your own variations from here, you can do so by duplicating the alert with current settings, and then editing each variation as needed.

Controlling sound volume

The alerts now include custom sounds attached to the video files. You can change the volume under the Custom Fields tab, with the option Video Volume – which represents the volume percentage. Set to 0 to mute completely.

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.

Setting up your scenes in standard streaming software:

  1. These scenes include two main parts, the base design and the light with text
  2. Add two new media sources for each part
  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 a custom background image or video behind both of these sources
  6. Add in image sources for icons (found in the icon folder) if desired
  7. Add in text sources, using the recommended font, and place next to the icon if desired.
  8. Duplicate scenes and change as needed.

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

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

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

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
  • In the “Screen Design” design, there are hidden elements for the BRB and Ending scene text, unhide these if needed
  • 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

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 1400
  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 1400
  7. Enable sounds by setting “Audio Monitoring” to “Monitoring and Output”
  8. Leave other settings on their defaults
  9. Hit Done

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!


Fornite Overlay Theme

ElectroLyte Setup Guide

General Information

Thanks for checking out the ElectroLyte stream package. We designed this with Fornite streamers in mind, but added options to let you customize it to work with almost any stream design. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com. This page will guide you through the setup process. If you have any questions that aren’t answered in this setup guide, please feel free to contact us.

Photoshop is not required for any portions of this product.

The alerts, overlays, and widgets have been designed for use with OBS Studio, XSplit Broadcaster, BEBO, Streamlabs OBS, and most other streaming softwares. 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

  • Dark Blue: #00275b
  • Light Blue: #078bd9
  • Pale Blue: #c3f6ff
  • Orange: #ffcf00
  • Yellow: #ffff00


Installation Guide

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

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

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

  1. Download the alert files from NerdOrDie.com and then unzip everything onto your computer.
  2. Click the Alerts Quick Setup link in your downloaded files to begin installing these alerts.
  3. If you’d like, choose “Create Widget Theme” and name it something appropriate such as “ElectroLyte”. 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 widget theme. If you already have an ElectroLyte Widget Theme, feel free to import it here.
  4. Select “Use” for the profile you want to import into.
  5. Navigate to “Alert Box” and copy your unique URL.
  6. Paste this URL as a “Browser Source” in your streaming software. We recommend setting the size to 1920 wide and 1080 tall, even if you don’t stream at this resolution.  If you need to scale down, you can do so directly inside of OBS Studio. If you’re using Streamlabs OBS, you may not need to complete this step if your alert box is already added in.
  7. Go ahead and test a few alerts, to make sure things are working properly

Controlling sound volume

The alerts now include custom sounds attached to the video files. You can change the volume under the “Custom Fields” tab, with the option “Video Volume” – which represents the volume percentage. Set to 0 to mute completely.

Setting up your scenes in standard streaming software:

  1. These scenes include two main parts, the base design and the light with text
  2. Add two new media sources for each part
  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 a custom background image or video behind both of these sources
  6. Add in image sources for icons (found in the icon folder) if desired
  7. Add in text sources, using the recommended font, and place next to the icon if desired.
  8. Duplicate scenes and change as needed.

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

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

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

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
  • In the “Screen Design” design, there are hidden elements for the BRB and Ending scene text, unhide these if needed
  • 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

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

OBS Studio

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

StreamLabs OBS

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

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.

  • 5/7/2018 – Added sounds to the WebM files + patched Streamlabs import links to include sound files as default at import. Added a custom field for volume control with the included sounds.


Fortified Guide

Fortified Setup Guide

General Information

Thanks for checking out the Fortified event list. We designed this with Fornite streamers in mind, but added options to let you customize it to work with almost any stream design. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com. This page will guide you through the setup process. If you have any questions that aren’t answered in this setup guide, please feel free to contact us.

Photoshop is not required for any portions of this product.

This event list has been designed for use with OBS Studio, XSplit Broadcaster, BEBO, Streamlabs OBS, and most other streaming softwares. 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

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


Installation Guide

Watch the Event List Video Guide

Importing into your Streamlabs account

These steps will guide you through how to get the event list imported into your Streamlabs account.

  1. Download the files from our website and then extract (unzip) onto your computer.
  2. Double click the Fortified Event List Setup for Streamlabs link in your downloaded files. If you need to log in to Streamlabs.
  3. If you’d like to keep this event list separate from other widget profiles you’ve made, choose “Create Widget Theme” and name it something appropriate such as “Fortified”. The import link will only override your event list. This means you can combine this event list with any other Widget Themes you’ve made in Streamlabs. But, if you don’t want to override your current event list, then create a new widget theme.
  4. Select “Use” for the profile you want to import into.
  5. You may notice the preview area does not properly animate the event list – don’t worry if it doesn’t, this is completely normal. This area will only be used for looking at the design only, and not the animations.
  6. Navigate to “Widget URL” and copy your unique URL.
  7. Paste this URL as a “Browser Source” in your streaming software. We recommend setting the size to at least 600 wide and 1000 tall. This size may change depending on your customization options.
  8. Scale down if needed.
  9. Click the test buttons a few times to get an idea about the overall size of the widget.

Once you’ve sized everything appropriately we can move onto the options.

The animations don’t work after I save settings

Sometimes you will need to refresh the page or the event list widget inside of your streaming software, before all settings can take effect. Typically the easiest way to do this is by refreshing the cache of your browser source in order to get everything to display as intended.

In OBS Studio you can easily do this by clicking the “Refresh cache of current page” button in your browser source properties.

Standard Streamlabs 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 – sets how many viewers for hosts, bits, or raiders for raids will trigger an event.
  • Max Events – changes how many events are displayed at once.
  • Background Color – is only for preview purposes.
  • Text Color – changes the color of the usernames.
  • Font – pick the font family for usernames in this package, the default is “Luckiest Guy”.
  • Animation and Animation Speed will have no effect on this widget.
  • Fade Time – hides the entire widget after X seconds, a setting of 0 always displays the widget.
  • Other Options will allow you to flip the widget.
    • Enabling Flip Y will make the events come from the bottom towards the top.
    • Enabling Flip X will make the events aligned to the right side.
    • Both can be enabled at the same time.
  • Keep events history – loads past events when you restart your streaming software.
  • Please do not change the custom HTML/CSS options unless you know HTML/CSS/JS – we do not support custom changes.

Custom Field Options

Use the above image to help you with the options listed below. Click the “Custom Fields” tab to begin. DO NOT click “reset code” or “remove overlays”.

  • Badge Background Color – Solid color behind each badge.
  • Badge Base Color – Changes the base color of all the badges.
  • Badge Scale – A percentage scale of the badge size.
  • Text Alignment –  Sets which side your text will be aligned to. Typically this is best to leave on centered, but if you decide to hide some of the elements, it might look better to set this to right or left.
  • Text Padding – The space between the text and the edges of the boards. If you want a more minimal design, you can decrease this option to get the text closer to the badges.
  • Text Shadow Color – The shadow color behind all the text. Tip: it’s usually a good idea to have this be a contrasting color from your main text colors.
  • Fade Out Position – The number of the event that you want your events to start fading out at. Example: if you have 5 total events shown, you can set this to 4, then events number 4 and 5 will have a faded effect.
  • Fade Out Opacity – The opacity of the faded out events. From our example above, events 4 and 5 will be at 50% opacity
  • Event Spacing – The vertical margin between each event.
  • Show Tag – Show or hide the tag in your events, which is typically says “follow, subscriber, etc.”
  • Tag Font Color – The color of the tag,
  • Tag Font Family – Select a font for the event tags.
  • Tag Font Size – Size of the text for each event tag.
  • Name Offset and Tag Offset – Adjust the Y position of these text areas. This allows you to put your tags above the username, or simply adjust them. You’ll find these options useful if you’re changing the text size or font families.
  • Show Badge Background, Show Board Texture, and Show Board Frame – Show or hide these respective elements.
    • If you hide the board texture, a solid color will take its place
    • Solid Background Color – The color that will be in place of the board texture.
    • Solid Background Opacity – The opacity of this shape. If you don’t want any shape or color behind your username and tag, then simply set this to 0 to hide them completely.

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 updates yet!


Glitch Overlays and Alerts Setup Guide

Glitch Overlay and Alerts Setup Guide

General Information

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

Photoshop is not required for any portions of this product.

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

Before You Install

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

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


Installation Guide

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.

  • Mute the custom sounds? – This will mute the custom sounds built into the alerts. You can mute the alert and upload your custom sound into the default sound section.
  • Custom Sound Volume – Controls the volume of the built in alert sounds.
  • Top Text Area – Text you want to be displayed in the Top Text.
  • Bottom Text Area – Text you want displayed in the Bottom Text. Default is the {name} tag
  • Top Text Color – The color of the text displayed at the top of the alert.
  • Bottom Text Color -The color of the text displayed at the bottom of the alert.
  • Animation Hue – Adjust the Hue of the animated background. Please see the Options_Preview.html in your downloads for example usage.
  • Animation Saturation – Adjust the Saturation of the animated background. Please see the Options_Preview.html in your downloads for example usage.
  • Animation Brightness – Adjust the Brightness of the animated background. Please see the Options_Preview.html in your downloads for example usage.

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.

  • Mute the custom sounds? – This will mute the custom sounds built into the alerts. You can mute the alert and upload your custom sound into the default sound section.
  • Custom Sound Volume – Controls the volume of the built in alert sounds.
  • Top Text Area – Text you want to be displayed in the Top Text.
  • Bottom Text Area – Text you want displayed in the Bottom Text. Default is the {name} tag
  • Top Text Color – The color of the text displayed at the top of the alert.
  • Bottom Text Color -The color of the text displayed at the bottom of the alert.
  • Animation Hue – Adjust the Hue of the animated background. Please see the Options_Preview.html in your downloads for example usage.
  • Animation Saturation – Adjust the Saturation of the animated background. Please see the Options_Preview.html in your downloads for example usage.
  • Animation Brightness – Adjust the Brightness of the animated background. Please see the Options_Preview.html in your downloads for example usage.

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 – Chat Box

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

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

Custom Fields – Event List

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

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

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

Save Changes when done.

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 – Chat Box

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

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

Custom Fields – Event List

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

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

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

Save Changes when done.

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, BRR 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.

Setting up your scenes in standard streaming software:

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

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

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

OBS Studio

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

StreamLabs OBS

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


Customizing Colors

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

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

Usage Terms

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

Please refer to our Terms and Conditions for more information.

Future Reiterations, Errors and Updates

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

Please follow @NerdsPwn on Twitter for update information.

More designs by Flisky

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


Changelog

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

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


Clearview Background

Clearview Overlay and Alerts Setup Guide

General Information

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

Photoshop is not required for any portions of this product. However, for your convenience we have included Photoshop files for the panels and offline screen.

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

Before You Install

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

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


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.

Adjust Included Audio Levels

By default the alerts will feature custom sounds. If you’d like to disable these sounds, you can do so in each alerts “Custom Field” tab. You can mute the sounds by setting the slider to 0.

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.

Adjust Included Audio Levels

You can adjust the audio levels using the default “Video Volume control” slider located in each alerts settings.

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, BRR 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. Please note: if you’re using the free version you will use image source, not media source.
  3. Customize the text shown on the supporter bars with the blank versions of all the elements have been provided. The easiest way to add you custom text is to load one of these 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.

Setting up your scenes in standard streaming software:

  1. In a new scene, add a media source
  2. Set this source to looping, and select a local file
  3. Choose the “Stream-Background.mp4” file, which is a blank looping background
  4. Add another media source, set to looping, and select the appropriate Stream- .WEBM file (Starting, BRB, Ending)
  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.

Using StreamLabs OBS import for scenes:

  1. Right click and duplicate the “Scene (Duplicate as needed, view setup guide)” scene
  2. Rename to anything you’d like, and position where needed.
  3. Hide or remove the starting, brb, and/or ending media source, depending on the type of scene you’d like to use
  4. Replace the text sources with your information
  5. Add additional text sources and icons (via image source) if desired

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

Important: We’ve included stinger videos at 15, 30, and 60fps. Please choose the one closest to the FPS you stream at. Higher fps video will use more CPU.

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. Enable sounds by setting “Audio Monitoring” to “Monitoring and Output”
  8. Leave other settings on their defaults
  9. Hit Done

 

Clearview Stinger Transition Settings SL OBS


Customizing Colors

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

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

Default green color is #05f5ae

Usage Terms

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

Please refer to our Terms and Conditions for more information.

Future Reiterations, Errors and Updates

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

Please follow @NerdsPwn on Twitter for update information.

More designs by Flisky

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


Changelog

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

  • Updated on 2/19/2018 at 3:45 PM EST
    • Added a sound to the tip alert and WEBM file when the dollar signs appear
  • Updated on 2/16/2018 at 4:00 PM EST
    • Improved file size and performance of all stingers
    • Re-added audio sounds to stinger files
    • Minor updates to SL OBS files
  • Updated on 2/16/2018 at 3:30 AM EST
    • Improved visual quality of the Stinger.webm file
    • Added 30 and 60 FPS stingers to premium packs
    • Added Stream-Background.mp4 in the “Screens” folder- a higher quality video that is a looping background. This will replace the original “Screen Designs” for Starting, BRB, and Offline scenes
    • Added .webm files in the “Screens” folder for Starting, BRB, and Offline scenes, as well a a looping line animation
    • Improved file size of StreamLabs OBS file, and updated the overlay files to include higher resolution videos
    • Added a message to users using SL OBS to view the setup guide instructions
    • Improved visuals of Offline.png and Offline.psd
    • Added “Screens” tab to setup guide


Retrowave Overlay and Alerts Setup Guide

General Information

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

In order to use the custom logo file you will need access to Photoshop. Photoshop is not required for any other portions of this product.

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

Before You Install

Please make sure to download and install the one of the fonts listed below:

  • Big Noodle Titling – This is the primary font used
  • Teko – This is the secondary recommended font
    • To download a Google font, click “select this font”, expand the popup bar towards the bottom right, and then click the download icon
  • Logo Fonts – These fonts are only needed if you’re editing the custom logo presets

If you are using StreamLabs OBS, you will need to uncheck the “Use Google Fonts” box to use any locally downloaded and installed fonts.


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 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, BRR 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.

Installing the Overlays – Super Charged (OBS Studio)

Check out the Supercharged Video tutorial! 

Before we import the Overlays, let’s cover a couple basics. With OBS Studio closed:

  • Please make sure you have installed the fonts shown in the “FONTS USED” section.
  • If you plan on using Streamlabels (the static text that updates when someone donates, follows, subs etc…), please make sure to have them installed.
  • Make sure to extract your “Overlays” download. You’ll want to make sure it’s a location that you want to keep.
  • To ensure no data loss of your previous scenes, we suggest creating a new “Scene Collection” using the tab at the top.
  • Please ensure your canvas is set to 1920×1080. Files > Settings > Video Base (Canvas) size.

Now lets import the Overlays!

  1. Click on the Tools tab
  2. Select Scripts
  3. Click the “+” Towards the bottom of the Scripts window
  4. Navigate to your extracted “Overlays” folder and the “~OBS Studio – Quick Install” folder
  5. Select the Quick Import “.lua” file and click “Open”
  6. In the Scripts window, select the loaded script.
  7. On the right hand side of the window, you’ll now see the import options.
  8. If you want to set up all the Scenes shown in the list, click on the “Setup all scenes” button.
    • If you only want to set up just specific elements included in the pack, you can change the drop down menu to “Sources”
    • Click on the “Add…” button for the element you wish to add. This will add it to the current scene you have shown in OBS.
  9. Once you’ve click on the “Setup all scenes”, click close on the Scripts window. You’ll now see all the scenes have been setup for you.

Customizing your imported set up

After you’ve imported your Overlays, you’ll want to customize certain elements. Here’s how:

  • Standard text – Right click the element, click on properties and change the what you want the text to show
  • Icons/images – Right click the element, click on properties, click on the “Browse” and locate the file you wish to replace the current one.
  • Streamlabel Text sources – Right click the “Label – …” text, click on properties, check the “Read from file” box, click “Browse” and locate the Streamlabel you would like to use.
  • Color Change – Any source in OBS Studio (except Stinger Transitions) can have a color correction filter applied to it.
    1. Right click the source
    2. Click on “Filters”
    3. Click the “+” at the bottom left of the popup window
    4. Select Color Correction*

*NOTE: You can copy color correction filters and past them to other sources quickly using the right click menu.

Setting up a stinger transition between scenes is easy with OBS Studio. We’ve included stingers with and without audio, and multiple color variations.

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 WebMs found in the “Retrowave Scene Transitions – Stingers” 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 a WebM file found in the “Retrowave Scene Transitions – Stingers” folder
  5. Make sure “Transition Point Type” is set to “Time (milliseconds)”
  6. Set the “Transition Point (milliseconds)” to 1000
  7. Enable sounds by setting “Audio Monitoring” to “Monitoring and Output”
  8. Leave other settings on their defaults
  9. Hit Done

 

Clearview Stinger Transition Settings SL OBS


Customizing Colors

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

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

Usage Terms

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

Please refer to our Terms and Conditions for more information.

Future Reiterations, Errors and Updates

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

Please follow @NerdsPwn on Twitter for update information.


Changelog

  • Adjusted the volume adjustments to 1% steps, reduced from 20%
  • 4/10/2018 – Added a “Free Extras” section with a chat box design.