1-Bit Icon Design vs Pixel Art
1ビットアイコン / ピクセルアート
1-Bit Icon Design comes from UI Expression and Pixel Art from Digital Image Techniques. Both are read here as technique. They are reached for with some of the same intent, which is where they get confused.
1-Bit Icon Design
The way of drawing icons in nothing but black and white that Susan Kare established for the Macintosh. She worked each design out on graph paper with one square standing for one pixel, and restated commands as ordinary objects, a pair of scissors for cutting and a bin for deleting, so the set could be read without a caption in any country. Her sketchbook now sits in a museum collection.
Pixel Art
.gif){kind=tracking}
Treats the pixel as an honest unit, building clear form from limited resolution and palette.
| 1-Bit Icon Design | Pixel Art | |
|---|---|---|
| Era | 1982–1990s | 1970s– |
| Family | UI Expression | Digital Image Techniques |
| Kind | Technique | Technique |
| Cues | Two values only, black and white, with gray standing in as a checkerboard of alternating dots / A one pixel outline closing each shape, and an interior that is either solid or dotted, never shaded / Ordinary objects, scissors, a bin, a sheet of paper, standing in as the names of commands / Visible traces of one dot placed per grid square, so diagonals break into steps | Visible pixels / Limited palettes / Tiles / Sprites |
| Best used for | Making small pictorial signs stand for commands with no caption, and read the same way in any language · Getting shapes to stay distinguishable inside a small frame that cannot be scaled or smoothed | Icons and controls for small screens that stay clean when scaled up · Game characters and terrain that must read apart at tiny sizes |
| Type | Keep letters out of the picture and put the label on a separate line outside it. Any type alongside sits on the same bitmap grid, with no italics and no ornament. | Draw letters on the same grid, fixing cap height in pixels |
| Composition | Rule the grid first and draw with one square standing for one pixel. Close the outline before deciding the interior, and leave one square of clearance inside the frame. | Scale only by whole multiples and keep every element on grid |
| Material | Two colours only, black and white. When a middle brightness is needed, build it by thinning the dots into a checkerboard rather than introducing gray. Leave diagonals as steps and do not smooth them. | Limited palette, dark outlines, neighboring hues to soften the steps |
| Caution | Adding gray or midtones to widen the range costs you the hard outline that only two values can produce, and the shape stops being legible at the size it is actually used. | Downscaling a photograph skips the decision behind every single pixel, and the contours turn muddy the moment the image is enlarged. |