Inserting & Masking Photos

Free Sketch Tutorial

Delve into this comprehensive Sketch tutorial, covering topics like importing photos, cropping a photo (masking), and customizing the amount of rounding for each corner, complete with step-by-step instructions and helpful images.

This exercise is excerpted from Noble Desktop’s past web design training materials and is compatible with Sketch updates through 2021. Noble Desktop now teaches Figma as the primary tool for web and UX & UI design. To learn current skills in web design, check out our Figma Bootcamp and graphic design classes in NYC and live online.

Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.

Topics covered in this Sketch tutorial:

Importing photos, Cropping a photo (masking), Customizing the Amount of Rounding for Each Corner

Graphic Design Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.

Exercise Preview

preview masking photos

Exercise Overview

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

Importing Photos

  1. In Sketch, go to File > Open Local Document.
  2. Navigate into Desktop > Class Files > Sketch Class > NYC and double–click on About Page - Ready for Photos.sketch to open it.

    This is a more developed version of the desktop design you’ve been working on in previous exercises. Let’s place an image into the empty space at the top.

  3. Choose View > Zoom To > Fit Canvas to see the entire artboard.
  4. In the Toolbar at the top, click the Insert button insert button and select Image.
  5. Navigate into Desktop > Class Files > Sketch Class > NYC > NYC Photos and double–click on cab.jpg to choose it.
  6. Let’s scale down the photo. In the Inspector on the right, set W (Width) to 1440 (the width of the artboard) and hit Return.
  7. Drag the image into position at the artboard’s top-left corner.
  8. The image is covering the NEW YORK CITY heading. Choose Arrange > Send to Back.
  9. Select the large NEW YORK CITY heading.
  10. In the Inspector, to the right of Paragraph, click on the color box color selector and choose white.
  11. Hit Esc to close the color picker.
  12. Let’s add some photos at the bottom of the artboard. We could use Insert > Image, but this time let’s use drag and drop instead. Keep Sketch open and switch to the Finder (your Desktop).
  13. Arrange the Finder window so you can see it and the bottom of the Sketch artboard.
  14. Navigate to Desktop > Class Files > Sketch Class > NYC > NYC Photos.
  15. Drag bridge.psd onto the empty bottom of the Sketch artboard and see that it imports.

    NOTE: Sketch imports a Photoshop file (.psd) as a flattened pixel-based image.

    TIP: Drag and drop also works with multiple photos/graphics!

  16. If you can’t see the whole photo, move it on the artboard so you can see the entire photo (exact position does not matter yet).

