Disclosure: Some of the links below are affiliate links. This means that, at zero cost to you, I will earn an affiliate commission if you click through the link and finalize a purchase. Learn more!

In this tutorial, I'll be walking you step-by-step through how to set up all of your overlays in Streamlabs. This includes your 'Starting Soon' scene, Countdown Timer, 'Just Chatting' scene, alerts, and everything else you need. By the end of this tutorial, you'll have a professional-looking stream that you can feel confident going live with. 

Getting Started

The first thing you're going to do is make sure that you have Streamlabs Desktop installed. 

Once you have this installed, it's going to prompt you to select your 'Streaming Destination.' If you have not done this, head to the bottom-left side, select 'Settings,' 'Stream,' and then choose your streaming destination. For me, this is going to be Twitch. 

Streaming Sources

This is very important because it lets Streamlabs know where to bring in information from. It's especially crucial for your alerts; without setting this up, these will not update when you get followers, subscribers, or donations. 

Getting Your Overlays

The next thing you'll want to do is get your overlays and have them ready to be used. I'll be using Stream Designz overlays. Stream Designz offers tons of overlays that have already been professionally created, giving you everything that you need to have a clean-looking stream. 

There are tons of different overlay packages to choose from. Today, I'll be using the 'Project Zero' Ultimate Stream Bundle

Project Zero

This is an animated package that's going to give us everything that we need. 

Project Zero- What's Included

It will give us our webcam, panels, alerts, countdown timer, count-up timer, stinger transitions, animated emotes, and all the other overlays that we need. If Project Zero is not the vibe you're looking for, Stream Designz has tons of other overlay packages to choose from. 

Once you have your overlays downloaded and purchased, you need to make sure that the Stream Designz files are unzipped. To unzip these on a Mac, all you need to do is double-click the zip file, and it will unzip. To unzip these on a PC, right-click the zip file and select 'Extract'. Both of these ways will add all of the files into one folder for you to easily use. You know you've done this right when you have the zip file and a folder that you can open and see all of your alerts. 

Adding in Your Scenes

The first thing we're going to do is set up our scenes. The scenes are what you're going to be switching through during your stream. 

We'll be starting with the 'Starting Soon' scene. There will be a scene already predefined in the bottom-left corner. Right-click this and rename it "Starting Soon." Click 'Done' to lock this in. 

Press the plus-sign icon to add a new scene. We'll name this one "Countdown Timer." You'll follow this same process to build out all of the scenes that we'll be using today. 

You should add all of these scenes in the order that we'll be adding them in, which you can see in the list below. 

  • Starting Soon
  • Countdown Timer
  • Gameplay
  • Just Chatting
  • Be Right Back
  • Stream Ending
Scenes

These are the foundational scenes that you're going to want to have in place. You'll also have overlays for all of these scenes with the Stream Designz overlay packages

Now that we have our scenes set up, we need to start filling them in so they're no longer black screens. 

Adding Sources to Your Starting Soon Scene

Let's start with the 'Starting Soon' scene. Select this scene and then go over to 'Sources.' Now, anything we put in 'Sources' will only be within the 'Starting Soon' scene. We'll have to do this for every single scene, but we'll get through this step-by-step. This will be pretty straightforward; there's nothing too technical. 

Hit the plus icon in 'Sources,' come up to the top, and go to 'Media Categories,' then scroll down to where it says 'Media.' 

VERY IMPORTANT: If you have an animated package, like the one I'm showing you with Project Zero, you'll select 'Media File.' If you have a non-animated, static, overlay package, you'll select 'Image' every time you select 'Media File.'

If you're unsure of whether or not you have an animated overlay package or not, go ahead and reach out to Stream Designz, and they'll help you figure it out. For the most part, you probably have animated overlays and will be using the 'Media File' option. 

That being said, I'll select 'Media File,' 'Add Source,' and then I'll name this "Starting." You'll now need to locate your files. Once you find your overlay package, you'll go to 'Overlay Screens,' and then you can select 'Starting Soon.' 

It's very important that you set this to 'Loop' or else the animation will end after a few seconds. 

Starting Soon

