TOOLS › SPRITE SHEET MAKER
FREE · NO SIGN-UP · RUNS IN YOUR BROWSER

Sprite Sheet Maker

Combine separate frames into one sprite sheet. Drop a pile of PNGs, pick strip or grid, set the padding and alignment, download the sheet with a JSON atlas. Nothing is uploaded.

1 · YOUR FRAMES

DROP, PASTE OR BROWSE
Several PNG or WebP frames at once · drop more later to append

2 · LAYOUT

Cell size
Equal cells: every cell is as big as the largest frame, so engines can slice by one fixed size. Tight keeps each frame's own width in a strip.
Alignment in cell
Bottom is bottom-centre: centred across the cell, sitting on its floor, so feet stay put. Centre for effects, top-left to match an existing sheet.
Transparent gutters between cells. Handy when your engine bleeds neighbouring pixels at texture edges.
Crops each frame to its opaque pixels before packing. Good for frames with lots of empty margin; leave off if the frames were already aligned by hand.
Pairs with the sprite sheet cutter (sheet back into frames) and sprite sheet to GIF (play it back).
Sheet appears here
NOTHING HERE YETDrop your frames on the left. The sheet builds as soon as they land, and every control change rebuilds it.

How it works

Drop in your frames

Select several PNGs at once, or drop them in batches. They stack up in the list in the order they arrive. Use the arrows to reorder and the cross to drop one.

Pick a layout

A horizontal strip is the classic animation sheet. Vertical suits tall frames. Grid wraps after a set number of columns, which keeps big frame counts from turning into a very long image.

Download sheet, JSON or both

The PNG is the sheet. The JSON is an atlas with a rectangle for every frame. The ZIP has both, ready to drop into a project folder.

Getting frames to line up

Most broken sprite sheets are not broken images, they are frames of different sizes packed without a shared floor. When a wider frame comes along, the sprite jumps. Equal cells plus bottom-centre alignment fixes that: every frame gets the same cell, and the bottom row of pixels sits on the same line in each one.

Trim first only when the frames have loose margins you do not care about. If you positioned the sprite inside each frame on purpose, trimming throws that away. Padding adds transparent gutters between cells; it changes the frame stride, so if your engine asks for a frame size, tell it the cell size plus the padding. The controls in short: layout sets the shape, cell size sets whether frames share one size, alignment sets where a smaller frame sits inside its cell, padding adds space between cells.

FAQ

Is the sprite sheet maker free?

Yes. It runs entirely in your browser, so there is no upload, no account and no limit on how many sheets you build. Your frames never leave your machine.

How do I control the frame order?

Frames land in the order your file picker hands them over, which is normally alphabetical. Name them with zero-padded numbers (walk_01, walk_02) and they arrive in sequence. The list under the dropzone has up, down and remove buttons for anything that needs fixing by hand.

What is the difference between equal cells and tight?

Equal cells makes every cell the size of the largest frame, so an engine can slice the sheet with one fixed frame width and height. That is what you want for animations. Tight lets each frame keep its own width in a strip, which saves space for UI icons or mixed-size props, but then you need the JSON atlas to find each frame.

Which alignment should I pick?

Bottom-centre for characters: every frame sits on the same floor line, so feet do not hop when a wider frame comes along. Centre for effects and objects that grow from the middle. Top-left if you are matching a sheet that was already laid out that way.

What is the JSON file for?

It is an atlas in the same shape as Aseprite's JSON export: a rectangle for every frame plus the sheet size. Phaser, PixiJS and most engine importers read that format, so you can load the sheet without typing frame sizes in by hand.

More free tools

In the app

Open SpriteLab to keep building with your sprites.