Other videos
Creating vector images in Photoshop
Create a vector image from a flat, raster image. What are vectors, anyway?
3:37
Creating a website in Photoshop part 1
Part 1 of a 3 part set. How to build a website from start to finish in Photoshop.
8:09
Levelling photographs using Photoshops ruler tool
A very quick and effective way to level up any photographs using ruler tool.
1:43
Selective colourization in Photoshop
We show how to selectively restore colour to areas of an image.
2:09
Sharpen photographs using Photoshop's high pass filter
We show how to use Photoshop's high pass filter to sharpen an image.
1:39
Other articles
- Outside Europe »
- How to create layers in Photoshop »
- Changing eye colour to Blue in Photoshop »
- How to unlock a layer in Photoshop »
- How to rotate an image in Photoshop »
- How to group layers in Photoshop »
- Choosing a colour palette for web design »
- Deciding on HTML or Macromedia Flash »
- Creating reflections in Photoshop »
- Selectively removing colour »
This tutorial shows a simple way to create a vector image from a flat, raster image such as a .jpg file.
When created, these vector images have many uses. They are ideal for some areas of corporate branding - vector logos can be resized indefinately, and by the same token the size can be reduced very well. They are also good for line art.
What is a vector, anyway?
Vector images are representations of mathematical relationships between points.
Whereas a raster image like a .jpg of a straight line would store information for every part of the background, and the line itself, a vector image would simply have a background colour, a start point for the line, and the end point for the line - rather like displaying a line on a graph. Vectors are capable of displaying great complexity, however - its possible to define curved paths.(See this wiki article on Bezier curves for more info).
It can be seen that for certain kinds of artwork, a vector would be ideal, and also efficient in terms of file size.
As the information vectors store defines the mathematical relationship between points, they can be scaled up indefinately without losing quality. Raster images dont do so well.
For this example tutorial, we are creating a vector image from a .jpg file. We have chosen a simple map of the UK as our source image.
Choose best quality source image possible
Its wise to use the largest possible source image to capture the greatest amount of detail. Although vectors are infinitely expandable, and always sharp edged, the more detail the source image has the more detailed the resulting vector.
We have downloaded a source jpg image of a UK map. Firstly, we are going to increase the image size. This will result in a more detailed vector, as you will see later on.
Increase the size of your source image to capture detail
To do this, open the UK map file provided, and increase its image size by 200% ( Image > Image size ). Ensure the "scale styles" and "resample image" tickboxes are ticked.
Remove image background
Next, we need to remove the maps background. As we have chosen a very simple source image, with clearly defined edges, we are going to use the magic brush tool from the Tools bar.
Simply select this tool and click on the images background. If the tool does not select the edges accurately, you can adjust the "Tolerance" from the tools options, in the top menu. We found a tolerance of 32 worked fine for this source image.
After the magic tool has been applied, rows of marching ants should appear around all edges in the image. As we selected the background sea, we have actually selected all areas of the sea. We need to invert the selection to select the islands. This can be done either through the toolbar, or by pressing "SHIFT + CTRL + I". By doing this, you will notice the selection changes.
Creating a work path
We will now use our selection to create a work path. A path in Photoshop is a vector, made up of lines and curved areas. To do this, select the path tab, and click on the right arrow (well hidden) inside this tab.
From the pulldown menu that appears, select "create work path" and set the tolerance to 1 pixel. The lower the tolerance, the more detail is captured (and the larger the file size of the resulting vector). You can get some interesting, stylized effects by selecting a higher tolerance.
Saving your vector as a custom shape
Effectively, you have now created a vector. To make it more useful, we are going to save it as a custom shape. By doing this, you make it very easy to re use the shape you have created - it will be stored in photoshop, and can be selected in the same way as any other pre defined shape (star, square, etc).
To save your custom shape, select the pen tool from the Tools bar. Hold down "CTRL", and draw a box around your shape. When this is down, many anchor point boxes will appear on the shapes edges. Finally, simply right click on the shape, and select "define custom shape".
You can now select your new custom shape, and use it as any other shape. We hope this tutorial has helped. If you have any interesting uses of custom shapes and vectors, or any comments at all, we\'d like to hear about them.
