A SOP Story: Using an Image Mask to Create Non-rectangular Webcam Footage

TL;DR? Skim through the headers and bolded text to get the gist, or skip down to the written SOP marked "Finally, the SOP." You can always bookmark this page and come back to it later when you have more time or want to try it out.

Are you recording your own videos? Are you tired of the same old rectangular video feed, and you want to mix it up a little by using a different outline, like a circle, maybe with a snazzier background? Are you not sure where to start with an “advanced” technique like this, or worried about the time and effort you’ll need to put into editing?

In this article, I’m going to work from a video tutorial I found on YouTube that covers how to address this issue, and pull out a preliminary standard operating procedure (SOP) that you can adopt to apply this video’s technique in your own videos. You can use this whether you’re live streaming or recording for later.

The best part is that it can be a set-it-and-forget-it kind of preprocessing step that’s ready to go as soon as you’re ready to hit record. That makes for a consistent and easily repeatable SOP plus a video production time saver.

If you’ve heard me talk about SOPs in the past, you know that I like to make sure that all of the “must haves” have been accounted for, and that I’m set up for efficiency, quality, and consistent results. I also like to make sure I’m ready to delegate if I decide I’m no longer interested in doing something on my own. This SOP will deliver all of that.

(Quick note: The video shapes used in the above banner are for demonstration purposes only, and do not reflect my personal aesthetic.)

Obvious question: Why rewrite a perfectly good video tutorial as a SOP?

I’ll be honest – the video I pull from in this article is the one that I used to figure out this technique. But it has some issues in terms of ensuring that I can create consistent, high-quality results that fit with my brand.

First, the video author switches between two different software packages during his explanation, due to the fact that he first shows us the overall process in one software package and then switches to the other software to generate a file that the first software needs to reference at that point. That’s perfectly fine as a tutorial method, but not so great for efficient reproduction of a standard process. I prefer to forefront the production or collection of the things that are utilized later so that they’re ready when I need them, and I’m not interrupting another part of the process to catch up later, or scrambling and putting everything on hold while I figure where that stuff is or what to do about it. This is a big time saver.

Second, there are some assumptions being made about background knowledge and ability. Again, these didn’t bother me while I was learning, because I’m regularly knee deep in video production right now and everything is so fresh in my memory. But I won’t always be, and I have to write this up in a way that lets me, or the person to whom I delegate this task, jump right in and start producing those consistent, high-quality results I’m so keen on. So the rewrite saves time by making it the case that I’m not reliant on my memory. It also helps with communicating clear expectations for myself and others later in terms of the “must haves” of the process for the results I want, and a clear statement of “why” I’m doing things this way, in case I consider changing the process in the future. Those “why” parts are also part of my company’s institutional memory.

While I offer what I produce here as “up for adoption” to whoever needs or wants it, I’ll caveat that you probably want to tweak this to include your own “must haves” for your own branding standards and work quality expectations.

Background: What’s the video about? And what jargon should I expect?

The video I’m working from is called “How to get a circular webcam in OBS Studio” by Gael LEVEL: https://youtu.be/4i5rTa7m9Uo.

As part of his production process, Gael LEVEL is using OBS Studio, frequently referred to as just OBS. OBS stands for Open Broadcaster Software; it’s 100% free, and available for Windows, macOS, and Linux. You can grab a copy of OBS for yourself at https://obsproject.com/. The OBS blogs can make it sound like this software is just for gamers who want to live stream, but that’s not the case at all. I use OBS as the recording part of my video production process for all of Blou Designs’ YouTube channel videos.

Gael LEVEL talks us through the process of applying something called an image mask to his webcam’s video feed in order to create a cutout effect. This is one way you can break out of the standard rectangular video feed shape – use an image mask to cut out just the part you want to keep, in the shape you want. In this case, that keeper part will be in the shape of a circle, centered at the center of the webcam’s rectangular video recording.

