Top tips from Rebecca Mock’s ICON9 workshop, which explored the creation of animated GIFs ready for the web.
GIFs work in seamless cycles, which Rebecca Mock describes as 'the perfect loop'. This loop should ideally erase the first and last frame, so that any frame could be the first. When crafting your own GIF, make looping a priority – it causes less distraction to the viewer and adds mesmerising, visual interest. Mock also suggests adding an extra frame: "Let the pause last just a bit longer,” she says. “The space between two actions can imply a lot."
This GIF was made for PC World to accompany an article about the app Evernote (Image credit: Rebecca Mock)
Basic techniques
The basics of movement can be expanded and built into complex animations. As you begin creating your image in Photoshop CC, be sure to keep it organised. Work in layers and animate each piece separately. That way, if you've got to change one element later, it's easy to isolate it without having to undo the rest of your hard work.
Positioning can be done manually or by setting start and end points and letting Photoshop do the work – it all depends on what kind of movement you want your GIF to have. Using your cursor and dragging the object frame by frame will produce an irregular path. Tweening – generating intermediate frames between two images – will give it a steady movement.
Image 1 of 7
There are two styles of animation panels available in Photoshop: timeline and frames.
01. Timelines and frames
Select which frame to tween and the number of frames you want to add.
02. Select a frame
Start the flicker effect by creating a straight line with a rough edge.
03. Start the effect
Copy and paste the rough edge at the top of your original line.
04. Copy and paste
Create a layer mask to obscure part of the line. When animated, it will resemble a flicker.
05. Layer mask
Hold down the Shift key to rotate a shape in 15 degree increments.
06. Rotate the shape
The Save for Web panel allows you to customise your saved colours. By unclicking a hue, you can remove it from your palette.
07. Save
Mock likes to use the flicker/fading effect for steam rising and flames. To create it, draw a straight line using a rough brush. Add a Layer Mask (such as a flame) so that part of it is obscured. Then, make a clean loop using a pattern-making method – cut your line in half and move its rough bottom edge to the top of its line, filling in the middle and overlapping the Layer Mask. Use the Tween command to make sure the line moves vertically at a consistent speed. At this point, the loops should be seamless.
The spinning and rotating motion is created with tiny, incremental turns of an object. Make an irregularly-shaped circle and move it in 16 to 24 steps until you have a full turn; hold down the Shift key to rotate it in 15-degree increments.
Creation Can Change The World was made for Sony Digital Entertainment. (Image credit: Rebecca Mock)
Exporting your work
Exporting your GIF may be the final step, but it's something you should be thinking about throughout your process. The more pixels that move, the larger the file size will be, and ideally, you want a GIF that is under 1MB. GIF files are limited to using 256 colours, and things like heavy textures and gradients don't compress well – you're better off with flat colours and sharp edges, which will keep files manageable and easy to upload on the web.
