Tutorial: Photorealistic Perspective

Sometimes, flat just doesn’t cut it, and we need to find other, more attractive ways to present designs to our customers. One technique I’ve been using recently works remarkably well for text, logos and other vector artwork. It consists of taking a virtual photograph of the work by combining Adobe Illustrator and Photoshop filters. The dramatic end result can’t be distinguished from a real photograph.

Create a type composition, logo or other vector artwork in Adobe Illustrator, or open an existing vector file. Make a selection of all the elements that need to be included in the perspective and group them (Edit > Group). For this example I used Gábor Kóthay‘s Incognito, a gorgeous interpretation of calligraphy as found on ancient maps. The large “Perspective” is composed with capitals from the four variants Occidens, Septentrio, Oriens and Meridies.

Apply a 3D effect(Effect > 3D > Rotate…) and look for the desired perspective. I ended up with the following settings:

Rotation around the X-axis: 45°

Rotation around the Y-axis: -60°

Rotation around the Z-axis: 30°

Perspective: 120°

To achieve an even more convincing end result, we will simulate light depth. Create a background and apply a Radial Gradient(Gradient > Radial). Pick a light colour for the centre and a slightly darker tint for the outsides. Shift the 50% point outwards to 75% or even beyond, to ensure the background only slightly darkens near the edges.

Save the file as a PDF and open it at high resolution in Adobe Photoshop. Even if the image is intended for screen use, creating the image at high resolution and downsampling it to screen resolution at the very end will give far better results.

Create a new Alpha Channel(Channel > New Channel…) Fill this channel with a gradient from black to white. The orientation of this gradient is important as it will define the orientation of the depth effect.

Apply a Lens Blur(Filter > Blur > Lens Blur…) Activate the Preview option so you can see which effects the different settings resort.

Depth map sets the focal distance, that is which area in the image will be in focus. Select the new alpha channel as the depth map source: Source > Alpha 1. The Blur Focal Distance allows you to ‘slide’ the focal point along the black to white gradient in the channel – a low value means the focal point will be situated in the dark area; conversely a high value will have the focal point situated in the light area. I set the slider to:

Blur Focal Distance: 40

Iris lets you adapt the shape, radius, blade curvature and rotation of the iris. The radius is the value that determines to what extent the image is blurred as you move away from the focal point. My settings are:

Shape: Hexagon (6)

Radius: 25

Blade Curvature: 25

Rotation: 0

I don’t really know what Specular Highlights does and frankly I don’t really care, as I notice no change in the image when manipulating either Brightness or Treshold slider.

Noise restores the grain that is lost in the areas of the image where Blur is applied. You can determine the amount of noise and which kind. This is mostly useful when starting with a photographic image. As there was no grain in our original test image, don’t apply any Noise, lest you want to have noise in the blurred areas and perfectly smooth sharp areas, which looks very unnatural.

After applying Lens blur, add a smidgen of Gaussian Noise to simulate film grain and paper texture for authenticity, and you’re done.

The main advantage of this technique is that it allows you to take “photographs” of productions which are still under development, before even the first copy has been printed. Furthermore you have much more control over the end result compared to (digital) photography, as you are able to determine perspective and image depth accurately.

re: gary and lot of work. wow, excellent point! it’s far better to use textured paper, a color printer you may or may not have access to, ink that costs money, and a digital camera that can actually pull off the depth of field accurately, instead of just mocking it up in Photoshop first with a gradient mask and a filter and a 3D effect that you can manipulate numerically on your computer screen rather than taking the time to set up a tripod and a room and table to achieve the same thing.

gary, your manager called. he’d like to go over these “expenses” from your last project.

Posted by Rok on
Sep. 20, 2006

Wouldnâ€™t it be far simpler to just output the logo on a sheet of 11 x 17 and then take a digital photograph?

Definitely, but that would have made for a pretty boring tutorial isn’t it?

I love these kinds of tutorials on type. Please do more of these as there are many digital type newbies (such as myself).

In fact, if the series were expanded this would be the only website from all the main type suppliers that has practical type design information (not just the rudimentary stuff).

