Grid Setup Guide

General Information

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

grid barcode white

Before You Install

Fonts Used (clickable)

This is the font used throughout the pack and alerts.

Colors Used

  • Magenta
    • Primary – #FF005C
  • White
    • Primary – #FFFFFF
  • Black
    • Primary – #000000

Installation Guide

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

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.

Delaying Text-to-Speech

If you’re planning on using text-to-speech you may need to delay them from being read, as there may be an intro animation and sounds (depends on the pack). 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.

Streamlabs Alert TutorialAlert Customizations

Custom Alert Options

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

  • Main Font  – This is the font that will be used throughout the alert.
  • Do you want the letters to all be uppercased? – Select Uppercase for all CAPITAL LETTERS, or Normal for Normal Lettering.
  • Accent Color – Color alert accents. Default: #ff005c
  • Divider Line Height – Height of the divider line. Default: 4
  • Top Area — Text Template – What you would like the top area to say. Default: {name}
  • Top Area — Text Color – Color of the Top Area Text. Default: #FFFFFF
  • Top Area — Font Size – Size of the font of the Top Area Text. Default: 54
  • Top Area — Thickness of font – How thick do you want the font. Default: Black (900)
  • Bottom Left — Text Template – What you would like the top area to say. Default: New Follow, New Sub, etc…
  • Bottom Left — Text Color – Color of the Top Area Text. Default: #FFFFFF
  • Bottom Left — Font Size – Size of the font of the Top Area Text. Default: 28
  • Bottom Left — Thickness of font – How thick do you want the font. Default: Black (900)
  • Bottom Right– Font – The font you would like displayed. Default: Black Han Sans
  • Bottom Right– Text Template – What you would like it to show. Default: 감사합니다 (Means thank you)
  • Bottom Right– Text Color – Color of the above text. Default: #FFFFFF
  • Bottom Right– Thickness of font – How thick do you want the font. Default: Regular (400)
  • Intro Text Vertical – Adjust to change vertical position the intro text animates in from. Default: 960
  • Intro Text Horizontal –  Adjust to change horizontal position the intro text animates in from. Default: 0

StreamElements Alerts Install

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.

StreamElements Alerts Install Guide

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.

  • Main Font  – This is the font that will be used throughout the alert.
  • Do you want the letters to all be uppercased? – Select Uppercase for all CAPITAL LETTERS, or Normal for Normal Lettering.
  • Accent Color – Color alert accents. Default: #ff005c
  • Divider Line Height – Height of the divider line. Default: 4
  • Top Area — Text Template – What you would like the top area to say. Default: {name}
  • Top Area — Text Color – Color of the Top Area Text. Default: #FFFFFF
  • Top Area — Font Size – Size of the font of the Top Area Text. Default: 54
  • Top Area — Thickness of font – How thick do you want the font. Default: Black (900)
  • Bottom Left — Text Template – What you would like the top area to say. Default: New Follow, New Sub, etc…
  • Bottom Left — Text Color – Color of the Top Area Text. Default: #FFFFFF
  • Bottom Left — Font Size – Size of the font of the Top Area Text. Default: 28
  • Bottom Left — Thickness of font – How thick do you want the font. Default: Black (900)
  • Bottom Right– Font – The font you would like displayed.
  • Bottom Right– Text Template – What you would like it to show. Default: 감사합니다 (Means thank you)
  • Bottom Right– Text Color – Color of the above text. Default: #FFFFFF
  • Bottom Right– Thickness of font – How thick do you want the font. Default: Regular (400)
  • Intro Text Vertical – Adjust to change vertical position the intro text animates in from. Default: 960
  • Intro Text Horizontal –  Adjust to change horizontal position the intro text animates in from. Default: 0

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)

Custom Event List Options

