doug barned - design for print and web - blog

Blog

Basic Animated Gifs

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.

File-New 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’.

New image dialogueYou 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:

Blank image canvas

PlaceNext, 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.

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

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

Layer visibilityDisable 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:

Duplicate frame

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

Frames

Relavent layer visibilityThe 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:

Populated frames

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.

Frame paddingTo 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:

Tween

Switch the first frame to the lastRepeat 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.

Frame delayYou 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:

Duration of delay

Completed frame setOnce 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…’:

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.

Final stage

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:

imageslidesright

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

Tags: , ,

7 Responses to “Basic Animated Gifs”

  1. Creati gifuri animate | Sursa ta de tutoriale Says:

    [...] Dati click >aici< pentru a continua Adauga linkul pe blogul/siteul tau<a href="http://portalul.net/grafica-2d/photoshop/creati-gifuri-animate/&quot; >Creati gifuri animate</a> [...]

  2. Kung Says:

    Thanks. Very Good.

  3. Rach Says:

    This is a brilliant tutorial. Even for a novice like me.. thank you so much for your time sharing your knowledge..
    Rach

  4. Doug Says:

    No problem – glad it was useful!

    I’ve had a look at your site and you’ve got some nice stuff there. I work for a greeting card publisher but we don’t generally deal with hand made items, so it was nice to see the more creative side of things!

  5. Rach Says:

    awww thanks..
    rach

  6. anand bharan Says:

    thank you a lot for this effort…

  7. Colin Pal Says:

    Really, your post is extremely outstanding. I have to say that from now your weblog will turn out to be one of my absolute favorites. Keep it heading pal !

Leave a Reply