Pixel art fundamentals showing resolution comparison and shading techniques

Pixel art fundamentals: everything you need to know

Master pixel art basics — resolution, color theory, shading techniques, and common styles. A comprehensive guide for beginners and intermediate artists.

What makes pixel art... pixel art?

Not every low-resolution image is pixel art. A blurry thumbnail isn't pixel art. A downsampled photo isn't pixel art. The difference is intention.

Pixel art means every pixel is deliberately placed. The artist chose that specific color in that specific position on a grid. Nothing is accidental, nothing is smoothed by an algorithm. It's digital painting at the atomic level — each square is a conscious decision.

That sounds intense, and honestly it is at first. But it's also what makes pixel art so satisfying once you get the hang of it. There's a clarity to working at this scale. No ambiguity, no brushes with soft edges, no blend modes hiding your mistakes. Just you and the grid.

This guide covers everything you need to understand before (and while) you start creating. It's not a step-by-step tutorial for one specific sprite — we have those too. This is the theory and vocabulary that makes all those tutorials actually make sense.


Resolution and scale

Resolution in pixel art isn't just a technical detail. It defines how much you can express.

Common sprite sizes

SizePixel countStyle referenceBest for
8x864Early Atari, minimal iconsTiny UI elements, item pickups, particles
16x16256NES era (Mega Man, Zelda)Small characters, items, indie game sprites
32x321,024SNES / GBA eraDetailed characters, most indie games
64x644,096Modern pixel art, hi-bitLarge characters, portraits, detailed scenes
128x12816,384High-detail modernSplash art, large portraits, marketing

Smaller isn't easier. This trips up beginners constantly. At 8x8, you have 64 pixels to communicate an entire character. Every single pixel carries enormous weight. At 64x64, you have room to add detail, fix mistakes, and finesse things.

Start at 32x32 if you're learning. It's the sweet spot — enough pixels to express detail without drowning in them. Drop to 16x16 once your fundamentals are solid. The 16x16 guide goes deep on working at that specific resolution.

Scaling rules

Pixel art should only be scaled by integer multiples: 2x, 3x, 4x. Never 1.5x. Never "fit to container." Non-integer scaling blurs pixels and destroys the entire point.

In game engines:

  • Unity — Texture filter mode: Point (no filter)
  • Godot — Texture filter: Nearest
  • CSSimage-rendering: pixelated
  • GameMaker — Texture filtering: Off

Get this wrong and your carefully crafted sprites look like smeared watercolors. Get it right and they're crispy at any display size.


Color theory for pixel art

Color in pixel art works differently than in traditional digital art. You don't have millions of colors to blend smoothly. You have a handful, and each one needs to earn its spot.

Palette size guidelines

Sprite complexityColorsExample
Simple icon2-4Coin, arrow, heart
Basic character5-8NES-style hero
Detailed character8-16SNES-style protagonist
Complex scene16-32Background tiles, splash art

Fewer colors forces better decisions. When you can't add another shade of blue to fix a transition, you learn to make two shades do the work of five. That constraint is what gives pixel art its distinctive look.

Picking colors that work

The three things that matter most in a pixel art palette:

Value contrast. This matters more than hue. Squint at your sprite — if you can't tell the parts apart, your values are too similar. A bright yellow and a dark purple will read clearly even at tiny sizes. Two medium blues won't.

Hue shifting. This is the trick that separates beginner palettes from good ones. Instead of making shadows just "darker versions" of the base color, shift the hue. A green character's shadows might lean toward blue. A red potion's highlights might push toward orange. It adds richness without adding colors.

Saturation control. Backgrounds should be less saturated than foreground sprites. Important elements get more saturated colors. This creates natural visual hierarchy — the player's eye goes to the brightest, most saturated thing on screen.

Don't pick colors randomly. Use a premade palette from Lospec when starting out. Our color palette guide goes deeper into building and modifying palettes.


Shading techniques

Shading is how you create the illusion of depth on a flat grid. There are a few approaches, and they produce very different looks.

Flat shading

Two values per material: a base color and a shadow color. That's it. Maybe a highlight if you're feeling fancy.

This is the NES approach. Mega Man, early Mario enemies, most 8-bit games. It reads clearly at small sizes and it's fast to produce. If you're making 16x16 sprites, flat shading is usually the right call.

Dithering

Dithering uses alternating pixels of two colors to simulate a third, middle value. It's like crosshatching in traditional drawing. A checkerboard pattern of dark blue and light blue reads as medium blue from a distance.

Classic dithering patterns:

  • 50% checkerboard — Equal mix of two colors
  • 25% / 75% — Asymmetric checkerboard, leans toward one color
  • Gradient dithering — Transitions from dense to sparse

Dithering was essential when hardware limited color counts. Now it's an aesthetic choice. It adds texture and a distinctive retro feel, but it can look noisy at very small sizes. Works best at 32x32 and above.

Anti-aliasing vs hard edges

Anti-aliasing in pixel art means manually placing intermediate-color pixels at the boundaries between areas to smooth jagged diagonal lines and curves.

Here's the controversial part: many pixel artists deliberately avoid anti-aliasing. Hard, jagged edges are part of the pixel art aesthetic. Anti-aliasing can make sprites look blurry or "dirty" at small sizes.

