Add Liveliness to Your Web Pages

If you think Photoshop is only meant for retouching photographs, color
correction or image manipulation, then think again. One can even create small
animations for the Web by using Photoshop CS3 to make Web pages look more
colorful and accessible. Using CS3, one can create frame based animations by
modifying image layers to show movement. Normally, Web designers use specialized
software programs for creating an animated page and spend a lot of time to
figure out how their graphic would look on website. Using CS3, designers can
also preview how their file will look on Web, how large its size is and how much
time will it take to download. This will help them take quick decisions as to
how they want their artwork to appear on the Web. Here, in this article we'll
show you how to create an animation for a submarine going under sea.

Open image of a submarine in Photoshop, press Ctrl+A to select the image, and paste it onto a new layer. Keep the background layer visibility off	Use the 'Pen' tool to make a path for the submarine image. To save this path, select the 'Path' option from the Windows menu, double click on the 'Work Path' option and define it
Now, select the path that you defined in the previous step, and click on 'Make selection' option. In the window that pops up, define Feather radius as 0.5 pixels, and cut submarine	Save this image in a separate file, and the area from where the image is cut will be either white or transparent. Fill that area with sky and ocean
You can use the 'Brush' or 'Healing Brush' tool to fill that area with sky and ocean. Select and copy the new background, and paste it onto multiple layers	Select layer one, chose path 1 from the Path window, make a selection and paste submarine inside the selection using the 'Paste into' option present under the Edit menu
Go to layer 2, use 'Paste into' option and move the submarine image a bit using the arrow key, and merge the new layer with layer 2. Repeat this step for all layers	Under the Windows menu, select the 'Animation' option and add new frames. Select layer 1 as first frame, layer 2 as second frame and so on
Define interval time as 0.1 second and save your animation in Photoshop CS3 by using the 'Save for Web and devices' option present under the File menu. It'll optimize the animation file and save it as a GIF file. To see animation created, click on the 'Play' button present under the 'Animation' window