Hi, Ya’ll this time, i will be showing some tutorials and videosi found on the internet, on how to make

an animated image (.gif) using photoshop. This post is for my friend Zam.

Hola a todos, esta vez estare enseñando unos tutoriales sobre como hacer imagenes animadas(.gif)

utilizando el photoshop. Este post va dedicado a mi a migo Zam.

English:

——————————————–

Here is the sample image that I will be animating – a little stick figure enjoying Yoga.

In
this instance, you can see that I have 4 layers on the image. From the
top they are: Forward Bend, Downward Dog, Cobra and the white
background.

GOAL: My intention is to have the stick figure do some fluid Yoga, going from one pose to another.

Step 1: Because I want the man to do his Yoga in place, I centered the layers with each other.

Step 2: With the image open, go to Window on the main menu and select Animation. This opens the animation palette. Your image will appear in the first frame of the animation palette.

Step 3: Add a frame to the animation palette.

You
can do this by clicking on the arrow on the top right of the animation
palette and selecting “new frame” from the fly-out menu, or you can
click the square at the bottom of the animation palette. Now you’ll see
your image in the first frame & new frame of the animation palette.

Step 4: Select a frame and edit the layers of that frame.

You can do any of the following:

• Turn visibility on and off for different layers
• Change the position of layers to make layer content move
• Change layer opacity to make content fade in or out
• Change the blending mode of layers
• Add a style to layers

(FYI: you can only animate linear movements. Rotations need to be done frame by frame.)

You can generate new frames with slight changes between two existing frames easily and automatically using the Tween command in the animation palette. Tweening is a quick way to make an object move or fade into another shape. The button looks like a series of squares changing opacity:

In this case, I wanted to Tween my Yoga man between the 3 Yoga positions to make it look as though he is moving. I selected frame 1 and turned off the visibility of layers 2 and 3, so only Cobra and the Background layers were visible. Then I selected the 2^nd frame in the animation palette and turned off the visibility of the
Cobra layer, and turned on the visibility of the Downward Dog layer.

Ready to Tween the 2 layers: allowing Photoshop to create the movement for me of the little Yoga man between the 2 Yoga poses.

Tweening:
First I held down the shift key and clicked on both frames of the
animation palette, so they were both selected. Then I clicked on the
Tween button (the series of squares at the bottom of the animation
palette.)

My tween menu popped up and I made the following selections:

6 new frames have appeared in the Animation palette!

I did not preview the animation at this time, because I had not edited the frame delay – the rate at which the animation changes from frame to frame. The animation would therfore move too quickly. So next I …

Step 5: Set frame delay and looping options.

You can assign the delay time between each frame (do you want to go from frame to frame every 4 seconds or every .25 seconds? etc…) and specify looping, so that the animation will run over and over or
just run through once. I have chosen .5 seconds on each frame. Just
click on the tiny black arrow next to where it says “0 sec.” on the
bottom of each frame in the animation palette. (I did this 8 times.)

Ready to preview the animation.

Now, press the play button on the bottom of the animation palette to play a preview of the
animation. You can also preview the animation in your web browser.

Step 6: Edit
layers of additional frames as needed for your project. The number of
frames you can create is limited only by the amount of system memory
available to you.

I
had another Yoga pose to animate, so I created a new frame in the
animation palette. With only that new frame selected, I turned on the
visibility of the Forward bend layer and turned off the visibility of
the other 2 Yoga pose layers.

Then I followed the same Tweening process, highlighting the new Forward Bend frame and the one just
before it, pressed the tween button, and instantly added 6 new layers.

Then I selected my frame delays of .5 sec again for each frame.

I
also made some manual changes to the layers, duplicating those I
thought would show better action and making the frame delay longer on
frames that showed the finished Yoga poses.

Step 7: Save the animation.

In Photoshop, go to File, Save For Web. Make sure gif is selected. There are control buttons on this window to see the
animation as it will finally appear one last time before saving.

(In ImageReady you can also save it in SWF format, like a Flash file.) I strongly recommend saving the animation as a .psd in case you need to rework the animation later.

Source: rdesignonline.com