:idea: :idea: Easy tutorial on how to make an Animation
You'll need:

Adobe Photoshop Elements

Creativity

Imagination
This is a simple tutorial on how to make an animation.

I will be using My adobe Photoshop Elements. No need to use Adobe Imageready.
First, Open your Adobe Photoshop elements. A new window will be open.
[img]http://i240.photobucket.com/albums/ff230/yuan1109/Untitled-1-3.jpg[/img]

Choose EDIT
It will look like this:
[img]http://i240.photobucket.com/albums/ff230/yuan1109/d.jpg[/img]

Go to file> New> Blank File>
This window will appear:
[img]http://i240.photobucket.com/albums/ff230/yuan1109/h.jpg[/img]
This is where you set the width and the height of your image.

My image will be 400x400 with 72 resolution pixels per inch.

I will set the background contents to transparent.
This what will happen:
[img]http://i240.photobucket.com/albums/ff230/yuan1109/l.jpg[/img]
:idea: I will be doing a simple animation :idea:

In the box, i will be putting a smiley. This will be LAYER 1
[img]http://i240.photobucket.com/albums/ff230/yuan1109/ghgjgj.jpg[/img]

Then, Create a new layer.

To make a new layer. Duplicate layer 1.

How to duplicate a layer?

In the bottom right of the screen. You will see your layers. In this case we only have one layer (sometimes it is labelled as background).

To duplicate, select your layer>right click>duplicate layer

Then Your layer 2 will appear.(It will be labelled as layer 1 copy)
Now we have two layers already.
[img]http://i240.photobucket.com/albums/ff230/yuan1109/Unghgtitled-2.jpg[/img]

IF YOU NOTICE, LAYER1 and LAYER2 are just the same. Lets edit layer 2.
Instead of a smiling face i will make layer 2 a shocked smiley.

How will i do that?

1. By using the eraser tool, i will erase the smile, and replace it with a circle.

2. To make a circle, i will use the shape tool, IMPORTANT: this will create a new layer. it will mess up our animation.

3. What to do? merge it with layer 2. how? go to LAYERS (bottom right of the screen) select the shape layer> right click> merge down.

You will notice that our shape tool was merged in the layer 2. that wont mess up our animation anymore.
LAYER 2 will look like this:
[img]http://i240.photobucket.com/albums/ff230/yuan1109/loi.jpg[/img]
:idea: :idea: TIME FOR THE ANIMATION!!!

Go to file> Save for web>
this window will appear:
[img]http://i240.photobucket.com/albums/ff230/yuan1109/hjhkhkjhlcopy.jpg[/img]

MAKE SURE TO CHECK THE ANIMATE BUTTON.

On the frame delay. You will see the no. of sec each layer will be showing.

After checking the animate button and setting the frame delay, Let us have our PREVIEW by pressing the preview button on the bottom right of the window.
:idea: then your animation will appear!
LETS TAKE A LOOK! this will be our image...
[img]http://i240.photobucket.com/albums/ff230/yuan1109/Untitled-1-4.gif[/img]
To save it:

Close the preview window> You will be back on the save for web window> Choose OK.

We have created our own gif image.

You can use this tutorial whenever you want an animation on your banner or background image.
[img]http://i240.photobucket.com/albums/ff230/yuan1109/yuan11.gif[/img]
Last edited by forsakendoll (2010-03-17 03:29:05)