Hey what’s up everyone, it’s Derek from Nerd or Die, and I’m going to show you how
to setup our latest overlay package, Uplink.
In this video I’ll show you how to quickly and easily get this pack setup inside of Streamlabs
OBS and I’ll walk you through how to customize the colors and text and media sources used.
We’ll also go over how to install, use, and customize the goal widgets included in
the pack.
Let’s get right into it.
So, if you don’t yet have Streamlabs OBS, you can use our affiliate link in the description
below to download it directly.
We’ve worked hand-in-hand with Streamlabs in order to make our products easy to install
and customize, so we definitely recommend checking it out.
If you prefer to use OBS Studio instead, then I recommend checking out some of our other
videos about adding sources into OBS Studio, which you can find in the description below.
The pack comes with all of media files you’ll need to do so with either software.
Even if you’re using OBS Studio, this tutorial will still cover the basics you need to know
to follow along.
Also, don’t forget to subscribe with notifications on, as we have some awesome new free resources
and stream packs coming out soon.
With the pack downloaded and unzipped, open up Streamlabs OBS and click the settings tab
on the top right.
From there, click Scene Collections, and then the “Import Overlay File Button”.
Next, select the .overlay file found in the Streamlabs folder of your overlay pack, then
click Open.
After a few seconds the overlays will be imported and basically ready to use.
Before I forget, make sure that you check out the readme file included with the package,
as it will contain more details on settings and processes included in this video.
The first scene you’ll see includes instructions about how to use the product correctly.
I recommend reading through the guide quickly, and then deleting this scene once you’re
ready to rock.
Not only will your scenes be set up for you, but the stinger transition should be set up
as well.
When you change scenes, you should see the stinger transition fire off, so let’s move
to the Stream Starting scene.
If you need to edit the stinger transition you can do so by clicking the gear icon above
the scenes area.
Here you’ll find the transition and connection tabs.
For transitions, you’ll see that we’ve made a global transition, with the type of
stinger.
You can click the edit button and see the properties we’ve used for this transition.
You can also use the dropdown for “type” if you’d like to change the type of transition
used.
For instance, you can use a “cut” or “fade” type by changing it here.
-----
When done changing the stinger, click done and let’s move on to swapping out some of
the text and images.
On the Stream Starting scene we can see some social icons and calendar information that
we can change.
One of the nice features here is folders which can help us organize the sources a bit better.
If we expand the Social folder you’ll find the sources we use to make all of these sections
possible.
Let’s scroll down a bit and double click the source titled “TwitterURL” This will
open up the text source properties.
At the top, you’ll see that we’re using a Google Font, if you happen to want to use
a font installed on your local machine, you can uncheck this and use any font you’d
like.
You can of course change any of the base options here, but let’s edit the text inside of
the Text box.
You simply need to update this to your Twitter handle and hit done.
Then repeat this process for any other text sources.
Don’t forget that you can click on these sources directly in the preview area - you
will need to double click any sources if there inside of a folder, in order to highlight
this source directly.
Next, let’s say that we don’t use Discord and want to swap out this icon.
We need to find the source that put this icon in, so I’ll just double click on the icon,
and find the highlighted source in the source panel.
Double click on the source to open up the properties.
Click browse and navigate to your overlay files.
From here, select the icons folder and large sub folder, and pick out any icon that you’d
like to replace it with.
Again, just repeat this for any source you’d like to swap out.
If you’d like you can also right click the source and choose ‘rename’ to make the
source name referencing what the source represents.
This process should be pretty quick and easy, and you will need to repeat it for any other
scenes you will be using.
------
One of our favorite parts about this design is how easy it is for anyone to pick and choose
their own colors.
To do this, let’s take a look at the In-Game Layout - Horizontal scene.
Here’ you’ll see a bunch of different elements that you can reposition, hide, or
remove completely.
We wanted to give you the ability to get creative and be able to adapt to almost any game UI.
By the way, if your event list or goal widgets don’t look like the ones here, this is because
it’s using your currently activated Widget Themes in Streamlabs.
We’ll cover how to swap the default widget theme and install the goal widgets a bit later,
so don’t worry on that just yet.
To change the color of the sources, let’s select the webcam frame on the left for this
example.
When we scroll through the sources we’ll be able to find that we’ve selected to source
called Webcam 16:9 Standard.
Right click this source and choose filters.
You’ll actually see that we’ve already added a color correction filter to each source,
but haven’t changed any of the values.
If you happen to need to add other filters, you can do so by clicking the plus icon and
selecting the type of filter you need, or you can remove them via the minus button.
Anyways, the easiest way to change colors is by adjusting the hue shift slider until
you find a hue that you like.
Once you’re close, you can also adjust the saturation, brightness, and contrast if needed.
But what if we need a more exact color and you don’t want to guess/estimate that color?
We’ll cover that in just a second.
First, let’s pretend we’re happy with the color we’ve landed on and want to apply
that to other sources as well.
After we click done we can right click the source with the new color, and choose copy
filters, then select the source we want to apply this color to and select paste filters.
Repeat this process for any other sources.
-----
One final thing about colors is that we wanted to give our users a way to quickly choose
an exact color via hex code, in case they want to stay on brand or even just to make
selecting a color palette easier.
To do this, we’ve included a white theme of each overlay file.
Using white as a base, rather than the orange, will allow you to choose the exact colors
needed.
The first step we need to do is swap out the media files you’d like to use.
So, in our Stack scene, I’ll choose the webcam frame on the left, which is the 16:9
standard frame.
Double click the source to open the properties, and navigate to the White Theme found in the
overlay files.
Then, we’ll go in the Webcam > 16:9 folder and choose the Standard version.
You’ll see it swap out to white.
Now, we need to right click the source, go back into filters, and in our color source
filter, scroll down and click the color picker.
Below the color choose we’ll see the ability to enter in a hex code or even RGB values.
For this example I’ll enter in FF0000, which is red, and you’ll see it swap to exactly
the hex code #FF0000.
This involves a little bit more work, but will give you precise control of the colors
you’re using.
-----
Now it’s time to cover setting up the goal widget.
If you’ve used our alerts for this pack, this process will be very similar, if not,
then don’t worry, we’ll walk you through step by step.
First, navigate to the main folder for this product, and choose the Goal Widgets folder.
After that, double click on the type of goal widget you’d like to install.
If you’d like, choose “Create Profile” and name it something appropriate such as
“Uplink”.
The import link will only override the widgets that you’re choosing to install.
For example: if you’re importing the design for a donation goal, this will not affect
your alerts or goal widgets.
Select “Use” for the profile you want to import into.
If you already have a theme for the Uplink alerts, or other goals, then make sure to
choose that theme.
Normally, in OBS Studio, you’d need to copy the widget URL and paste it in as a browser
source, but in Streamlabs OBS we can do this differently
You’ll see that we already added a donation goal widget in the pre-set up example, but
if you’d like to change this or add more, you can click the plus by the source panel
and choose the type of widget we’d like to add, and then hit add source > add new
source.
Once you’ve done that, you can set some properties, for this example we recommend
making the width at least 430 and the height around 500 pixels.
You can resposition and resize the source as needed.
Anyways, as I mentioned before, we already added in a donation goal, so you can use that
or delete it and add the type of goal widget you’d like instead.
If your goal is not showing up properly, make sure that you have one started inside of the
Streamlabs options.
This can be done within the dashboard tab of Streamlabs OBS or on the Streamlabs website.
If you made a new goal and it’s not showing, you will need to go into your goal’s properties,
and scroll down and choose refresh cache, in order to refresh the goal.
-----
If your goal is set up and working, then it’s time to take a look at how we can customize
it.
Let’s do this for the donation goal.
Go to the Dashboard tab, or use the Streamlabs website, and choose Goals > Donation goals.
From here, click the settings tab, scroll down a bit and find the custom fields tab.
You’ll see all sorts of options.
We highly recommend checking out the readme file included in the main folder, and under
the goal widget tab you’ll find more details on each setting.
The first is to flip the goal widget.
This is useful to align the widget to the other side of your webcam frame or overlay
setup.
Next, you’ll have the font to choose, the default of which is Dosis.
After that, you have a slew of colors that you can edit, from the marker that shows where
your goal is to the color that flashes when your goal is reached.
After all the colors, you’ll have the font weight or thickness of the font.
Not all fonts have multiple weights, though.
The highlight area is the area that is shown behind your goal’s current amount, and the
opacity slider let’s you change it from solid to see-thru.
Finally, you have a Prefix, which can be change from the dollar sign to euro sign for example,
a suffix, that shows after the goals, and the text that will appear once a goal is met.
When done editing, hit save changes, and then refresh your goal’s cache to see the changes
in the editor.
-----
One quick thing I wanted to point out, that sometimes confuses our users, is why their
widgets switch when changing scenes or scene collections.
If you go to the widget themes tab in the Streamlabs Dashboard, you’ll see all of
your widget themes.
You’ll see your Scene Collections on the right, which should now include
the Uplink_Preset.
The drop down here is the widget theme to use when using this scene collection.
Make sure this is set to the widget theme you created for the Uplink pack.
-----
A final tip is regarding performance.
We get Emails all the time asking why CPU usage is high.
The most common reason is that users don’t remove the unused media files.
Each media file, especially the animated movie files, can use CPU.
We highly recommend removing these files, or at least making sure they’re set to “close
file when inactive” in their source properties.
-----
With all that, you should know everything you need to about our Uplink pack.
We put a lot of effort into this one, and I really hope that you all enjoy it.
If you have any questions, please leave them in the comments below.
Also, don’t forget to subscribe with notifications on so that you don’t miss out on our next
free resource or stream packs.
Thanks for watching.