Pixel perfect: The golden age of icons was 32x32

pixel perfect icons primary

This is the icon for Keynote. (Yes, it’s the icon for the previous version, since it makes my point just a little better, but I could have picked anything.)

pixel perfect icons 01

Actually, we’ve had to scale that down to get it to fit, because actually it’s over a thousand pixels wide. If we crop in a bit so you’re seeing it at 100%, it looks like this:

pixel perfect icons 02

It’s rich and full of subtle details that you don’t necessarily appreciate when you see it in your Dock. Blow it up a bit and it looks like this:

pixel perfect icons 03

(By pure chance, that image contains 128 colors, which pleases my inner geek immeasurably.) When you see this apparently abstract grid of pixels that makes up the high textured, hyperrealistic graphic you perceive as a wooden lectern, you realize that it could never, practically, be constructed by someone painstakingly painting a pixel at a time to build up the image. Technically, this approach might be quite feasible, but like pointillist art, the results of creating subtle, naturalistic images this way tend to have a very particular feel to them which, while pleasing, don’t conform to our modern definition of realistic.

In the early days of the graphical user interface, with bigger, blockier pixels and a reduced color palette to work with—reduced, of course, to black and white without even the crutch of gray at the very start—icons were drawn by hand. In fact, they were literally drawn, in the case of the designer of the original Macintosh interface elements, Susan Kare, who would sketch out her icon ideas in a graph paper notebook.

pixel perfect icons 04

Even once we had millions of colors, however, the aesthetic of the pre-OS X Mac operating system was sharp, crisp edges and ground-up pixel precision. Look at the icon at the start of this paragraph. Partly because of the constraints of the 32×32 pixel canvas its designers were working on—later supplanted by 128×128 and now 1024×1024—and even though this was the era when we were starting to see photorealism creeping into icons, every pixel that makes it up is carefully and deliberately placed, with the result that it’s able to create a feeling of complexity even while being made up of only a thousand or so pixels. Blow it up and you’ll see how it’s put together.

pixel perfect icons 05

Note for example how there’s a line of blue to the right of the small inset folder, creating a shadow for it on the mint-colored object behind. You don’t really appreciate this when it’s at 100 percent—all you get is the impression of richness—but once you enlarge it you see how that impression was created, with the careful placement of dots of color. Indeed, the dark teal colored single-pixel dots where that blue shadow "falls" over the lines on the mint "list" might have been created by overlaying the blue on the underlying color and letting Photoshop, say, do the work, or the designer might have specifically picked the color and with three methodical clicks, dotted the color where it was needed.

pixel perfect icons 06

Just because these icons were pixel-perfect, though, doesn’t mean they couldn’t have nuance and delicacy. Take the icon at the start of this paragraph, for the Appearance Control Panel. Blow it up and you see that the fades are carefully constructed—which reminds me of nothing so much as my high school art teacher blowing my mind when he told me that just because you’re doing a line drawing doesn’t mean you can’t also show three-dimensionality. (The trick is to vary the weight of the line.)

pixel perfect icons 07

Towards the end of the Classic Mac OS’s era, we did start seeing what amounted to photographs getting incorporated into icons, such as in this family of icons for speech-related system extensions.

pixel perfect icons 08

Even here, though, where a purely photographic approach would have got lost and muddied when scaled down too far, there’s hand-tweaking and hinting going on in the rightmost icon above.

pixel perfect icons 09

I have huge affection for these icons, not just because I admire their technical brilliance in condensing complex ideas onto a small canvas, and not just because their size references the original icons, tiny painted portraits of holy figures, much more directly than the gargantuan pictures that we use as icons today, but because I could make them.

While boys my age were mostly unsuccessfully trying to get into girls’ underwear and trying with rather more success to filch cans of beer from their fathers’ fridges, I was in my bedroom, slowly, ploddingly turning pixels in a grid different colors to create my own icons. Once you’d reverse-engineered how Apple’s designers had created the impression of thickness, how they’d dealt with simplifying icons further for list-view variants, or how they’d created suites of icons with common elements, all that stood between you and your own icons was thousands of mouse-clicks and a hitherto unarticulated ambivalence towards socializing with your peers.

Seriously: it took hours. And it could only loosely be called fun. But I loved it.

Truthfully, I never really did things properly, content instead just to tinker, to appropriate, and to do just enough that what I got out of the end looked good enough on the surface for my folders full of school work and so on.

I’d plunder apps with ResEdit to see what resources I could steal or lessons I could learn.

pixel perfect icons 10

Most of what ResEdit revealed from inside an app was arcane, esoteric “programming stuff” that I didn’t understand as a kid—though I realize now if I’d been less afraid of breaking things I’d have dug deeper and probably got much more out of my Mac—but there were a few things I could double-click on that anyone could understand, such as the cursor icons above or the list of icons each app held. Here’s all the icons bundled inside the Finder, for example.

pixel perfect icons 11

What’s more, since this was ResEdit, you could edit the icons files as well, and double-clicking on one would bring up the editor, a kind of specialized porto-Photoshop where not only could you edit the full-size, full-color icon, but also the different sizes for different contexts, different color constraints, and the mask for the icon.

pixel perfect icons 12

The big, lush icons we have in OS X are lovely, and they’re even lovelier on a Retina screen. I haven’t got anything like the skill needed to make them, though, and that’s a big part of my nostalgia for the pre-OS X icons.

To comment on this article and other Macworld content, visit our Facebook page or our Twitter feed.
Shop Tech Products at Amazon
Notice to our Readers
We're now using social media to take your comments and feedback. Learn more about this here.