Creating a simple animation in Photoshop

V-animationAnimated gifs still have their place on the web. While there are alternative means available to make animations – Adobe Edge Animate for one, the gif can be created simply inside Photoshop.
Here we’re going to create a very simple animation that will be used in another larger animation as a “loading” icon. You know those things that repeat while some more stuff is going on in the background before the animation or movie plays.

Step One

Start with a very simple file. The simpler, the better, both in terms of animation and performance. In this example the file contains just two layers. Im building it at a larger scale than its end use simply because its easier to work with. If you don’t see the Timeline panel go to Window > Timeline.

Creating a simple animated GIF

Step Two

Make sure the Timeline option is set to Create Frame Animation. This will create a single frame which is the state of your document. In this case it happens to be the final look (or the final frame).

Creating a simple animated GIF - Select Create Frame Animation

Step Three

Duplicate the frame by clicking the page icon in the Timeline. Its next to the trash can. Now you have two identical frames. Click on the first frame and make the changes necessary in the layers panel to reflect how you want the image to appear at the start of the animation. In this case I set the layer opacity to 30% and moved the layer mask down to completely cover the shape.

Creating a simple animated GIF

Step Four

Select both of the frames and from the flyout menu on the timeline choose Tween…. Enter the number of frames you want to insert between the two frames. In this case I have left all the Parameters checked because I have changed the position of the mask, the opacity of the layers and an effect is being used.

Creating a simple animated GIF

Step Five

This will create a series of frames that will incrementally change the parameters between the two selected frames. Much easier than moving things yourself and creating new frames. Press the Play button in the Timeline panel to see the animation. Generally speaking the animation will run slower than the final result.

animation

NOTE: In this example I have selected “0 seconds” as the time for each frame to display. This creates a smoother effect of motion but you have the option to delay frames individually.

Step Six

Now its time to save the file as a gif. From the File menu choose Save for Web… In this dialog you really need to make some adjustments and sacrifices to bring the file size down as low as acceptable. Even though Im only using one color, I have transparency and opacity changes which creates more of a range. I decided 8 would be enough. You can preview the change live in this dialog. You can also change the size (100px wide) and set the repetition. As this will be for a loading screen I chose Forever so it will simply repeat.

Creating a simple animated GIF
Experiment with other settings to suit your final needs.

This really is only a simple introduction to the Timeline and Photoshops animation capabilities. Theres so much more that can be achieved with Frame Animation by changing the timing of frames, or using more layers. And one final note… its mobile device friendly.