How to mask a subject with detailed hair

Wow, it’s been a long time since I’ve blogged. I guess I’ve been busy! 🙂

When you design websites for a living, you get so busy doing other people’s websites and marketing, you forget to do your own. So I’m going to try to get back into blogging about design and web related issues or tips & tricks. Hopefully, I can keep my promise to myself and keep it up.

So recently, a friend of mine shared her new real estate website out on Facebook and I noticed her photo on the preview. First, she is fabulous and beautiful and the photo was particularly nice, but her hair looked odd on the preview. But that’s mostly because I deal with photos and cutouts all the time, so I’m particularly conscious of details like that. Anyways, I sent her a note asking if I could take a crack at it. She sent me her original photo and I got in and realized it’s been a while since I’ve done a cutout with detailed hair. I knew they had plugins that addressed masking hair and fur. So I looked to see if PhotoShop has improved their features and they have!

Back in the day, we would cutout to the best of our ability and then we’d edit out hair and sometimes recreate it to make it look natural. I have a friend who is a PhotoShop GOD, who showed me how he recreates things like dirt kicking up for a galloping horse!

The feature that does this in PhotoShop now is called Select and Mask. When you select the Magic wand tool, you’ll see it as a menu option. (Step 1, see Red Circled areas)

Once you’re in the Workspace area, you can make a general selection with the magic wand or lasso tools (can also be done before you get into the workspace) and then you can go in and use Refine Edge to get more detail. (Step 2)

Using the Refine Edge tool, brush over the parts where you want to suppress the background, but keep the foreground (hair). One other note, on the top right side of the Workspace, click on the image for a drop down where you can select the type of edit. In this case, we want Onion Skin. (Step 3) Hit the K key to see your edits, then toggle back with the O key. Keep refining until you’re happy with the edit. Use the Transparency Slider to see your results. You might have to inverse if you select the outside and need the inside, etc.

Then Click the OK button. It will give you a layer mask with the selection dropped out. You can still go back in and edit it or you can use the regular Quick Mask Tools to edit it. Then save as PSD to save your edits (I always save selections and layers) and I always Export>>Save for Web. If you save as a .png, the background will remain dropped out, but I saved as .jpg and it keeps the background white. (Unless you make it a certain color in PhotoShop)

Here is a link to the tutorial I used. Easy Peasy if you know what you’re doing: Click Here

My friend’s picture was a particularly challenging image to mask because she is blonde and has some highlights, so the white or lighter spots kept getting in the way. But I think the results turned out particularly nice. So with her permission, I’m posting it here.

You can see in the original below, the edges are rather sharp, but it is a lovely photo. The small photo at the top right is the actual size it was used on her site, as the signature photo (like a column sig) and at the small size, you don’t really notice all the details, but in the preview photo at the top left is where you really see it. The preview photo is not something you’d think about when doing it, but the problem with the web and digital is that photos are often displayed in ways you didn’t anticipate or even realize, so it’s best to cover all your bases and do quality work so it looks nice in every instance.

I usually work in 300dpi and then export it down to sizes for the web. You also cannot do this with low-res images. You need to have a high-res version to get this kind of detailed quality. The bottom left is the original photo with the background. I ended up adding another filter to soften the edges up which gives it a nice finished look. See how she sparkles! That’s her personality 🙂

Now, because I’m picky, I still see lots of flaws in my work, but as we always said in the newspaper business, it’s close enough. And when it prints, you won’t be able to see the little places where I missed parts of the background. It can be very delicate work.

Mary Beth is a writer and editor (now Realtor). So I hope she doesn’t mind that I’m telling you she did the cutout herself. She didn’t have PhotoShop, so she did it in Microsoft Paint. Really, it’s not a bad job considering she doesn’t do this for a living. But, the ‘After’ picture at bottom right is a little softer and the hair is more natural. This is really the difference between an amateur (no offense to MB) and a professional and you can often see similar results on Facebook since everyone now edits and posts photos, thinking just having a camera makes them a professional. (sorry, I digress) The photo was taken by a professional and has nice lighting, it was just the cutout that needed work. Now, MB looks as fab as she actually is!