Professional Web Design: Techniques and Templates- P4: This is the must-have book for designers who want to expand their skills and improve the quality of their designs. Learning CSS technology and continually improving one's design and developer skills is essential for every Web designer in today's marketplace. The goal of Professional Web Design: Techniques and Templates is to educate beginning-to-intermediate Web designers on the various issues involved with Web design through general discussion, case studies, and specific tips and techniques | 132 Chapter 7 Understanding Graphics When saving images as 8-bit PNGs or GIFs a designer should be aware of the fact that gradations such as drop shadows will increase the file size or not be displayed with strong enough quality. Due to the fact that there are a fewer number of colors available an effect called banding can occur. This causes the gradations to be represented by solid bands of color instead of flowing into one another. There is a process called dithering which causes the bands to be broken into different patterns of tiny dots to imitate shades of color by placing certain colors beside one another. Unfortunately it increases file size significantly. Figure is a zoomed-in view of the curved edge of Figure . It takes many shades of gray to make the image appear to be raised. While it is still possible to adequately compress Figure the additional colors will increase the file size of the image. 2. The image is a line drawing. Although this technically falls into the previous category it is differentiated for one reason when saving an image as a PNG or GIF the white is guaranteed to stay white unlike a JPG. Figure is a cartoon that is sharper and whiter when saved as a GIF as opposed to a JPG. 3. Text is saved as an image if it is not on a complex background such as a photo. Generally to make a site smaller a designer should try to save text separately from images like photographs which should be saved as JPGs. If the text is separate it should be saved as a PNG or GIF such as in Figure . Saving the image as a GIF in this image keeps the text nearly as crisp as when it was in the image editing software. Figure Zoomed-in view of the drop shadow in Figure . Please purchase PDF Split-Merge on to remove this watermark. Learning about JPGs PNGs and GIFs 133 Figure Line drawing that should be saved as a PNG or GIF. Figure Text that should be saved as a GIF image. 4. The image is a thumbnail photo. Depending .
