Comm Tech - How to Make an Animated GIF in Photoshop

What is a GIF?:

Animations are not only used in movies but are used by web page designers. Graphic Interchange Format files or GIFs are animations on web pages that move. They are usually used in banners to grab the viewer's attention but can also be more elaborate scenes with multiple figures.

Creating a GIF animation involves the use of layers in gif animation software. Animated GIFs are a set of images that are presented in a specified order. The frames of an animated GIF are individual images that are displayed for a specific length of time.

You can control the speed of the animation by changing the frame delay for each image to be displayed.

An animated GIF can be made to loop endlessly or be stopped after a set number of repetitions.

Using Layers:

Using separate layers in Adobe Photoshop results in a large file size but has many benefits.

Putting individual images on their own layer lets us adjust a particular part of an image without permanently changing the whole image.

• In this animated eye GIF there are 4 separate layers when the file is opened in Photoshop
• One layer can be selected at a time and modified (i.e. changing inside colour)

Copy a layer by...

clicking and dragging it down to the Create new layer icon.

- or-

Create a new blank layer by...

clicking on the Create a new layer icon.

Lastly, holding down the shift key on the keyboard allows you to select more than one layer.

How to Make an Animated GIF (Part 1):

1) Save and Open the file "Blinking_Eye_Practice.PSD" in Photoshop

5) Go to WINDOW > TIMELINE to open the Timeline panel.

6) Click the arrow on the button in the middle of the panel and select Create Frame Animation. Then click the button to create a new frame animation.

• this will begin making a new animation from the 4 layers you have of the "blinking eye"

7) We now need to convert our layers in animation frames. To do this, click the menu icon from the upper right corner of the Timeline panel. Click Make Frames From Layers.

• This will convert all the layers in the Layers panel into individual frames in your animation.

8) The order of your separate layer files in the Layers Panel is very important.

• See how in the Timeline frames #1, 2, 3, 4 follow the order of the layers in the Layers panel (from bottom layer "Open Eye" to top layer "Closed Eye" in the layers stack)

9) Click the Play button from the bottom of the Timeline panel (or press the Spacebar on your keyboard) to preview the animation.

• Note - if your animation is playing in reverse, click the Timeline menu icon again and select Reverse Frames to fix the order

10) Set the animation to loop. To do this, click the repeat menu from the bottom of the Timeline panel and select Forever.

• This will create a looping animation

11) Click the Play button again to preview the animation loop.

How to Export the File as an Animation GIF (Part 2):

1) Now we are ready to export the file as an animation GIF.

2) Go to FILE > EXPORT > SAVE FOR WEB (Legacy)...

• Select GIF 128 Dithered from the Preset Menu
• Select 256 from the Colours menu

If you are using the GIF only or want to limit the file size of the animation, chance Width and Height fields in the Image Size Options.

3) Select Forever from the Looping Options menu

Click the Preview...button in the lower left corner of the Export window to preview your GIF in a web browser.

4) Click Save... and select a destination for your animated GIF file

Here's s screen shot from a different example of the export window

Congrats, you have just made an animated GIF!