Menu

Tutorial: Photoshop's animation tools

In the previous posts, I wrote a tutorial about doing pixel art and talked a bit about character animation. I included a couple of GIFs to the animation post, so I thought it would be good to write a tutorial about Photoshop's animation tools. With Photoshop's built-in animation tools it is easy to test out your sprite sheets, to see how does the animations look like.

A few of my friends were asking about things related to animation and they were unaware that you can actually do animation within Photoshop. So hopefully they and you will find this post useful.

First things you need

First off you need your sprites or something you are going to animate. I will be using the sprite sheet I made for the pixel hero. Which has sprites for several animations.

herosheet

You should separate the different sprites to their own layers. If your sprites are made of multiple layers you should group them so that they are easier to use later.

Setting up

Next we will set up Photoshop for animation. First create a new document with the size you want. The document size can be modified later so you don’t have to worry about the size too much. Just make the document large enough for you to do your animation.

I will set the document size to just a bit larger than my hero.

PhotoshopUI

To start animating you first have to bring up the animation window. It can be found from the upper toolbar under “Window” > ”Animation”.

AnimationWindow

The animation window will appear at the bottom of the work area. The window has two modes: frame animation and timeline animation. In my case frame animation is selected and you can see that by default there is only one frame.

animationWindow2

You can switch between the animation modes by using the convert button, the name will change depending on which mode you have currently as selected. In this case it will read "Convert to timeline animation". If I had were in timeline animation mode it would read "Convert to frame animation" instead.

Convert Button

In frame animation, we will be using frames to create our animation. In timeline animation you would have a timeline and use keyframes to do the animation. I'm using frame animation since it works best for testing out the sprites.

Transferring sprites

Now we will transfer the wanted sprites from your sprite file to the new animation file. You could do the animations in the same file by just toggling the animation window on. I would recommend that you do it like I have done it here, with two files. This way you don't have to modify the sprite file and they will be safe even if something happens to the animation file.

Transferring is easy; just select all the wanted sprites from the layer list, so that they are blue. Then move them by using the Move Tool, just drag them from the work area to the new animation file work area.

If your sprites are large or there are many of them, it might take some time but in the end they will appear in the work area.

Frame animation

Now that the sprites are in the animation document, we can start to organise them. First align the sprites so that they are walking on the same line, as if they were walking on the ground. Then pick a vertical spot from the character and align all of the sprites according to it. By aligning the sprites we will get smooth animation where the character will look as if walking still. If not aligned properly, you will see the character shifting places during the animation. You can use the guides to create assistive lines.

Animation3

Once all the sprites are aligned, you can start making new frames. You will need one frame for each sprite you have. So hide all the sprites except the first sprite, then duplicate a new frame. Then, hide the first sprite and unhide the second one. Repeat this process for all of your sprites.

The “Duplicates selected frames” button can be found here:

DuplicationButton

You can also duplicate multiple frames. So if you have sprites for many different animations and you would like to have for example walking followed by jumping, which would be followed by walking again. You can just select the wanted frames and click the "Duplicates selected frames” button, it will duplicate the frames and create them right after the selected frames. Now you just have to drag them to the spot you would like them to be.

A good thing to know is that modifications made to a frame will affect only that frame and the frames that come after it. So if you create a new layer and draw something on it, it will be visible on the current frame and those that come after it.

Exporting the animation

Now that your amazing animation is complete you might want to show it off to people over the internet. There are two different options available and they both have their uses.

GIF

GIF is a popular format because it works "just as it is" on websites. You can export your cool animation easily as a GIF with Photoshop. Just go “File” > ”Save for Web & Devices”.

Save Gif

Here you can export your animation as a GIF and you can also modify several settings. The most important one is the size. Even though you have set a size for your document, you can export the GIF in a different size by changing the size settings. Remember to set the quality to “Nearest Neighbor”, if you have done your sprites in pixels. Otherwise "Bicubic" works fine.

Video

In some cases you might export your animation as a video file. This option can be found from “File” > ”Export” > ”Render Video”

SaveVideo

In this window you can change different kinds of settings. You can select what file format the video will be exported as and what the quality is going to be. The quality affects the file size, and with animations the best quality might end up to be quite a large file. So it's a good idea to test different quality settings to see what works the best. Also the file format might affect the quality and file size depending how they compress the file.

Good to know

Photoshop's animation tools are not perfect, but for testing sprites they do their job. The timeline animation is also good for basic animations since it doesn’t have too many options. Adobe After Effects is a lot better for animation with a wider tool set. Photoshop works well with After Effects and you can import your layers from Photoshop into After Effects easily.

Conclusion

Photoshop's animation tools are fun and useful in some cases. While drawing the sprites, it's hard to see how they will look as animations, but with the animation tools you can immediately see how they look. This helps a lot since you don’t have to implement them in your game and then see that they don’t work.

Animation is fun and a program with good tools for it helps a lot. However, if you are planning to do proper animation, I wouldn’t recommend Photoshop for it. You might want to use some other program better suited for detailed animation. I'm happy to answer any questions you might have after reading this post, and like always, don’t be afraid to suggest a topic that you would like me to write about.


Share this:
Category: Graphics   


comments powered by Disqus