Importing & Cropping Photos

Topics covered in this Adobe XD tutorial:

Importing a photo as an image fill (crop a photo), Rounding corners

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to insert photos and crop them.

Importing a Photo as an Image Fill (Cropping a Photo)

1. In Adobe XD, go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).
2. Navigate into Desktop > Class Files > Adobe XD Class > Pulse and double–click on Home Page - Ready for Photos.xd to open it.
3. Zoom to 100% by hitting Cmd–1 (Mac) or Ctrl–1 (Windows).
4. Notice there are three dark gray rectangles. We want to put photos into these boxes. Make sure you can see the entire top dark gray box (behind New Autumn Attire), because this is where we’ll put the first photo.
5. To create an image fill we must drag and drop an image onto the rectangle from the Desktop. Keep the file open and visible in XD, but switch to the Desktop (the Finder on Mac or Windows Explorer on Windows).
6. Navigate into Desktop > Class Files > Adobe XD Class > Pulse > Pulse Photos.
7. Make sure you can see the Desktop window and the top dark gray box (behind New Autumn Attire) at the same time.

8. As shown below, drag feature-jpeg.jpg onto the top dark gray box (behind New Autumn Attire) and release when the box highlights blue.

   

9. Keep the window open on your Desktop, but switch back to XD.
10. Grab any one of the corner resize handles and drag around to see how the image scales to always fill the box.

11. To cancel the resize hit Esc or if you already let go, undo it by hitting Cmd–Z (Mac) or Ctrl–Z (Windows).

    Image fills act similar to a background image in a webpage that’s set to cover the area. It scales up or down to fill the area, and it’s center aligned (vertically and horizontally) so the edges may be cropped.

12. Let’s make the photo smaller to add some white space around it.

    Hold Option (Mac) or Alt (Windows) and drag the left-middle resize handle in slightly until it snaps to the layout grid and the semi-transparent white box behind New Autumn Attire. By holding this keystroke it will pull in both the left and right sides at once!

13. We added 15 pixels of space on the left/right. Let’s move it down using keystrokes. With the image selected, press Shift–Down Arrow to move it down 10 pixels.
14. Press the Down Arrow 5 more times
15. To verify that it’s now 15 pixels away from the navbar, keep the image selected.
16. Hold Option (Mac) or Alt (Windows) and hover over the navbar. The distance between the two elements should be displayed in the space between them. Cool!
17. Drag up the bottom-middle handle so it snaps to the bottom of the semi-transparent white box behind New Autumn Attire.
18. Let’s add a drop shadow to the photo. If the photo is no longer selected, click on it to select it.
19. In the Property Inspector check on Shadow.
20. Click on the word Shadow to open the color picker.
21. To the far right of Hex, set transparency to 50% to make the shadow darker.
22. Click on the word Shadow again to close the color picker.
23. In the Property Inspector below Shadow, set B (blur) to 15 to soften the shadow.

24. We changed our mind and like the photo better without a shadow. In the Property Inspector uncheck Shadow to turn it off.

    NOTE: If we bring the shadow back later it will remember the settings we used.

25. Let’s round the corners of the photo. With the image selected, notice there are dots inside each of the four corners (not the resize handles at the very corner). As shown below, drag any of those dots towards the middle of the photo.

    

26. All four corners should now be rounded. In the Property Inspector, above Fill is the corner radius amount (as shown below). Let’s change it to a specific value. Set it to 15 and hit Return (Mac) or Enter (Windows) to apply it.

    

Positioning Photos within a Shape & Custom Rounded Corners

There are two more dark gray rectangles that we want to fill with photos (for Women and Men). Instead of importing the photos via drag and drop, let’s see a second way.

1. Go to File > Import.
2. Navigate into Desktop > Class Files > Adobe XD Class > Pulse > Pulse Photos and double–click on woman-side-facing.jpg to import it.
3. With the photo still selected, cut it by hitting Cmd–X (Mac) or Ctrl–X (Windows).
4. Click on the dark gray box (for Women).
5. To put the photo into the shape, choose Edit > Paste Appearance.
6. The photo should now only be visible within the rectangle. Let’s size and position it better inside. Double–click on the photo to see the entire image.

7. Resize the photo (you do not need to hold Shift) and drag it into position like the example below. (Click off the image to see the final crop.)

   

8. Click in an empty part of the artboard to make sure nothing is selected.
9. Let’s round the corners of this photo. Click once on the Women photo to select it.
10. In the Property Inspector, above Fill set the Corner Radius to 15 and hit Return (Mac) or Enter (Windows) to apply it.

11. Let’s remove the rounding from the two corners on the left side (while leaving the rounding on the two corners on the right side).

    Hold Option (Mac) or Alt (Windows), grab the corner radius dot inside the top-left corner and drag it toward the corner until it’s no longer rounded.

12. Repeat the process for the bottom-left corner. Hold Option (Mac) or Alt (Windows), grab the corner radius dot inside the bottom-left corner and drag it toward the corner until it’s no longer rounded.
13. Click in an empty part of the artboard to see the final result. Cool!

14. Save the file.

Updating Photos

Now that we see this photo in our layout, we don’t like how both women are looking to the left. Let’s swap out the bottom photo with a different photo.

1. Select the bottom photo (for Women).
2. Ctrl–click (Mac) or Right–click (Windows) on the Women photo and choose Replace Image.
3. Navigate into Desktop > Class Files > Adobe XD Class > Pulse > Pulse Photos and double–click on woman-front-view.jpg to choose it.
4. If needed, adjust the size and position of the new photo (double–click on the photo so you can adjust the photo’s size/position).

5. When done, click on an empty part of the artboard to deselect

   TIP: You can also update a photo by dragging and dropping a new photo from your Desktop onto the photo in XD.

Optional Bonus: More Practice

1. There’s one more photo to import and crop (for Men). Click on an empty part of the artboard to make sure nothing is selected.
2. Go to File > Import.
3. Navigate into Desktop > Class Files > Adobe XD Class > Pulse > Pulse Photos and double–click on man.jpg to import it.
4. With the photo still selected, cut it by hitting Cmd–X (Mac) or Ctrl–X (Windows).
5. Click on the dark gray box (for Men).
6. To put the photo into the shape, choose Edit > Paste Appearance.
7. The photo should now only be visible within the rectangle. Let’s size and position it better. Double–click on the photo to see the entire image.

8. Resize the photo and drag it into position so it looks like the example below:

   

9. Click in an empty part of the artboard to make sure nothing is selected.
10. Let’s round the corners of this photo so it looks like a mirror of the Women photo next to it. Click once on the Men photo to select it.
11. In the Property Inspector, above Fill click the Different radius for each corner button to reveal four amounts (one for each corner).

12. Set the four corner radius amounts to 15 0 0 15 and hit Return (Mac) or Enter (Windows) to apply it.

    NOTE: The amounts start at the top-left corner and go clockwise. In order they are: top-left, top-right, bottom-right, bottom-left

13. Click on an empty part of the artboard to deselect and see the final layout.

14. Save the file and close it.