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


Similar Articles

 

  1. filipino (Reply) on Wednesday October 4, 2006

    fucking great

  2. WizGuy (Reply) on Wednesday October 4, 2006

    ” fucking great ”

    .. Exactly

  3. circassia (Reply) on Wednesday October 4, 2006

    Very good tutorial, hope to see more of this kind!

    http://www.imandesign.at

  4. chee (Reply) on Wednesday October 4, 2006

    amazing results, but it looks like it takes alot of time and talent. I have plenty of time, but no talent. =D

  5. Paul (Reply) on Wednesday October 4, 2006

    I have seen this tutorial before and have tried to follow it. My results are nothing like this, but I am still pleased and it’s better than I could draw freehand. I suppose practice makes perfect. I have zero artistic talent so that’s not going to help :)

  6. as (Reply) on Wednesday October 4, 2006

    its so good! I tried, its beautiful, but i can not acheive it~~I should buy a bamboo

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

    its goood but im dont know how to draw

  8. serdal (Reply) on Wednesday October 4, 2006

    perfectttt

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

    It’s good’ I love it…….

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

    This is brill! Just can’t get the skin right!!!!

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

    it is great tool

  12. Suchy (Reply) on Wednesday October 4, 2006

    Really food. But im having problems getting the skin right!!

  13. Suchy (Reply) on Wednesday October 4, 2006

    Ha….I mean good, not food!!! I must be hungry!! Lol!!

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

    Love this tutorial!
    I need lots of practice tho…lol

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

    I like this tutorial, great.
    I’m always use photoshop, and newbie in Illustrator. And my biggest problem is I can’t draw, even I looked at the original bitmap image.

  16. rocker (Reply) on Wednesday October 4, 2006

    Scanner darkly is a movie, and if they are doing like this, i cant imagine how long they’d do it

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

    great tutorial I’d try this in illustrator cs3 and I did it a little bit well.

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

    great, i’m inspired to do my next project like that…i have to do a self portrait using illustrator

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

    If you apply the cutout filter in photoshop to a copy of your picture you can get a good idea of how to do the skin tones. kinda cheating but it works for me. you can even trace it if you want. this looks much better than the standard photoshop filters though

  20. Diane (Reply) on Wednesday October 4, 2006

    I feel obliged to notify your company that your internet tutorials are being used by a graphic design school on the Gold Coast. They have cut and pasted full tutorials and given it to the students as their own.

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

    Seeing what every body is saying about this new tutorial I ought to try it. Don’t know what my result will be.

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

    Do you know any technique for doing print add or creating logos in Illustrator. If you do please send some techniques or tutorials thanks a million
    Ruberm

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

    awesome but em having problem. :(

  24. MorRock's (Reply) on Wednesday October 4, 2006

    good..!!
    let me try this in illustrator cs2.

  25. MorRock's (Reply) on Wednesday October 4, 2006

    good..!!
    let me try this in illustrator cs2.

  26. rk (Reply) on Wednesday October 4, 2006

    Really Geat

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

    great fun with a tablet

  28. Ryan (Reply) on Wednesday October 4, 2006

    A really, really beautiful piece. The software is powerful, but you don’t have to look any further than the comments to realize that fantastic pieces like this take an artist. Software will only get you so far without ability. Great work!

  29. nik (Reply) on Wednesday October 4, 2006

    diane, nobody likes a rat!

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

    Really good idea! I made my portrait, but it doesn’t look so good. Maybe the model is not good!
    Great job

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

    This is a great tutorial, but nothing new. This type of image is the reason I got a vector program in the first place, I used to use Paint Shop Pro for all my graphic design stuff, but then when I was in high school and Adobe came out with Illustrator, I switched over to Photoshop as well. I wouldnt give credit to A Scanner Darkly for this… but great detailed tutorial, good idea to seperate layers by colour. I have a bad habit of only using a couple layers with anything I do, and end up cutting to a new layer to fix whatever problem I have.

  32. skeeter (Reply) on Wednesday October 4, 2006

    gives me a boner
    hell yea….

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

    Nice tutorial. I liked the idea of maintaining a separate layer for each colour. THanks a lot.

  34. Maciek Alexander Budzinski (Reply) on Wednesday October 4, 2006

    I fucking love you guys…

  35. mel (Reply) on Wednesday October 4, 2006

    isn’t it basically tracing (+/-)?

  36. Brandon (Reply) on Wednesday October 4, 2006

    Incredibly time consuming, but sometimes doing it all by hand is the only way to get decent results. AI CS3′s LiveTrace will not give results like this, by the way

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

    Hi! This is beautiful work….I need some help. I have to create a self portrait using illustrator and photoshop. I have NO idea where to start. My prof said be creative and I always think in the “perfection” mode and I try to keep my mind “in the box” rather than out. HELP! What should I do and how should I do it? lol….

  38. Joker (Reply) on Wednesday October 4, 2006

    which programme did u do this

  39. Joker (Reply) on Wednesday October 4, 2006

    sorry i didnt read it .) im gonna try ths thnx

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

    great work!!!!!!!!!!!!!!!!!!!!!!

  41. JDK (Reply) on Wednesday October 4, 2006

    Doing it that way works, but I think you can speed the process by a lot using Color Range. I haven’t tried it but from my experience I’m pretty sure it would work and save a lot of time.

  42. frazzzzzz (Reply) on Wednesday October 4, 2006

    fuck! that’s fucking awesome!! damn, i need some teach me how to using on XP. does everyone know how to use on XP please help me, i’ll leave my email on this. ninja1990@hotmail.co.uk

  43. joe (Reply) on Wednesday October 4, 2006

    duuude thiz is all like hella trippy man… i luuuv thiz bro… i cant wait to like… make a pic look like this dude

  44. Clayto TOMATO (Reply) on Wednesday October 4, 2006

    I am getting onto this asap. This is really SUPERB !! Thank you for sharing this……..

  45. black magic (Reply) on Wednesday October 4, 2006

    hahah fucking greatschools use htis site funny

  46. Coach Kruger (Reply) on Wednesday October 4, 2006

    Joe suckss

  47. Icemayne (Reply) on Wednesday October 4, 2006

    This is so Beastmode ima try this but it aint gonna come out like this but ima try anyways mayne.

  48. M (Reply) on Wednesday October 4, 2006

    Looks fantastic. Good work on the movie, too

  49. [...] A collection of tutorials for the whole Adobe family of products, including such complex tutorials as how to achieve “A Scanner Darkly”’s look. [...]

  50. [...] Imitating A Scanner Darkly Tutorial from Layers Magazine (Illustrator) [...]



Planet Photoshop Photoshop World KelbyOne Lightroom Killer Tips Scott Kelby