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.
Game Developing GWX
Saving Text on Top of a Photo
When creating a mortised site, the goal is to make it as fast as possible. This
usually means creating designs where elements can be saved in their best possible
formats. In other words, generally save text as PNGs or GIFs and photographs as
JPGs. But this is not always possible. One instance is when a designer saves an
image with text on top of a background, such as a photo (see Figure 7.24). The
problem the designer runs into with this example is that if the photo is saved as a
GIF to keep the text crisp, it could be as large as 70KB. However, if the entire
image were compressed as a JPG with a smaller size, the text could be blurred and
splotchy. There are only two solutions. The first is to save the text as a separate
image with a transparent color and layer it over the church, which would be used
as a background image. The other solutio n would be to simply save the image as
a higher quality JPG, which is usually the best decision. Saving it this way, the
designer can compress the image to around 15KB without compromising the
quality of the text too much.
Using the JPG file format considerably broadens a designer’s ability to build
striking graphical sites. Figure 7.25 is a graphical site that has a total download
of 35KB.
Figure 7.24
Photo with text layered on top that should be saved as a JPG.
Chapter 7
■
Understanding Graphics142
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
Misusing Image Formats
Properly creating, saving, and compressing images can make or break a site.
Figure 7.25 was a perfect 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 50KB. Following are seven in-
stances where a designer can compromise the quality of a site by incorrectly
saving or compressing an image.
1. Saving an uncompressed image. This is the most common mistake made by
designers. Just saving an image with the correct file format is not enough. The
designer still needs to compress the image. Figure 7.27, for example, when
saved at the absolute lowest JPG compression setting in Photoshop, comes in
at 65KB, while saving it with the absolute highest compression, the file size is
Figure 7.25
Graphical site that comes in under 35KB.
Copyright † 2002 by House of Nutrition. All rights reserved.
Misusing Image Formats 143
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
Figure 7.26
Site that misuses graphics; the entire page download is larger than 300KB.
Figure 7.27
Photo after being compressed.
Chapter 7
■
Understanding Graphics144
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
reduced to 5KB. This allows a lot of room for variation. While the quality
would be severely compromised at 5KB, saving the image at 65KB, too, is a
mistake. Most JPGs need only be saved with so much compression. After a

certain quality has been met, decreasing the compression only creates a larger
file size; it does not improve the quality of the image.
PNGs and GIFs, too, can be compressed many times. Because each color
that is eliminated from a PNG or GIF during compression is replaced by
another color, images that are saved as GIFs can be drastically reduced
many times.
2. Photo saved as an 8-bit PNG or GIF. While this was more of an issue in
years past, designers still save photos as GIFs. Figure 7.28 is a photo that,
when saved as a GIF, is 54KB. If the image were saved as a JPG, a file size of
14KB would provide acceptable image quality.
3. Solid colors saved as a JPG. The JPG format is ironic. Because it can
compress millions of colors so easily, it is easy for a designer to believe it can
do the same for limited colors. This is not the case. Figure 7.29 shows an
image that was saved as a GIF.
Figure 7.28
Image that should be saved as a JPG rather than a GIF.
Misusing Image Formats 145
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
Figure 7.30 is the same image saved as a JPG. Following are three problems
with the latter image:
■ Although compressed nearly 80 percent, Figure 7.30 is still 4KB, as
opposed to Figure 7.29, which is 2KB.
■ The lines on the right in Figure 7.30 are completely splotchy, unlike the
lines in Figure 7.29, which are crisp.
■ The level at which the JPG is compressed slightly changes the background
color.
4. Mixing JPG, PNG, and GIF formats to maintain one color. When com-
pressing an image as a JPG, the image sometimes loses its color accuracy.
In other words, the colors do not always remain the same after being

