Skip to: Navigation | Content | Sidebar | Footer

Weblog Entry


May 03, 2007

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.

Progression of transformation

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.

Progression of focal blur

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.

May 03, 16h

You’re so good to us. Thanks!

Joshua says:
May 03, 16h

Dave, thanks a ton for this. Might find this funny, but I always assumed that shot of the chalk icon page was just from your Camera of an LCD screen displaying the page, haha!

There’s a big lack among the web community blogs of graphic tips, tricks and tutorials. I really appreciate your taking the time to write this up.

I’m still unsharp masking all my resized images too! heh!

cam c. says:
May 03, 17h

Joshua, there’s actually nothing wrong with snapping a photo of the screen… try macro mode and the widest angle your camera supports. It can be a cool effect for a sort of “analog” feeling. I’ve used it for sites in the past where the dirty analog look fit the theme.

However, when I’m dropping a screenshot into a site I’ll often do something similar to what Dave has – obviously it’s a lot cleaner and you have a lot more control over the outcome. I’ve also used a flat bitmap as a texture map in 3d rendering software (I used to do a lot of work in Lightwave 3D) to do something similar, but it’s kind of cool to fake the camera effects in 2D too…

May 03, 19h

I to have used the quick snapshot from my iMac technique more than a few times. With a good camera and lens you can achieve a great effect, with an LCD the pixels add a nice touch. However, this technique is great for setting the same effect to photos or objects you don’t have access to in order to photograph. Wonderful tutorial, thanks.

Joshua says:
May 03, 20h

cam, thanks for the suggestions! I gotta rip the camera out sometime and try that. I remember one time seeing a shot like that and I think you could see the actual lights in the screen kinda showing through (liek Sean mentioned) which gave it like you said that sort of “analog” feeling. I always had wondered how Dave got around that, I just never even considered that it was a screenshot due to the perspective. Kudos to Dave making it so real looking, heh!

I’d love to see some examples of the 3D effect.

Lasse says:
May 03, 23h

It’s great to see this site is living and breathing again Dave. Most of the big names in design blogging have been vanished in the “I’m too busy to write anymore” land. Luckily Doug, you, Dominey and Z have been making small comeback. I don’t care if you guys post articles like this only once a month, just keep writing.

Thomas Peklak says:
May 04, 00h

For the focal blur I would rather recommend to use the gradient tool (mirrored) instead of a brush. Should be easier than to paint your way through.

And the direction of the mask in your example should not go from SW to NE but from NW to SE. You would not get your effect with camera unless you use a tilt/shift lens, which would produce a similar effect but produces a result, that does not look very realistic.

May 04, 00h

Nice one. I have used various other methods in the past, most of them more complicated than this method unless falling back to actual photography.

Pete B says:
May 04, 01h

@Joshua - I agree that there should be more graphic design tutorials like this one, I think over time as the web grows up we’re going to be more concerned with the human factors involved with making websites and not so much cross-browser technicalities and circular arguments about xhtml vs html for instance

Scott N. says:
May 04, 07h

When I saw it I assumed the chalkwork image WAS a printed page and never gave it another thought. You’ve ruined the magic. : )

Here’s a method that might be worth trying if you don’t don’t like the idea of painting your focal area:

1. Draw a selection with the elliptical marquee, roughly around the area you want in focus.
2. Invert Selection
3. Enter Quick Mask and do a gaussian blur to taste.
4. Adjust brightness to tweak the size of the focused area, contrast to tweak the amount of blur on the edge.
5. Exit quick mask, then do lens blur as described in the article.
6. Finally, do rotate and perspective transformations as described in the article.

Joshua says:
May 04, 09h

Pete, fantastic comment. I sure hope so!

May 04, 10h

Wonderful, thanks!

josh says:
May 04, 12h

wow that pretty sick, thanks.

May 04, 15h

This is just amazing. It looks soooo good and professionally done. Great technique.

dandyna says:
May 04, 18h

Well this is a wonderful tip! I’m always having problems with pics and images in my blog post for they are too large to be even in a single line, you figure if I put them floated left or right from the content. Thank you very much I will try this soon.

Cavalcare says:
May 05, 02h

Thanks for the tip.

I think it would be a great idea to create an easy tool (online or downloadable) that makes that whole job.

You would have just to add the picture and select the scale and distortion; but the tool could make some default modifications with their previews.

I guess such a tool would have a good popularity.

Webice says:
May 05, 10h

Wow really thanks for the wonderful tutorial, this technique can be used to transform a pictures of a product to look more professional.

RyanCPO says:
May 05, 13h

Great job. It’s nice to get some of the random techniques you would have never known about. Thanks for the info.

gabe says:
May 05, 13h

This is a fun effect. After effects has been able to do this effect for years using 3D layers and cameras. The concept could be incorporated into photoshop no problem.

May 05, 14h

Thanks! This is a great trick. I need all the photoshop tips I can get.

May 17, 02h

Great tips. thanks for sharing, I have always loved this effect.

Chisa says:
May 23, 05h

Definitely going to keep this in mind for later, very useful tutorial!

Michelle says:
May 23, 11h

Thanks for sharing this with us Dave, I had tried to do something similar a while ago and all I ended up with was a big mess. You have shown that it is possible (whether I can do it is still another question…)

May 27, 14h

Thanks for the detailed instructions –artistically challenged types like me need all the help they can get! :-)

Just one question, though: are you using this effect “simply because it looks nice” or do you have a particular *reason* for using this technique?

June 07, 03h

Anyhow “simply because it looks nice” is really a good reason :)
Added to my bookmarks! Very useful technique.

April 24, 17h

Thanks for this great tutorial, Dave, and what a classy effect. Photoshop being a new venture for me, I really appreciate your sharing this. It’s immensely helpful in learning. I hope more of these tutorials are coming down the line.

Graham says:
May 15, 11h

Great tutorial, I’ve wanted to know how to do this for ages. Thanks!

April 20, 23h

I would like to thank you for the explanations you have put here, I am an aspiring web designer and the clarifications would be of great use for me as well. I would like to add you as my friend, kindly reply me with my email id :)