How to make pixel art: a beginner guide

Pixel art is drawing where every pixel is placed on purpose. Start on a tiny canvas such as 16×16, choose a handful of colours, block in the silhouette, clean up the outline, add shading from one light direction, then save it as a PNG and enlarge it with nearest-neighbour scaling at a whole-number multiple so each pixel stays a sharp square. The pixel art editor I built covers that whole loop in the browser, and this guide walks through each step.

Start small

It is tempting to start big, but bigger canvases are harder, not easier: every extra pixel is another decision. The editor offers 8×8, 16×16 and 32×32 grids. 16×16 is the classic size for icons, favicons and small game sprites, and small enough to finish in one sitting. 32×32 gives room for a face with an expression. 8×8 is a fun constraint for symbols and tiny items. Begin with the silhouette in a single colour and check that the shape reads at its real size; if you cannot tell what it is as a flat shape, detail will not save it. The pencil places one cell at a time, the eraser clears cells back to transparency, and the flood fill colours a connected area in one click.

Use a limited palette

Early computers and consoles could only show a few colours at once, and that limit shaped the look of pixel art. Today a limited palette is a choice, and a good one: four to sixteen colours keep a piece coherent and make every colour count. The editor gives you twelve ready colours plus a custom picker. Plan colours in ramps: for each material, such as skin, grass or metal, pick three or four steps from dark to light. Many pixel artists also shift the hue along the ramp, making shadows slightly cooler and highlights slightly warmer, which looks livelier than simply darkening. To borrow a palette from a reference picture, the colour palette extractor pulls out its main colours as hex codes.

Clean lines and curves

On a pixel grid every diagonal is a staircase, and the trick is making the steps regular. A line whose steps go 2, 2, 2 looks straight; one that goes 2, 1, 3, 1 looks lumpy. For curves, let the step lengths change gradually, such as 3, 2, 1, 1, 2, 3, rather than jumping. Watch for doubles, the little L-shaped corners where a line becomes two pixels thick for a moment; removing them makes outlines look crisp. Outlines do not have to be black: a dark shade of the neighbouring colour often looks softer and more polished.

Shading, dithering and anti-aliasing

Choose one light source, top-left is the common convention, and shade every shape consistently from it: lighter on the lit side, darker on the opposite side and underneath. Avoid pillow shading, where each shape is simply dark at the edges and light in the middle regardless of the light, which makes everything look puffy. Dithering, a checkerboard of two colours, suggests a third colour or a gradient, and was a staple when palettes were tiny; use it sparingly at small sizes, where it can look noisy. The image dither tool applies classic dithering patterns to photos if you want to see the effect. Hand anti-aliasing, adding in-between colours at the steps of a line to smooth it, is worth learning later; at 16×16 it often blurs more than it helps.

Saving and scaling without blur

Always save pixel art as PNG. It is lossless and keeps transparency, while JPEG smears hard edges and adds coloured noise. The editor exports a transparent-background PNG at 8, 16 or 32 pixels per cell, so a 16×16 sprite exported at 16× becomes a crisp 256×256 image. The drawing lives only on the page, so download anything you want to keep before refreshing.

To enlarge finished art later, use nearest-neighbour scaling, which copies each pixel into a solid block, rather than the bilinear or bicubic smoothing most image editors default to, which blends neighbours and blurs the art. Stick to whole-number factors: at 2.5× some pixels have to become two pixels wide and others three, and the grid looks uneven. The pixel art scaler enlarges from 2× to 16× with hard edges, and on a web page the CSS property image-rendering: pixelated tells the browser to scale the same way. How image upscaling works: interpolation, Lanczos and 'AI enhance' explains why the other methods blur. If your sprite is destined for a browser tab, the favicon generator turns it into a complete icon set.