By Dianah McDonald
Last month I talked about time-lapse photography in "Tips for using still cameras to take time-lapse pictures". The example I used was in the form of an animated GIF.
The same effect could be achieved using Flash, but for ease of creation, size, and compatibility I prefer the animated GIF. There are lots of programs available to turn your photos into GIFs. The general idea is the same, but I'll be demonstrating the specifics in Adobe Photoshop CS3.
Why animated GIFs? Why animated anything?
Time-lapse is a good example of when an animated GIF is a good option. The technology allows anyone with a Web browser to view your time-lapse. Beyond time-lapse, probably the two most popular uses of animated GIFs today are ads and icons.
Animated GIFs can attract attention and allow you to show more information in a limited space. Many people create animated icons to demonstrate their love for a television show, a band, or for comedic effect. If you've ever visited a blogger site like LiveJournal, you know exactly what I mean. Rather than using pictures of themselves, bloggers use pictures of their interests to represent them. They even have contests for who can come up with the best icons for certain themes.
For this example, my friends in the Muckrakers said I could use images off their MySpace page. They're a great band, but be aware that some of their songs might not be appropriate for sensitive readers.
Animating with Photoshop
Adobe Photoshop CS3 makes creating animated GIFs easy. If there is a drawback to creating animated GIFs in Photoshop, it's the options. There are a dozen ways to do just about anything in Photoshop and animation is no different.
For this beginner's example, let's make a really simple banner by just turning the various layers invisible at particular timings to make the animation.
To get started, open Photoshop. If you don't see the animation palette, select Animation from the Window menu. The animation palette will appear at the bottom of your screen. Your screen should look similar to Figure A.
FIGURE A
Your screen with the animation palette opened should look like this. (click for larger image)
Now what dimensions do you want your GIF to have? You can start with a blank canvas or with a particular photo. For this example, let's start with a blank canvas. Select New from the File menu and create a new image. I usually work in pixels or inches, but you can use any of the units of measure available. Let's make a rectangle like you might see as a banner on a Web site. Something like 7" x 1.5" is a good size for our example. If you were to make a banner for Connected Photographer, you'd create an image that was either 468x60 or 728x90 pixels.
Managing the background layer
There's one thing you need to know when getting started: how to manage the background layer. If you create an image with a background color, Adobe Photoshop will create a default background layer. You will need to turn this layer into an ordinary layer.
Photoshop's help system will tell you a dozen different ways to do this. The easiest: right click on the background layer in the Layers palette and select Layer from Background. Photoshop will use "Layer 0" as the default name. Feel free to change it or any of the other defaults to better suit your project.
Each layer will become a new object to manipulate within your animation. With that in mind, if you are dealing with lots of layers the naming feature becomes invaluable.
Go ahead and add another layer just like you would in a traditional Photoshop image.
Learning about the animation palette
Now that you have two layers, let's take a closer look at the animation palette. Each layer will appear on the animation palette as its own line, as shown in Figure B.
FIGURE B
The animation palette looks much more interesting once a layer has been created. (click for larger image)
Along the top of the animation palette is the time and the project timeline. You can click and drag the ends of the timeline to increase or decrease the length of the project. The same is true of each layer. You can set when each layer appears and for how long.
Remember: you might have overlapping layers in the Layers palette. The Layers palette shows you the layers in space while the animation palette shows those layers in time.
Remember how I said Photoshop offers lots of options? Well here's a great option to make a basic animation like this really easy. Select the Convert to frame animation button at the bottom right of the animation palette as seen in Figure C.
FIGURE C
The Convert to frame animation button is in the lower right corner of the animation palette. (click for larger image)
In Figure D you can see how the animation palette has changed. Each frame in this window represents a change in the total image. What you see in the frame is what you will see for that time in the final animation.
FIGURE D
Each frame can be manipulated independently of all the other frames. (click for larger image)
Instead of dragging the timeline, you can select the time of each frame on its fly-out menu as seen in Figure E.
FIGURE E
The time delay menu allows you to pick one of the popular delays in seconds. You can also select Other to be your own Time Lord. (click for larger image)
Photoshop refers to this as the time delay. You can select one of the listing time lengths or choose Other and type in your own.
The banner I'm making for this example will advertising three of the Muckrakers albums. I want to show two pictures of the band, so I've decided to have six frames in the sequence.
Select the duplicate frame button on the Animation Window to do this. As you can see in Figure F, the duplicate frame button looks like the Create New Layer button in the layer palette.
FIGURE F
The Duplicates selected frames button is located at the bottom of the animation palette near the middle. (click for larger image)
Note how the timing you set on the first frame is copied as well. The timing can be changed on each frame just as you changed it on the first one. For this example I'm going to leave them each at two seconds.
Which layers do you show?
You've created your frames and added all the layers you want to see. Now you just have to tell each frame which layers to show.
To do this, first select a frame. In the Layers palette, select the eye icon to the left of each layer you do not want to see in that frame. It's just like when you work with a traditional image in Photoshop. If you see the eye icon, you see the layer. No eye, no see. Do this for each frame.
To preview your animation just select the first frame and press play! Like it? Want to see it repeated on an endless loop? Select Forever from the drop down menu below the first frame just like in Figure G.
FIGURE G
Show the animation once? Loop it forever? Heck, maybe you want to do something really out there like loop it for a set number of times and then stop. (click for larger image)
To save your animation as a GIF select File->Save for Web & Devices. Your screen should look similar to Figure H.
FIGURE H
The Save For Web & Devices screen can look a little intimidating. Just remember you can always undo anything you do. It isn't neurosurgery. You can always take a "do over". (click for larger image)
Make sure GIF is selected on the dropdown menu. You have another opportunity to change the size and looping actions of your animation on this screen. Finish by choosing Save and saving the animation as Images Only (*.gif).
You've done it! You can test your animation with your Web browser. Well done! Now you're ready to experiment with opacity, positioning, texture effects -- just have fun building on the basics!
Oh, and if you'd like to see how this animates, take a look at Figure I.
FIGURE I
Here's the final animation.