Pixel Art Animator

Draw, animate, and export your pixel art creations.

Tools

Color

Colour Helper

Grid Size

Project

Export

Preview

Layers

Frames

Instructions

Getting Started

  • Tabs: Manage multiple drawings using tabs at the top. Double-click to rename, or click the 'x' to delete a canvas.
  • Saving: Use Save Project to store all your work in your browser. Load Project will restore it in a future session.
  • Grid Size: Change the canvas dimensions at any time (this will clear the current canvas).
  • Undo/Redo: Correct mistakes easily with the undo and redo buttons next to the "Tools" title.

Drawing Tools

  • Pencil/Eraser: The basic tools for drawing and removing pixels. Adjust size with the "Tool Size" slider.
  • Move: Select the tool, drag a rectangle over the area to select it, then click and drag inside the selection to move it.
  • Fill: Fills a continuous area of the same color with your selected color.
  • Line/Shape: Click and drag to draw lines, rectangles, or circles. A "Tool Options" panel will appear to let you choose shape type and fill style.
  • Mirror: Creates symmetrical art. First, click the Mirror tool, choose an axis (Vertical/Horizontal), then click on the canvas to set the mirror line. Switch back to another tool (like Pencil) to start drawing.
  • Eyedropper: Click on any pixel on the canvas to pick its color. The tool automatically switches back to the pencil for a fast workflow.

Layer System

  • Active Layer: All drawing happens on the currently selected (highlighted) layer in the Layers panel.
  • Layer Controls: Use the buttons below the layer list to add, delete, duplicate, and re-order your layers.
  • Visibility & Opacity: Click the eye icon to show/hide a layer. Use the slider that appears on hover to change a layer's transparency.

How to Animate

  1. Add New Frames: Use the Add Frame button to add blank frames or the Duplicate button to copy the current frame.
  2. Use Onion Skin: Check the Onion Skin box to see a faint outline of the previous frame to guide your drawing.
  3. Watch the Preview: The Preview window on the right shows your animation playing in real-time.
  4. Adjust Speed: Use the FPS (Frames Per Second) slider to make your animation faster or slower.
  5. Export Your GIF: When you're happy, click the Export GIF button to save your creation.