Photoshop: Basic GIF animation/animatics

TechShop: Photoshop: Basic GIF animation/animatics

This guide is designed to allow you to quickly and easily create a basic animation from Photoshop layers. This can be refered to as an animatic. In animation and special effects work, the storyboarding stage may be followed by simplified mock-ups called "animatics" to give a better idea of how the scene will look and feel with motion and timing. At its simplest, an animatic is a series of still images edited together and displayed in sequence.

You may also wish to look at Photoshop: Rendering an Image Sequence to create Quicktime videos from within Photoshop.


Step 1 Prepare files
* If you don't already know what Photoshop layers are, or how to make them, read and follow the links listed under 'What is a layer?' in Getting Started in Photoshop
* Make a new file or open an existing one and create your layers, treating each one as being a separate frame in your animation.

Step 2 Open the animation palette. Window > Animation

Step 3 Click into the menu in the top-right of the animation palette, and select 'Make Frames From Layers'

Step 4 Edit the duration of each frame (or change all frames at once by Shift-clicking the first and last frame), and change the repeat settings to 'Once','X times' or 'Forever' if necessary in the bottom-left of the animation palette.

Step 5 You can preview your animation using the Play Controls at the bottom of the animation palette.
Step 6 Save your animation. File > Save for Web & Devices. GIF must me selected in the top-right, and you are limited to 256 colours.

Step 7 To check your animation works, open it in a web browser by dragging the file you have created on to a browser icon in the dock, such as Safari, Mozilla Firefox or Google Chrome.


Wikipedia GIF
Photoshop: Rendering an Image Sequence
Youtube basic Photoshop animation tutorial

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License