Image Techniques for Creating Depth in Web Design

We live in a three-dimensional world, something that designers are trying to recreate in web design every day. The element of depth can add a greater touch of reality to certain design projects.

Creating it can be easier than you think. The key to simulating reality on the 2D screen is by creating depth using images. This can be accomplished in a variety of ways, from the photography itself, to layering of images, manipulation and the use of special effects.

Layering

Layering is a tool that can be intentionally used in the way images and objects are placed in the design process, as a tool to manipulate images or purposefully in the image itself.

We’ve all seen the layout where images are placed on top of each other haphazardly to look like a stack of printed photos. You know the trick. And it works by creating a sense of depth that makes you feel as if you are thumbing through the photographs. This is layering in the design process. Sometimes the effect is more obvious, as in this instance but other times it is more hidden.

Often multiple photos are merged into one to create two distinct parts of an image – a foreground and another background. When done well, the effect should be virtually unseen. Take a look at the Range Rover site above – both the car and the city images are spectacular and when combined they make you feel as if you are standing next to the vehicle looking over the city.

Another effective layering tool is laying a photograph or image over a seemingly flat background. This works fantastically with odd orientations or angled images and backgrounds that have graduated color.

Finally, some images are created with layering in mind. This photography technique is based on the idea of using overlapping lines created by different objects in the image to create depth. Often lines are emphasized by color and contrast in the image to separate objects in the scene from one another. This technique can be difficult for amateur photographers to create.

Photography

One of the most important tools for creating depth is in the images. Framing and composing images with depth in mind can make building for depth a breeze.

But how do you compose photos in this manner? While many opt to hire a professional photographer and just provide instructions for depth, this is not always an option. If you are taking photos yourself for a project think about depth as you shoot with these tips.

Create a visual interest in the foreground. Make sure the photo has a subject and background. Thinking about these as separate parts will help you better frame and create an image.

Change the view. Take a photo from an unexpected angle. This changes the perspective of both the subject and background, adding visual dimension. You can also accomplish this by playing with angles; frame the same image from a comfortable level and with a wider angle.

Take photos in portrait orientation. By changing to a vertical axis, you will frame photos differently.

Think about natural lines and shadows. Sometimes what’s in the photo adds its own sense of depth. Distinct shadows, for example, can make an object come into sharper focus while extending the background.

Image Manipulation

Using photo editing software such as Adobe Photoshop, designers can create added depth in photos with a few simple tricks. This can be a great alternative when working with portraits or other images that were not shot with depth in mind.

The trick is this: With the subject in the foreground, add a blur to the background, while leaving the subject alone. (In Photoshop, a Gaussian blur adjusted to a radius of 5.0 works wonders.)
This simple trick adds focus to the subject in an image while creating a sense of depth by making the background less of a visual priority.

Shadow Effects

Shadows are one of the easiest and most natural ways to create a sense of depth and place for objects and images. Placement, darkness and the shape of shadows can imply very specific meanings. They key for using shadows is for them to look natural.

The best shadows are subtle and follow patterns of light. Make sure shadows mirror the feel of images they accompany. If the first thing a user sees is the shadow, then it probably does not work.

Rounded shadows that rest below objects can create a floating, 3D-style effect. This is a common technique for buttons and smaller user interface elements. Shape-specific shadows in front of objects can make a flat item look like it is standing up, such as those on the Guest’d site. (Did you even notice the shadow before they were mentioned?) Warped shadows – those that do not mirror the shape of the image they relate to – can make an item appear to have another shape, or lift off a background image.

Shadows can also add a touch of realism to an object or item. A shadow behind a person can help lift him off the background, bringing the subject to the forefront of the image. This is a common technique but it is very important that shadows fall opposite of light sources in the image so that the end result appears natural and unforced.

Illustrations and Other Images

The same concept and manipulations that work on photographs also work for illustrations and other images used in design projects. The difference is that you often have to create these effects yourself.

The dramatic shadow used above is a great example of this. The light and dark parts of the background relate specifically to the image, making it “move forward” from the rest of the site.

Conclusion

Depth is a great tool for creating a sense of realism in design projects. It can connect users to what they are viewing on the screen, making them feel like more of a part of the scene.

Even images, from photographs to vector-based user interface elements, that lack true depth can be manipulated to add a sense of having a third dimension. Layering, object orientation and shadows are some of the best tools for creating extra depth.