How to Convert Bitmap to Vector Graphics (for Free)

If you're a web designer, there's a good chance that you already know the difference between a bitmap image and a vector one. The former is made up of pixels and so will only appear correct at a certain resolution. The latter however can be scaled up or down as necessary to create an image of any size. In the world of web design, vector graphics can be incredibly useful - not only because they're more flexible, but also because they can be relied upon to look their best on the biggest or smallest screens. So whether you're creating a website that calls for some sharp engraving style graphics, or a simple collection of block shapes, vectored images can be hugely useful.

There are times when a web designer will be provided with graphical assets by a client before they start work on a site. In a perfect world, all of the graphics they provide will be in vectored PDF or EPS - but unfortunately this isn't always the case. A client may in fact provide you with low res JPGs and then ask you to create a high res design with them. This is next to impossible, however there is actually a technique you can use to make a useable vector graphic file from a bitmap one. You might have to sacrifice a bit of detail, but you may be surprised at the results. Best of all, it's free - all you'll need is Adobe Illustrator and a little bit of design ability (as a web designer, this shouldn't be a problem). Plus, it's completely free, unlike many of the bitmap to vector services on the web.

Step one: open your bitmap graphic in Illustrator

Go ahead and open Illustrator (you need to have at least CS2 installed, otherwise the option you need won't be available). You should place the bitmap image into Illustrator by clicking File then Place. You can use any bitmap image you like: PDF, jpeg, and so on.

Step two: perform the Live Trace

Next, click Object > Live Trace > Tracing Options. Here you can change various parameters and try to create a trace that is as true to the original as possible. The options on this screen will give you various details about the image and let you choose how you want the trace to be carried out. Once you're ready, click the Trace button to finish this step.

Step three: turn the image into a vector

Your adapted image is now ready to be converted into
a vector version. To do this, go back to the image and select Object > Live Trace > Expand. If your original image was colour, there's a chance that distortion may have occurred that makes the image unusable or less visually appealing. This is an unavoidable side effect of creating vectors this way; you're essentially creating a 'skeleton' version of an image, without the finer details. However, there is a way to use such images if you really need to, as black and white 'stencil' style objects.

Step four: create your final black and white vector image

To go monochrome and make the final image, click Object > Live Trace > Tracing Options. Here you can select Black and White to complete your vector image. Now all that's left is to save the vectored image in a suitable file type. This could be PDF or EPS. Your image can then be scaled up or down as necessary and used in all sorts of designs.

So there you have it, a quick and easy way to turn a bitmap image into a vector one in just a few minutes. Remember that this method works best for images that aren't too complex. If there are lots of different coloured elements, or too much going on in terms of detail, you may want to find another way to secure the image in vector form. Your client should always be able to provide you with high res original imaging, but if that's not possible, the above procedure will at the very least give you something workable. You never know - your client may end up preferring the version that you create in black and white!