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.

55 Comments:

  1. Wow, thanks for the great tutorial.

    Posted by Thomas on Sep. 18, 2006
  2. Thanks !

    Posted by sender on Sep. 18, 2006
  3. 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 on Sep. 19, 2006
  4. Thanks for the tutorial. I see I’ve been doing it the hard way. This method is much more efficient.

    Posted by Jarvis on Sep. 19, 2006
  5. 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
  6. 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?

    Step 1: Output logo on sheet of 11×17″

    Step 2: Set up digital camera on tripod with professional lighting

    Step 3: Take picture

    :-P

    Posted by Yves Peters on Sep. 21, 2006
  7. 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
  8. 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
  9. 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.

    Posted by Phife on Oct. 2, 2006
  10. This is really nice.

    Posted by Bret Carpenter on Nov. 15, 2006
  11. 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
  12. 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.

    Xandro.

    Posted by Xandro on Dec. 17, 2006
  13. In reply to Gary:

    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.

    Posted by Xandro on Dec. 17, 2006
  14. Nice tutorial! Thank you!

    Posted by Ines on Jan. 5, 2007
  15. 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
  16. 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
  17. 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.

    Posted by Tj on Aug. 16, 2007
  18. 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!

    Posted by Christian on Nov. 15, 2007
  19. Sweet tip, realistic looking effects! Well pleased with the final image.

    Posted by Bubbila on Jan. 31, 2008
  20. Reasons for me not doing this with a camera and paper:

    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

    Posted by menosketiago on Apr. 7, 2008
  21. 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
  22. 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!

    Posted by Chad Engle on Oct. 28, 2008
  23. 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
  24. 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
  25. Perfect timing! I’m in the middle of updating my online portfolio and will try this out tonight.

    Posted by Rob Russo on Feb. 26, 2009
  26. This technique is great. It would also be really helpful for business cards or other pieces where small details are important to show. Keep these tutorials coming!

    Posted by Jared Pendergraft on Feb. 26, 2009
  27. 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
  28. 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
  29. @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
  30. 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.

    Posted by Fiona on Feb. 26, 2009
  31. Very cool. I will try this out soon.

    Posted by Kellie on Feb. 26, 2009
  32. Great tutorial.

    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!

    Posted by Nigel Dean on Feb. 27, 2009
  33. 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
  34. Got it.
    I wasn’t on the correct Channel when doing the Lens Blur.

    Posted by Rich on Feb. 27, 2009
  35. 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
  36. See the comment above yours.

    Posted by Yves Peters on May. 12, 2009
  37. 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
  38. 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
  39. I still can’t get it to work. Nevermind. Thanks for your help though.

    Posted by sanj on May. 13, 2009
  40. Perspective, Yes. Photorealistic, no.

    Posted by Jon on May. 22, 2009
  41. Comment, Yes. Enlightening, no.

    Posted by Yves Peters on May. 22, 2009
  42. Weee, super cool for presentations, with a little bit of texture (fabric or paper).
    Very simple yet powerful

    10x

    Posted by Alin Ivana on Jun. 4, 2009
  43. Love the tutorial. My first time here. And the comments are uber entertaining too. :)

    Posted by Leanne on Jul. 13, 2009
  44. What is that font?

    I love it

    Posted by Carl Neuhaus on Nov. 9, 2009
  45. Very sorry, read it wrong ahha

    Posted by Carl Neuhaus on Nov. 9, 2009
  46. 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!

    Posted by Paul Rose on Jan. 20, 2010
  47. 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
  48. 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.

    Posted by Tyrone Cartier on Jan. 24, 2010
  49. Wow keyen.. hatur nuhun tutorialna.. ;)

    Posted by Mamat on Feb. 15, 2010
  50. YES!!! Finally the questions are answered! Thanks mate! Great tutorial here!

    Posted by Duncan McDuncan on May. 15, 2010
  51. great, thank’s for making this tutorial

    Posted by designbastard.com on Mar. 1, 2011
  52. Very cool.. now to think of an application where I wouldn’t be forcing the effect just for the sake of it.

    Posted by Reality Dodge on Jun. 9, 2011
  53. 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”.

    Posted by Hugh Jass on Jun. 16, 2011
  54. thank you so much for posting this! its a real help!

    Posted by Rian Flynn on Jan. 17, 2012
  55. Good tutorial

    Posted by H A Graphic Designs on Mar. 23, 2013

Post a comment:

  •  

The FontFeed

The FontFeed is a daily dispatch of recommended fonts, typography techniques, and inspirational examples of digital type at work in the real world. Eat up.

Archives

Subscribe

The FontFeed RSS The FontFeed Comments RSS