Photoshop Sprite Sheet Creator

Sprite Sheet's are mainly used to Animate objects in Websites. They are based on the same principles as a Flip book.

With the difference that on a Sprite Sheets, objects are placed beside each other on a very wide canvas. To create a Sprite Sheet in Photoshop, you need to perfectly place each picture on a new layer in, which can take some time. This tool will create a Sprite Sheet based on your edited layers in a click.

Installation

Installing Photoshop tools is really easy. Download the File Sprite Sheet Creator v2 (1241 downloads) and place them into the Photoshop extension directory

Mac:
/Applications/Adobe Photoshop .../Presets/Scripts/
Windows:
C:\Program Files\Adobe\Adobe Photoshop ...\Presets\Scripts\

Restart Photoshop if it was open.

How to use

Each layer represents one frame in the sprite sheet.

sprite-sheet-photoshop-creator-tool-1

Open the script in Photoshop by: File > Scripts > Create Sprite Sheet from Layers v2

sprite-sheet-photoshop-creator-tool-2

The sprite sheet creation dialog will appear as long as there are at least two visible layers available.

sprite-sheet-photoshop-creator-tool-3
 

Description of options:

  • First Frame is Top Layer
    If checked the sprite sheet frames will start from the top layer; if not checked the frames will start from the bottom layer.
  • Rows
    The number of rows can be specified (default is 1).

Description of warnings:

  • iOS size warning
    If the sprite sheet image will be too large to be loaded on Safari Mobile if saved as a PNG. See maximum size limitation for details.
  • Legacy iOS size warning
    If the sprite sheet image will be too large to be loaded on Safari Mobile (on iPod 4 or iPhone 3GS and lower) if saved as a PNG. See maximum size limitation for details.

Clicking the "Ok" button will merge all the layers into one layer with the sprite sheet.

sprite-sheet-photoshop-creator-tool-4
 
 

FAQ

  • Why do I get the error "No document open"?
    The script requires an open Photoshop document.
  • Does the script support frames that are different dimensions?
    Not currently.
  • Why do I get the error "Sprite sheet requires more than one visible layer"?
    The script requires at least 2 layers to create a sprite sheet.

Download

Download Button is located in the header.

Notice

I simply updated William Malone's script of 2014.
All credits go to him.

Create Sprite Sheets in Adobe Illustrator

Illustrator and Photoshop are the same, but still different.

Tools which are working for Photoshop do not directly work for Illustrator and vice versa. The easiest way, to create Sprite Sheet's from Illustrator is to Export the Project to Photoshop with all layers.

How to export Illustrator layered Projects to Photoshop

Saving the Adobe Illustrator document as a .PSD file is pretty easy, but some configurations need to be considered if you want to keep all layers and not compressed into one flat image.

When you're ready, open the Export as by  File > Export > Export As...

illustrator sprite sheet creator export to photoshop

Your File Explorer will open. Now you get the option to define the Save as type where you should choose the Photoshop (*.PSD) type, then click the "Export" button.

illustrator sprite sheet creator export to photoshop

A display dialog with options will open. Under Optionscheck the Write Layers option to keep the layers. Click the "OK" button to Save it.
Note: Exporting layers in CMYK Color Model is not always possible (you'll notice it if Write Layers is greyed out).

illustrator sprite sheet creator export to photoshop

 Now can you use the Exported file in Photoshop and use it in combination with the Sprite Sheet Creator tool to create Sprite Sheets.