compressed. In Figure 7.31, a clock with a colored border was saved on a
background with the same color as the border. The clock with the border
was saved as a JPG, while the background was saved as a GIF.
Taking a closer look at the seam where the two images were mortised
together (Figure 7.32), it is apparent that the smoothness and clarity of
the clock’s border becomes splotchy.
Figure 7.29
Image saved as a GIF.
Chapter 7
■
Understanding Graphics146
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
5. Over compressing an image. While compressing an image is not overly
complicated, obtaining an eye for a properly compressed image takes a
little experience. What initially may look good to a designer one day, may
look overly compressed the next. When a JPG is overly compressed (see
Figure 7.33) from its original state (Figure 7.34), the image loses its
crispness.
Figure 7.30
Image from Figure 7.29 saved as a JPG.
Figure 7.31
Example of color loss between a GIF and a JPG.
Misusing Image Formats 147
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
One of the first places to show degradation is in solid colors, such as people’s
faces. All three faces and the lines on the floor in Figure 7.34 have lost their
clarity.
Figure 7.32

Zoomed-in view of splotchiness in Figure 7.31.
Figure 7.33
Image saved as a JPG with proper compression.
Chapter 7
■
Understanding Graphics148
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
When a GIF is overly compressed, the image becomes pixilated in areas with
more colors. Figure 7.35 is the original image, while Figure 7.36 is an overly
compressed version.
Notice how spotty the drop shadow within the inner white circle becomes in
Figure 7.36.
Figure 7.34
Same image as Figure 7.33 saved as a JPG with too much compression.
Figure 7.35
Image saved as a GIF with the correct number of colors.
Misusing Image Formats 149
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
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
will display them. The header image of Figure 7.26 was saved as a BMP. It is
159KB, but if it had been saved as a GIF, it could have been saved at
around 14KB.
Figure 7.37 is a photo saved as a JPG that is 4KB, while the same image
saved as a BMP file (Figure 7.38) is 166KB.
Figure 7.36
Image saved as a GIF with too few colors.

Figure 7.37
Image saved as a JPG (4KB).
Chapter 7
■
Understanding Graphics150
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
7. Saving large, animated GIFs. The GIF format is versatile in that a designer
can not only create a regular GIF and a GIF with a transparent color, but he
can also save a GIF that is animated. Unfortunately, just because a designer
can save an animated GIF does not necessarily mean it should be done
(Web design Rule 1).
Using an animated GIF can, at times, increase the usability of a site if the file is
typically under 10KB. However, when animated GIFs are used to display several
photos, a designer is not only incorrectly saving the photos as GIFs, but two,
three, or four of them are being saved into one animated GIF, amplifying the
mistake.
Understanding Graphics/Compression Software
Prior to the considerable growth of the Internet in the early to mid- 1990s, the
goal of graphics software was to create high-quality images, such as TIF, BMP,
and EPS files. The reason was that the graphics created by the programs were
mainly used for printers. Unfortunately, this created a problem for Web de-
signers. Because a minimum of 300dpi (dots per inch) to 600dpi was required by
printers, designers had to try to compress images to work with monitors, which
mostly show only 72dpi. Anything in excess of 72dpi for images increases the file
size without improving the quality of the image.
Large images coupled with slow modems severely handcuffed designers because
it was difficult to create fast-downloadin g sites. Although the software allowed
the designer the ability to compress images, opportunities were limited. To
compress a GIF, the designer could assign only a certain bit depth to an image.

Figure 7.38
Image saved as a BMP (166KB).
Understanding Graphics/Compression Software 151
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
In other words, the designer had the choice of saving the image with only 2, 4, 8,
16, 32, 64, 128, or 256 colors. To compress a JPG, the designer could assign
compression in only increments of 10. In other words, the designer had the
choice to save an image only at a level of 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10.
Fortunately, software companies have made great strides in offering designers
more flexibility in compressing images. Today, not only have these companies
created and improved their own image-compression software, but they also have
included this functionality in their image editing programs.
Compressing images has never been more flexible. Now, instead of determining
the compression of a PNG or GIF in groups of numbers, a designer can select the
specific number of colors and even the specific colors themselves to include in an
image. For even more control, the designer can even select certain colors that
must remain in an image as the total number of colors is reduced. Figure 7.39
illustrates the compression component included with Photosho p. It not only
shows a designer which colors are selected for the particular image, but it also
allows the designer to compare the original version with the compressed version
as changes are made.
Figure 7.39
Image-compression window in Photoshop.
Chapter 7
■
Understanding Graphics152
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
Note