Cropping a Photo (Masking)

  1. We want to be able to see the left half of the artboard while drawing a rectangle we’ll use to crop the phot. Move the photo over to the right half, and do not worry if it’s not completely visible.
  2. Show the layout grid by hitting Ctrl–L.
  3. In the Toolbar, click the Insert button insert button and select Shape > Rectangle.
  4. We want 3 photos side-by-side. To evenly distribute them across the 12-column grid, let’s make the shape span 4 columns. As shown below, drag a rounded rectangle that is 4 columns wide, and approximately 250px tall:

    nyc create rounded rectangle

  5. To see things better, hit Ctrl–L to hide the layout.
  6. We’d like to put our photo into a rounded rectangle. In the Inspector, drag the Corners slider to adjust the corner roundness.

    • Hover over the rectangle on the artboard and white dots will appear inside each corner. Drag on any of those dots to change the corner roundness.
    • When done experimenting, in the inspector set Corners to 45.

    NOTE: As you drag one of the white corner dots, you can hold Cmd to change only that one corner! Each corner can a different amount of roundness.

  7. Let’s put the bridge photo into the rounded rectangle. Drag the photo so it’s behind the rounded rectangle (we imported the photo first, so it’s behind the shape).
  8. As shown below, drag any of the photo’s corner handles to scale it down so it’s a little bigger than the rounded rectangle (you do NOT need to hold Shift to constrain the photo’s proportions):

    nyc scale bridge photo

  9. Drag a selection box over both elements (or click on one, then Shift–click the other).
  10. To create the mask:

    • In macOS Big Sur & later: In the Toolbar, click the Tools button tools button and then choose Mask.
    • Prior to macOS Big Sur: In the Toolbar, click the Mask button mask button old.

    NOTE: It does not matter whether the photo is in front or back. If you prefer to use a menu to create the mask, you can choose Layer > Mask > Mask with Selected Shape.

  11. Click on an empty part of the artboard to deselect.
  12. To fine-tune the photo and mask:

    • Double–click the photo to select it. Now you can scale or move it within the mask.
    • To edit the mask, in the Sidebar select Mask. Now you can change the height or Corners (in the Inspector), but keep the current width (so it matches the grid).

    TIP: Once the photo inside a mask group is selected, you can switch back and forth between the photo and its mask by pressing Tab.

  13. When done, click on an empty part of the artboard to deselect.
  14. We next need 2 more photos with the same size and shape. Because we’ve already masked and sized this photo, let’s duplicate it and then swap in the new photos. Before we do this, hit Ctrl–L to show the columns.
  15. As shown below, hold Option–Shift and drag a copy to the right, releasing the mouse when its left edge aligns with the 5th column:

    nyc drag to duplicate bridge photo

    NOTE: Option creates the copy. Shift ensures it moves in a straight line.

  16. With the 2nd photo still selected, hit Cmd–D (Edit > Duplicate) to repeat the transform. The 3rd photo should end up horizontally aligned with the other 2 photos and span the remaining columns.
  17. Hit Ctrl–L to hide the layout grid.
  18. Let’s swap out the photos. Double–click on the 2nd photo to select it.
  19. Right–click (or Control–click) on the photo and choose Replace Image.
  20. If you’re not already in the NYC Photos folder, navigate into Desktop > Class Files > Sketch Class > NYC > NYC Photos.
  21. Double–click on skyline.tif (Notice that Sketch supports importing TIFF files.)
  22. With the skyline photo still selected, adjust the position and scale within the rounded rectangle.
  23. Repeat the process on the 3rd photo:

    • Double–click on the 3rd photo.
    • Right–click (or Control–click) on the photo and choose Replace Image.
    • In the NYC Photos folder, double–click on Central Park.jpg.
    • Adjust the position and scale as needed.

Customizing the Amount of Rounding for Each Corner

Now that we have all the photos, let’s change the roundness of their corners.

  1. In the Sidebar, expand the 3 bridge groups.
  2. Under the top bridge group, select Mask.
  3. Hold Command and click on the other 2 Mask layers, so all 3 are selected.
  4. In the Inspector, drag the Corners slider to see all the masks update live. Cool!
  5. Web developers can code different amounts of rounding for each corner. We can do this in Sketch too. In the Inspector’s Corners section, to right of the Rounded menu click the individual corners button individual corners
  6. To the right of Corners, there are now 4 boxes (one for each corner). Set them to:

    custom rounded corner amounts

  7. Notice that the top-left and bottom-right corners are now rounded.

    Feel free to try other values, so as making the top 2 values 0 and the bottom 2 values 30, so the top it straight and the bottom is rounded.

Optional Bonus: Renaming Layers

  1. To keep the file organized, let’s name the layers appropriately. In the Sidebar, make sure all the bridge groups are still expanded.
  2. Double–click on the bridge copy 2 group to make the name editable.
  3. Name it central-park and hit Tab to select the name of the photo layer within the group.
  4. Rename the photo to photo.
  5. On the artboard, select the middle skyline photo.
  6. In the Sidebar, notice the bridge copy group should be selected.
  7. Hit Cmd–R to rename it.
  8. Type in skyline and hit Tab to jump to the photo within that group.
  9. Rename the photo to photo.
  10. Close all the groups in the Sidebar to make it less cluttered.
  11. Hit Cmd–S to save the file.
  12. Close the file.

How to Remove an Unwanted Mask

  1. In the Sidebar, the expand the group containing the mask and select the Mask shape.
  2. Press the Delete key to remove the mask.
  3. The photo is still in a group that’s no longer needed. In the Sidebar, select that group.
  4. Hit Cmd–Shift–G to ungroup it.

    NOTE: This can also be done by choosing Arrange > Ungroup or clicking the Ungroup button ungroup button in the Toolbar.

How to Learn Web Design

Master web design with hands-on training. Web design is the creative process of building functional, attractive websites with tools like HTML/CSS, JavaScript, WordPress, and Figma and an understanding of user interface (UI) design principles.

Yelp Facebook LinkedIn YouTube Twitter Instagram