This article only applies to Streamlabs OBS, as our .overlay files will only work in SLOBS. If you are an OBS Studio user, carry on my wayward son.
Recently, Visuals By Impulse created a .overlay file for select Streamlabs-approved premade packages that allows you to apply the entire design package to SLOBS with a few clicks. No more need for edits, as this allows you to edit your Username and Social Media handles without the need for Photoshop or GIMP.
Look for the Streamlabs Certified badge to confirm whether the design contains a .overlay package.
You can manually import each design into SLOBS, but as long as it has the Streamlabs stamp, you can take advantage of the one-click set-up and .overlay file. Here's how to use it:
Step # 1
After you've selected a VBI Streamlabs Approved Package (as described above), and completed your purchase make sure you save the files to your computer. I'll be using the Pilot Animated Package for this tutorial, and I have the files saved to my desktop. Inside the folder of your files, you'll see plenty of different folders with your designs. For the One-Click setup, you need the .overlay file.
Keep in mind where you have this file, as we'll use in the next step.
Step #2
Open Streamlabs OBS on your computer. If you don't have SLOBS, you can download it here.
From any tab of the app, click on the SETTINGS button in the top right.
A pop-up window for your settings will appear. Click on SCENE COLLECTIONS to see the following screen-
Now we'll use the .overlay file from Step #1. Click on IMPORT OVERLAY FILE. Select the file you need, and click OPEN.
The Streamlabs app will take a second to import the file, and when it's done, you'll be brought to the Editor tab with the entire package imported into different Scenes, including necessary sources for those scenes.
Step #3
Now you have everything imported, but we're not done yet.
Since the .overlay file imports ALL sources and scenes into StreamlabsOBS, you'll have to configure some settings and make sure your scenes are adjusted. Unfortunately, it's impossible for VBI to create the overlay file and have it set up nice and neat, so let's walk through how to make some edits to your username and socials.
For now, ignore the other Scenes.
Username-
Scroll down in your Scene box to USERNAMES.
Next, click on the Text Source for usernames, which is on the right of the Scenes box-
Select the source, right-click it, and select properties, then go to the TEXT box and adjust your Username. This will change all universal text with the USERNAME in it, so Starting Soon, Overlays, and all sources will reflect the change. Additionally, you can edit the text font, size, color and more here to match your preferred settings. I will note that the text is already formatted for you but feel free to adjust to your heart's desire.
Now we'll adjust the Social Media Information.
Social Media Information-
In the Scenes box, select the MAIN SCREEN SOCIAL MEDIA INFORMATION.
Similar to how we changed the Username, you can change the Social Media Information with a few clicks. Inside the Source box, you'll have multiple options for each of the Social Media sources you have. In the Pilot Animated Package, we have four (4) Social Media sources.
Each source will have the option for changing Username text and changing the Icons. Simply click on the > (arrow) button inside the source options to view the editable features.
Each file is an Icon for the respective Social Media platform. Change your Username text, match it up with the appropriate icon, then repeat for the other Social Media sources.
Since users have the option for changing the icons, all icons included are currently Visible (the eye icon to the right of the box). You'll need to make all icons Invisible by clicking the eye (which is indicated by a slash through the eye icon). Then simply make the appropriate icon Visible as seen below.
Click the eye icon to the right of SOCIAL MEDIA ICONS, which will put a line through the eye (meaning it's invisible). Then scroll down and click the crossed-out eye of the preferred social media icon to make it the only visible icon.
Repeat for all Social Media Icons in your other Social Media Sources. This will ensure all your Social Media icons are visible. If you neglect this, you'll see boxes where the icons are supposed to be.
One more note!
Since the files are created in 1920x1080, you may need to adjust the size of the icons and text to fit. Click on the source to make a red outline appear. From here, click and drag on one of the circles in the corner of this outline to increase or decrease the size of the source. Use this to format the icon to your preferred size.
Step #4
Now it's time to adjust your other Scenes imported for the package. If you click on the Main Screen in your Scenes, you'll see all the sources added, making your overlay cluttered.
As you can see, both webcams are visible, and some of the usernames are not visible. In order to clean your overlay up, simply turn visibility off on any unwanted designs (like webcam, or if preferred, the overlays/text). You may also need to adjust the spacing of the icons and text in your SOCIAL MEDIA INFORMATION scene.
Play around with the placements of the sources and adjusting the text to fit your specific preferences, and once you're done, make sure you add other sources (like webcam, mic, game capture, etc) and you'll be ready to go!
You'll also need to adjust the layers of your sources, so your text "floats" over the designs.