loading
Think you can't draw because you don't easily create photo-realistic graphite sketches on the first try? Don't worry, in real life drawing isn't a closed-book test. You can use your notes, you can copy off other people, you can use tools, you can even trace! (Gasp!) And I'm going to show you how...

The following method I developed while in the Eyebeam OpenLab to create drawings that are a combination of a flat, comic book style and "how to evacuate the airplane." It starts with "analog" drawing moving to the computer for color. I'll detail all the steps and you can pick and choose elements of this method to create whatever style drawings you like. This method can help you quickly achieve a realistic and accurate drawing.

This instructable is in the spirit of my past instructables - tools, methods, and workflows I have developed in my past projects, published here because I hope they are useful to others in whole or part. For examples on how I have used this particular way of working see these projects completed while at Eyebeam:

- Wish You Were Here: Postcards From Our Awesome Future
- PeopleProducts123.com

What you will need:

Drawing Supplies
- Black archival ink markers with a variety of line widths. Look for Sakura Pigma Micron Pens, Staedler Pigment Liners, or Mars Professional Precision Pens. You could also use technical pens like Rapidographs, but I find the marker tips allow for more variation.
- pencils
- archival paper
- tracing paper
- light table or light box (optional)
- ph balanced artists tape

Why archival? Always be prepared to make amazing work that you'll want around forever.

Software - open source:
- Inkscape - free and open source vector editor
- Potrace - Free software for converting bitmaps to scalable vector graphics
- Vector Magic - free online bitmat to vector converter

Software - $$ commercial $$
- Adobe Illustrator CS2 and higher

Other
- access to a computer, scanner, and printer

Read on if you are a purist and think working from photographs, using light boxes, projection, or tracing paper is "cheating."

I've found that some people, mainly non-artists, think that using tools like light tables or projectors is somehow less legitimate. In fact, most artists use these tools to create their work and have for centuries. From Vermeer to Warhol, artists have used a variety of optical devices as drawing aids. There's no reason why you shouldn't. (more details below)

- Most artists use tools. If they don't use projectors and light tables, we use various other methods like cameras, lenses, slide film, mirrors, grid systems, sighting and angling, measuring devices, rulers, compasses, and triangulation. But it really doesn't matter what tools you use. Some may disagree, but in art, more important than how a work is made is what that work says. Use any tool available to make the work you want to make. Focus less on tools and methods and make sure your work means something.

- Using a projector or light table is not a shortcut. It will not make your drawing good, just different. Just like having a good thesaurus will not automatically make your writing better, er, more exquisite. It's just a tool. While it can make the work easier, you still gotta learn how to use the tools well.

- Tracing doesn't mean copying or plagiarism. See appropriation art. In fact, altering an image in your drawing process can contribute to a Fair Use argument for using copyrighted material to create new works!

- Although this instructable isn't about copying art works, copying art is an excellent learning tool used in classical art instruction. When you recreate an artists work, you gain insight into how the original work was made. Straight copying of an art work can help you build your skills.

- Read up on the Hockney-Falco thesis, watch the movie (if you can), or this Charlie Rose interview online.

If you're still not convinced, that's ok.

Now that that's done, lets get to work...

Step 1: Working With Your Photo

1. Find a photo to work from. Try to find large images that you can print to 8x10 inches.

