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.
Installing Photoshop tools is really easy. Download the File Sprite Sheet Creator v2 (1407 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.
Open the script in Photoshop by: File > Scripts > Create Sprite Sheet from Layers v2
The sprite sheet creation dialog will appear as long as there are at least two visible layers available.
Description of options:
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.
- 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?
- 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 Button is located in the header.
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...
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.
A display dialog with options will open. Under Options, check 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).
Now can you use the Exported file in Photoshop and use it in combination with the Sprite Sheet Creator tool to create Sprite Sheets.