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.
ShareThis22 Comments:
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.
Thanks for the tutorial. I see I’ve been doing it the hard way. This method is much more efficient.
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.
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 11x17”
Step 2: Set up digital camera on tripod with professional lighting
Step 3: Take picture
:-P
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
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!
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.
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.
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 11x17, 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?
VB: the 3D effect is in illustrator. The tutorial starts out in illustrator and doesn’t move onto Photoshop until the alpha channel stage.
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!
Sweet tip, realistic looking effects! Well pleased with the final image.
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
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.
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!
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.
Related Posts
- Tutorial: The Worn/Weathered/Stamped Look
- There are quite a few quality stamped or distressed fonts available — Frankie and Frankie Dos, Roadkill, Battery Park, Hawksmoor, Chase, Coldharbour,…Read more
- In Use: Penumbra for The Da Vinci Code
- In looking for a dramatic font with Roman roots, the designers of “The Da Vinci Code” posters and marketing materials…Read more
- Tip: GIF Your Type Right
- It would be great if we could use any font we wanted in designs for the web. But since we’re…Read more
- Extra Light, Ultra Thin Fonts: Hairline Type Lends Elegance to the Page
- FF Meta Light with PMN Caecilia in Real Simple magazine. Just as there is often a need for extra heavy type,…Read more
- Avant Garde Gothic Alternates Are Back
- ITC Avant Garde Gothic’s alts are a trademark of ’60s and ’70s design, but have seen a huge resurgence of…Read more
Wow, thanks for the great tutorial.