Add Liveliness to Your Web Pages

Lively animated images add on to the visual appeal of Web content. You can use Photoshop for creating such images in a few easy steps

Friday, November 02, 2007

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

Page(s)   1