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

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

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. These files are included in the separate color folders.
  5. Adjust any text sources to customize for your stream.
  6. Adjust the alert sources as needed (you may want to resize the Alert Box sizes in the properties of this source).
  7. Double check all other sources. Please note that some text boxes may remain blank. For example, the “New Tip” text source may not show any names, as you might not have any new tippers.

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

  1. Click the Quick Setup link in your downloaded files to begin installing these alerts.
  2. If you’d like, choose “Create Profile” and name it something appropriate such as “Retrowave Alerts”. The import link will only override your alert package.
  3. Select “Use” for the profile you want to import into.
  4. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software. We recommend setting the size to at least 1000 wide and 900 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.

Muting Included Audio

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.

Optimize Your Alerts

By default the alerts will be imported with the high quality (hq) version of the WebM movie file. If you have concerns about bandwidth, performace, or data usage during your stream, you may want to consider uploading the files located in the “Optimized” folder found in your downloads. Simply upload the video file as you normally would with any StreamLabs alerts.

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

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

Increasing or Decreasing Goal Achieved Volume

To increase or decrease the volume, please use the following instructions:

  • In the goal you’d like to edit, go to the “JS” tab
  • Find the piece of code that reads var soundVolume = 40;
  • The number 40 represents the percentage of volume here
  • ONLY change the number 40 to a value between 0 and 100
  • If you make a mistake, and break the widgets, you may re-import these files
  • Please see pictures below for how yours should look before and after

Volume at 40%

40 Percent Audio

Volume at 0%

0% Audio

Customizing Your Widgets

Due to the high level of custom design, these widgets have limited customization features, if any. Some of the StreamLabs built in controls may not work to edit appearance.

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

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

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

Custom options included

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

  • Align to where? – Which position would you like your chat box to align to? This can be “top” or “bottom” – please do not include the quotes when typing in this entry.
  • Text Alignment – Would you like your text aligned to the “right”, “left”, or “center”? Please do not include the quotes when typing in this entry.
  • Character Separator – The character(s) used to separate the username and message.
  • Font Family – What font would you like to use for this package? Default is “Oswald”.
  • Font Weight – The “boldness” of the font. Higher is more bold.
  • Maximum Messages – How many messages do you want to show at one time?
  • Scale From Size – A multiplier that determines the original size of the username. Higher is larger.
  • Scale Animation Speed – How fast you want the scaling animation to be for the username. Lower is faster.
  • Border Height – The height of a dividing border on the bottom.
  • 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.

Importing StreamElements Pre-Made Scenes and Overlays

Installation with Streamelements.com is simple and can be completed in a matter of moments. Follow the instructions below:

  • Log into your primary Twitch account
  • Head over to Streamelements.com, and login, letting Streamelements be authorized to use your Twitch account.
  • Open the “Streamelements” folder and choose which overlay or scene you’d like to import. Each scene has it’s own link
  • Once you click the link, the overlay will be imported immediately and you will be taken to your “My Overlays” tab in Streamelements
  • Lastly, click the pencil icon under the new imported overlay, and customize the naming elements!

Please Note: Looping background videos may not always perform well in the browser source. If you notice any issues, please remove the background layer and add the looping video (located in your download folder) into your streaming software as a looping media source.

Importing StreamElements Alerts

This alert package is set up specifically for Streamelements users and utilizes the custom coding options available.

  • Log into your primary Twitch account
  • Head over to Streamelements.com, and login, letting Streamelements be authorized to use your Twitch account.
  • Open the “Streamelements” Alerts Setup link provided in your package.
  • Once you click the link, it will create a new “Overlay” in your “My Overlays” section and open up to show all your overlays.
  • Click the pencil icon in the newly created overlay
  • You Will now be in the Overlay Editor
  • On the left hand side, toward the bottom, click on the “Layers” up arrow
  • Click on the layer labelled, Alert Box
  • Next to the work “Layers” you will see an icon of 2 overlapping boxes. Click it
  • A popup will appear. Choose “Other Overlays”
  • Lastly, put a check box in all the Overlay sets that you want these alerts to appear in. Click Submit

Please Note: You can adjust the placement of the Alert Box prior to duplicating the layer to your other overlays, or you can position it per Scene.


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

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