Highlights

  • You can achieve depth and realism
  • Depth of field is an effective way to draw attention to a specific design element
  • Camera settings in 3D mimic those on physical cameras

Guide your audience's eyes and bump the photo-realism up a level

Bring in a little wow-factor with depth of field
By Rotato
· 5 minutes

Okay, let's start by looking at a food photo:

Quick guess: When you see this photo, you first looked at the two large bumps on the raspberry right in the middle.

Right? What happened was that you eye was guided to look at this detail with a technique called depth of field. Actually, there's many names for it, so depending on who you're talking to (especially if you're talking to photographers) this is also called "aperture opening" or "f-stop" or "opening the lens up" and sometimes just "focus blur". In plain English we'd just say blurring-out-the-not-important-parts-of-the photo-using-a-camera-lens-technique. Maybe a bit long.

If you're thinking, "can I use this effect in my mockups?" the answer is yes, let's see how it's done. But first, a word of caution: depth of field is not perfect for every occasion. Let's go on a quick detour to see when it's great and when it's not.

When should you use depth of field for mockups?

Two scenarios: You want to guide your viewer's eye towards a specific part of your design. Could be a button, an interactive detail, or like here, a specific label:

Depth of field used to direct attention

The other scenario is completely compatible with the first: you want to add that premium feel to your presentation. Depth of field is heavily used in high-end cooking photography, jewels, and just whenever the heck a company wants to say: "we really cared about the details."

You might not want to use depth of field if you're showing your audience a design for the first time, and they need to get the complete picture. You'll want to allow their eyes to travel all over the screen without feeling the need for prescription glasses.

How depth of field works

The technique is as old as the camera. In any camera, there's a hole that lets in the light for a very short amount of time. The bigger that hole is, the less blur. 3D photography and rendering is really just a real-world camera simulation, so it works in the exact same way.

The magic number here is the f-number, also called the f-stop, and it's confusing: the bigger f-number, the smaller hole. So let's forget about that hole, and focus on the f-number instead.

In his depth of blur tutorial, photographer Chris Bray introduces a simple way to remember the whole f-number business: Imagine you're taking a photo of a lot of "f" letters. The bigger your f-number is, the more f's you'll have in focus. The smaller the f-number, the fewer f's you'll see.

I put his technique to the test in Rotato. Take a look:

Depth of field disabled
f-value set to 0.30
f-value set to 0.07

Doesn't that last one just look gorgeous? F-numbers are totally unrelated to Facebook's app icon, by the way.

F-numbers aren't the only thing controlling the blur, but it's the simplest, and more than enough in most cases. But just for fun, let's take a look at the other factors.

  • Distance to the subject. With digital mockup photography you're always very, very close to the subject, so it's not going to be a problem achieving the blur.
  • Focal length. When you zoom in Rotato, you bring the 3D camera closer to the mockup. But when you use the zoom feature on a camera, you're changing its focal length. The longer the length, the more blur you'll see. But go too high, and you'll distort the subject.
  • Sensor height. Behind the lens, there's a sensor. 20 years ago, this would be the actual film, and the lens doesn't really know the difference. This is what photographers talk about when they say "yeah, look at this 35mm sweet baby" (and they're pointing at a camera, not a human child). More height is more blur.
  • Blades. One more term originating from physical cameras. But what this affects is how the blurred area looks. Bright areas will show up as blurred circles called bokeh, and blades determine the shape of the bokeh. Read more about bokeh in this intro from Nikon.

Now go forth and blur and get those luxury-stylized shots for your design showcase.

Next steps

No items found.

How to do it with Rotato

Examples from Rotato

Example
using the
iPhone 12 Pro
mockup
Video showing a
Depth of field
using the
iPhone 12 Pro
mockup
No items found.

More mockup guides