(electronic dance music)
- So the thing you saw at the start popping up,
the predictions window,
we're gonna make that so you can toggle it
with one button in OBS.
No stream deck needed,
just a plugin and extra shader
and you're pretty much good to go.
Not only are we gonna make that,
but we gonna make pulse pop-up
which you have for three options, my favorite,
or four, or five.
We are also gonna make a predictions summary pop-up,
and the best thing is, they're all made
the exact same way.
It's gonna be awesome.
It's gonna be awesome!
But hold on.
Before we get into this,
have you updated your OBS Studio to at least version 27?
- [Man] No.
- Why not? - [Man] I can't be bothered!
- Do it! - [Man] Okay!
- Done? - [Man] Yes.
- Good. - [Man] Fine!
- Excellent. - [Man] Thank you.
- Next bit.
On top of that, you're gonna download OBS Shaderfilter.
I've left the link for that plugin in the description.
I'd recommend downloading the zip,
and dragging the contents of it
into your OBS Studio root folder.
The third thing I want you to grab
is the Rounded Corner Shader by Exeldro.
I've left the link for that in the description as well.
And the final, and most important thing,
do not ask me if this works in Streamlabs OBS.
Because it does.
No, it doesn't.
No, it really doesn't.
It doesn't.
Okay so the first thing we're gonna set up
is the predictions animation.
It's gonna be the same for the polls,
but I'm going to walk you through both
just in case you get really easily confused
by simple instructions.
I'm looking at you, Greg.
It's okay, Greg, it's fine.
Stop crying, Greg, please.
If you have an activated Twitch predictions on your channel,
you're gonna need to set that up first.
It's pretty straightforward.
You wanna go into your stream manager
in the creator dashboard,
click on the plus icon under quick actions,
locate the start prediction action and hit add.
Now you're gonna need a URL for the predictions page.
Specifically this one.
I've left the copy paste friendly version of this
in the description.
Simply replace username with your own Twitch handle.
And then we can move on over into OBS Studio.
So we're back in OBS and we want to make a new scene.
Then you nest it into whatever ones you want to use it in.
So, I've made a scene here called prediction scene.
Right click in this window here.
And you just type in whatever you wanna call it.
Prediction scene makes the most sense.
Moving into the scene itself,
add a browser source, just right click,
go to add, go to browser,
and we're just gonna call this one Prediction Test.
Now before we paste in that URL with our Twitch handle
in it, we're gonna need to login to Twitch
through the browser source.
So to do that, we are going to highlight the URL field,
and just type in Twich.tv and hit okay.
You can see here, I'm actually logged in,
I've put on the background source
just so we can see the size of this.
And if I click the interact button here,
go up to the corner.
And this is usually where you'll login yourself.
So just interact, go to the corner, and log yourself in
so that your account is now connected to the browser source
and it means you can use your polls and predictions properly
because they won't work otherwise.
And a bonus of this is, you can actually switch
to light theme if you hate yourself.
So that options there.
Why would you do it?
Comment below why you'd use the light theme
and then delete it because you're wrong.
So now we have that set up, we are going to go back
into the browser source, and we're gonna paste in
that URL that I mentioned earlier.
Make sure you change this part here
to whatever your Twitch handle is.
Moving down into the width,
we're gonna change it to 645
and change the height to 235.
Now the reason I'm using these dimensions
is just because they look good.
If you don't like how it looks,
get out of here!
No, just try something else.
It's fine.
It will suck though.
- [Man] Ha!
- Finally do not check shutdown,
do not check refresh browser,
just leave all these unchecked.
Hit okay, and you're gonna get something
that looks like that.
Where I want it to come in from is the bottom.
So I want it to rise up in front of me.
So I'm gonna bring it down here,
Right click the browser source, go to transform.
And I center it horizontally.
One last thing I want to do before moving on,
is right click the browser source of our predictions,
and in scale filtering, I'm gonna change this to area.
Okay, so then next step is adding some filters.
This is pretty straightforward.
Earlier on I told you to install a Shaderfilter plugin.
That's gonna come in handy in a few seconds.
First, we want to right click on our browser source,
go to filters.
To add a filter you can click the plus button down here,
or you can just right click in this area, hover over add,
and you're gonna get a selection
of basically everything that OBS Studio offers as a filter,
as well as any filters you've installed on top of that.
And what we're looking for right away is crop slash pad.
So there it is there, click that, hit okay.
In our crop slash pad settings,
we're gonna set the top crop to 16, and that's it.
After that we're gonna right click again.
And you should have user-defined shader
if you installed the Shaderfilter plus plugin
I mentioned at the start.
Click that, we're gonna call it Rounded Corners.
Now remember the shader I told you to download
that gives you rounded corners by Exeldro.
We're gonna be looking for that.
And to load that in, we simply click
load shader text from file,
and you're gonna get this option here
to find a shader text file.
So we click browse.
It should bring you into the OBS Shaderfilter folder.
If it doesn't, you can see at the top here
the exact route to get to that folder.
And this is where you should put
that shader file by the way.
If you haven't already put it in here,
this is the best place to put it.
So if we go right down here,
you can see rounded rect shader,
that's not what we want.
We want the one with underscore exeldro on the end.
So click that, hit open.
And if we scroll down again,
I actually like to use the slider inputs on this
so I'm gonna check that,
and I'm gonna bump up the corner radius.
I'm just gonna set it to 13,
and that's it, that's all I'm gonna do with this.
That is it, looking pretty good so far.
You're gonna need to see behind it for the next bit,
which is the drop shadow.
So what I'd recommend is adding in a light color,
just so you can test it against something you can see.
Right click, go to add, and add a color source.
Typically something that's quite bright.
So the initial setup here is perfect, actually.
I'm gonna take that,
and I'm gonna drag it right down below everything
so that I can see my source window.
And the next bit I'm gonna do is
add in the drop shadow asset, which I've included.
You can get that in our Discord,
in the free resources channel.
So to add the shadow in, we're going to add an image,
we're gonna call it Shadow Test.
I'm gonna check apply alpha in linear space.
And I'm gonna browse to find the shadow.
Now that's looking pretty big.
That's obviously not how we want to use it.
So I'm gonna scale it down a bit
and I'm gonna position it kind of center,
in fact, I'm gonna use the center horizontal setting
we did before.
Now it doesn't quite look right just yet,
but if you hold shift on the keyboard and click drag,
you can stretch any image or source wherever you want.
And that's what we're gonna do with this.
We're gonna pull it right down
to the point that you actually can't see
the shadow overreaching at the top,
and we're gonna stretch it out at the sides.
Now I do like the look of that,
but there's no opacity in it at all.
It is a shadow, but it needs a little bit
of transparency in it.
To do that, we're gonna right click
on our image of the shadow,
go to filters, and add in a color correction.
And just simply bring down the opacity here.
I'm gonna say about 80 ish.
I'm liking how that looks.
Yeah, that's good for me.
So, this color source at the bottom,
we don't need to have that on anymore.
That was really just to test this.
Okay, so we've got our prediction scene ready
to put in whatever scene we want now.
I'm gonna put it in into this example scene.
And if you haven't done scene nesting before,
I think most people know now,
but it's adding a scene into a scene.
That's all it is.
Just right click as you would add a source into your scene,
and you'll have the scene option right there.
Just click on it.
We're gonna pull in predictions,
and you can see I positioned it at the bottom.
That's because I'm gonna have it come in from the bottom,
and appear right there just below me.
So now we've got our prediction scene
sitting in our scene of choice,
and we're gonna add some source transitions to it.
Right click on it, go to show transition,
and in this case, we're gonna try swipe.
I want it to come up,
so I'm selecting up for the direction
and be sure to check the swipe in button.
Hit okay.
Go into hide transition, down to swipe again,
put the direction to down.
Don't hit the swipe in check mark this time.
Hit okay.
And when we click hide on this.
And when we click show.
It looks good.
And the cool thing is as well,
you can change the duration,
so you can have it come in really, really quickly
if you want it to, and then go out slowly.
So, nice and slow,
super fast.
What I'm gonna do now is show you how to set up
the polls window in the same way.
I'm just gonna break down how this is set up
because it's pretty much the exact same steps
as the prediction stuff.
Same as before, if you've not logged into Twitch.tv
through your browser source already,
just do as we did for the predictions
where you put in Twitch.tv here, hit okay,
interact with the source, log yourself in
and then get back into this so we can change the URL here
to the poll URL I mentioned below.
And again, just change the handle here
to whatever your handle is on Twitch.
And you can see, I've just got that up there.
That's bringing this up.
And the width is 450, the height is 195.
Now of course you can do this with five options
or four options, and you can totally make it work.
It may not look quite right if you're maybe only running
a three options poll at one point,
where you'll see buttons pop up, but if you don't mind that,
then yeah, it can totally work with the other options.
I'm just talking about this as I show you me
actually doing the other options,
and you can see on screen the different height dimensions
that I used for each one.
That's all I changed, was the height dimensions
so it's pretty straight forward.
Even if you didn't have this, you could probably
figure it out easily enough.
My own preference is the three poll setup,
so I'm sticking with that.
I don't have these checked at all.
If we go to the filters,
we can see that it's the exact same filters again.
Slightly different crop values this time.
I've got left 20, top 20, right 20, and bottom 0.
The rounded corners.
Only thing I've changed here yet again,
is the corner radius.
And I put it to 13.
The other thing of course
is I have the skill filtering set to area.
And just as we did before,
I shift clicked and moved the shadow in around this.
Then I simply toggle off the background color,
head over to the example scene, add a scene,
our poll scene is there now,
I can remove the prediction scene
just so we can mess with this a little bit.
So for the show and hide transitions,
we're going to use slide this time,
and I'm just gonna have it set to left.
And I'm gonna set the hide to left as well,
because this is a cool thing
where it kind of just loops in,
goes out the other side,
and when you bring it back in,
it will come back in the original side again.
So, you have a come in like this,
hide the source,
goes out that way.
In, out.
Now the best thing about this is
that you can set up binds in hot keys
to essentially just toggle these on and off
with your keyboard.
You don't need a stream deck
or anything like that for this though,
you can set this up in a way where,
say I wanted to have F5 as the show polls,
and F5 as the hide polls,
all I do then is I hit F5, it goes out.
Hit F5 again, it comes in.
Right, so this next popup, and this is the last one,
it's an alternative take on the predictions popup,
which I'm pretty fond of, but I know some people
are gonna probably prefer the simpler layout,
especially if you're not gonna have 20+ people
voting on either side of your predictions
every time you put one up.
The URL I'm using is the predictions URL
with forward slash summary on the end.
And the dimensions I'm using are 385 by 515.
In filters, once again,
it's just cropping around the corners.
That's all it is.
That's my recipe.
(lips kissing)
I have my crop settings at zero for everything
except the bottom, which I've set to 40.
And by the way, these are not set in stone.
If it doesn't work for you, don't panic.
(person screams)
Just mess with the dimensions in the browser source
and mess with the crop settings
to find something that works a bit better for you.
But if you can get something that's close to this,
you're going to be okay.
Rounded corners once again.
I've set it to 13 on the corner radius.
And that's it.
Now this is totally optional,
there's a plugin called Source Dock by Exeldro
and I like to use it to interact
with the predictions summary window.
Letting me see who's voting on either side
of the predictions and how many points they're using.
The plugin URL is available in the description.
It will have all you need to install it and set it up.
You can also get more creative with this.
I find that if you want to match the colors
to those of your own stream, you can switch
between dark and light mode on Twitch,
and then you can hop into filters
and add a color correction filter.
And with this, you can mess with the saturation,
and the hue shift to get colors that are more suited
to your streams setting.
But how do you change your polls
and your predictions on the fly
when you're wanting to bring this up on stream
and pose new questions or predictions for your chat?
I'm gonna show you how.
Go to your quick actions,
which is on your stream manager page on Twitch,
click the plus button here.
And you can see at the top,
I've already added predictions,
and I've already added polls.
And I can see them both right here.
Now, if you recall, at the top of our stream manager page,
there is a URL and yeah, we can copy that.
Back in OBS Studio if you go to view,
docs, custom browser docs, you get this here.
We're gonna call it Twitch Stream Manager,
original name.
I know.
And I'm dropping that URL in here.
I'm gonna hit apply.
Now you can see once you've added this custom doc to OBS,
you get this page.
And at the minute, it's got a lot of stuff on it
I just don't really need.
So I'm gonna drag it into the area I want it to,
it's gonna click into place.
So as you can see as I drag that,
I actually get X options to remove other panels.
I'm just gonna take them all off.
This is the only panel I need right now.
I'm gonna drag that in a little bit more,
and you can see at the top,
it says, save and cancel.
So we're actually creating a new layout.
If you hit save, you can update your default one.
Or if you want, you can create a new layout
so that you don't get rid of your old layout.
Now here I can hit the plus button,
and I can add the poll option,
go down here, I can add the predictions,
just hit X here.
And you've got manage poll,
and you've got choose prediction outcome.
So I hit start prediction.
Let's say, we'll go, is this tutorial easy?
Yes, no.
You can see right away, over here.
Look at this.
It's all coming through.
I can then click on this if I want,
I can end it right away.
Choose the outcome, and complete prediction.
You can see, it just looks great throughout.
The same goes for polls.
I bring polls in, I go to a new poll,
and then just the same way I can hit end.
It looks good.
And I throw it out.
Something else that you could do besides having the options
of both dark and light popups,
is add a color correction filter to you browser source
and totally change how your predictions and polls
look on your stream.
To do this, just add a filter to the browser source
of your polls or predictions popup
and then just mess with the hue and saturation
to find a look that suits your stream.
I guess that's the whole tutorial.
I thought this was gonna be like a two minute thing,
but you know, I like to waste time
telling you stuff you don't need to know
like this right now.
Jump into the discord to grab the free resources,
if you like that drop shadow,
and yeah, I'll hopefully see you guys soon.
So thank you for watching.
We'll meet again.
Goodbye!
(electronic dance music)
And it's really easy, and you don't need Streamlabs OBS
because it won't work in Streamlabs OBS.
(bell rings)
(upbeat string music)