General Information

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

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

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

OBS Studios Tutorials by NerdOrDie

Before You Install

Fonts Used

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

Colors Used

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

Installation Guide

Installing the Alerts

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 “Apex Stream Package”. The import link will only override your alert package. This means you combine these alerts with any other scene collection you’ve made in Streamlabs. If you want to save your old alerts, it’s highly recommended to do this in a new profile.
  3. Select “Use” for the profile you want to import into.
  4. Navigate to “Alert Box” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software. We recommend setting the size to at least 800 wide and 800 tall (more height is recommended if using messages). If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your alert box is already added in.

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

Delaying Text-to-Speech

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

Custom Alert Options

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

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

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

Event List

  1. Click the Widget Quick Setup link in your downloaded files to begin installing this event list.
  2. If you’d like, choose “Create Profile” and name it something appropriate such as “Apex”. The import link will only override your event list. This means you can combine this event list with any other scene collections you’ve made in Streamlabs. If you want to save your old event list, it’s highly recommended to do this in a new profile.
  3. Select “Use” for the profile you want to import into.
  4. Navigate to “Widget URL” and copy your unique URL.
  5. Paste this URL as a “Browser Source” in your streaming software. We recommend using a size of at least 800 by 600. This may change depending on the font sizes and amount of events you’d like to show.
  6. If you need to scale down, you can do so directly inside of OBS Studio. If you’re using the Streamlabs OBS .overlay file, you may not need to complete this step if your event list box is already added in.

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

Streamlabs Base Options

  • Theme and Theme Color — will have no effect on this widget
  • Enable Events — allows you to decide which events you want to display inside the widget
  • Min Options — let you set how many viewers for hosts, bits, or raiders for raids will trigger an event
  • Max Events — let’s you change how many events are displayed at once
  • Background Color — is only for preview purposes
  • Text Color — will have no effect on this widget
  • Font — allows you to pick the font family user in this package, the default font is Titillum.
  • Animation and Animation Speed — will have no effect on this widget
  • Fade Time — will hide the widget after X seconds, 0 always displays the widget.
  • Other Options — will allow you to flip the widget. For example, enabling the Flip Y will make the events come from the bottom. Flip X will enable the animations coming from the right side .
  • DO NOT — change the custom HTML/CSS options unless you know HTML/CSS/JS – we do not support custom changes.

Custom Options

These options are found in the Custom Fields tab.

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

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

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

Editing the Language and Text in Your Overlays

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

Setting up your scenes in standard streaming software:

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

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

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

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

Important

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

Creating your overlays

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

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

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

OBS Studio

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

StreamLabs OBS

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

Editing the Stinger After Effects File

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

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

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

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

Usage Terms

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

Please refer to our Terms and Conditions for more information.

Future Reiterations, Errors and Updates

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

Please follow @NerdsPwn on Twitter for update information.


Changelog

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

  • No major updates yet!