Learn pixel art
Short, practical lessons with my own examples. Most have a trainer: you draw right in your browser, step by step. Free. They come from my pixel art course, where every topic goes deeper.
Start here
Pixel art tutorial for beginnersYour first sprite in five steps: outline, colors, shading, lighting and details. With the mistakes I see most.
How to learn pixel art: a roadmapThe order I teach pixel art in, from simple to complex, with a free lesson for every step.
The 3 rules of pixel artWhat makes pixel art pixel art? Three simple rules and a quick checklist.
SPECC: how to plan pixel art before you drawSize, Perspective, Color and Light, Composition: the four decisions before the first pixel, with a checklist.
How long does it take to learn pixel art?Hours and months for small and big pixel art, and what skills you need for each.
Pixel art terms and common mistakesDoubles, jaggies, banding, pillow shading, sel-out and more, in plain words, with the fix for each.
Basics
Pixel art lines and curves (interactive)My lines worksheet in your browser: straight lines at clean ratios, then curves without doubles and jaggies.
Pixel art circles, squares and triangles (interactive)My shapes worksheet in your browser, 4 to 32 pixels, and the rules for a round circle at any size.
How to make a pixel art color paletteBuild a palette from one color: main tone, shade, light, and in-between tones only where needed.
Pixel art shading and lighting (interactive)Shade a sphere in your browser, then see the same light rules on a cube, cylinder, pyramid and cone.
Draw a pixel art apple (interactive)Draw my apple right in your browser, step by step. Watch me draw each step, then try it yourself.
Nature
- Draw pixel art fire (interactive)Draw a bonfire in your browser in four steps, and learn why fire is light at the bottom and dark at the edges.
Draw a pixel art fireball (interactive)Draw a rocket launcher fireball in your browser, and learn why its front is the hottest part.
Draw pixel art water (interactive)Paint a water tile for RPG and top-down games: waves, three layers of shading, highlights.
Draw pixel art clouds (interactive)Draw a cloud in four steps, and see why every cloud is just a group of spheres.
Draw platformer ground (interactive)Draw a ground block for a side view game in four steps, then add grass.
Draw pixel art rocks (interactive)Draw a cluster of stones with moss, and learn where light and shadow go on a rock.
Draw a pixel art bush (interactive)Paint a detailed bush over ready outlines: color, shading, light on every leaf, branches.
Draw a pixel art tree (interactive)Put a trunk under the bush: outline, soft shadow, spiral bark texture and grass at the roots.
Materials
Draw a pixel art metal plate (interactive)Draw a shiny steel plate with bevels, reflections, bolts and debossing. One sprite, four plates.
Draw a pixel art brick wall (interactive)Lay out a concrete brick wall, add bevels with light and shade, then recolor it into sand.
Draw a pixel art wooden floor (interactive)Draw a wooden floor: planks, seams, light, shade and grain.
Draw pixel art pipes (interactive)A 5 pixel cylinder lit from the top left, then an angle, a junction and a sleeve: four parts for any layout.
Draw pixel art glass (interactive)Tinted glass in shades of one color, clear glass shown with a glare. A glass door and a shop window.
Pixel art tileset: tiles, tilesets and tilemaps (interactive)Draw my 9 part pavement tileset step by step, then see two tilemaps built from the same tiles.
Characters
Perspective and isometric
Perspective in pixel art: which one to useIsometric 2:1, oblique 1:1, and when one or two point perspective fits, with how to choose.
Isometric pixel art for beginners (interactive)Learn the 2:1 isometric line, then draw an isometric air conditioner step by step.
Draw an isometric vending machine (interactive)An isometric box with a glass front, glowing edges and rows of soda cans.
Isometric challenge: balcony, rooftop window, tent (interactive)Draw a balcony around my isometric building block, then a rooftop window and a tent on the same block.
Isometric animation: a scrolling sign (interactive)Move a sign along the isometric path frame by frame, with Select and Move like in Aseprite.
Game scenes
Animation
Animate pixel art smoke (interactive)Your first animation: a puff of smoke in 10 frames, with onion skin and playback.
Pixel art walk cycle (interactive)Make the sage walk in four frames: steps, nods and swinging arms, with onion skin and playback.
Pixel art side view walk cycle (interactive)Four frames from the side: the legs, then the back, the head and a robe that swings a little.
Anticipation, smearing and easing (interactive)Animate the sage casting a spell: a squat, airwaves, faster frames and swinging cuffs.
Sub-pixel animation (interactive)Make motion smoother with trails of neighbor colors: the sage breathing, frame by frame.
Pixel art parallax, explainedWhy distant things seem slower, and how layers moving 1 to 4 pixels per frame build parallax scrolling.