dig-tech-webdesign: Using Vectors in Photoshop -- Tracing

Using Vectors in Photoshop -- Tracing

author_aharwood

This tutorial introduces the PenTool and uses paths to create a power-packed modern tracing effect.

Step 1- Choose your Image

First, we need to grab an image from either google or a stock image CD. You can use basically any image you like. To begin with, however, it's probably best to pick something such as a face or an animal's head so that the experiment doesn't get too complicated.

Here's the image I chose:

1390_owlface

Of course, if the image you've chosen is large, scale it down to more workable proportions.

Step 2 – Choose your Palette

Move the picture into the centre of your canvas and zoom in about 200%-300% -- whatever you're happy to work with.

Now, pick out the darkest colour in the image and select it for your palette using the Eyedropper tool.

Step 3 – Trace the Shape

Next, make a new layer and use the Pen Tool to trace carefully around the outside of the shape. It doesn't matter if you use a lot of lines (or mouse clicks) to trace the shape -- this will give variation to the finished work.

Your tracing should look something like this:

1390_tool

Step 4 – A Colour Change

Now that you have your outline, select the Paths tab, right click the Work Path and select Make Selection:

1390_selection

With your shape designated a Selection, fill it with the colour you picked out with the Eyedropper Tool in Step 2.

Step 5 – Colouring In

You've coloured the main shape -- now, apply the technique from Step 4 to all the main shapes in your image. If you're using an image of a face or head, the best way to proceed often is to start with the eyes and work outwards: from eyes to nose, to mouth, to the ears and so on.

You should eventually finish with something quite 'vectorish'. Experiment a little with your presentation. I placed a background behind my image, which finished up as:

1390_mrowl

Enjoy!

Andrew is a Web graphics and branding specialist based in the UK. He's also a mentor in the SitePoint Forums who loves Queen. Visit his online portfolio at frozentoast.com.