Animated Ad Banner- Part2 Create Animate
/
0 Comments
Continued From Part 1
Now we are ready to animate it, lets switch to Image Ready. In photoshop, just click the "Switch to Imageready" button.
Now we are ready to animate it, lets switch to Image Ready. In photoshop, just click the "Switch to Imageready" button.
In imageready, you should see a pallete at the bottom that looks
like this
Now click on the "New Frame" icon (indicated
above), this will duplicate the selected frame and append it to the animation.
Now with the 2nd frame selected, select the visible text
layer from your layers pallete and shift it up by 2 pixel (press UP arrow
twice).
If you take a look at your first frame, and 2nd frame, they
are slightly different.
Now duplicate the last frame, then use the DOWN arrow, and
move the text layer down by about 10 px, and set the layer's opacity to 70%
----------------------------------------------------------------------------------------------------------------------------------
Now duplicate the last frame, move the text layer down by
about 15px, and set the layers opacity to 40%
------------------------------------------------------------------------------------------------------------
Duplicate the LAST frame.
Now hide the current visible text layer, and make the other
text layer visible, move the text layer down to about the same position as the
other text layer was, and set its opacity to 40%
------------------------------------------------------------------------------------------------------------
Then Duplicate the last frame.
Now use the UP arrow / or your mouse, and move this text layer UP by about 15px and set its opacity to 70%
------------------------------------------------------------------------------------------------------------
Then duplicate the last frame.
Now move the text layer UP by about 10 px and set its opacity to 100%
------------------------------------------------------------------------------------------------------------
Now repeat from STEP 8 above to make this layer go down and the other text layer go UP again.
If you done everything correctly, you should have around 14 frames.
At the bottom of each frames, you will see "0 sec.", this is the time delay between each frame.
We want to set ALL of these to "0.05" OR "0.1", any, depends on how fast you want it. Experiment :).
To set this to 0.05, click on the down arrow next to "0 sec", and choose "Other", then enter 0.05
------------------------------------------------------------------------------------------------------------
Select Frame #1 and set it's delay to 2 seconds. Now find the other frame where the other text is in the position to read, (mine is at frame #8), and also set that to 2 seconds.
Now, look at our animation :)
P/s: To save file: click File ------>Save for Web & Devices or Alt--->Shift--->Ctrl--->S
Now, look at our animation :)
I just want to point out that this tutorial was to show you how to create animated banner, the designs and style, you should come up with your own (better than mine of course). Remember NOT to over do it as animation can chew up alot of KB as you create more frames and more movements.
If you had any problems following this tutorial, CLICK HERE to download my PSD and see how I did it, and maybe change a few things to use for your site.
P/s: To save file: click File ------>Save for Web & Devices or Alt--->Shift--->Ctrl--->S
