RA Animation Exporter for Photoshop Spritesheets
With the PhotoshopR Animation panel, you can make some very nice animations. It's almost a shame not to be able to use them in ways other than a web gif animation. For several months I've been searching for scripts to convert the frames of a Photoshop animation into a spritesheet.
Spritesheets are one way to use animation in mobile projects. They are more memory efficient than movie clips because only one png if loaded into the memory. With the explosion of mobile app development, spritesheets are very popular.
RA Animation Exporter was created by Peter Jones (Retro Affect). You can download it for free from the website - see link below. In the downloaded zip, you will find the RA Animation Exporter v.1.2.jsx file that does the work. Jones also supplies an example psd and png file.
The RA Animation Exporter script will merge the visible layers contained in each frame of the animation into a one layer image and place all the resulting images sequentially on a grid in a new image window. This new image is saved to your desktop as a png texture. Using the height, width and number of frames in the Animation panel, the script will determine the output size of the png image to the nearest power of two, which is usually a requirement of mobile projects. One nice feature is that the script checks for and corrects any white halo effects that can appear in processed Photoshop images.
To get best results, you will want to work in the Frames mode in the Animations panel, not the Timeline mode. All the layers in the Layers panel must be unlocked and you should not have any blank frames in the Animations panel. You can have any number of frames to your animation and a canvas size of a power of two is recommended.
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Spritesheets are one way to use animation in mobile projects. They are more memory efficient than movie clips because only one png if loaded into the memory. With the explosion of mobile app development, spritesheets are very popular.
RA Animation Exporter was created by Peter Jones (Retro Affect). You can download it for free from the website - see link below. In the downloaded zip, you will find the RA Animation Exporter v.1.2.jsx file that does the work. Jones also supplies an example psd and png file.
The RA Animation Exporter script will merge the visible layers contained in each frame of the animation into a one layer image and place all the resulting images sequentially on a grid in a new image window. This new image is saved to your desktop as a png texture. Using the height, width and number of frames in the Animation panel, the script will determine the output size of the png image to the nearest power of two, which is usually a requirement of mobile projects. One nice feature is that the script checks for and corrects any white halo effects that can appear in processed Photoshop images.
To get best results, you will want to work in the Frames mode in the Animations panel, not the Timeline mode. All the layers in the Layers panel must be unlocked and you should not have any blank frames in the Animations panel. You can have any number of frames to your animation and a canvas size of a power of two is recommended.
- Before you open Photoshop, copy the .jsx file into the Photoshop scripts folder.
Applications/Adobe Photoshop CS5.1/Presets/Scripts/ - Create your animation in Photoshop as usual.
- Save the image file as a psd image.
- Click File - Scripts - RA Animation Exporter v1.2.
- On your desktop, find the png with the same name as in Step 3.
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.
