There was a time not too long ago when web graphics needed to be started in Photoshop and then run through GoLive for slicing, coding and animating. That has all changed now. Just about any image manipulation you need to do for the web can be done entirely in Photoshop.
In the case of GIF animations, Photoshop makes it super easy to create them from layers. For those of you familiar with GoLive and how it operated, this will be like a stroll down Memory Lane.
Start out with a Photoshop file that has layers. Any GIF animation you do will need to begin this way. In this case I have what will be a web banner that will need to move through three different frames, each two seconds long.
As you can see in the above image, I have set all of my layers to visible. The text layers will be the ones which will change during the animation while the background remains constant.
Go to Window>Animation to bring up a timeline. Each layer is now set in it’s own place on the timeline. The timeline offers a bit more control than the simple frameset that once was offered. In fact, this particular timeline is fairly intuitive. The upper left tells you where you are timewise in the animation as well as how many frames per second your animation will run. I always leave mine set at the default 30 fps which is fast enough for some smooth transitions.
Down the left side are all the layers I have to work with. Each one has a dropdown arrow that allows you to adjust different effects. Under that you have your typical play, rewind, fast forward, etc. controls.
The timeline itself has a little blue tab at the top that sticks up. This tab tells you where in the animation you are. When the play button below is hit, you can watch your animation, after it has been altered.
There are also two flat sliders on the line below this, at the beginning and end. They tell the animation where to start and where to stop.
Simply adjust the ends of the layers by dragging them to certain spots on the timeline. In my case I’m actually going to drag them so they show for two seconds, then the next one will begin. To do this you just drag the beginning and end points of the layer you are working on to where you want them on the timeline. I’m staggering them so that as soon as one layer ends the next will begin.
In the picture above I have already adjusted the sliders that tell the animation where to begin and end.
From here all you need to do is go to File>Save for Web and Devices and set it to GIF. When you do you’ll see an Animation section at the bottom that tells you how many frames it is. Hit Save, name it and you’re done!
You can add fades and a few more complicated effects in as well by clicking the Convert to Frame Animation button on the bottom right of the timeline. I think you’ll find that if you play around with the settings and such a little, you will quickly learn these on your own.