Masking refers to hiding parts of a layer, usually a video or image.
Masks are specially useful for giving custom frames or shapes to dynamically loaded images, such as users avatars or posts media, where you don't have the possibility of editing those images. It is also very useful to give your own images a custom look, without having to edit the original images themselves.
You will find the Mask setting in the Appearance property of several Building Blocks:
Area Mask
Only available for Containers, this type of Mask will hide every part of all Container's descendants that overflow the boundaries of the Container itself.
Area mask: off
Area mask: on
Gradient Mask
This type of Mask uses a gradient as masking layer.
Different to the background gradients, the mask gradient control won't let you change colors, but only the opacity of each step of the gradient. This is because colors won't do any difference: the important thing is always the opacity.
Gradient mask applied to an Image element
Image Mask
This type of mask uses an image as masking layer. More specifically: it uses the image's alpha channel.
The mask image will work as long as it has transparent areas. Opaque pixels of the image will become the visible parts of your element, and transparent pixels will be hidden.
You can configure the same things regarding the mask image as you can with the background images: covering mode, tiling and position.
Image mask applied to an Image element
Use Cases
Area Mask
Area Mask
In this example we added a mask to a Container and use the mask to hide portions of the background.
You can edit an area mask to subtract from the masked region.
You can also define the shape of your mask changing the Container properties, like width, height, borders, etc.
Gradiente Mask
Gradiente Mask
In this example, we used a gradient mask to help blend one image into another.
The depth and opacity of the blending may be adjusted as well as the blending mode of the layer.
Image Mask
Image Mask
Typical logos have a static, solid fill and are created to sit on top of your footage.
In the example above, image masks allow you to play footage within the outline of your logo.
You can also create a shape image mask that alters or interacts with an existing clip in your Graphics to put the name of a contestant, host, among others, as in this use case.