Monday, November 27, 2006

How to Create a Digital Pen and Ink Drawing From a Reference Photo

I illustrate everything I produce on the computer, using a Wacom graphic tablet -- it's like drawing on paper with a pen, only the "ink" goes right into the computer. I've talked before about how I draw with Flash, but I thought it might be more interesting to actually see an illustration being created. Thanks to a quick download of Windows Movie Maker, I therefore present the World Premier of the "How to Create a Digital Pen and Ink Drawing From a Reference Photo" video.

The first thing you have to do is to find a "reference photo", a photograph you use to form the base of your drawing so you don't have to come up with everything from scratch. I decided to make a "kung fu" character, so I went to Google Images and did a search for "kung fu". The image to the right here caught my eye -- I liked the stance and the way the pants creased and folded. He looks (no offense) a little dorky, but I knew I could fix that in the drawing process.

The video starts after the image has been imported into Flash (using either the old reliable Cut and Paste or File - Import). I sized it to fit on the canvas and started recording. In real-time this took 12 minutes, though I've doubled the speed so it will only take six minutes. There's no audio, it's visual-only.

Here's the video:

What You're Seeing:

  1. Create a new layer on top of the one holding your image, and draw on that.

  2. Trace the lines you want using a contrasting color -- I usually go for a bright green, it really stands out.

  3. Once you have everything you want to keep traced, hide the image and check to make sure you got everything.

  4. Once you're set, delete the image layer, "select all" (CTRL-A), and group it (CTRL-G).

  5. Draw a white rectangle behind the figure so you can fill in all the interior with white. Break apart the group holding the lines (CTRL-B) and click on the white outside the figure. The goal is to remove all the outside white and leave just the filling.

  6. Some of the interior white probably will be selected, which means there was a break in the solid black outline. Zoom in and close the gaps. Eventually you'll be able to select the exterior white, and delete it.

  7. Select All and group again. Drop in your background element(s) -- in this case a simple black circle. If you want to outline your lineart so it has a white gap between the line and the black background, just use the outline tool.

Here's the finished product:

Hope you enjoyed this brief look into how you can use your computer as a lightbox, pen and ink quill, bristol board, intermediate and finishing illustration desk, all in one!


annie'sbuddie said...

I thought you meant Flash the Shiloh Shepherd.

WOW! I'm stunned. Everytime I try using MS Paint or something like that to just outline stuff or make circles & boxes it looks like someone with parkinsons disease got loose with my mouse.

I know someone who uses his notebook screen as a lightbox & lays tracing paper over photos to do pencil & charcoal drawings of his dogs. They come off with a really neat effect. Don't know what the notebook thinks about it.

Jimmy Mac said...

Ummm... Yeah, that's the way I do it, too.
Now that everyone knows our secret, I guess I'll have to get back to work on my novel.

Anonymous said...

Ummm, yeah, I'm with Jimmy Mac. I read all the comments on this. Got lost around "Flash" and somebody doing something with charcoal. How you figured all that out is incredible. You youngsters... always on the cutting edge. Next thing you know, we'll be landing on the moon... what's that... well, okay, keep on drawin' Jeff. Your dinosaur sister -- Denise