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:

Raspberries photographed with depth of field

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 part by a phenomenon 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.

The reason it feels so nice to look at a picture with depth of field is that it is very close to how our own eyes work. Take a pen, hold it up close to your face, and focus on it. You'll notice that the background blurs out, making the pen look even crisper.

If you're thinking, "can I use this effect in my mockups?" the answer is yes, you bet. 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: 1. 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:

An iPhone mockup rendered with depth of field
Depth of field used to direct attention

The other scenario is completely compatible with the first: 2. you want to add that premium and realistic 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 full 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:

An iPhone mockup demonstrating no depth of field
Depth of field disabled
An iPhone mockup showing moderate depth of field
f-value set to 0.30
An iPhone mockup showing a high degree of depth of field
f-value set to 0.07

Doesn't that last one look nice?

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 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 in a real camera, there's a sensor. 20 years ago, this would be the actual film. 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 tiny 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.

That's it. You now know the basics of depth of field - just enough to apply it to your own 3D projects. Go ahead and blur and get those luxury-stylized shots for your design showcase. You can check out a quick tutorial on how to do this in Rotato right here.

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