It's relatively unknown that Photoshop houses tools for animation. They're not exactly top of the line, but for anyone that already "has" Photoshop, it certainly gets the job done. Since it's a pretty big topic, I'll split into three separate posts. Today will be your introduction to the animation pane and all its function. The next part will walk you through your first animation, and the last will build on the second, teaching slightly more advanced practices.
A few assumptions: all that's required is some experience in Photoshop, and a very basic knowledge of animation. This tutorial is intended for the independent developer/fledging animator who wants to improve their games with moving pictures! This is certainly not the end all, be all of introductions/tutorials. If you have experience with the animation tool, share your tips in the comment section!
Let's get started...
Photoshop's Animation tool works by controlling the opacity, location and style of each layer depending on time. This tool is split into two modes, Timeline and Frame.
Timeline works somewhat like Flash animation whereas you edit each layer's individual timeline. In Timeline, you can also utlize
onion skinning, a function that faintly shows the frames around your current frame. This makes for smoother animations.
Frame is less complicated and a bit more approachable. Think of it like a Post-It Note pad. Each frame represents one page of the pad. In my opinion, this translates well into game development, since we think in frames anyways. Though you loose the onion skin function, you can move in between frames easily. For instance, I've mapped my next/previous frame to buttons on my tablet.
Key
A. Frame - Each square represents a single frame of the animation. Here, you can edit, move or delete frames. You can also change how long a frame is displayed for. Shift click to select many layers, or Ctrl click to select multiple, specific layers.
B. Play Mode - Options for playing the animation. Play once, play forever, or play for a set number of loops.
C. Controls - These are your typical video controls. Return to the first frame; previous frame; play; next frame.
D. Tween - Automatically transitions between two frames for a predetermined number of frames. Can't say I've utilized this too much, but it could be useful for
blocking.
E. Create a New Frame - Creates a new frame.
F. Delete Frame - Plants an apple tree.
G. Mode - Toggles between Timeline and Frame.
H. Options - Contains various options for the animation pane. One option to note is Match Layer Across Frames. This takes your current frame and layer, and copies that layer's position, opacity and style across all other frames.
That's it! Consider yourself introduced. Within the next week, I'll post a tutorial that walks through a full animation, best practices and all. Any questions?
