Using Illustrator’s pencil tool and shapes of solid color, you can imitate the graphic novel styling of A Scanner Darkly. An animator from the film shows us how.

Director Richard Linklater’s A Scanner Darkly impressed audiences this summer with a stunning 2D animation style that mixes heavy blacks lines with shapes of solid color to represent a realistic image. After filming the movie live action, we used proprietary vector software to animate directly over live footage, preserving the likeness and performances of the actors – a process called “Interpolated Rotoscoping.” This tutorial will show you how I was able to recreate a similar effect using tools in Adobe llustrator. Using Illustrator’s pencil tool and shapes of solid color, you can imitate the graphic novel styling of A Scanner Darkly.

1

Select an interesting image for photo reference – the bigger the dimensions of the image the better. Go to File>Place to insert it into your Illustrator file.

2

Since you’ll be drawing right over the top of this reference image and you want it to remain untouched, you’ll need to lock it on its own layer. In the Layers palette, double-click the layer and name this layer Image. Create a new layer to draw on by clicking on the Add New Layer icon at the bottom of the Layers palette and call it Blacks.

3

Press N or use the mouse to select the Pencil tool, and check that the Fill color is black and the Stroke color is None. You won’t be using the stroke color because you don’t want the line to have a boring static width. Instead, let’s can manually produce a thick-to-thin brushstroke effect by automatically filling in the region between two arcs drawn with the pencil tool.

4

Double-click on the pencil tool and change the settings to those shown here (Fidelity to 4 pixels, Smoothness to 35%, and check both Fill New Pencil Strokes and Keep Selected). You may prefer to adjust these later on depending on the kind of result you want, but these settings are good for making a smooth descriptive line.

5

You’re now ready to begin drawing. Similar to inking a graphic novel, start by drawing thin black outlines around major forms and fill in the darkest regions. Remember to be expressive with calligraphic shapes that yield a more dynamic result. If you need more control, you can switch to the Pen tool and draw exact curves or straight lines; however, this can become time consuming. I prefer to draw quickly with the Pencil tool and then manipulate the results afterwards by using the Direct Selection tool to refine the shape and the Pen tool to add more lines. The Pencil tool, unlike the Pen, tool does not apply Fill or Stroke until you release the mouse, which is a particular advantage since it often hides edges you need to trace as you draw them. Toggle the Eye icon on your Layers palette to hide the Image layer to check your results as you go. If you release the mouse before you completely circumnavigate the shape you are tracing, you can simply draw another shape that completes the shape. Or if it is completely wrong, you can press Command-Z (PC: Control-Z) to undo that last action and redraw it. If your line is jagged or rough, you can use the pen tool to delete extra points to smooth out the shape. Deselect the shapes after you’re satisfied with them by pressing Command-Shift-A (PC: Control-Shift-A).

6

Once you have finished with “inking” the blacks, you’re ready to begin painting in the color. I prefer to work from dark to light. Create a new layer underneath the Blacks layer and call it Dark Blue. Each color will have its own layer and be divided into four to five tones, each with its own sublayer. Press I or use the mouse to choose the Eyedropper tool and select the appropriate colors right from the photo. Drag the color from the Toolbar into the Swatches palette (Window>Swatches). When you’re satisfied with your color range, double-click each color individually in the Swatches palette to set the swatch options and check the Global box. This will make it easy later on to optionally replace all instances of that color by simply adjusting the swatches. Make sure you are on the right layer and press N or use your mouse to switch back to the Pencil tool. Just like you did for the blacks, color over the reference image with the dark blue shapes. Finish all of the dark blue shapes before moving on.

7

Now that you have finished all the dark blue, create a new layer and select the next darkest tone from the Swatches palette. Repeat the process of drawing over the reference image to fill in each new color. Toggle the Eye icon on your Layers palette to hide the Image layer and check your progress.

8

It’s important to stay organized with your layers because there will be lots of shapes and colors to keep track of by the end. If you don’t stay organized, it can become a huge headache to refine the shapes later on. The Blacks layer should remain on top at all times, and each new group of colors they should go underneath the previously finished ones. That way you are always filling in behind what you’ve previously finished.

9

Try to describe accurately the forms with your shapes, and don’t be afraid to play around with colors until they mesh well. Some parts of the picture, such as people’s faces, will require emphasis and greater detail. You will probably have to add a few additional colors to increase depth and to draw attention to those regions.

10

Once the whole image is filled in, turn off the Image layer and clean up the illustration. I usually create a correction layer on the bottom that can be used to quickly fill in the gaps and a layer on top to cover over any ugly spurs in the shapes. Then unlock the Image layer and drag your reference image to the side to compare it with your drawing. Continue to manipulate the image until you are happy with the results.

