Hey, guys! In our last guide, we were talking about setting up your account. Now that you’ve got everything done, the time has come to get into the details of the broadcast itself.
First things first, you should click the “overlays” tab on the dashboard and create a new overlay. This will bring you to the overlay manager, specially designed for users to get maximum results by putting minimum effort. It has all the functions to make your unique design and place it in the OBS. Now let’s get started!
Introduction. The Overlay Manager
After the creation and naming of your new overlay, it’s time to create the main widgets of your stream: alerts, labels, counters, and tip goals.
Once you open the new overlay, there’ll be a blank screen (which however will soon become full of various alerts). On the top left corner of it, you can see a button called “+add widget”.
There are several widgets and several types of each widget available in the overlay manager. Those are:
Alerts:
- Tip Alerts;
- Twitch Follow Alerts;
- Twitch Subscriber Alerts;
- YouTube Subscriber Alerts;
- Media Share Alerts.
Labels:
- Tip Labels;
- Follower Labels;
- Subscriber Labels;
- YouTube Superchat Labels;
- Banners’ Sequence options.
Counters:
- Tip Counters;
- Twitch Follower Counters;
- Twitch Subscriber Counters.
Goals:
- Tip Goal;
- Twitch Follower Goal;
- Twitch Subscriber Goal;
- Youtube Superchat Goal.
Each widget has its own settings, which (once you’ve chosen the widget) will be shown on the right corner of the screen. Let’s choose the tip alert and use it as an example.
Part I. General Settings
Let’s start with widgets’ variations. Each widget can have as many variations as you want (you can create different variations of the same widget for different cases). However, the number of variations, set by default is, of course, 1 (see the screenshot below). Let’s click on that variation.
After clicking on it, a settings menu will pop up in the upper right corner of the screen. It contains the following tabs:
- GENERAL — allows you to set the name of variation and set the number of events (how many times this widget should be displayed on your screen while testing).
- BEHAVIOR — allows you to set the duration of the widget display, the delay of its display, and the in/out pop-up animation options.
- AUDIO — allows you to set with what sound should the widget pop up and choose the voiceover if preferred, as well as to change the volume of both functions.
- PLACEMENT — allows you to set the size of the widget and its position (although you can do it with your mouse too).
HINT: the sound of the alert can be chosen not only from the available options. You can put any audio file as a sound for your widget pop-up (beware of copyrights).
Part II. Text And Style Properties
To ensure flexibility and convenience for users, each widget, besides having its general settings, is made from separate parts. As now we’re talking about the tip alert, those parts are:
- Header (default settings: TIP RECEIVED!)
- First Line (default settings: John Doe Tipped 1500 EUR!)
- User Message (default settings: TIPPER SAID: THANK YOU VERY MUCH)
- Image/GIF (no image/GIF by default)
It’s possible to change those parts in any way and at any time you want (or you can just delete them). You can do so, by clicking on the name of each part of your widget as it’s shown on the screenshot below.
HINT: It’s also possible to make every part bigger or smaller by using the “PLACEMENT” tab or just dragging their frames with your mouse.
For example, let’s change the header of our newly made tip alert and write something funny like “AND THERE GOES THE MONEY!” instead of a boring default text. Moreover, we’re going to change its size, font, text color, background color, add some shadows, and even change the rounding of the background.
To do so, just click on the header at the right bottom of the screen, and then choose the “TEXT/STYLE PROPERTIES” or “PLACEMENT” tab at the top. There you’ll find all the necessary functions.
Let’s go step by step.
- For the first, I’ve dragged my header to make it bigger (visibility always matters).
- Then I’ve changed the size to 35px and used another font (I’ve chosen the Comic Sans MS, isn’t it gorgeous?).
- The next step is to add some colors: let’s change the text color to red, the shadow color to green (and raise its thickness), and the background color to white. Green, White, and Red — what a beautiful mix! It adds some fresh Italian flavor into our alert, huh?
- And the last step is to add some rounding: I’ve raised it to 100. Let it be.
And voilà, we’re all set up now! And this is what I got:
Well, it may need some minor changes, I guess. Anyway, the main reason for me doing all these manipulations is to show you how it’s possible to change all the settings and make something ABSOLUTELY different from what we’ve got for default in just 1 minute. Imagine what you can do by spending a good 20 minutes on it. The result can be breathtaking.
Now let’s get serious. The settings of each part of your alert/label or anything else is wide and give you a lot of tools to work with. The major deciding factor is your imagination (as you can see, I’ve got some problems with it). For example, here’s what an experienced person is able to do with the overlay manager.
The next part of our tip alert is the First Line. And while the text, style, and placement settings are the same for both Header and First Line (or any other text block of your alert), there’s one significant difference between them:
If set by default, the First Line shows who (John Doe) has tipped you and how much money (1500 EUR) he/she has sent. It’s possible thanks to 2 main formulas:
- {username} — shows the nickname of a user that has tipped you.
- {amount} — shows the amount of money sent to you.
Just write these formulas in your text blocks and each time you receive a tip, they will turn into the nickname of a tipper and the amount of money he/she tipped. For example, if my nickname is ThomasTheCat and I’ll send you 10 USD, your tip alert will display “ThomasTheCat” instead of {username} and 10 USD instead of {amount}.
HINT: You can place these formulas into any text block of your tip alert.
Part III. Final Tests
After you’ve finished setting up all your alerts, labels, counters, and everything else you want, it’s time to make a final test of all widgets. It’s done by clicking the big “START TEST” button in the upper middle of your screen.
Once the button is clicked, your overlay will go into a test regime that you can manage through the menu on the right side of your screen (see the screenshot below).
We’ve got only one tip alert made, so it’s the only widget we can test. The test regime is designed to actually know how the widgets will look and act when displayed during the stream.
HINT: any widget displayed during the stream will act exactly the same way it acts in a test regime, so make sure to test your widgets first to ensure all the expectations are met.
Part IV. LAUNCH
You’ve created all the needed widgets? Do they all act just how you wanted? Do you like how they look/sound? if all your answers are “yes”, then your overlay is ready to go. Just click the LAUNCH button in the upper middle of your screen and receive full instructions on how to integrate your overlay with the OBS (see the screenshot below).
And that’s how you manage your widgets in the destream overlay manager. As you can see, it’s just a piece of cake. Have a nice day and good streams to you! Stay tuned for new updates and informative articles to come!
