Typeface Portrait of Steve Jobs: How It Was Done
7:11 am, May 14th, 2009, Leander Kahney
Remember the fantastic portrait of Steve Jobs using Apple’s classic typefaces from last week? Here’s a step-by-step guide showing exactly how designer Dylan Roscover created it in Illustrator and Photoshop. It was 24-hours of work, he says, with no sleep.
Dylan, a self-described ‘design nerd’ who lives in Aloma, Florida, explains:
“I used Adobe Illustrator and the Pen tool to trace his facial contours the way I figured they would make sense, one by one using the Type on a Path tool for each path.
The larger lines of type were hand-kerned character-by-character to fit accordingly. Near completion I used the Magic Wand tool to select areas of text and apply gradual shading.
Everything was composited in Adobe Photoshop as a smart object to give it that deep blue effect and the background texture.
In total it look about 24 hours to complete during three days with no sleep (class assignment).”
Here are Dylan’s detailed step-by-step instructions.
Steve Jobs, Original Photo
Steve Levels Adjustment
Using levels in Photoshop, I bumped up the contrast to help me better distinguish light from dark.
Steve, Beard Hair
Having imported the Photoshop image into Illustrator, I started with Steve’s beard hair, using a lowercase Adobe Garmond “L” over and over, manually repositioning and rotating each element.
Steve, Beard Hair 2
This was after about the first half-hour’s work. I began with pure white for all of the type, ignoring color and shadow and focusing solely on position and scale.
Steve, Beard Hair Outline
An outline view of the type only.
Type on a Path Outline
Detail of the overall typesetting process. I would frame each path of the facial contours using the pen tool, and then copy and paste a certain string from the ad campaign onto that line using the Type on path tool, setting, kerning and sizing that individual line as necessary. In certain areas and larger blocks of text, I would manually set individual characters. Fonts were grouped with each other to maintain consistency across the face.
Steve, Halfway
About 10 or so hours into the project. Most of the major facial features were framed first chronologically (“Here’s to the crazy ones” sits on his forehead, “The Misfits” and “The Rebels” beneath his eyes, “The round pegs in the square holes” on his cheeks and then “The ones who see things differently” across his lower lips). Note that no shading was added yet in the process, and a deep emphasis was put into varying the character sizes to add interest to the piece.
Dylan Roscover, the artist.
Posted by Leander Kahney in How tos, News, Steve Jobs | Comment on this article
If you enjoyed this article:
Subscribe via RSS or email, or follow us on Facebook and Twitter
This is truly inspirational, and great to see such an attention to detail. I think this as a type exercise would be great to give to students learning design, typography and a vector drawing package. I might just do that, they might not love me – but they will when they’ve completed it: )
Thanks for the post and to Dylan for sharing the process with us.
squareart, on May 16th, 2009 at 1:43 am
[...] Es curioso ver las imágenes del proceso completo. [...]
Steve Jobs creado con tipografÃÂa - colorate, on May 22nd, 2009 at 5:44 am
Increiblemente estupendo diseño,
enrique cervantes, on May 22nd, 2009 at 6:31 pm
[...] illustrator. Nel caso siate particolarmente curiosi, trovate un tutorial con il makin’ of qui. Di seguito, vi sottopongo poi Inlingua, un concept creato dall’agenzia Kolle Rebbe [...]
Design trends: words! « Lucida Lab, on May 25th, 2009 at 5:38 am
[...] web site Cult of Mac holds a short explanation detailing how Rosco created the portrait using Photoshop and [...]
Steve Jobs inspires creative designers, on June 27th, 2009 at 2:05 pm
[...] Steve Jobs… This is a cool picture of Steve Jobs drawn completely in typeface. Click here to find out how it was done and click on the picture to see a bigger image… (via Cult of [...]
Look It’s Steve Jobs… « Katoque ’s, on August 13th, 2009 at 9:21 am