Typographic Portrait

Supreme Court Nominee Brett Kavanaugh Sexual Assault Hearing, Professor Blasey Ford Testimony


This is how the final design will look like:


Step 1 – Create the silhouette version in Photoshop

Pic 1

Find a folder on your flash drive with your “Nobel Peace Prize” recipient. Use this folder for all work related to this assignment. Start with a photo provided. In Photoshop adjust the image to create a high contrast black and white .jpg
Choose Image > Adjustments > Desaturate. This will provide the background for your Typographic Portrait illustration.

Add Levels adjustment layer with the following settings:

Pic 2

Create a separate layer draw with the Brush tool over the unnecessary parts with black and white:

Pic 3

Save this version as a JPG file and place it into a portrait format Illustrator document:

Pic 4

Step 2 – in Illustrator – Set the image to trace

To be able to use the photo as a guide, you will have to double-click on Layer 1 in the Layers panel and choose Template then click on OK. You can name this layer ‘Tracing’.

Pic 5

Now you need to create a new layer and you can call it ‘Design’.

Pic 6

Step 3 – Choose fonts

Choosing the right fonts for a typographic project is essential. You have to think about the style you are after and the message of the design. In this case they wanted a bit of R&B, street, club, breakdance feel to the design so they chose fonts accordingly.

Step 4 – Plan the layout of the text

Before we start adding text to the design, it is useful to plan what would be the best way to arrange the text. It is hard to imagine first how the final piece will look like but with practice you will be able to tell roughly the outcome. A couple of useful things to bare in mind:

  • Try to use thick fonts for bigger blocks of the design (like hoodie).
  • Try to use thin, cursive fonts for smaller details (like lines around the eyes).
  • Avoid using the same font twice close to each other.
  • Keep gaps between details to separate them (like between the face and the hoodie).
  • Don’t distort the text too much, make sure it stays legible and looks good.
  • Try to leave the least amount of negative space where you need to fit text into.
  • You can create gradual transitions by leaving more negative space in areas where you have middle tones.

Step 5 – Distorting text

Finally, we got to the step, which will be repeated many times. This is the real deal, this is where the designing really starts. I will show you how to distort one text and then you will need to follow the same procedure to finish the whole design.

First of all, you need to select the Type tool and click anywhere on the Artboard. Make sure you have the Design layer selected. Type in your copy and then
go to Object>rasterize> OK, then press Esc.

Pic 8

Now you need to choose Object > Envelope Distort > Make with Mesh. You should also memorize the keyboard shortcut for this feature because you will be using it a lot (Command-Option-M or Control-Alt-M on PC).

Pic 9

In the Envelope Mesh dialog box, you can choose how many rows and columns you need for your distortion. Make sure you check the Preview to see the mesh on the text before you accept it. I prefer to have 4 columns and 1 rows most of the time with text.

Pic 10

If you arrange your text into multiple lines, then of course you can use more rows to make the distortion easier and smoother.

Now that you have the mesh on text, you need to use the Direct Selection tool and select the mesh point(s) that you want to distort. I prefer to select 2 or 4 points and the same time by creating a lasso selection around them. Once I have them selected I move them around and also rotate them by pressing R and dragging them clockwise in this case.

Pic 11

You can also edit the handles around each mesh point to adjust the distortion more precisely.

Pic 12

Step 6 – Editing text after distortion

If you decide to edit a text that you already distorted, there is still way to do it. Thankfully all kind of Envelope distortion is completely non-destructive in Illustrator and keeps the text editable. All you need to do is to switch to Edit Contents mode (indicated with a star shape in a frame):

Pic 13

Once you are in this mode, you can easily change the text and if you wish to switch back to work with the mesh you can choose the Edit Envelope option.

Step 7 – Repeating step 5 until you cover the whole portrait

This is definitely the painful part, because you will need a lot of patience to repeat this step many times until you cover the whole image with text. 

Assignment: You have been assigned a Nobel Peace Prize winner to research and create a typographic portrait of.

To begin, research the person by reading articles provided. Collect 20 or more quotes by or about this individual and compile a list (Word) to use in your portrait.

Follow the directions described above in creating the Typographic Portrait.

Grading is based on the final illustration reflecting the Nobel Peace Prize winner in type fonts chosen, quotes chosen and the placement of words so they successfully create the portrait. A variety of text styles should be used through out on the 20+ quotes (or phrases). The typographic portrait should look (reflect) your Nobel Peace Prize winner.