How to Make Pixel Art Animation and Export a GIF or Sprite Sheet

1. Choose what you want to export

Pixel animation works by displaying still images one after another. For example, two drawings of the same face, one with open eyes and one with closed eyes, can create a blink.

Use an animated GIF when you want the motion to play as a file. A sprite sheet is a static PNG containing multiple frames in a row or grid; software such as a game engine can then select and display each frame.

Pixel Animation Studio can export an animated GIF, a sprite sheet, or a PNG of the currently selected frame.

2. Start with a small canvas

Open Pixel Animation Studio and choose a 16×16, 32×32, 64×64, or 128×128 canvas. You can also set custom dimensions, up to 128 pixels in each direction.

A 32×32 canvas is a manageable starting point for a first animation. Zoom makes the pixels easier to draw without changing the artwork's actual dimensions. The Grid overlay helps with alignment and is not included in saved images.

If you already have a pixel-art PNG, you can start from that file instead. The image must fit within 128×128; the app does not automatically shrink an oversized source.

3. Draw the first frame and choose your colors

Draw the first frame with Pencil and remove unwanted pixels with Eraser. Fill colors a connected area, while Eyedropper samples a color. Pencil and Eraser offer 1, 2, and 4-pixel brush sizes.

Zoom in to work accurately, and turn on Grid when it helps. On a phone, one finger draws while two fingers pan or pinch to zoom. On a desktop, use the mouse wheel to zoom or hold Space while dragging to pan.

Undo and Redo work within the frame you're editing. They don't reverse changes made to other frames.

4. Duplicate frames and use onion skin

Once the first frame is ready, duplicate it and change the parts that move. You can add, copy, delete, and reorder frames, with 1 to 128 frames in a project.

Turn on Onion Skin to show a faint copy of the immediately previous frame. This makes it easier to align details, such as an eye or foot, when shifting them by a few pixels. The overlay shows only the preceding frame.

Rectangle Selection can move, copy, cut, or delete a region of pixels. To paste, first create an active destination selection. On a desktop, the arrow keys can nudge the selected pixels by one pixel at a time.

5. Set frame timing and preview the motion

Set the duration of each frame from 20 to 5000 milliseconds in 10 ms increments. Use Apply to all when every frame should stay visible for the same amount of time. Shorter durations make the animation advance more quickly.

Preview the result with Play, Pause, Restart, and Loop. If the movement jumps too abruptly, duplicate a frame and draw an intermediate pose, or adjust the timing.

On phones, the bottom navigation switches between Edit, Frames, Preview, and Export. The drawing controls and playback view have separate workspaces.

6. Import existing PNG drawings as frames

If you have PNG drawings already, start a new project from one PNG or add several same-sized PNG files as frames. You can use the file picker or drag and drop.

PNG frames must match the active canvas dimensions. The editor won't resize or crop mismatched or oversized images. It reports failed files separately and keeps any frames imported successfully.

Image import is PNG-only. The editor cannot directly import a GIF, JPEG, WebP, Aseprite file, or an existing combined sprite-sheet image.

7. Export the animation as a GIF

Open Export and choose Animated GIF once the motion looks right. The app uses every frame in order, keeps the individual frame delays, and makes the GIF loop indefinitely. Transparent backgrounds are supported.

GIF supports at most 256 colors and cannot store partial transparency. Colors may be reduced when necessary, and partly transparent pixels become either fully transparent or opaque. Inspect the exported result if precise colors or translucency matter.

Encoding a GIF with many frames on a 128×128 canvas can use substantial device memory. On a phone that struggles, try a smaller canvas or fewer frames.

8. Save a sprite-sheet PNG or a single frame

For game assets or editing elsewhere, choose Sprite Sheet PNG. Horizontal places every frame in a single row; Grid lets you set the number of columns. The export panel shows the resulting dimensions and row and column counts before saving.

A sprite sheet is a still image. A game or animation engine must read the individual cells and display them in sequence. The PNG does not play automatically like a GIF.

To export only the selected frame, choose Current Frame PNG. You can scale it by 1×, 2×, 4×, or 8× with nearest-neighbor scaling, which keeps hard pixel edges and preserves transparency.

9. Save an editable project and understand the limits

An exported GIF or sprite sheet cannot restore the original editing session. For further edits, use Save project to keep a .pixel-project.json file. It stores the frames, colors, timing, and editing and export settings, with a 12 MiB file limit.

Restore it with Open project. When IndexedDB is available, the browser also autosaves locally, but clearing site data may erase that copy. Undo and Redo history is not preserved after a reload or in the project file; saved projects also exclude active selections and clipboard contents.

Drawing, PNG import, GIF encoding, and PNG export run locally without uploading your artwork to a conversion server. The page requires an initial HTML download; after that, the app blocks runtime external connections with connect-src 'none'. It does not support layers, Animated WebP export, or GIF import.

Tips and limitations

• Begin with a few frames and duplicate existing drawings. Change the moving parts and check the result before adding more frames.
• Use Onion Skin to compare your drawing with the faint overlay of the previous frame.
• GIF does not retain partial transparency. Compare it with PNG when translucent pixels matter.
• Keep a .pixel-project.json backup as well as the GIF if you plan to edit the animation on another device.