logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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 Del.icio.us 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Photorealistic Digital Art for Digital Stamp

Review - 21-Day Drawing Challenge

How to Print and Cut Clip Art in Silhouette Cameo

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor