General Information

Thanks for your interest in the Clearview alerts and overlay stream package. This guide will cover items downloaded from NerdOrDie.com and TwitchTemple.com . Please note that these items can be purchased separately or in a bundle. This page will guide you through the setup process. If you have any questions that aren’t answered in this setup guide, please feel free to contact us.

Photoshop is not required for any portions of this product. However, for your convenience we have included Photoshop files for the panels and offline screen.

Animated elements are supplied as WEBM files. These are video formats supported by browsers, such as those integrated in streaming software. This package has been designed for use with OBS Studio, XSplit Broadcaster, BEBO, StreamLabs OBS, and most other streaming softwares. Please make sure your software fully supports WEBM files. If you are not familiar with how to set up your new overlay with either of these streaming applications, we strongly suggest checking out the below tutorial before moving on:

Before You Install

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

  • Roboto – This is the primary font used
    • Please refer to this guide on downloading Google Fonts

Installation Guide

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

  1. Unzip the files you’ve downloaded onto your computer.
  2. Open your streaming software. Add animated parts (WEBM files) by adding “media sources” and locating your desired overlay elements. There are preset layouts OR modular elements to customize to your needs. Mix and match as needed. Please note: if you’re using the free version you will use image source, not media source.
  3. Customize the text shown on the supporter bars with the blank versions of all the elements have been provided. The easiest way to add you custom text is to load one of these blank WEBM files and add a ‘text’ layer over the top using the recommended font.
  4. To add dynamic supporter tags, add in text sources and connect them to the appropriate text file. This will be done using apps like StreamLab’s Stream Labels or the Muxy Ticker. 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.

Streamlabs Alert Install

These instructions are to set up the alerts specific to Streamlabs users and utilizes the customization options now available.

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

Adjust Included Audio Levels

By default the alerts will feature custom sounds. If you’d like to disable these sounds, you can do so in each alerts “Custom Field” tab. You can mute the sounds by setting the slider to 0.

 

Streamelements Alert Install

  1. Click the Quick Setup Link for your platform (Twitch or YouTube) to begin installing the alerts
  2. Log into your the appropriate platform
  3. You should get a notice towards the top of the page after it loads that the “overlay” has been imported successfully. (It says overlay, but this is only Alerts)
  4. Navigate to the “My Overlays” section
  5. Click:
    1. Launch Overlay to get the browser source link
    2. Edit to customize your alerts further if needed.
  6. Paste this URL as a “Browser Source” in your streaming software. We recommend setting the size to at least 1920 wide and 1080 tall. If you need to scale down, you can do so directly inside of your streaming application.

Adjust Included Audio Levels

You can adjust the audio levels using the default “Video Volume control” slider located in each alerts settings.

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

  1. Download and install StreamLabs OBS if you haven’t already
  2. Open the StreamLabs OBS “Settings” box.
  3. Click the “Overlays” tab.
  4. Select “Import Overlay” and then select the proper .overlay file. This file is included in the “StreamLabs OBS” folder.
  5. Adjust any text sources to customize for your stream.
  6. Adjust the alert sources as needed (you may want to resize the Alert Box sizes in the properties of this source).
  7. Double check all other sources. Please note that some text boxes may remain blank. For example, the “New Tip” text source may not show any names, as you might not have any new tippers.

Please note – at the creation of this guide, the stinger transition will not be imported into StreamLabs OBS. You will need to add this manually. Refer to the instructions in the “Stinger Transition” tab.

Setting up your scenes may involve some simple work as well. Please review the “Scene (Starting, BRB, Ending)” tab for more information.

Setting up your scenes in standard streaming software:

  1. In a new scene, add a media source
  2. Set this source to looping, and select a local file
  3. Choose the “Stream-Background.mp4” file, which is a blank looping background
  4. Add another media source, set to looping, and select the appropriate Stream- .WEBM file (Starting, BRB, Ending)
  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.

Using StreamLabs OBS import for scenes:

  1. Right click and duplicate the “Scene (Duplicate as needed, view setup guide)” scene
  2. Rename to anything you’d like, and position where needed.
  3. Hide or remove the starting, brb, and/or ending media source, depending on the type of scene you’d like to use
  4. Replace the text sources with your information
  5. Add additional text sources and icons (via image source) if desired

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

Important: We’ve included stinger videos at 15, 30, and 60fps. Please choose the one closest to the FPS you stream at. Higher fps video will use more CPU.

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. Enable sounds by setting “Audio Monitoring” to “Monitoring and Output”
  8. Leave other settings on their defaults
  9. Hit Done

 

Clearview Stinger Transition Settings SL OBS


Customizing Colors

Adjustment of colors can be done in OBS Studio and StreamLabs OBS by using color correction filters. If you’re not familiar with filters, please watch this video.

If you’d like to adjust your Twitch panels, please use the .psd file found inside the “Panels” folder. You may also use the blank.jpg file with any image editing software.

Default green color is #05f5ae

Usage Terms

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

Please refer to our Terms and Conditions for more information.

Future Reiterations, Errors and Updates

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

Please follow @NerdsPwn on Twitter for update information.

More designs by Flisky

For more creations by this designer, visit their vendor page.


Changelog

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

  • Updated on 2/19/2018 at 3:45 PM EST
    • Added a sound to the tip alert and WEBM file when the dollar signs appear
  • Updated on 2/16/2018 at 4:00 PM EST
    • Improved file size and performance of all stingers
    • Re-added audio sounds to stinger files
    • Minor updates to SL OBS files
  • Updated on 2/16/2018 at 3:30 AM EST
    • Improved visual quality of the Stinger.webm file
    • Added 30 and 60 FPS stingers to premium packs
    • Added Stream-Background.mp4 in the “Screens” folder- a higher quality video that is a looping background. This will replace the original “Screen Designs” for Starting, BRB, and Offline scenes
    • Added .webm files in the “Screens” folder for Starting, BRB, and Offline scenes, as well a a looping line animation
    • Improved file size of StreamLabs OBS file, and updated the overlay files to include higher resolution videos
    • Added a message to users using SL OBS to view the setup guide instructions
    • Improved visuals of Offline.png and Offline.psd
    • Added “Screens” tab to setup guide