Keys That Click - Minding your own design business and other observations

Posted in Design, on December 9th, 2009 by Carlos.

If you’re like me, you’ll often run into the need to close-crop a photo in order to remove an object from its background. Now if you took the article title to mean that I was revealing a magical masking method that didn’t involve the pen tool, well, I do apologize, because I still find the pen tool to be the best and most accurate method for masking an object in Photoshop (hair and other finicky items may be a different story, but that’s another article altogether). This tip focuses on how to fine-tune your masking in a much easier and quicker method than you previously may have been aware of.

Traditionally, these were the steps I would follow when masking an item:

1. Duplicate the original layer.
2. Create a retouching layer above the duplicate layer that would be used for any dust/scratch/defect removal.
3. Create a white background layer and a black background layer for use later below the duplicate layer.
4. Create a mask by using the Pen Tool to draw a path around the object.
5. Command-click the path in the Paths panel to make a selection around the object.
6. With the duplicate original layer selected in the Layers panel, Command-J to create a new layer from your selection.
7. Turn on/off the white and black background layers to see how your cutout looks against these backgrounds. The black background layer helps to ensure that you aren’t leaving too many white fuzzies around the edges of your mask, even though you will most likely leave it on a white background in the end. If in this step you notice that your path isn’t close enough or doesn’t look quite right on the white and/or black background, tweak the path you created in Step 4 and repeat steps 5-7.

This is what your Layers panel may look like when you’ve completed the above steps.

So you may be thinking, what’s so bad about this method? 7 steps? Not too shabby. What gets me though is the process involved in Step 7 where you may realize the path you’ve been working on isn’t all that great. Moving back and forth between the Paths and Layers panels while making blind adjustments to your path, only to find out you need to rework it can get frustrating very quickly, especially if you are working on a complex image that may have several areas that need tweaking.

The more human way to mask

What completely changed how I work with paths is my discovery of the Create Vector Mask option. To be honest, I’m not sure when it was introduced, or if it was there all along, but it wasn’t until CS3 that I actually started using it (for shame).

How do you reveal said option? With your path selected, and with the Pen Tool active, right click on the layer/group in your artboard, and select Create vector mask). What this does is make an editable vector path that is accessible in your Layers panel, reducing the switching between panels, and making it much easier to test your path against different backgrounds. It lets make you make live updates to your vector mask, without the need to repeat steps 5-7 as described above.

Basically just as how you may create a vector shape with a solid or gradient fill, you are creating a vector shape with one of your layers as the fill.

Here’s my revised workflow:

1. Duplicate the original layer.
2. Create a retouching layer above the duplicate layer that would be used for any dust/scratch/defect removal.
3. Group the layers created in steps 1 and 2.
4. Create a white background layer and a black background layer for use later below the duplicate layer.
5. Create a mask by using the Pen Tool to draw a path around the object.
6. With your path selected in the artboard area, right click with and choose Create Vector Mask with the Group created in Step 3 selected (pen tool must be active). See the image towards the end of the article to see an example of how the vector mask will appear in your Layers panel.
7. Turn on/off the white and black background layers to see how your cutout looks against these backgrounds. If in this step you notice that your path isn’t close enough or doesn’t look quite right on the white and/or black background, make changes to the vector mask associated with the Group created in step 3. Make sure you are making changes to the Vector path you created in the Layers panel, not the path in the Paths panel. In fact, once you make changes, your original path you created that still shows up in the Paths panel will be out of date and useless. Make sure you delete it.

So what the heck? Still 7 steps? What gives? Well yes there are still 7 steps, but you no longer have to worry about repeating any steps either. This eliminates the need to create selections from your path, cut it out from the background, and then test against your white/black layers. Instead of repeating steps, you just make adjustments to your path and immediately see the impact it has against the white and black backgrounds. To save even more time you can create an action that automates Steps 1-4 so its even faster to get started (in all fairness, this can be done with the original method as well).

This is what your Layers panel would look like after completing this method. A nice added bonus is by including your retouching layer in that group you will eliminate the possibility of ‘runaway’ retouches that may lay outside the bounds of the object.

Let me know if you have different methods of achieving these results in the comments!