Learn the basics of frame-by-frame animation in Photoshop using the Animation (Timeline) panel. Export an optimized GIF ready for web use.

Step 1: Setup Animation Workspace

Create 400×400px document. Window > Timeline to open the Timeline panel. Click "Create Frame Animation" in the timeline dropdown.

Step 2: Create Frame 1

Design your first frame on the canvas — e.g., a circle on the left side. This becomes Frame 1 in the timeline automatically.

Step 3: Add Subsequent Frames

Click "Duplicate Selected Frame" in the timeline. Move the circle slightly to the right on the canvas. Repeat 8–10 times to create motion across the canvas.

Step 4: Set Frame Timing

Select all frames (Shift+click). Set delay to 0.1 seconds per frame below each thumbnail. Click the loop option and set to Forever.

Step 5: Preview and Export

Press the Play button to preview. File > Save for Web & Devices. Choose GIF, 128 colors, dither 88%, transparency if needed. Save and test in a browser.

That's it! You've completed this tutorial. Experiment with the techniques and share your results with the Designstacks community.