How to Make a Sprite Sheet

Open the maker and upload the prepared images together. The tool reads dimensions locally and lists every frame. Drag to reorder, use keyboard-accessible move controls, duplicate a held pose, delete a mistake, or reverse the complete sequence. Before learning how to make a sprite sheet layout, play the animation preview and confirm that the raw order already tells the intended motion.

Choose Auto Grid for a compact general layout. It uses the square root of the frame count to select columns, then adds enough rows. Choose 4×4 / 16 Frames for the fixed product contract, Horizontal Strip for a simple linear texture, or Custom when the destination specifies a column count. The grid affects storage and import, not the artistic timing.

The cell size should fit the largest frame. Auto uses the maximum width and height across loaded images. Smaller images are bottom-centered so feet stay closer to one baseline. If the destination requires a fixed 64 by 64 or 128 by 128 cell, prepare those canvases before upload or use a fixed-size workflow without scaling the subject independently.

Count the destination cells. A 4×4 layout has sixteen slots. If only fourteen images are loaded, keep two cells empty rather than copying poses silently. If more than sixteen are loaded, switch to Auto Grid or select the intended sixteen. Explicit empty and overflow behavior prevents hidden changes to animation timing.

Padding is the outer margin around the complete texture. Spacing is the gutter between cells. Begin with zero for both. Add spacing when the engine uses linear filtering, mipmaps, or importer rules that need separation. Add padding only when an atlas or platform requires it. Every added pixel increases output dimensions, so calculate rather than adding a decorative border.

Choose Transparent for a normal character PNG. White or Black can help inspect edges and serve destinations without alpha. Custom backgrounds are useful for presentation, but flattening removes flexibility. The checkerboard in the preview indicates transparency and does not become part of the file when Transparent is selected.

Open Animation Preview before export. Play at a likely runtime FPS, pause on key poses, step through first and last frames, and test looping. Watch feet and the center of mass for drift. Check whether a large effect is clipped. If motion jumps, fix frame order or source alignment rather than trying to hide the problem with a faster speed.

Return to the Sheet view and read the output dimensions, frame count, columns, and rows. Download PNG only after those values match the importer. Canvas drawing uses disabled smoothing so frames are not blurred during placement. Keep the original individual images as editable masters and treat the exported sheet as a delivery artifact.

A sixteen-frame 4×4 example is a useful rehearsal. With 256-pixel cells, the sheet is 1024 by 1024 at zero spacing and padding. Two pixels between cells add six pixels across each dimension. Eight pixels of outer padding add sixteen more, producing 1046 by 1046. The size guide explains why this result is not a power of two and when that matters.

The most common mistake is inconsistent source alignment. The second is confusing internal transparent room with grid spacing. Internal room belongs to every cell and protects the action. Spacing sits between cells and is discarded when cutting. A third mistake is choosing rows and columns from appearance without checking the frame count and importer.

Another mistake is exporting before playback. A still grid can look tidy even when frames 7 and 8 are swapped. The animator makes temporal errors visible. A final mistake is enlarging pixel art with smoothing or reducing detailed art until thin features disappear. Keep native frames, use integer scaling when appropriate, and test in the target engine.

Once you understand how to make a sprite sheet from image frames, the conversion tools become easier to reason about. GIF and video pages create the same frame model before packing. The cutter performs the reverse geometry. The animator reads the same cells. Shared concepts—order, cell size, baseline, padding, spacing, and timing—connect the entire workflow.