Thank you and more please,

Mike Diaz

Posted by Mike Diaz on
Sep. 21, 2006

i think some people leaving negative comments are not realizing that this can be applied to more than just type. any graphic composition that you want to give some photo-realism to can benefit from this technique. thanks for always being willing to share your secrets, yves!

Posted by paul on
Oct. 2, 2006

I don’t have a color printer or professional lighting … and now that I think about it, I don’t have a table either. Just a desk (dormrooms in Manhattan have no space for luxuries like tables). But I know Illustrator and Photoshop like the back of my hand. Love this tutorial. Wow. Excellent. Thank you.

Specular Highlights, like the name implies, manipulates highlights given off of a light source, specified by alpha channel (I assume) or its native source, which would explain why you didn’t see any change – your graphic/text is flat, it has no gradients on it.

Great tutorial and your type treatment is excellent. Thank you.

Posted by Tim on
Dec. 4, 2006

Rather interesting techniques. In my application, when applying the lens blur, I used 40 on the iris radius rather than 25 (as I am sure everyone can chose different settings and yours are only an indication) but 25 was just too unnoticeable and 40 looked dramatically better.

Thank you for the tutorial and look forward to the next one (or two or three!). Great.

Wouldn’t it be far simpler to just output the logo on a sheet of 11 x 17 and then take a digital photograph? This seems like a lot of work. (Posted by: Gary at September 19, 2006 09:06 AM)

In our case, Gary, we would have to charge the Client the output of the 11×17, then the photography, then the retouching etc. One can add to the job $250 on top of what was quoted if we where to follow your example. In today’s competitive environment, the tutorial can save the client a little bit of money which would be better spent somewhere else.
Sorry to say.
Xandro.

Alas, I do not find the 3D effect — not in Photoshop CS2 help, not in my Blatner/Fraser book, not in Google. Effect > 3D > Rotate… Do you have a custom filter installed? What am I missing?

Posted by VB on
Feb. 12, 2007

VB: the 3D effect is in illustrator. The tutorial starts out in illustrator and doesn’t move onto Photoshop until the alpha channel stage.

Posted by popaka on
Feb. 22, 2007

incredible!. thanks for the headsup. for all the oldskoolers,… you guys stick with your ancient camera techniques. Instead, we all just progress with new quicker techniques that save time, money and a lot of hassle.

Wow – I always wondered how to do that, and just stumbled over this tip as I was buying a font. Went through the various steps – and created a beautiful image no time. What a great effect! Thanks and keep them coming!

1: I do not own a camera that allows control of focus (reflex)
2: No lighting fixture either
3: This way you get to control and change the image at your liking without repeating the traditional process

LOL Thanks a lot for the tips, been wondering how to use lens blur in PS for some time, now I know :D

This tutorial is great. For the part about the Radial Gradient background in Illustrator, I would suggest to skip this part and bring the file into Photoshop without the background because you will have much more control over creating the actual background depth once inside PS. This way you can edit the background gradient on its own layer and get a little bit more “advanced” with it since IMO it’s a bit easier to create specific gradients in PS. For instance, you can use two gradients, one for closer and one for farther away.

Otherwise, nice tutorial.

Posted by Colin on
May. 8, 2008

Spot on! I recently just found your website (although I have known about fontshop for some time) and I am going through all of your posts like it is my job! (it kinda is) I am trying to figure out if I should share it or keep it!

This is ****ing cool. I never figured I could do this. Now for a cooler portfolio without having to find all the damn print samples I’ve misplaced.

Posted by Yehan on
Feb. 3, 2009

Great tut..comments are also entertaining; much thanks.
This has so many practical uses… I was wondering if you could go even further…like type dissolving into air (cloud) or water..ink diluting from the water flooding it, or textured onto objects like a shadow / distressed.
Thank you so much!
Laurel

Posted by akalaurel on
Feb. 7, 2009

Perfect timing! I’m in the middle of updating my online portfolio and will try this out tonight.

