Gif-Tastic

Over the past couple of years quite a few people have asked me how to make an animated gif, as I LOVE a good old animated gif, and make them loads to document my creative work.

Here I will lead you through making an animated gif from photos with photoshop, but you can use the same method to animate any kind of image, and also use free online tools like Gimp instead of photoshop. I use CS4 here, but it is practically the same as earlier/later photoshop versions.

It should take about 10mins or less to make a short animation once you get the hang of it.

"Why not use an app?" I hear you cry!

I've tried a few auto gif making apps, and they are all very basic -and you don't have the control you do if you use photoshop or similar.

Name and order the sequence of photos you want to animate, and place in a folder. (staying organized from the start helps you make a gif in minutes!)

i.e.

gifdemo1

gifdemo2

gifdemo3

gifdemo4

Open Photoshop, and import files as layers to one image, go to: file ---> scripts ---> load files into stack.

Click browse and select the images you organized in step 1.

Be sure to check “attempt to automatically align source images”. This will align all your images to the best fit, and save you a lot of time (I used to line up all the image by eye and it took AAAAAGES!). When you've checked the box, hit OK, and images will open as multiple layers in one image.

Now to make the animation (yipee!). First get the animation window up: window ---> animation.

The animation window will open somewhere on your screen, this is where you will create the animated gif.

Note: sometimes when you open the animation window it may not open with frames automatically, and it will look like the image below. If this is the case, choose “convert to frame animation” in right bottom corner.

Before you start making the animation, it is best to set up the time delay on the 1st frame (as this will duplicate for any frames you add, and it is a pain to change each one individually). Click the arrow for the time delay menu, this will be how long between each frame. I recommend 0.1 or 0.2 for speedy gifs, but you can experiment with this.

Each photo in your gif will be a frame. You can use as many frames as you like, but remember the more you choose the bigger the file will be (and slower to load).

The animation window will open with 1 frame. To create more frames, click the duplicate frame box to add the desired number of frames (in this case 4). To create the animation add your layer sequence to the 4 frames. Make sure that the layer is visible on the frame by clicking (or de-clicking) the eye icon. Getting this right it the trickiest part.

i.e.

1st frame = top layer is visible

2nd frame = 2nd layer is visible

3rd frame = 3rd layer is visible

4th frame = bottom layer is visible

Select the looping options to determine how many cycles you want your gif to run through (I usually choose forever which means it will be on a continuous loop).

You’ll probably need to crop the image so that there is no dead space around the edges, where the layers do not align. Sometimes I use the patch or clone tool to create a “fake” border if one of my layers is too small -this is a good trick if you don’t want to loose the edges of all of your layers.

Now you’ve made the animation, and need to save as a gif file. Go to file --> Save for web and devices.

Use the same preset options as the image. If you have a large image, adjust image size (If you are embedding in a blog or Flickr, you will need to add the media in it’s original size, else it does not function properly. So choose a good width for viewing. I usually go for a width of 600 to 700 px). Now hit save. Congratulations -you’ve made a gif!