I expect to spend four to five hours on an image this complex. You can reduce the time you spend by limiting your colors and detail. Good luck experimenting with this new technique!

Check out the second issue of Adobe Illustrator Techniques newsletter for an interview with the lead animator of A Scanner Darkly, Sterling Allen, on vector art and inspiration.

Share & Enjoy


 

  1. [...] you want to change your picture to this type of designing work follow this link http://www.layersmagazine.com/imitating-a-scanner-darkly.html and try it in Adobe Illustrator.You can design your own picture and it can be used has profile [...]

  2. Bill Frederickson (Reply) on Wednesday October 4, 2006

    What’s the point? I mean am I dis stupa or whaaat? Are you hugh?

    • Bill (Reply) on Wednesday October 4, 2006

      YEAH

  3. li'bri (Reply) on Wednesday October 4, 2006

    dis is so F.en hard to do!!! but it looks ight…

  4. li'bri (Reply) on Wednesday October 4, 2006

    dis is so F.en hard to do!!! but it looks ight…

  5. bob loblaw (Reply) on Wednesday October 4, 2006

    thats not how it was done for the movie..if they did it this way it would take forever. way to trace though.

  6. Permana Jayanta (Reply) on Wednesday October 4, 2006

    Fantastic …. I’m gonna try it …

  7. Jav (Reply) on Wednesday October 4, 2006

    Although live trace will not give a result quite like this, it does provide with a quick set up. Place the image, live trace it with 16 colors, expand it, ungroup it, and then select each individual color and simplify the shapes (object>path>simplify). Way faster than manually tracing it, and the pretty close to the same result. The only things missing from there are the very dark smooth traces along the outline of the faces and expressions

  8. Jesse James (Reply) on Wednesday October 4, 2006

    Live trace is a good feature but inferior to this technique. The problem is that everyone and their sister knows how to press the two buttons it takes to vector trace a photo. That effect can be customized to some extent but this technique (+ my intuos tablet) gives the artist more freedom to manipulate and control the elements in the illustration. It also allows the image to be built from the ground up instead of deconstructing a mess of sloppy vectors that illustrator has thrown together.

  9. Jeff (Reply) on Wednesday October 4, 2006

    Holy shit this guy makes it sound easy but its time consuming!

    imagine doing this to a movie! Frame by frame? No way!

    How many “A Scanner Darkly” animators does it take to change a light bulb?

    None! They are too busy animating.

  10. Laura (Reply) on Wednesday October 4, 2006

    I notice you give Linklater a mention at the top but you really need to mention Bob Sabistan. He was the one to take this style and make it popular again. Linklater piggbacked onto Sabistan later and because he has “the name” he gets the credit. Sabistan invented the process of rotoscoping on a computer. rotoscoping has been around for decades maybe a century.

    Looking forward to doing this tutorial-thanks.

  11. f00bar (Reply) on Wednesday October 4, 2006

    Damn, even if I score a pirate Illustrator I still have to be able to draw? lol. Really nice work though! There is no substitute for talent, practice and skill.

  12. Dallas Midgette (Reply) on Wednesday October 4, 2006

    Outstanding results, great tutorial. Using a wacom tablet cuts production time in half.

  13. Loubna A. (Reply) on Wednesday October 4, 2006

    Excellent job. i am really impressed with this type of art. Not only did you outline the actual picture but you added every detail that was needed in order to complete the picture. I tried to do the same topic in my school, but mine turned out to be fairly adequate. That one without doubt was perfect. impressive work, keep it up.

  14. ryeman (Reply) on Wednesday October 4, 2006

    hmm im gonna give this tut a try.. because i have no life and it seems pretty cool :D

  15. jorvi (Reply) on Wednesday October 4, 2006

    very good tut,the best that I found in the all Web..Congratulations!!
    I try to make it with Photoshop ,and itīs difficult ,but not impossible….thanks…

  16. Salaryman Ryan (Reply) on Wednesday October 4, 2006

    Wow, I did not realize that this effect took so much labor and time. Much respect to those who produce this kind of work on a regular basis.

  17. shoe (Reply) on Wednesday October 4, 2006

    shit thats really cool mate

  18. shoe (Reply) on Wednesday October 4, 2006

    thts cool mate amazing ………

  19. sravan (Reply) on Wednesday October 4, 2006

    excellent

  20. Brenda - Chik Flix (Reply) on Wednesday October 4, 2006

    Incredible! I just plugged my Intuos into my Macbook and was good to go. My personal challenge is not getting so hung up on details. (my first face looked like it was wearing camouflage. lol) Aside from that, I had no problem with this tutorial. Thanks! :-)

  21. Roslee (Reply) on Wednesday October 4, 2006

    Omg! really good tutorial and i’m really jealous, it looks so good! But i’m having trouble outlining my photo…i can’t seen to create that effect…. :( are there any tips or tutorials on outlining or shading?

  22. me (Reply) on Wednesday October 4, 2006

    i dont know how to do this
    can somebody halp me
    pertty pertty peas

  23. neisha (Reply) on Wednesday October 4, 2006

    i love it maybe you can send me some more of your work and the instuctions to go along with them

  24. JT (Reply) on Wednesday October 4, 2006

    Is there a video tutorial for this effect, it’s really good but wow, very time consuming

  25. brandfantom.wordpress.com (Reply) on Wednesday October 4, 2006

    That’s so awesomed.

  26. Johnny Utah (Reply) on Wednesday October 4, 2006

    This is just tracing. Theres nothing tricky about it. No design went into this at all. No thought process etc. It’s good for an exercise getting to know illustrator but thats about it. How about starting with a sketch, moving to a tight comp after you figure out the design and layout, then rendering it vector.

    People need to learn the basics of drawing and design. Not just tracing. Take the time to learn how to draw a human.

  27. fosh (Reply) on Wednesday October 4, 2006

    johnny don’t be an arrogant prck

  28. JT Fuller (Reply) on Wednesday October 4, 2006

    I have been watching you guys since episode 1 when I found out about you and learned a lot. But, is there a easier way to get this effect or can you do a podcast on your show how to turn a photo into a cartoon or this effect. PLEASE!! I am fairly new and doing this stuff is hot and fun. Thanks Guys, you are gladly appreciated in the Photoshop Adobe world. Amen.

  29. Sienna Yi (Reply) on Wednesday October 4, 2006

    nice work!!
    your tutorial helps me !!!

  30. armanbrush (Reply) on Wednesday October 4, 2006

    I have done a similar tutorial on my site, but I use pen instead of pencil. You have given me a new and brilliant Idea.

  31. armanbrush (Reply) on Wednesday October 4, 2006

    by the way, may I share my tutorials for those who are real beginners. you can visit http://www.how2tutorial.com

  32. [...] Imitating A Scanner Darkly in Adobe Illustrator [...]

  33. Katherine (Reply) on Wednesday October 4, 2006

    This process can be done it Photoshop also with the pen tool and lots of layers High res immage needed also and copy it make one a black & White and use the posterize tool to help with the color layers

  34. ken (Reply) on Wednesday October 4, 2006

    its cool…..

  35. [...] from a scanner. But this picture of mine is a raw image. For further about the tutorial here is the link. ORIGINAL [...]

  36. [...] a great tutorial regarding how to create a portrait like [...]

  37. Jones (Reply) on Wednesday October 4, 2006

    Man, you put a lot of effort into this, and I think that’s amazing. But there’s a photoshop plugin from Topaz called “Clean” that gives the same effect. Maybe even just using that in addition to the skills showed above, probably would save you 3 hours.

  38. [...] tutorial here Spread the Design Kingdom love! If you like this article, please consider sharing it with your [...]

  39. Andrew Shelton Sr. (Reply) on Wednesday October 4, 2006

    I’ve pulled single images into Macromedia (now Adobe) Flash. Select it, and do the Modify>Trace Bitmap. Tweak these settings to raise/lower the realistic/toony look, fewer/more colors, etc… Works in seconds…

    I’ll sometimes then take the vector points, delete some, straighten up some jagged lines, etc… to make it all look better… Someone PLEASE make a multiple image Trace Bitmap for Flash!!! I mean, even 30 frames at a time (one second of film) would be awesome..!!!

    ~ARS sr.

  40. Dhenchu Dhenchu (Reply) on Wednesday October 4, 2006

    WTF is Adobe Illustrator and WTF is The Scanner Darkly. Is it some kinda image scanner?

  41. @a_iki (Reply) on Wednesday October 4, 2006

    Thanks for sharing. Will surely try this out.

  42. Seven' (Reply) on Wednesday October 4, 2006

    It’s fantastic, but I don’t can make this in PS CS5… Help me?

  43. Gimp Brushes (Reply) on Wednesday October 4, 2006

    i was looking for this tutorial for 3 days. Finally i’ve found it !!! thanks a lot



Planet Photoshop Photoshop World KelbyOne Lightroom Killer Tips Scott Kelby