How to Create and Export Animated Sprites with Piskel

Piskel is a free, open-source, browser-based editor for animated sprites and pixel art. You can design characters, animations, and tiles directly in your browser, then export them as animated GIFs, PNG spritesheets, or ZIP files. It works best in a desktop browser in landscape orientation, and offline desktop versions are available for Windows, OSX, and Linux if you prefer not to work in the browser.

Getting Started

Open piskelapp.com in a desktop browser. You have two starting points:

• Start from scratch — create a blank sprite and set your own canvas size.
• Try an example — load one of the built-in sprite examples (characters, tilesets, layered backgrounds, Gameboy retro graphics) to see how a finished sprite is structured before making your own.

If you're on a phone or tablet, Piskel will warn you that it's best used in a desktop browser in landscape orientation. You can open it anyway, but the drawing tools are designed around a mouse and a wider canvas.

Drawing Pixel Art Frame by Frame

Piskel's workflow is frame-based: each frame is a single still image, and the animation plays them in sequence.

1. Set up your canvas. Choose a small pixel grid (classic sprites are often 16×16, 32×32, or 64×64). Small canvases keep individual pixels visible and editable.
2. Draw with the pen tool. Click individual pixels to place color. This is the core action for pixel art — every pixel is a deliberate decision.
3. Fill areas with the fill tool. Use it to flood a region with a single color instead of clicking pixel by pixel.
4. Pick and manage colors. Choose from the color palette, or select an existing color from your canvas to reuse it consistently across frames.
5. Add frames. Duplicate the current frame and modify it slightly to create motion — this is how walk cycles, blinking, and idle animations are built.

The key habit for animation: keep changes between consecutive frames small. A two-pixel shift in a leg position reads as movement; a ten-pixel jump reads as a glitch.

Previewing and Tuning the Animation

Piskel shows a live preview of your animation in real time as you draw, so you don't have to export to check whether the motion works.

• Adjust frame delay on the fly. Each frame's delay controls how long it stays on screen. Shorter delays make fast motion; longer delays make slow, deliberate movement.
• Watch the loop. Because the preview loops continuously, you'll immediately see whether the first and last frames connect smoothly or whether there's a visible jump.

Tune the delay while watching the preview rather than guessing — the same frames can feel completely different at different speeds.

Exporting Your Work

Piskel supports several export modes depending on what you need the file for:

Choose GIF when the animation is the final product. Choose a spritesheet PNG or ZIP when the sprite is an asset that another program will read.

Options for Kids and Offline Use

• Piskel for Kids is a child-friendly version of the editor, designed to be safe and distraction-free. It's aimed at kids, teachers, and parents who want the same pixel art workflow without extra interface elements.
• Offline versions are free desktop applications for Windows, OSX, and Linux, available from the download page. Use these if you need to work without an internet connection or want a dedicated application window.

Common Sticking Points

• Working on a small screen. The editor is built for desktop and landscape orientation; drawing precision suffers on a phone.
• Frames that don't loop cleanly. If the animation snaps when it restarts, the last frame doesn't lead back into the first — adjust the final frame's pose or delay.
• Exporting the wrong format. A GIF is for viewing; a spritesheet is for importing into a game. Picking the wrong one means re-exporting later.

All of Piskel's code is open-source and available on GitHub, so the tool itself can be inspected, modified, or self-hosted if you need that level of control.