MicroTools

Spritesheet Creator

Draw pixel art frame by frame with onion skinning, then export as a PNG spritesheet.

7×
Size: 1px
Preview

0 frames · 64×64px per frame
Output: 0×NaNpx

Frames — 1 of 0 (64 max)

About Spritesheet Creator

Free online pixel art and spritesheet creator. Draw frames on a canvas with pencil, eraser, fill, line, rectangle, and ellipse tools. Use onion skinning to trace movement between frames, preview your animation at any FPS, then export a ready-to-use PNG spritesheet. Supports mirror drawing, grid overlay, undo/redo, frame duplication, and custom frame sizes from 16×16 to 128×128.

How to Use

  1. 1Choose a frame size from the dropdown (e.g. 32×32 for small game sprites).
  2. 2Draw your first frame using the pencil tool. Use the color palette or color picker to choose colors.
  3. 3Click "+ Add" to create a new frame. Toggle Onion Skin to see the previous frame ghosted behind the canvas.
  4. 4Repeat for each animation frame. Use Duplicate to copy a frame as a base for the next one.
  5. 5Click ▶ Play to preview the animation in the preview panel. Adjust FPS as needed.
  6. 6Click "Export PNG" to download the spritesheet. Set Columns if you want a grid layout instead of a strip.

Frequently Asked Questions

What is a spritesheet?
A spritesheet is a single image file containing all animation frames arranged in a grid or strip. Game engines and renderers use spritesheets to display animations efficiently by sampling different regions of the image.
What frame sizes are supported?
Preset sizes include 16×16, 32×32, 48×48, 64×64, 128×128, 16×32, 32×64, and 64×32. Choose the size that matches your game or project requirements before drawing.
What does onion skinning do?
Onion skinning shows the previous frame(s) as a semi-transparent ghost behind your current frame. This makes it easy to trace movement and keep animation smooth — the same technique used in traditional cel animation.
Can I upload an existing image?
Yes. Click "Upload image to frame" to load a PNG or JPEG into the current frame, scaled to fit the canvas. You can then draw on top of it.
How do I export?
Click "Export PNG". Frames are arranged horizontally by default (horizontal strip). Set "Columns" to 4 to get a 4-column grid, for example. Use the Scale option to export at 2×, 4×, or 8× the canvas size.

Tool Info

Category
dev
Usage
Unlimited

Related Tools

Image Editor

Edit images with presets & sliders — Cyberpunk, Vintage, Noir and more.

CSS Visual Generator

Generate CSS gradients, box shadows, and border radius visually with live preview.

More dev tools

JSON Formatter

Format, validate, and beautify JSON data.

Base64 Encode/Decode

Encode text to Base64 or decode Base64 to text.

Encoder / Decoder

Encode & decode text with 15+ formats: Base64, URL, Hex, Binary, Morse, ROT13, JWT, SHA-256 and more.

GitHub Repository Scanner

Visualize any public GitHub repo: file tree, stats, README, and contributors.