Creating an animated GIF. Copyright Giulio Porta, all rights reserved.

For this project you'll be expected to create a short animation, what is know as an animated GIF (GIF is a format that support animation). There are others formats as well, formats designed for the PC such as AVI, MPEG, SWF, MOV. I will spare you a lengthy dissertation on the subject of animation, it's a gigantic subject and it cannot be oversimplified, but for the time being that's exactly what we are going to do. We are going to look at animation as a series of images played in a particular sequence. The sequence can be a series of layers which you have created for that purpose. Photoshop 11 (CS4) has an animation timeline where a sequence of layers can be compiled and saved as an animation.

The concept. The most important component of this animation is the idea or message it represent. If I can make a suggestion: a timed event, a cyclical event, such as that of the arms of a clock rotating and returning at their start point, anything moving continuously without beginning and end, are general ideas. But the specific of this idea must be your own. You should also use your self portrait as the base or background for this animation.

 

The practical applications for this type of animation could be:                          

  • Web page design
  • Interactive CD-ROM
  • A presentation
In CS 4 the animation timeline is now in Photoshop, in previous versions it was available through an parallel software by the name of Image Ready. I still support Image Ready in these tutorials. But if you have CS 4 go to Window > Animation and load the animation panel
In the animation panel make sure that you are in the Frame mode not in the Timeline mode.
At the very bottom right of the panel, you'll be able to switch between Frames and Timeline, but for now stick to the Frame mode.

The idea is simple: create a sequence of layers suitable for conveying the message that your animation is intended to convey.

In my case I'm using 4 numbers as an example.

All layer, one by one, are loaded into the the panel. Here's how:
  • Click on the icon on the left of the Trashcan icon to create a copy of the current layer.
  • Replace the layer that you actually want in the sequence by making that  layer visible while all the others are invisible.
  • Click on the VTR like arrow, pointing to the right, to play the sequence.
  • The process is identical regardless if you are using CS 4 or Adobe Image Ready.

The default play speed is 0 sec, to change that, select all frames by selecting the fist one, and by holding gown the shift key select the last one. One all frames are selected, click on the 0 sec line and select a different speed. I selected .5 sec for this one.

The use of photography is optional, you can create a time based event inside the silhouette of your torso. Keep in mind that all layers or any layer can be compiled into an animation. Therefore the issue is why rather than how.

You'll master how if you do this a few times, but what matters is the idea.

 

For this particular animation I have chosen to move an image of clouds inside a portion of a person's face. This is done by pasting a relatively larger image into a relatively smaller selection. The lager image will be moved along equal increments, for each increment a new corresponding layer will be created, this set of layers will be compiled into an animation in Adobe Image Ready or CS 4.

What do the clouds mean? They could simulate something cool like shaving cream, or mindlessness, a dream state, the kind of stuff which could be used as a base for a TV commercial, or a self introduction.

1) Begin by activating the Magic Wand tool. This tool will select areas of similar color just by clicking on them.

2) Make sure that you are in the Ad to Selection, so you can keep adding to the first selection, and not New Selection mode. The other modes are: Subtract to selection, and Intersect Selection.

3) The Tolerance setting, currently set at 32, will determine the range of contiguous colors your selection will encompass. The lower the number the fewer the colors that will be included in a selection. You can lower or raise that number.

Click on the face to select part of it, or as much as you want, depending how much you want to show of yourself. Switch to Ad to Selection, to keep adding on to the selection.

Please look at the illustration here to right to see where arrow # 2 is pointing, the Ad to Selection icon is the second from the left in the group of 4.

 

From the R: drive, load the POND & SKY image from the Images folder. Place the two side by side.

If you are taking the Web version of this course you can use any suitable image for this project.

With the rectangular marquee select most of the sky, but not the trees or the water.

Copy that selection Edit > Copy

 The Paste Into command

The Paste into command will paste a Copied selection into another selected area. That pasted selection will appear behind the selection that you will  pasted into.

Once you have pasted the sky into the selected portion of the face, look at the Layers palette, you'll see that a new layer has been added to the stack of layers, on top of the Background Layer.

In your Layer palette you should have a set of layer  identical to what you see here to the right:
  1. At the bottom of the stack of Layers lays the Background Layer, the original photograph.
  2. Above that you should see two icons/thumb nails: Sky image, and a black and white representation of the area of the face that has been selected to pasted into. The black area is acting as a mask, covering up everything else that is not showing through the white areas.

 

 

 

 

