Step 1
Choose maker or slicer
Maker mode starts from separate PNG, WebP, JPEG, or other browser-readable image files. Slicer mode starts from one existing sheet with a regular row-and-column grid.
Client-side sprite sheet maker and slicer
The upload controls, canvas preview, grid settings, PNG or GIF encoder, metadata, and download actions hydrate in the browser. Large files stay on this device: nothing leaves your browser.
Make a sheet · slice a sheet · private in-browser workflow
Sprite Sheet Maker and Slicer
Build a sprite sheet from multiple images, or switch to the slicer to cut an existing grid into individual PNG frames and download them together as a ZIP. All pixel work stays on your device.
- Maker mode centers mixed-size images inside a consistent frame grid
- Slicer mode validates exact rows and columns before cutting frames
- JSZip packages numbered PNG files plus machine-readable metadata
How to use the sprite sheet maker and slicer
Step 2
Describe the grid
For making, choose columns, padding, and gaps; the largest source dimensions define the cell. For slicing, enter the exact columns and rows so the sheet divides into equal frame rectangles.
Step 3
Export the result
Maker mode downloads one PNG and exposes its layout metadata. Slicer mode encodes every cut frame as PNG, adds metadata.json, and creates a single client-side JSZip download.
Sprite sheet layout and slicing details
A reliable sprite sheet is a geometry contract. The renderer and the importer must agree on cell size, row order, padding, and gaps.
Cell size and source order
Maker mode uses the widest uploaded image as frame width and the tallest as frame height. Smaller images are centered without smoothing or rescaling, so their original pixels remain unchanged.
Files are placed in upload order from left to right, then top to bottom. Rename or select files in the intended animation order before exporting when filename sorting matters.
Equal-grid slicing
Slicer mode divides sheet width by columns and sheet height by rows. Both divisions must be exact integers; otherwise a one-pixel remainder would shift later frames or silently drop edge pixels.
The cutter does not trim transparent borders because trimming changes every frame's origin. Fixed-size frames are usually safer for animation alignment and collision data.
PNG and ZIP output
Each frame is encoded as an RGBA PNG. JSZip then stores numbered files such as frame-001.png and a metadata.json file describing columns, rows, dimensions, and frame count.
ZIP compression reduces repeated PNG and JSON bytes, but PNG data is already compressed, so archive savings vary. The archive is assembled in memory and never sent to a server.
Measured maker and slicer fixture
Four real 4×4 RGBA fixture images arranged in 2 columns produce an 8×8 sheet with no gap or padding. When the same fixture uses 1-pixel padding and gaps, the result is 11×11 and the PNG is 132 bytes.
Slicing the 8×8 fixture back into a 2×2 grid returns four 4×4 PNG frames. JSZip packages those frames plus metadata.json into an 893-byte archive; frame-001.png is 80 bytes in that tested archive.
Common mistakes
- Uploading frames in an accidental filename order and discovering the animation is shuffled later.
- Mixing different source sizes without realizing the largest image defines every cell.
- Entering a slicer grid that does not divide the sheet dimensions evenly.
- Trimming transparent borders per frame and causing the animated subject to wobble around its origin.
Sprite sheet maker and slicer FAQ
How do I make a sprite sheet from multiple images?
Open Maker mode, upload the images in frame order, choose a column count, and download the PNG. The largest image defines the common cell size and smaller frames are centered.
Can this sprite sheet maker also cut a sheet apart?
Yes. Switch to Slicer mode, upload the existing sheet, and enter its columns and rows. The tool cuts equal frames and packages numbered PNGs in a ZIP.
Are my images uploaded?
No. Image decoding, canvas drawing, PNG encoding, slicing, and JSZip generation all run locally. Nothing leaves your browser.
What file order does maker mode use?
It uses the order provided by the file picker or drop operation, then fills the grid left to right and top to bottom. Check the on-page frame list before export.
Why must the slicer grid divide evenly?
Equal integer cells prevent partial pixels and cumulative offsets. If the dimensions do not divide evenly, verify whether the original sheet includes an outer margin or gaps between frames.
Does the slicer remove transparent padding?
No. Every frame keeps the same dimensions and origin. That consistency prevents visible jitter when frames are played as an animation.
What is included in the ZIP download?
The archive contains frame-001.png through the last frame plus metadata.json with the grid and frame dimensions. JSZip creates the archive entirely in browser memory.