Animated GIFs

From Knowledge Kitchen
Jump to navigation Jump to search

Animated GIFs

  • stands for Graphics Interchange Format
  • created by the internet company, Compuserve, in the mid-80's, before the Web had been invented
  • color-depth = 8 bits per pixel = 28 possible colors = 256 possible colors
  • when GIF was created, most computers could display 256 colors at most

The good

  • supports both still images and animated images
  • low color depth and a good compression algorithm mean small file size
  • small file size means fast download
  • fast download means good format for slow internet connections and slow mobile devices

The bad

  • 256 is a small number of colors by today's standards... today's computer displays can show millions of different colors
  • Although the web browsers don't support animated PNGs yet, they probably will in the future. PNGs allow for more colors.

The ugly

  • GIFs do not look good when used for photorealistic images, because of limited color-depth
  • GIFs depends upon what was originally patented compression technology. They are therefore are considered "free" (as in freedom). However, that patent expired in 2004, so anyone is free to use it today.

Why make animated GIFs?

  • they used to be the only way to add animation to your web page
  • they can be displayed by most email clients, whereas Flash and Javascript-based animation often cannot
  • they can be fun
  • they are considered trendy in design school circles

How to make an animated GIF


  • make a Photoshop document with a single layer representing each frame of the animation
  • open the Animation panel by going to Window -> Animation
  • click the 'Add new frame' button to create as many frames as you have layers
  • for each frame, make any visual changes to what is displayed using standard Photoshop tools and techniques
  • set the duration of each frame

Automatically creating frames from layers

  • Create a Photoshop document with multiple layers
  • In the Animation panel menu, click 'Make Frames From Layers'
  • This creates one frame for each layer, where only one layer is visible in each frame.
  • Customize each frame as manually above.

Adding a tween

A tween is an automatic transition between two frames. You can tween a layer's position, opacity, and effects.

  • with the Animation panel open, create a frame that represents the start of the tween
  • duplicate the first frame to create a second frame that represents the end of the tween
  • with the second frame selected, in the Animation panel menu, select Tween
  • in the settings, enter how many new frames you'd like to create as key frames between these two
    • more frames creates a smoother animation
    • the maximum number of frames per second depends upon the limitations of the software used to display the image

Reverse the order of frames

  • Select frames you want to reverse, and click 'Reverse Frames' in the Animation panel menu

Convert video to animated GIF

  • In Photoshop, select File -> Import -> Video Frames To Layers
  • Select your new animated GIF/QuickTime movie and configure how you want to import it in the Import Video To Layers dialog box.
  • That's it. You should now have all the frames on separate layers and as frames in the animation palette.

Save as GIF

Photoshop allows you to export files with compression using their Export As options.

  • File > Export > Save for Web (Legacy)...
    1. Select 'GIF 128 Dithered' from the Preset menu.
    2. Select 256 from the Colors menu.
    3. Select 'Forever' or another option from the Looping Options menu
    4. Click Preview to make sure the GIF looks good
    5. Click Save... select a destination for your animated GIF file

Relevant links


Animated GIFs as a design trend

Tutorials in Photoshop

Tutorials in Photoshop Elements


What links here