How to Make a GIF

Resource cover 04.png

GIF stands for graphic interchange format and is essentially a file that is animated by flicking between layers. I make mine in Photoshop with PNG files. It’s a great way to jazz up a graphic and essentially make it seem a lot cooler. It’s also great for displaying multiple pieces of work at once, or adding flashes to an event announcement.

First, you’re going to want to work out how many different layers you’ll need to make your animation work. I’ve found it’s best to work with less than 15 so that the file doesn’t get too big or complicated. Once you’ve made all layers, whether these are in Photoshop or Illustrator, I like to save them as PNG’s as these are more suited for the web, but JPEG files will work too.


Open Photoshop and have the timeline open by clicking on Windows in the top nav bar.

Go to Files > Scripts > Load Files into Stack

Click browse and select ALL the files you want included in the GIF. Click open and then the files should load in the layers area.

In the Timeline area, click Create Frame Animation.

Now select all the files in the layers section, click on the drop down menu in the Timeline area that is 4 horizontal lines in the top right corner, and select make frames from layers.

Arrange the files in the timeline to the correct order by clicking and dragging. Adjust the visibility time by clicking the arrow directly underneath each one and change Once to Forever to make the GIF animation loop.

You can add a fade tween between each frame by click on the multiple square icon on the bottom line of the Timeline window.

Press the play button to see what the GIF is like to make any adjustments.

To save, got to File > Save for web

Make sure the preset is GIF 128 dithered and that the Looping options are correct before you click save.

When you’re opening your GIF you’ll want to open it using your internet browser.


I hope this has helped you add a cool animation affect to your images and be sure to play around with it to make the most of the Timeline options.