You'll also want to select 'Close file when inactive.' This is going to make it so that this is not using up your computer's resources when that overlay isn't even on the screen. Now, press 'Close,' and you'll have your 'Starting Soon' overlay. 

Starting Soon

Once you have everything exactly where you want it to be, select the lock icon next to the overlay in 'Sources.' By doing this, you won't accidentally move anything out of place.

Adding in Your Countdown Timer

The next thing we'll be setting up is the 'Countdown Timer.' 

Select the plus sign icon in 'Sources,' go to 'Media Categories,' then select 'Media File.' Now, press 'Add Source.' 

Super important: this will default to an existing source you've already set up. This will come in handy later when we're setting up alerts, but for now, make sure that you select 'Add a new source instead.' We'll name this "Timer." Select 'Add Source' and locate your file. 

With the Stream Designz Ultimate Overlay Bundle, you'll have both a countdown and a count-up timer to select from depending on your preference. Once you've found the file you want to use, select it and press 'Open.' This will then bring in your Countdown Timer. 

Countdown Timer

For your Countdown Timer, you do not want this to loop. Once it gets to zero, it's time to start your stream, so you don't want the timer to restart. However, you will still want to select 'Close file when inactive.' 

Since this is all in place now, go ahead and lock this layer. 

Setting Up Your Be Right Back Scene

We're going to go ahead and jump to the 'Be Right Back' scene since this is going to be one of the easier ones to set up. 

Hit the plus icon under 'Sources,' go to 'Media Categories,' then select 'Media File.' We'll name this 'Be Right Back.' Press 'Add Source,' then locate the file for your 'Be Right Back' overlay in the 'Overlay Screens' folder. 

You do want this scene to be set to 'Loop,' and you should once again select 'Close file when inactive.'

BRB Scene

With this set up, and once you have it in place, lock the source, and we can move on. 

Setting Up Your Stream Ending Scene

Now, we're going to move on to the 'Stream Ending' scene. 

Hit the plus icon under 'Sources,' go to 'Media Categories,' then select 'Media File.' We'll name this 'Ending.' Press 'Add Source,' then locate the file for your 'Stream Ending' overlay in the 'Overlay Screens' folder. 

You'll want this scene to be set to 'Loop,' and you should select 'Close file when inactive.'

Starting Soon

Be sure to lock this when you have it in place. 

Now, we have four of our sources already set up, and you can really start to see your stream coming together. 

Adding in Your Stinger Transitions

The next thing we're going to add is the 'Stinger Transitions.' This is going to make it so that when you switch scenes, there's a nice animation that happens. It's going to add a good bit of professionalism to your stream. 

Click on 'Edit Scene Transitions' to the right of 'Scenes.' 

Edit transitions

You'll see that there is already a basic stinger transition here, but we're going to add in the one that came with our overlay package. 

Select 'Add Transition,' 'Type,' and scroll down to 'Stinger.' We'll name this "(Package) Stinger," which for me is "Project Zero Stinger." 

For 'Audio Fade Style,' set this to 'Crossfade.' This way, your audio is not going to cut out when you switch scenes, but instead will transition nicely. 

Head to 'Browse' and locate the file for your stinger transitions. Once these are added, we want to make sure they appear at the right moment, or else it's not going to look good. 

For 'Transition Point Type,' select 'Time.' For 'Transition Point,' this is going to be a little bit different for everyone depending on your transitions, so you may have to play around with it a bit. I've found the sweet spot to be around 750-1100ms. I'll start with 750ms, select 'Done,' and then I'll be sure to select my new stinger transitions. 

To test your transitions, switch between two of the scenes that we've already set up. What you're looking for is to not see what is behind the stinger transition before the transition has even happened. If you switch to your countdown timer and you see the timer before you see the transition, then you need to adjust the setting. If it's taking too long and the transition is happening well before the scene changes, then you need to go lower to about 500ms. 

Setting Up Your Just Chatting Scene

Next, we can move into setting up the 'Just Chatting' scene. This is going to be the scene that will allow us to build a lot of the things that we'll need and will help us later build out the 'Gameplay' scene as well. 

