|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
Platinum Edition Using HTML 4, XML, and Java 1.2
It is surprising that this development didn’t happen sooner, given that GIF animations are so much easier to implement than server-push animations. A server-push animation requires a server that is CGI-capable, a program to pipe the individual frames of the animation down an open HTTP connection, and a browser that can handle the experimental MIME type used. All you need for a GIF animation is a program to help you set up the GIF file and a browser that is completely compliant with the GIF89a standard. That you don’t need any CGI programming is a relief to those publishing on a server that either does not have CGI or that restricts CGI access to certain users. One program that will help you build animated GIFs is the Microsoft GIF Animator that comes with Image Composer. Figure 5.17 shows the GIF Animator program window with an animated GIF file loaded. The individual frames of the animation are displayed on the left, and you change animation parameters on the tabs on the right.
On the GIF Animator’s Option tab, you’ll see check boxes for specifying whether the thumbnails should reflect image position and whether the GIF Animator program window should always be displayed at the top of your desktop. Additionally, you can choose color palettes and dithering techniques for your animation. On the Animation tab (see Figure 5.18), you can specify the size of the animation, how many frames compose the animation, and whether the animation should loop. If you do choose to loop the animation, you can designate a number of times for the animation to repeat, or you can enable it to repeat indefinitely.
Finally, the Image tab enables you to designate properties for each frame in the animation. You can set the height and width, how long the frame should be displayed, how to undraw the frame, and which color to use as the transparent color (see Figure 5.19).
Using Image Effects That Create DepthAlthough a computer screen is inherently two-dimensional, Web graphic artists try not to let that get them down. They draw on a variety of techniques that give Web pages the illusion of depth. Creating these effects usually involves the use of a higher-end graphics program, such as Paint Shop Pro or Photoshop. These are well worth the time and expense, however, because they give Web pages a richness that is hard to beat. Light SourcesPhotoshop enables you to apply three types of light sources in any of 10 styles to an image from the Lighting Effects dialog box shown in Figure 5.20. You call up the dialog box by choosing Filter, Render, and then selecting Lighting Effects from the Render pop-up menu.
The cardinal rule to remember when lighting the images on your pages is to illuminate each object with the same light source at the same position. Think of it as the sun shining on your page. Only one sun is in the sky, and all the objects on the page are getting light from it simultaneously. If you light different objects with different light sources at different positions, the lighting will seem counterintuitive to those who view the page. You should try to make the lighting seem as natural as possible so that the page is more inviting. Drop ShadowsPlacing drop shadows behind page elements is a great way to make them appear elevated from the page (see Figure 5.21). An easy way to make a drop shadow is to make a copy of the page element, paint it black, and drop it in behind and to one side of the element being shadowed. If you are using Photoshop, you can achieve increased realism by copying the page element to a subordinate layer, painting it black, expanding it by several pixels, blurring it a few times, and positioning it as desired.
EmbossingEmbossing a graphic element makes it appear to be raised and gives it a more textured appearance (see Figure 5.22). Photoshop has a built-in embossing filter that you can use by selecting Filters, Stylize, and then selecting Emboss from the Stylize pop-up menu. Ray TracingRay tracing is a technique for making two-dimensional images look three-dimensional. You can usually tell a ray-traced image by its distinct use of perspective (objects get smaller as they move away from you). To create your own ray-traced images, you need a special program. Windows users can check out Caligari Truespace; Strata Vision is a good program for the Macintosh. For more information on other ray-tracing software, consult http://www.yahoo.com/Computers_and_Internet/Graphics/Ray_Tracing/.
Keeping File Sizes SmallOne of the greatest courtesies you can extend to your users is to keep your graphics files small. Invariably, it is the graphics that take the longest time to download. By keeping the file sizes small, you minimize the time that users spend waiting to see your pages. Your typical 30K to 50K graphics file may load in a few seconds over a T1 connection, but it may take several minutes for users dialing up with a 28.8Kbps or 14.4Kbps connection. You can enlist a number of techniques to help keep your file sizes small:
Each technique is discussed briefly over the next several sections. Resizing the ImageLarger images take up more disk space—it is as simple as that. The reason for this is straightforward: More pixels are present in a larger image, so more color information must be stored.
|
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.
|
)
)
)
)
)
)
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}