How to convert poor quality bitmap image to vector?

Question

I'm designing a website for a group which has lost the original digital image for their logo. The only file they have of it is a jpg which was embedded into a word document. The image has everything possible wrong with it:

• Anti-aliased onto a white background where it should be transparent
• Image artefacts
• Resized downwards poorly.
• Lines that should be straight and solid aren't.

I've currently used the wand tool to get rid of the white background, and stuck it on the website, but it's poor quality makes it stick out like a sore thumb. I need a few different sizes of it to use, so how would I go about creating a vector image based on it?

Answer 1

I think there's also an open source solution for this, besides Adobe software: Inkscape

I've had the same problem a couple of years ago with a dozen of logos, and were able to solve it with Inkscape this way:

1. Open the bitmap image.
2. Left click on it to select it.
3. Path / Trace Bitmap
4. Now you have to start experimenting with the possible settings, and refreshing the preview on the right side of the dialog. "Inkscape incorporates the Potrace program (http://potrace.sourceforge.net) to provide this functionality, and in-depth documentation about the function of this feature can be found at the web site for Potrace." - from Inkscape documentation.
5. Save as SVG.

Answer 2

There are 2 options that I have used, but they require software that is not on the cheap side. Adobe does provide 30 day trials on both.

Method 1 - Using Adobe Illustrator

• Open Illustrator
• Select File > New from the menu and setup the layout as needed
• Select File > Place... and find the logo file (I can't recall if the image has to be a specific format)
• Select the image and go to Object > Live Paint or Live Trace (in your case live paint might be better since drawing is not your forte)
• The image should now be vectorized and you can retouch as needed and resizing will maintain quality since it has been vectorized.

Method 2 - Using Adobe Flash & Illustrator

• Open Flash
• Create a new flash document
• Choose File >Import > Import to stage (Ctrl+R) and find the (bitmap graphic), which you want to convert into a vector one.
• Select the entire picture (Ctrl+A) and then click Modify – Bitmap - Trace bitmap. Then, choose the options from the window that opened.
• Export as *.ai (Adobe Illustrator file)
• Open in Illustrator and adjust as needed.

Answer 3

The imagemagick Usage docs have a good explanation of how to perform edge detection and raster to vector conversion. From the edge_vector section, which begins by saying, essentially, for best results, don't use imagemagick:

Programs that can do this include: "ScanFont", "CorelTrace" and "Streamline" by Abobe. Most of these however cost a lot of money. But a free solution is "AutoTrace" or "PoTrace". Other suggestions are welcome.

Both trace programs are simple to use, but requires some pre and post image setup. They have a limited number of input formats, and outputs a vector image which will create a 'smoothed' form of the input image. I prefer the "AutoTrace" as it does not scale the resulting SVG, producing a standard line thickness, however you can not use it in a 'pipeline'.

For best results it is a good idea to ensure we only feed it a basic bitmap image, which we can ensure by thresholding the input image, while we convert it to a image format autotrace understands. I can then convert that image into a SVG vector image.

You can run autotrace online if you want to try it out.

Answer 4

Without seeing the image it's difficult to say, but it might be quicker to just redraw it from scratch using the jpg as a guide rather than the source. You'll also get a reference image you can use again.

Obviously this might not be an option if you don't have the tools or your drawing skills aren't (trying to say this politely) up to the job.

Answer 5

Not free however excellent tool to use: CorelDraw. It has a bitmap trace function to create a vector image and does the job really well. Had many great results with it. As with many logo's there is less color usage so it might be a good idea to decrease the colordepth, this also remove some noise from a jerky graphic.

Before you do this, upscale it to about 4x (or more) the size of the graphic and reduce colors, let's say 16 colors if possible. After this increase the colors and scale it back. It wil soften the boundaries. An excellent tool is an older version of PaintShop Pro (I use version 7 from 2000), had many great results with it, king in reducing colors.

These methods are very usable for old artwork (photo's), stickers, logo's to create a vector image of it and save you allot of work.