---
title: "Getting Started: Your First Sprite Sheet"
description: "A screen-by-screen walkthrough of the editor: import and slice an image, arrange the grid, preview the animation, fix pixels, recolor, and export."
canonical_url: "https://spritesheetgenerator.online/guides/getting-started"
last_updated: 2026-11-01
meta:
  author: "Dennis Postma"
  "og:description": "A screen-by-screen walkthrough of the editor: import and slice an image, arrange the grid, preview the animation, fix pixels, recolor, and export."
  "og:image": "https://spritesheetgenerator.online/guides/og-getting-started.png"
  "og:image:alt": "Getting Started: Your First Sprite Sheet"
  "og:title": "Getting Started: Your First Sprite Sheet"
  "twitter:image": "https://spritesheetgenerator.online/guides/og-getting-started.png"
  "twitter:image:alt": "Getting Started: Your First Sprite Sheet"
---

> Index of every page on this site: [llms.txt](https://spritesheetgenerator.online/llms.txt)

## What You Need

Any of these works as a starting point: a batch of PNG frames, one existing sprite sheet, or an animated GIF. You do not need an account, and your frames stay in the browser while you work.

Several PNGs dropped at once become one frame each. A single image opens the importer, which offers to slice it. After that the steps are the same either way.

## Step 1: Import and Slice

Drag an image onto the editor or click **Add image**. A single image always opens the importer, because the editor cannot tell whether it is one sprite or twenty four sprites packed together.

![Import dialog slicing a 192x128 sheet into 24 sprites on a 32x32 grid](https://spritesheetgenerator.online/guides/import-splitter.webp)

*The importer shows every frame it found before anything lands in the editor.*

There are three ways to cut it, plus a fourth for GIFs:

1. **Even grid** fits almost every sprite sheet. Enter the cell size (say `32` x `32`), or the number of columns and rows, and the preview updates as you type. The line under the inputs does the math for you: `192x128px -> 6x4 cells`. If that is not the count you expected, the cell size is wrong.
2. **Detect sprites** looks for separate shapes against the background and boxes each one. Use it for sheets with no consistent spacing. If two sprites come out as one box, move the **Sensitivity** slider toward "More sprites"; if one sprite gets split, move it toward "Fewer sprites". **Merge nearby sprites** and **Connect diagonal pixels** help with detached bits like a floating sword.
3. **Atlas** reads the data file that came with the sheet and uses its rectangles as they are: TexturePacker or Phaser JSON, Sparrow XML, or a Cocos2d `.plist`. Rotated frames are turned back upright. Pick this whenever you have the data file.
4. **GIF frames** only shows up for GIFs and pulls out each frame of the animation.

**Skip empty cells** drops fully transparent cells, so a 6x4 grid with two blanks imports as 22 frames. **Keep cell padding** keeps each sprite at its position inside the cell, which matters if your frames are deliberately off-center.

**Tip**

If the image is not a sheet at all, click **Use as single sprite** at the bottom left.

## Step 2: Arrange the Grid

Confirm the import and the frames appear on a grid.

![Sprite sheet editor showing 24 imported frames on a six column grid at 300% zoom](https://spritesheetgenerator.online/guides/editor-grid.webp)

*Twenty-four 32x32 frames on a six column grid. The chips in the top bar show sprite count and cell size.*

The controls you will use most:

| Control | What it does | When you need it |
| --- | --- | --- |
| **Columns** | Frames per row | Matching what your engine expects, or keeping the sheet roughly square |
| **Force Size** | Locks every cell to fixed dimensions | Frames of different sizes that your engine wants on a uniform grid |
| **Padding** | Transparent gutter around every cell | Thin seams or bleeding at sprite edges. See [packing and padding](https://spritesheetgenerator.online/guides/sprite-sheet-packing-padding) |
| **Trim Transparent** | Crops empty borders off each frame | Shrinking a sheet before packing |
| **Alignment** | Snaps sprites to an edge inside their cells | Keeping a character's feet on the same baseline |

Drag a frame to move it. **Multi** lets you select several at once, **Swap** exchanges two cells, and **Frames** in View Options numbers every cell so you can see the order.

The **Grid / Packed** toggle in the top bar switches between a uniform grid and a MaxRects-packed atlas with the empty space squeezed out. A grid is easier to read and for engines to slice. Packed is smaller.

## Step 3: Check the Animation

Open the **Preview** tab to see the frames move.

![Animation preview playing a slime bounce at 12 FPS with zoom and onion skin controls](https://spritesheetgenerator.online/guides/animation-preview.webp)

*Preview plays the sheet in order. Scrub, change FPS, and zoom without touching the frames.*

Set **Speed (FPS)** to the rate your engine will use. Twelve is a reasonable default; the [basics guide](https://spritesheetgenerator.online/guides/sprite-sheet-basics) has a table of how 8, 12, and 24 look. **Onion skinning** ghosts the frames on either side of the current one, which shows a limb that jumps a pixel between poses.

**Watch out**

The preview plays visible frames in grid order. If a walk cycle looks scrambled, the frames are out of order on the canvas. Go back to the Editor tab, turn on frame numbers, and drag them into sequence.

## Step 4: Fix Pixels in Place

For a stray pixel you do not need another program. Open the **Draw** tab and pick the frame.

![Built-in pixel editor with a 32x32 slime frame zoomed to 16x on a pixel grid](https://spritesheetgenerator.online/guides/pixel-editor.webp)

*A zoomable pixel grid with drawing tools. Saving writes the frame straight back into the sheet.*

The tools are pencil, eraser, fill, eyedropper, line, rectangle, ellipse, and select, with undo and redo. Onion skin works here too, so you can line a fix up against the neighboring frames. **Save frame** puts the edit back into the sheet.

## Step 5: Recolor

The **Recolor** tab changes colors across every frame at once.

![Recolor tab applying a 180 degree hue shift across all 24 frames of a sprite sheet](https://spritesheetgenerator.online/guides/recolor.webp)

*One hue shift gives a second palette variant. The original pixels stay untouched until you bake.*

The live filter covers hue, saturation, brightness, contrast, sepia, and invert, with a few presets. It only changes the preview until you bake it into the frames. There is also a per-color map for swapping specific colors. The [palette guide](https://spritesheetgenerator.online/guides/color-palettes-palette-swaps) covers both and how to use them for enemy variants.

## Step 6: Export

The export buttons sit at the top of the sidebar. **PNG** and **WebP** save the sheet image, **JSON** the frame data, and **ZIP** every frame as its own file. **GIF** renders the animation at an fps you choose, which is handy for a devlog or an itch.io page.

![Export For dialog listing Phaser, Aseprite, Godot, Tiled, CSS sprites and Sparrow XML, with an animation name field](https://spritesheetgenerator.online/guides/export-formats.webp)

*Format exports write metadata your engine already reads. The animation name field sets frame names in the XML export.*

For an engine, use **Format**:

- **Phaser / PixiJS**: JSON atlas, TexturePacker-compatible
- **Aseprite**: Aseprite-compatible JSON atlas
- **Godot**: a `SpriteFrames` resource ( `.tres`) for an `AnimatedSprite2D`
- **Tiled**: JSON tileset ( `.tsj`)
- **CSS Sprites**: ready-made classes for the web
- **Sparrow / Starling XML**: the `TextureAtlas` format Friday Night Funkin also reads. Set the animation name in the dialog and frames export as `idle0000`, `idle0001`, and so on

Unity does not need a data file: export the PNG and slice it in the Sprite Editor. The [engine import guide](https://spritesheetgenerator.online/guides/import-sprite-sheets-game-engines) has step-by-step settings for Godot, Unity, Phaser, and Construct, including the filter setting that keeps pixel art from going blurry.

## Where to Go Next

- [Sprite sheet basics](https://spritesheetgenerator.online/guides/sprite-sheet-basics) if terms like atlas and cell size are new
- [Packing and padding](https://spritesheetgenerator.online/guides/sprite-sheet-packing-padding) if thin seams show up around sprites in game
- [Pixel-perfect scaling](https://spritesheetgenerator.online/guides/pixel-perfect-scaling) if the art is sharp here and blurry in your game

**No account, nothing to install.** [Open the editor](https://spritesheetgenerator.online/editor)

## **Try it in the editor**

The editor is free and needs no account. Open it in another tab and work through the steps above with your own frames.

[Open the editor](https://spritesheetgenerator.online/editor) [See all features](https://spritesheetgenerator.online/features)

## **Keep reading**

[**Start here****Sprite Sheet Basics Explained** 8 min read](https://spritesheetgenerator.online/guides/sprite-sheet-basics "Sprite Sheet Basics Explained") [**Sprite sheets****Sprite Sheet Padding: Stop Texture Bleeding** 7 min read](https://spritesheetgenerator.online/guides/sprite-sheet-packing-padding "Sprite Sheet Padding: Stop Texture Bleeding") [**Engines****Import Sprite Sheets into Godot, Unity, Phaser and Construct** 7 min read](https://spritesheetgenerator.online/guides/import-sprite-sheets-game-engines "Import Sprite Sheets into Godot, Unity, Phaser and Construct")

---

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://spritesheetgenerator.online/#website","@type":"WebSite","description":"Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.","name":"Spritesheet Generator","url":"https://spritesheetgenerator.online/","publisher":{"@id":"https://spritesheetgenerator.online/#identity"}},{"@id":"https://spritesheetgenerator.online/guides/getting-started#webpage","@type":"WebPage","dateModified":"2026-11-01","datePublished":"2026-08-06","description":"A screen-by-screen walkthrough of the editor: import and slice an image, arrange the grid, preview the animation, fix pixels, recolor, and export.","name":"Getting Started: Your First Sprite Sheet","url":"https://spritesheetgenerator.online/guides/getting-started","breadcrumb":{"@id":"https://spritesheetgenerator.online/guides/getting-started#breadcrumb"},"isPartOf":{"@id":"https://spritesheetgenerator.online/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://spritesheetgenerator.online/guides/getting-started"]}],"primaryImageOfPage":{"@id":"https://spritesheetgenerator.online/#logo"}},{"@id":"https://spritesheetgenerator.online/#identity","@type":"Organization","description":"A free, browser based sprite sheet generator for 2D game developers and pixel artists.","name":"Spritesheet Generator","url":"https://spritesheetgenerator.online","logo":{"@id":"https://spritesheetgenerator.online/#logo"},"sameAs":["https://discord.gg/2vvfqwn5k7"]},{"@id":"https://spritesheetgenerator.online/guides/getting-started#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://spritesheetgenerator.online","position":1},{"@type":"ListItem","name":"Guides","item":"https://spritesheetgenerator.online/guides","position":2},{"@type":"ListItem","name":"Getting Started: Your First Sprite Sheet","item":"https://spritesheetgenerator.online/guides/getting-started","position":3}]},{"@id":"https://spritesheetgenerator.online/about#dennis-postma","@type":"Person","name":"Dennis Postma","url":"https://spritesheetgenerator.online/about","sameAs":["https://github.com/Dennis4720"]},{"@id":"https://spritesheetgenerator.online/guides/getting-started#article","dateModified":"2026-11-01","datePublished":"2026-08-06","description":"A screen-by-screen walkthrough of the editor: import and slice an image, arrange the grid, preview the animation, fix pixels, recolor, and export.","headline":"Getting Started: Your First Sprite Sheet","inLanguage":"en","thumbnailUrl":"https://spritesheetgenerator.online/guides/og-getting-started.png","@type":["Article","TechArticle"],"articleSection":["Start here"],"author":{"@id":"https://spritesheetgenerator.online/about#dennis-postma"},"image":{"@id":"https://spritesheetgenerator.online/#/schema/image/1"},"isPartOf":{"@id":"https://spritesheetgenerator.online/guides/getting-started#webpage"},"mainEntityOfPage":{"@id":"https://spritesheetgenerator.online/guides/getting-started#webpage"},"publisher":{"@id":"https://spritesheetgenerator.online/#identity"}},{"@id":"https://spritesheetgenerator.online/#logo","@type":"ImageObject","caption":"Spritesheet Generator","contentUrl":"https://spritesheetgenerator.online/web-app-manifest-512x512.png","inLanguage":"en","url":"https://spritesheetgenerator.online/web-app-manifest-512x512.png"},{"@id":"https://spritesheetgenerator.online/#/schema/image/1","@type":"ImageObject","contentUrl":"https://spritesheetgenerator.online/guides/og-getting-started.png","inLanguage":"en","url":"https://spritesheetgenerator.online/guides/og-getting-started.png"}]}
```

## Sitemap

See the full [sitemap](https://spritesheetgenerator.online/sitemap.md) for all pages.