Crypto - Setup Guide

Crypto Setup Guide

General Information

Thanks for checking out the Crypto Stream Pack. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take you through the setup process. If you have any questions that aren’t answered in this setup guide, please feel free to contact us.

Photoshop and other third party software is not required to use this product, however specific components can be edited in Photoshop and After Effects, as we provide some of the original files.

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

OBS Studios Tutorials by NerdOrDie

Buy This Product

Before You Install

Fonts Used

This is the font used throughout the pack and alerts.

Colors Used

  • Blue
    • Primary – #0469D0
  • White
    • Primary – #FFFFFF
  • Purple
    • Primary – #5304A2
  • Red
    • Primary – #891414

Installation Guide

Installing the Alerts – Streamlabs

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

  1. Click the Alerts Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as package name. The import link will only override your alert package. This means you can combine these alerts with any other scene collection/widgets you’ve made in Streamlabs. If you want to save your old alerts, it’s highly recommended to do this in a new profile.
  3. Select “Use” for the profile you want to import into.
  4. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software.

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

Delaying Text-to-Speech

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

Custom Alert Options

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

  • Font Family  – This is the font that will be used throughout the alert.
  • Top Text — Template – Text you want to be displayed in the Heading. Example: New Follower, New Sub, {amount} Donated
  • Top Text — Color – Color of the top text. Default: #FFFFFF
  • Top Text — Font Size – Size of the Top Text font. Default: 18
  • Top Text — Font Weight – The thickness of the font. Default: Medium (500)
  • Bottom Text — Template – Text you want to be displayed in the bottom of the alert. Default: {name}
  • Bottom Text — Color – Color of the bottom text. Default: #FFFFFF
  • Bottom Text — Font Size – Size of the bottom text. Default: 36
  • Bottom Text — Font Weight – The thickness of the bottom font. Default: Medium (500)
  • Flash Color – Color of flash the alert shows when activated. Default: #FFFFFF
  • Background Video – WebM Video used during the alert.
  • Video Volume – The volume of the default sound of the alert. (The video section shown above has audio embedded into it. This is it’s control

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 Alert Settings. When in the StreamElements editor, click on the alert layer, then click the Settings wheel next to the alert you wish to customize. Some alerts do not contain all of the options listed below.

  • Font Family  – This is the font that will be used throughout the alert.
  • Top Text — Template – Text you want to be displayed in the Heading. Example: New Follower, New Sub, {amount} Donated
  • Top Text — Color – Color of the top text. Default: #FFFFFF
  • Top Text — Font Size – Size of the Top Text font. Default: 18
  • Top Text — Font Weight – The thickness of the font. Default: Medium (500)
  • Bottom Text — Template – Text you want to be displayed in the bottom of the alert. Default: {name}
  • Bottom Text — Color – Color of the bottom text. Default: #FFFFFF
  • Bottom Text — Font Size – Size of the bottom text. Default: 36
  • Bottom Text — Font Weight – The thickness of the bottom font. Default: Medium (500)
  • Flash Color – Color of flash the alert shows when activated. Default: #FFFFFF
  • Background Video – WebM Video used during the alert.
  • Video Volume – The volume of the default sound of the alert. (The video section shown above has audio embedded into it. This is it’s control

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

These options are found in the Custom Fields tab.

  • Font Family – The font family used in the Chat Box. The default is Share Tech.
  • Text Align – This justifies the text to the Left, Center or Right. Default is Left
  • Display Type – How you want the text displayed. Default is: Partial Width
  • Name Color – Color of the Name in the Chat Box. Default is #0469D0
  • Separator – The letters or icons you want to separate the name from the chat. Default is “::”
  • Background Color – Color of the background in the Name box. Default is #000000 (Black)
  • Flash Color – Color that flashes before revealing the text. Default is: #FFFFFF (White)
  • Background Opacity – Adjust the opacity of the background in the Name Box. Default is 0
  • Spacing Between Messages – The space between each message. Default: 5
  • Tag Font Weight – Thickness of the font of the name: Default is: Bold (700)
  • Message Font Weight – Thickness of the font of the message. Default is: Medium (500)

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

These options are found in the Custom Fields tab.

  • Font Family – The font family used in the Chat Box. The default is Share Tech.
  • Text Align – This justifies the text to the Left, Center or Right. Default is Left
  • Display Type – How you want the text displayed. Default is: Partial Width
  • Name Color – Color of the Name in the Chat Box. Default is #0469D0
  • Separator – The letters or icons you want to separate the name from the chat. Default is “::”
  • Background Color – Color of the background in the Name box. Default is #000000 (Black)
  • Flash Color – Color that flashes before revealing the text. Default is: #FFFFFF (White)
  • Background Opacity – Adjust the opacity of the background in the Name Box. Default is 0
  • Spacing Between Messages – The space between each message. Default: 5
  • Tag Font Weight – Thickness of the font of the name: Default is: Bold (700)
  • Message Font Weight – Thickness of the font of the message. Default is: Medium (500)

Installing the Overlays – Streamlabs OBS

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

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

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

Creating your overlays

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

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

Installing the Overlays – Streamelements

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

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

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

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 your scenes in standard streaming software:

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

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

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

OBS Studio

  1. Under the “scene transitions” section, click the “+” under the drop down and select “Stinger”
  2. Give the “Stinger” a name and click “Ok”
  3. For “video file” click browse and select the stinger.webm found in the “Screens” folder
  4. Set the “transition point type” to frame and “transition point” to 60
  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 60
  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 “Frame”
  6. Set the “Transition Point” to 100
  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 Source AE File
  2. In the Stealth Stinger comp and scrub to an area that shows the graphics, around 00:43 is a good place for this
  3. Select the Control Layer
  4. In the Master Controls panel for this layer, use the control color options to change the colors as needed
  5. Enable “Toggle Transparency Grid” before rendering
  6. Render the Stealth Stinger comp as a compatible stinger file (.mov or .webm)

apex_stinger

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

If you’d like to edit the color of the alert icons or event list animations, you can do so two different ways:

  1. Most Alerts, Eventlists and Goals have a “Custom Fields” section in the widget settings.
  2. If there are no “Custom Fields” you can add a color correction filter. Right click your sources in your streaming software 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!

by NerdOrDie

Arcana - Setup Guide

Arcana – Setup Guide

General Information

Thanks for checking out this setup guide. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take you through the setup process. If you have any questions that aren’t answered in this setup guide, please feel free to contact us.

Photoshop and other third party software is not required to use this product, however specific components can be edited in Photoshop and After Effects, as we provide some of the original files.

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

OBS Studios Tutorials by NerdOrDie

Buy This Product

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

  • Blue: #00C9ED
  • Dark Gold: #FDA648
  • Light Gold: #FFE2A0

Installation Guide

Installing the Alerts – Streamlabs

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

  1. Click the Alerts Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as package name. The import link will only override your alert package. This means you can combine these alerts with any other scene collection/widgets you’ve made in Streamlabs. If you want to save your old alerts, it’s highly recommended to do this in a new profile.
  3. Select “Use” for the profile you want to import into.
  4. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software.

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

Delaying Text-to-Speech

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

Custom Alert Options

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

  • Font Family – The font family used in the alerts. The default is Roboto Slab.
  • Icon – The icon you would like show in the alert.
  • Top — Text Template – Text shown at the top. Default: New Follower, New Sub, New Tip. etc…
  • Top — Font Size – Size of the text at the top. Default: 20
  • Top — Font Color – Color of the top font. Default #00C9ED
  • Top — Drop Shadow Color – Color of the drop shadow from the top text. Default: #000000
  • Top — Font Weight – Thickness of the top font. Default: 700
  • Bottom — Text Template – Text at the bottom of the alert. Default: {name}
  • Bottom — Font Size – Size of the text at the top. Default: 30
  • Bottom — Font Color – Color of the bottom font. Default: #FFFFFF
  • Bottom — Drop Shadow Color – Color of the drop shadow from the bottom text. Default: #000000
  • Bottom — Font Weight -Thickness of bottom font. Default: 700
  • User Message — Drop Shadow Color – Color of the drop shadow from the User Message text. Default: #000000
  • Video File – Video File used for the alert animation
  • Video Volume – Controls the volume of the “Video File”. Default: 50

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 Alert Options

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

  • Font Family – The font family used in the alerts. The default is Roboto Slab.
  • Icon – The icon you would like show in the alert.
  • Top — Text Template – Text shown at the top. Default: New Follower, New Sub, New Tip. etc…
  • Top — Font Size – Size of the text at the top. Default: 20
  • Top — Font Color – Color of the top font. Default #00C9ED
  • Top — Drop Shadow Color – Color of the drop shadow from the top text. Default: #000000
  • Top — Font Weight – Thickness of the top font. Default: 700
  • Bottom — Text Template – Text at the bottom of the alert. Default: {name}
  • Bottom — Font Size – Size of the text at the top. Default: 30
  • Bottom — Font Color – Color of the bottom font. Default: #FFFFFF
  • Bottom — Drop Shadow Color – Color of the drop shadow from the bottom text. Default: #000000
  • Bottom — Font Weight -Thickness of bottom font. Default: 700
  • User Message — Drop Shadow Color – Color of the drop shadow from the User Message text. Default: #000000
  • Video File – Video File used for the alert animation
  • Video Volume – Controls the volume of the “Video File”. Default: 50

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

These options are found in the Custom Fields tab.

  • Font Family – The font family used in the Chat Box. The default is Open Sans.
  • Text Align – This justifies the text to the Left, Center or Right. Default is Left
  • Name — Font Color – Color of the Name in the Chat Box. Default is #000000 (Black)
  • Name — Background Color – Color of the background in the Name box. Default is #FFFFFF (White)
  • Name — Background Opacity – Adjust the opacity of the background in the Name Box. Default is 100
  • Chat Holder — Background Color – Color of the background for the chat messages. Default is #000000 (Black)
  • Chat Holder — Background Opacity – Adjust the opacity of the background of chat messages. Default is 20

Custom Goal Options

These options are found in the Custom Fields tab. Suggested source size is 1200×250.

  • Font Picker – The font family used in the Chat Box. The default is Open Sans.
  • Enable Glitch Effect – Turns off the Glitch Effect. Setting to off may save system resources.
  • Glitch Color Effect – Higher will show more color, but may also show small outlines on the widget
  • Glitch Minimum Time – The minimum time for a glitch effect to happen, lower means glitches will happen more often
  • Goal Bar Color – Color of the bar that for goal in.
  • Main Shape Color – Color of the Goal holder
  • Font Weight – Thickness of the font
  • Title Font Size – Size of the title font
  • Title Font Color – Color of the Title font
  • Bottom Area Font Color – Color of the font in the bottom area
  • Current/Total Goal Font Size – Font size of the Current goal and Total Goals
  • End Date Font Size – Font size of the goal end date
  • Goal Met Text – Text to display when the goal has been met
  • Before Goal Text – Text before the goal. Default is “$”
  • After Goal Text – Text following the goal text. Default is “blank”
  • Divider – The text used as a divider. Default is “/”
  • Show Top Part of Frame –  Show the top part of the frame?

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

These options are found in the Custom Fields tab.

  • Font Family – The font family used in the Chat Box. The default is Open Sans.
  • Text Align – This justifies the text to the Left, Center or Right. Default is Left
  • Name — Font Color – Color of the Name in the Chat Box. Default is #000000 (Black)
  • Name — Background Color – Color of the background in the Name box. Default is #FFFFFF (White)
  • Name — Background Opacity – Adjust the opacity of the background in the Name Box. Default is 100
  • Chat Holder — Background Color – Color of the background for the chat messages. Default is #000000 (Black)
  • Chat Holder — Background Opacity – Adjust the opacity of the background of chat messages. Default is 20

Custom Goal Options

These options are found in the Custom Fields tab. Suggested source size is 1200×250.

  • Font Picker – The font family used in the Chat Box. The default is Open Sans.
  • Enable Glitch Effect – Turns off the Glitch Effect. Setting to off may save system resources.
  • Glitch Color Effect – Higher will show more color, but may also show small outlines on the widget
  • Glitch Minimum Time – The minimum time for a glitch effect to happen, lower means glitches will happen more often
  • Goal Bar Color – Color of the bar that for goal in.
  • Main Shape Color – Color of the Goal holder
  • Font Weight – Thickness of the font
  • Title Font Size – Size of the title font
  • Title Font Color – Color of the Title font
  • Bottom Area Font Color – Color of the font in the bottom area
  • Current/Total Goal Font Size – Font size of the Current goal and Total Goals
  • End Date Font Size – Font size of the goal end date
  • Goal Met Text – Text to display when the goal has been met
  • Before Goal Text – Text before the goal. Default is “$”
  • After Goal Text – Text following the goal text. Default is “blank”
  • Divider – The text used as a divider. Default is “/”
  • Show Top Part of Frame –  Show the top part of the frame?

Installing the Overlays – Streamlabs OBS

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

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

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

Creating your overlays

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

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

Installing the Overlays – Streamelements

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

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

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

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

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

Editing the Language and Text in Your Overlays

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

Setting up your scenes in standard streaming software:

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

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

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

OBS Studio

  1. Under the “scene transitions” section, click the “+” under the drop down and select “Stinger”
  2. Give the “Stinger” a name and click “Ok”
  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 2300
  5. Enable sounds by setting “Audio Monitoring” to “Monitoring and Output”
  6. Click OK

StreamLabs OBS

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

Editing the Stinger After Effects File

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

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

apex_stinger

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

If you’d like to edit the color of the alert icons or event list animations, you can do so two different ways:

  1. Most Alerts, Eventlists and Goals have a “Custom Fields” section in the widget settings.
  2. Some products may contain additional video/webm files you can swap for the existing video file within each alert settings.
  3. Alternatively, if there are no “Custom Fields” or alternative video/webm files you can add a color correction filter. Right click your sources in your streaming software 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!

by NerdOrDie

Wicked - Setup Guide

Wicked – Setup Guide

General Information

Thanks for checking out this setup guide. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take you through the setup process. If you have any questions that aren’t answered in this setup guide, please feel free to contact us.

Photoshop and other third party software is not required to use this product, however specific components can be edited in Photoshop and After Effects, as we provide some of the original files.

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

OBS Studios Tutorials by NerdOrDie

Download Wicked Free

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

  • Pink #FFB9E8
  • Purple #553287
  • Green #05fd07
  • Blue #36C6FF
  • Orange #FF8501

For more colors, please check out the custom field section of the alerts.

Installation Guide

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.

IMPORTANT: To align to your webcam properly

The easiest way to align to your webcam is by using a width of 740 and a height of at least 800. The width will match exactly that of the webcam frame used.

There is a custom field option Enable Webcam Spacing that will add the proper height needed for alignment. This means if these two sources are both placed in the top left of a scene, they should align perfectly. We recommend putting the alerts and overlay in their own scene, and then using the add scene as source feature to keep them grouped.

You can also test the alerts multiple times and align by dragging if needed.

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.

Custom Alert Options

These options are found in the Custom Fields tab. Use these to customize the look of your alerts.

  • Font Family – The font family used in the alerts. The default is Creepster.
  • Enable Webcam Spacing – Adds spacing at the top that matches the vertical spacing of the webcam. Allows you to more easily align the webcam frame with the alerts.

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 Alert Options

These options are found in the Custom Fields tab.

  • Font Family – The font family used in the alerts. The default is Creepster.
  • Enable Webcam Spacing – Adds spacing at the top that matches the vertical spacing of the webcam. Allows you to more easily align the webcam frame with the alerts.

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

  1. Unzip/Extract the files you’ve downloaded onto your computer.
  2. Open your streaming software. Add animated parts (WEBM files) by adding “media sources” for video files or “image sources” for a static image.
  3. Ensure that you enable “looping” for any video sources

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!

by NerdOrDie

Focus - Setup Guide

Focus – Setup Guide

General Information

Thanks for checking out this setup guide. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take you through the setup process. If you have any questions that aren’t answered in this setup guide, please feel free to contact us.

Photoshop and other third party software is not required to use this product, however specific components can be edited in Photoshop and After Effects, as we provide some of the original files.

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

OBS Studios Tutorials by NerdOrDie

Buy This Product

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

  • Blue: #00DEFF
  • Green: #00FF7E
  • Orange: #FFA901
  • White: #FFFFFF
  • Red: #FE1100
  • Purple: #A500FF
  • Yellow: #FFF600
  • Magenta: #FF0072

Installation Guide

Installing the Alerts – Streamlabs

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

  1. Click the Alerts Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as package name. The import link will only override your alert package. This means you can combine these alerts with any other scene collection/widgets you’ve made in Streamlabs. If you want to save your old alerts, it’s highly recommended to do this in a new profile.
  3. Select “Use” for the profile you want to import into.
  4. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software.

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

Delaying Text-to-Speech

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

Custom Alert Options

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

  • Font Family – The font family used in the alerts. The default is Roboto.
  • Font Weight – The Thickness of the font.
  • Alignment – This the location the alert will be displayed. Left, Center or Right
  • Top Text Area Template – Text you want to be displayed in the Heading. Default is the {name} tag
  • Top Bar – First Animated Bar Color – Color of the first bar. Default #000000
  • Top Bar – End Color – The text typically used for the type of alert. EX: Follow, Raid, Donation etc… Default: #FFFFFF
  • Top Area – Font Size – Font Size of the Top Text. Default: 40
  • Top Bars – Background Opacity – Opacity of the top bars. Default 100
  • Bottom Text Area – Text are typically used to display what type of alert. EX: Just follower, Subscriber etc… Can use {tags}
  • Bottom Bar – First Animated – Color of the bottom bar that animates first. Default: #000000
  • Bottom Bar – End Color – Color of the bar after animating. Text will be show on this bar. Default: #FFFFFF
  • Bottom Bar – Font Color – Color of the Bottom Area Text
  • Bottom Text Area – Font Size – Size of the bottom font. Default: 24
  • Bottom Bars – Background Opacity – Opacity of the bottom bars. Default: 100
  • Space Under Image – How many pixels between the bottom of your custom image, and the top bar. Default: 5
  • Space Under Top Text Area – How many pixels between the top and bottom bar. Default: 0
  • Bars Animation Direction – The direction the bar animate in from: Default: From Left
  • Letter Animation Direction – The direction the letters animate in from. Default: From Top
  • Text Stagger Origin – The direction the letters stagger in from during animation. Default From Left
  • Message Animation Origin – The direction the user message animates in from
  • Delay Time – The time the animation pauses to show text – you may need to adjust Alert Duration in order to show the full animation. Default: 4
  • Animate Image Bar – If yes, this will have an animation bar like the text. (if false, the image will just fade in – only active if image is set)
  • Image – Location to upload your custom image
  • Image – Max Width – Max width of the image in pixels. Default: 500
  • Image – Max Height – Max Height of the image in pixels. Default: 200
  • Image – Bar Animation Color – Color of the bar that animates the image in. (Only shown if “Animate Image Bar is set to: Yes) Default: #000000

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 Alert Options

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

  • Font Family – The font family used in the alerts. The default is Roboto.
  • Font Weight – The Thickness of the font.
  • Alignment – This the location the alert will be displayed. Left, Center or Right
  • Top Text Area Template – Text you want to be displayed in the Heading. Default is the {name} tag
  • Top Bar – First Animated Bar Color – Color of the first bar. Default #000000
  • Top Bar – End Color – The text typically used for the type of alert. EX: Follow, Raid, Donation etc… Default: #FFFFFF
  • Top Area – Font Size – Font Size of the Top Text. Default: 40
  • Top Bars – Background Opacity – Opacity of the top bars. Default 100
  • Bottom Text Area – Text are typically used to display what type of alert. EX: Just follower, Subscriber etc… Can use {tags}
  • Bottom Bar – First Animated – Color of the bottom bar that animates first. Default: #000000
  • Bottom Bar – End Color – Color of the bar after animating. Text will be show on this bar. Default: #FFFFFF
  • Bottom Bar – Font Color – Color of the Bottom Area Text
  • Bottom Text Area – Font Size – Size of the bottom font. Default: 24
  • Bottom Bars – Background Opacity – Opacity of the bottom bars. Default: 100
  • Space Under Image – How many pixels between the bottom of your custom image, and the top bar. Default: 5
  • Space Under Top Text Area – How many pixels between the top and bottom bar. Default: 0
  • Bars Animation Direction – The direction the bar animate in from: Default: From Left
  • Letter Animation Direction – The direction the letters animate in from. Default: From Top
  • Text Stagger Origin – The direction the letters stagger in from during animation. Default From Left
  • Message Animation Origin – The direction the user message animates in from
  • Delay Time – The time the animation pauses to show text – you may need to adjust Alert Duration in order to show the full animation. Default: 4
  • Animate Image Bar – If yes, this will have an animation bar like the text. (if false, the image will just fade in – only active if image is set)
  • Image – Max Width – Max width of the image in pixels. Default: 500
  • Image – Max Height – Max Height of the image in pixels. Default: 200
  • Image – Bar Animation Color – Color of the bar that animates the image in. (Only shown if “Animate Image Bar is set to: Yes) Default: #000000

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

These options are found in the Custom Fields tab.

  • Font Family – The font family used in the Chat Box. The default is Open Sans.
  • Text Align – This justifies the text to the Left, Center or Right. Default is Left
  • Name — Font Color – Color of the Name in the Chat Box. Default is #000000 (Black)
  • Name — Background Color – Color of the background in the Name box. Default is #FFFFFF (White)
  • Name — Background Opacity – Adjust the opacity of the background in the Name Box. Default is 100
  • Chat Holder — Background Color – Color of the background for the chat messages. Default is #000000 (Black)
  • Chat Holder — Background Opacity – Adjust the opacity of the background of chat messages. Default is 20

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

These options are found in the Custom Fields tab.

  • Font Family – The font family used in the Chat Box. The default is Open Sans.
  • Text Align – This justifies the text to the Left, Center or Right. Default is Left
  • Name — Font Color – Color of the Name in the Chat Box. Default is #000000 (Black)
  • Name — Background Color – Color of the background in the Name box. Default is #FFFFFF (White)
  • Name — Background Opacity – Adjust the opacity of the background in the Name Box. Default is 100
  • Chat Holder — Background Color – Color of the background for the chat messages. Default is #000000 (Black)
  • Chat Holder — Background Opacity – Adjust the opacity of the background of chat messages. Default is 20

Installing the Overlays – Streamlabs OBS

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

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

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

Creating your overlays

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

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

Installing the Overlays – Streamelements

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

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

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

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

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

Editing the Language and Text in Your Overlays

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

Setting up your scenes in standard streaming software:

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

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

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

OBS Studio

  1. Under the “scene transitions” section, click the “+” under the drop down and select “Stinger”
  2. Give the “Stinger” a name and click “Ok”
  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 500
  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 1000
  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 500
  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 Glitch 2 AE File
  2. In the Stealth Stinger comp and scrub to an area that shows the graphics, around 00:43 is a good place for this
  3. Select the Control Layer
  4. In the Master Controls panel for this layer, use the control color options to change the colors as needed
  5. Enable “Toggle Transparency Grid” before rendering
  6. Render the Stealth Stinger comp as a compatible stinger file (.mov or .webm)

apex_stinger

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

If you’d like to edit the color of the alert icons or event list animations, you can do so two different ways:

  1. Most Alerts, Eventlists and Goals have a “Custom Fields” section in the widget settings.
  2. If there are no “Custom Fields” you can add a color correction filter. Right click your sources in your streaming software 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!

by NerdOrDie

Glitch 2 Setup Guide

Glitch 2 Setup Guide

General Information

Thanks for checking out the Glitch 2 Stream Pack. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take you through the setup process. If you have any questions that aren’t answered in this setup guide, please feel free to contact us.

Photoshop and other third party software is not required to use this product, however specific components can be edited in Photoshop and After Effects, as we provide some of the original files.

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

OBS Studios Tutorials by NerdOrDie

Buy This Product

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

  • Blue: #00DEFF
  • Green: #00FF7E
  • Orange: #FFA901
  • White: #FFFFFF
  • Red: #FE1100
  • Purple: #A500FF
  • Yellow: #FFF600
  • Magenta: #FF0072

Installation Guide

Installing the Alerts – Streamlabs

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

  1. Click the Alerts Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as package name. The import link will only override your alert package. This means you can combine these alerts with any other scene collection/widgets you’ve made in Streamlabs. If you want to save your old alerts, it’s highly recommended to do this in a new profile.
  3. Select “Use” for the profile you want to import into.
  4. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software.

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

Delaying Text-to-Speech

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

Custom Alert Options

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

  • Font Picker – The font family used in the alerts. The default is Roboto.
  • Alignment – Left, Center or Right – This the location the alert will be displayed. This will be adjust based on how you want the alert to show popping from the Webcam.
  • Heading Text – Text you want to be displayed in the Heading. Default is the {name} tag
  • Heading Box — Font Color – Color of the Heading Text
  • Subheading Text – The text typically used for the type of alert. EX: Follow, Raid, Donation etc…
  • Subheading — Font Color – Color of the Subheading Text.
  • Accent Color – Color of the Alert Accents.
  • Scale Size – Adjust the size of the alerts. ***ADJUSTING THIS BEYOND DEFAULT REQUIRES HARDWARE ACCELERATION***
  • Heading Box — Background Color – Color of the Heading box background
  • Heading Box — Opacity – Adjust the opacity of the Heading box. Default is 90
  • Heading Box — Font Size Text – Size of the Heading Text Font. Default is 30
  • Heading Box — Font Weight – Weight of the font (Boldness). Default is 700
  • Show Bottom Tab? – This is part of the alert that integrates with the Webcam border. Default is Yes
  • Delay Time – Adjust how long after the alert appears, that it begins to animate out. If raising higher than the default, you may need to adjust the alert duration. Default is 6
  • Enable Float Effect – The alerts have a slow floating effect. This controls that effect. Default is Yes
  • Enable Glitch Effect – Control the glitch effect. Default is Yes
  • Special Text Box – Display specific text wanted. Not used on all alerts. Depending on the alert, the default is usually the {count} tag
  • Lower Text Box – Display specific text wanted. Not used on all alerts. Depending on the alert, the default is usually [#AMOUNT_{amount}] (for donations)

Installing the Alerts – Streamelements

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

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

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

Custom Alert Options

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

  • Font Picker – The font family used in the alerts. The default is Roboto.
  • Alignment – Left, Center or Right – This the location the alert will be displayed. This will be adjust based on how you want the alert to show popping from the Webcam.
  • Heading Text – Text you want to be displayed in the Heading. Default is the {name} tag
  • Heading Box — Font Color – Color of the Heading Text
  • Subheading Text – The text typically used for the type of alert. EX: Follow, Raid, Donation etc…
  • Subheading — Font Color – Color of the Subheading Text.
  • Accent Color – Color of the Alert Accents.
  • Scale Size – Adjust the size of the alerts. ***ADJUSTING THIS BEYOND DEFAULT REQUIRES HARDWARE ACCELERATION***
  • Heading Box — Background Color – Color of the Heading box background
  • Heading Box — Opacity – Adjust the opacity of the Heading box. Default is 90
  • Heading Box — Font Size Text – Size of the Heading Text Font. Default is 30
  • Heading Box — Font Weight – Weight of the font (Boldness). Default is 700
  • Show Bottom Tab? – This is part of the alert that integrates with the Webcam border. Default is Yes
  • Delay Time – Adjust how long after the alert appears, that it begins to animate out. If raising higher than the default, you may need to adjust the alert duration. Default is 6
  • Enable Float Effect – The alerts have a slow floating effect. This controls that effect. Default is Yes
  • Enable Glitch Effect – Control the glitch effect. Default is Yes
  • Special Text Box – Display specific text wanted. Not used on all alerts. Depending on the alert, the default is usually the {count} tag
  • Lower Text Box – Display specific text wanted. Not used on all alerts. Depending on the alert, the default is usually [#AMOUNT_{amount}] (for donations)

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

These options are found in the Custom Fields tab.

  • Font Family – The font family used in the Chat Box. The default is Open Sans.
  • Text Align – This justifies the text to the Left, Center or Right. Default is Left
  • Name — Font Color – Color of the Name in the Chat Box. Default is #000000 (Black)
  • Name — Background Color – Color of the background in the Name box. Default is #FFFFFF (White)
  • Name — Background Opacity – Adjust the opacity of the background in the Name Box. Default is 100
  • Chat Holder — Background Color – Color of the background for the chat messages. Default is #000000 (Black)
  • Chat Holder — Background Opacity – Adjust the opacity of the background of chat messages. Default is 20

Custom Goal Options

These options are found in the Custom Fields tab. Suggested source size is 1200×250.

  • Font Picker – The font family used in the Chat Box. The default is Open Sans.
  • Enable Glitch Effect – Turns off the Glitch Effect. Setting to off may save system resources.
  • Glitch Color Effect – Higher will show more color, but may also show small outlines on the widget
  • Glitch Minimum Time – The minimum time for a glitch effect to happen, lower means glitches will happen more often
  • Goal Bar Color – Color of the bar that for goal in.
  • Main Shape Color – Color of the Goal holder
  • Font Weight – Thickness of the font
  • Title Font Size – Size of the title font
  • Title Font Color – Color of the Title font
  • Bottom Area Font Color – Color of the font in the bottom area
  • Current/Total Goal Font Size – Font size of the Current goal and Total Goals
  • End Date Font Size – Font size of the goal end date
  • Goal Met Text – Text to display when the goal has been met
  • Before Goal Text – Text before the goal. Default is “$”
  • After Goal Text – Text following the goal text. Default is “blank”
  • Divider – The text used as a divider. Default is “/”
  • Show Top Part of Frame –  Show the top part of the frame?

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

These options are found in the Custom Fields tab.

  • Font Family – The font family used in the Chat Box. The default is Open Sans.
  • Text Align – This justifies the text to the Left, Center or Right. Default is Left
  • Name — Font Color – Color of the Name in the Chat Box. Default is #000000 (Black)
  • Name — Background Color – Color of the background in the Name box. Default is #FFFFFF (White)
  • Name — Background Opacity – Adjust the opacity of the background in the Name Box. Default is 100
  • Chat Holder — Background Color – Color of the background for the chat messages. Default is #000000 (Black)
  • Chat Holder — Background Opacity – Adjust the opacity of the background of chat messages. Default is 20

Custom Goal Options

These options are found in the Custom Fields tab. Suggested source size is 1200×250.

  • Font Picker – The font family used in the Chat Box. The default is Open Sans.
  • Enable Glitch Effect – Turns off the Glitch Effect. Setting to off may save system resources.
  • Glitch Color Effect – Higher will show more color, but may also show small outlines on the widget
  • Glitch Minimum Time – The minimum time for a glitch effect to happen, lower means glitches will happen more often
  • Goal Bar Color – Color of the bar that for goal in.
  • Main Shape Color – Color of the Goal holder
  • Font Weight – Thickness of the font
  • Title Font Size – Size of the title font
  • Title Font Color – Color of the Title font
  • Bottom Area Font Color – Color of the font in the bottom area
  • Current/Total Goal Font Size – Font size of the Current goal and Total Goals
  • End Date Font Size – Font size of the goal end date
  • Goal Met Text – Text to display when the goal has been met
  • Before Goal Text – Text before the goal. Default is “$”
  • After Goal Text – Text following the goal text. Default is “blank”
  • Divider – The text used as a divider. Default is “/”
  • Show Top Part of Frame –  Show the top part of the frame?

Installing the Overlays – Streamlabs OBS

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

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

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

Creating your overlays

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

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

Installing the Overlays – Streamelements

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

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

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

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 your scenes in standard streaming software:

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

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

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

OBS Studio

  1. Under the “scene transitions” section, click the “+” under the drop down and select “Stinger”
  2. Give the “Stinger” a name and click “Ok”
  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 500
  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 1000
  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 500
  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 Glitch 2 AE File
  2. In the Stealth Stinger comp and scrub to an area that shows the graphics, around 00:43 is a good place for this
  3. Select the Control Layer
  4. In the Master Controls panel for this layer, use the control color options to change the colors as needed
  5. Enable “Toggle Transparency Grid” before rendering
  6. Render the Stealth Stinger comp as a compatible stinger file (.mov or .webm)

apex_stinger

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

If you’d like to edit the color of the alert icons or event list animations, you can do so two different ways:

  1. Most Alerts, Eventlists and Goals have a “Custom Fields” section in the widget settings.
  2. If there are no “Custom Fields” you can add a color correction filter. Right click your sources in your streaming software 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!

by NerdOrDie

Borderline - Setup Guide

General Information

Thanks for checking out the Borderline Stream Pack. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take you through the setup process. If you have any questions that aren’t answered in this setup guide, please feel free to contact us.

Photoshop and other third party software is not required to use this product, however specific components can be edited in Photoshop and After Effects, as we provide some of the original files.

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

OBS Studios Tutorials by NerdOrDie

Buy This Product

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 – Presets

  • Green Blue
    • #00FFAE #0054FF
  • Blue Purple
    • #02A9FF #B400FF
  • Red Yellow
    • #FF0000 #FFAE00
  • Red Blue
    • #FF0000 #0054FF

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.

  • Font Picker – Choose the font for the alerts
  • Top Line Text Template – We recommend not using dynamic tags, and keeping this shorter than other text fields if possible.
  • Middle Line Text – What is shown on the middle line. Default is {name}
  • Bottom Line Text – What is shown on the bottom line.
  • Scale Size – Increase to make the alert size and animations larger. Hardware acceleration suggested.
  • First Gradient Color – Color that starts on the left
  • Second Gradient Color – Color that starts on the left
  • Font Weight – The thickness of the font used
  • Tag Font Size – Top and bottom font areas
  • Tag Font Color – Top and bottom font areas
  • Middle Text Font Size – The larger text in the middle
  • Middle Text Font Color – The larger text in the middle
  • Middle Animate Color – The color the middle letters change to during the animation
  • Enable Text Shadow – Middle Text and Alert Message
  • Primary Icon Color – The main color used in the animated icon section, by default this is green #00FFAE
  • Accent Icon Color – Certain icon animation accents colors, such as the star/lightning bolt alternate, Default is gold #FFDE00
  • Icon Animation Type – Change the type of animation used

Installing the Alerts – Streamelements

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

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

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

Custom Alert Options

These options are found in the Custom Fields tab.

  • Font Picker – Choose the font for the alerts
  • Top Line Text Template – We recommend not using dynamic tags, and keeping this shorter than other text fields if possible.
  • Middle Line Text – What is shown on the middle line. Default is {name}
  • Bottom Line Text – What is shown on the bottom line.
  • Scale Size – Increase to make the alert size and animations larger. Hardware acceleration suggested.
  • First Gradient Color – Color that starts on the left
  • Second Gradient Color – Color that starts on the left
  • Font Weight – The thickness of the font used
  • Tag Font Size – Top and bottom font areas
  • Tag Font Color – Top and bottom font areas
  • Middle Text Font Size – The larger text in the middle
  • Middle Text Font Color – The larger text in the middle
  • Middle Animate Color – The color the middle letters change to during the animation
  • Enable Text Shadow – Middle Text and Alert Message
  • Primary Icon Color – The main color used in the animated icon section, by default this is green #00FFAE
  • Accent Icon Color – Certain icon animation accents colors, such as the star/lightning bolt alternate, Default is gold #FFDE00
  • Icon Animation Type – Change the type of animation used

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.

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

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 the Overlays – Streamlabs OBS

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

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

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

Creating your overlays

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

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

Installing the Overlays – Streamelements

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

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

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

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 your scenes in standard streaming software:

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

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

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

OBS Studio

  1. Under the “scene transitions” section, click the “+” under the drop down and select “Stinger”
  2. Give the “Stinger” a name and click “Ok”
  3. For “video file” click browse and select the stinger.webm found in the “Screens” folder
  4. Set the “transition point type” to time and “transition point” to 1000
  5. Enable sounds by setting “Audio Monitoring” to “Monitoring and Output”
  6. Click OK

StreamLabs OBS

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

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

apex_stinger

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

If you’d like to edit the color of the alert icons or event list animations, you can do so using the custom fields of the Widget. Alternatively, you can add a color correction filter that will effect the entire source. 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!

by NerdOrDie

Stealth - Setup Guide

General Information

Thanks for checking out the Stealth Stream Pack. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take you through the setup process. If you have any questions that aren’t answered in this setup guide, please feel free to contact us.

Photoshop and other third party software is not required to use this product, however specific components can be edited in Photoshop and After Effects, as we provide some of the original files.

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

OBS Studios Tutorials by NerdOrDie

Buy This Product

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 – Presets

  • Purple Set
    • Primary: #8600d3
  • Red Set
    • Primary: #d40000
  • White Set
    • Primary: #ffffff
  • Yellow Set
    • Primary: #ffe400

Installation Guide

Installing the Alerts – Streamlabs

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

  1. Click the Alerts Quick Setup link to begin installing these alerts.
  2. If you’d like, choose “Create Widget Theme” and name it something appropriate such as package name. The import link will only override your alert package. This means you can combine these alerts with any other scene collection/widgets you’ve made in Streamlabs. If you want to save your old alerts, it’s highly recommended to do this in a new profile.
  3. Select “Use” for the profile you want to import into.
  4. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software.

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

Delaying Text-to-Speech

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

Custom Alert Options

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

  • Font Picker Example – The font family used in the alerts. The default is Audiowide.
  • Font Weight – The thickness of the font
  • Shape Design –
    Stealth Alert Shapes
  • Top Text Template – The text at the top of the alert. You may use tags such as {name}, {months}, {count}, etc. here.
  • Bottom Text Template – The text at the bottom the the alert. You may use tags such as {name}, {months}, {count}, etc. here.
  • Top Text – Text Color – Color of the Top Text.
  • Top Text – Text Size – Size of the Top Text
  • Top Text – Vertical Offset – Ability to move the Top Text further up or down.
  • Bottom Text – Text Color – Color of the Bottom Text
  • Bottom Text – Text Size – Size of the Bottom Text
  • Bottom Text – Vertical Offset – Ability to move the Top Text further up or down.
  • Shape Main Color – Color of the Main shapes
  • Shape Accent Color – Color of the accent shapes
  • Shape Width – Smaller Shapes – Width of the smaller shapes in the alert
  • Shape Width – Larger Shapes – Width of the larger shapes in the alert
  • Shape Scale Size – Overall size of the shapes
  • Box Background Color – Color of the background box
  • Box Background Opacity – Transparency control for the background box
  • Box Scale Size – Size of the background box
  • Frame Accent Color – Color of the frame accents (Not the color of the frame)
  • Outro Delay – How long the animation stays prior to animating out. (When adjusting, make sure to adjust the default alert duration to slightly exceed this delay)

Installing the Alerts – Streamelements

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

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

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

Custom Alert Options

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

  • Font Picker Example – The font family used in the alerts. The default is Audiowide.
  • Font Weight – The thickness of the font
  • Shape Design –
    Stealth Alert Shapes
  • Top Text Template – The text at the top of the alert. You may use tags such as {name}, {months}, {count}, etc. here.
  • Bottom Text Template – The text at the bottom the the alert. You may use tags such as {name}, {months}, {count}, etc. here.
  • Top Text – Text Color – Color of the Top Text.
  • Top Text – Text Size – Size of the Top Text
  • Top Text – Vertical Offset – Ability to move the Top Text further up or down.
  • Bottom Text – Text Color – Color of the Bottom Text
  • Bottom Text – Text Size – Size of the Bottom Text
  • Bottom Text – Vertical Offset – Ability to move the Top Text further up or down.
  • Shape Main Color – Color of the Main shapes
  • Shape Accent Color – Color of the accent shapes
  • Shape Width – Smaller Shapes – Width of the smaller shapes in the alert
  • Shape Width – Larger Shapes – Width of the larger shapes in the alert
  • Shape Scale Size – Overall size of the shapes
  • Box Background Color – Color of the background box
  • Box Background Opacity – Transparency control for the background box
  • Box Scale Size – Size of the background box
  • Frame Accent Color – Color of the frame accents (Not the color of the frame)
  • Outro Delay – How long the animation stays prior to animating out. (When adjusting, make sure to adjust the default alert duration to slightly exceed this delay)

Installing the Overlays – Streamlabs OBS

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

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

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

Creating your overlays

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

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

Installing the Overlays – Streamelements

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

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

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

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 your scenes in standard streaming software:

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

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

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

OBS Studio

  1. Under the “scene transitions” section, click the “+” under the drop down and select “Stinger”
  2. Give the “Stinger” a name and click “Ok”
  3. For “video file” click browse and select the stinger.webm found in the “Free Extras” 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 “Free Extras” folder
  5. Make sure “Transition Point Type” is set to “Time (milliseconds)”
  6. Set the “Transition Point (milliseconds)” to 1000
  7. Leave other settings on their defaults
  8. Hit Done

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

apex_stinger

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!

by Tylegn

Background_Loop_Moment_Moment

Arcade Pop - Setup Guide

General Information

Thanks for checking out the Arcade Pop Stream Pack. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take you through the setup process. If you have any questions that aren’t answered in this setup guide, please feel free to contact us.

Photoshop and other third party software is not required to use this product, however specific components can be edited in Photoshop and After Effects, as we provide some of the original files.

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

OBS Studios Tutorials by NerdOrDie

Buy This Product

Before You Install

Fonts Used

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

Helpful Tips

  • To ensure the best results, please make sure that your streaming application (OBS Studio, Streamlabs OBS, or Xsplit) is closed during import process (Alerts/Widgets).
  • Head to Streamlabs.com and sign in with your preferred streaming platform.
  • After importing the alerts to your Streamlabs account. You may open your streaming application for testing.

Main Colors Used:

Teal – 8BFFB0

Purple – D4A9FF

Red – FF6A6A

Blue – 63E7FF

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.

  • Font Family — Choose your font
  • Pause Time — Time to pause the alert after the intro animation, before it animates out.
  • Top Text Template — Enter in a text. EX: New Follower
  • Middle Text — Enter a text you want displayed.  EX: {name}
  • Bottom Text — Enter a text you want displayed for the Bottom line. This text is ABOVE the user message, but below the {name}
  • Main Shape — Background Color — Choose a color for the background
  • Main Shape — Background Opacity — Default 100%
  • Main Shape — Stroke Color — Choose a color for the stroke.
  • Main Shape — Scale Size % — Default 100
  • Main Shape — Icon Scale Size % — Default 80
  • Main Shape — Icon X Offset — Default 0
  • Main Text — Top Text Color — Choose a color for the Top Text
  • Main Text — Lower Text Color — Choose a color for the Lower Text
  • Main Text — Text Shadow Color — Default color #000000
  • Main Text — Y Offset — Use to shift the text up or down, positive numbers move the text down. Default 20
  • Main Text — Font Weight — Thickness of the font. Default 700
  • Main Text — Top Text Font Size — Adjust the size of the Top Text font. Default 26
  • Main Text — Middle Text Font Size — Adjust the size of the Middle Text font. Default 42
  • Main Text — Bottom Text Font Size —Adjust the size of the Bottom Text font. Default 26
  • Sound Effects Volume — Volume adjustment for sound effects. Default 50
  • Sound Effects — Ability to add a custom sound
  • Background Video File — Ability to replace our video file with your own.

*NOTE: User message text is controlled in the default settings.

Installing the Alerts – Streamelements

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

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

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

Custom Alert Options

These options are found in the Custom Fields tab.

  • Font Family — Choose your font
  • Pause Time — Time to pause the alert after the intro animation, before it animates out.
  • Top Text Template — Enter in a text. EX: New Follower
  • Middle Text — Enter a text you want displayed.  EX: {name}
  • Bottom Text — Enter a text you want displayed for the Bottom line. This text is ABOVE the user message, but below the {name}
  • Main Shape — Background Color — Choose a color for the background
  • Main Shape — Background Opacity — Default 100%
  • Main Shape — Stroke Color — Choose a color for the stroke.
  • Main Shape — Scale Size % — Default 100
  • Main Shape — Icon Scale Size % — Default 80
  • Main Shape — Icon X Offset — Default 0
  • Main Text — Top Text Color — Choose a color for the Top Text
  • Main Text — Lower Text Color — Choose a color for the Lower Text
  • Main Text — Text Shadow Color — Default color #000000
  • Main Text — Y Offset — Use to shift the text up or down, positive numbers move the text down. Default 20
  • Main Text — Font Weight — Thickness of the font. Default 700
  • Main Text — Top Text Font Size — Adjust the size of the Top Text font. Default 26
  • Main Text — Middle Text Font Size — Adjust the size of the Middle Text font. Default 42
  • Main Text — Bottom Text Font Size —Adjust the size of the Bottom Text font. Default 26
  • Sound Effects Volume — Volume adjustment for sound effects. Default 50
  • Sound Effects — Ability to add a custom sound
  • Background Video File — Ability to replace our video file with your own.

*NOTE: User message text is controlled in the default 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, BRB etc…)

Creating your overlays

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

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

Installing the Overlays – Streamelements

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

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

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

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

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

Editing the Language and Text in Your Overlays

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

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.

Setting up your scenes in standard streaming software:

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

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

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

OBS Studio

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

StreamLabs OBS

  1. Click the gear icon above your scenes
  2. Set the “Transition” option to “Stinger”
  3. Select Browse for the “Video File” and choose the stinger file found in the “Screens” folder
  4. Set the “Transition Point 500 ms”
  5. Leave other settings on their defaults
  6. 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.

After Effects project file (source)

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

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

Quick Note:

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

Adding the Snow Machine

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall, 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 your streaming application.

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!

by NerdOrDie

Predator - Setup Guide

General Information

Thanks for checking out the Predator Alert Pack. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com and will take you through the setup process. If you have any questions that aren’t answered in this setup guide, please feel free to contact us.

Photoshop and other third party software is not required to use this product, however specific components can be edited in Photoshop and After Effects, as we provide some of the original files.

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

OBS Studios Tutorials by NerdOrDie

Buy This Product

Before You Install

Fonts Used

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

Helpful Tips

  • To ensure the best results, please make sure that your streaming application (OBS Studio, Streamlabs OBS, or Xsplit) is closed during import process (Alerts/Widgets).
  • Head to Streamlabs.com and sign in with your preferred streaming platform.
  • After importing the alerts to your Streamlabs account. You may open your streaming application for testing.

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.

  • Font Picker — Choose your font
  • Alert Animation Type — Choose from 8 intro animations
  • Intro Text — Yes/No — Do you want to show an intro text?
  • Intro Text — Top Line — Enter a text you want displayed for the top line
  • Intro Text — Bottom Line — Enter a text you want displayed for the top line
  • Main Text Template — This is where the {name} is displayed.
  • Intro Text Color — Default color #FFFFFF
  • Intro Text — Top Line Font Size
  • Intro Text — Bottom Line Font Size
  • Accent Color — Default color #e18c2a
  • Shapes — Main Color — Default color #FFFFFF
  • Shapes — Scale Percentage — Choose how big you would like the Shapes
  • Name Bar — Background Color — Default color #2e302d
  • Name Bar — Highlight Shape Color — Borders the background color. Default color #40433e
  • Name Bar — Text Color — Color of the Main Text Template text. Default color #FFFFFF
  • Name Bar — Vertical Text Shift — Use this to adjust the vertical location of text  to ensure it is aligned
  • Name Bar — Font Size — Adjust the size of the Main Text font.
  • Floating Text — Align or Hide 
  • Floating Text —  Text Box — Text or symbols you would like displayed.
  • Floating Text — Vertical Offset — Adjust the vertical offset from the middle of the Name Bar
  • Sound — Volume — Adjust the customer alert sound volume

Customizing the Image shown when “Box Above with Image” is selected

In the “Alert Animation Type” section, you can choose to have a custom image shown within the alert. To customize this image:

  • Go to your Alert
  • Add an Image in the Streamlabs default image selection by clicking “Change Media”
  • Choose or Upload the media you would like displayed
    • This can be animated or static
  • Click “Select”

After choosing your image, make sure to click “Save” at the bottom of the page.

Installing the Alerts – Streamelements

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

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

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

Custom Alert Options

These options are found in the Custom Fields tab.

  • Font Picker — Choose your font
  • Alert Animation Type — Choose from 8 intro animations
  • Intro Text — Yes/No — Do you want to show an intro text?
  • Intro Text — Top Line — Enter a text you want displayed for the top line
  • Intro Text — Bottom Line — Enter a text you want displayed for the top line
  • Main Text Template — This is where the {name} is displayed.
  • Intro Text Color — Default color #FFFFFF
  • Intro Text — Top Line Font Size
  • Intro Text — Bottom Line Font Size
  • Accent Color — Default color #e18c2a
  • Shapes — Main Color — Default color #FFFFFF
  • Shapes — Scale Percentage — Choose how big you would like the Shapes
  • Name Bar — Background Color — Default color #2e302d
  • Name Bar — Highlight Shape Color — Borders the background color. Default color #40433e
  • Name Bar — Text Color — Color of the Main Text Template text. Default color #FFFFFF
  • Name Bar — Vertical Text Shift — Use this to adjust the vertical location of text  to ensure it is aligned
  • Name Bar — Font Size — Adjust the size of the Main Text font.
  • Floating Text — Align or Hide 
  • Floating Text —  Text Box — Text or symbols you would like displayed.
  • Floating Text — Vertical Offset — Adjust the vertical offset from the middle of the Name Bar
  • Sound — Volume — Adjust the customer alert sound volume

Customizing the Image shown when “Box Above with Image” is selected

In the “Alert Animation Type” section, you can choose to have a custom image shown within the alert. To customize this image:

  • Go to your Alert
  • Add an Image in the Streamlabs default image selection by clicking “Change Media”
  • Choose or Upload the media you would like displayed
    • This can be animated or static
  • Click “Select”

After choosing your image, make sure to click “Save” at the bottom of the page.

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

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

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

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

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

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

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

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

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

Installing the Overlays – Streamlabs OBS

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

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

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

Creating your overlays

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

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

Installing the Overlays – Streamelements

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

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

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

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

Width and Height of Source

We generally recommend setting the size to 1920 wide and 1080 tall (more height is recommended if using messages), however, depending on your stream adjust the size here may work better for you. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

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

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

Editing the Language and Text in Your Overlays

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

Setting up your scenes in standard streaming software:

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

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

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

OBS Studio

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

StreamLabs OBS

  1. Click the gear icon above your scenes
  2. Set the “Transition” option to “Stinger”
  3. Select Browse for the “Video File” and choose the stinger file found in the “Screens” folder
  4. Make sure “Transition Point Type” is set to “Time (milliseconds)”
  5. Set the “Transition Point (milliseconds)” to 1000ms
  6. Leave other settings on their defaults
  7. Hit Done

Editing the Stinger After Effects File

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

After Effects project file (source)

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

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

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!

by NerdOrDie