Make sure to select 'Just Chatting' under scenes, then go to 'Sources' and press the plus icon. Press 'Media Categories,' then select 'Media File.' Be sure to add this as a new source. We'll name this 'Chatting.' Press 'Add Source,' then locate the file for your 'Just Chatting' overlay in the 'Overlay Screens' folder. Select the file and press 'Open.' 

Just chatting

You can see here that we have a nice, organized 'Just Chatting' scene. You are going to want this to loop, because you'll be on this scene for more than 10 seconds, and you want the animation to continue. You'll also want to select 'Close file when inactive.' With this in place, you're going to lock the overlay. 

In the top-right, you're going to have the option to put either your gameplay, a screen from your PC, or your camera. In the middle, this is where you can put your camera or your gameplay.

I typically put my gameplay in the top-right, my camera in the middle, and the three boxes at the bottom are where my stream labels will go. 

Adding Stream Labels

Stream labels are what you see when someone follows you, donates to you, or subscribes to you. This is why we had to connect to the platform that we're streaming on at the start. 

I like to go ahead and start with the stream labels since we'll use this in our 'Gameplay' scene as well. To add these, press the plus sign icon under 'Sources.' Instead of going over to 'Media Categories,' you're going to go to 'Widgets.' Then, you'll select 'Stream Labels.' 

You are going to have to do this for each one of the stream labels that you want to set up. The first one that I like to add is for my latest follower. So, I'll name this stream label 'Recent Follow.' Streamlabs is going to have a lot of different options for stream labels, but I'm going to give you the most foundational ones. At the top, you're going to type in 'Most Recent Follower,' and it's going to give you the label for this. 

Stream Labels

This is what it's going to come up with. The label itself will just be the person's name, which you don't need to change. You can change the font, style, and color however you would like. As for the sizing, I just leave this set to 9 so that people who have longer names don't get anything cut off. 

Something that you should be sure to do is check off 'Outline' and 'Drop Shadow.' This is going to make the text pop. 

Once this looks the way you want, select 'Done,' then drag it from the top of the screen into the right box. The great thing about stream labels is that they update automatically. It may take a few seconds after someone follows you for this to update, but it will always be your most recent follower. 

Now, we'll do this again. 

Go to 'Widgets,' select 'Stream Labels,' and we'll name this 'Recent Sub.' Just remember, you can call this whatever you want, or you may even have slightly different options based on the platform that you stream on. This time, you'll search for 'Most Recent Sub.' I'm going to select 'Most recent subscriber.' 

Adjust the settings as you would like, but be sure to check off 'Outline' and 'Drop Shadow.' Then, press 'Done,' and drag this label into the right spot. Again, the great thing about this is that when you get it set up once, you can add them to your other scenes without having to do the whole setup process again. 

Now, we'll add in one more. Go to 'Widgets,' select 'Stream Labels,' and we'll name this 'Recent Cheer.' Search for 'Most Recent Cheer,' and select this. Be sure to check off 'Outline' and 'Drop Shadow,' then press 'Done,' and drag this label into the right spot.

Stream Labels Added

Now, we have our stream labels in place. Again, once you have these sources where you want them to be, it's important to get into the habit of locking them in place so that you don't accidentally move them around as we add in more sources. 

Adding Your Chat

Next, we need to add our chat into the 'Just Chatting' scene. 

Press the plus icon, go to 'Widgets,' and select 'Chatbox.' We'll just leave the name of this as 'Chatbox,' as well. 

There are different themes that you can choose from. I'm going to leave mine as the 'Twitch' option. You can also choose whether you want the messages to always show or disappear. Personally, I leave this set to 'Always Appear.' 

One thing I will be sure to enable is 'Extra Emotes.' The other thing is that I'll select both options under 'Hide Characters.' If you don't want your bot or mods to show up in the chat, just be sure to enable these. 

'Browser Settings' is what will allow us to adjust the size of the chatbot so that it fits into your overlay package. You can only really do this in settings. Most of the Stream Designz packages are going to follow the same size formatting for the settings.

