Give your photo stunning depth! (photo edit tutorial)

I know that lately I’ve been blogging a lot about… well blogging actually. However, I’m interested in covering as many topics as possible that are relevant and helpful to the design/webmaster community. This tutorial will be the first of hopefully many completely original photoshop tutorials that show some of my personal techniques for designing.
This tutorial will show you how to give fantastic depth to your regular flat photos in order to really liven up your graphics! I’ve used this technique, or variations of it countless times in my design work. The key is to give focus to your images, as far too many images appear unprofessional as the background has equal precedence to the more important parts of the graphic.
Step 1
Start by pasting your original image into photoshop. For this technique to work most effectively your image should already have some kind of depth or perspective, as we are going to work at exaggerating that existing depth. There are going to be two main elements to your image: your background, and your object. Your object is the part of the image that you wish to make stand out, whereas your background is all the unimportant data around this. Start by selecting your object, in this case a rock climber, and pasting it onto a new layer above your background layer. You should try to be as precise as possible when selecting your image (I used the lasso tool).

Step 2
Next, try to work out exactly which parts of your object you wish to bring to the foreground, and which you wish to send to the background. In short, which parts of your object are closer to you, and which are further away. In my example I want to bring the woman’s head, torso and right arm into the foreground, and send her bottom half and either end of the rope more to the background. You must be careful to look for parts of your object that combine both foreground and background areas as you will need to separate these. In my example the woman’s right arm and the part of the rope nearest to it are the only areas to cross over into parts of the object that I wish to ‘background’ and so I must select this, and paste it onto a new layer above my object layer.

Step 3
To add further depth to the photo you may want to consider areas of your background that you wish to bring forward. Simply repeat the step of selecting this area and then pasting it onto a new layer. In the example I wanted to bring forward parts of the rock face as these areas seemed closest in terms of perspective. I simply returned to my ‘original image’ layer, selected around the parts of the rock face that I wanted and pasted them as new layers.

Step 4
This is the part of the tutorial where things start to take shape. Select your layer containing your original photo and duplicate it, calling the new layer something like ‘background image’. This is done just so that you can play around with your background but still retain the original in case you need it later. Now, you want to create as much of a visual different between the background and foreground objects as possible without making your image appear doctored or unrealistic. To do this try out a few of the following effects, but use them subtly. For my background image I increased the brightness (around 20), gave it a motion blur in the direction of the falling water (strength: 4) and decreased the image saturation by 35. All of these effects are designed to make the foreground objects bolder, brighter and more colorful than the background image in order to give more depth to the image as a whole. You can see this starting to take shape in the image below (see the waterfall area):

Step 5
Select one of your layers with the foreground rock face cut out. Go to menu > layer > add layer mask > reveal all. Then select your layer mask thumbnail in your layers palette. Go to the gradient menu and create a gradient with foreground black fading to transparent. Drag this in the direction that you want to erase from in order to nicely blend your fore-grounded rocks into your background image. This will give your image a more natural perspective and get rid of any harsh lines between foreground/background. In my example I did the same with the top and bottom of the rope, to fade it into the waterfall background. As you can see the area of rock closest to us is now the clearest, thus foregrounding it.

Step 6
Select the layer ‘background image’ and go to menu > filter > render > lens flare. Position your lens flare centrally on your object, and choose the settings: 50-300mm Zoom, Brightness 100%. This is done in order to bring your object forward by creating an area of contrast behind it (remember your real object layers are above the ‘background image’ layer). Next apply some drop shadows to your object layer to create further distance from it’s background. Select the layer ‘woman copy’ and apply the following drop shadow settings: blend mode: multiply, distance: 2, spread: 0, size: 3. Then select your layer with the woman’s arm on it and apply the same settings. This will help to show that her arm is closer to us by having it create a shadow against her body.

Conclusion:
If you compare the final result with the original image the difference is not startling. But it is not meant to be. As I mentioned earlier if you play with the image too much it will appear fake. What this tutorial is designed to do is to cut out the overwhelming background noise in most photos, and highlight what is important. I use this often in my own website designs as it can help highlight important products or people. If you study the original image your eye doesn’t really know where to go due to the sheer detail present in the background. By manipulating the background and bringing forward the object you are not only creating depth, but controlling where your viewers look.
You can download the original .psd file here: imagedepthtutorialpsd.zip


http://pushstandards.com/2008/02/give-your-photo-stunning-depth/