Home › Pixel art animation

Pixel art animation

A pixel animation is a run of single images shown one after another. The craft is not in the tool but in two questions: which images do you actually need — and how long does each one stay on screen?

Frames: only as many as you need

Beginners paint too many. Pixel art lives on reduction, and that goes for movement too. A walk cycle works on four to eight frames. A blink needs two. A standing character who breathes gets by on two frames in which the chest rises by exactly one pixel.

The approach that works most reliably: paint the extreme poses first — the widest stride, the top of the jump, the fully closed eye. Those images carry the movement. The in-betweens come afterwards, and you usually need fewer than you think.

The timeline: timing is half the job

Every frame in KistePix carries its own duration in milliseconds. 100 ms is ten frames per second — a good starting point.

The mistake nearly everyone makes is giving every frame the same duration. Real movement is unevenly timed. A punch winds up slowly (three frames at 120 ms) and lands in a flash (one frame at 40 ms). A jump hangs for a moment at the top of its arc. That imbalance is precisely the difference between "stutters evenly" and "has weight".

Layers save you the redraw

Keep whatever does not move on its own layer: the body stays put while only the arm travels across several frames. Separating outline, colour area and shading pays off the moment you want the armour in blue instead of brown without repainting all eight frames.

Play it back — and look honestly

Loop the animation and watch for two things. Does the character jitter when it should be standing still? Then it is not sitting in the same place across frames — the anchor, usually the ground line under the feet, has to hold. Does the movement jump somewhere? Then an in-between is missing there, or two neighbouring frames are too alike and the jump is really somewhere else.

Exporting the GIF

File › Export as GIF. KistePix carries each frame's duration straight from the timeline into the GIF — what you see in the editor is what lands in the file.

Two settings decide the result:

• Scale factor. A 32 × 32 character is a speck on a web page. Export it at factor 4 or 8 and it becomes 128 or 256 pixels. The important part: KistePix scales up in blocks, so every pixel becomes a clean square. Enlarge the finished GIF in an image editor instead and it will smooth the edges — and your pixels turn to mush.
• Transparent background. Tick it for a character meant to sit on any page. For artwork that already has a painted background, it makes no difference.

GIF or sprite sheet?

Both export the same animation, for different purposes. A GIF is for looking at: a web page, a post, a preview. A sprite sheet is for processing: it goes into a game engine, which builds the animation itself — and can then pause it, play it backwards, or carry it along with a moving character. How that works: how to make a sprite sheet.