StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

How do we get a beautiful overlay like the one I’ve got for live streaming especially on YouTube and Twitch when we are using Wirecast as our encoder?

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

If you’d like to see the answer to that question, will you please watch the video below or read the post because I googled for this and I didn’t see a solution, and therefore, I think you will find it helpful if you are using Wirecast like I am?

When you want to research and buy Wirecast, will you please use my links in this post because I am a partner with them, and you will feel good helping me earn a percentage of each sale?

The simple and quick answer is all we need to do is go to add a web display in one of our shots in Wirecast, and then we go to either StreamElements or Streamlabs, which are two of the top overlays that I know of.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

You go there and create your overlay, then you get the URL, stick it into the web display for Wirecast, put the video within height, check transparent background, and that’s how you get it on.

I learned that essentially the hard way from trying to do it other ways.

I will give you some tips and tricks that make this process easier.

Again, in order to add this, and you need this on a shot in Wirecast.

Whatever you want to be on the top shot needs to be first.

For example, if you want this overlay to go over everything else, it needs to be the first layer. It needs to be on layer number one if you want it to lay over the top of everything else.

I’ve got it layered on number two because I want my beautiful face and even my baby down here, I want us to go over the overlay because when I’m live streaming music, which is one of the main things I do, then I’m in a different part of the screen, then the overlay looks just right.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

Normally, I’m not making these as much with tutorials, and if I am, I want to be able to have it over. It just says “Jerry Banfield,” my recent donation and follower, which is mostly relevant for Twitch.

This is a nice overlay to just have anyway. There are lots of different formats and I will give you a few tricks that will make it easier.

You put this up on as high of a layer as you want it to essentially be on top.

Then, you go to “Web Display” on whatever layer you want it in, then what you need ultimately, you click new, you need this URL in here.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

How do you get that?

Well, what you do to get that is you use something like StreamElements.

What I’ve got here, this is StreamElements.

StreamElements is what I use because after looking up Streamlabs and StreamElements, these seem to be the two top options to get an overlay like this on.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

I just looked at the streamers that I was following, and I found that they were using mostly StreamElements, although lots of others are using Streamlabs.

I like the look and the features available in StreamElements.

I checked out both and either one of those I think will definitely work.

Know that if you sign up, it will put your channel’s username on whichever one you sign up with. For example, on Twitch, it’s twitch.tv/jerrybanfield and it nicely integrates it into the same thing in StreamElements.

When I go to my YouTube, my original name was different and it sticks that in, so that was a mild inconvenience I’m still working on.

The inside of the interface looks like this and in order to get one of these, you just go over on this left side of the menu, and hit “Themes gallery.”

Then, you can pick any of these themes you want.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

Some are for different games and there are lots of different options. The key thing is to choose a static scene in Wirecast.

For some reason, and maybe I just didn’t figure out how to do it right, Wirecast doesn’t work just right with the animated scenes, the scenes that have videos in them. I learned this the hard way by trying a bunch of different animated scenes, and the animations and the backgrounds just did not load correctly in Wirecast.

This is a static scene, it’s just fixed images, then when things pop up, it works correctly.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

When I tried to use all of the animated ones, for some reason it did not work in Wirecast. I recommend you to use a static one for Wirecast.

What you do is you just browse around and see which one of these you want to use. This one for example is a purple theme.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

They have got different looks to these.

You can have a talk show with a smaller screen, you can have a “the stream’s ended,” or “the stream’s just getting started.”

There are different preview windows you have got here. You hit preview, and you can get a basic understanding of what these might look like for you.

It’s tricky because some of these are transparent where you just put them on and they will look different on different backgrounds.

I’ve got mine set up like this because I want it to look the same on every background.

I don’t want when I’m up here in Ableton 10 in a dark background, then I tab over to a light background, I don’t want the font to look any different.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

I’m not even sure off the top of my head which one I chose.

Once you hit “Create,” then whichever one you have picked will go into “My Overlays.”

I’m using the “Force Field Static Super Theme.”

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

Then what I do inside is I get to edit this.

Before we go into the editor, in order to put this into Wirecast, you need to pick the exact overlay out of the “Launch overlay” button.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

The “Launch overlay” button gives you the direct link to the overlay.

The basic way this works is that StreamElements puts up a URL with the exact things you see on the screen. Then, I put that URL straight into Wirecast, which is nice because anytime it updates on StreamElements, then it updates in my Wirecast. It takes a few seconds sometimes.

When someone uses the “Follow” thing back down there, it updates live, which is really cool. When I get a new follower while I’m live on Twitch, it does a little pop up right here on the screen, and then the follower gets the positive reinforcement of seeing their name down there.

When someone tips, then their name comes up in there. When someone uses Bits on Twitch, that comes up there.

The beauty of this is it’s essentially a URL that’s on StreamElements.com or wherever the URL is, and then that URL is pulled into Wirecast.

In order for everything to work properly, then what you need to do is edit it to look how you want it to look.

