By Matt Rae
W
hether you’re new to masking, or a seasoned professional, this guide will walk you through the different methods of masking available in Adobe XD.
What is masking?
Masking is a method of using a shape or object to hide, or cut off, portions of a shape or object below it. Similar to “cropping” an image to size, masking lets us show only the parts of an object that we want to show.
Using masks can help you add excitement to your designs, create fills of odd objects with images or gradients, and help you create the perception of depth in your designs. We’ll explore some examples of what can be done at the end of this article.
How masking works in Adobe XD
In Adobe XD there are a number of ways you can mask objects and images to create stunning results.
Simple image mask
To start let’s take a look at an image mask. When you drag an image into Adobe XD you can drop it into any vector shape to use that image as a background fill. When you do this you’re creating a mask with the image. That image will always maintain it’s aspect ratio regardless of how you manipulate the shape. Double clicking on that image (or pressing enter with the shape selected) will reveal a mask. By dragging the image around or resizing it within its container you can change how much of the image is shown in the shape.
Masking with object
For vector shapes, and images already on the canvas use the “Mask with object” feature in Adobe XD. We can recreate this simple image mask using a vector path and any image or vector on our canvas.
Let’s say for example we want to create a header image for a profile page. We have our rectangle that is blocking out that header area for us, and now we want to add an image. With our image positioned underneath the rectangle layer, we can select both layers and navigate to Object > Mask with object (Shift+CMD+M) to create the mask. You will now see the image is bound to the area of the rectangle. By double clicking on that shape we can open up the mask to edit the image’s position.
Masking with text
Masking text objects in Adobe XD can create unique effects in your designs. Whether you want to set the background fill to be an expansive mountain range, or a babbling brook, or you want to mask your text object with another vector shape, it’s all possible.
To mask a text object, it needs to first be converted to a vector path. To do this, we’ll select the text object, and navigate to Object > Path > Convert to Path, or hit CMD/CTRL + 8 on the keyboard. Your text is now a vector path which we can mask like other objects.
It is important to remember that the order of the selected objects determines which object acts as the mask, and which is being masked. The object on the bottom will be masked by the object on the top. So if you’d like to set your text as the mask to an image, ensure the text object is on top of the image layer, and then select your “Mask with object” (Shift+CMD+M) command to mask the image with the new text path.
Drawing masks
Creating a mask shape is very simple in Adobe XD. You can use any of the existing shapes in XD to create a rectangle, ellipse, triangle, or polygon. Simply click the shape on the left panel and draw it how you’d like. For more complex situations, the pen tool can be a powerful feature for creating complex masks. For instance, you can use the pen tool to trace elements in a photo to mask a very specific element of the photo.
Creative ways to use masks in Adobe XD
Masks can be used in many ways from cropping images, to creating layered graphics that can be manipulated with Auto-Animate.
Create depth by masking a horizon
Cover photos can be amazing visuals in your design, but have you tried spicing them up with masks to layer your title text between a foreground and background? To accomplish this effect, use the pen tool to outline the foreground element. Duplicate the photo, and select the top photo and the mask and “Mask with shape.” This will create one version of the image masked, and one with the background.
Add a text layer, and in the layers panel, reorder your layers so the text is below the masked layer, and the copied image.
Use masks with Auto-Animate
Did you know that mask paths can also be animated with Auto-Animate transitions? Take your prototyping to the next level using masks to morph a mask and create stellar results. Auto-Animate animates between two shapes of the same name.
To accomplish this effect, create a mask shape with the pen tool. Once you have the desired shape, add in some extra vector points along the line to ensure you have enough to create an interesting shape.
On your next artboard resize your mask to the end result by dragging points off of the canvas until your image fills the screen. To make it more interesting, drag points different distances off the artboard to create different motion effects.
Create a parallax effect on drag
Changing how an image is masked during an Auto-Animate drag can create immersive scroll transitions.
To accomplish this, create a repeat grid of images on your first artboard. Position the first card on the left of the artboard. Set your image masks. If you want your images to scroll vertically as you drag, then pin them to the top or bottom of the mask.
Duplicate the artboard and reposition the repeat grid so the image you wish to end the drag on is positioned on the left. Then click into each of your images and edit the mask to be at the other end of the movement (if you pinned to the top, move it to be pinned to the bottom of the mask).
Now as you drag you’ll get a smooth motion effect of the images moving within their containers.
Whether you’re creating simple rectangular image masks, or intricate pen masks around an object, Adobe XD makes masking simple and easy to use.
