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!