He uses Adobe Photoshop to create his image mask. If you don’t have Photoshop or similar image editing software, or you don’t feel like making a circular image mask on your own, he has kindly made available the circular image mask he uses in his video (https://imgur.com/hZ7ntRp).

Basically, though, an image mask is a black and white image, and you use it to hide or show selected parts of the image to which the mask is applied. In this case, the image you’re masking is actually your webcam video. The white parts of the image mask become transparent, letting your video show through, and the black parts stay opaque black. Don’t worry though – all of those black parts can be replaced by another solid color, a static image of your choosing, or, if you’re feeling really adventurous, another video feed. Does it have to be black and white? Technically, not always, but it’s standard enough that default software settings for using image masks are set up to expect black and white images that will be applied this way. If you’re going to create one, why not optimize the chances that you can use it again?

To create your own image mask, open your favored image creation software and create an all-black image of the same dimensions as your image/video feed. Use predefined shapes or other drawing methods to create a white shape. Assuming that your webcam setup is such that you want to “keep” what’s in the center of your webcam recording, be sure to center the white shape that you create here. Save the final result as a .png, .jpg, or .bmp file so that OBS can use the image mask file.

Finally, the SOP.

SOP: Using an Image Mask to Create Non-rectangular Webcam Footage

Application Note:

If this entire SOP has already been applied in OBS on this computer, it should be saved as an OBS Scene Collection called Cutout Test. Select it from the menu to load these settings and apply this set-it-and-forget-it SOP by skipping to the “Record” section of this SOP. Otherwise, work through the instructions below.

This process creates a single non-rectangular webcam video source that can be resized and moved around a more complex scene setup, or used on its own. These steps assume that a new Scene Collection will be created for this SOP.

Prerequisites:

These instructions are for OBS Studio only. If you haven’t already downloaded a copy of OBS Studio, please do so now from https://obsproject.com/, and install it before proceeding.

These instructions assume that you have already predetermined your desired cutout shape and have saved the corresponding image mask as a .png, .jpg, or .bmp file. [Note: If you adopt this SOP as your own, it’s advisable to link to the appropriate cutout file or folder here so that you or others don’t end up re-making cutouts unnecessarily.]

For the purposes of this article, you may either download an image mask made by Gael LEVEL (https://imgur.com/a/dXoZS6J) or create one on your own now.

The Process:

• Open OBS
• Select the Desired Scene Collection
• Assuming that you already have another scene setup in OBS that you would like to retain (i.e., not overwrite)…
• Create a new Scene Collection in OBS by selecting New from the Scene Collection menu. For the purposes of this article, name it Cutout Test and select OK. This new Scene Collection is now opened for editing.
• Note that once a Scene Collection is opened for editing, you may Rename it using this same menu. If you decide that this Scene Collection is a “keeper” for a certain type of video production as opposed to just a Cutout Test, I recommend that you give it a descriptive name that reflects its purpose, and note that in your SOP.
• (Note that you’ll be able to switch back to other Scene Collections using the Scene Collections menu; your previous Scene Collection might be called Untitled.)
• Select the Scene
• If you just created a new Scene Collection, a single Scene is now available in the Scenes panel. Single-click on it to select it.
• Add the Webcam as the Video Capture Device
• In the Sources panel, use the plus sign to select Video Capture Device. In the pop-up for Create/Select Source, select to Create New and type in webcam so that your video capture has a descriptive name (i.e., the video capture device you’re going to use for this webcam SOP is the webcam). Make sure that “make source visible” is checked, and select OK. In the Properties window that comes up next, make sure that your webcam is selected as the Device and select OK. (I’m assuming no other device-related settings are required at this time. If they were, you would specify them here.)
• Apply the Image Mask Cutout to the Webcam Video
• Right-click on the webcam layer you just created and select Filters.
• Under Effect Filters, use the plus button to add an Image/Mask Blend filter. You can keep the default Filter name and press OK.
• Then set the following parameters for the filter:
• Type: Select Alpha Mask (Color Channel). The alpha channel of a color determines how opaque/transparent a color is.
• Path: To set the path, Browse to select your black & white cutout image.
• Color: This is set to white (#ffffff) by default, which is what we want here. This color indicates which color will be the transparent color that shows the video.
• Opacity: Set this to 100, which will make the white part of the cutout 100% transparent. If you set this to less than 100, the white cutout portion will get a filmy mask instead of the clear video feed I assume you want.
• Select Close. The cutout should now be applied to your webcam feed.
• Resizing and Moving Your Cutout Video
• If you want to resize your video, you can do so by clicking on and dragging any of the squares on the red outline around your webcam layer. Some distortion may occur, but the cutout will resize along with your webcam video.
• Record
• With the cutout applied and the video sized and placed as desired, you’re ready to start recording your non-rectangular webcam footage.
• In the Controls panel, click Start Recording.
• (Note that there is no audio Source accounted for by this SOP.)

Final Comments

To make this functional for your own purposes, you probably want to add some audio to your video. You can also change the black layer of the cutout to another color by adding a Color Source in the Sources panel, or replacing it with something more “fun” like a static image (add an Image source in the Sources panel of your Scene) or another video feed (add a Media Source in the Sources panel Scene). However you extend this scene, it’s important to remember that OBS scenes work in layers, meaning that your Color Source, Image, or Media Source should be listed below your webcam layer in order to prevent it from getting blocked because it has something “on top” of it.

If you try this out or have any questions, contact me directly or leave a comment below!

---

This article was originally published in February 2021 inside the vidwheel Creator Network, where I serve on the Experts Panel for all things standard operating procedures + video. If you have questions about this or some other video-related SOP, you can drop by my virtual open office hours 3-4pm every second Wednesday of the month. Contact me for this month’s Zoom link, or, if you’re in the Network, find the link in the Events section. If you're interested in creating your own professional-looking videos, and you want a mentor and a community, consider joining the vidwheel Creator Network.

If you want to talk SOPs in general, feel free to reach out to me directly here on LinkedIn or schedule some 1-on-1 Zoom time at Calendly (https://calendly.com/bloudesigns) for a no-obligation consultation.

Never miss a tip like this again - Subscribe to the Blou Designs newsletter at https://eepurl.com/gEL0NT, where articles like this will be featured in the ICYMI section.