Some of of blogger ask me about how to made animation banner as my banners design. But i haven’t too much time to arrange the tutorial of animation banner before, apologize me guys . But now, the time is coming after to much jobs on the net in which i’ve to done first. Ok enough for bullshit talkin. Lets we started… I will guide you how to made a simple Banner. But the first you must read this requirement (important:> ) :

1. You must to know how to applicate and design in Adobe Photoshop, if you couldn’t do ever yet, I suggest you to learn Adobe Photoshop first. You can learn it at Adobe Photoshop Tutorial under Help menu in Adobe Photoshop Software.
2. You must have imagination what kind of banner that you wanna create before you do it. Why? because the banner which you wanna create is animation banner. Think and Feel before you jump it.
3. Of course, you must have Adobe Photoshop 7 or higher (Adobe Photoshop CS) with Adobe Image Ready Application (nb:Automatic installed if you install Adobe Photoshop) in your PC. That’s all.

This is just for an example of animation banner in which we want to made banner. I used Adobe Photoshop 7, if you have the higher, thats more better. Are you ready? Right!. Just follow step-by-step the instruction:

1. As my requirement on No.1 You must create the banner design with 132 x 53 pixels in Adobe Photoshop first and design it as the pictures below. The pixels size are depend on you.

click image for enlarge

2. After Banner that will be made to animation was finished, do jump to the image ready. See the pictures below.

3. Your layout design will open to Adobe Image Ready. Thats looked like this

click image for enlarge

You only used toolbox, animate and the layer window to design yours in Adobe Image ready. If The Animated window doesn’t appear on your layout, you could switch it at Animation under Window Menu.

4. Select first frame at Animation Window and hide the eye in Layer window with click it. Don’t hide at all, just selected layers only, do it as the picture below OK!

click image for enlarge

6. Then, select the first frame again and made duplicate of this frame with click Duplicate current frame Icon. Unhide the eye of “Jeprut” layer. Make sure unhide it right on of the duplicate frame result. That’s will be look as the picture below (on red hand shadow).

click image for enlarge

7. Now, we will get started to animate it. Click Tween Icon (see the hand) , Tween window will display and make sure the option as the picture below.

click image for enlarge

Then Click OK! It will be look like this…

click image for enlarge
8. As step of No.6-7. But you will do it again for the last frame. Select frame 5th – duplicate it– unhide “HERE” layer – tween it. See the pictures

click image for enlarge

9. As step of No.6-7. Again for the last frame. Select frame 9th – duplicate – unhide “VISIT” layer – tween. See the pictures

click image for enlarge

10. As step of No.6. For the last frame once more. Select frame 13th – duplicate – unhide “ME” layer – tween. See the picture

click image for enlarge

(nb:sorry…. i forget to made screenshoot of the tween result at this section :>)

11. Then we will manipulate this banner, so that the loop will work correctly. As step of No.6-7 any more but you hide the eyes of selected layers. Select frame 17th – duplicate – hide “JEPRUT” “HERE” “VISIT” AND “ME” layers. No Tween any more. See the pictures

click image for enlarge

12. Now we will give timing for each frame. Select all animation frames (Hold down “Shift button” on your keyboard and click 1st frame and the last frame). Click the Timing button (Small triangle) and choose 0.2 second. See the pictures

click image for enlarge

13. For the continous of your banner loop. Click the small triangle Forever button (see the pictures) and choose “Forever”. Its Done!

click image for enlarge

14. Now you can playing this animation banner for first time before you save it. Click Play/Stop Animation Button (See the picture)

15. Finally you could Save it Now. Follow this steps: On the menu, click File, choose “Save Optimized as”, Fill the names of your banner, on the “save as type” option choose “.gif” format, then Save it! See the pictures

click image for enlarge

Well Done! Have work with your imagination. That’s easy hah.. .

Tags: Banner, Tutorial

This entry was posted on Friday, February 1st, 2008 at 8:58 am and is filed under Banner, Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.