What Is Pixel Art and How Do You Make It with Piskel?
Pixel art is a drawing style where every image is built from visible square pixels, and a sprite is a single pixel-art character, object, or tile used in a game. Piskel is a free, open-source, browser-based editor for making both — you draw frame by frame, preview the animation live, and export as GIF, PNG, or a ZIP spritesheet. It suits beginners, teachers, and hobbyist game makers who want a no-install tool; it is best used in a desktop browser in landscape orientation.
Pixel art and sprites in plain terms
- Pixel art — artwork where the grid of pixels is part of the look, not hidden by smoothing. Small canvases (often 16×16 to 64×64) keep each pixel readable.
- Sprite — one pixel-art asset: a character, enemy, item, or tile. A sprite usually has several frames to show movement.
- Animation — frames played in sequence. Frame delay controls speed; a shorter delay means faster motion.
- Tileset — a grid of reusable tiles (ground, walls, props) that fit together to build levels.
These are the building blocks of 2D games and retro-style graphics, which is why Piskel's example gallery includes characters, Gameboy-style retro graphics, layered backgrounds, and tilesets.
What Piskel gives you
| Feature | What it does |
|---|---|
| Drawing tools | Create characters, animations, and tiles directly in the browser |
| Frame-by-frame animation | Build motion one frame at a time |
| Live preview | Watch the animation update in real time as you draw, and adjust frame delay on the fly |
| Export | Animated GIF for sharing; spritesheet PNG/ZIP for larger projects |
| Examples | Open a ready-made sprite or start from scratch |
| Open source | Full code available on GitHub |
| Offline versions | Free desktop and offline apps for Windows, OSX, and Linux |
| Piskel for Kids | A child-friendly version designed to be safe and distraction-free, for kids, teachers, and parents |
Making your first sprite
- Open the editor at piskelapp.com. Piskel states it is best used in a desktop browser and in landscape orientation; on a phone or portrait screen you will see an "Open anyway" option, but the layout is designed for desktop.
- Choose a starting point — open one of the sprite examples to see how a finished piece is structured, or start from scratch for a blank canvas.
- Set your canvas size. Small sizes keep pixels visible; pick a size that matches your target game resolution.
- Draw the first frame with the drawing tools. Work zoomed in so each pixel is deliberate.
- Add frames for movement. Duplicate a frame and shift a few pixels rather than redrawing everything.
- Check the live preview. It plays your animation in real time; adjust the frame delay until the motion feels right.
- Export. Choose the format that matches your next step (see below).
How to verify it worked: the live preview should loop smoothly with no flicker or unintended jumps, and the exported file should open and animate (GIF) or show the expected frame grid (spritesheet).
Choosing an export format
- Animated GIF — best for sharing, posting, or showing an animation to someone. One file, plays anywhere.
- PNG spritesheet — best when a game engine or another tool needs all frames in a single image to slice up.
- ZIP spritesheet — best for bigger projects where you want the frames packaged together rather than as one flat image.
If you are unsure, export a GIF first to confirm the animation reads correctly, then export the spritesheet for the project itself.
Common snags
- Working on a phone or in portrait mode — the editor is designed for desktop and landscape, so tools and panels are cramped otherwise.
- Canvas too large — big canvases make pixel-level control harder and blur the pixel-art look.
- Redrawing every frame — duplicating and nudging a few pixels is faster and keeps motion consistent.
- Animation too fast or slow — fix it with frame delay in the live preview before exporting.
- No internet or a locked-down machine — use the free desktop/offline versions for Windows, OSX, and Linux instead of the browser editor.
- Younger users — Piskel for Kids offers a safer, distraction-free version of the same editor.
Piskel's own description lists it as free and open-source, with the code on GitHub and offline downloads available; the site does not state any paid tier, account requirement, or usage limit, so treat those as unconfirmed rather than assumed.