How to Create a Frame Animation in Photoshop

Cycling through several different images inside the same fixed area, like a hand holding different art prints, only needs one carefully made selection and Photoshop’s frame animation tools. This tutorial builds a precise pen tool selection around a tricky area, loads several images into a shared group mask, sets up a looping frame animation from them, and exports the finished result as an animated GIF for the web.

Tracing a Precise Selection Around the Print With the Pen Tool

Most of a print’s outline is a simple rectangle, but a curved area like a thumb holding it needs the more precise control the Pen tool offers over straight edges and curves.

1. Click Points Around the Straight Edges

   Press P for the Pen tool and click just outside the print’s straight edges to build a clean rectangular path.

2. Reposition Any Misplaced Points

   Hold Cmd/Ctrl and click a point to move it if it wasn’t placed exactly where intended.

3. Click and Drag to Create Curves Around the Thumb

   Click and drag to create curved path segments that follow the shape of the thumb and fingernail holding the print.

4. Adjust Curve Handles With Alt/Option

   Hold Alt/Option and drag a point’s handle to adjust the curve’s direction before continuing the path.

5. Close the Path to Finish It

   Click back on the starting point, indicated by a small circle next to the pen cursor, to close the path.

Turning the Path Into a Feathered Selection

A small amount of feathering keeps the edge of the eventual selection from looking too sharp and artificial once it becomes a mask.

6. Right-Click Inside the Path

   With the Pen tool still active, right-click inside the completed path.

7. Choose Make Selection With a Feather Radius

   Choose Make Selection and set a feather radius of around 3 pixels to soften the selection’s edge slightly.

Applying the Selection as a Shared Group Mask

Grouping a new layer with itself and applying the selection as that group’s mask means every future layer added inside the group automatically shares the same restricted visible area.

8. Create a New Layer

   Add a new layer to hold the first print image.

9. Group the Layer With Itself

   Press Cmd/Ctrl+G to group the new layer with itself.

10. Apply the Selection as the Group’s Layer Mask

    With the selection still active, click the layer mask button on the group to apply it as a mask restricting visibility to just the print’s shape.

Why a Group Mask Beats Masking Each Layer Individually

Applying a separate layer mask to each of several print images would mean recreating the exact same pen tool selection multiple times over. Masking the shared group just once instead means every layer placed inside it automatically inherits that same restricted visible area, with no repeated masking work required.

Loading Multiple Print Images Into the Group

Loading several images as a stack and dragging them all into the masked group at once brings every print into the document already confined to the correct shape.

11. Load Multiple Files Into a Stack

    Go to File > Scripts > Load Files Into Stack and browse to select several print images at once.

12. Drag All the Images Into the Masked Group

    Select the Move tool, shift-click each loaded layer, and drag them all into the document, landing inside the masked group.

13. Scale Each Print to Match the Print Area

    With all four print layers still selected, press Cmd/Ctrl+T once, click the chain link to lock proportions, and scale them together so every print fits the same area.

Adding a Soft Shadow Beneath the Thumb

A softly painted shadow layer, confined to the same group, makes each swapped-in print look like it’s genuinely being held rather than pasted flat on top of the photo.

14. Create a New Layer Inside the Group

    Add a new layer within the same masked group to hold the shadow.

15. Set a Low-Flow, Zero-Hardness Brush

    Choose the Brush tool, set flow to around 20%, and right-click to set hardness to 0 for a soft edge.

16. Paint a Small Black Shadow Near the Thumb

    Paint black with the soft brush directly beside the thumb to create a subtle shadow where the print meets the hand.

Why Frames Mirror Whatever the Document Currently Shows

Building each animation frame from a separate exported image would mean managing several disconnected files just to create one simple loop. Because each frame in the Timeline panel simply captures whatever layers are currently visible in the document, switching between prints is as easy as toggling layer visibility on and off for each frame.

Creating Individual Frames in the Timeline Panel

Photoshop’s Timeline panel, set to frame animation mode, builds each frame from whatever layers happen to be visible in the document at the time.

17. Open the Timeline Panel

    Go to Window > Timeline to open the panel at the bottom of the screen.

18. Choose Create Frame Animation

    Click the dropdown arrow and choose Create Frame Animation rather than a video timeline.

19. Add a New Frame for Each Print

    Click the New Frame button repeatedly to create one frame for each print image, in this case four total.

20. Toggle Layer Visibility for Each Frame

    Click each frame in turn and toggle the print layers’ visibility so each frame displays a different print image.

Setting Frame Duration and Looping Forever

Setting a consistent delay for every frame and switching the loop count to Forever turns a set of static frames into a continuously cycling animation.

21. Select All Frames and Set Duration

    Shift-click to select every frame, click the delay dropdown showing 0 seconds, and choose a duration such as 1 second.

22. Change Looping From a Set Number to Forever

    Click the looping dropdown, currently set to a fixed number like Once, and change it to Forever.

23. Preview the Animation

    Click Play in the Timeline panel to confirm the frames cycle continuously through each print.

Why Previewing in a Browser Matters Before Uploading

Photoshop’s own preview inside Save for Web doesn’t always guarantee the exported file will behave identically once it’s actually loaded on a real web page. Opening the exported GIF in an actual browser first confirms the animation truly loops and displays correctly, catching any issue before the file gets uploaded anywhere public.

Exporting the Animation as a GIF and Previewing It

Save for Web’s format setting must be switched to GIF specifically, since neither JPEG nor PNG supports animation, and a built-in browser preview confirms the exported file works correctly before it goes online.

24. Open Save for Web

    Go to File > Export > Save for Web, or File > Save for Web in older versions of Photoshop.

25. Set the File Format to GIF

    Change the file format dropdown to GIF, since only GIF supports the animation.

26. Choose Perceptual, Diffusion, and Transparency Settings

    Set the color reduction to Perceptual with Diffusion dithering and enable transparency to keep the file size reasonably small.

27. Preview in a Browser Before Saving

    Click the Preview button to open the animation in a default web browser and confirm it cycles correctly, then save the finished GIF file.

Why This Approach Works

Tracing a single careful pen tool selection and applying it as a shared group mask is what allows any number of images to be swapped in and out while always staying confined to exactly the right shape. Building the animation from simple layer visibility toggles, rather than separate documents for each frame, keeps the entire process contained within one file that’s easy to adjust later. Exporting specifically as a GIF, and previewing it in a browser before uploading, is what confirms the final file will actually animate correctly once it’s live on the web.

Final Thoughts

A frame animation like this turns a single static photo into a way of showcasing several different options at once, all without needing separate photos for each one. The same group-mask-and-timeline approach works for cycling through any set of images confined to a fixed shape, not just prints held in a hand.

Quick Reference: Keys, Menus and Settings

• Trace the printP for the Pen tool; hold Cmd/Ctrl to move a point, Alt/Option to turn a handle
• Path to selectionRight-click inside the path > Make Selection, with a small feather
• Group maskNew layer, Cmd/Ctrl + G, then the layer mask button
• Load the printsFile > Scripts > Load Files into Stack; Cmd/Ctrl + T with the chain link on
• Thumb shadowSoft black brush, Flow 20%, Hardness 0, on a new layer in the group
• FramesWindow > Timeline > Create Frame Animation; New Frame for each print; delay 1 sec; looping Forever
• ExportFile > Export > Save for Web: GIF, Perceptual, Diffusion, Transparency; Preview in the browser