Vector Magic: Jaggies = Newbie

January 22, 2008

Most of you (I hope) are familiar with the differences between raster images and vector images. If you are not, I strongly suggest you Google the subject and do a little reading. This is a fundamental concept of digital graphics that all eLearning developers should understand.

Continuing under the assumption you understand “raster” and “vector,” you know that simple images like company logos are typically created as vector-based images, but are converted to raster images when used on the Web. This generally isn’t a problem, until you try to enlarge the rasterized image. Doing so results in an unsightly (and to many of us, horrifying) condition often referred to as “The Jaggies.”

Jaggies are bad. Bad for websites. Bad for presentations. Bad for your eLearning. Yet we see them all the time.

It doesn’t have to be this way.

The best solution to this dilemma, of course, is to acquire a vector-based version of the image, which will allow you to enlarge it as much as you need with no loss of quality. Unfortunately, there are situations where you simply can’t get a vector-based version of a graphic you need.

All is not lost.

Rather than settle for The Jaggies, there’s an online tool that can make you look like a pro rather than an amateur. It’s easy to use. It requires no download or installation (oppressed souls under the cruel thumb of IT Nazis - rejoice!). And the best part of all, it’s free.

The tool is called Vector Magic, and it’s brought to you by the superbrains at Stanford University (thanks guys (and gals)).

Let’s look at Vector Magic’s…uh…magic in a real-world scenario. Suppose you are working on an eLearning course for Motorola. You need a full-screen logo on the opening page of the course. Unfortunately, the graphics department has not responded to your request for a vector-based copy of the logo, and your deadline is fast approaching. You do have a JPEG version of the logo from the Motorola website, but it’s fairly small, and will look terrible when enlarged.

You have two options.

Option one is to swallow your pride and enlarge the raster image to fill your course screen, jaggies and all. (I really hope you have enough pride to not settle for this option.)

Option two is to turn the graphic into a vector image using Vector Magic so you can resize it as you darn well please without fear of The Jaggies.

Here are the results for each option, followed by what each says about you as the designer:

“I’m a graphics hack with a high tolerance for shoddy visuals.”

“I care enough about my learners to demand excellence from my visual design.”

Which would you choose for your eLearning course? Yes, I thought so.

The Vector Magic website does a great job of walking your through the conversion process, so I won’t get into detail here. Trust me when I say it’s fast (a few minutes from start to finish - seriously), it’s easy, and you should be able to get the professional results you need for your project.

Vectorize your image using Vector Magic, resize it as needed using a vector editing application, and export it to a Web-friendly format before bringing it into your eLearning course. Goodbye jaggies. Hello beautiful eLearning.

God is in the details - Mies van der Rohe.

Sidenote: yes, there are commercial tools that do this too. Yes, they will likely cost you money. Possibly lots of money. They may require a lengthy corporate purchase process and IT getting involved (shudder). And they may not work as well as Vector Magic. Words to the wise.

Posted in Presentations, eLearning Development Tools