Gif sprite sheet creator

World's simplest gif tool

This online utility lets you create a sprite sheet from a GIF animation. All GIF frames can be printed on a horizontal or vertical sprite strip or they can be arranged in a rectangular sprite sheet grid with the specified number of rows and columns. You can also reverse the order of frames, remove unwanted frames, add padding, change the background color, and preview the GIF at a slower or faster speed. Created by GIF experts from team Browserling.
Check out our main project! Browserling
We created Browserling – get a cloud browser in 5 seconds. Check it out!
GIF Animation
Animate the input GIF.
Speed of GIF animation. (1000 = 1 second.)
Play the GIF in reverse order.
Sprite Sheet
Rows.
Columns.
Skip these GIF frames. (Examples: "1, 4", "5-9", "2, 4-6".)
Add padding around the sheet.
Background Replacement
Background of the input GIF. (Skip if you don't want to change background color.)
Fuzzy matching percentage of background color. (Allows matching color tones.)
New background color in the output sprite sheet.
Gif sprite sheet creator tool What is a gif sprite sheet creator?
This is a browser-based GIF to sprite sheet converter. It extracts all frames from the loaded GIF animation and lays them out in a single sprite sheet. There are three types of sprite sheets – vertical, horizontal, and rectangular. The vertical and horizontal sprite sheets are called sprite strips but the rectangular sprite sheet is called a sprite grid. By default, the frames are drawn in a horizontal animation strip as it's the most popular type but you can change the dimensions and the layout of the sprite sheet to any of the three possible types by adjusting the rows and columns options. For example, by specifying the number of rows equal to 2 and the number of columns equal to 5, you will get a sprite rectangle with a width of five frames and a height of two frames. You can also specify only one of the dimension parameters. For example, if you enter only the rows value equal to 2 and leave the columns value empty, the program will fit all frames in 2 equal horizontal lines. If only the columns number is specified, for example, 3, then the program will distribute all frames into three equal vertical columns. When you open a GIF, you can use the GIF animator options to enable or disable its playback, control the frame rate, and reverse the order of sprites in it. GIF's framerate is determined by how long a single frame is displayed before moving to the next frame. By default, it's 250 milliseconds for each frame, which equals 4 frames per second. The playback order of GIF frames can be either forward (from the first frame to the last) or backward (from the last frame to the first). When playing a GIF, frames are counted above the input box and you can easily delete frames that you don't need by entering their numbers in the skip frames option. You can also change the background color of sprites or add a new background if there is none. For example, if the background color of a GIF is red and you want to change it to blue, then you need to enter "red" in the GIF background color field and "blue" in the new sprite background field. If the given GIF is transparent and has no background, then simply enter "transparent" in the GIF background color. Also, with the color tone threshold option, you can control how many similar shades of the given color will be replaced. If you increase the percentage, more shades and tones will be matched and if you decrease the percentage, then only the given color or just a few tones will be replaced. And finally, you can also add extra padding around the sprite sheet. Gifabulous!
Gif sprite sheet creator examples Click to use
Nyan Cat
In this example, we load a GIF of the Nyan Cat and extract all frames from it. The GIF contains 8 sprites and we process them in order (from the first to the last). In the sprite sheet size options, we only specify the rows value and set it equal to 1. This way, we get a single horizontal sprite strip with all eight animation frames one after another. Also, to see the entire GIF, we animate it at the speed of 200 milliseconds per frame (which equals 1000/200 = 5 frames per second). GIF source: Giphy.
In this example, we load a GIF of the Nyan Cat and extract all frames from it. The GIF contains 8 sprites and we process them in order (from the first to the last). In the sprite sheet size options, we only specify the rows value and set it equal to 1. This way, we get a single horizontal sprite strip with all eight animation frames one after another. Also, to see the entire GIF, we animate it at the speed of 200 milliseconds per frame (which equals 1000/200 = 5 frames per second). GIF source: Giphy.
In this example, we load a GIF of the Nyan Cat and extract all frames from it. The GIF contains 8 sprites and we process them in order (from the first to the last). In the sprite sheet size options, we only specify the rows value and set it equal to 1. This way, we get a single horizontal sprite strip with all eight animation frames one after another. Also, to see the entire GIF, we animate it at the speed of 200 milliseconds per frame (which equals 1000/200 = 5 frames per second). GIF source: Giphy.
Required options
These options will be used automatically if you select this example.
Animate the input GIF.
Speed of GIF animation. (1000 = 1 second.)
Play the GIF in reverse order.
Rows.
Columns.
Skip these GIF frames. (Examples: "1, 4", "5-9", "2, 4-6".)
Add padding around the sheet.
Background of the input GIF. (Skip if you don't want to change background color.)
Fuzzy matching percentage of background color. (Allows matching color tones.)
New background color in the output sprite sheet.
Zootopia
In this example, we create a sprite grid from a GIF of smiling Flash Slothmore from our favorite cartoon, Zootopia. Sloths are known to be very slow and it takes Flash 48 GIF frames to express his emotions. We split the GIF into individual frames and to make them fit in a 6-by-7 grid (6 rows and 7 columns), we remove 6 frames from the animation. The removed frames are every 9th frame (frames 1, 9, 18, 27, 45). GIF source: Tenor.
In this example, we create a sprite grid from a GIF of smiling Flash Slothmore from our favorite cartoon, Zootopia. Sloths are known to be very slow and it takes Flash 48 GIF frames to express his emotions. We split the GIF into individual frames and to make them fit in a 6-by-7 grid (6 rows and 7 columns), we remove 6 frames from the animation. The removed frames are every 9th frame (frames 1, 9, 18, 27, 45). GIF source: Tenor.
In this example, we create a sprite grid from a GIF of smiling Flash Slothmore from our favorite cartoon, Zootopia. Sloths are known to be very slow and it takes Flash 48 GIF frames to express his emotions. We split the GIF into individual frames and to make them fit in a 6-by-7 grid (6 rows and 7 columns), we remove 6 frames from the animation. The removed frames are every 9th frame (frames 1, 9, 18, 27, 45). GIF source: Tenor.
Required options
These options will be used automatically if you select this example.
Animate the input GIF.
Speed of GIF animation. (1000 = 1 second.)
Play the GIF in reverse order.
Rows.
Columns.
Skip these GIF frames. (Examples: "1, 4", "5-9", "2, 4-6".)
Add padding around the sheet.
Background of the input GIF. (Skip if you don't want to change background color.)
Fuzzy matching percentage of background color. (Allows matching color tones.)
New background color in the output sprite sheet.
Sonic Gold Ring
In this example, we turn a GIF of a rotating gold ring from Sonic the Hedgehog game into a 4×4 square sprite sheet. We play the GIF in reverse and the animation frames go from the end to the beginning. As the GIF is reversed, so are the sprites in the output sprite sheet. We also add padding of 20 pixels around the rings and change the background color from green (hex code #00A843) to red (hex code #A01515) using a color tone fuzzy match threshold value of 15% (which means match all greenish tones within 15% of the green color). GIF source: Spriters Resource.
In this example, we turn a GIF of a rotating gold ring from Sonic the Hedgehog game into a 4×4 square sprite sheet. We play the GIF in reverse and the animation frames go from the end to the beginning. As the GIF is reversed, so are the sprites in the output sprite sheet. We also add padding of 20 pixels around the rings and change the background color from green (hex code #00A843) to red (hex code #A01515) using a color tone fuzzy match threshold value of 15% (which means match all greenish tones within 15% of the green color). GIF source: Spriters Resource.
In this example, we turn a GIF of a rotating gold ring from Sonic the Hedgehog game into a 4×4 square sprite sheet. We play the GIF in reverse and the animation frames go from the end to the beginning. As the GIF is reversed, so are the sprites in the output sprite sheet. We also add padding of 20 pixels around the rings and change the background color from green (hex code #00A843) to red (hex code #A01515) using a color tone fuzzy match threshold value of 15% (which means match all greenish tones within 15% of the green color). GIF source: Spriters Resource.
Required options
These options will be used automatically if you select this example.
Animate the input GIF.
Speed of GIF animation. (1000 = 1 second.)
Play the GIF in reverse order.
Rows.
Columns.
Skip these GIF frames. (Examples: "1, 4", "5-9", "2, 4-6".)
Add padding around the sheet.
Background of the input GIF. (Skip if you don't want to change background color.)
Fuzzy matching percentage of background color. (Allows matching color tones.)
New background color in the output sprite sheet.
All gif tools
Didn't find the tool you were looking for? Let us know what tool we are missing and we'll build it!
Quickly view, play and download individual GIF frames.
Quickly create a sprite sheet from all GIF frames.
Quickly create a GIF animation from a sprite strip.
Quickly change the speed a GIF animation is played at.
Quickly reverse all frames in an animated GIF.
Quickly flip a GIF animation horizontally or vertically.
Quickly rotate a GIF animation by the given angle.
Quickly make any color in a GIF transparent.
Quickly fill transparent GIF regions with a solid color.
Quickly delete one or more frames from an animated GIF.
Coming soon These gif tools are on the way
GIF Creator
Create animated GIFs in your browser.
Analyze a GIF
Print GIF statistics (number of frames, colors, framerate, etc).
Compress a GIF
Minify a GIF and make it smaller in size.
Export GIF Frames
Export all or some frames from an animated GIF.
Rearrange GIF Frames
Change the order of frames in a GIF animation.
Add Frames to a GIF
Insert one or more frames in a GIF animation.
Randomize a GIF
Randomly reposition GIF frames.
Zoom a GIF
Increase the size of a GIF.
Unzoom a GIF
Decrease the size of a GIF.
Change GIF Loop Count
Change how many times a GIF gets looped.
Change GIF Framerate
Change the framerate of a GIF.
Change GIF Quality
Change the quality of a GIF.
Change GIF Brightness
Increase or decrease brightness of a GIF.
Change GIF Contrast
Increase or decrease contrast of a GIF.
Convert GIF to Base64
Base64-encode a GIF.
Convert Base64 to GIF
Base64-decode a GIF.
Convert GIF to Base58
Base58-encode a GIF.
Convert Base58 to GIF
Base58-decode a GIF.
Convert GIF to APNG
Convert an animated GIF to an animated PNG.
Convert APNG to GIF
Convert an animated PNG to an animated GIF.
Convert GIF to Webp
Convert an animated GIF to an animated Webp.
Convert Webp to GIF
Convert an animated Webp to an animated GIF.
Convert GIF to PNG
Export a single frame from a GIF to PNG.
Convert PNG to GIF
Convert a still PNG image to a static GIF.
Convert GIF to JPG
Export a single frame from a GIF to JPEG.
Convert JPG to GIF
Convert a still JPEG photo to a static GIF.
Convert GIF to BMP
Export a single frame from a GIF to BMP.
Convert BMP to GIF
Convert a still BMP file to a static GIF.
Convert GIF to BPG
Export a GIF animation to a BPG animation.
Convert BPG to GIF
Convert an animated BPG to an animated GIF.
Convert GIF to Data URL
Create a Data URI from a GIF animation.
Convert GIF to ASCII Art
Draw one or more GIF frames as ASCII art.
Convert ASCII Art to GIF
Create an animation from multiple ASCII art drawings.
Convert GIF to ANSI Art
Draw one or more GIF frames as ANSI art.
Convert ANSI Art to GIF
Create an animation from multiple ANSI art drawings.
Convert GIF to Unicode Art
Convert a GIF animation to Unicode glyphs.
Convert Unicode Art to GIF
Create a GIF from multiple Unicode glyphs.
Convert Data URL to GIF
Reconstruct a GIF from a Data URI.
Convert GIF to Grayscale
Remove all color from a GIF and leave only gray tones.
Make GIF Black and White
Convert all colors in a GIF to just two black and white.
Extract GIF Colors
Find the color palette used in a GIF.
Extract GIF Color Indexes
Find the color indexes used in a GIF.
Reduce GIF Colors
Remove colors from a GIF.
Re-quantize GIF Colors
Run various color quantization algorithms on a GIF.
Add Dithering to a GIF
Convert a non-dithered GIF to a dithered GIF.
Remove Dithering From a GIF
Merge dithered pixels and create a non-dithered GIF.
Optimize a GIF
Optimize GIF frames to use less memory.
Create a True Color GIF
Create a GIF with more than 256 colors.
Split a GIF
Split a GIF into two or more GIFs.
Join GIFs
Join two or more GIFs into a single GIF.
Shift a GIF
Shift GIF frames to the right or to the left.
Pixelate a GIF
Pixelate an area in a GIF.
Blur a GIF
Blur an area in a GIF.
Sharpen a GIF
Sharpen an area in a GIF.
Slice a GIF
Extract a part (a range of frames) from a GIF.
Duplicate a GIF
Create multiple GIF copies side-by-side.
Duplicate GIF Frames
Create multiple copies of individual GIF frames.
Crop a GIF
Cut a region from a GIF animation.
Resize a GIF
Resize a static or animated GIF.
Skew a GIF
Skew a GIF animation by an angle.
Add a Border to a GIF
Add a border around a GIF.
Add Text to a GIF
Write something on a GIF.
Add a GIF Frame Counter
Add a counter that shows the current frame number.
Add a Timer to GIF
Add a running time clock to a GIF animation.
Add White Noise to a GIF
Add white noise pixels to an existing GIF.
Generate White Noise GIF
Create a GIF that animates white noise.
Create a Quasistatic GIF
Make a GIF animation so slow that it appears almost static.
Glitch a GIF
Let Zalgo destroy a GIF animation.