How do I convert a bitmaped drawing into something scalable?

July 2, 2005 12:00 PM

How do I turn a bitmapped outline drawing into something scalable that will look good as a logo at any size?

Looking for logos for our organization, I was given a Word doc that contained an outline drawing. I copied the drawing, pasted it into Photoshop, and saved it as a GIF. (25%-sized version here)

How can I turn this logo into somthing that will look good when scaled up or down to any size, and would be easy to change the outline, fill and background colors? Are we talking an EPS file? I am comfortable in Photoshop, but clueless in Illustrator. Where do I start?

posted by DakotaPaul to Computers & Internet (17 answers total)

potrace (google it) works well - it "traces" the pixels and produces an "equivalent" vector file (which is what you want - a description that is based on lines rather than pixel intensities). however, potrace output tends to look "hand drawn" - perhaps too much for you?

self link to drawings scanned and then potraced and processed here
posted by andrew cooke at 12:13 PM on July 2, 2005

Illustrator has a tool that does that well. I'm not sure the name of it (I don't do much vector work), but its icon looks like little rolling hills. You basically click within the bounding edges of a shape.
posted by symphonik at 12:49 PM on July 2, 2005

Illustrator has an autotrace tool. It'll of course be too close to the gif file.

After using it (on a shape by shape basis) you could go to the object menu and choose simplify to adjust the curves. Haven't tried potrace.
posted by filmgeek at 12:53 PM on July 2, 2005

i haven't used illustrator, but potrace doesn't tweak much. you get more or less what it decides on. i suspect illustrator will have something that is more flexible/easier to use.
posted by andrew cooke at 12:59 PM on July 2, 2005

You can do everything you need to in Photoshop with the pen tool, although it isn't as versatile as Illustrator. You can add a gradient with Layer-->Change Layer Content. Stroke (the outline) can be added by selecting the layer in the layers window and clicking on the Layers Style button in the layers window (it looks like an "f" in a circle). You will have to save the file as a PSD to keep it as a vector format.
posted by FakeOutdoorsman at 1:06 PM on July 2, 2005

Illustrator CS2 actually does this (literally) with one click. I've been itching to try it out since I upgraded a couple weeks ago, so here you go: png, ai.
posted by rafter at 2:19 PM on July 2, 2005

It might already be scaleable - you should try either stretching it in Word (just to see what happens), or try copying and pasting directly to Illustrator. If you're lucky it already is vectorized.
posted by O9scar at 2:36 PM on July 2, 2005

Ditto was O9scar said -- copy/paste into illustrator, and it will stay a vector drawing (if it was one to begin with). Does "Outline" mean vector or does it mean something else?
posted by misterbrandt at 3:09 PM on July 2, 2005

you might also want to try inkscape. it's a free SVG editor. It has a good bitmap tracing tool, with a variety of backend support, including potrace, which andrew cooke mentioned. Inkscape also has a decent tracing tutorial, which covers some of the tunable parameters for this kind of operation.

It should run on unix-style systems (probably including OS X under X11), and on windows. i really enjoy working with it, actually. It will happily export graphics to PNG format, which you should be able to convert to GIF with any common graphics utility.
posted by dkg at 5:09 PM on July 2, 2005

i should clarify that last point: only convert to PNG (or GIF) when you know the output size you want. keep the image in svg until yer ready to generate bitmapped output of a specific size.

here's a quick version of your graphic in SVG format that i generated with the "Color Quantization" variant of potrace, set to 2 colors (done via inkscape's interface to it), and then ran that through one iteration of inkscape's "simplify" function.
posted by dkg at 5:28 PM on July 2, 2005

cant't you just convert a selection in PS to outlines, and then save as an EPS? It's been a while, so I might be off base.
posted by mwhybark at 5:55 PM on July 2, 2005

DakotaPaul,

It isn't hard, but it's tedious. All you're going to need are:

1. A copy of Adobe Illustrator
2. This Tutorial
3. About 3 hours. Play some music.

Here's what 20 minutes of messing around by a guy who knows only slightly more about Illustrator than you do at this moment looks like:



posted by Hildago at 5:59 PM on July 2, 2005

for comparison here's the potrace eps output - a lot quicker than 20 mins, but, as i said, it has its own style. you might be able to tweak things, but i never had much success (i scaled the image back down to 200 pixels as it seemed to be artificially zoomed up, causig jaggies).
posted by andrew cooke at 6:20 PM on July 2, 2005

just struck me that the output from potrace looks a lot like a woodcut! i think you could perhaps change things slightly by taking more care over the input image (shrinking slightly, maybe smoothing) (i'm thinking the variations in line width are some kind of artefact from the input).
posted by andrew cooke at 6:34 PM on July 2, 2005

Adobe also makes a product called Streamline that sounds like it might be a lot like potrace. I tried it out for about five minutes one time, but couldn't get it to do anything that impressed me. It may be better or worse than Potrace, but it is another option.
posted by Hildago at 9:35 PM on July 2, 2005

I just had to do this. There's a way to do this in under two minutes. This is cake, and I don't know anything about this sort of thing.

I had submitted my company's logo to an incompetent vinyl banner maker, and they kept giving me some crappy re-draw of our logo. They didn't seem to get that our logo needed to be untouched, just bigger. Instead, they literally re-drew it about three times. So I had to figure out how to get a vector version of the logo.

I found this tutorial. The tutorial makes it look a little tougher than it really is. The one sticking point is that you need Flash (not just the reader, but the actual software), but you can download a 30-day trial. That's plenty of time, as you'll only need, as I said, two minutes.

In Flash:
1. Import graphic.
2. Modify > Trace Bitmap.
3. That's it.

You can tweak the settings a little to change it around, but it takes no time at all, and you end up with a scalable, better-than-pixel-precise vector version of your logo. Tada.
posted by Alt F4 at 5:52 AM on July 3, 2005

Response by poster: Wow, you guys. I should have known I'd get a bunch of great responses here.

rafter: that one-click job in CS sounds pretty sweet, and thanks for posting the test verstions. Will have to mess with those a bit to clean them up.

Hildago: thanks for pointing me to that tutorial. That's what I thought I'd have to do, but I had no idea how that little Pen tool worked. Thanks for the tip!

Alt F4: will have to try that Flash option. What format does it save the file in?

Thanks again for all the suggestions. Have a great Fourth (for all you Yanks)!
posted by DakotaPaul at 10:42 AM on July 4, 2005