Shape Shifting: How the Goatee Set Does It

If someone told you designers were shape shifters, you’d have no trouble believing it. Something, after all, must explain their odd appearance (and even odder behavior).

In fact, designers are shape shifters, though this ability has to do with math, not myth or magic. Creating and manipulating shapes is fundamental to a designer’s role. Knowing how designers do this will put you one step closer to the point at which you won’t have to take any guff from the goatee set.

There are two basic ways to make shapes on a computer, both of which offer particular advantages. The most common way is “bitmap” art.

Imagine a fine grid of pixels, so fine that you can’t see the individual pixels without looking carefully. Instead, you see the groups of pixels that form large areas of color and shading. This is a bitmap, the best way to duplicate photos on a computer. Programs such as Adobe Photoshop and Corel PHOTO-PAINT are used to manipulate bitmap images, pixel by pixel. Scanners also create bitmap images. The actual file for a bitmap image simply lists out all the pixels in the image from top to bottom and left to right and the color assigned to each pixel. All that data can produce some really huge files!

Figure 1

Figure 1 shows how a bitmap of a circle looks when it is magnified to the point at which individual pixels are visible. As you can see, one disadvantage of bitmap art is that if you scale it up in size, you get jagged edges. Designers can compensate for this, though, with antialiasing.

Figure 2

Figure 2 demonstrates how antialiasing works. By changing the colors on the edges of the image to blend in with the background, we get the illusion of smooth, curved edges. But this works only to a certain extent. When the image is scaled up significantly, the pixels still show.

The challenge of how to scale up an image without getting those blocky pixels led to development of the second type of computer-generated imagery: vector images.

Simply put, a vector is a line between two points that can be represented by a mathematical formula. This formula can be altered so that the line takes on a curved shape. This is how a vector image of a shape is stored in the file — as a geometric formula. Fortunately, we do not have to solve the equation to see the image; our computers do the math for us. Programs such as Adobe Illustrator and CorelDRAW make it easy for designers to manipulate vector shapes visually without seeing any formulas. It’s math for art’s sake.

Figure 3

Figure 3 demonstrates that if you scale up a vector image, it stays smooth. It’s still the same file, but a different number has been plugged into the formula that draws the circle. Hence the file stays small, but the image can be displayed and printed at any size, even billboard size, without making the file any larger. To get such a large, smooth image from a bitmap file, you’d have to add millions of pixels, and all that data adds up fast!

Why do we use bitmaps at all? Though vector art works well for line art and illustrations such as logos, bitmaps are the best way to present complex, photographic images. Designers almost always employ both kinds of computer images in every piece.

Now you understand the basics of color and shape in the world of digital design. Grokking these concepts will help you understand the rest of this series. Send me input; I’m currently working on the next installment, whose working title is “Web Technologies: Talk Tech With the Superdinks.”

Related reading