g
Printer Friendly Version

editor  
BellaOnline's Digital Art and Design Editor
 

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.

  1. Before you open Photoshop, copy the .jsx file into the Photoshop scripts folder.

    Applications/Adobe Photoshop CS5.1/Presets/Scripts/

  2. Create your animation in Photoshop as usual.

  3. Save the image file as a psd image.

  4. Click File - Scripts - RA Animation Exporter v1.2.

  5. On your desktop, find the png with the same name as in Step 3.

http://retroaffect.com/blog/132/Photoshop_Animation_to_Sprite_Sheet/

Join us in the Flash forum. | Join us in the Digital Art and Design forum.

|


Digital Art and Design Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 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.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor