Frames and layers
Adding a layer adds an empty cel to every frame. Duplicating a frame copies its current appearance; subsequent pixel edits remain independent. Onion skin shows neighboring frames as red/cyan references and is excluded from exports.
Pixel Studio
Create pixel art and frame animations with drawing tools, selections, layered compositions and palettes. Preview motion with onion skin, then export PNG, a spritesheet or an editable Pixel Studio project.
Files are processed locally in your browser
32×32 · Frame 1 · Layer 1
Selection edits the active layer. Move: drag inside the selection or use arrow keys; Escape clears it. B/E/G/I/L/R/S/V/H select tools; [ ] change frames; Space plays/pauses; Enter draws at the keyboard cursor.
Animation timeline
Export
Current-frame PNG is the flattened visible composition. JSON preserves editable layers, frames, palette and timings.
How to use
- Choose dimensions for a new project or resize the canvas without scaling its pixels. Pick a color, brush size and drawing tool.
- Draw on the active layer and frame. The layer stack, visibility and opacity are shared across frames; each frame has its own pixel data.
- Add or duplicate frames, set their durations and preview the animation. Export the selected frame as a flattened PNG, a horizontal/vertical spritesheet, or versioned project JSON.
When it is useful
- Create sprites and icons one pixel at a time when you want direct control over every cell.
- Keep a layered JSON project for later edits, then export a flattened PNG for use in a game or document.
Formats and limitations
- PNG and spritesheets contain rendered pixels; they do not retain editable layers or frame durations. Pixel Studio JSON version 1 preserves those settings. Animated GIF export is not available.
- Canvas: 1–256 pixels per side, up to 8 layers and 64 frames, with a combined 16 MiB cel-data budget. PNG import accepts static images up to 256×256 and 8 MiB, without resizing. An imported layer must fit the existing canvas.
Examples
Choose the right pixel tool
Draw a 32×32 icon from scratch here; use Pixel Paint when the starting point is a photo or other existing image that you want to pixelate.
How it works
Local project
IndexedDB stores the current document on this device, including frames, layers, palettes and animation settings. Older one-frame drafts can be restored. Clearing browser data removes the draft; export JSON to keep a separate copy. Undo history is session-only.
Common mix-ups
- Exporting PNG when you still need to edit individual layers; save the project as JSON as well.
How data is processed
This tool performs supported operations in your browser. Files are not uploaded to a YourTool server. Third-party page services, such as ads, are kept outside the workspace.
Frequently asked questions
When should I use Pixel Studio instead of Pixel Paint?
Use Pixel Studio for manual pixel drawing, layered sprites and frame animation. Pixel Paint turns a template or image into a limited-color numbered painting, with optional dithering.
What happens when I import a PNG?
Choose a new project at the image's original size or a new layer in the selected frame. Layer imports are placed at the top-left without scaling and must fit the canvas. Other frames get an empty cel for that layer.
How do I keep animation timing and layers?
Export the versioned project JSON. A spritesheet arranges rendered frames horizontally or vertically, but the PNG itself does not contain playback timing or editable layers.
Learn the concepts and techniques
- How frame-based pixel animation works
Build motion from frames, durations and layers; use onion skin and export a spritesheet with deliberate timing.
- Pixel-art palettes, color reduction and dithering
Choose readable color ramps, understand quantization and decide when dithering helps or adds unwanted noise.