Using Your Overlays & Setting up a Scene in OBS
Now that you have your graphic overlays, what do you do next? Using them is simple and easy and I’ll walk you through it!
Step 1: Extract your files. Take note of the location of your downloaded pack. Typically this will be your downloads folder, but I rearrange my files to my liking and I suggest you do the same. Either way, you will need to know where the images are that you want to use.
Step 2: Open OBS. I use different scene collections, but not everyone does that. If you do, make sure you are using the collection you plan to use for your game. Also, if your OBS looks a little different than the images I use, that’s just a styling difference and can easily be adjusted in your settings.
Step 3: Add an image source by clicking the “plus” icon associated with the sources section. Then select image. You can rename the image source to anything that will help you remember what it is at a glance. For this example I am making my background layer so I will call it “BG”. Next, I will click the “Browse“ button next to the empty Image File box. This box is blank when you make a new image source because OBS doesn’t know what to reference yet. Once you click on the “Browse“ button you need to navigate to where you are storing your images. This is where it’s helpful to remember where you’re storing all your files. Once you’ve done that, select the image you want to use for this image source and click “Open”. Now the image will appear on the scene behind the properties box, but now the file location is filled out and you should be able to see the image in the preview box as well. Click “OK” and you’ve successfully added your image!
Step 4: Re-Position as you need. Most of the images purchased here, if not all, should perfectly fit into a 1080p / 16:9 canvas. However, you can move the image around, re-size it, or even crop it to fit your needs. Once you like where you’ve put your image, it might be a good idea to lock the source so you don’t accidentally change it somehow.
Step 5: Rinse and repeat steps 1-4 as needed until you’re satisfied with your scene. Note, new sources layer on top of old ones, but you can move them in front of or behind others however you’d like. You can click and drag on them in the Sources box or use the arrow keys if you prefer.
Step 6: Add participants by using the same steps listed for images, except now you might be choosing “Window Capture” or “Browser“ instead depending on how you’re capturing the video feeds of everyone. Most commonly, people will use an application like Discord or Zoom. I prefer to use VDO Ninja because it allows for greater control over many things but that will be in a different article at some point. For now, just make sure the layers are set and everyone is where they need to be.
Step 7: Add Text for your crew. It is a very good idea to add descriptions for each person in your game. You might display their name, shout-out their socials like Twitter or Instagram, or even give out character information such as “Geoff the Goblin Rogue“. I would personally just add this sort of thing on the image itself using whatever image editor you prefer. However, you add text the same way you add any source and can modify things like the text displayed, font, font style, etc… Do this to your liking and then move and re-size the text source on your canvas.
Rinse and repeat these steps as needed until you’ve created your entire collection. Many include Starting Soon, Role Playing, Combat, Be Right Back, and Thanks for Watching.
Many live streamed games will want to add alerts or even stream chat in the info box included in many of our images. To do that you will need to use a browser source and a service like Streamelements. You also might choose to add promo or info images there or on the sponsor bar below. Either way, have fun with your setup and enjoy the show!
I’m Jake. Dungeons & Dragons and Tabletop RPG nerd. Die-hard New Yorker. Co-Founder of JNJtabletop.