Photoshop
Elements 3 Tutorial
Animation
You can easily create an animated .gif in
Elements and make it as plain or fancy as you
want. The more complex and animated you make
your animated .gifs will of course add bytes to
the finished graphic. Keep it simple to keep the
finished file size down.
First, open Elements 3 and draw a simple shape. This one is on a 100 x 50 pixel stage and is an
arrow chosen from the Custom Shape Tool.

Duplicate the layer and simplify both layers by
right clicking on each one in the layers palette
and selecting 'Simplify Layer. Select the top
layer in the layers palette and using the magic
wand tool, click on the arrow. This will put
'marching ants' around it to tell you that it is
the current selection.
Next, change the foreground color to a lighter
shade and using the paint bucket tool, flood
fill the arrow with the lighter color.

Elements will animate as many visible layers as you
create if you save it as an animated .gif. Turn
off visibility of layers that you don't want to
be included in the animation before saving.
Select 'File | Save for Web' to bring up the
Save for Web properties box. Select GIF as the
format and make sure the 'animate' box is
checked under the 'transparency' box. You can
set the graphic to loop and change the timing of
the frame delay. The default is 0.2. You can
also toggle frame by frame or preview your
animated .gif in your browser.
At the bottom of the properties box you can
select which browser to preview the animation
in. Click on the drop down to select or add your
browser if it is not on the default list.
When you preview the graphic in your browser
before you save it, you can see how it will look
on the web and the properties are also listed of
the graphic, including the byte size. Elements
also gives you the code for cutting and pasting
the graphic in HTML. Just copy all the code
between the 'Image Ready Slices' comments to add
your new animated .gif to your page.
|