Further on specular highlights: Perhpaps the most common example would be the intense, starlike reflection of bright sun off a chrome car bumper. Since your example did not have any glass or chrome surfaces(and an appropriately placed light source), the specular highlights setting did not produce any results.

Posted by Peter Joseph on
Feb. 26, 2009

Was there a hidden camera set up in my apartment the past 2 weeks I’ve spent with my camera and my portfolio trying to “find other, more attractive ways to present designs” because “flat just doesn’t cut it” for my digital presentations? Were you watching me moving lamps around the poorly lit room and balancing on the rickety dining room chair to try to get that perfect shot, which by the way never worked quite right?

*applause* thank you for this tutorial :D

Posted by dsignlayd on
Feb. 26, 2009

@Peter Joseph: Finally, now I know. Thanks for that bit of information. And in case somebody says: “You could have looked that up yourself.” … Yes, I could have. :P

@dsignlayd: Believe me, I know your pain. Why do you think I developed this technique? Glad there’s other people finding it useful. :)

Posted by Yves Peters on
Feb. 26, 2009

I agree, this is fantastic! allows me to present portfolio work in a more interesting way without needing to own pro photography equipment, or worse, try and fob off the studio effect in my lounge room.

Reading through the process it seems quite complicated, but I am going to spend a little time to work through and I’m sure it won’t be too hard. The fantastic result has got to be worth a try, it looks great!

I can’t get it to work.
When I create a new Alpha Channel what does the color indicate? What is the color I’m supposed to use and the opacity. The Alpha channel just makes a gradient and that’s all I see. It’s like the Alpha channel isn’t turning into a Lens Blur. AH!

Posted by Rich on
Feb. 27, 2009

Got it.
I wasn’t on the correct Channel when doing the Lens Blur.

Posted by Rich on
Feb. 27, 2009

I can’t get this to work.
I’ve gotten up to the creating a gradient in a new alpha channel part. But when I use the lens blur filter nothing happens. I’ve tried it on both the vector layer (which I rasterised) as well as the Alpha Channel layer but to no Luck. Also when I keep the alpha channel layer on. I have a red tint across the screen I am working in.

Posted by sanj on
May. 12, 2009

See the comment above yours.

Posted by Yves Peters on
May. 12, 2009

I’ve read that, So what channel Do I have to be on to get the lens blur to work? the Alpha Channel?

Posted by sanj on
May. 13, 2009

Well, if you think logically you don’t want to apply a lens blur on that black-to-white gradient, but on your actual image. Select the image in the Channel window and deselect the Alpha Channel with the gradient.

Posted by Yves Peters on
May. 13, 2009

I still can’t get it to work. Nevermind. Thanks for your help though.

Posted by sanj on
May. 13, 2009

Perspective, Yes. Photorealistic, no.

Posted by Jon on
May. 22, 2009

Comment, Yes. Enlightening, no.

Posted by Yves Peters on
May. 22, 2009

Weee, super cool for presentations, with a little bit of texture (fabric or paper).
Very simple yet powerful

This is a fantastic tutorial, and I’m not surprised how many people are interested in adopting it to display their own samples of work given that displaying logo work can often appear flat and unimaginative.

Saying that, I would still love to actually photograph every sample of printwork myself before uploading to my online-portfolio but I do agree with many of the posts above, in that this is a much quicker and less expensive route. Well done Yves!

Saying that, I would still love to actually photograph every sample of printwork myself before uploading to my online-portfolio (…)

Oh, but I agree. I apply this trick mainly for client presentations, before anything has been printed yet. Once the job is printed it is nicer to have actual photographs.

Posted by Yves Peters on
Jan. 21, 2010

That was a cute comment about taking a picture. It made me laugh cause it was such an honest question, yet somehow adorably innocent. The response was respectful, too. And funny..the manager wants to go over these expenses..lol. Would make for a good scene in a sitcom.

Camera lenses with short depth-of-field produce imaes that are blurry both in front of, and behind, the plane of focus. So the slightly more convincing way to make a depth-of-field effect is to use a gradient that rolls off in both directions as your alpha channel. That way, the image will get blurrier toward the “back” as well as toward the “front”.