Here we are with another post and video for Adobe XD, this time we will talk about creating masks. While using Adobe XD, your mask can sometimes unmask itself, or you can create a new mask from scratch. Using keyboard shortcuts, shapes, and other methods are available for achieving this.
A wireframe was created in XD and we then dragged and dropped it into our mockup in one of our past videos. That’s one method for masking.
Using Shapes
Let’s say we want to place a picture inside a shape. Use any of the geometric shapes or the pen tool to draw a shape. Drag and drop an image inside the shape. You can manipulate the photo’s position or size by double-clicking on it.
Using Keyboard Shortcuts or Through the Menu
Let’s say I have an image that I would like to mask with a shape. From the toolbar, let me create a shape. You can select both an image and a shape, and use the keyboard shortcut Command Shift M on a Mac, or Control Shift M on a PC. Choose Object and Mask with Shape from the menu. You can also right-click the mouse. Scroll down until you see Mask with Shape.
Using Photoshop or other photo editing software is another trick.
Using Photoshop will give your mockups a different look.
In this photo, I want the hand and the phone to be cut out of the background. Using the Quick Selection tool, I click on Select Subject and Add Mask.
Make sure everything is selected by zooming in. Photoshop missed a little bit of the sides here. Zoom in and use the brush tool to paint back in that area. Then I go to Image, Trim so I can get rid of all the transparent pixels, and then File, Save As a transparent.png.
Because I used Photoshop to mask out the background, I can then drag and drop this image into my XD file. I can add a textured or coloured background
So that’s how a few different ways in Adobe XD to mask your design.