Hey what’s up everyone, it’s Derek from Nerd or Die and I’d like to introduce you
to the Glitch overlay stream package.
In this video I’ll show you how to set up and customize the event list, install the
overlay for StreamLabs OBS, and also how to set things up inside of OBS Studio.
Let’s get right into it.
To start, I’ve listed the timings for each section in the description, feel free to jump
around the video to get to the parts that you need.
The Glitch Overlay pack features an animated event list with a ton of custom options, animated
screen designs for starting, intermission, and ending screens, and animated overlays
that you can use inside of most streaming software.
It was designed to fit the style of our popular Glitch alerts, which I imagine a few of you
already use - so it should compliment that nicely, and give you channel a nice clean
look.
We’ve also included stinger transitions and Twitch panels as well.
Basically, anything you’d need, should be included.
Anyone, even if you don’t own this pack, can view the readme file only, so make sure
to check it out at nerdordie.com/glitch-pack
Let’s start with the event list.
There are a TON of options, so if you’re not using this, then I highly recommend that
you skip ahead in this video.
First, to install
Double click the Widget Quick Setup link in your downloaded files
If you’d like, choose “Create Profile” and name it something appropriate such as
“Glitch”.
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 current event list, it’s highly recommended to do this in a
new profile.
Next, select “Use” for the profile you want to import into.
After a little bit, you should be brought into your new profile, with the event list
imported.
Let’s add this into OBS Studio, we’ll work on customizing it later.
Navigate to “Widget URL” and copy your unique URL.
Paste this URL as a “Browser Source” in your streaming software.
We recommend setting the size to at least 300 wide and 600 tall.
This size may change depending on your customization options.
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.
With this design we wanted to make some of the base options work properly from StreamLabs.
Options like 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, and Max Events let’s you change how many events are displayed at once.
Background Color is only for preview purposes
Text Color will change the color of the usernames, Font allows you to pick the font family user
in this package, the default is Titillium, which will match the rest of the designs,
Animation and Animation Speed will have no effect on this widget.
Fade Time will hide the entire widget after X seconds, 0 always displays the widget.
The 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 enabled the animations coming from the right side (to edit where the text
is, please see Custom Fields).
Please note that using Flip X may change the orientation of certain things to change, like
the animation direction and the background color for each section.
DO NOT change the custom HTML/CSS options unless you know HTML/CSS/JS – we do not
support custom changes
On top of the base options for StreamLabs, we’ve created custom fields that you can
use to edit this package even further.
Click the “Custom Fields” tab to begin.
DO NOT click “reset code” or “remove overlays”.
First, we have Glitch Frequency – the lower this slider is, the more often the glitch
effect will trigger.
Enter 0 to disable completely.
Text Alignment is the direction your text is aligned to.
This is a text field that by default is set to “left”.
If you want to change it, you may update the text field to read “left”, “center”,
or “right”, do not include the quotes inside the text box.
Next we have options for the tag, this is what will typically say Follower”, “Subscriber”,
etc.
Use this slider to set the font size, the color picker will change the color of the
font, and then the following slider will change the distance between the tag and the username.
We’ll find a group for the “sections” next.
This basically means each individual event.
So, we have options to control the space between each section, or
the margin.
Then we have an option for padding with separate sliders for vertical and horizontal.
Padding is the area between the text and the border of each section.
You’ll be able to select the background color here, as well as the background opacity.
A lower value for the opacity means you’ll be able to see through the background more.
By default, the right side of the events fades out a bit, so it goes from 100% opacity to
0 % opacity.
If you’d like to change this, the opacity for right side of the background option will
help here.
Turn this all the way up to 100% if you want it
to be the same throughout.
Finally, we have options for the divider.
And these simply control the height and color options.
To finish up on the event list, I wanted to mention that we know there’s a lot of options,
but we wanted to give people the opportunity to change these up according to your needs.
If you ever need to revert to the default options - you can always re-import the event
list with the unique file you’ve downloaded.
Or, you can refer to the read me file at nerdordie.com/glitch-pack - where we listed each default option under
the installation guide section.
Let’s take a look at the overlays next.
We’ll start with installing these in StreamLabs OBS, then move onto a quick OBS Studio guide.
If you want to try out this program, we’ve included a link to it inside the StreamLabs
OBS folder - and there’s also one in the description below.
With StreamLabs OBS open, click on settings , and navigate to overlays.
Here, we want to click “import overlay”.
Then select the .overlay file that’s located in your StreamLabs OBS folder.
After a few seconds, all of the files and settings for this overlay will be imported,
with the exception of the stinger transitions, which we’ll cover a bit later.
You’ll first see an image that lets you know about the stingers and read me files,
so let’s go ahead and move on to the next scenes.
Before we move on, I want to mention that you can manage your scene collections by clicking
the drop down icon here.
You’ll see any collections you’ve already made, and then any imported as well.
Making it easy to change between collections as you need.
The Stream Starting scene has all the files you need, and a few icons and text sources
set up.
You can edit the text sources by clicking in the preview area to select them, then double
clicking in the sources area to open their properties.
Update the text field to whatever you’d like.
You can do the same thing for the icons as well, just open up the properties for each,
and replace by using the browse button, and selecting a new icons as needed - and rename
the sources if you’d like to as well.
Add any additional media, image, or text sources as needed.
Also, I do want to mention that we’ve included a few sample backgrounds, but feel free to
add in your own game images or video files behind - as they will show up behind these
video files.
For the intermission screens, you can also add in your own media or display captures,
as long as they’re not behind the “your background” source.
You should also notice that in each scene we’ve populated them with alert and chat
boxes.
Again, you can hide or remove these if you’d like, but they will automatically sync with
your StreamLabs account.
The in-game scenes are pretty straight forward.
Just add in whatever game or display capture you’d like, and make sure it’s behind
everything.
Add in a webcam behind one of the frames, and scale as needed.
Again, we’ve included the alert and event list widgets, feel free to disable or edit
as needed.
One thing I do want to mention is that we set up labels in this .overlay as well.
If you don’t want to have the “All-Time Top Donor” imported - you can change this
by double clicking the label source, and changing label type to what you’d like.
So what about setting this up in OBS Studio?
Well, it’s not much different than what we’ve done before.
In OBS Studio you’ll add multiple scenes.
In each scene we’ll add mixtures of media sources, image sources, and text sources.
So, in this example, the background is an image source, then I added a media source
for the “Stream Starting” graphic - which you can find in the screens folder.
From there, I just added in one icon with a text source next to it.
Let’s take a better look at this text source - I’m using the font Titilium.
However, with OBS Studio you might not have access to this font, since it’s not installed
locally.
A link to download and install the font can be found on our read me page, under “before
you install”.
For the overlays it’s a similar process.
We’re using media sources for the webcam frame and the support section.
This particular media source includes the labels.
We can add text sources for each individual label, select the Titillium font, and enter
in some demo text.
We’ll use this text to pick the font size and position it.
Remember, it’s best to pick a larger font size than you need, if you have to.
Because when you scale up text in OBS Studio by dragging, it can get quite blurry.
Once you have things in place, you can go back into the text source properties, and
select “read from file”.
Select the text file that you want this source to read.
If you’re new to this, you’ll use a program like StreamLabs stream labels that runs on
your PC.
These programs will update text files with your latest follower or tipper.
Browse to find the text files those program created, and then select the appropriate file.
If the preset versions of the support sections aren’t worded properly, you can always add
in the blank versions of the file, and use a text source to create your own custom labels.
For the last part of this video, let’s set up our stinger transitions.
This is very simple to do.
With your download you’ll have a Stinger Transition zip file that you’ll need to
extract somewhere on your computer.
Once you’ve done that, open up OBS Studio and select “stinger” under the scene transition
sections.
If you installed the plugin for this previously, you might see “stinger transitions”, and
this will not work properly.
So please make sure you’re using the version that’s included with OBS Studio now, that
says just “stinger”.
Click the gear icon and go to properties.
For the video file, browse and choose the stinger file.
Transition point type is time (milliseconds), transition point will be 1500.
If this stinger had sounds, we’d choose monitor and output, but it does not, so you
can leave this at the default value, and the same with the last option.
After that, hit okay - and whevenr you change scenes you should see this custom transition
that we created.
In StreamLabs OBS this is a very similar process.
Click the gear icon that’s on the left side, next to the scene collections label.
Change Transition to stinger, set the duration to 3000, choose the stinger video file with
the browser button, leave the transition point type to time (milliseconds), and then enter
in 1500 for the transition point.
Leave the other options at default, and you’ll be good to go with the stinger transition
anytime you switch scenes.
That about wraps up all we have for this new overlay pack.
Please let me know in the comments below what you think about this product or if you have
any questions at all.
If the video helped you out, don’t forget to leave a like
Also, if you’re interested in more streaming and gaming related content, then don’t forget
forget to subscribe with notifications on.
We have some more videos coming very soon, which I don’t think you’ll want to miss.
Thanks so much for watching, and I’ll see you next time.