Columns
Fewer columns make long vertical sheets, while more columns create a wider atlas. Choose the shape that is easiest for your engine or export target to manage.
Guide
100% FreeHow to make pixel art spritesheets
A good spritesheet starts with clean frame planning. This guide covers how to prepare frames, choose cell sizes, and export sheet metadata in a format that is easy to hand off to a game project using free pixel tools online.
Overview
What a spritesheet needs to do well
A usable pixel art spritesheet should keep frame alignment consistent, preserve readable silhouettes at the target tile size, and export in a layout that is easy for your engine or toolchain to consume. The objective is not only to pack images together, but to keep animation data predictable. If you are looking for pixel tools free to use in a browser, this workflow keeps the process simple without adding paid software to your pipeline.
Free Tools
All pixel tools on Pixel Tools are free
Pixel Tools is built for creators who want fast browser-based pixel workflows without extra cost. All tools are free to use, so you can build spritesheets, test layout settings, and export files without paying for a separate editor. That also makes this guide a good match for searches such as pixel tools free, free pixel tools, or free spritesheet maker.
Workflow
From spritesheets to create 2D pixel map assets
Spritesheets and map building usually belong to the same pipeline. If you want to create map 2D pixel scenes, you often need character sheets, tiles, decorative objects, and export-ready assets that stay aligned to a consistent grid. After preparing your spritesheet, you can move into a 2D pixel map editor to place tiles, test layouts, and build a playable scene faster.
Step 1
Prepare the source frames
- Keep every animation frame on a transparent background when possible.
- Use the same visual baseline so characters do not jump up and down between frames.
- Name files clearly, especially if you want export metadata that matches animation order.
- Check that details still read well after reduction to your intended pixel size.
Step 2
Choose the grid layout
Cell size
Fixed cell sizes are useful when every frame should share the same footprint. This makes collision, alignment, and anchor points more predictable later.
Padding
Add padding if your engine or pipeline risks sampling neighboring pixels. Even a small gap can prevent texture bleeding.
Step 3
Export the metadata
PNG output is only half the job. JSON metadata makes the sheet useful in practice because it preserves frame positions, sizes, row and column layout, and naming. If your project uses Phaser or similar frameworks, exporting structured JSON now saves time later. With free pixel tools, it is easier to iterate on frame order and export settings before you move assets into your final game build.
FAQ
Common spritesheet questions
Should every frame have the same canvas size?
In most pixel workflows, yes. Uniform frame dimensions simplify alignment, anchor points, and export logic.
What if some frames are wider than others?
You can still use fixed cells by centering smaller frames and choosing a cell size that accommodates the largest one.
Do I need JSON if I already have the PNG?
Not always, but JSON becomes very useful once you want automation, consistent imports, or engine-ready animation data.
Related Guides