Animated GIF Creation in Photoshop Tutorial

graphicxtras > Adobe Photoshop tutorials > how to tutorials

By Andrew Buckle, Updated : 2021

Please check out our youtube channel for 1000s of great graphics related video tutorials / online classes

How to make a quick animated GIF in Photoshop using the frame timeline feature and saving your design as a GIF format file for use on web pages etc

1. Display timeline

Go to the window menu and timeline and then click the frame timeline in the center of the timeline panel (you may have video timeline available but with the M1 mac this is not currently available)

 

2. Start shape

As with anything to do with Photoshop, there are 100s of possible ways to do this. I am going to animate a shape layer. Start with an empty document, background is not going to be used. Create the shape layer via the ellipse tool or custom shape tool etc and use as shape layer and set the fill for the design to be animated for the GIF. You should now have one single layer and the background (which can be deleted if you wish as you can also delete it as a frame)

3. Duplicate the layer

Go to the layer menu and duplicate layer (hold down the alt / option key if you don't want the dialog to appear). Repeat this multiple times to create a lot of copies of the shape.

 

Now you can see multiple copies of the same shape

 

4. Change layer visibility

Select all the layers in the panel and then go to the opacity setting and set to 20% etc so you can see through all the layers (set it back later) - it makes it easier to see the animated layers, difficult if they are blocked or hidden.

 

To make it easier to work, start from the bottom layer to the top, so deselect all the layers above the bottom two. Leave the bottom shape in place and select the above shape layer and move it or re-size it or change the gradient etc.

5. Select the layers

Go to the next layer above and set that to visible again and add your shift or rotation or scale etc and then repeat this for all the layers above in turn.

6. Change opacity

Return the opacity for all the layers back to 100% again

 

7. Make frames from layers

Select all the layers in the layers panel for the animated GIF and set the opacity back to 100%. Go to the timeline panel and right side menu and make frames from layers. If you have an extra frame (the background) the frame then select that frame and right side menu and delete frame command.

 

8. Frames and change display time

Select all the frames or at a frame at a time, and go to the time entry and set it to 1.0 second etc. You can check out your video by clicking the play button on the timeline along the bottom

 

9. Export the animated GIF

Go to the file menu and export and save for web and set the export to GIF and go to the bottom and set the looping (forever etc) and click save