How to Make an Animated Gif

Animated gifs have been around for a long time, most of them silly and tacky. But lately we’ve all seen a lot of really pretty ones (like this and this by super talented photographer Jamie Beck on Cup of Jo, this on Design Sponge, etc). Perhaps like some of you, I’ve been totally entranced by them (have you seen this collection of Jamie’s, now termed cinemagraphs?). A beautiful way to add life and yet preserve the stillness of a photograph.
So I enlisted the help of my husband, Jared, who’s an expert on all things tech to teach me how to make one. Would you like to learn how in photoshop?

 First you’ll need a sequence of pictures. Each of the photos should be in a separate layer. The easy way to do this is  File – Scripts-Load Files into Stack. 
A box will pop up where you can select the sequence of photos you want to add. They will load into separate layers as shown above, which is what you want.

Select Windows-Animation. You’ll see your first image selected on the bottom left in the animation box that pops up. If your animation box doesn’t look like the one above, be sure the “Animation (frames)” is selected as opposed to the timeline. You can change that by clicking the rectangular box on the bottom right inside the animation box.

Click on the small tab at the bottom of the animation box that says ‘duplicate this layer’. Now you’ll add the second photo you want in your animation by hiding the first image/layer. The second image should be in view. Continue adding boxes and selecting each consecutive photo, one at at time, until they’re all in order in the animation screen at the bottom.

Shift-click all the boxes so they’re all selected in the animation box. 
Click on the time selector at the bottom left. Here you can change how much time you want in between each photo. I chose .025 seconds.

Click on the repetition selector line under that. Here you can choose how many times you want it to cycle through. I kept it at ‘forever’.
Click the ‘play’ button to the right of the forever box to preview the animation. You can delete frames after viewing the preview by clicking on the trash can icon next to the ‘duplicate frame’ button.

Adjust the size (my width was 450px) before saving it as a gif

Make sure the dither is up 100% and the colors are at their highest, 256, before saving it ‘for web and devices’. That will avoid the distorted colors that gifs are known for (the quality will still not be as high as a normal jpg or png image).

Any other tips or suggestions from experts out there? Anyone know how to make one in another program?


Comments are closed.