How to… Make a GIF

go back
Web Design, Branding, Video & Digital Marketing Sheffield - Thumbnail for How to… Make a GIF

A GIF (Graphics Interchange Format, to use the name it was born with) is a brief animation, usually no more than a few seconds long, which can bring to life a series of graphics or low-resolution photos. GIFs can be used in lots of ways to add interest and humour to blogs, emails, websites and online newsletters.

In this tutorial I’m going to show you step by step how to make a GIF using Adobe Photoshop. This tutorial assumes that you have a basic understanding of Adobe Photoshop, and that you already own a copy.


Firstly before you read any further, you need some images to work with, these can be photographs or graphics you’ve drawn up yourself, but here’s the complicated bit, each image needs to be slightly different to the one prior so when you make your GIF it has a motion rather than being static. So remember those little flick-books you made as a kid? That’s exactly what you need. So save your photos/graphics into an easily accessible folder on your computer and this tutorial will show you exactly how to use them.

Step One

Firstly, open Photoshop and click File – Scripts – Load Files into Stack…

A window will come up. Click “Browse”, and then choose your images.   Click ‘Ok’ and then ‘Ok’ again.

Step Two

All of your image frames will open up on the side of the screen like layers

Step Three

Next go on Window – Timeline

Step Four

Your timeline will then come up – ensure that it is set to ‘Create frame animation’.

Step Five

If you then click Select – All Layers, all of your layers will then be selected on the side.

Click ‘Create frame animation’

Step Six

At the side of the timeline, click the “burger menu” (three little lines) to open the next menu, then select ‘Make frames from layers’.

Step Seven

All of your layers will be opened up within your timeline, you can drag and drop them into the order that you would like your GIF to play as shown in the image.

Step Eight

You can then select how long you want each frame to appear for. I usually have mine at 0.5seconds but it’s completely up to you.

Step Nine

You then need to decide if you want your GIF to be on a continuous loop or if you want it to just do it a couple of times. I set mine to Forever but again it’s up to you.

Step Ten

Test your GIF and make sure that you like it and it runs smoothly.

Next you need to save it, so go to File – Export – Save for web (legacy)

Step Eleven

Ensure that your settings are set ‘GIF’ and the colour is set to 256 colours, and the dimensions are those that you want. Click Save.

Step Twelve

Name your GIF, ensure that it is set to Images only, and then click Save.

You now have a GIF!

We hope that this tutorial has helped you to create your very own GIF. Let us know how you got on.


Other News - Brand Attention


post by Chris
Client Portal.