Masking & cropping images in Adobe XD

Masking and Cropping Images in Adobe XD

Key Takeaways

• Create image masks with rectangles, circles, imported shapes, or custom paths.

• Keep the masking shape above the image and select both before applying the mask.

• Drag images straight into existing shapes for a quicker workflow.

• Replace an image without rebuilding its shape.

• Edit the image and the mask separately to get the crop you want.

Bring Your Image into Adobe XD

You can import an image through File > Import, or drag it into XD from Finder on a Mac or File Explorer on a PC. I usually just drag it in.

Sometimes an image arrives at a gigantic size. That is fine. Hold Shift while dragging a corner to scale it proportionally. Adding Option on a Mac or Alt on a PC lets you scale from the centre.

If you are working on a web design, you do not need to prepare the final web-sized image before bringing it into XD. Bring in the full-quality original and scale it to suit your layout. The appropriate output size and quality can be handled when you export.

Create a Mask with a Shape

The standard masking method starts with two separate objects: your image and the shape you want to crop it into.

1. Place your image on the canvas.

2. Draw a shape over it. A rectangle is a simple place to start.

3. Make sure the shape is above the image in the stacking order. If necessary, right-click the shape and choose Bring to Front.

4. Select both the image and the shape.

5. Choose Object > Mask with Shape.

Hey presto! The image is now visible only within the shape. A rectangle gives you a rectangular crop; a circle gives you a circular one.

If you use masks regularly, this shortcut is worth remembering:

• Mac: Command + Shift + M

• PC: Ctrl + Shift + M

Use Imported Shapes or Draw Your Own

You are not limited to the basic shape tools. An imported logo or icon can also act as the mask. Place it above the image, select both, and apply the same command.

For something a little more unusual, draw your own shape with the Pen tool:

• Click once to create a corner point.

• Click and drag to create a curve.

• Finish your shape, then select it together with the image and apply the mask.

Your first custom shape does not have to be a masterpiece. Even a slightly odd shape is enough to see how the technique works.

If the Mask Does Not Work

Before changing anything complicated, check the two essentials: both objects must be selected, and the masking shape must be on top. It is surprisingly easy to miss one of the objects when making the selection.

The Quicker Method: Drag an Image into an Existing Shape

Often, you already have shapes in your layout. They might be coloured placeholders waiting for photographs. There is no need to import an image separately and repeat the full masking process for each one.

1. Open the folder containing your images.

2. Arrange Finder or File Explorer so you can access it alongside XD.

3. Drag an image directly onto the existing shape.

4. Release it over the shape to fill it.

XD fits the image into the shape, scaling it to fill the available space. This is particularly handy for filling small image placeholders in a page or mobile layout.

Replace an Image by Dropping Another One onto It

Need a different photograph? Drag the replacement image directly over the existing image-filled shape. XD switches the image while keeping the shape.

For example, you can replace a leaf photograph inside a circular crop with a photograph of a tea press. The circle stays in place; only the content changes.

Adjust the Image Inside the Mask

Creating the mask is only the first part. You will often want a different bit of the photograph to show through.

1. Double-click the masked image to access its contents.

2. Click and drag the image to reposition it within the mask.

3. Move it until the detail you want sits inside the visible area.

4. Click outside the mask when you are finished.

Moving the image changes the crop without changing the mask shape. With the tea press photograph, for instance, you can shift the image so the tea-filled glass is the focus of the circle rather than the top of the press.

Scale the Image for a Closer Crop

If repositioning alone is not enough, double-click to access the image, hold Shift, and drag a corner to resize it proportionally.

Scaling the image up shows a closer view of its details within the same shape. Reposition it as needed, then click outside to return to the finished crop. This works for small image-filled placeholders too.

Edit the Mask Shape Itself

Sometimes the photograph is positioned correctly, but the boundary needs changing. That is a mask edit rather than an image edit.

Double-click to enter the mask, then select the shape at its edge. You can adjust its dimensions or squash it into a different outline. To change the path itself, double-click the shape to enter object editing mode and adjust its points.

A circular crop can become a much more unusual curved shape. Have a play with it. The important distinction is knowing which part you are changing:

• Edit the image to change the position or scale of the photograph inside the crop.

• Edit the mask to change the boundary through which the photograph appears.

Those are the two main workflows: combine an image and a shape with Mask with Shape, or drag an image into a shape that already exists. Once it is in place, double-click to refine the result.

Key Terms

Mask

A shape that controls which part of an image is visible. In the Mask with Shape workflow, it must sit above the image before you apply the command.

Crop

The visible portion of an image within a boundary. Repositioning or scaling the image inside a mask changes that portion.

Stacking order

The front-to-back arrangement of objects on the canvas. Bring to Front places the intended masking shape above the image.

Object editing mode

The editing state used to adjust a shape’s path and points. It lets you reshape the mask beyond simply resizing it.

FAQs

What is the shortcut for Mask with Shape in Adobe XD?

Use Command + Shift + M on a Mac or Ctrl + Shift + M on a PC. Select both the image and the shape first, with the shape above the image.

Can I use a custom shape to mask an image?

Yes. You can use a shape drawn with the Pen tool or an imported shape, such as a logo or icon. The selection and stacking-order requirements are the same as for a rectangle or circle.

How do I change the image position without changing the mask?

Double-click the masked image, then drag the image inside it to adjust its position. You can also hold Shift and drag a corner to scale it proportionally. Click outside when you have the crop you want.