Up to 32 frames
Add, duplicate, delete, and reorder frames while keeping the whole animation in one project.
DRAW · ANIMATE · PLAY
Sprite Maker.
Bring tiny characters to life, one frame at a time. Draw pixel art, preview your animation, and export a looping GIF or game-ready sprite sheet.
Frame 1 · Pen · Transparent background
P pen · E erase · F fill · I pick · S select · L lasso · V move
[ / ] shade · , / . switch frames · Space play · Ctrl / ⌘ Z undo
Your sprite stays on this device.
A LITTLE HEAD START
Start with a moving sprite.
Four original, four-frame loops to explore. Loading a template replaces your canvas and can be undone.
FROM FIRST PIXEL TO FINISHED LOOP
How to make an animated sprite
Create a small piece of game-ready animation in four practical steps.
- 01
Choose the canvas size
Start with a preset such as 16 × 16 or 32 × 32, or set any width and height from 4 to 100 pixels. The checkerboard marks transparent pixels.
- 02
Draw the first pose
Build a clear silhouette with the pen, fill, eraser, color picker, and a compact palette. You can also add a reference image to trace.
- 03
Add frames and motion
Duplicate the current frame, adjust only the moving pixels, and use onion skin to line up each new pose with the previous one.
- 04
Preview and export
Set a playback rate from 1 to 24 fps, test the loop, then download an animated GIF, a single PNG, or a row or grid sprite sheet.
ANIMATION TOOLS IN ONE WORKSPACE
What the sprite maker does
Draw and manage every frame, check the motion at full speed, and export without leaving the editor.
Onion-skin drawing
See the previous frame beneath the current one so limbs, effects, and outlines move by controlled amounts.
Live playback
Preview the loop as you edit and adjust its speed from 1 to 24 frames per second.
GIF and sheet export
Create a shareable looping GIF or a transparent PNG sprite sheet arranged as a strip or grid.
Pixel editing tools
Paint, fill, erase, replace colors, select areas, move pixels, and flip or rotate a frame.
Flexible palettes
Choose any hex color, save colors you reuse, or load a Lospec palette for a consistent look.
Reference images
Place an image behind the grid as a drawing guide and change its opacity without baking it into the sprite.
Automatic local saving
Your work is kept in this browser as you draw, and project files or pattern codes make portable backups.
DESIGN FOR THE FINAL SCALE
Making a sprite that reads at game size
Choose the resolution before the detail
Your canvas is the resolution players will see, not a large illustration waiting to be reduced. Begin with the tile grid and camera scale used by your game. At 16 × 16, prioritize a strong silhouette and a few identifying pixels. At 32 × 32, there is room for a face, hands, and a controlled shading ramp.
Judge the sprite at 100% zoom often. If the pose only works while enlarged in the editor, simplify it until the action remains recognizable at its real size.
Use a small, purposeful palette
Give every color a role: outline, base, shadow, highlight, or a small accent. A limited palette makes shapes easier to read and keeps frames visually consistent. Keep the light direction stable so highlights and shadows describe the same volume throughout the loop.
A dark outer edge can separate a tiny character from changing backgrounds. On larger sprites, selective outlines in darker versions of each local color can create a softer result.
Animate key poses first
Block the poses that explain the action before drawing the in-between frames. A short idle may need only two to four frames, while a walk often works in four to eight. Duplicate a pose and move only what must change; this prevents the body from wobbling unintentionally.
Use onion skin for alignment, but make the live preview your final test. Motion that feels smooth frame by frame may be unclear at game speed.
Export cleanly for games and sharing
For a game engine, export the sprite sheet at 1× and let the engine scale it using nearest-neighbor filtering. Frames are placed edge to edge, so the sheet can be sliced using the canvas dimensions.
For chat, social posts, or documentation, a 4× or 8× GIF is easier to see. Integer scaling keeps each original pixel square and avoids the blur introduced by smooth image resizing.
PICK A PRACTICAL CANVAS
Common sprite sizes
There is no single correct size. Match the canvas to your game grid, camera, and animation workload.
| Size | Typical uses |
|---|---|
| 8 × 8 | Particles, bullets, tiny pickups, map markers, and minimalist icons. |
| 16 × 16 | Tiles, inventory items, compact characters, and simple four-direction game art. |
| 24 × 24 | Small characters that need a little more facial or costume detail. |
| 32 × 32 | Player characters, enemies, expressive poses, and readable shading. |
| 48 × 48 | Detailed props, larger characters, and attacks that need space around the body. |
| 64 × 64 | Bosses, portraits, close-ups, and animation with more detailed silhouettes. |
The editor also supports rectangular canvases and custom dimensions from 4 to 100 pixels per side.
QUICK ANSWERS
Frequently asked questions
Is this sprite maker free?
Yes. You can draw, animate, preview, and export from the browser without creating an account.
How many animation frames can I create?
A sprite can contain up to 32 frames. Playback can be set anywhere from 1 to 24 fps.
How do I make an animated GIF?
Create at least two frames, preview the movement, choose Export animation, select GIF and an output scale, then download the looping file.
How do I use a sprite sheet in a game engine?
Export a sheet at 1×, then slice it into cells that match your canvas width and height. Use nearest-neighbor or point filtering and disable texture smoothing to preserve hard pixel edges.
Can I use my own color palette?
Yes. Enter a hex color, save favorite colors, or load a Lospec palette. PNG exports retain the artwork's original colors.
Where is my sprite saved?
The editor saves the current project in this browser. For a separate backup or another device, download the editable project or copy its pattern code.
Can I turn a still image into a sprite?
Use the Pixel Art Maker to redraw or simplify an image on a pixel grid, then build the movement here frame by frame.