← Back to news

Photoshop Frame Animation Tutorial

· Pjero Jercic

A quick walkthrough of how we hand-animate characters for Trooper using frame-by-frame animation in Photoshop CC 2015 — in this case, a non-playable character with a walk cycle and an idle animation.

Finished character animation

Drawing

Each body part goes on its own layer — head, body, front leg, back leg — with matching color layers underneath.

Sketching the character Body parts on separate layers

Once the character looks right, the layers get merged and grouped into the first frame. A time-saver: duplicate the front leg, shrink it slightly, and it works as the back leg too.

Merging layers into the first frame group

Animating

Photoshop's Timeline panel (Window > Timeline → Create Frame Animation) drives the sequence.

Opening the Timeline panel Create Frame Animation

Each frame shows only the layer groups relevant to that pose, and movement comes from toggling visibility and nudging positions between frames. The walk cycle uses four frames with the legs stepping progressively, plus a little head/body tilt so it doesn't look robotic.

Walk cycle frame Walk cycle in progress

The idle animation is just a subtle up-down breathing motion on the head and body.

Idle animation frames

Exporting

For a GIF, File > Export > Save for Web (Legacy) does the job.

Exporting as a GIF

For a sprite sheet, File > Export > Layers to Files keeps every frame the same canvas size, and from there TexturePacker assembles the final sheet.

Export layers to files

Here's the whole process in action: