This tutorial will cover the basic steps involved in making several images transition from one to another with Adobe Photoshop (Ps) and outputting as an animated .gif. My result is displayed at the end of the tutorial.

I am using Ps CS3 on an Apple Mac, but the same applies to Windows users. With Ps now open, go to the ‘File’ menu and choose ‘New’.

You will be presented with a number of options. Web images should be set in pixel dimensions, at 72 pixel/inch (ppi or dpi).

My blank canvas looks like this:

Next, go to ‘File’ and select ‘Place’. Choose an image you want in your slide show and position it how you want it on your canvas. Repeat until all your images have been placed onto your canvas.

It helps to keep track of things if you arrange them into the order you want them to appear.

Now, to enable the Animation pallet, select ‘Animation’ from the ‘Window’ menu.

Disable the layer visibility of all layers except the first slide. The Background doesn’t matter as this will not be visible anyway, so you can turn its visibility off, leave it on, or delete the layer at your discretion.

On the Animation pallet, duplicate the existing frame so that you have a number of frames equal to the number of images you want to appear in your slide show:

You will then have a set of frames that all look the same:

The next step is to change the layer visibility of each layer in accordance with which frame you want the to appear in the animation. For example, the second layer should be the only visible layer on the second frame.

You should end up with a set of frames which all look different:

Simply outputting this will create an animation that is very fast and not much use to anyone unless you want to give them a headache.

To combat this, you need to insert additional frames to pad out the animation. In the Animation pallet, select the icon that looks like a page curl – this will duplicate the currently selected frame. The more frames you add, the smoother the animation will be, but the bigger the file size will become.

Now, to produce a smooth transition between the images, select the first frame, hold shift, and click on the first frame of the next image to select all the frames in between and the chosen frames. You can now click the ‘Tween’ button at the bottom of the Animation pallet to create the smooth blends between images:

Repeat this between all your images.

To create the tween for the final image, I suggest you click and drag the first frame to the end of the line to create your end point – allowing the slide show to begin and end on the same image so it can loop.

You will now of created smooth transitions between your images. If you want to have a pause on each image before it switches, simply enter a frame delay on the appropriate frame. Choose the duration of the frame delay or choose ‘Other…’ to enter a custom time:

Once you have your completed frame set-up, you need to output your animated .gif in the most web-friendly way. Go to ‘File’ and select ‘Save for Web & Devices…’:

You will be presented with a number of options. Make sure you select GIF, as this is the only format which supports animation. If you select the ‘Optimized’ preview on the top left tab and play around with the settings, you can preview the animation before you save. Here are the settings I have used.

You should now have your animated image slide show with smooth transitions! Play around with the settings and tools to find out what suites your task best. My result is below:

BE AWARE that a .gif file can only hold 256 colours (in total, not per frame), so the more images with more colour you cram into one file, the stranger your images may appear. File sizes can also get rather large if you create a file with many frames and large pixel dimensions.

Thanks for reading – any problems, thanks, or suggestions, please point your cursor toward the comment box and start typing!

-Doug

Share/Save