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

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!