Tài liệu Professional Web Design: Techniques and Templates- P4 pdf

Game Developing GWX 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. Chapter 7 ■ Understanding Graphics132 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX 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. 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. Learning about JPGs, PNGs, and GIFs 133 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX 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 two Figure 7.12 Thumbnail that should be saved as an 8-bit PNG or GIF because of the solid colors. Chapter 7 ■ Understanding Graphics134 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX formats is that they compress as many pixels of one solid color at a time while running horizontally. In other words, if a designer creates an image where areas of one color run horizontally rather than vertically, the image will be compressed significantly smaller. Figure 7.15 is the exact same image as Figure 7.16; however, Figure 7.13 Thumbnail that should be saved as a JPG because of the many gradations. Figure 7.14 Small graphics that should be saved as PNGs or GIFs. Learning about JPGs, PNGs, and GIFs 135 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX by rotating Figure 7.15 a mere 90 degrees and saving it so that the lines are horizontal, the image in Figure 7.16 can be compressed by more than 50 percent. Of course, this is a very specific example because not all images have lines. It does illustrate that the more you have solid colors run horizontally, the more the image can be compressed. Figure 7.15 File size of image with vertical lines is 1KB. Figure 7.16 File size of image with horizontal lines is .457KB. Chapter 7 ■ Understanding Graphics136 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Unfortunately, if t he image is already created, there is not much the desi gner can do. When starting a design from scratc h , howeve r , thi s can be helpful to know if the do wnload s ize of the site is extremely critical. Figu re 7.17 is a d esign that was created especially to benefit from GIF compression. Notice that near ly all the lines run horizontally. Not only does this take advantage of the GIF format’s best compression, but it also takes advantage of using t h e ability to repeat background images. In other word s, each line that cannot be saved just as a background color can be saved as a background image, which can be repeated infinitely across the X a xis (horizontal) usi ng CSS. Tha t way, t he desi gn requires a download o f only a few images. It is then up to the browser to repeat the images, rather than ma king it necessary to downloa d larger images . Using JPGs While the GIF format is useful for saving images with limited colors, the JPG format is just as powerful when saving images with hundreds, thousands, or millions of colors. Unlike multiple benefits from the 8-bit PNG and GIF formats, this one advantage of the JPG format makes it remarkably valuable when build- ing mortised sites. A designer should typically save an image as a JPG in the following situations. Figure 7.17 Design that takes advantage of GIF horizontal compression. Learning about JPGs, PNGs, and GIFs 137 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Saving a Photograph Other than in certain instances when saving thumbnails or dealing with flat planes of color, as outlined in the ‘‘Using PNGs and GIFs’’ section, photographs should almost always be saved as JPGs. The image in Figure 7.18 was saved as a GIF with 128 colors. The same image was saved as a JPG in Figure 7.19 with the quality (compression) level set to 41 in Pho toshop. There is no visible difference in the two photos. Note that the JPG photo is compressed to be more than 80 percent smaller. Note The 24-bit PNG format can also save as many colors as JPG. Unlike the JPG format, the 24-bit PNG format will save the colors in a lossless method, which will maintain the original colors. The lossless method comes at a cost, though. The 24-bit PNG will typically be much larger than the JPG. Saving an Image That Has Gradations Although this is not an absolute rule, in most cases, the JPG format will compress images with gradations considerably better than the PNG and GIF formats, be- cause gradations contain many colors. Depending on the area, gradations can range from a few colors to millions of colors. Figure 7.20 is an image of a tulip Figure 7.18 GIF photo saved at 25KB. Chapter 7 ■ Understanding Graphics138 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX that is mainly compr ised of gradations throughout the photo. Figure 7.21 is a zoomed-in view of the rectangle section shown in Figure 7.20. The human eye cannot physically detect that there are 167 colors used to create the area. A computer, however, can detect those colors, and, unless otherwise Figure 7.19 JPG photo saved at 5KB. Figure 7.20 Photo of a tulip that is made up of many gradations. Learning about JPGs, PNGs, and GIFs 139 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX directed when saving the image, will try to save each of those colors, considerably increasing the file size. Some gradations can also be saved as GIFs. The rectangle that makes up Fig- ure 7.21 is an example of this situation. When saved with the entire photo, the rectangle would need t o be saved as a JPG. However, if the rectangle were to be cropped and saved on its own, it could be saved as a PNG or GIF with only 16 colors, as opposed to 167. O nce again, this is because the human eye can- not physically detect that many colors in that small of an a rea. Viewing the image a t 100 percent, i t is d i ffic ult to detect m ore tha n a handful of colo rs. Thus, when a color is subtracted from the image, it is replaced with a color that is still present i n the i mage. Therefore, using 16 colo rs would be more than adequate. Figure 7.22 is an example of a gradated design. The gradated circles (see Figure 7.23) at the top and bottom of the design are saved as GIFs rather than JPGs for two reasons: 1. Because they are small, fewer colors are needed, which keeps the file size small. 2. If they were saved as JPGs, the circles could lose their exact hue and the white in the image could have a pinkish tint, which would disrupt the design. This, though, is not that much of problem anymo re with the improvement of Adobe’s compression functionality in Photoshop. Figure 7.21 Zoomed-in view of the rectangle area in Figure 7.20. Chapter 7 ■ Understanding Graphics140 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Figure 7.22 Design that uses gradated circles across the top and bottom of the image. Figure 7.23 A zoomed-in view of some of the gradated circles in Figure 7.22. Learning about JPGs, PNGs, and GIFs 141 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... turned on and content removed to show the basic structure of the site In general, CSS sites work by using block- and line-level tags, such as and tags, in addition to a few other XHTML tags, such as and , to format and position the content The and tags are wrapped around individual elements of content and then assigned rules in a style sheet to position and style... Advantages of CSS Designs ■ The outputted Web page, barring the style sheet, is much cleaner and easier to follow, because it takes considerably less code to accomplish the same look and feel This makes it easier for the designer to understand nested elements and how they relate to other content and containers While nesting is still necessary to accomplish the same look and feel as XHTML-table design, the... compromise the quality of a site If the designer understands how and when to use the formats along with compression software, sites can be highly graphical and yet fast at the same time Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Game Developing GWX 153 This page intentionally left blank Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark chapter 8 Creating... minimum Summary Much of the speed and quality of a site is determined by its graphics, which is why it is important for a designer to understand how to create, use, save, and compress images While vector-based images are the newest technology available, traditional bitmap images, such as PNGs, GIFs, and JPGs, are the most widely and consistently supported PNGs, GIFs, and JPGs can do a good job of compressing... compliant and noncompliant browsers that handle CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark CSS-Based Design Versus XHTML Table Design differently, but there also are different versions of such browsers This means there are more bugs and thus more workarounds and hacks that a designer must be familiar with to fix the bugs Web design always seems to be evolving While... the framework Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark CSS-Based Design Versus XHTML Table Design Figure 8.3 Design with table borders set to 0, and images, text, and CSS added to populate the table cells Figure 8.4 Design elements from Figure 8.3 laid out using CSS instead of XHTML tables Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark... Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Game Developing GWX 149 150 Chapter 7 ■ Understanding Graphics Figure 7.36 Image saved as a GIF with too few colors 6 Not saving images as PNGs, GIFs, or JPGs As previously mentioned, the three main image file formats used with the Internet today are PNGs, GIFs, and JPGs However, a Web page can also use BMP files, and the browser... highest compression, the file size is Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Game Developing GWX 143 144 Chapter 7 ■ Understanding Graphics Figure 7.26 Site that misuses graphics; the entire page download is larger than 300KB Figure 7.27 Photo after being compressed Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Game Developing GWX Misusing... they work Yes, XHTML code, having replaced HTML as the standard, is compact enough, allowing for fast downloads, depending on included images and any extra code included The bottom line, though, is nearly everything can Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 155 156 Chapter 8 ■ Creating CSS Designs be improved, and XHTML’s table-based design is no exception There are... example of how small the download can be of a largely graphical site when properly using the JPG and GIF file formats Figure 7.26, on the other hand, is at the other end of the spectrum The site misuses images in enough instances to make the entire site download larger than 300KB With today’s software and coding techniques, it is not always necessary, in most instances, to have a site come in at more than . 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. 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