guideline: animation
How to create an animation with single pictures.
Program: Photoshop CS3
The animation consists of the 4 following pictures.
Don't make fun of the color dots on the single pictures. They might be useful. ;)
Picture 1
Picture 2
Picture 3
Picture 4
Since we need all 4 layers in one layers palette we're going to duplicate Picture 2, 3 and 4 and insert them on picture 1. (e.g. Right Click on Picture 2 - Duplicate Layer - Choose the Document (Picture 1))
Now you have to open the animation palette.
((Window -) Workspace - Animation)
Picture 4 was the last picture being inserted on our first Picture. So it is on top of the layers palette and therefore the only picture (frame) you see on your animation timeline.
For our animation we need six frames in total. Cause the final result will show picture 1-2-3-4-3-2. Therefore we are going to duplicate
the first frame five times.
But the animation is supposed to start with the first picture. So click on the first frame and disable all other layers in the layers palette except picture 1.
In order to disable/enable a layer you have to click on the eye icon
. If you see the icon you see the layer.
The second frame is supposed to show picture 2. So, as in the step before, you have to disable all other layers in the layers palette except picture 2.
Again, frame 3 is supposed to show picture 3. Disable all layers except picture 3.
Frame 4 has to show picture 4, so just enable this one in the layers palette.
Note: From this point on we're going to reverse the animation, which means, the next two frames show picture 3 and picture 2 again. This step is just necessary If you want to reverse an animation!
Once you're done with organizing the single frames, you can play around with the delay time of each frame.
I've chosen a 2.0 seconds delay for my first frame and a 0.2 seconds delay for the other frames.
Make sure that the animation timeline is set to 'Forever'.
Once you're done with the timeline you save your animation as a gif. (File - Save for Web & Devices) Also, in case you notice that your animation is too big ( > 40kb, etc.) there's the place to change that. Just play around with the settings.
I hope this was a little helpful and not too irritating cause of the german words. But hey, you just learned how to animate an icon and some words of another language, - so don't complain. ;)
If there are any questions or annotations feel free to share them. :)
Program: Photoshop CS3
The animation consists of the 4 following pictures.
Don't make fun of the color dots on the single pictures. They might be useful. ;)
Picture 1
Picture 2
Picture 3
Picture 4
Since we need all 4 layers in one layers palette we're going to duplicate Picture 2, 3 and 4 and insert them on picture 1. (e.g. Right Click on Picture 2 - Duplicate Layer - Choose the Document (Picture 1))
Now you have to open the animation palette.
((Window -) Workspace - Animation)
Picture 4 was the last picture being inserted on our first Picture. So it is on top of the layers palette and therefore the only picture (frame) you see on your animation timeline.
For our animation we need six frames in total. Cause the final result will show picture 1-2-3-4-3-2. Therefore we are going to duplicate
the first frame five times.
But the animation is supposed to start with the first picture. So click on the first frame and disable all other layers in the layers palette except picture 1.
In order to disable/enable a layer you have to click on the eye icon
. If you see the icon you see the layer.
The second frame is supposed to show picture 2. So, as in the step before, you have to disable all other layers in the layers palette except picture 2.
Again, frame 3 is supposed to show picture 3. Disable all layers except picture 3.
Frame 4 has to show picture 4, so just enable this one in the layers palette.
Note: From this point on we're going to reverse the animation, which means, the next two frames show picture 3 and picture 2 again. This step is just necessary If you want to reverse an animation!
Once you're done with organizing the single frames, you can play around with the delay time of each frame.
I've chosen a 2.0 seconds delay for my first frame and a 0.2 seconds delay for the other frames.
Make sure that the animation timeline is set to 'Forever'.
Once you're done with the timeline you save your animation as a gif. (File - Save for Web & Devices) Also, in case you notice that your animation is too big ( > 40kb, etc.) there's the place to change that. Just play around with the settings.
I hope this was a little helpful and not too irritating cause of the german words. But hey, you just learned how to animate an icon and some words of another language, - so don't complain. ;)
If there are any questions or annotations feel free to share them. :)