When choosing to compress an image with the JPG format, the designer now has the flexibility of
increasing or decreasing compression by 1 percent instead of 10 percent at a time. This is incredibly
useful because it allows the designer to take advantage of a unique characteristic of the JPG format.
Sometimes when increasing the compression from, say, a quality level of 46 to 45, the quality of the
image decreases. How ever, then when quality is dropped one more percent to 44, the image quality
will shift enough to where it appears sharper than the lesser compression level of 45. This allows a
designer the ability to trim the excess file size down to the bare-bones minimum.
Summary
Much of the speed and quality of a site is determined by its graphics, which is
why it is import ant for a designer to understand how to create, use, save, and
compress images. While vector-based images are the newest technology avail-
able, 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 images if the correct
format is used. A designer can also use the formats incorrectly, which can com-
promise 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.
Summary 153
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
This page intentionally left blank
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
chapter 8
Creating CSS
Designs
While back-end development such as db-driven programming and ecommerce
functionality has made large strides over the years, so has the front-end design of
sites. In the past, to create a Web site that had the look and feel of traditional
graphic design, the designer had to resort to using nested HTML (now XHTML)
tables for the majority of content placement. The tables not only allowed the

designer to mortise images together, but they also allowed for the layout of
XHTML text that was styled using CSS. With the evolution of browsers over the
past several years, nearly all layouts can now be accomplished using CSS. While
Chapter 6, ‘‘What Is Needed to Build Mortised Sites,’’ outlines essential basic
information about CSS, this chapter explains the basics of how to use that code
to create such sites. The chapter also explains the differences between XHTML
table-based design and CSS-driven design.
CSS-Based Design Versus XHTML Table Design
The first question a designer usually asks when it comes to creating CSS designs
is, ‘‘HTML has worked well for so many years, why isn’t it good enough now?’’
Unfortunately, there is not one answer to this question. Yes, HTML sites have
been the main staple of designers since the mid-1990s. Yes, they are logical in the
way 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
155
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
be improved, and XHTML’s table-based design is no exception. There are several
advantages to creating CSS-based designs.
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 amount of code to do so is drastically reduced.
■ The combined download size, or weight, of the XHTML and CSS files is
considerably smaller. Whether a user has a low- or high-speed connection,
faster sites are always appreciated.
■ The structure and styling of the site can be easily added, edited, and deleted.

Although this concept is not new to those who create db-driven sites, CSS
allows for changes made to one page to cascade through an entire site.
■ Pages can be printed with much more control and consistency than
XHTML pages.
This is not to say that CSS is the perfect solution to coding Web sites. As with any
Internet technology, there are going to be some disadvantages. However, it can
be argued that the advantages outweigh the disadvantages, but the designer
needs to be aware of these shortcomings.
Disadvantages of CSS Designs
■ There is a learning curve. Even if a designer is familiar with CSS, using the
language to lay out an entire site takes longer to learn than just styling text.
The main reason is that there are idiosyncrasies with how CSS and its var-
ious elements interact in different browsers. The workarounds or hacks to
solve many of these idiosyncrasies are explained in the following chapters,
and they mitigate this disadvantage.
■ Although things are improving, CSS is not supported as consistently in
browsers as XHTML tables are, so it requires more testing by the designer.
Not only are there compliant and noncompliant browsers that handle CSS
Chapter 8
■
Creating CSS Designs156
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.