Time-Limited Pricing Featured Sign up

Pixel & 8-Bit Graphics

Inside are dithered gradients built from scattered dots, bitmap patterns drawn as vector rather than as pixels, high-contrast 1-bit artwork for dark backgrounds, sprites and tiles on a stated grid, and the windows, cursors, and error panels of early computing. The dots are geometry here, so they can be recolored freely — and still read at a single size.

3D GraphicsCartoon Graphics & IllustrationsFlat Design GraphicsGeometric Shapes & GraphicsRetro GraphicsSticker GraphicsY2K Graphics
15 Resources
Dark Aesthetic | Bitmap Vectors Plus
Special
Dark Aesthetic Dithering Graphic Bundle Plus
Dark Aesthetic Dithering Graphic Pack Vol.4 Plus
Dark Aesthetic Dithering Graphic Pack Vol.3 Plus
Dark Aesthetic Dithering Graphic Pack Plus
Dark Aesthetic Dithering Graphic Pack Vol.1 Plus
Bitmap Vector Shapes Plus
Abstract Bitmap Vector Elements Plus
Bugs Dithering Bitmap Vector Shapes Free
Special
Dithering Bitmap Vector Shapes Collection Plus
Special
You Have Died! Graphics Plus
Abstract Dithering Bitmap Shapes Plus
Y2K Dithering Bitmap Elements Plus
Abstract Dithering Bitmap Shapes Free
Special
144 Dithering Bitmap Vector Shapes Plus
Pixelbuddha August Tim-Limited Giveaway — six massive design products, available for subscribers this month. Pixelbuddha August Tim-Limited Giveaway — six massive design products, available for subscribers this month.

Pixel art and 8-bit graphics: the grid, the palette and what to check before you buy

All of this artwork sits on a grid of squares, and you normally get a handful of colors to fill them with. You pick a color for each square, and that's the drawing. It gives you the look you came for, and it causes most of the trouble you'll hit later.

The original Macintosh is a handy example, because both halves of this had to work on one screen. Susan Kare drew the icons on graph paper, thirty-two squares across, filling them in by hand because there wasn't any software for it yet. Bill Atkinson had the other problem. The display could show only black or white, so a photograph couldn't appear on screen at all until it had been broken up into scattered dots. His version of dithering in MacPaint threw away about a quarter of the error rather than passing it all on, which is why images from that era look brighter than they otherwise would.

Both methods stuck around long after the hardware stopped needing them, and they brought the grid along. The grid fixes a size the artwork is meant to be seen at, and it won't stretch to fit whatever you're building. So the thing to establish early is what size a piece was drawn at and how many colors it's working with. Most of what goes wrong later comes back to one of those two.

Pixel art beyond games

  • Game UI, sprites, tilesets and store artwork for indie titles.
  • Music artwork and club flyers borrowing from arcade and early console culture.
  • Streaming overlays, emotes, badges and channel graphics.
  • Apparel and enamel pins, where the grid survives embroidery and cloisonné better than fine linework.
  • Developer and tech branding that wants a machine-made reference.
  • Animated stickers, loading states and small looping web elements.
  • Cross-stitch, beadwork and craft patterns, which run on the same grid.

Working to the grid

Find the native size before you build anything around a piece. Zoom in until you can count the individual squares, work out how many screen pixels one of them takes up, and treat that as the size the artwork was drawn to be seen at, because every decision in the file was made at that size and none of them travel. Anything else you do afterward is a compromise against it, which is perfectly fine as long as you know that is what you are doing.

Take the scaling rule literally, because this is where most of the trouble comes from. Nearest neighbor only, and whole numbers only — anything that smooths as it resizes averages the squares into each other and takes away the hard edge holding the picture up, and a fractional scale quietly gives some squares an extra row while their neighbors keep the original count, which leaves the grid looking uneven in a way you cannot fix afterward. For print, enlarge to the physical size first, then place at 100%; otherwise, InDesign puts all the smoothing back in at output, and you have wasted the step.

Stay on one grid for the whole piece, and check this before you add anything of your own. Artwork drawn at a finer grid sits inside the picture as a second resolution, and it is the thing everybody spots first in mixed pixel work — it will still be visible after every other correction you make. If you are extending a set, match the block size before you draw a single square, then go back and match the outline weight and the way the set handles its dithering.

What dithered and bitmap sets contain

  • Dithered gradients. Fades built from scattered dots on a flat ground, with no gradient in the file. The effect depends on the dot size being read correctly.
  • Bitmap vector shapes. Dot patterns drawn as geometry, so they recolor and scale as vector while still behaving like a fixed screen resolution.
  • Dark aesthetic sets. High-contrast 1-bit artwork made for black backgrounds. The dithering does all the tonal work.
  • Interface and error fragments. Windows, panels, warnings, and system debris borrowed from early computing.
  • Bitmap illustration. Objects and creatures drawn entirely in dot patterns, used as spot artwork.

Pixel art places each square deliberately to build a shape. Dithering uses a pattern of squares to fake a tone the palette cannot produce, which is how a two-color file ends up reading as a gradient. The two are usually combined, and they behave identically once placed.

Both exist, and the difference is narrow. Vector versions render every dot as a real shape, so they recolor by fill and stay crisp at any output resolution. Raster versions are fixed at the pixel dimensions at which they were drawn. Vector removes the resolution ceiling but not the grid: the dots still have a single size at which the pattern reads correctly, and enlarging beyond it turns them into visible discs.

Two separate causes, with two separate fixes. Any resampling method that smooths an image averages neighboring squares together and destroys the hard edge that the style depends on, so scale with nearest-neighbor. Separately, scaling by a fraction gives some squares an extra row while their neighbors retain the original count, leaving the grid visibly irregular. Use whole-number factors only.

Enlarge to the final physical size first, using nearest-neighbor, so each original square becomes a solid block at the intended dimension, then place that file at 100%. Scaling a small file up inside a layout application reintroduces smoothing at output. Allow for dot gain as well, since block corners soften on uncoated stock and at small sizes the whole image gains weight.

Yes, but map the ramp as a whole instead of swapping colors one at a time, because form here is built from the spacing between a few tones in a set order. Keep the same number of steps and comparable lightness gaps. Dithering has one extra condition: it only reads as tone when the dots sit clear of the ground in value, so two brand colors of similar lightness collapse into flat grey.

Match the pixel size first. Every set is drawn at a fixed grid, and artwork added at a finer grid reads as a different resolution sitting in the same image — the most common tell in mixed pixel work. Zoom to the source pixel level, measure the block size, set your canvas so one drawn pixel equals one block, and check that outlines and dithering follow the same conventions the set uses.

The dot grid interferes with the display's pixel grid or with the resampling applied during export. Export at the exact dimensions the element will be displayed at. When the display size is variable, choose a coarser dot that survives resampling, and avoid placing two different dot densities side by side in the same layout.