Professional Web Design: Techniques and Templates- P4

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 ones design and developer skills is essential for every Web designer in todays 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....
Nội dung trích xuất từ tài liệu:
Professional Web Design: Techniques and Templates- P4 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 dis- played 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 dif- ferent patterns of tiny dots to imitate shades of color by placing certain colors beside one another. Unfortunately, it increases file size significantly. Figure 7.9 is a zoomed-in view of the curved edge of Figure 7.8. It takes many shades of gray to make the image appear to be raised. While it is still possible to adequately com- press Figure 7.8, 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 7.10 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 7.11. 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 7.9 Zoomed-in view of the drop shadow in Figure 7.8.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Learning about JPGs, PNGs, and GIFs 133 Figure 7.10 Line drawing that should be saved as a PNG or GIF. Figure 7.11 Text that should be saved as a GIF image. 4. The image is a thumbnail photo. Depending on the physical size of the image and how many colors it uses, an 8-bit PNG or GIF will make a thumbnail appear sharper for about the same file size. If the number of colors is limited, such as in the photo of the house in Florence, Italy, shown in Figure 7.12, the image should be saved as an 8-bit PNG or GIF. If saved as a JPG at the same file size, the body of the house could become splotchy. Of course, this is not a hard and fast rule, especially with how the compression functionality of Photoshop has improved over the years.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX 134 Chapter 7 ■ Understanding Graphics Figure 7.12 Thumbnail that should be saved as an 8-bit PNG or GIF because of the solid colors. In contrast, the photo of the Dover Cliffs shown in Figure 7.13 uses many gradations throughout the sky, cliffs, and channel, which makes it a better candidate to be saved as a JPG. 5. Small graphics are used. One way to keep a Web site small is to use and reuse small graphics, whether in the layout of the page or as a mouseover. Strictly because of their size, such images, including buttons, bullets, and mouseovers, should generally be saved as PNGs or GIFs (see Figure 7.14). The reason is that PNG and GIF compression handle a small number of colors much better than JPG compression does. Knowing How PNG and GIF Compression Work It is helpful for a designer to understand how PNG and GIF compression work. By creating and saving images a certain way, the designer can drastically reduce the download size of images, thus speeding up the site. The secret of the twoPlease purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Learning about JPGs, PNGs, and GIFs 135 Figure 7.13 Thumbnail that should be saved as a JPG because of the many gradations. Figure 7.14 Smal ...