Animated Banner Tutorial
Application: Photoshop CS 3
In this tutorial I will show you how to create your own Animated Banner like this one
1. Make a new document with the dimensions below.
Screenshot
2. Decide what colors you are going to use. I try not to use more than 10 colors less is better.
3. Set your background color I'm going to use Black.
4. Add your Company Name or Logo on a New Layer...
Screenshot
5. Add another New Layer this will be the first frame of your rotating Text add...
Screenshot
6. Add a new layer for each new frame of text...
Screenshot
7. Merge Company name and background layers.
8. Go up to the menu click on Window then on Animation...
Screenshot
9. Now we are going to start animating the Text. But first I want to tell you a little about how the Animation window works. Each block in the animation window is called a frame. On each frame you can set how long you want the Text or picture to be visible the more Seconds you put on the frame the longer it will last.
Let me show you how to do this with a simple animation.
a. In the layers pallet I have 4 layers in each layer the ball is in a different position...
Screenshot
b. In the Animation window on the first frame you can see all the balls...
Screenshot
c. We want to have 4 frames so to add more frames we click on the duplicate frame
button 3 times...
Screenshot
d. Now in each frame we activate only one layer...
Screenshot
e. Now I need to decide how fast I want the animation to go To change all the frames at
the same time click the first layer the hold down the shift button and click on the last
frame
f. Right click where it says 0sec. in the animation window then choose a time I choose
0.2 ...
Screenshot
g. So I'm done with the animation so I have to save it. Go to File then Save for Web and
Devices.
h. A new window pops up, to save it as an animation you Have to choose GIF I choose
GIF 32 no Dither and a matte of white.
Screenshot
i. Here it is finished...
10. Ok so now you Know the basics of animation so lets get back to our banner.
11. Make sure you only have your Background layer & your first layer of Text activated.
Screenshot
12. Duplicate your first frame.
13. On Frame1 deactivate the text...
Screenshot
14. Click on tween animation frames in the animation window...
Screenshot
15. Set the properties to the same as mine and click OK...
Screenshot
16. Now we have a nice Fade effect to show our text...
Screenshot
17. But now we need it to Fade out so select Frames 1-4 duplicate those frames then move the duplicates to the very end...
Screenshot
18. Rearrange the frames so the text fades out instead of in...
Screenshot
19. Click on frame5 and set the time to 3sec. so everyone has enough time to read it. Leave the rest at 0sec...
Screenshot
20. Repeat steps 11-19 for the other two layers.
21. After your done you should have 21 frames you can delete Frame21 we won't be needing it since the animation will be looping and Frame1 is the same as Frame21...
Screenshot
22. Before you save your animation click on the arrow pointing down on the animation window choose Optimize Animation...
Screenshot
23. Ok we are done. Now Save for Web and Devices, If you didn't use very many colors you can use the same settings I have...
Screenshot
But if you used more colors than I did which was 3 then you have to select a higher number of colors for your animation you can do that by changing the setting here...
Screenshot
24. Here is the Banner all done...
If you have any questions about this tutorial send me a PM.
Thanks,
Jenn
In this tutorial I will show you how to create your own Animated Banner like this one
1. Make a new document with the dimensions below.
Screenshot
2. Decide what colors you are going to use. I try not to use more than 10 colors less is better.
3. Set your background color I'm going to use Black.
4. Add your Company Name or Logo on a New Layer...
Screenshot
5. Add another New Layer this will be the first frame of your rotating Text add...
Screenshot
6. Add a new layer for each new frame of text...
Screenshot
7. Merge Company name and background layers.
8. Go up to the menu click on Window then on Animation...
Screenshot
9. Now we are going to start animating the Text. But first I want to tell you a little about how the Animation window works. Each block in the animation window is called a frame. On each frame you can set how long you want the Text or picture to be visible the more Seconds you put on the frame the longer it will last.
Let me show you how to do this with a simple animation.
a. In the layers pallet I have 4 layers in each layer the ball is in a different position...
Screenshot
b. In the Animation window on the first frame you can see all the balls...
Screenshot
c. We want to have 4 frames so to add more frames we click on the duplicate frame
button 3 times...
Screenshot
d. Now in each frame we activate only one layer...
Screenshot
e. Now I need to decide how fast I want the animation to go To change all the frames at
the same time click the first layer the hold down the shift button and click on the last
frame
f. Right click where it says 0sec. in the animation window then choose a time I choose
0.2 ...
Screenshot
g. So I'm done with the animation so I have to save it. Go to File then Save for Web and
Devices.
h. A new window pops up, to save it as an animation you Have to choose GIF I choose
GIF 32 no Dither and a matte of white.
Screenshot
i. Here it is finished...
10. Ok so now you Know the basics of animation so lets get back to our banner.
11. Make sure you only have your Background layer & your first layer of Text activated.
Screenshot
12. Duplicate your first frame.
13. On Frame1 deactivate the text...
Screenshot
14. Click on tween animation frames in the animation window...
Screenshot
15. Set the properties to the same as mine and click OK...
Screenshot
16. Now we have a nice Fade effect to show our text...
Screenshot
17. But now we need it to Fade out so select Frames 1-4 duplicate those frames then move the duplicates to the very end...
Screenshot
18. Rearrange the frames so the text fades out instead of in...
Screenshot
19. Click on frame5 and set the time to 3sec. so everyone has enough time to read it. Leave the rest at 0sec...
Screenshot
20. Repeat steps 11-19 for the other two layers.
21. After your done you should have 21 frames you can delete Frame21 we won't be needing it since the animation will be looping and Frame1 is the same as Frame21...
Screenshot
22. Before you save your animation click on the arrow pointing down on the animation window choose Optimize Animation...
Screenshot
23. Ok we are done. Now Save for Web and Devices, If you didn't use very many colors you can use the same settings I have...
Screenshot
But if you used more colors than I did which was 3 then you have to select a higher number of colors for your animation you can do that by changing the setting here...
Screenshot
24. Here is the Banner all done...
If you have any questions about this tutorial send me a PM.
Thanks,
Jenn
Total Comments 4
Comments
-
WELL DONE MM - I Thank You Very Much For Showing Us That
Posted 10-09-2008 at 02:01 PM by RTL Garage 
-
:upup: Very cool MM.. I been using Image ready for the animations.. This seems about the same amount of work, but its thru one less program..
Thanks!!Posted 10-09-2008 at 05:39 PM by Oilfield_Mafia
-
There are alot more types of animations you can do too like zoom, fly-in/out, distort, color change, dissolve, ect. Have fun with it :upup:
JennPosted 10-10-2008 at 08:36 AM by Miss Minded
-
Adobe, Photoshop elements can help you do this. Costs a little less than the full blown Photoshop.
Posted 11-04-2008 at 01:11 AM by YMMOT
