mezzoblue

Simulacrum

Since the redesign of this site, I’ve been applying a consistent blurred perspective effect to larger images (eg. in posts like this one) that has made a few people curious. It’s fairly simple, but probably not that intuitive to figure out. So here’s an explanation.

There are pretty much only two steps to this effect, the perspective transform and the focal blur, with an optional third, lighting effects.

Perspective Transform

Since the final effect simulates a flat surface, my starting image has been a screenshot or object that looks like it will sit properly on a flat surface. Nothing is stopping you from using a photograph, but the end result looks like a physical printed photo sitting on a surface, which usually isn’t what I want.

Stick the image in a Photoshop canvas on its own layer. Hit Cmd + T (or Ctrl + T on a PC) to toggle the free transform tool; you’ll get a black outline and a hollow square handles in the corners/edges of the image. A few things you can do with the free transform tool follow; hit Enter to confirm the changes, or Escape to cancel if you don’t like where it’s heading.

Rotate the image

Make sure the canvas is a bit larger than the image itself if the handles are on the edges, and move the cursor outside the black outline. It will change into a curved arrow, and you can click and drag to rotate the image.

Scale the image

Click and drag one of the black line edges or one of the corner handles to make the image larger or smaller. If you use a corner handle and hold Shift you can scale it proportionately along both dimensions, otherwise scaling only works on one dimension and ends up squashing the image.

Distort the image

Click and hold one of the corner handles, then press Cmd (Ctrl) to toggle distort mode. Drag the handle and you’ll be able to freely move that handle, and the image distorts accordingly. You’ll see what I mean when you try it.

Okay, so using free transform, start by rotating it something like 10 degrees counter-clockwise. A slight angle is all we’re looking for here, nothing too drastic. Then free transform again, and this time grab the top right corner and distort it. Move it down and to the left, and you’ll see a sort of planar perspective happening. You may need to rotate again, you may need to scale, you may need to distort; there will probably be a few fine adjustments necessary to get it looking just right.

Figure: Progression of the free transform operation: starting image (left), rotated image (center), rotated and distorted image (right).

Focal Blur

This is the tricky part. The first step is to make a quick mask of the in-focus area. Hit q to toggle Quick Mask mode, and use a large-ish brush (150px) at 100% opacity, and make sure it’s a brush with a soft edge. Paint the area you want to be in focus, making sure the edges aren’t too defined; blurry is good here. The in-focus area ought to line up with your plane as best as possible. A bit of knowledge about the photography concept of focal planes helps here, but you should be okay if you ensure the in-focus area ends up being a line across the image that matches the perspective of the image itself.

Figure: Illustration of the focal blur process: quick mask with painted area (left), lens blur filter settings (center), final blurred image (right).

Once you’ve got a selection you’re happy with, hit q again to step out of Quick Mask, and then find the Lens Blur filter (Filter > Blur > Lens Blur). There are quite a few settings here, so start by checking that Depth Map is set to None, the Specular Highlights sliders are at 0, and Noise is at 0. Iris is the box we’re concerned with here.

The Shape dropdown has a list of shapes that roughly simulate lens openings on a camera; each is going to look a little different, but probably not enough so that you need to fiddle with them. Set it to Hexagon (6) and don’t worry about it anymore. Don’t bother with the Rotation slider (ie. set it to 0), and you probably don’t need to adjust Blade Curvature either; changing it gives a slightly different effect, but like the Shape dropdown, most likely not enough to worry about.

And that leaves Radius. This slider controls the amount of blur, and in this case you’re going to want to use a light touch. Subtle is better; 4 or 5 ought to be enough, depending on the size of your image. Click OK at the top to apply the blur, and you’re probably done.

You may also want to apply a final bit of shading to simulate lights, by way of the Lighting Effects filter (Filter > Render > Lighting Effects). It’s up to you to figure that one out, but I will say this much — I generally find the output from that filter a bit too contrasty. After I’ve applied it, I end up using the History Brush set to 50% opacity or so to tone it down a bit. Your mileage may vary.