HTML & CSS - - By Alex Walker

Vector Magic: Stanford’s AutoTracer Bullet

The following is republished from the Design View #39.

Ah, you’ve got to love those wonderful geeks at Stanford.

Lock ’em in a room with a computer, a case of Red Bull, and two bags of Skittles, and they’ll invent Google before lunch, then go on to solve one of the most intractable problems of graphic design software in the afternoon.

Whatever you call it — Autotrace, Live Trace, PowerTRACE — the ability to convert bitmap images into vector artwork software has been around since at least Adobe
‘s release in the early 1990s. In fact, I remember spending hours experimenting with Streamline’s many dials and sliders trying to get the perfect result back in the day.

How often have I put the practice to work? Not often.

The problem was always twofold:

Problem A. The vector artwork produced was always spectacularly chaotic, inefficient and tangled — the design equivalent of spaghetti code
and generally took much longer to clean up than it would have taken to draw the artwork from scratch.

Problem B. The algorithms used to produce the vector shapes invariably impose the same blocky, woodcut effect on all artwork. This was fine if you were looking for a rough-cut, medieval look, but if not… well…

With Creative Suite 2, Adobe mostly eliminated the first issue. LiveTrace now does a slick job at cookie-cutting its art into a single-layered, interlocking collection of vectors.

However, it’s taken the input of the Stanford geeks to finally nail the second issue.

Vector Magic in action

Vector Magic is an online, Flash-powered tool designed to convert bitmaps to vectors. Operating it is a no-brainer — everything’s handled via a simple wizard.

Using Vector Magic

After uploading your GIF, PNG, or JPG, you need to answer four simple questions.

1. What type of image is your original (i.e. photo, antialiased logo or nonantialiased logo)?

Select image type

2. How degraded is your original?

Has your image been damaged or degraded by earlier compression?

Rate the compression/degradation level

3. Does your original image employ a limited color palette?

Obviously many logos get their power from the very limited range of colors they use, while photographic images depend on a more granular approach to color in order to maintain realism.

Limited palette or full color?

4. If so, which palette is best suited to the result you require?

The application gives you the option to either increase or reduce the color palette before processing begins.

Limited palette or full color?

At each step, Vector Magic makes an educated guess at the correct path to take, so if you’re unsure, accepting the defaults will work for most images.

When you’re happy with the set up, click Finish, and Vector Magic works its … er … magic!

The Result

To this point, there hasn’t been a whole lot to get excited about — the interface is more workman-like than elegant — but the results are simply breathtaking.

Smart companies like Adobe, Macromedia, and Corel have spent much time and money working on the bitmap-to-vector problem, but none have really got close to the perfection of this Stanford solution.

That’s a big statement, perhaps, but I stand by it. This is spectacular work!

Take a look at some of the examples and try some experiments yourself.

Compare and contrast

The impressive thing with this new process is that the Stanford guys seem to be employing some form of big picture mathematics — using an algorithm that’s able to spot the bigger, simpler vectors in the logo that are usually lost and scrambled beneath the artificial pixel grid.

Vector Magic seems to work to the theory that the simplest way of describing the largest area will most likely be the best way, too. In most cases, this is exactly how the designer was thinking when he or she created the original logo.

This means the shapes Vector Magic generates are not only flat and well-organized, but they are made up of far fewer points. The resulting vector shapes are naturally both more elegant to look at and infinitely easier to manually edit.

If that wasn’t enough, Vector Magic provides you with a suite of post-processing tools that let you edit, tune, and polish your output without leaving the browser.

When you’re satisfied with the result, you can download an EPS, SVG, or PNG version of your finished art.

Amazing work by very smart people!

And, of course, best of all, it’s free — as in “beer” and “love.”

News Flash: Scrub that bit about the ‘Free’. Unfortunately it’s now pay per image. Pricing is as follows:

  • 1 token $3.00 ($3.00/token)
  • 10 tokens $27.10 ($2.71/token)
  • 20 tokens $49.40 ($2.47/token)
  • 50 tokens $103.20 ($2.06/token)

It’s a shame, but IMHO if you looked at how long you might spend manually redrawing a logo, it’s probably still worth the outlay for all but the simplest designs.