Animating in Photoshop – Your Quick Guide

Animating in Photoshop – Your Quick Guide

By Nick Cullen

Here is a quick introduction into you how to create an animated banner image in Adobe Photoshop. This is very useful for re-marketing banner ads, as you can present more information than using a single image. This technique has proved effective when promoting mycleveragency’s recent campaigns for Nikon Lenswear & Visit England.

In this guide I will take you though how the banner above was created.

Step 1:

To make it easier for yourself organise each step of your animation in stages, using folders on your Layers tab.

Then go to Windows > Timeline.

Step 1

Step 2:

A timeline will appear at the bottom of your artwork doc, click the duplicate icon (circled) to create the next step.

Step-2

Step-2b

Step 3:

Repeat this for each step making sure only the background and the relevant layer is visible.

Step 3

Step 4:

You can choose the rate of each frame by clicking at the bottom of each section. Tip: You can hold down the Shift-key to select a range of frames.

Step 4

Step 5:

Once you are happy with your layout click File > Save for Web then save as a gif.

Step 5

Step 6:

Test the result out in your browser to see how it will be viewed.

Step 6

Over to you

Let us know how you got on & be sure to share any tips and shortcuts for animating in photoshop

This post was written by Nick Cullen

Nick's responsible for the design of artwork for our Social Media clients, working along side our in house campaign and technical managers.