First of all, please leave a THANKS! I Wasted more than an hour putting this tutorial together.
Hey guys, I decided to make a small tutorial on how to use the timeline animation in Photoshop CS4. You can do this in other versions like cs3, cs2 (not sure).
First of all, make sure you have the extended version of photoshop cs4, cs3, or cs2.
Here is what we are going to be making:
Ok so first of all, open up photoshop, and make a new project. Use this setup:
Then, go to Window> and select Animation, if you haven't so yet:
A window will appear, on the bottom. Most likely, you should be in frame animation mode right now. To switch to Timeline animation, click this:
Now you should be, in timeline animation mode. Ok so you are ready to start.
1. Get a picture of google, something dark. If you can find one, use this one:
(were going to be using the top half of this picture)
2. Open the picture in photoshop, copy the whole picture. Then go into our project, and paste it in there. Then resize it, move it, to make it look something like this:
3. Then take the text tool, and type in whatever you want. Or just type in "TUTORIAL". I used the font called "Atari Kids". Get it from here:
And the size should be on 35. Center it, it should look something like this:
4. Now right click on the text layer and click Blending Options.
5. Now use this settings:
It should look something like this:
6. Now move the text all the way to the left until you can't see it at all:
7. Now go to your timeline animation, and click the arrow next to the text:
8. Then, under the text, you should find something saying "Position". And the left of it, there should be a timer. Click on it!
A yellow mark should appear:
9. Now after you got that, take the Time Indicator (
) and move it to about between 00 and 15f.
10. Then take the text, and move it just a little to the left of the middle.
You should get another marker.
11. Then move the time indicator (
) to about between 15f and 02:00f.
12. Then move the text, slightly more to the right of the middle:
You should get a third marker.
13. Now, move the time indicator (
), to 02:00f.
14. Move the text, all the way to right until you can't see it anymore.
And the forth marker should appear.
15. Now the last part, is to move the time indicator (
), all the way to the beginning, and click play and watch your animation.
You should have something like this:
Now to save it, just click on File>Save for Web and Devices. There you can preview your animation in a web browser. If if you like it, save it as GIF. Your Done!
Hey guys, I decided to make a small tutorial on how to use the timeline animation in Photoshop CS4. You can do this in other versions like cs3, cs2 (not sure).
First of all, make sure you have the extended version of photoshop cs4, cs3, or cs2.
Here is what we are going to be making:
Ok so first of all, open up photoshop, and make a new project. Use this setup:
Then, go to Window> and select Animation, if you haven't so yet:
A window will appear, on the bottom. Most likely, you should be in frame animation mode right now. To switch to Timeline animation, click this:
Now you should be, in timeline animation mode. Ok so you are ready to start.
1. Get a picture of google, something dark. If you can find one, use this one:
(were going to be using the top half of this picture)2. Open the picture in photoshop, copy the whole picture. Then go into our project, and paste it in there. Then resize it, move it, to make it look something like this:
3. Then take the text tool, and type in whatever you want. Or just type in "TUTORIAL". I used the font called "Atari Kids". Get it from here:

And the size should be on 35. Center it, it should look something like this:
4. Now right click on the text layer and click Blending Options.
5. Now use this settings:
It should look something like this:
6. Now move the text all the way to the left until you can't see it at all:
7. Now go to your timeline animation, and click the arrow next to the text:
8. Then, under the text, you should find something saying "Position". And the left of it, there should be a timer. Click on it!
A yellow mark should appear:
9. Now after you got that, take the Time Indicator (
) and move it to about between 00 and 15f.
10. Then take the text, and move it just a little to the left of the middle.
You should get another marker.
11. Then move the time indicator (
) to about between 15f and 02:00f.
12. Then move the text, slightly more to the right of the middle:
You should get a third marker.
13. Now, move the time indicator (
), to 02:00f.
14. Move the text, all the way to right until you can't see it anymore.
And the forth marker should appear.
15. Now the last part, is to move the time indicator (
), all the way to the beginning, and click play and watch your animation.You should have something like this:
Now to save it, just click on File>Save for Web and Devices. There you can preview your animation in a web browser. If if you like it, save it as GIF. Your Done!