Use anti-aliasing when:

  • Working at 64x64 or larger
  • Creating standalone art pieces (not game sprites)
  • Smooth curves are important to the design

Avoid anti-aliasing when:

  • Working at 32x32 or smaller
  • Making sprites that will be seen alongside other hard-edged sprites
  • The sprite needs to animate (AA makes frame consistency harder)

Common pixel art styles

Not all pixel art looks the same. Knowing the major styles helps you pick a target and stay consistent across your project.

NES / 8-bit style

The original. Think the first Zelda, Mega Man, Castlevania. Characteristics:

  • Very limited palettes (3-4 colors per sprite, often plus transparency)
  • Small sprites (8x8 to 16x16)
  • Flat shading, no dithering
  • Strong outlines
  • Simple shapes, iconic designs

This style is forgiving for beginners because the constraints are so tight. You can't make a bad color choice when you only have three colors.

SNES / 16-bit style

More colors, more detail, more expression. Think Chrono Trigger, Final Fantasy VI, Super Metroid.

  • 8-16 colors per sprite
  • 16x16 to 32x32 sprites
  • Light dithering, some anti-aliasing
  • Expressive faces and animations
  • Richer backgrounds with parallax

This is where pixel art starts requiring real skill. More pixels means more decisions, and bad ones are harder to hide.

Modern hi-bit

The contemporary pixel art renaissance. Games like Hyper Light Drifter, Celeste, Dead Cells.

  • Large palettes (32+ colors)
  • Mixed resolutions (character sprites at one scale, effects at another)
  • Sophisticated lighting and particle effects
  • Animation quality rivaling traditional art
  • Often mixed with non-pixel-art elements (smooth UI, shader effects)

Hi-bit isn't really a single style — it's pixel art freed from hardware constraints but keeping the intentional, grid-based aesthetic.

Isometric pixel art

A different beast entirely. Isometric pixel art creates a 3D-ish view using a specific angular projection.

  • 2:1 pixel ratio for isometric lines
  • No foreshortening — all parallel lines stay parallel
  • Complex to master but produces striking results
  • Popular for strategy games, city builders, and RPGs

Our isometric pixel art guide covers this in detail if you're interested.


Outlines: the great debate

To outline or not to outline. Pixel artists have strong opinions about this.

Black outlines are the classic approach. A 1-pixel black border around your sprite makes it pop against any background. It's readable, it's safe, and it's the standard for game sprites. Most NES and SNES games use them.

Colored outlines (also called "sel-out" — selective outlining) use darker versions of adjacent colors instead of pure black. The helmet outline is dark gray, the skin outline is dark brown, the grass outline is dark green. This produces a softer, more natural look.

No outlines let your sprite breathe. All the pixels go to interior detail. This works when your background is significantly different from your sprite colors, but sprites can get lost against busy backgrounds.

For game sprites, start with black outlines. Switch to colored outlines once you're comfortable. Save "no outline" for when you know exactly what you're doing with your game's visual hierarchy.


Practice with the right tools

Theory only gets you so far. Open the pixel editor and start placing pixels. Make a 16x16 smiley face. Make a tree. Make whatever — the point is to internalize these concepts through practice, not reading.

Want a shortcut for references? Drop an image into the image to pixel art converter to see how a photo looks as pixel art. It's great for studying how shapes and colors translate to a limited grid. Not the same as hand-placing pixels, but useful for understanding the principles.

And when you need your finished pixel art as a scalable vector — for web graphics, print, or engine-agnostic formats — the PNG to SVG converter handles that conversion cleanly.


Common mistakes and how to fix them

Pillow shading

Shading that follows the outline instead of a light source. It makes everything look like a puffy pillow. Fix: pick one light direction (top-left is standard) and shade consistently.

Too many colors

Adding colors to solve problems instead of using existing ones better. Fix: set a hard limit before you start. Use a premade palette. If you think you need another color, try hue-shifting an existing one first.

Jagged lines ("jaggies")

Diagonal lines with inconsistent pixel stepping. A good diagonal uses consistent runs: 2-2-2 or 1-2-1-2. A bad one goes 1-3-1-1-4. Fix: count your pixel runs and make them regular.

Banding

Parallel lines of pixels that create unintentional stripes. Usually happens in shading — your shadow is exactly 1 pixel wide all the way around, creating a visible band. Fix: vary the width of your shading, or break up bands with dithering.

Noise

Random pixel-level detail that doesn't contribute to readability. Common when artists try to add texture at too small a resolution. Fix: zoom out. If you can't tell what those pixels are doing at 1x, remove them.


Where to go from here

You've got the theory. Now pick a path:

Practice from scratch — Open the pixel editor and create your first sprites. The beginner guide walks through making a potion step by step.

Study palettes — Browse Lospec palettes and read our color palette guide to understand why certain color combinations work.

Go small — Master the constraints of 16x16 sprites where every pixel counts.

Try generationGenerate sprites with AI to see how different descriptions produce different styles. It's a fast way to explore aesthetics.

Explore tools — Check the best pixel art generators of 2026 if you want to compare what's available.

The most important thing? Make stuff. Read this guide once, then spend the next hour making 10 terrible sprites. You'll learn more from those 10 sprites than from reading another 10 guides.

We use cookies to enhance your experience. Essential cookies are required for the site to function. You can choose to accept all cookies or only essential ones.

Learn more