BUILDING TIMELINE BASED ANIMATED GIF BANNER ADS Part 2

Part 22

Photoshop CS 5

WEB LAYOUT AND OPTIMIZATION

BUILDING TIMELINE BASED ANIMATED GIF BANNER ADS

 

STEP : 5

Now for the button: Leaving the Current Time Indicator where it is at the 06:00 position, expand the Button layer in the Animation panel and on the button’s shape layer, click the stopwatch icon next to the word “Opacity” to set the first keyframe for this layer.

Move the Current Time Indicator to 06:30 and adjust the opacity of the Button layer to 0% in the Layers panel. This will put a new keyframe at the 06:30 time mark. Now move the Current Time Indicator to 07:00 and adjust the opacity of the Button layer back to 100%. You should now have two keyframes for the car movement and three keyframes on the button’s shape layer, as illustrated in Figure 22-3.

Figure 22-3

Figure 22-3

STEP : 6

To preview your animation, drag the Current Time Indicator back to 00 and click the Play button. To stop the preview, press Stop. To adjust the movie’s time and frame rate, select Document Settings from the panel’s options menu on the top-right corner of the panel.

STEP : 7

Select File > Save for Web & Devices to save your animated GIF. When the dialog box opens, choose GIF 128 Dithered from the Preset menu and adjust the other optimization settings as needed. To pull the best quality out of this image, adjust the colors to 256. If you’d like to change the number of times the animation will play, make a selection from the Looping Options menu. Otherwise, click the Save button to save the file as an animated GIF on your computer.

[box type="info"] HINT: If you’d like to test the animated GIF in a browser before adding it to your Web page, drag and drop the file by its icon into an open browser window. If you can’t see the animation playing in the browser, upgrade your browser to the latest version and check to see that your file has the .gif extension before trying again.[/box]

 

Jane is giving away a FREE Blog Engage account and one year FREE Blog Engage Gold Syndication Membership at her blog Problogging Success. The total prize is of value $89.87. Find out how easy it is to participate in the giveaway by visiting the Blog Engage premium membership giveaway post. The contest is for a limited time, so hurry to avail your chance to win!

email
GD Star Rating
loading...
GD Star Rating
loading...

Posts You May Also Like to Read:

About shakil .

Shakil . is a Founder and Web Designer, Ahoban Network of Ahoban Network (আহবান নেটওয়ার্ক). Google+ | Twitter | Facebook | LinkedIn | Pinterest | YouTube | Email me



             

Speak Your Mind

*

CommentLuv badge
This blog uses premium CommentLuv which allows you to put your keywords with your name if you have had 3 approved comments. Use your real name and then @ your keywords (maximum of 3)