Possible places find photos:
- your own photo
- Flickr Creative Commons search and regular flickr search (if you'll be significantly altering the image)
- Wikimedia Commons
- Public Domain images
- Library of Congress Image Search
- Google Extra Large Image Search

Remember, you can use copyrighted material under the Fair Use Doctrine if you are using it for parody, commentary, or altering it significantly.

Image 1 - The photo I am using in this example is of author, Stephen Duncombe and was used in a catalog for a project I did with Packard Jennings for the San Francisco Arts Commission.

2. Crop the photo

Crop your photo to the important areas. Remember to make sure your image is still large enough to print with resolution that will show detail.

Image 2 - The original image, while great on it's own, includes part of the plastic Ronald McDonald. I want to create a portrait focused on his face, so I need to crop the photo.

3. Sharpen your image to an unusually high degree - this will help you see details through the paper when on the light table.

Image 3 - `the sharpened image

4. Print it out. I use a cheap laser printer, but use whatever you have.

Step 2: Trace Your Image

1. Prepare your space - Using your tape, tape down your print out of the sharpened image to your light table. Tape the drawing paper on top so you can flip it up an away. The tape keeps everything aligned when you flip to see the layer below. You will be able to see your image through the paper on top. You can also use tracing paper with or without the light table if you prefer. Have all your materials ready. Because I am kind of a geek/efficient, I usually lay out all my pens and pencils in order of thickness or hardness. I like to get an audiobook, comedy album, or lecture to listen to so I can pass the time.

2. Trace in pencil (skip to pen if you are a bad ass or reckless). Try to capture the details of the image. Remember, tracing alone won't make your drawing good. If you've had any drawing lessons in the past, now is the time to pull those to the front of your brain. Remember these gems?
- stay loose and expressive with your lines
- remember to draw only what you see, not what you know to be there. (aka noses aren't triangles)
- turn off the light and check how your drawing looks every once in a while
- don't worry if it looks bad, just keep going. Everything I have ever made I think looks awful at some point in the middle, even when it turns out great in the end.
- don't forget you can erase and rework an area. And don't get obsessed with it either.
- keep the original photo open on your screen or printed out near you and check against your photo. Study it. Make sure you are drawing only what you can see.

3. Retrace in pen - Now tape your pencil drawing to the light table and new piece of paper on top. Retrace in pen. This time, don't draw every line you had before. Choose which lines need to be there and leave out the unnecessary ones. Some tips:
- change pen sizes often. Start with outlines and move to details. Remember, you can always make a thin line thicker, but not the other way around.
- heavier lines around edges help create and illusion of depth. The outside edge of every drawing I usually draw with a Pigma Micron 08 or equivalent.
- it's ok if you screw up
- - you can remove lines with white out or by scraping it away with a razor blade
- - you can also remove or alter lines in your vector editor
- - don't let perfection lead to inaction. Just keep going.
- draw lines inward. You get more control lifting the pen to achieve a tapered line then to gradually lower it and achieve the same effect.
- use pressure to vary line width and taper your ends.

Step 3: Convert to Vectors

Guess what? If you just want to make an analog drawing, you're done. But if you want to keep working digitally the next step is taking your analog ink on paper drawing and turning it into a digital scalable vector graphic.

1. Scan your image
Fairly simple. Note that you do not need a 300+ dpi high resolution scan. 800x600 at 72dpi is probably fine. If you're nervous, make a it a little bigger or denser, but it likely isn't necessary.

2. Convert your scan to a vector image
What's a vector image? Look it up.
You have a couple ways of doing this.

A. Vector Magic - Vector Magic (see image below) is a free, online tool for converting images to vectors. In my experience Vector Magic works, but it's designed for simpler drawings than what I have personally attempted. However, working in sections, with smaller images, or in a different style may yield promising results. And it's free!

How:
- follow along site using their settings.
- choose just a black and white palette.

B. Inkscape/Potrace - Inkscape (wikipedia) is a free and open source scalable vector graphics editor which has a bitmap converter built in called Potrace. Basic instructions are available on the Inkscape wiki. There are several setting you can play with to get the effect you desire. And it's free and open source!

C. Adobe Illustrator CS2 and up - When CS2 was introduced Adobe added "Live Trace" which converts bitmaps to vectors. While there is massive documentation put out by Adobe for this feature, I'll make it simple.
- open your image in illustrator
- select your image by clicking on it
- press the live trace button (see image)
- the default setting usually works fine, but sometimes I select Comic Art. Play with the options and you can see how they are affected.

Step 4: Begin Coloring Your Image

Coloring your image depends a bit on the software you're using. For Inkscape and older Illustrator users, it's manly creating shapes with the pencil tool and some work with the path manipulation tools. For CS2+ users, you'll be slightly relieved to know that paying hundreds of dollars for proprietary software will get you a bit of a shortcut with the Live Paint feature. Though I wouldn't say it was worth it.

A. Illustrator CS2+ - Live Paint allows you to fill outlined areas of an image with a paint bucket tool, much like in an image editor. The result is an intuitive coloring-book style process that makes it more confusing to explain why it doesn't normally work like this.

1. Make sure you have everything selected (command-A) and press the Live Paint button (see image)
- enclosed areas will highlight in red as you scroll over them. You can color these areas by choosing a fill color and clicking the area with the live paint bucket tool. Objects that aren;t enclosed (an incomplete circle or a square with corners that don't meet) don't work, although there are settings you can adjust if you want to get technical. Once you've colored in everything possible, press the Expand button and do the following steps:
2. expand Live Paint
3. take the magic wand tool, select all the white areas and delete them.
4. select all the black lines and move those to a new layer above the color layer. More on this below.

The image below shows what closed objects I was able to color using Live Paint. Not much, but it helps. From here, the instructions are basically the same for all vector editors so pick up below...

B. Inkscape and older versions of Illustrator -
1. Lock your layer with the black lines. Now you'll begin coloring underneath it. As you add new layers, keep the black lines on the top.

Note: thinking about layers. Start coloring in areas keeping in mind how these layers will build up. You're going to want to manage your layers well and keep elements separated. I often have over 10 layers on a drawing like this just to keep things easy to work with. Think about the order you draw layers as well. Eyes for example would go - whites, irises, then pupils. Imagine you are laying cut pieces of paper on top of eachother. Layers above can help hide what's underneath and make your work easier.

2. Use the pencil tool and begin drawing your layers. I usually start with a base skin tone and work my way up. See images for details.

Step 5: Manipulating Paths

Being able to manipulate paths as you color your drawing will make it easier and faster. Here's a few tips.

1. Making Donuts (Follow along with the video below)
When coloring in the skin tone, the skin color covers the eyes in the left glasses lens, which I didn't want. The way to deal with this is by cutting a hole in that path - a donut hole if you will.
A. First trace out the larger area or, in my metaphor, the outside edge of your donut. In illustrator you can join the ends of paths by pressing command J.
B. Then trace out the shape you'd like to cut out - or the donut hole. Again, command J will join the ends of your paths and complete the circle.
C. Select both paths - and only those paths.
D. In Illustrator use the pathfinder window. You have a few options you can try - the icons should be helpful - and if you don't get the effect you want, you can always undo. Hit expand to make the change take effect, and then choose your fill color for your new 1 piece donut shape. For Inkscape users, these options are similar and listed under the Path menu.

2. Joining areas (Follow along with the second video)
I usually trace things while zoomed in to an area and do sections of an image at a time. When doing a skin tone, the result could be 8-10 paths that together fill in the face, but with so many small sections they can become cumbersome to work with. There is a way to connect (not group) them into one giant shape.
A. Draw your two pieces that you want to combine. They need to overlap at some point.
B. Select both areas
C. In the pathfinder window (or path menu in inkscape) join the two areas
D. expand and recolor if necessary.

Step 6: Final Touches, Other Handy Tips...

Final Touches

Now is the time to step back, look at your work, and see what needs to be adjusted. What will need to be done will depend on the drawing you're working on and the style you're going for. I'll just review the adjustments I made to this drawing to give you an idea. You can click on a before and after image to compare.

- added a background to make it seem more complete

- added shadows to the face under the eyes and nose, inside the ear, and below the chin and lips. Usually I like a flat look, but this looked much better.

- the subject looked older in the earlier version. Fixed by changing hair color from grey to brown (what was I thinking?), and creating highlights in the hair.

- he also looked a little worried rather than the inquisitive look I was going for. Fixed by deemphasizing some of the lines in the forehead by changing the color of the lines and lowering the left eyebrow.

- slightly changed aspect ratio of the image because it looked too tall and narrow.

Other Tips

- This technique Packard Jennings also uses in his drawings, but he uses a small brushes and india ink instead of pens.

- Helena Keeffe uses a similar method for the portraits in her Living Proof project and on her Muni Maps project.

- I use a wacom tablet to draw in illustrator. If you're going to be doing a lot of this kind of work, it can be very handy.

- Another Instructables user thesparine, posted an instructable on how to create a pencil sketch from a photograph. There's some good tips, including some drawing basics and how to get around using a light table by using your window. I'd suggest reading it through as well.

- If you think it might be useful to other people, add your drawing to the Open Clip Art Library like I did.
<p>Here's a variation on your technique (at least the first half of it) that can be used by people with no computer skills as well as no drawing experience :-) ... </p><p>https://www.instructables.com/id/The-Smart-O-Graph/</p>
<p><a href="https://www.flickr.com/photos/25750579@N07/15860304549/" rel="nofollow">https://www.flickr.com/photos/25750579@N07/15860304549/</a></p>
cool tips...
that looks awesome!
Wow, thanks a whole bunch for this Instructable. I have about zero ability drawing and your breakdown and work flows really help me!<br><br>I'll use this on my future Instructables!
Started using your teachings and sharing some images on <a href="http://www.openclipart.org/user-detail/CrLz">OpenClipArt</a>.&nbsp; My Instructables look a whole lot better to me! Thanks again for the instruction.
Hey that's great! Glad to see it!
Nice Nice!
what is the brown paper in the second to last image on this step? I really like the look of inked work on it!
it's just the photo, it was actually drawing paper with tracing paper on top, backlit.
Uhmmm awesome.&nbsp; Im playing around with it now!&nbsp; Great Instructable!&nbsp; <br />
thankd....very good... i will it
Thanks! Pretty good.
Thanks for posting this. I'm going to be using this for a project really soon. :D I need to get clean lines out of a portrait to embroider it!
im too poor for commercial software :( would GIMP work instead?
Mage, when you read the instructable you'll notice that free open source software options are mentioned specifically.
Great instruckable and so nicely done to encourage people and build confidence too.<br/><br/>I have been an amateur CG artist for many years starting with an Amiga computer back in the late 1980's and you have managed to teach this old dog about new sites to get great free art, thanks for that too.<br/><br/>I also have the Corel Draw suite but I would be remiss in not telling you and other readers about my favorite and now most used graphic program Xara Xtreme. It is a vector program like Adobe but costs much less with many better and faster features who's photo handling ( bitmaps) is simply amazing! It's way faster, makes files that can be much smaller too. <br/><br/>I have attached one of my feeble and early freehand attempts but also provide the official Xara site and a form that can really show what can be done with this inexpensive but easy to use and flexible software.<br/><br/>The company<br/><a rel="nofollow" href="http://www.xara.com/us/products/xtreme/">http://www.xara.com/us/products/xtreme/</a><br/><br/>The forum<br/><a rel="nofollow" href="http://www.talkgraphics.com/">http://www.talkgraphics.com/</a><br/> <br/>See the Xtreme and Xtreme Pro sections as well as the The Xara Gallery<br/><br/><a rel="nofollow" href="http://www.xaraxone.com/">http://www.xaraxone.com/</a><br/>Free tips, tutorials, how to's and more.<br/>
wow
I love this!
Use corelDRAW, i just looooooove it...
isnt this kinda like what some famous artist did, i forgot his name but he did like the cambells noudle soup thing
You're thinking of Andy Warhol.
yup thats the dude
why is this example using my college advisor!?!? stephen duncomb. (i <3 him)
'cause we are buddies.
the original pic he looks bored. the final pic he looks depressed you did a great job. but i can't learn.
Who is that?
I stumbled upon your instructible and I find it incredible that you were willing to document and share your experience with others! For years I thought illustrating a personal story in this style would be beyond my drawing ability. Thank you so much for detailing the steps needed to achieve this look. I was excited when I found how to achieve a pencil outline in photoshop, but it doesn't appear to have nearly the beauty as this technique. Again, MANY thanks! People like me benefit greatly from people like you -- and we are EXTREMELY appreciative!!!
I actually want to do this, but just don't have the time, they should make an app that does this kinda stuff automatically, and if there is can someone tell me about it?
if you have PSCS or any PS really theres a filter inside called poster edges that allows you to do this but it still has to be cleaned up (lots of tiny black pixels show themselves.) Unless theres a way to get them off, going in a coloring them out is the only way that I know of. Just a note though, it won't look this clean and perfect unless you take the time to do it, but it's a quick way to make it look interesting.
Thank you I really needed this information more then you know. For a project that I am working on with a less than shoe string budget.
Props man, great tut. Definitely making some vector art tomorrow (when I can scan without waking the hoose). The original image scared the crap out of me!
Muy bueno!
Rememer to convert image to a bitmap before vectorizing. Live trace (illustrator) only works on a .bmp image.
actually (for me at least) it has worked with every image format I tried.
Nice instructable. Thanks. Fuzzy
Thank you so much for posting this! I'm looking forward to trying this Instructable out.
i am badass enough to skip to pen! i think...... no no im not,..... ill start out with pencil
Hmm, never traced from a photo before to draw- might try it, although I think it might be a step back for me. Good techniques for doing that though, nice job
Oh please, don't take a step back. I wouldn't want you to damage your ability.
haha easy man. All I'm saying is that I'm meant to be doing more designing things (architecture school) than tracing other people's designs. But tracing can still be a good tool for learning.
I do the tracing part also on the computer with a Wacom tablet on ArtRage.
that works. I don't do the tracing with the wacom tablet because the pen provides more inconsistencies and hand drawn lines end up looking more organic.
I love to draw. I thought my skills would never improve after 8th grade because I had this idea that tracing (even your own work) was somehow cheating. I remember kids in school flipping a picture over to feel the back to see if there was an indent behind the lines or pencil marks on the back side as evidence a nice picture had been traced. Years later, I picked up this book on drawing comics and I was shocked when I read about light boxes and pencilers, inkers and colorists. Ever since then, I've followed the 'anything goes to get the message across ' technique. Incidentally, I picked up a little light box at Michaels for about $20.00. If anyone is looking for a decent cheap one. Thanks for mentioning the open source software. I can't wait to try some of them out. Great Instructable! I hope this gets more people exercising their creative instincts.
Christophor, glad to hear it and thanks for the tip on the cheap light box.
cool. i wondered how they did this kind of art..
well, I don't know how they all do it. This is just something that I figured out more out of necessity than anything. Thanks!
Beautifully done. Will definitely give this a try! +1 and Fav'd
Inkscape link isn't working-it returns to this page (the link includes this web address).
Ah, thanks! I just fixed it. Check out <a rel="nofollow" href="http://www.osalt.com/">OSalt</a> too.<br/>

About This Instructable

118,197views

735favorites

License:

Bio: Eyebeam OpenLab Research and Development Fellow 2006-2007, Eyebeam Senior Fellow 2007-20010 You probably have seen his work already and don't know it. Check the ...
More by slambert:Meth Lab Cold Brew Coffee Method Drawing for Non-Majors: using analog and digital tools Look Like Your Enemy: Create signs that confuse, astound and parody! 
Add instructable to: