Advertisement
Typography

Create Illustrated Type from Sketch to Vector

by

As a commercial artist I do a ton of illustration, custom lettering and typography. There have been many cases that I've experienced where using a combination of both illustration and typography is the best solution to communicate the message. In the following tutorial, I'll show a method I use to approach and execute illustrating type.


Introduction

Illustrated type, instead of having the standard picture with a headline or some sort of the written copy, for me, can really take a piece to the next level. Of course, it should serve a purpose and make sense for its final destination, so first I will make sure my concept and word to be illustrated are solid before I start.

You can find the source files in a directory labeled "source" that came in the ZIP file that you downloaded. You may wish to look through them briefly before we begin.


Step 1a

I have decided to use the word "Type" for this tutorial because after all it is about illustrating type. So the first thing is to type the word "Type" in Illustrator. Normally, I will look at a bunch of different typefaces to see if any of the letterforms jump-out at me or spark ideas.



Step 1b

After looking through a variety of typefaces I decide, as I often do, on the classic ITC Avant Garde Gothic set in Demi 212.13 pt.



Step 2

Next, I print out a hair line version (outlined in black with a 0.25pt stroke) of the type. I use this print-out as a way of being absolutely solid on legibility, as opposed to completely building the letters from scratch, which I often do as well. This is probably the one thing I do that is different from most illustrators, but I am a designer/illustrator hybrid of sorts, so this is one of the ways I go about it.



Step 3a

Using that hairline print out, I sketch out the illustration directly on top of the print out. I quickly rough in any ideas that I may have. Here is one of the first concept sketches (wow that's an ugly drawing).



Step 3b

After a few other horribly drawn sketches I decide on the direction of the word "Type" being a twisty-turny pencil (like the crazy straws from when you were a kid).



Step 4a

Bring the sketch into AI and lock it down (Command + 2).



Step 4b

In AI, using the Pen Tool, start to trace over the appropriate lines of the sketch.



Step 4c

At this point, just rough everything in. Start modifying the lines from the sketch so that they make more sense and look better. Here you can see that the sketch was a little too loose on defining the letter "p." Fix any issues like that by drawing them correctly (using the Pen Tool still).



Step 4d

Here all the lines are drawn and the overall shape/look of the illustration is starting to form.



Step 5a

Next, go in and refine all of the spacing and shapes so that they are clean and look even. For example, on the letter "p" you can see that the circle shape creating the bowl is imperfect. This needs to be fixed up so that everything looks neat and clean.



Step 5b

Here everything looks good and for the most part evenly spaced. I think it's coming along nicely - hehe!



Step 6

Next simply color in the shapes, using the color palette or swatches. I chose colors that are relatively close to the actual colors of the pencil. Using the Rectangle Tool simply drop a background color in, so that it's easier to see the line work. If you wanted, I think you could actually stop at this point and you would have a rather nice illustration.



Step 7

But we're not quitters are we? Nopers! Next, lets put in some details that take this illustration to the next level. As you may have noticed there is a line on the left-hand side of the letter "T" that seems unnecessary. Without the line it was kind of hard to read the letter "T."



Step 8a

We'll fix this issue (*wink, I may have planed this from the beginning) by using the Pen Tool to draw in lines so that the pencil reads "No. 2."



Step 8b

Next, draw in two lines throughout the yellow pencil letter-forms to describe the edges of the pencil. I am drawing in red now, so that you can see what I am describing.



Step 8c

Once all of the lines are drawn, select one of the newly drawn pieces. Then go to Select > Same > Stroke Color. You can also use the Magic Wand Tool. Choose a nice orange that almost blends in with the yellow color of the pencil.



Step 8d

Select the "No. 2" line work, then bump the stroke up to 1.5pt in the stroke palette.



Step 9

Again using the Pen Tool, draw a few lines in the metal shape. In the stroke palette check the box to make them a dashed line.



Step 10

Change the background color to a nice darkish blue/green.



Step 11

Next we'll put in the final touches. Select the pink eraser shape, copy it (Command + C), and past a new shape in front (Command + F). Paste in a texture, which you can get from my Create a Vector Texture From Scratch tutorial, and past it behind the new pink eraser shape. Select the texture and color it a slightly darker pink than the initial pink color. Select both shapes, then Option-click and select Create Clipping Mask.



Step 12

Select the cream wood of the pencil shape, copy it (Command + C), and past a copy in front (Command + F). Paste in another texture, which you can get from my Create a Vector Texture From Scratch tutorial, be sure to paste it behind the new wood shape. Select the texture and color it a slightly darker cream color. Select both shapes, then Option-click and select Create Clipping Mask.



Step 13a

Just for fun draw (using the pen tool with an applied stock brush) a scribble and the word "illustrating" coming from the pencil tip.



Step 13b

To make it seem like the pencil has drawn a line that intertwines within the pencil; select, a single point using the Direct Selection Tool, and copy (Command + C) it. Then the trick is to deselect all (Shift + Command + A) and past a copy of the point in front.



Step 14

The very last thing to do is to paste a large texture in just above the "background" layer and color it one shade different than the background color. This just gives it a little something extra. And done!



Final Image

That's it! The final image is below. You can view the large version here.


Related Posts