Advertisment

Add Liveliness to Your Web Pages

author-image
PCQ Bureau
New Update

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.

Direct Hit!
Applies To:

Desktop users



Price: Free


USP: Survive virus attacks, do easy
repair and recovery of files and utilities



Primary Link:
http://www.ubcd4win.com/



Google Keyword:
Media convertor






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
Advertisment