Under 'Browser Settings,' you'll be able to change the width and height. I'm going to change the width to '300'. For me, this still isn't quite wide enough, so I'll just play around with it until I get the right number. It ended up being a width of '400' and a height of 600 for the Project Zero overlay package. You can drag the height into place, so you mostly just need to focus on the width. 

You won't be able to preview the chat until you're actually live, but once you are, you can make sure this is where you want it to be. Be sure to lock your chat in place once it's in the right spot. 

You should already be feeling proud that you've got this much of your stream set up. 

Adding Your Gameplay 

Next, we need to add your gameplay to the 'Just Chatting' scene.

There are a few different ways to bring in your gameplay based on how you game. If you game on a console or a gaming PC, you're most likely going to be bringing in your gameplay from a capture card. This is what I'll be doing today. If you game on the same computer that you'll be streaming on, you're going to have to set this up a bit differently. 

To add your gameplay, press the plus icon by 'Sources' and go to 'Media Categories.' If you're using a capture card, you'll select 'Video Capture.' If you're using the same computer that you're streaming on, you'll select 'Window Capture.' If you select 'Window Capture,' you can easily select the window that you want to capture. 

As I mentioned, I'll be using 'Video Capture' since I'm using a capture card. Let's name this "Game Capture (capture card name)." For me, this is "Game Capture HD60X." Then, under Device,' you'll locate and select the capture card for your gameplay. For the preset, I'll keep it at '1920x1080.' 

Gameplay Added

Once your gameplay is added in, you'll want to resize this and put it in either the top or middle box of your 'Just Chatting' overlay.

Under 'Sources,' you're going to need to make sure that your capture card or window capture is below the 'Chatting' overlay. This way, the camera will sit below your overlay, and it won't block the animations. This is true of anything except the stream labels and chat. 

Gameplay Adjusted

Now, this looks nice and professional. Don't forget to lock this in place. 

Adding Your Camera

The next thing we need to do is bring in our camera. 

There are going to be a few different options for how to do this. The first option is to have a camera connected to your computer. This will be the easiest way to bring this in. If you don't have a camera connected to your computer, you can use your phone using VDO.Ninja. If you're not using your phone as a camera, you can just skip over this part. 

On VDO.Ninja, select 'Create Reusable Invite.'

VDO.Ninja

Under 'Quality Settings', be sure to check 'Unlock the video bitrate' and 'Use the VP9 video codec'. Everything else is fine. We'll name this 'Phone Camera Stream' and then generate the invite link. 

Very important: You want to copy the link or scan the QR code with your phone to have the link open up. 

For your phone to be a webcam for you, you'll need to select 'Share your camera' and give this access to use your camera and microphone. This will then ask you to select the video source. I'm going to use the back camera, but you can also use the front camera if you prefer. The back camera is going to have better quality. For 'Audio Source,' you're going to select 'No Audio' unless you want to use this as your audio source. 

Now, you can select 'Start,' and it's going to begin showing you your feed. Go back to your computer and find the link that says 'OBS Browser Source Link'. Even though this says OBS, we can still use this on Streamlabs.

Head back over to Streamlabs, press the plus icon, and go over to 'Media Source.' Select 'Browser Source,' name this "Phone Camera," and then paste the link that we just got. Be sure to set this to '1920x1080.' Once you put your phone in horizontal mode, it's going to go ahead and give you your camera. 

Now, you can size this up and get it in place. Again, be sure to put 'Phone Camera' below 'Chatting' under 'Sources.'

Phone Camera Added

If you are NOT using your phone as a camera, and instead are using your computer camera, it's a much simpler process. All you need to do is press the plus icon, go to 'Media Categories,' and select 'Video Capture.' Be sure to select 'Add new source instead,' and we'll name this "Camera." Then, select your camera from the list of options. 

Be sure this is set to '1920x1080,' then size this up and get it in place. Be sure to put 'Camera' below 'Chatting' under 'Sources.'

Webcam from Capture Card

Now, we have our camera all set up and ready to go. Be sure to lock this in place. For the time being, I'm going to hide the camera using the button directly next to where we have been locking these elements. 

Setting Up Your Alerts

The next thing we need to do is set up our alerts. 

