PixelForge

Overview

PixelForge turns pictures and animations into pixel art. You can give it a drawing, a photo, a 3D render, an animated GIF or a whole sprite sheet. It shrinks the picture to a real pixel-art size, picks a palette, and cleans up the result: stray pixels, ragged edges and outlines.

It is built for game sprites. Animations share one palette across every frame, and pixels that barely change from one frame to the next keep their colour, so the result doesn't flicker. You can touch up any pixel by hand, then export a PNG, a GIF or a sprite sheet. You can also send the result to Sprite Puppeteer to rig it or play-test it.

Everything runs in your browser. Your pictures are never uploaded, and you don't need an account.

Getting started

1. Open PixelForge. Drop a picture anywhere on the page, or click Open… (Ctrl+O). You can also paste a picture with Ctrl+V. If you only want to look around, click Try the sample (a still character) or Sample animation (66 painted frames of a knight).
2. On the Look tab, pick a look such as Clean or Outlined, then set the Width in pixels. 32 to 64 px suits most game characters. The result updates as you change things.
3. Use Split above the stage and drag the divider to compare the result with the original.
4. If the picture has a plain background, open the Picture tab and set Background to Remove.
5. Adjust the palette on the Colours tab and the outline on the Finish tab.
6. Fix any pixel you don't like with the pencil (B).
7. Export from the File tab: PNG, GIF, Sprite sheet or Everything (ZIP).

Your settings are remembered in this browser, so the next picture starts with the look you used last.

Opening pictures, GIFs and sprite sheets

On the File tab you can switch between Animation and Separate pictures. You can also cut a sheet into an even grid with Slice sheet…, add more frames with Add… (or Shift-drop), and drop the frame you're looking at with Remove this frame.

If the picture is already pixel art shown bigger (for example a 4× screenshot), the Look tab offers Use its pixel grid. That gets back the real pixels exactly.

Size and shrinking (Look tab)

• Looks are starting points that set several options at once: Clean, Outlined, Shaded edge, Painterly, Retro 8, PICO-8, Game Boy, Endesga 32, 1-bit and Icon 32. They leave the size and your brightness settings alone.
• Width is the size of the result in pixels. With keep shape on, the height follows the picture. Turn it off to set both, then choose Fit: Fit inside pads with transparency, Fill crops, and Stretch distorts the picture to fit.
• Trim empty space round the sprite cuts away transparent margins first, so the sprite fills the width. In an animation all frames are trimmed to one shared rectangle, so the character doesn't jump.
• Padding adds a transparent border (handy before an outside outline).
• Shrink by:
  • Main colour (crisp) gives each output pixel the biggest group of similar colours under it, which keeps edges sharp and colours clean.
  • Average (soft) blends everything under the pixel.
  • Nearest pixel is for pictures that are already pixel art.
• Keep lines (with Main colour) gives thin dark lines such as outlines, eyes and seams more weight, so they survive the shrink.

Preparing the picture (Picture tab)

• Background:
  • Remove clears the plain background around the subject. It works in from the edges and stops at outlines, so the same colour inside the subject is kept.
  • Colour clears one colour everywhere. Click Pick on picture to choose it from the original.
  • Tolerance sets how loosely it matches. Raise it for gradient or noisy backgrounds, and lower it if parts of your subject disappear.
• Simplify flattens photo noise and texture into clean patches before shrinking. Use it for photos, renders and AI images.
• Brightness, Contrast, Saturation and Hue adjust colours. The adjustments are made in a perceptual colour space, so hues don't drift.
• Edge alpha decides which half-transparent edge pixels become solid. Pixel art has no half-transparent pixels.

Palettes and dithering (Colours tab)

Click a swatch to paint with it. Use the buttons under the swatches to:

• Keep a colour, so it stays in the palette whatever else changes.
• Change…, Remove or Add… a colour. These switch the palette to Custom.

