How to Make an Animated GIF From a Sprite Sheet

Guide · about 6 minutes to read

A sprite sheet is one image that holds many animation frames in a grid. Game developers and pixel artists use them a lot, and so do people who export animations from design tools. This guide shows how to turn a sprite sheet into an animated GIF you can use on a website, in a chat or in a post.

What you need

• The sprite sheet as a PNG or JPG file.
• The number of columns and rows in the grid. Count the frames across the top and down the side.
• The frame rate you want. Around 10 frames per second suits most simple animations.

Step 1: Set the grid

Open the sprite sheet to GIF tool and drop in your sheet. Enter the columns and rows. The tool divides the image into equal cells and reads each cell as one frame, starting at the top left and moving across each row.

If the frames don't fill the sheet evenly, the grid will be a little off. Check the preview. If the frames look shifted, count the cells again.

Step 2: Remove the gaps

Many sheets have a thin border or spacing between frames. If you can see edges from the neighbouring frame, set a crop value for each cell. This trims that many pixels from every side of each frame, so only the animation remains.

Step 3: Choose the speed

Frames per second controls how fast the animation plays. A walking character often looks right at 8 to 12 frames per second. Fast effects such as sparks may need 15 or more. Preview the animation and adjust until it looks natural.

Step 4: Download and check the file size

Download the GIF and open it in your browser. Animations with many colours and large frames make big files. If the file is too large, use the GIF compressor to lower the colour quality or the size.

Common problems

• The animation jumps: the grid is set to the wrong number of columns or rows.
• Edges flicker: the cells include a border. Increase the crop value.
• Colours look wrong: GIF supports only 256 colours per frame. Simple, flat artwork usually looks best.