Creating A "Scanner Darkly" Style Vector Image

Hey There

The Scanner Darkly movie has a very interesting and unique look. After watching the movie just recently and as a young, budding designer wanted to copy the Scanner Darkly style and do it for myself. The images seen in the move are all in vector format and as a result,vectors have prefect edges and good solid colours (you can have gradients, although i'm not going to use them). The purpose of this tutorial is to show you how to achieve such as style. It is not a perfect step by step tutorial which tells you how to draw every single shape and colour. We would be here all day. But i'm going to to show you the basic techniques and hopefully you can do the rest. If you do get stuck and want some help, please leave a comment. I will try to respond as quick as possible.
At any time you can click on the images to see there full versions. The final .eps will be supplied at the end.

There are on the internet, very similar tutorial to this, some use Photoshop, some use Illustrator. I wanted to try and do this in my own style and my own way. I find many tutorials out there on the internet a bit brief in the details. I've tried to make mine as full as possible and hopefully you will agree. If you don't, then there is not a lot I can do about it.

For this tutorial you will need illustrator or similar. As well as a couple of hours. This tutorial isn't a quick 5 minutes. You could use the "Live Trace" options which i've compared at the end. If you are really rushed for time.

Step 1The first step, as always is to create your artboard/canvas. You want to pick an image that is suitable for the size of picture you have. My picture was taken through my iSight camera. As a result is was small. Pick as size you think is suitable. Save your work so the auto-saver can kick in. You don't want to lose you work.

Step 2Once you have you canvas read you can now begin. Insert your image. The perfect image for this type of work, is something that is simple and moody. You don't want an image that has millions of tiny features woven into the clothing. As well as this you want to crop your image. Focus on the main feature such as your head. Having to much background will make converting the image longer and harder.

Once you have inserted you image. Lock the layer you do not want this layer moving or changing while in use.

Step 3Create a new layer, call it black. This layer will be used to make the outline and all of the black shadows.

Most of the work will be done with the pencil tool. Double click the pencil tool and you should be given some options. Change the Fidelity to around 5. Fidelity is the amount of points that are made. A low fidelity is a lot of points, a high fidelity is hardly any points. We wont some but not a lot.
Change the smoothness to around 30%. You want smooth lines but no too smooth. You may find you have to go back and change these values depending on the amount of detail.
Click Fill new pencil strokes and select keep selected. Un-tick (if applicable) edit selected paths within a range. We are going to be drawing a lot of path, and we don't want them changing as we draw them. Click OK, when done.

Step 4Change the fill to Black and the Stroke to nothing. Nearly all of the shapes created will not have strokes.
To begin creating your shape draw using the pencil tool any areas that are dark/black. The pencil tool is great because you can quickly draw the shape you want. The only problem with this tool is that it leaves open ended paths. To solve this once you have draw your desired path press Cmd/Ctrl + J to join the end points and close the path. Use the Direct Selection Tool (A) to tweak the points.

Step 5Go around all of the dark areas of you work. Be liberal. If its very dark colour the colour it in. You don't want to be over specific, but try to trace the shape as much as possible. You can un-hide the image layer using the eye in the palette menu to see how you are doing.

Step 6Step 6 is quite long so I will try and keep it as concise as possible. Once you have drawn all of the black with the pencil tool you can now begin to colour. First create a new layer and call it clothes. Within this layer create a new layer and call it dark blue (or what ever colour your clothes are, assuming you are wearing any). The colouring is going to be done from dark to lightest. But the layers are going to be in reverse order with darkest at the top.

When you have created your layers, using the pencil tool again to draw in your colour. Using the colour option within Photoshop to get a good RGB value or you can use DigitalColour Meter if you have a Mac (Applications > Utilities), if you are stuck on windows you can use paint.

The idea behind drawing from dark to lightest is because it becomes easier to draw and fill in your layers, every time you add another layer of colour. For example once you have done your darkest layer of colour, create a new layer, on this layer (which is below your first layer) you don't have to be perfect with the edges that meet you can just draw any shape behind. See the image to the right for an example.

Continue to add colour until you have complete all of your clothing. The more colours you do the better the image will look but the long it will take.

Step 7At this point I have turned the grid on too help me see the areas coloured. This is personal preference and can be done through View > Show Grid.

For the main part of your skin you want to split everything into different layers. Eyes, Nose (not shown below), lips, chin etc. I recommend you start with the simple areas such as your neck and ears. Build this up slowly.

If the colour you are creating through the use of photoshop, digitalcolour meter or paint looks a bit boring or wrongly coloured. Make the colours up. I have done for some of the colours. You want the colours to be accurate but not stupidly coloured as it would it your tried to match the colours perfectly with the colour meters.

The best/most interesting parts of your image is your eyes, lips and possibly ears. Try and add as much detail to these areas to make them look as good as possible. Layer them so subsquent layers or colour are easier to apply, so put these layers at the top. As mentioned before the more colours you use the better the image will look but the longer it will take.

Step 8Continue to work on you face, skin colours. Do the darker colours first and layer these so they are at the top. Use the colour picker to vary the colours you use.

With the pencil tool make simple curved motions. They look a lot better than very detailed jaggy edges. Always fine tune the edges to get the best effect.

Work right to left (against my normal convention since i'm right handed)

Make the highlights simple and the coloured shapes simple. If you go over the edges of your image to much use the eraser (Shift + E) to erase the edges.

Step 9At this point, I realized that the edges don't look as good as they could be. To solve this use the brush or pen to create an, approximatly 1-3px stroke around the nose, lips and edges of the cheeks. Hide the coloured layers and paint over the edges on the original image. Do this on the black layer.

Comparing the image above to this one, the features do stand out more. You may have move your coloured layers edges to match the brush lines.

Step 10Penultimate step is to do your hair. I don't recommend you copy your original image to much, because you will be there all day. Instead use the pencil tool again to create the jagged edges that are present in hair. Vary the colours and size of the shapes. If an area looks too empty add some extra colour in. It doesn't have to be perfect. Use your own discretion.

Step 11The final step is to add a dark background. Pick a dark colour that doesn't blend to much into your clothes. Green, blue, brown are good examples. Neutral colours. You want a dark moody effect. A good tip at this stage is to quickly switch on and off the visibility of your image layer (first layer you did) to look for any areas you have missed. They are sometimes hard to spot. Do this before your do the background layer, so you can easily see the white through the coloured layers.

Add some small glints of white to the eye to bring the image to life and you are done.

Export when you have finished.


Below are three images, the one I have created, Live Trace in Illustrator and a copy from VectorMagic.

As you can see there are stark differences. The Live Track done by Illustrator looks very jaggy and poor quality. You can change the amount of colour but you end up with millions of tiny paths. Vector magics isn't bad. But if you download the .eps every path, again, is very jaggy and not smooth. If you want a simple vector of a photo Vector Magic is good.

The aim of this tutorial was to vectorize your own image in Illustrator and only use simple colours to try and make it look like an image from A Scanner Darkly. The image is simple yet has a lot of detail. I enjoyed doing it and love the results. The only improvement I would make it my ear, compared to the rest of the head it doesn't look as good. Probably because it was the first one I did.

You can download the .eps here if want to take a look into how I have done it. Please note that I still retain the copyright and I appreciate if you e-mail me if want to use it on any commercial works (blogs are O.K).

Please leave a comment with your creations.


Marlon K. said...

James, hell-of-a-post, thanks man and keep it up.

James Powell said...

Thanks will do