Photoshop Animation for Sprite Sheet - Digital Art and Design

When working with sprite sheets, your first step is to create the animation which will contain the sprites for our sprite sheet. There are various animation programs such as Flash^R and Photoshop^R. In this tutorial, we will create a simple animation in Photoshop and export it as a PNG sequence for import into TexturePacker.

Start a new image at 256 width x 256 height x 72 res. Why do we use 256? In most mobile apps, a canvas size of a power of two is recommended. So, it's a good practice to stay within that range if possible. We will have ten frames to our animation of a bouncing ball.

On the first layer, draw a small red ball at the center of the bottom edge.
Open the Animation panel. We will be using the Frame mode. Our first frame is already there.
Click on the small triangle next to 0 sec and set the fps to .2.
At the bottom of the panel, click on the Duplicate Selected Frames icon to add another frame to the Animation Panel.

There are a few ways to use the Layers Panel to create the animation. I find it easier to create a new layer in the Layers Panel for each frame in the Animations Panel.
Now that we have two frames in the Animation Panel, we need a second frame in the Layers panel. Right-click on Layer 1 and select Duplicate Layer from the menu. Rename this second layer to "Layer 2".

We now have two frames in the Animation Panel and two layers in the Layers Panel. But we need to coordinate them together.
Select the first frame in the Animations Panel. In the Layers Panel, turn off the visibility of Layer 2, so that Layer 1 is the only visible layer.
Select the second frame of the Animations Panel. In the Layers Panel, turn off the visibility of Layer 1 and turn on the visibility of Layer 2.

No when you click the Play button in the Animation Panel, you will see that the ball moves up and down in the image window.
Select the second frame in the Animation Panel and add a new frame.
In the Layers Panel, duplicate Layer 2 and rename it "Layer 3".
With frame 3 still selected in the Animation Panel, turn off the visibility of Layer 2. Move the red ball up slightly on Layer 3.
For frame 1 and 2 in the Animation Panel, turn off the visibility for Layer 3.

Repeat these steps for three more frames. Then you should have 6 frames with only one layer visible in each.

Frame 1 - Layer 1 visible
Frame 2 - Layer 2 visible
Frame 3 - Layer 3 visible
Frame 4 - Layer 4 visible
Frame 5 - Layer 5 visible
Frame 6 - Layer 6 visible

Next →

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

|