Smooth Selections in Photoshop

In web design we often talk about typography, white space, and layouts but sometimes we need to make graphics. Today we’re going to discuss non-destructive editing and smoothing a selection after its been applied. 

Imagine you need to make a graphic that is a collage of cutout images for a “back to school” campaign. You need images of pencils, pens, people, and notebooks. You have a high-res image of a pen you have to use but there is a background. Time to cut it out. So you grab your magic wand tool, select the background, and delete it right? You could but now you have destructively edited your image. The background is gone but you might need it back for some reason or maybe your selection was sloppy and you’ve deleted part of the pen.

Image Asset Download: https://unsplash.com/photos/S8hIymyo7ts

Layer Masks

Layer masks are used to remove parts of an image in a non-destructive manner. Instead of using the eraser tool, you apply a mask, and paint on it with a brush in black or white. Black erases and white reveals. 

  1. To apply a mask select your layer from the layer menu and hit the “Add Layer Mask” button (highlighted in red) at the bottom of the layers menu.


     

2. Your layer will now have the mask applied. This default mask type will not hide any pixels until you apply black colour to the mask. 

 

        

 

3. Select the background of the image with the Magic Wand or Quick Selection Tool.


4. Click the Layer Mask on your layer and apply black paint with the Paintbrush or Paint Bucket tool to hide the background. 

 


 

The pen is now isolated from the background and it looks pretty good!
 


 

However, once you put it on a dark background you begin to notice the rough edges and it doesn’t look very clean or professional. 


 

Magic Sliders

To solve this comes the magic sliders. Make sure your layer mask is still selected and in the Properties menu choose “Select and Mask”.


You will now see the magic sliders! You may think “oh cool, a smooth slider”. But that’s not what we’re here for. We’re going to use

  • Feather

  • Contrast 

  • Shift Edge

  1. Adjust Feather till you see the edge begin to soften. For this selection I’ve stopped at 7px.


     

  2. Adjust Contrast until you see the edge begin to sharpen. For this selection I’ve stopped at 50%.


     

  3. Now adjust “Shift Edge” to the left and you will see the mask shift further into the object smoothing out those rough edges.

Check out the before and after. The edges are now smooth and ready to be used in your design.


You now have a perfectly isolated asset that you can use on any background or in a collage. The best part is the background can always be brought back or you can adjust your selection because we did this non-destructively. 

Read Next
From zero UI to omnichannel: redefining next-gen UI
User Experience

From Zero UI to Omnichannel: Redefining Next-Gen UI

07 November, 2019|6 min
Get in touch and let’s get started.

We are a full service digital consultancy with experience and capacity to meet the needs of even the largest most complex of organizations in the world. Our services portfolio enables us to offer clients the best of experiences when working with our teams so as to make sure we keep the focus on their needs, customers and delivering tangible value to the business. End to end services; endless ideas. 

Three easy ways to get in touch. Complete the form to request a consultation, email us your inquiry, specs and/or RFP to contact@appnovation.com OR call one of our many, global office locations and tell us how we can help.