Frame-based animations in Photoshop allow you to create simple animated content by building a sequence of frames, with each frame representing a different configuration of your layers. This technique is ideal for creating animated GIFs for web content, social media posts, or simple motion graphics. Frame animations work by displaying a sequence of frames in order, creating the illusion of movement. Unlike timeline animations that use keyframes and automatic interpolation, frame animations give you precise control over each individual frame.
Getting Started with Frame Animations
Add content to your animation. Select the new frame in the Timeline panel and modify the layers for this frame in the Layers panel. Continue adding frames and editing layers as needed. Add as many frames as your animation requires. Dream it. For Photoshop versions earlier than Photoshop CC, some functionality discussed in this article may be available only if you have Photoshop Extended. Photoshop does not have a separate Extended offering. You can use Photoshop to edit individual frames of video and image sequence files. In addition to using any Photoshop tool to edit and paint on video, you can also apply filters, masks, transformations, layers styles, and blending modes. not the audio.
When you open a video file or image sequence in Photoshop, the frames are contained within a video layer. In the Layers panel, a video layer is identified with a filmstrip icon. Video layers let you paint and clone on individual frames using the brush tools and stamp tools. Like working with regular layers, you can create selections or apply masks to restrict your edits to specific areas of a frame. You work with video layers just like regular layers by adjusting the blending mode, opacity, position, and layer style. You can also group video layers in the Layers panel. If you prefer to make your frame edits on a separate layer, you can create a blank video layer. A video layer references the original file, so that edits to the video layer don’t alter the original video or image sequence file. To maintain the link to the original file, ensure that it remains in the same location relative to the PSD file.
Photo formats supported include BMP, DICOM, JPEG, OpenEXR, PNG, PSD, Targa, TIFF, Cineon and JPEG 2000 are supported if the plug-ins are installed. An animation is a sequence of images, or frames, that is displayed over time. In the standard edition of earlier versions of Photoshop, the Animation panel (Window > Animation) appears in frame mode, showing a thumbnail of each frame in your animation. The Animation panel menu contains additional commands for editing frames or timeline durations, and for configuring the panel display.
Timeline Modes: Frame vs. Video
Photoshop has two timelines: frame and video. The frame timeline is for frame-by-frame animation and can be very limiting, converting the layers in your Layers panel to individual frames. The video timeline allows for keyframe animation-defining key points along a timeline and letting Photoshop interpolate in-between frames. In frame mode, you can set unique duration and layer properties for each frame. In timeline mode, each layer in a document (except the background) is represented in the timeline and is synchronized with the Layers panel.
Frame Mode vs. Timeline Mode
- Frame mode shows each separate frame and lets you assign a specific duration and layer properties per frame.
- Timeline mode shows per-layer properties (position, opacity, etc.) and their keyframes along a time ruler.
- You can switch between modes using the appropriate icons in the Animation panel.
Ideally, you should select the mode you want before starting an animation. When converting a timeline animation to a frame animation, you can click Convert To Frame Animation, and vice versa with Convert To Timeline Animation.
Working with Video Layers and Layer Types
Video layers let you edit frames with the same flexibility as regular layers. They can be grouped, masked, and edited with brushes, filters, and transforms. There are several layer types you can animate, each with its own set of animatable properties:
- Standard (pixel) layers: position, opacity, styles.
- Layer masks and vector masks: position and enabling states for masks.
- Shape layers: shape or line segments with vector mask information; include position, opacity, styles, and mask properties.
- Text layers: transform, opacity, styles, text warp (Text Warp).
- Smart Objects: contain any combination of layers and preserve original quality; transform, opacity, styles can be animated. Smart Objects can be edited by double-clicking their thumbnail to open the object in a dedicated window.
Two additional layer types-video layers and 3D layers-exist but are complex. This article focuses on traditional layer types, excluding video and 3D for the main discussion. You can explore these on your own later.
Keyframe Animation and Properties
The Position property enables movement along X and Y axes. Opacity allows keyframing layer transparency. The Style property allows keyframing layer styles (Bevel & Emboss, Color Overlay, Drop Shadow). Masks (layer masks or vector masks) provide additional keyframeable positions. Text Warp enables keyframing text warp effects. The Transform property allows rotation and scaling, accessible via Edit > Transform or Free Transform mode.
These properties can be animated with keyframes by clicking the stopwatch icon to enable keyframing. When you move the current-time indicator, Photoshop automatically creates new keyframes at the new positions, building the in-between frames for you during playback.
Advanced Techniques: Smart Objects, Templates, and Filters
Smart Objects enable more complex workflows by housing multiple layers, allowing you to manipulate them as a single layer, animate within the smart object, and preserve original content. You can create template layers inside a smart object to simplify complex animations, then remove the template and retain the resulting motion.
Embedding animations inside smart objects opens up possibilities like animated filters. If you add a filter to a smart object containing animated content, the animation will pass through the filter, creating a unique look. Layer styles can be applied to animated content, and Blend If options can help isolate backgrounds for cleaner styling without editing the entire smart object.
For example, you can apply a Bevel & Emboss style to a dot in a smart object by isolating the object’s content from the background using Blend If adjustments. If necessary, you can convert the processed content back to a Smart Object to keep edits non-destructive.
Practical Animation Workflow: From Frames to GIF
The practical workflow begins with planning the frame rate. A common setting is 24 frames per second (fps) for a smooth but efficient animation. You can produce one-frame exposures for highly fluid motion or two-frame exposures (every other frame) to save time while maintaining a readable motion-use ones for fast, fluid motion and twos for most other content.
To visualize a looping GIF, you can create a simple scene: a candle flame with a squiggle-style flicker. Start with a blank document set to a square aspect (e.g., 1080x1080), create a base layer, and then animate the flame across sequential frames. Onion skinning helps you align successive frames by showing previous frames as translucencies, aiding consistency in motion.
When previewing, you can use the Play button or press the spacebar to view playback. For web-ready results, you can preview in a browser via the Save For Web dialog’s Preview In Browser option. Photoshop uses RAM for previews, caching frames for faster playback on subsequent reviews. The green bar in the Timeline panel indicates cached frames ready for quick playback.
Practical Tips for Realistic Animation
- Line quality matters: vary stroke width and pressure sensitivity to create dynamic illustrations. Use a graphics tablet with pressure control for natural line variation.
- Leverage onion skins to maintain continuity between frames, especially when animating small organic movements like flames or soft drifts.
- Experiment with smart objects to combine multiple animation sets, nesting animations, and applying filters in a non-destructive way.
- Combine page-level timing with per-layer properties to choreograph complex movements, including rotating, scaling, and opacity fades across frames.
From Concept to Web: Practical Considerations
When creating animations for the web, consider frame rate, file size, and looping behavior. GIFs are widely compatible, but modern formats like MP4 or WebP may offer better compression for longer animations. Use the appropriate document presets to control timeline duration and frame rate. If you need a quick preview for timing, use the document’s in-browser preview, as it provides a more accurate sense of how your animation will look online.
Photoshop Tutorial | QUICK TIP | Basic Frame by Frame Animation
Advanced Example: Embedding Smart Object Animations
Embedding animations in smart objects can create multi-layered motion within a single timeline. For instance, you can animate a dot within a smart object, then convert the dot’s layer to another smart object to apply a perspective transformation, and then animate within the new smart object. This approach enables complex, nested animations without cluttering the main timeline.
The process can also apply to filters: add a filter to a smart object containing an animation, and play the animation through the filter for a distinctive look. Layer styles applied to animated layers behave similarly to regular layers, with the caveat that manipulating background layers may require masking techniques or Blend If controls to isolate the subject from the background.
Glossary of Key Concepts
- Frame-based animation: sequence of frames where each frame is edited individually.
- Timeline panel: interface to manage frames or keyframes for animation.
- Video layer: a layer that contains video frames and supports keyframes.
- Smart Object: a container that preserves source content and supports nested animation.
- Onion skinning: helps visualize multiple frames for smoother transitions.
- Blend If: layer style feature to blend a layer with its underlying layers based on color ranges.