Open/Close Navigation

How to Make a GIF in Photoshop

Sure, spending hours looking at hilarious GIFs on the internet can be a valuable way to spend your morning. Better yet, you can choose to spend your time including an animated GIF into your latest design. It’s an awesome way to add some flair that will encourage users to interact with your site. Plus, using a GIF often conveys more emotion and helps give your site the flow it needs.

In this tutorial, we want to show you how to make a GIF in Photoshop. It’s surprisingly easy – you’ll be able to add a GIF to your web designs in no time. Leave us a note in the comment with a link to your finished products!

Here’s a rundown of the steps:

1. Photoshop can create animated GIFs by using layers – add layers by clicking the “note” shaped button on the bottom right side of Photoshop 

1

2. These layers can be turned on/off and these various layers will create the various frames for our animation

2

3. Create new layer by pasting in image you are wanting to animate. In this example, it is a blue square that we are going to make look like it is rotating.

4. Turn Timeline Window on – Window – Timeline – You’ll want to have it set to Create Frame Animation – and click the Create Frame Animation button

34

5. Paste another square and create another layer – Highlight over layer you want to edit and Command + t on Mac to bring up the Transform option to Rotate the square however much you’d like

5

6. Duplicate that layer you just rotated to rotate the square even more – repeat as many times you’d like

6

7. For the first frame of your GIF you only want the first Layer to appear. So, you’ll need to turn off the other Layers so that only Layer 1 will show and will be frame number 1

7

8. Click new frame button and go back over to your Layers pallette and turn off Layer 1 and turn ON Layer

8

9. Repeat this process with the Layers you want

10. The drop-down menu under each frame in the Timeline Window will determine the length of time/delay between the frames. For this example, we selected .2 seconds

9

11. Before playing back the GIF, be sure to change the setting from Once to Forever in your Timeline Window so that the GIF will loop continuously, or select another option that better suits your GIF.

10

12. Use the controls in the Timeline Window to play back your GIF.

11

13. To save your GIF, go to File > Save for Web. Change the File type to GIF

12

You can browse through some already created GIFs & even a few sites that help you make your own:

Featured Image Credit: Chris Piascik

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.