Article
Cool Web Design Effects Tutorials
Using Vectors in Photoshop -- Tracing
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:
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:
Step 4 – A Colour Change
Now that you have your outline, select the Paths tab, right click the Work Path and select Make 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:
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.