How to Make Pixel Art and Animated Sprites with Piskel

Piskel is a free, open-source, browser-based editor for pixel art and animated sprites — you can design characters, animations, and tiles right in your browser, then export them as animated GIFs or spritesheet PNG/ZIP files. It works best in a desktop browser in landscape orientation, so if you're on a phone or a narrow window, expect a cramped workspace. The workflow below covers starting a sprite, drawing, animating frame by frame, and exporting.

Getting started

Open piskelapp.com and choose one of two paths:

• Start from scratch — create a blank sprite at a size you pick (small canvases like 32×32 or 64×64 are typical for characters and tiles).
• Try an example — the site's Sprite examples gallery includes characters, Gameboy retro graphics, layered backgrounds, and tilesets contributed by users such as CaptainBrosset, Ansimuz, Buch, and Surt. Opening one is the fastest way to see how frames, layers, and palettes are organized before you build your own.

If you're working with children or in a classroom, Piskel for Kids is a child-friendly version of the same editor, designed to be safe and distraction-free.

Drawing your pixel art

The editor gives you the standard pixel-art toolset: a pencil for single pixels, an eraser, fill, color picker, and shape/line tools, plus a color palette you can adjust as you work. Because everything is grid-based, zoom in before you draw — at small canvas sizes each pixel is a deliberate decision, and zooming keeps you from accidentally painting the wrong cell.

A practical order of work:

1. Set your canvas size first. Changing it later means redrawing or rescaling.
2. Block in the silhouette with a solid color.
3. Add shading and highlights with a limited palette (3–5 colors per material reads cleanly).
4. Clean up stray pixels with the eraser at high zoom.

Animating frame by frame

Piskel's timeline sits below the canvas. Each frame is a still image; the animation plays by cycling through them.

• Add frames to build a sequence — for a walk cycle, that usually means 4–8 frames.
• Duplicate a frame and edit only what changes, which keeps motion consistent between frames.
• Use layers to separate elements (for example, a character layer and a background layer) so you can edit one without disturbing the other.
• Check the live preview — Piskel shows a real-time preview of your animation as you draw, so you can judge timing without exporting.
• Adjust frame delay on the fly to speed up or slow down playback until the motion feels right.

Exporting your work

Piskel supports several export modes, and the right one depends on what you're doing next:

For game development, the spritesheet export is usually what you want — engines typically expect a single image containing every frame rather than a GIF.

Offline and desktop options

If you need to work without an internet connection, Piskel offers free desktop and offline applications for Windows, OSX, and Linux via its download page. The full source code is also open-source and available on GitHub at github.com/piskelapp/piskel, so you can inspect it, self-host it, or contribute.

Common snags

• Mobile or portrait orientation — the editor warns that it's best used in a desktop browser in landscape orientation. You can open it anyway, but the layout will be tight.
• Canvas size regret — pick your dimensions before drawing; resizing mid-project is the most common source of rework.
• Choppy animation — if motion looks jerky, the fix is usually more frames or a shorter frame delay, not more detail in each frame.