Simple animation in Photoshop

NAV15AP & NAV16AP

1. Jakso lukuvuonna 2016-17

This is a short tutorial for how to animate objects in Photoshop. This will come in handy when you are animating a sprite for Unity project and want to test it before giving it to the programmer.

First you need to have animated sprite. We draw poke ball last time and are going to use it in this assignment. Open the file in Photoshop and save it under a different name. Next you’re going to use the layer with a complete poke ball and duplicate it. Use ctrl + J to duplicate the layer. Rotate the new ball little to the left using transform tool. It can be found from toolbar under edit tab or by using hotkeys ctrl + T. Do this multiple times so that you’ll get full rotation for the ball.

Next we need to open animation window. This is found from tool bar under window tab. Select timeline from there and it opens the animation window in Photoshop.

 Select create frame animation. If you accidentally chose the create video timeline, it can be changed from the bottom left corner of the animation timeline.

In the frame animations you’ll need to make more frames. This is done with duplicate selected frame button. Make as many frames as you have layers in Photoshop. Next you need to go frame by frame and choose correct layer to match with animation frames. Leave only the needed layer active in the layers tab.

Now you are going to fine-tune the animation. Choose no delay option from the right corner of every frame. This determines the speed the frame changes to the next one.

Then you want to make the animation loop. There’s a button on the bottom left corner that says once. Change it to forever for a constant loop. Now when you press play from the timeline, it animates the object according to your settings. 

Go check out instructions from adobe in Finnish if you want to know more about frame animation in Photoshop: https://helpx.adobe.com/fi/photoshop/using/creating-frame-animations.html#addframestoananimation