Duplicating layers

Duplicate that layer, and move with the Move tool or the Left or Right arrow keys on the keyboard, the pasted image of the clouds slightly from right to left, or in the opposite direction, but in one direction only. Your goal is to simulate the clouds moving within the portion of the face they were pasted into.

Create another layer, and with the sky layer selected move the sky image of a small amount again,  As you will notice the sky image will move inside the selected portion of the face, as well as in the icon/thumb nails in the Layer palette.

 

 

Repeat these operations several times, until you'll reach the end of the picture. 

 

Now that you have made this stack of Layers, you'll be able to treated them as cells or frames of an animation. But in order to do so you will need another program, as Photoshop does not support animation, unless you have CS 4. The "other" program is Image Ready, which is usually installed with Photoshop v 5.5 or higher.

Once the desired sequence of Layer has been created, it can be played back in Image Ready. And saved in the GIF format.

Begin by saving the Photoshop document as a .PSD, so it can be open directly into Adobe Image Ready where these Layers will be compiled as saved as an animated GIF.

Alternatives

Each layer can be saved one at the time as a sequence of numbered files such as 001sky.JPG  002sky.JPG and so on and placed into a dedicated folder. There are several other programs that can compile sequential images saved in formats such as .JPG .BMP .TGA, into formats designed for animation.

 

 

 

What's Image Ready? It's a program designed to create graphics, animation and interactive material for the web. But most likely you don't have an "older" version of Photoshop, therefore read on.

In the newer versions of CS Image Ready no longer exists, its features have been integrated in Photoshop. But the process of loading frames (Layers) in the Timeline (animation panel) is the same.

If you are working with the latest versions of Photoshop such as CS 3 and above, go to the top menu to Windows and select TIMELINE. The name has change from Animation to Timeline, but the its basic features are the same.

After the TIMELINE panel pops up click on the down arrow next to the button in its center and select Create Frame Animation. Pleaase refer to the the information concening the Timeline as they can be viewed in the previous project the "blinking sign".

Starting Image Ready.

 Image Ready is an application designed to create optimize graphics for the Internet, browser based presentations, and interactive CDs.  The Icon at the bottom of the Toolbox will let you interface Photoshop with its corresponding version of Image Ready. Image Ready can also be launched as a stand alone.

 

In Image Ready you must have these 3 windows open:

  • Show Optimized
  • Show Animation
  • Show Layers.

if not go to the top menu to > Windows and select them by name.

In the new CS versions you must have open the following panel windows:

  • Timeline
  • Layers

 

Launching Image Ready by clicking on its icon at the bottom of the toolbox

In the Animation panel individual Layers are loaded on by one, from the Layers palette by making them visible in a desired sequence, the eye icon, in the Layer palette, controls the visibility of each layer.

 

 

  1. In the Animation panel individual Layers are loaded one by one by using the roll out button, the black arrow on the top right side of the animation panel, scroll up to New Frame.
  2. this New Frame will be the same as the default frame. It is up to you to select the next frame from the Layers panel. I mage ready will not selected for you.
  3. To avoid confusion uncheck all the eye icons, except the Background, and check the eye of the first layer you want to have appearing in the sequence. Only the Background an one frame at the time should be visible for each frame.
  4. Repeat this operation up to the last frame.

 

 

 

 

 

When all the desired Layers (frames) are loaded in the animation panel, click on the VTR like button, at the bottom of the Animation panel, to play the animation.

 

 

The animation panel with the sequence of Layers acting as frames.

Layer Palette

Optimized. Go to the Optimize window panel where the preview image is, and click on the 2 Up tab and then click on Optimize to see the file size of the image change dramatically.

Optimization will invariably involve a loss in colors, but a gain in the smallness of the file's size. This is exactly what you need for making your image viable for the Internet.

Large animated GIFs do not play well.

 

Saving your work

In CS 4 go to File > Save for Web and Devices: format GIF, JPG doesn't support animation. Save your work in your Presentation folder.

In the latest CS versions go to Save for Web.

If you own Image Ready:

Save your work in your Presentation folder as a Image Only in the GIF format.

Once inserted in a page, the animated GIF will play endlessly in a browser.