Professional and Affordable Web Design

0800 080 5401

Creating vector images in Photoshop

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.

Comments0 Comments

All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.

Make a Comment

Notify me when someone responds

Quick Contact

See Full Portfolio Some Of Our Work

Screenshot of website

Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...

Screenshot of website

County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...

Customer News & Resources

At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.

Introduction to sitemap.xml

Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »

Center a web page in CSS

One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »