How to Draw Your Own Pixel Art Sprite

6 min read · Updated October 2026

You don’t need to install anything to make game sprites. SpritePilot’s Pixel Art Editor runs entirely in your browser: draw with classic pixel tools, animate frame by frame, and hand the result straight to the sprite-sheet pipeline. This guide walks through drawing and animating your first sprite.

Open the Pixel Art Editor — free, in your browser, no signup.

Pick a canvas size. The editor opens with your last drawing, or a blank 32×32 canvas. To start fresh, use the "New drawing:" row at the bottom: click 16×16, 32×32, or 64×64, or type a width and height (8–128 px per side) into W and H and click "Create". The editor keeps one drawing at a time, so it asks before replacing one that has artwork. Smaller is easier: 16×16 or 32×32 forces you to focus on silhouette and readable shapes, which is what makes pixel art look good. Zoom from 1× to 40× with the magnifier buttons; from 6× up, a pixel grid shows over the canvas (the grid button toggles it).
Draw with the pixel tools. The toolbar has eight tools, each with a keyboard shortcut: Pencil (B) and Eraser (E) paint single pixels, and a fast drag still leaves an unbroken line; Fill (G) floods the connected area of exactly the same color; Eyedropper (I) picks a color from the canvas and switches back to the Pencil; Line (L), Rectangle (R), and Ellipse (O) drag out outlines with a live preview before they commit; Select / Move (M) drags a box around pixels, then drags them to a new spot. Ctrl+Z undoes (up to 60 steps); Ctrl+Shift+Z or Ctrl+Y redoes. On a Mac, Cmd works too.
Use symmetry for characters. The two mirror buttons toggle horizontal and vertical symmetry: every stroke, fill, and shape is mirrored across the middle of the canvas, and with both on it appears four times. Characters, faces, and ships are usually symmetrical, so drawing half and letting the mirror do the rest is both faster and cleaner. Turn symmetry off for details like a sword arm that should only exist on one side.
Pick colors from a real palette. The editor starts with DB32, a widely used 32-color palette that keeps your art cohesive — random colors are the fastest way to make pixel art look amateur. Click any swatch to paint with it, or type a hex value into the box next to the color picker; your last ten colors stay in the Recent row. Want your own scheme? Click "Import" and pick an image — the editor keeps its 32 most-used colors as your palette, and "Reset" brings DB32 back.
Animate frame by frame. The Frames strip at the bottom starts with one frame. "Add" inserts a blank frame after the current one; the duplicate button copies the current frame — duplicating and nudging is the classic way to animate. The arrow buttons move a frame left or right, and the trash button deletes it after asking. Toggle the onion-skin (ghost) button to see the previous frame at 35% opacity under your current one, which makes smooth motion much easier. Press Play in the Preview panel and tune the speed from 1 to 30 FPS (it starts at 8) until it feels right. Adding, duplicating, moving, or deleting a frame clears the undo history, so finish a correction before you rearrange frames.
Export it. "Send to Session" turns your frames into session sprites, replacing whatever the session held before. From there, Export & Download packs them into a sheet with TexturePacker, Phaser, Godot, Aseprite, or CSS metadata, and the Map Editor can paint levels with them (they appear under "From your sprite session" in its tile palette). Or export directly: "Download GIF" saves an animated GIF at your preview speed, "Download Sheet PNG" saves every frame side by side in one horizontal strip, and "Download Frame PNG" saves just the current frame.

Tips

Your drawing saves itself in this browser a moment after every change, and again when you switch to another tool — close the tab and it’s still there when you come back. Your tool, color, palette, grid, symmetry, and onion-skin choices are remembered too; "Reset to defaults" under the toolbar puts them back.
Start with the silhouette in one dark color, get the shape readable, then add interior color. Detail can’t rescue a bad silhouette.
Delete (or Backspace) clears the selected area; Escape sets a moved selection down where it is and deselects.
Onion skin only ever shows the previous frame. To compare with the next one, move the current frame right with the arrow button, check, then move it back.
For a walk cycle, draw the contact pose first, duplicate it, and move only the limbs — onion skin shows exactly how far each pixel traveled.

From drawing to game engine

The editor is deliberately part of the pipeline, not a dead end: draw a 4-frame idle animation, send it to the session, add an animation tag in Export & Download, and export a Godot SpriteFrames resource or a Phaser atlas — your hand-drawn sprite is playing in an engine minutes after the last pixel. Nothing is uploaded at any step; the artwork lives entirely in your browser.

Go deeper

Onion Skinning: Animate Pixel Art Without Guesswork — A key-poses-first workflow, and exactly what the editor’s ghost frame shows.
Limited Color Palettes for Pixel Art: Why They Help and How to Pick One — Hue-shifted color ramps, DB32, and which images work best with Import.
How Many Frames Does a Walk Cycle Need? 4, 6 and 8 Compared — Which poses to draw first, and how frame count and speed set the walking pace.
How Fast Should Pixel Art Animate? Choosing a Frame Rate — Starting speeds for idles, walks, pickups, and effects.

How to Draw Your Own Pixel Art Sprite

Tips

From drawing to game engine

Go deeper

Related guides