Animated Gifs
An animated gif is a single image (.gif) file that contains multiple frames or views that can be used to create simple stop action animations. The most common use for animated gifs is in web banner advertising but there are many other uses that can add interesting effects to a website. Animated gifs use a Stop Action style timeframe. This means that each frame of the gif needs to be it's own separate image. As a result the file size for an animated gif can get fairly large very quickly. Be careful how much you use them, if used excessively animations will tend to cheapen the look of a website.
Examples
This is an example of the most common type of animated gif found on the web. It is a simple multi-frame advertisement. Notice that the ad loops continuously.
Following is an example of a more classy way to implement an animated gif to apply a tween to a button once it is rolled over. This animated gif plays only once and only when the button is rolled over. Once the user moves their mouse outside of the button the animation is swapped out for the original jpg image.
Step by Step in Photoshop
- start by creating a new document in photoshop at the size you want your final animated gif to be.
- create new layers in photoshop for each view you want your final gif to have
- go to window --> animation to bring up the timeline for your gif
- create a new frame using the new frame button.
- hide and show your layers on each frame by selecting the frame and then clicking the eye symbol next to each of your layers
- you can edit the time that a frame is visible under each frames main selection box.
- you can also edit weather your animation will repeat or just play once.
- use the time controls to preview how your gif will look.
- once you have your gif looking how you want it go to File--> Save for Web
- Your file type must be specified as gif
- hit save and specify a name and location for your animation.
- Remember to save the original photoshop document with all your layers so that you can change the gif later on if you need to.
- animated gifs are implemented on your website the same way as any other image.
A more detail tutorial can be found here : http://www.creativetechs.com/iq/build_animated_gifs_in_photoshop.html