Get More Into Streaming: Overlays and Widgets
If you read my post on getting into Twitch streaming, you will already have got yourself a Twitch account. Maybe it’s connected it to your Amazon Prime account so you can download Automachef (or was that just me?). By now you should have set up a simple OBS scene ready to stream. But have you got a catchy overlay?
I am hoping that you have already done some OBS fiddling. Have you found that you can add things, manipulate things and got into the thrust of just how easy or complex streaming can become. If you haven’t, it is time for me to introduce part 2; Introducing Overlays and Widgets.
Just Google for a moment… Google “streaming overlays and widgets”
Over 1.5 Million results on the subject. Unfortunately, unless you want to throw money at this new venture, most of it will be of no relevance. Everyone wants to sell you their customised overlays or link you to lists of overlays that are probably affiliate links.
The thing is, it is not going to teach you much. It is not going to get you thinking about your own bespoke and self-designed overlay. If you want a starting point, then a quick skim says that this post from Influencer Marketing Hub.
What’s an Overlay?
An overlay is simply something to go over your game, or something to contain your chat show and be of use or benefit.
Do you watch your local or national news on TV? The banner with the reporter or interviewee’s name, the side panel that scrolls through the sports results, or the weather? That is all part of the overlay for that channel. It is as important to your channel brand as you are.
Personally, I prefer a very uncluttered overlay on my Twitch stream. I have a simple top and bottom bar. It has details of who I am, a webcam and a tip jar behind my head. If you looked at the Influencer Marketing Hub link above, you can suddenly see how complex some overlays can become; but it is already so easy to make your own.
A Quick Guide to Building Your Own First Overlay
What game are you going to stream? How much are you going to be into it? Two big questions before you even start to consider your overlay. Although I like my overlay uncluttered, others prefer lots of things to grab people and keep them on the channel. It might be that the game that you want to play has lots of downtime or has important bits in important places.
There are three big ways that you can build your stream overlay. The first one is directly through OBS (of course, other streaming solutions are available), designing it in Photoshop or GIMP, or through a provider such as StreamElements.
I mention StreamElements – I am currently looking to move from StreamLabs. That means it’s a learning curve for both of us.
OBS
OBS is a simple thing to work with. If I can create a nice loading screen with a video of a city skyline and a countdown timer, then you can create something beautiful.
Most importantly, you need your game. Step 1 is to add a source to your OBS Scene and depending on what works best for you; Desktop Capture or Game Capture. Personally, I use Game Capture most of the time, but some games have difficulty playing with it.
As long as that Game or Desktop Capture is the bottom source in that list, everything else that you add will appear on top and then appear in your stream.
What is great about building your overlay though is that you can also manipulate how transparent they are, whether any sound sources (but don’t break copyright) are included and more. The only problem with adding all these stacking up, one by one, is that suddenly OBS has to deal with dozens of individual assets and for borderline suitable equipment you might suddenly find things struggling.
Photoshop or GIMP
One of the ways around that is to migrate all of your static content into a single overlay layer. If you are only going to stream a few similar games, then you might find using Photoshop or open-source GIMP to create a single layer will work better.
Now if we were to take one of my regular games like Cities:Skylines, the game screen is pretty static itself and this is the perfect sort of game that you can take a screenshot and import into a graphics program to sort out your overlay.
The trick is to create multiple layers to start with, a transparent background, then the bottom layer with your game screenshot, and then one or more layers to add in your effects.
Once you have perfected your overlay, simply delete the layer that just has your game screenshot, export the remaining image as a PNG file, and add it as an image to your OBS or XSplit.
Of course, if you then want to go forward and add elements like your latest follower, or the number of subscriptions you have, you will still need to add dynamic elements from a source such as StreamLabs or Stream Elements.
StreamElements
Since starting to look at StreamElements more objectively, so that I can write something worth reading; I wish I had used it earlier in my streaming journey. The idea of the platform is to try and be your tipping intermediary and merch store, but this time around we are just looking at it’s stream overlays.
In a similar way to using OBS, you can create as minimalist or stunning and involved as you like, for your stream overlay. More importantly though, and something that I have been playing with, is the chance to take their base overlays and make them your own.
There are a number of ‘super’ themes that are centred around specific games or there are more generic ones, such as one that I have chosen and I am developing right now as I write this page…
Well – not RIGHT now – I am not a great multi-tasker.
The whole idea of the themes is actually that you can have a fully built up theme that has a number of screens from the “loading” or “intro” screen through to chat and game windows. The intro screens below show first the StreamElements theme, and then how I have changed it so far!
It does not actually take any coding knowledge and I found the drag and drop style interface suits me down to the ground. I have planned to actually have relevant video to the stream content behind my intro screen, so the first elements to go were actually the blue background, and the blue box in the middle which was home to the channels chat.
The only complaint that I have about using StreamElements though, on the basis that I have just implemented the system into my own overlay, is the display speed of OBS. I imported the overlay as a URL and a browser source, except it takes a few seconds to display each time unless it is continually loaded.
What is great for the StreamElements builder, is that it also has masses of widgets to include in your stream overlays, which makes your stream overlay even more personal.
Widgets
So we have a lot of great static images, we have some calls to action in terms of Twitter and Facebook handles and we are starting to want to offer our viewers something different.
Widgets take a whole manner of designs and needs. The easiest way to use widgets for your stream is to sign up to one of the donation and overlay management systems that are already out there. You already know about StreamElements, but you could also look at StreamLabs.
The basic monetise and engage widgets are generally the same wherever you go though. They can show who your last donor is, who the biggest tipper on your channel is, even the number of viewers watching right now. The trick is to find a way that you can both engage the viewer as a streamer and reinforce the call-to-action of “Give Me Money.”
Monetisation
So what is your goal? If you are a brand new streamer with no Twitch affiliate status, then you are going to be looking at either one off donations or a third party subscription. Personally, I have never succeeded at Patreon, but equally they have no specific on-stream widgets, so lets look at what’s on offer.
Both StreamLabs and StreamElements offer this service and are two of the bigger offerings. Set yourself up a business PayPal account (unless you are happy for your personal details to go out) and connect it to your chosen service.
From then on, you are able to receive direct and almost immediate donations from your viewers by directing them to your service. Personally, from an aesthetic view, I prefer StreamLabs over StreamElements in that respect.
As with overlays, we can present these widgets in a number of ways. Using StreamElements (or using the StreamLabs version of OBS) you can directly integrate animations and effects. Both providers offer ways to celebrate with flashing lights and loud noises, you can tailor them to whatever you want.
Back on the “Starting Soon” screen earlier, there were almost static elements as well. Just telling someone that another person is the biggest tipper can get people trying to beat that. There are more ways that you can aim for a target though. Specifically through StreamLabs for example, you can promote a donations target for something specific.
Whatever provider you use though, and whatever stream medium you have, you can integrate these easily. If you are just using the OBS or XSplit basic installs for example, you would get a URL from where you created your widget, and set it up as a browser source for your overlay. With that in place you can then place it wherever and size it whatever you want.
Engagement
Now they have started donating, you want to keep them there with some engagement. Twitch already have their own on channel points system, where the viewers earn points for simply watching the channel.
The good thing for new streamers is that there are some ideas to get you started, but that you can also start designing your own. As you can see here I was toying with the idea of offering a Gift Sub to viewers who amassed 100000 points. It was not something that I ever implemented because I could see it getting expensive, even if it does take 450 hours of viewing to get!
If you go to StreamLabs or StreamElements though there are even more options. Both offer a loyalty points style system that you can use, with games that can help boost these such as raffles, contests or on stream games.
You can also use those points to enter giveaways as well. StreamElements lets your viewers buy giveaway tickets with loyalty points. StreamLabs have a spinning wheel game where you can give away merchandise, prizes and more.
In both these instances, you can create a custom widget that you can then place in your stream. This engagement may keep your viewers for a few more hours than they usually would.
Better Overlays = More Pro Streams
You may say “Slow, but what can you tell me, you don’t do any of this!” and you are right. I don’t practise what I preach, which is why I also tell my viewers to “Go! Find yourself a better streamer…. it’s not that hard, just pick a channel at random.”
The difference between you and me is that I chose not to be a better streamer. I would not be able to keep it up if I got popular!
Your stream can be whatever you want it though. If you want a big noisy interactive show with your viewers, because it hides the fact that you are not actually that good at Rogue Company (… and I am not… as I found out) then you can be as bright and bold as you like. I have just tickled the surface of what you can do… so you, go be you.