Web designer logo web designer nepal freelance web developer nepal web developer nepal
Home Add Depth of Field to

Aug 21

Add Depth of Field to

Posted by: admin in Web

Tagged in: photoshop


The life of a designer is often complicated by customer supplied photos. Many times there's little you can do to save them. One rule you can always count on is. . .


One of the tricks I've always depended on is isolation. You can almost always add drama or focus the readers' attention by isolating the subject of an image. While there are many ways to do this, in some cases the best way is through depth of field.

In this image sent in by the client for a web page about an event, a guest speaker is quite helplessly lost in a field of people who were sitting behind the speakers podium. This not only makes the subject harder to pick out of the image, but makes the speaker less important than she should be.

I take the pen tool and create an outline around the subject to build a mask. You can do this with the Lasso or the Pen tool, either one gives basically the same results.

I happen to like the Pen tool better because it's much more flexible, more predictable, and more powerful. (If you've taken Sharon Steuer's "Zen of the Pen" Seminar, you'll know what I'm talking about.)

creating the path Once I've isolated the subject, I simply Select > Invert the selection, and apply some careful blurring. Be careful with the blurring because you want the viewer to still understand what the background is. So don't blow it away. This is probably the most natural looking technique for isolating the subject without calling attention to itself.

The reader sees the subject unhindered, and continues with the story rather than wondering what was done to the background.

Doing this depends on the software you're using, but it can be accomplished in virtually all the image editing packages available on the market today.

In Photoshop you can

* 1. Use the Lasso or pen tool to select the subject

* 2. Go Select > Invert Selection

* 3. Feather Selection (amount is dependant on the size and resolution of the image, in this case since it was low-rez for the web, we only feathered 2 to get rid of the hard edge.)
* 4. Hide Selection (cmd/h)
* 5. Filter > Blur or Filter > Gaussian Blur and then set the amount of blure you need to make your point.

outlining Presto, you've isolated the subject for greater interest, while softening those other faces so they won't be distracting or confusing. Note also that I included the microphone into that selection, and blurred it even more to take it out of visual recognition all together. The microphone is GONE and I didn't even have to cut it out!

At the same time, I again Select > Invert to make her the active selection and brightened her a bit.

Variations on this technique would be to darken/lighten the fore or background.

Here's a swell trick... while the background is selected, slide on up to the Hue/Saturation dialog, and de-saturate the background to grayscale. Wow! Now she'll really pop off the page.

Try it out and see if you don't get some rather good results.

... and thanks for reading!

For free updates from author: Nirmal Gyanwali enter your email address:

Delivered by FeedBurner


Publish Article


Nirmal: Freelance web designer and developer from nepalMy name is Nirmal, a Web Developer and Entrepreneur based on Sydney, Australia. I am well versed with Open source CMS and portal frameworks like Joomla, Drupal, Wordpress.

Popular Tags

Content View Hits : 12263242