To get started, press the plus icon, go over to 'Widgets,' and select 'Alert Box.' Let's keep this named "Alert Box." I'm going to show you how to set this up once, and then you'll follow the same steps for all of the other alerts. I'll be showing you how to set up the 'Subscription' alert.

The first thing you're going to see is an image. You'll want to select 'Clear Link,' then press 'Change Media.' You'll then go back to your overlay package, find the 'Alerts' folder, and look for the 'New Subscriber' alert. This is going to upload, and you'll be able to select the alert now. 

Once you select this and hit 'Done,' you'll have your first alert added. Now, we need to get this dialed in. Pretty much, if not all of the Stream Designz packages are designed for these to be centered. For 'Sound,' you can leave this on, but I personally set it to zero. For the 'Message Template,' I set this to say "(name) just subbed!" This way, people with longer names don't find it getting cut off. 

When you scroll down to 'Animation,' change the 'Alert Duration' to '6s.' This is long enough for the screen to be up there. I'll leave this set to 'Fade In' and 'Fade Out.' As for the text delay, I'll typically set this to '1s.' This is really based on the animation that your alert has, so you'll need to test this. If you see the text popping up faster than the alert, you're going to want to increase this a little bit. If the text is taking too long, then you want to decrease this. Personally, I set 'Text Animation' to none, but this is based on your preference. 

For 'Font Settings,' this is heavily based on your own preferences. I like to change the 'Text Highlight Color' to match my theme more. This is going to be the name of the person who has just subscribed to you. 

To test this, you just want to press the play button next to 'Subscription.' Now, you can see exactly what your alert looks like. 

Alert Added

Looking at mine, I decided that the text was too big, so I'll take the font size down some and test it again. 

If you have any trouble with the name not showing up within the box, just reach out to Stream Designz, and they can guide you through the best way to set this up instead. 

To test this outside of settings to make sure the alert appears where you want it to, come to the bottom and select 'Test Widgets.' Then, select the one that you want to test. From here, you can resize and move your alert, adjusting where it will show up. 

I'm going to turn my camera back on and test this one more time once I think I have everything in place, just to be sure it's where I want it to be. If it is, I'm going to disable my camera again while I work on the other alerts. 

Alert in place

Now, you'll follow this exact process to set up all of the other alerts. Be sure to lock each of these alerts as you finish them. Once you've added all of your alerts, your 'Just Chatting' Scene is all finished and good to go!

Adjusting Your Gameplay Scene 

With the 'Just Chatting' scene finished, it's time to move on to the 'Gameplay' scene. This is going to be a lot easier to do now since we've already done most of the heavy lifting.  

Select the 'Gameplay' scene and then press the plus icon by 'Sources.' Go to 'Media Categories,' 'Video Capture,' and you'll select the exact same thing that we brought in earlier. You can allow this to take up the whole screen. 

Then, go to 'Media Categories,' 'Video Capture,' and select where we brought in our camera earlier. Once this is added, you'll resize this and put it where it won't block any important parts of your game. 

Adding Your Webcam Overlay

I'm not going to lock the camera in place just yet. First, we're going to add in the webcam overlay. Press the plus icon, go to 'Media Categories,' and select 'Media File.' You'll select 'Add a new source instead,' and we'll name this "Webcam Overlay." In your files, you'll need to go back to your overlay package, and you'll look for the 'Webcam Overlay' files. 

With the Stream Designz package, you'll have three different options to choose from. The first option is just the bottom bar. The second is the bottom bar with a border. Then, the third is just the border. I'm going to be using the one that is just a border. Don't worry about resizing this to fit perfectly just yet. Be sure to set this to loop and to close when inactive. 

I'm going to hide my gameplay really quickly. Then, for the webcam overlay, I'm going to right-click this, go to 'Transform,' and select 'Fit to Screen.' With that done, I'll lock the overlay in place. Now, in 'Sources,' make sure that your camera is above the 'Webcam Overlay' and then drag your camera into place above the webcam overlay to make sure that it fits. With this in place, drag 'Camera' below the 'Webcam Overlay' in sources. 

