Sprite To Sheet

23 February, 2014 by Tom Elliott

A sprites sheet (or sprite strip) is a single image file containing multiple other images, for example animation frames. Sprite sheets are often used in web and game development. Upload animated image and this tool will convert it to PNG or GIF sprite sheet (with transparent background). Piskel, free online sprite editor. A simple web-based tool for Spriting and Pixel art. Create pixel art, game sprites and animated GIFs. Free and open-source. The #1 source for video game sprites on the internet! The Sprite Editor is used to take images with multiple elements like a Sprite Atlas or Sheets and slice them into individual Sprites. This allows importing optimized Sprite Atlases and retrieving the individual elements as needed without the need to have a handful of separate Sprite assets. An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

A sprite sheet is basically a collection of individual images (or frames) arranged together as a single image. By quickly moving the position of the sprite sheet at timed intervals within a viewport, an animation can be created.

Sprite sheets are used in all kinds of software and are commonly used in web development for framed animation. There are some specific tools and online services that can help create sprite sheets, but if you're using PhotoShop you can make this process really easy using the below steps.

This article will run through the process of how to automate sprite sheet creation in PhotoShop using a series of individual images for each frame in an animation, such as the sprite sheet below which I'm using for the new Web Dev Door website. These frames were initially created using 3D software.

Sprite Sheet made of 8 frames used for a 3D ripple effect

Step 1 – Install the PhotoShop Exporter

You can download and install the PhotoShop Sprite Sheet Exporter extension here, (from asousa.com). Unzip and install via Adobe Extension Manager.

There are a number of in-built methods within PhotoShop that may get you close to a decent sprite sheet, such as ‘Contact Sheet' and ‘PhotoMerge' functions. I've found the Sprite Sheet Exporter plugin to be the best method so far. This should work for most versions of PhotoShop and works well in PhotoShop CS5 and CS6.

Step 2 – Import frames as layers.

Before we can use the Sprite Sheet exporter, we need all our individual frames on separate layers within PhotoShop, with the first frame as the top layer and last frame as bottom. The easiest way I've found to do this is to follow these steps:

1. Use the ‘load files into stack' script under Files->Scripts
2. Browse to the folder containing your individual frame images
3. Select all the images you want to import.

Loading images to separate layers using ‘load files into stack' script

The stacking script will take a number of seconds to run depending how many images are selected, as the script has to open, create a new layer, paste and close each image that is being imported. Images are stacked into layers by name, so a good idea to name your frames sequentially i.e. image001.png, image002.png etc.

We should now have all our frames as separate layers, with the top most layer the one which will be the first frame our sprite sheet. If layers have imported in the wrong order, we can quickly reverse the layer stack by selecting all layers and going through the menu options Layer->Arrange->Reverse. Familyguy games online.

Free online casino no download. Don't worry if your images are different sizes either; when the sprite sheet is created, the exporter will pack each image with an equal width and height between each frame. This is what we want with a sprite sheet, as we don't have to manually declare the position of each frame when animating.

Step 3 – Creating the sprite sheet

Now that you have each image as an individual layer, save your file and run the ‘Sprite Sheet Exporter' script from Files->Scripts. The resulting sprite sheet will be created and saved in the same place as your saved file.

The exported sprite sheet image will be as a transparent PNG by default but you may wish to open and re-export to a .jpg or other format for better compression. If you need the transparency and are happy to stick with a .png for your sprite sheet, I would recommend running this through a .png optimiser such as tinypng.org.

Optimising png images not only reduces file size but can make your animations run smoother. Corel mydvd pro 1 2 8 download.

14 Comments

Csveditorpro2 4 18 – csv editor and exporter. This is nice! I have a few other scripts I tried but they're all glitchy. I'd love to see this with some extended capabilities like being able to select the number of rows and columns. This is very important because OpenGL texture limitations on some devices. Thanks for the work though!

Adobe Extension Manager allows me install only files with suffix *.zxp, not *.mxp. Can You advise any solution, please? 🙂

For those looking to use this in Photoshop CC, refer to these instructions provided by Adobe:

Note:
MXP extensions are no longer supported by Extension Manager CC. To install MXP extensions for Adobe applications, you have to convert them to ZXP extensions first. You can use Extension Manager CS6 to convert MXP extensions to ZXP extensions. Extension Manager CS6 can be downloaded from http://www.adobe.com/exchange/em_download/.

I found this note here: http://helpx.adobe.com/extension-manager/using/downloading-installing-extensions.html

I am getting an error to save the file first ? :S why is it so ??
the file is already saved before running the script. please need help

