Imitating A Scanner Darkly in Adobe Illustrator

SHARE
, / 1595 87

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.

87 Comments

  • li'bri says:

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

  • bob loblaw says:

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

  • Permana Jayanta says:

    Fantastic …. I’m gonna try it …

  • Jav says:

    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

  • Jesse James says:

    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.

  • Jeff says:

    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.

  • Laura says:

    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.

  • f00bar says:

    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.

  • Dallas Midgette says:

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

  • Loubna A. says:

    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.

  • ryeman says:

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

  • jorvi says:

    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…

  • Salaryman Ryan says:

    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.

  • shoe says:

    shit thats really cool mate

  • shoe says:

    thts cool mate amazing ………

  • sravan says:

    excellent

  • Brenda - Chik Flix says:

    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! :-)

  • Roslee says:

    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?

  • me says:

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

  • neisha says:

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

  • JT says:

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

  • brandfantom.wordpress.com says:

    That’s so awesomed.

  • Johnny Utah says:

    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.

  • fosh says:

    johnny don’t be an arrogant prck

  • JT Fuller says:

    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.

  • Sienna Yi says:

    nice work!!
    your tutorial helps me !!!

  • armanbrush says:

    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.

  • armanbrush says:

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

  • Katherine says:

    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

  • ken says:

    its cool…..

  • Jones says:

    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.

  • 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.

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

  • @a_iki says:

    Thanks for sharing. Will surely try this out.

  • Seven' says:

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

  • Gimp Brushes says:

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