Image Techniques for Creating Depth in Web Design

Creative manipulation of images, from layering to composition to special effects, can add depth to web projects.

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

rangerover

mikedascola

adlucent

gardner

matteo

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

ermenegildo

ownedition

worth

charmer

hytter

draught

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

guestd

upstate

toykomilk

oyyo

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

emotions

flourish

dascola

octi

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.

Tagged with:

Carrie Cousins

Carrie Cousins has more than 10 years experience in the media industry, including writing for print and online publications, and design and editing. Carrie is also a sports fanatic and spends way too much time planning football and basketball trips and obsessing over stats.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 28

Comments are closed.
  1. Excellent article once again Carrie! You’re articles always teach me something new, gonna work on this as well! 😀

  2. There are a few additional depth techniques: Color Depth: against a dark background, the “farthest” color is violet, then up through the spectrum to red which is the “nearest”; Depth perspective: smaller objects seem farther away, larger closer; Aerial perspective: intervening atmosphere mutes and shifts colors with a bluish tint, obscures detail. With daylight sky, the atmosphere lightens/whitens the blue sky nearer the horizon.

  3. Hey Carrie, you have mentioned some really nice points here, incorporating these thing would definitely make any web page look beautiful. But that will also increase the price. Big firms may need not worry, but medium and small firms may not go for such web designing… Do you have any other alternative similar to this one that is cost effective and attractive. Shadows and effects often make a website very heavy. What are the things can we incorporate to make a website good (excluding shadows and effects)……..Thanks

    • To keep costs down, focus on great images. Strong images will take your site a long way. Help keep costs down even more by hiring a student from a nearby college to take photos. Nothing beats great images!!!

      Thanks for reading,
      Carrie

  4. hi, Carrie, thanks for your article. I got a question: you mentioned “This works fantastically with odd orientations or angled images and backgrounds that have graduated color”, what does graduated color mean? English is not my mother-tongue, hope you can explain it in more detail. Thank you !

  5. Some very nice examples wih great use of photography. Thanks for sharing these webdesigns with us!

  6. Wow! These are awesome techniques! I’m sure these are great help in web designing. I like this post! Thanks!

  7. These are great examples. Are there any more techniques besides the ones listed?

  8. Super useful techniques. I like when people transform web designs into case studies.

  9. The website of Landrover is too good. I wish if i could make a website like that.

  10. Great examples. A lot of skeuomorphic design elements, which I enjoy and love to create for clients. The depth that is acheived is so rich and really keeps a user glued to the screen.

    I just hope this style stays prevalent with the trend moving towards flat, flat, flat and even more flat. I often feel that flat is often too flat(and boring) and so hipster trendy.