What you will do to do that is you go into the “Overlay editor.”

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

Now, the “Overlay Editor” can be a little complicated if you are brand new to it.

You will see that the Overlay URL is the StreamElements.com URL.

In the overlay editor things very likely don’t look exactly how you want them to look.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

Either your social media names aren’t in there or everything’s not filled out, whatever it is, what you do is inside the overlay editor, you edit everything just how you want it to look.

For example, I changed mine over here to JerryBanfield.com instead of it saying “Jerry Banfield” because obviously, if I’m streaming, my username is redundant, but I like to put JerryBanfield.com because that way, people know I’ve got a website.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

Then up on top, I’ve got my Facebook, my Discord channel is on the contact page, I’ve got my URL up there again, and then I’ve got Instagram, Twitch, Twitter, and YouTube that are all the same, it’s redundant.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

I’ve got Jerry Banfield up there enough, and JerryBanfield.com at the bottom.

I had to move all of these around to get them just how I wanted.

Another thing, I moved the alert box a bit because I want it to be off to the side.

My face tends to mostly be middle or mostly right. Although occasionally, it’s upper left, in which case, if I get an alert, it’s going to be right by my head. I usually slide over to the right when I’m streaming music, and then I’ve got it like this.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

The alert box coming up on the right side of me here, in the left side of the screen, is ideal.

You can just drag things and move them around. In order to change the exact position if things are sticking, what you can do is go down here and type the exact pixels in.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

You can make this very precise, which is wonderful.

You can make this look exactly how you want it to look.

I probably spent an hour or more fooling around on this last night to get it to look how I want, and I can tell you it makes a huge difference because when people go to subscribe to a channel on YouTube or on Twitch, when someone goes to follow and you see these things up there on the screen, it’s great positive reinforcement.

Plus, lots of times if people are watching on YouTube, they might want to check your Instagram, might want to go to Facebook or find the Discord channel, then you have got the links up there so that way people know exactly where to go.

I often go look on people’s social media while I’m watching live on a channel and this makes it easy.

This is another one of those seemingly little things that differentiate you as a serious streamer versus a noob who just doesn’t know what they are doing.

When you see an overlay, you know someone is at least taking the time to sign up for one of these stream enhancement services and get the overlay up.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

Most of the people I see that have more viewers are using an overlay.

Not all, Deadmau5 or Joel Zimmerman, does not have it, at least last I checked. He doesn’t have an overlay up on his and he has hundreds of people watching.

Then again, last I heard, he is one of the top paid electronic musicians in the world. I’m learning how to make music, listening to his songs, watching his *[master class. He doesn’t use one.

I use one and I’ve seen that most other people that are getting a good number of viewers use one. I find it personally kind of annoying when I go to someone’s stream, and I give some Bits or I follow, I subscribe or I want to know where their social media is, that this information is not immediately accessible.

These overlays, if you are not sold already, are really valuable for Twitch and I haven’t even set my YouTube one up yet, but it’s basically the exact same thing.

The downside is as far as I can see, you need to set them up, you either need to set it up in each one individually or maybe I can import from another channel and pull it in.

This is the cool button. If you find another channel you like, you should be able to just import it directly from another channel.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

I haven’t tested that out yet, but if you have got multiple channels, you should be able to just make one and import that as well.

There we go.

This is how to set this up in Wirecast. I will wrap this up by going back to summarize this process.

Once you have got your stream URL, you open the “Web Display” up in Wirecast on either the top or the second-highest layer depending on if you want to put anything over the overlay.

StreamElements + Wirecast Overlay Installation for Live Streaming on Twitch and YouTube!

You do “Web Display,” and then the URL that you get out of StreamElements or Streamlabs, you put that into the address.

You may need to resize the video width.

My canvas is 1920 x 1080 because that makes everything simple. Everything I do, all my thumbnails, all my videos, all my live streams, everything is 1920 x 1080 and that makes it easy.

By default, Wirecast starts it in a smaller size.

If your overlay looks weird, make sure your video width and height from the overlay are the same everywhere, that it’s the same in Wirecast and in your canvas.

I checked “Transparent Background” because when I didn’t do that, it left a lot of white on the screen because when you are doing the overlay, I believe it’s on a white background when it’s on StreamElements.com.

You get a page with the overlay plus a white background, so you check “Transparent Background” and it deletes it.

You can also shut down when not live.

I leave it on because I’m doing a pre-recorded tutorial and sometimes I want this overlay, like right now, over my pre-recorded tutorial.

Obviously, you hit “Okay” to finish this or it will not do anything.

Once you have done that, then you have got your overlay.

You make sure you go to “File” and “Save,” and then you are ready to go.

Thank you very much for watching or reading.

When you want to research and buy Wirecast, will you please use my links in this post because I am a partner with them, and you will feel good helping me earn a percentage of each sale?

If you found anything helpful, will you please leave a like because then you will help other people find it just like you did?

Love,

Jerry Banfield

Edits from video transcript by Michel Gerard at www.michelgerardonline.com.