g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Photoshop Animation for Sprite Sheet

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 FlashR and PhotoshopR. 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.

  1. On the first layer, draw a small red ball at the center of the bottom edge.

  2. Open the Animation panel. We will be using the Frame mode. Our first frame is already there.

  3. Click on the small triangle next to 0 sec and set the fps to .2.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. Select the second frame in the Animation Panel and add a new frame.

  9. In the Layers Panel, duplicate Layer 2 and rename it "Layer 3".

  10. 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.

  11. 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.


Add Photoshop+Animation+for+Sprite+Sheet to Twitter Add Photoshop+Animation+for+Sprite+Sheet to Facebook Add Photoshop+Animation+for+Sprite+Sheet to MySpace Add Photoshop+Animation+for+Sprite+Sheet to Digg Photoshop+Animation+for+Sprite+Sheet Add Photoshop+Animation+for+Sprite+Sheet to Yahoo My Web Add Photoshop+Animation+for+Sprite+Sheet to Google Bookmarks Add Photoshop+Animation+for+Sprite+Sheet to Stumbleupon Add Photoshop+Animation+for+Sprite+Sheet to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

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


g features
Adobe Portfolio First Look by Justin Seeley

Social Media Graphic Templates


Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


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

BellaOnline Editor