pixelartmakerComplete beginner's guide to making pixel art. Learn canvas size, color palettes, drawing techniques, shading, and how to create your first sprite — free browser tools included.
Pixel art looks intimidating until you realise it's the most approachable digital art form there is. No expensive brushes, no pressure-sensitive tablet, no reference library. Just a small grid, a handful of colors, and deliberate choices. This guide takes a complete beginner from a blank canvas to a finished sprite using nothing but a free browser-based pixel art maker.
What you'll need
A modern web browser and the free Pixel Art Maker. That's it. No installs, no account, no subscriptions. If you have a graphics tablet you can use one, but a mouse or trackpad is perfectly fine — many professional pixel artists work mouse-only because every pixel is placed deliberately rather than stroked.
Step 1 — Pick a canvas size
Start small. A 16×16 canvas teaches you to make every pixel count; 32×32 gives you room for a recognisable character with limbs and facial features. Anything larger is a project, not a learning exercise. The original Legend of Zelda used a 16×16 Link sprite. Pokémon sprites lived at 56×56. Constraint isn't a limitation — it's a tutor.
Step 2 — Set up your palette
Before drawing, pick 4–8 colors and commit. Fewer colors force creative decisions and lead to more cohesive results. Many professional pixel artists work with just 4 colors per character. Two great starter palettes:
- Pico-8 (16 colors) — warm, saturated, designed by indie game devs. Looks great at any combination.
- Sweetie-16 (16 colors) — modern, slightly softer, brilliant for character art.
- Game Boy (4 colors) — the ultimate minimalist challenge. Strict, atmospheric, instantly readable.
Step 3 — Draw the silhouette first
Use your darkest color to block out the basic shape. A good pixel art sprite is readable from its silhouette alone. If you can't tell what it is in pure black, no amount of color will save it. Squint at the screen — if the silhouette reads, you're ready to color.
Step 4 — Add base colors
Fill the silhouette with flat colors. Skin, clothing, weapon — one color each. Resist shading until the base reads well. Use the fill bucket for large areas, and the eyedropper to re-sample colors as you go.
Step 5 — Shade with intention
Pick one light direction (top-left is the pixel art tradition) and add a darker shade on the opposite side. One highlight, one shadow per area. Pixel art rewards restraint. Two colors per surface is plenty — three is luxurious — four starts to look muddy at small sizes.
Avoid pillow shading
Pillow shading is when you add a dark border equally around every edge of a shape. It creates a flat, bubble-like look. Real shading commits to a light source — one side bright, the opposite side dark, with a smooth transition between.
Step 6 — Anti-alias only where it helps
On diagonal curves, a single mid-tone pixel between two color steps softens the staircase effect. Use it sparingly. Over-anti-aliased pixel art looks blurry instead of crisp.
Step 7 — Export the right way
Use the maker's PNG 4× or 8× export to get a crisp image suitable for sharing. Never re-save through a JPEG compressor — JPEG was designed for photographs and destroys the sharp color boundaries that make pixel art work. If you need to resize later, use the Pixel Art Resizer with nearest-neighbour interpolation.
Five common beginner mistakes
- Too many colors. Cap yourself at 4–6 colors per sprite when starting out.
- Inconsistent pixel scale. Don't mix 1px and 2px details on the same sprite — pick a resolution.
- Skipping the silhouette step. Build readability first, beauty second.
- Pillow shading. Commit to a light direction.
- Resizing with bilinear interpolation. Always nearest-neighbour for pixel art.
Where to go next
Once you've drawn a few sprites, pull a reference photo through the Image to Pixel Art Converter to see how a computer would solve the same problem. Try the Palette Generator to extract a palette from a movie still or game screenshot you love. Try the Sprite Sheet Maker if you want to animate. Every tool on the site is free, browser-based and built to play nicely with the others.