Typeface Portrait of Steve Jobs: How It Was Done

steven_paul_jobs_by_dylanroscover

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.

Typeface Portrait of Steve Jobs: How It Was Done

Steve Jobs, Original Photo

The original photo I used for reference. This is a very personal depiction of Jobs which I feel conveys him very strongly and evidently.

Typeface Portrait of Steve Jobs: How It Was Done

Steve Levels Adjustment

Using levels in Photoshop, I bumped up the contrast to help me better distinguish light from dark.

Typeface Portrait of Steve Jobs: How It Was Done

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.

Typeface Portrait of Steve Jobs: How It Was Done

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.

Typeface Portrait of Steve Jobs: How It Was Done

Steve, Beard Hair Outline

An outline view of the type only.

Typeface Portrait of Steve Jobs: How It Was Done

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.

Typeface Portrait of Steve Jobs: How It Was Done

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.

Typeface Portrait of Steve Jobs: How It Was Done

Dylan Roscover, the artist.

Apps you might like

About the author

Leander KahneyLeander Kahney is the editor and publisher of Cult of Mac, and author of three books about technology culture: Inside Steve’s Brain, the New York Times bestseller about Steve Jobs; Cult of Mac; and Cult of iPod. Leander has written for Wired, MacWeek, Scientific American, and The Guardian in London. Follow Leander on Twitter @lkahney and Facebook.

(sorry, you need Javascript to see this e-mail address)| Read more posts by .

Posted in News, Steve Jobs |


scribol