Now, lock the camera as well and come to where it says 'Add a Group.' Select that, and we'll name this "Cam + Overlay." This will create a little folder here that you'll put the camera and the overlay bar source into. Then, I'll unlock this folder, and when I resize it, both the camera and the overlay will move in sync. 

Once I get this in place, I'll get my gameplay turned back on so I can see how it looks. 

Gameplay added

Again, be sure to lock all of the elements under sources so you don't accidentally move anything around. 

One thing to note for your camera: right-click this, select 'Transform,' and flip your camera if your monitor is to the left so that you're always facing the game. This is just going to help things look more professional and immersive. 

Adding in Your Overlay Bar and Stream Labels

The next thing we want to add is our 'Overlay Bar.' Press the plus icon, go to 'Media Categories,' and select 'Media File.' You'll select 'Add a new source instead,' and we'll name this "Overlay Bar." In your files, go back to where it says 'Overlays Screens,' and select 'Overlay Bar.' We do want this to loop, and we do want this to close when it's inactive. 

Go ahead and position this exactly where you want it. You can also use your keyboard to get this exactly where you want it. You also do not have to use the overlay bar; you can always just use the one attached to the webcam overlay, or you don't have to use one at all. I'm going to keep mine at the very top of my screen, and I'm going to get this locked in place. 

Now, we're going to bring our 'Stream Labels' into our 'Overlay Bar.' Press the plus icon, go over to 'Widgets,' select 'Stream Labels,' and we can bring in the 'Recent Follower' label. Move this one into place, lock it, and then repeat for the 'Recent Sub' and 'Recent Cheer.' Again, you can adjust these more to your liking.

You'll notice that we have an extra slot here for a 'Stream Goal.' You have the option to add this in if you would like. There are two different ways to add this in.

The first is to press the plus icon, go to 'Media Categories,' and select 'Text.' We'll name this 'Goal,' and then we can type in "Follower Goal: 1/100," if that's the goal you're trying to reach. This is something that you would have to manually update. This is the better option if you really want to be able to customize how the text looks.

The second way to add this gives you a little bit less flexibility with customizing the text. Press the plus icon, go to 'Widgets,' and go over to 'Goals.' These will automatically update once you add the goal that you want to utilize. We'll select 'Follower Goal,' and it will add this in. 

Follower Goal bar

There are a few different options for how you can adjust this, but it's only going to give you the progress bar rather than just the text like in the first way of setting this up. For me, I want more consistency across the board, so I'll likely use the text even though it will not automatically update. 

Stream goal using text

Go ahead and lock all of the stream labels in place. 

Adding in Your Alerts

The last thing we need to do is add our alerts to the Gameplay scene. To do this, hit the plus icon, go to 'Widgets,' and select 'Alert Box.' You'll simply add in the 'Alert Box' now, but we're going to want to adjust the placement. 

To change the placement, go to 'Test Widgets,' select 'Subscription,' and you can resize this and move it into place. Be sure to put this somewhere that you know it won't be blocking any important part of your game. 

Alert added to Gameplay

Now, you have your alerts added in. 

If you like to bring in your chat for your Gameplay scene, all you need to do is press the plus icon, go to 'Widgets,' select 'Chat Box,' and add this in. Then you can place this exactly where you want. 

Finishing Up

Now, we have all of our scenes set up and built out. The only thing left to do is to go live and have this sent out to the platform that you're streaming on. However, you want to make sure that your stream is actually going to look good once you hit 'Go Live.' The only way to do this is to make sure that you're utilizing the right settings for streaming or recording on Streamlabs. Check out this video here to learn all the best settings to use for your stream!

{"statementLink":"","footerHtml":" ","consistentHelpData":[],"hideMobile":false,"hideTrigger":false,"disableBgProcess":false,"language":"en","position":"left","leadColor":"#146FF8","triggerColor":"#146FF8","triggerRadius":"50%","triggerPositionX":"left","triggerPositionY":"bottom","triggerIcon":"people","triggerSize":"medium","triggerOffsetX":20,"triggerOffsetY":20,"mobile":{"triggerSize":"medium","triggerPositionX":"left","triggerPositionY":"bottom","triggerOffsetX":3,"triggerOffsetY":3,"triggerRadius":"50%"}}
true