Although most videos we record on our devices are rectangle⁠—marker images and AR experiences don’t have to be. Our clients often create badges, stickers, drink coasters, packaging and other products that make irregularly shaped markers. If you’ve got a project like that, you can use an Alpha Mask to give the same shape to your AR video. This guide will show you how to quickly create Alpha Masks for your AR videos using the free cross-platform image editor, GIMP.

LearnWhat is an Alpha Mask for AR videos?

Alpha Mask is a feature that enables creators to mask specific parts of a video and select the transparency for the area that they want to appear in augmented reality.

How to use Alpha Mask in Overly AR Creator?

You can select an “Alpha Mask” feature in Overly AR Creator once you upload a video. However, you must upload a mask too for the function to work. Follow this guide to create a mask and set up a project with irregularly-shaped AR videos. 

How to create an alpha mask for AR videos using GIMP?

To showcase the creation of an alpha mask, I’ve selected an animation project developed by one of our customers. The animation had to appear on a marker that was a large-format triangle.

 

A standard rectangle video was not an option, so the client had to use an Alpha Mask to hide part of the video that was just black. An image on the left shows the original shape of the marker image and animation. You can see a person scanning the final piece at an exhibition on the right.

Step 1: Prepare your video and marker image

To ensure your mask overlays your AR marker and video correctly, check that all files have the same proportions as the marker image. Pixels can be different, but if the marker’s ratios are 6:19, then the video and Alpha Mask should have the same proportions.

Overly AR Creator doesn’t support PNG files as marker images. Therefore, double-check if your marker image is a JPG file. If not, open the file in GIMP and select “Export As” JPG. Similarly, ensure that the video you upload is formatted as .MP4.

Step 2: Set up your Alpha Mask project in Gimp

First, you should open the marker image in GIMP and duplicate the source file, so you don’t accidentally override your original marker image. Click “Save As”, but name the file Alpha Mask or however you prefer to differentiate the files.

Step 3: Add transparency to your project

Now you’ve got the Alpha Mask file in front of you. The first thing you need to do is add a transparent background layer to your project. This is necessary because you will be selecting areas that need to be masked and ones that should remain transparent. Go to Layer – > Transparency – > Add Alpha Channel.

Step 4: Remove the area that should be masked

Use the Free Select tool (or similar) to choose the area you want to hide when bringing the AR experience to life. I am selecting the triangle section on the left-hand side in this example. Once selected, I press Enter to confirm my selection. Then I press Delete. The transparent area is now represented with gray square tex

Step 5: Remove the marker image from the view

Now we use the selection tools to choose the area where you want the AR video to appear. In this example, it is the triangle that holds on to a drawing. Once selected, I press Enter and delete the content from this area.

Step 6: Create a white overlay for the marker

Almost there! Keeping the deleted area selected, move on to the “Bucket Fill” function. Choose the white color and fill the marker area. In the final photo, we see that the image has a see-through area and an area with white background. The transparent side will be masked, whereas the area in white will hold on to AR content.

Step 7: Export the Alpha Mask file as PNG

Lastly, export the Alpha Mask file as a PNG file through the “Export as” function.

Step 8: Ensure you have all the necessary assets

Now head to Overly AR Creator to put all your assets together. Below you see the three files you need.

Step 9: Create a standard video project on Overly AR Creator

 Upload your marker image and video to Overly AR Creator. Position the video over the marker image as needed.

Step 10: Add “Alpha Mask” feature and publish the project

Now select “Alpha Mask” within the menu on the left hand side and hit Publish. 

Step 11: Test the marker and AR experience before print

As you ensured that all assets (video, marker and alpha mask) are all of the same proportions, you do not need to do anything else with the Alpha Mask. The mask will attach itself to your selected video in full size. Scan the below marker to view how the experience I created turned out. And be sure to view your project before printing the marker.

Steps

1. Get Overly app for mobile

Icon

2. Scan this image with the Overly app

3. Experience magic

Scan this image with the free Overly app
Arrow

Hopefully, this guide was helpful, but do contact us via comments or chat if you have questions about using Alpha Mask or any other of Overly AR Creator’s features.

Share this story
Share this story
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You may also like

Shopify augmented reality unlocks the potential of your e-commerce store.

Here's why you shouldn’t create your own marker-based AR app

How to create marker-based augmented reality content?