How To Make Mountain Mask Background For Card Making

W
hether you're new to masking, or a seasoned professional, this guide will walk y'all through the dissimilar 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 beneath it. Similar to "cropping" an image to size, masking lets united states evidence simply the parts of an object that we want to show.

Using masks can help yous 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. Nosotros'll explore some examples of what tin be washed at the finish of this commodity.

How masking works in Adobe XD

In Adobe XD in that location are a number of ways you tin mask objects and images to create stunning results.

Unproblematic prototype mask

To start allow's have a expect at an image mask. When you lot elevate an prototype into Adobe XD you lot tin drib it into any vector shape to apply that epitome as a background fill. When you do this y'all're creating a mask with the image. That image will always maintain it'due south aspect ratio regardless of how you dispense the shape. Double clicking on that image (or pressing enter with the shape selected) volition reveal a mask. Past dragging the paradigm around or resizing it within its container y'all 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 epitome mask using a vector path and any image or vector on our canvas.

Permit's say for example we want to create a header image for a profile page. We take our rectangle that is blocking out that header area for us, and now we desire to add an image. With our prototype positioned underneath the rectangle layer, nosotros can select both layers and navigate to Object > Mask with object (Shift+CMD+M) to create the mask. You will at present see the image is leap to the surface area of the rectangle. Past double clicking on that shape we tin open up upwardly the mask to edit the image'southward position.

Masking with text

Masking text objects in Adobe XD can create unique effects in your designs. Whether yous want to gear up the background fill to be an expansive mount range, or a babbling brook, or y'all desire to mask your text object with another vector shape, it'southward 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.

Information technology is of import to remember that the order of the selected objects determines which object acts every bit the mask, and which is existence masked. The object on the bottom will exist masked by the object on the summit. And so if you'd like to set your text as the mask to an image, ensure the text object is on top of the prototype layer, and and so select your "Mask with object" (Shift+CMD+Yard) command to mask the image with the new text path.

Cartoon masks

Creating a mask shape is very simple in Adobe XD. Y'all can use whatever of the existing shapes in XD to create a rectangle, ellipse, triangle, or polygon. Just click the shape on the left panel and draw information technology how you'd like. For more complex situations, the pen tool can be a powerful characteristic for creating circuitous masks. For example, you lot can utilize the pen tool to trace elements in a photo to mask a very specific element of the photo.

Creative ways to utilise masks in Adobe XD

Masks can be used in many ways from cropping images, to creating layered graphics that tin can be manipulated with Auto-Animate.

Create depth by masking a horizon

Cover photos can be amazing visuals in your design, but take you lot 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. Indistinguishable the photo, and select the meridian photograph and the mask and "Mask with shape." This will create ane version of the image masked, and ane 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-Breathing

Did you know that mask paths tin can also be animated with Automobile-Animate transitions? Take your prototyping to the next level using masks to morph a mask and create stellar results. Motorcar-Animate animates between two shapes of the same name.

To reach this effect, create a mask shape with the pen tool. One time you have the desired shape, add together in some extra vector points forth the line to ensure you accept enough to create an interesting shape.

On your next artboard resize your mask to the finish result past dragging points off of the canvas until your epitome fills the screen. To make it more than interesting, elevate points different distances off the artboard to create dissimilar move furnishings.

Create a parallax result on drag

Changing how an image is masked during an Motorcar-Animate elevate tin can create immersive coil transitions.

To achieve this, create a repeat filigree of images on your first artboard. Position the first carte on the left of the artboard. Ready your paradigm masks. If you desire your images to scroll vertically every bit you lot elevate, then pin them to the meridian or bottom of the mask.

Duplicate the artboard and reposition the repeat grid so the image you wish to stop the elevate on is positioned on the left. And so click into each of your images and edit the mask to exist at the other end of the movement (if y'all pinned to the top, move it to exist pinned to the bottom of the mask).

Now as you lot drag you'll go a smooth motion effect of the images moving inside their containers.

Whether yous're creating simple rectangular paradigm masks, or intricate pen masks effectually an object, Adobe XD makes masking unproblematic and easy to utilize.