Draw game sprites on a 32 × 32 canvas with up to 4 layers: outline, base colors, shading and highlights each on their own. Mirror drawing makes symmetrical characters twice as fast, and the sprite sheet export lays frames out in a row or grid for your engine.
How to use
- Tap the size button to pick a canvas from 8×8 to 128×128 pixels, or start drawing on the sample.
- Choose a tool and a color, then draw. With Mirror on, every stroke is copied to the other side.
- Use layers to keep outlines and colors apart, and frames to animate. Play shows the animation in the preview.
- Open Export to download a PNG at 1× to 32×, a sprite sheet or an animated GIF.
- Your drawing is saved automatically in this browser and never leaves your device. Save a project file (.json) to keep a copy or continue on another device.
- Right-click draws with the secondary color. Alt+click picks a color. Shift+click with the pencil draws a straight line from the last dot, and Shift+click with the fill bucket recolors every pixel of that color on the layer.
- Each frame has its own copy of every layer. Onion skin shows the previous frame, and faintly the next one, so you can line up movement.
- Exports keep hard pixel edges at every scale. GIFs keep transparency unless you turn on a white background.
- Import averages each block of the picture and reduces it to 4–64 colors or to the current palette. Choose Current layer to trace over it.
- On a touch screen, draw with one finger, pinch with two fingers to zoom and drag with two fingers to move around.
Choosing a canvas size
16 × 16 is the classic size for icons, items and small characters; 32 × 32 gives room for faces and detail and is common for game characters; 64 × 64 suits portraits and larger scenes. Smaller canvases force simple shapes, which is a good way to learn.
Pixel art is drawn small and shown big. Export at 8× or 16× for social media: a 32 × 32 sprite at 16× becomes a sharp 512 × 512 PNG, because every pixel is copied as a block without blurring.
Layers, frames and onion skin
Use one layer for outlines and another for colors or shading, so you can recolor without redrawing lines. For animation, each frame has its own copy of every layer. Onion skin shows the previous frame faintly, and the next one even fainter, so movement lines up. Play shows the loop at 1 to 30 frames per second; 8 to 12 fps is a typical speed for walk cycles.
Shortcuts and tips
Right-click draws with the secondary color, Alt+click picks a color, and Shift+click with the pencil draws a straight line from the last dot. Shift+click with the fill bucket recolors every pixel of that color on the layer, which is handy for palette swaps. Save a .json project file to keep a backup or continue on another device.
Frequently asked questions
What is the best size for pixel art?
Beginners often start at 16 × 16 or 32 × 32. 16 × 16 keeps shapes simple, while 32 × 32 leaves room for expressions and shading. Use 64 × 64 or larger for detailed scenes.
How do I export pixel art without blur?
Export the PNG with a scale such as 8× or 16×. Every pixel is enlarged as a solid square, so edges stay hard at any size.
Can I make an animated GIF?
Yes. Add frames, draw each pose, check the loop with Play and set the speed, then export a GIF. Transparency is kept unless you switch on a white background.
How do I make a sprite sheet for a game?
Draw your animation frames, then choose sprite sheet in Export and lay the frames out in a row or a grid. The sheet keeps exact pixel sizes for game engines.
Is my drawing saved?
It is saved automatically in this browser. To keep a copy or move to another device, download the project as a .json file and open it there.
Can I turn a photo into pixel art?
Yes. Import averages each block of the picture and reduces it to 4 to 64 colors or to your current palette, then you can edit the result by hand.