Pictures with pixels and paths: 
what tools do I use?

by Patrick Hofmann

Imagine the scenario: your client or cohort emails you a screenshot or a digital photograph of their product, asking you to add some labels or annotations to it so that it makes more sense to its readers. What tool do you use to best fulfill this request? In a nutshell, it depends -- and don't shoot me, I'm only the messenger! To help me explain, let's start by discussing the type of file (whether it's raster or vector) and then launch into what tools you can use.

Raster vs Vector images

Raster images (also called bitmapped images) are divided into a grid of many cells or pixels, where each cell is a solid colour. Scanners, digital cameras and screenshot-grabbers all generate raster images. When you save a high-resolution raster image, the file sizes can be quite huge. After all, the colour of every pixel in that image has to be declared behind the scenes: "This pixel is 100% blue, this pixel is 98% blue, this pixel is 47% blue, this pixel is 100% white..." and so on, repeated for thousands upon thousands of pixels. No wonder the file size can be so huge! To edit raster images, use tools like Adobe Photoshop, Corel PhotoPaint, Windows Paint, and PaintshopPro. If you're ever working with scanned images, digital photos, screenshots, you're dealing with raster graphics.

Vector images are created by mathematically defined shapes, line segments, and curves. Behind the scenes, a vector image is very similar to the functions and relations lessons we learned in high school math: "Draw a square with corners at (0,0), (12,0), (12,24), and (0,24), then fill that square with 100% blue". This way of defining a shape is far more efficient than a raster image, which painstakingly has to describe the colour of each cell or pixel in that image. This results in a dramatically smaller file size. To edit vector images, you need tools Adobe Illustrator, Corel Draw, Claris Draw, IsoDraw, and AutoCAD. If you're ever working with original line drawings and illustrations, drafting blueprints, or interactive Flash animations, you're typically dealing with vector graphics.

Hybrid applications that deal with both

The really confusing part: to streamline the graphic creation and publishing process, graphic software applications are now trying to be all things to all people. They have blurred the lines between raster and vector, now incorporating the editing tools for both types into a single application. With applications like Macromedia Fireworks, you can create and edit both raster and vector images, but the toolbars clearly separate the functions that apply to raster elements (like manipulating individual pixels) and vector elements (like manipulating individual paths and line segments). With applications like Adobe Illustrator, you can place raster images into a file and perform basic changes to them as a whole (changing their size, contrast, or clarity) but you can't manipulate their pixels individually beyond that.

With most vector applications, you can take your line drawing or vector-based logo and convert it to raster -- converting all those mathematical paths to individually defined pixels. But can you take a raster image and convert it to vector? Yes, but it's by no means perfect! Applications like Adobe Photoshop and PaintShopPro are readily equipped with features that can "convert pixels to paths", but if the pixels are highly variable or suffering from poor resolution, the best algorithms in the world won't convert them into perfectly smooth paths or line segments.

So what tool do I use?

Back to our original scenario: what tool should you use to add those labels and callouts to that raster-based screenshot or photo?

If the image is destined for a paper document, perhaps it's easiest to use your publishing tool (FrameMaker or Word) to type the annotations into text boxes and to draw the necessary lines so that they "float" on top of the placed image. But what if the image is destined for a Web site or for online help? What tool do you use to add those annotations, and edit that image directly?

Since the image is in raster format (likely .bmp, .gif, .jpg, .pct, .tif), use any paint or photo-editing application (PaintShopPro, Corel PhotoPaint, Adobe Photoshop) to draw in the necessary lines and to type in the necessary text. If all you have is Windows' bare-boned Paint application, you can edit the image, as long as it's in .bmp format.

Alternatively, you could place the raster image into a vector application (CorelDraw, Adobe Illustrator, Freehand) to draw in the lines and type the text so that they "float" on top of the placed image -- just as you would if you placed the image into Word or FrameMaker. The only problem is: Web sites and online help won't accept vector-based artwork (except for Flash and SVG files, but that's a whole other story!). To place this image in a Web site or online help, you will have to export it to a raster format (.bmp, .gif, .jpg, .pct, .tif -- which most vector applications will now do), plus save your raw work as a working vector file (.ai, .cdr, .eps, and so on) for future edits.

In the end, there may be countless other variables to influence your decision: everything from a company's document management conventions, to the potential of repurposing your image for other destinations or formats, to your personal preference for certain tools or file formats. Whatever your choice, tools are becoming more flexible in their features and more supportive of various file formats. Although performing graphical edits and exports is becoming easier, choosing the right tool seems to becoming harder.