How to make a GIF animation: step by step for beginners

Step 1

Plan the GIF before you open an app

GIF is a format with limits, and it's best to account for them from the start. Under the GIF89a specification a color palette holds at most 256 colors, and each frame's delay is set in hundredths of a second. So flat colors, icons, text and simple graphics look best in GIF, while photos and soft gradients look worse. Before you start, write down:

• •what moves: one action, no extra details;
• •frame size: where the GIF will live, in a post, on a website or in a portfolio;
• •duration and looping: usually a few seconds and an endless loop;
• •number of frames: keep it small for a first exercise so you get to a result quickly.

💡 Sketch the key poses on paper: the start, the peak and the return. You'll see right away whether the loop will close.

Step 2

Choose a tool

You don't need a dedicated animation app: tools you probably already use can make GIFs. The principle is the same everywhere: frames, a time for each frame, looping, export.

• •Photoshop: frame animation in the Timeline panel and GIF export. It's a paid Adobe subscription with a 7-day free trial;
• •Figma: animations made in Figma Motion can be exported as GIF. Figma Motion is currently in open beta, so features may change, and access depends on your plan and seat type;
• •Procreate on iPad: Animation Assist mode for drawn frame-by-frame animation, with Animated GIF export.

💡 Figma is handier for icons and interface animations, Procreate for drawn motion, and Photoshop for GIFs made from photos and layers.

Step 3

Make the frames

In Photoshop: open Window > Timeline and Window > Layers, click the arrow in the middle of the Timeline panel and choose Create Frame Animation. Keep every object that moves independently on its own layer. The Duplicate Selected Frames button at the bottom of the panel adds a new frame; in it, change the layers: toggle visibility, shift the position, change opacity. If your frames are already layers, the Timeline panel menu has Make Frames From Layers. In Procreate: Actions (the wrench icon) > Canvas > Animation Assist. Every layer becomes a frame, Add Frame adds a blank one, and onion skinning shows neighboring frames semi-transparently, up to 12 of them.

• •change one thing per frame: position, size, color or opacity;
• •the smaller the step between frames, the smoother the motion;
• •check the result with Play every few frames.

Step 4

Timing and a seamless loop

Now set the speed. In Photoshop every frame has a delay underneath it: click it and choose a duration. At the bottom of the Timeline panel choose looping: Once, Forever or Other. In Procreate you set speed in Settings with the Frames Per Second slider, from 1 to 60 frames per second. The Procreate handbook notes that typical animation has around 12 unique drawings per second, and cinema-quality animation up to 24. There you can also choose a playback mode: Loop, Ping Pong (forward and back) or One Shot.

• •seamless loop: the last frame should lead into the first, not repeat it, or you'll see a pause when it repeats;
• •Ping Pong saves motion that returns into itself, like a pulse or a sway;
• •hold on key poses: a longer frame at the start or end gives the eye a rest.

💡 If the motion looks wooden, add more in-between frames near the start and end poses and fewer in the middle: the object will start and stop smoothly.

Step 5

Export and file size

Photoshop: File > Export > Save for Web (Legacy). Adobe's tutorial suggests the GIF 128 Dithered preset, 256 in the Colors menu, smaller Width and Height if needed, and Forever under Looping Options. The Preview button shows the GIF in a browser. Another route is File > Save As with the GIF format. Figma: select the top-level frame with the animation, switch to the Animated tab in the Export section, and choose GIF, size, frame rate and Loop. Procreate: Actions > Share > Animated GIF, then Max Resolution (better quality, larger file) or Web Ready (smaller file).

• •a smaller frame means a smaller file, which is why Adobe suggests reducing Width and Height for GIFs used online;
• •fewer frames and a lower frame rate mean a smaller file;
• •the fewer colors in the export settings, the more visible the dithering: compare versions in Preview;
• •for long or photographic motion, video is better: Procreate notes that MP4 is usually lighter than GIF.

💡 Under WCAG 2.2, a GIF that starts on its own on a website and lasts more than 5 seconds needs a way to stop it. And never flash more than three times a second.