Bells & Whistles

The Origins of the GiF

In the beginning there was CompuServe. This commercial online service developed the GiF as a file format that compressed large color images down to manageable sizes which could be downloaded within an acceptable amount of time.

The GiF uses a color gamut of 256 bytes which now days does not render as well as the JPeG., although the GiF makes up for this by being able to store multiple images in a single file with control data. This allows for the production of basic animation.

  • GiFs can store low-color sprite data for simple on-line games.
  • GiFs make for good small animation and low-res film clips

Flash became the default motion graphic platform of choice in the past decade, but as Search Engine Optimization (SEO) concerns have become more established the use of Flash has seen a leveling of use. This is primarily due to the inability to tag graphic elements with search “hooks”. Flash also has performance issues with the “iTechnology” from Apple.

The old reliable animated GiF (ani-gif) may just be on its second world wide tour. The use of ani-gifs were put aside when Flash muscled in, but things are returning to the basics. Ani-Gifs are generally smaller, easy to load and can be read by any browser compared to the Flash graphic. Best of all ani-gifs can be seen and utilized by the search bots.

So what is an ani-gifs …?

This is an animated .GIF

Each ani-gif is composed of at least (2) events.

An event is defined by a graphical change that includes but is not limited to:

  • Text
    1. A single line of text could change over time.
    2. A series of words might be added to make a complete sentence.
    3. A series of sentences might be added to make a complete statement.
  • Color
    1. Colored backgrounds may change to lend attraction.
    2. A specific element may change in color to enhance appearance.
    3. The main imagery may change from greyscale to color to give attitude.
  • Effect
    1. Glowing outlines to create excitement.
    2. Pulsing movement to emulate desire.
    3. A flashing light to cause seizures in the user.
  • Size
    1. A single element might grow in size to represent growth.
    2. Elements might increase in size so as to appear to be moving at the user.
    3. Elements may fluctuate in size to create a popping action.
  • Position
    1. To trick the eye into seeing linear movement.
  • Stacking
    1. Film stills shown in succession to create low-res clips

These changes can occur in a timed sequence ranging from instantly to 1 second to an absurdly long time…

Great, so how is an ani-gif created …?

For purposes in this class we will focus on the Frame Animation Process.

Using the TimeLine feature in Photoshop we can create some fun eye candy and not so fun call-to-action banners with simple layer changes.

(-a08) Creating an Animated .GIF

mccann-des114-a09Create a photoshop document to be animated that is subject to the following:

  1. Complete the statement “This [current quarter] I…“.
  2. The animation needs to have at least four (4) frames or events.
  3. Create a short narrative of your current quarter experience.
  4. The PSD has properly named layers and is organized using Group folders.
  5. Use the Frame method as demonstrated in class and found in the instructions below.
  • Set up a document using images of your choice.
  • Using your tool(s) of choice create at least (4) different events. See (fig. above)
    • Each event should be on a separate layer.
    • Each event should clearly show a change.
      • To include:
        1. Content
        2. Graphic(s)
  • Each event should demonstrate a change in timing as necessary.
  • Organize your layers with logical names and groups as needed.

a09 03 i01 fall imagesCollect at least (4) images which express an idea about the current quarter (see above for examples).

  • They can be photos or other graphic types.
  • Use your own or royalty-free images acquired from an Advanced Google Search.

Set Up a PhotoShop Document

web114-a08 new document

From the top menu File>New Document

  • Web  700W x 100H 72 Res – Color Mode: RGB

Construct a PSD that uses proper Layer organization to build an animation.

des114-a09 duplicate group

Create a (1) graphic layer then add some (2) text. Select both layers click on the (3) New Group icon at the bottom of the Layer panel. This will make a group folder of the two layers.

des114-a09 duplicate group

Create a (1) graphic layer then add some (2) text. Select both layers and drag down to the (3New Group icon at the bottom of the Layer panel. This will make a  (4) group folder of the two layers: name it (4) slide 1. Drag the newly named (4)  group down to the (5New Layer icon at the bottom of the Layer panel. This will make another (6) group folder: name it (6) slide 2.

des114-a09 edit group

Delete the copied graphic layer and add a new (1) graphic layer then edit the (2) text.

des114-a09 four slides

(1) Repeat duplicating group folders, changing graphic layers and editing text until you have at least (2) four slide groups.

des114-a09 timeline panel

Use the Animation panel to construct an Animated GIF.

You can also select the graphic below to view the Animated GIF Tutorial on how to animate GIFs …

des114-a09 build GIF sequence

  • Save as… PSD
  • Export > Save for Web… GIF