Import… reads .hex, .gpl, .txt or a picture of swatches. Export saves the palette as .hex, .gpl and a PNG strip.

The Dither patterns are:

• Checker: only 50% mixes.
• Ordered 2×2, 4×4 and 8×8: tied to each pixel's position, so they stay still in animations.
• Floyd–Steinberg and Atkinson: smooth on stills, but they shimmer when animated.

Only in smooth areas dithers gradients and skies but keeps edges clean.

Clean-up and outlines (Finish tab)

• Remove stray pixels fixes lone pixels that no neighbour shares. It looks for them before dithering, so dither dots are left alone.
• Smooth the silhouette shaves one-pixel nubs and fills one-pixel notches on the outline. Thin lines, such as a one-pixel sword, are kept.
• Outline:
  • Outside adds a ring round the sprite.
  • Inside edge recolours the sprite's own edge.
  • Shaded edge (selout) darkens the edge from each area's own colour, lighter where it faces the light at the top left.
  • Include corners makes a heavier, rounder line. The outline uses the darkest palette colour unless you pick one.
• Animation: Speed in fps, and Steadiness, which keeps a pixel's colour when it barely changed since the last frame. The list of moves (frame tags) plays one move at a time.

Touching up pixels

The tools above the stage are:

• Move (V)
• Pencil (B)
• Eraser (E)
• Fill (G)
• Pick (I)
• Restore (R), which puts pixels back to the automatic result

Right-click with any tool to pick a colour, and hold Space to pan.

Touch-ups sit on top of the automatic result, so you can keep changing settings and they stay. They are tied to the size and placement. If you change the width, they are set aside, and they come back if you go back to that size. Every stroke can be undone with Ctrl+Z.

Exporting

Use 1× for game engines, and scale the sprite up in the engine with nearest-neighbour (point) filtering. Use bigger scales for previews and social posts.

Working with the other Studio tools

• From the Keyframe.it 2D editor: choose Menu → Send to PixelForge…. Your clips are rendered as sprite sheets and open here with their moves.
• From MeshForge: in the sprite-sheet dialog, set Then open in to PixelForge. Every rendered view and direction arrives as one animation.
• To Sprite Puppeteer: on the File tab, click Open in Sprite Puppeteer. An animation goes over as a sprite-sheet character you can play-test in the arena. A single picture goes over as a sprite to rig (the button then reads Rig it in Sprite Puppeteer).

Hand-overs stay in your browser: one tab passes the files to the other through the browser's own storage.

Using PixelForge with an AI agent

Agents that can run JavaScript in a browser can drive PixelForge through window.pixelforge. That includes Claude in Chrome, Claude Cowork and ChatGPT agent. Click 🤖 Use with AI for a prompt to paste into your agent.

• await pixelforge.ready(), then pixelforge.help() to list every call and setting.
• Load something with loadImage(url), loadFrames([urls]) or loadSheet(url, {cols, rows}).
• Change things with applyLook('outlined'), setSettings({size: {width: 48}}) or setPalette('pico8').
• renderPreview({compare: true}) returns a PNG the agent can look at. renderContactSheet() shows a whole animation.
• Touch up pixels with paint([{x, y, color}]).
• Finish with exportFile('zip') or sendToPuppeteer().

Keyboard shortcuts

Tips and troubleshooting

• Too blurry or muddy? Use Main colour, raise Keep lines, and use fewer colours.
• Photo looks noisy? Raise Simplify to 1 or 2, or try the Painterly look.
• The background removal eats into the subject? Lower Tolerance, or use Colour mode and pick the exact background colour.
• Animation flickers? Use an ordered dither or none, and raise Steadiness.
• Sprite is tiny in its frame? Tick Trim empty space round the sprite.
• Very long GIFs: PixelForge keeps everything in memory, so it stops loading frames once a GIF gets too big for a browser tab, and tells you how many it kept.

Frequently asked

More answers about the whole Studio in the FAQ.