This is a f*** awesome pugin that you have there!

I am excited to try this but When I do, it gives me the 'Error 1302: No Such Element' Line: 35
-> var dom = app.activeDocument;

How do I go about resolving this?

A sprite sheet is basically a collection of individual images (or frames) arranged together as a single image. By quickly moving the position of the sprite sheet at timed intervals within a viewport, an animation can be created.

Sprite sheets are used in all kinds of software and are commonly used in web development for framed animation. There are some specific tools and online services that can help create sprite sheets, but if you're using PhotoShop you can make this process really easy using the below steps.

This article will run through the process of how to automate sprite sheet creation in PhotoShop using a series of individual images for each frame in an animation, such as the sprite sheet below which I'm using for the new Web Dev Door website. These frames were initially created using 3D software.

Sprite Sheet made of 8 frames used for a 3D ripple effect

Step 1 – Install the PhotoShop Exporter

You can download and install the PhotoShop Sprite Sheet Exporter extension here, (from asousa.com). Unzip and install via Adobe Extension Manager.

There are a number of in-built methods within PhotoShop that may get you close to a decent sprite sheet, such as ‘Contact Sheet' and ‘PhotoMerge' functions. I've found the Sprite Sheet Exporter plugin to be the best method so far. This should work for most versions of PhotoShop and works well in PhotoShop CS5 and CS6.

Step 2 – Import frames as layers.

Before we can use the Sprite Sheet exporter, we need all our individual frames on separate layers within PhotoShop, with the first frame as the top layer and last frame as bottom. The easiest way I've found to do this is to follow these steps:

1. Use the ‘load files into stack' script under Files->Scripts
2. Browse to the folder containing your individual frame images
3. Select all the images you want to import.

Loading images to separate layers using ‘load files into stack' script

The stacking script will take a number of seconds to run depending how many images are selected, as the script has to open, create a new layer, paste and close each image that is being imported. Images are stacked into layers by name, so a good idea to name your frames sequentially i.e. image001.png, image002.png etc.

We should now have all our frames as separate layers, with the top most layer the one which will be the first frame our sprite sheet. If layers have imported in the wrong order, we can quickly reverse the layer stack by selecting all layers and going through the menu options Layer->Arrange->Reverse. Familyguy games online.

Free online casino no download. Don't worry if your images are different sizes either; when the sprite sheet is created, the exporter will pack each image with an equal width and height between each frame. This is what we want with a sprite sheet, as we don't have to manually declare the position of each frame when animating.

Step 3 – Creating the sprite sheet

Now that you have each image as an individual layer, save your file and run the ‘Sprite Sheet Exporter' script from Files->Scripts. The resulting sprite sheet will be created and saved in the same place as your saved file.

The exported sprite sheet image will be as a transparent PNG by default but you may wish to open and re-export to a .jpg or other format for better compression. If you need the transparency and are happy to stick with a .png for your sprite sheet, I would recommend running this through a .png optimiser such as tinypng.org.

Optimising png images not only reduces file size but can make your animations run smoother. Corel mydvd pro 1 2 8 download.

14 Comments

Csveditorpro2 4 18 – csv editor and exporter. This is nice! I have a few other scripts I tried but they're all glitchy. I'd love to see this with some extended capabilities like being able to select the number of rows and columns. This is very important because OpenGL texture limitations on some devices. Thanks for the work though!

Adobe Extension Manager allows me install only files with suffix *.zxp, not *.mxp. Can You advise any solution, please? 🙂

For those looking to use this in Photoshop CC, refer to these instructions provided by Adobe:

Note:
MXP extensions are no longer supported by Extension Manager CC. To install MXP extensions for Adobe applications, you have to convert them to ZXP extensions first. You can use Extension Manager CS6 to convert MXP extensions to ZXP extensions. Extension Manager CS6 can be downloaded from http://www.adobe.com/exchange/em_download/.

I found this note here: http://helpx.adobe.com/extension-manager/using/downloading-installing-extensions.html

I am getting an error to save the file first ? :S why is it so ??
the file is already saved before running the script. please need help

This is a f*** awesome pugin that you have there!

I am excited to try this but When I do, it gives me the 'Error 1302: No Such Element' Line: 35
-> var dom = app.activeDocument;

How do I go about resolving this?

Sprite Sheet To Scratch

@MrBalin, try this one https://github.com/rraallvv/Layer2SpriteSheet. Cheers!

Free Sprite Sheets

Not Showing ‘Sprite Sheet Exporter' option in photoshop cs6
Any solutions.

Sprite Sheet Maker