These options are found in the Custom Fields tab.

  • Font Family – The font family used in the Chat Box. The default is Montserrat.
  • Event Height – Height of the events in the event list. Default is 90
  • Accent Color – Color of the event list accents (lines) . Default is: #ff005c
  • Icon Color – Color of the icons. Default is #ff005c
  • Line Width – Width of the lines. Default: 2
  • Event Spacing – Spacing between each event. Default: 0
  • Username — Font Weight – Thickness of the top text font. Default: Black (900)
  • Username — Font Color – Color of the Username font. Default: #FFFFFF
  • Username — Font Size – Font size of the Username. Default: 32
  • Tag — Font Weight – Thickness of the font of the name: Default is: Black (900)
  • Tag — Font Color – Color of the tag font.  Default: #FFFFFF
  • Tag — Font Size – Size of the tag font. Default: 22
  • Letter Spacing – Spacing between each letter. Default: 0

StreamElements Widgets Installation (Chat Box, Event List, Goals)

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.

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)

Custom Event List Options

These options are found in the Custom Fields tab.

  • Font Family – The font family used in the Chat Box. The default is Montserrat.
  • Event Height – Height of the events in the event list. Default is 90
  • Accent Color – Color of the event list accents (lines) . Default is: #ff005c
  • Icon Color – Color of the icons. Default is #ff005c
  • Line Width – Width of the lines. Default: 2
  • Event Spacing – Spacing between each event. Default: 0
  • Username — Font Weight – Thickness of the top text font. Default: Black (900)
  • Username — Font Color – Color of the Username font. Default: #FFFFFF
  • Username — Font Size – Font size of the Username. Default: 32
  • Tag — Font Weight – Thickness of the font of the name: Default is: Black (900)
  • Tag — Font Color – Color of the tag font.  Default: #FFFFFF
  • Tag — Font Size – Size of the tag font. Default: 22
  • Letter Spacing – Spacing between each letter. Default: 0

Installing Streamlabs Desktop Overlays

The following steps are specific to Streamlabs Desktop and the .overlay file. Only Streamlabs Desktop 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 Desktop if you haven’t already
  2. Unzip the files you’ve downloaded onto your computer.
  3. Open/Run Streamlabs Desktop.
  4. Open the Streamlabs Desktop 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…)

Streamlabs OBS Overlay Install

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 using our script

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

  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.

OBS Studio Quick Install Overlays

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 “Stingers” 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 “Stingers” folder
  4. Make sure “Transition Point Type” is set to “Time”
  5. Set the “Transition Point” 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.

  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)

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

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. Once you’ve unzipped your product contents, navigate to the Source Files folder
  2. Open the .AEP file
  3. Select the “@Master Control” composition from the project list
  4. Open the Essential Graphic tab (Window > Essential Graphics)
  5. Tweak these values to your liking
  6. “File > Export > Add to Adobe Media Encoder” each composition as required. You will need to save as a format that supports alpha (.mov and .webm). For webm support in Adobe Media Encoder, you must first install this plugin.

Here’s a great video we’ve created on the subject! Check it out!


OBS Studio

  1. Right click on the source (or group) you wish to change the color of and add a “Filter”.
  2. Under Effect Filters add “Apply LUT”
  3. Under the Path, navigate to the location of Grid’s LUT profiles (\Grid_Overlay\Grid_LUT Profiles)
  4. Choose your preferred PNG file
  5. You should see the color change take effect
  6. Right click and “Copy Filters”. You can then right click and “Paste Filters” on the remaining sources for a consistent look



Streamlabs OBS

  1. Right click on the source you wish to change the color of and choose “Filters”.
  2. Add the Filter Type “Apply LUT”
  3. Under the Path, navigate to the location of Grid’s LUT profiles (\Grid_Overlay\Grid_LUT Profiles)
  4. Choose your preferred PNG file
  5. You should see the color change take effect. Click Done.
  6. Right click and “Copy Filters”. You can then right click and “Paste Filters” on the remaining sources for a consistent look

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.
grid barcode black

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 a limited number of downloads per product.

Please follow @NerdOrDieCom 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!