Web 210 Chapter 7
Lecture Notes
In addition to reading Ch. 7 of our main textbook,
read Ch. 7 (Graphics)
of "The Web Style Guide"
Objective #1: Understand the various graphic file formats and use graphics
effectively in Web pages.
-
Which format to use?
- GIF (Graphics Interchange Format from Compuserve) pronounced
gif or jiff, file extension is .gif
- advantages: lossless, good for indexed color, can be interlaced,
can make one color transparent
- disadvantages: limited 8-bit
color depth, not good for lifelike photographs, <= 256 colors,
may be dithered, no compression
- interlaced GIF's - makes graphic "appear" to load faster
giving user chance to stop download
- transparent GIF's - can set one color as transparent to blend the
image with the Web page background
- Use GIF for graphics with few colors
- Activity: Make a transparent GIF with Macromedia Fireworks.
Obtain a graphic from www.free-graphics.com
if necessary. To copy a graphic from another Web pages, you simply
right-click the graphic on a PC or hold down the mouse over a graphic
on a Mac.
- Activity: Use the Fireworks Export Preview to examine different
numbers of colors in a gif and the corresponding quality of the graphic.
Delete selected colors from the file and watch the resulting file
size decrease.
- JPEG (Joint Photographic Experts Group) file extension
is .jpg or .jpeg
- advantages: millions of colors due to 24-bit depth, good for full
color photographs, "continuous tone" images, uses compression
to reduce file size, better overall compression than GIF
- disadvantages: lossy, not good for black & white or indexed
color, slower to download due to decompression process
- Use JPEG for images with high and subtle color variation
- A JPEG optimizer can be used to decrease file size without having
much of an effect on the quality of the image. See JPEG
Wizard or JPEGCruncher
- Activity: Use the Fireworks Export Preview to examine different
levels of compression in a jpeg and the corresponding quality of the
graphic.
- PNG (Portable Network Graphics) pronounced "ping"
- advantages: not patented, 48 bit color depth, lossless compression,
gamma correction, supports true alpha channel transparency
- disadvantages: recent browsers only, bug in IE doesn't support transparency
- Where to find graphics?
- digital camera
- scanner - scan at 72 ppi (pixels/dots per inch - typical screen resolution)
- public domain collections such as:
- stock photo collections - each graphic costs from $20 and up
- clip art CD-ROM's
- a conservative rule of thumb is to keep individual graphics to less than
40 kilobytes is a rule-of-thumb
- slice large graphics for faster page downloads
- PC's and Mac's display graphics differently therefore gamma corrections
are necessary to avoid the inevitable effect of having PC-created graphics
appear to light on Mac's and the effect of having Mac-created graphics appear
to dark on PC's
- most graphics authoring programs (PhotoShop, etc.) allow you to "Save
As.." JPEG & GIF
- graphics conversion programs will allow you to convert graphics from
one format to another (including formats that are not used on the Web) - PC
users try ViewPro and Mac users may try GraphicConverter or DeBabelizer
- You can find many good freeware & shareware graphics authoring, conversion,
and viewer applications from sites such as download.com.
Objective #2: Understand how to use color in Web pages.
- Color Depth
- Computers use RGB rather than CMYK color. Colors as printed on a company's
stationary or printed brochures may not precisely match the color in the
Web site. You can carry a Pantone Color Reference Card with you to a client's
office to obtain the best match with their printed logo and stationary.
Or, you can simply bring up a Web browser to a page like Weinman's browser-safe
palette. Pantone sells a number
of tools
for web developers.
- The color resolution settings (256, thousands, or millions of colors)
of a person's computer can cause the colors that you choose to be displayed
differently than you expect. A client's monitor may show colors differently
from your computer even if they are both Windows PC's! This is due to
the fact that a monitor with a lower color resolution setting will dither
graphics. Activity: View a web page under two or more different levels
of color resolution.
- But, since most people now have color resolution settings in the thousands
or millions of colors, you really do not need to limit yourself to the
Web 216 (PC & Mac) or Web 256 (PC only) browser-safe palettes. See
lynda.com/hex.html for a full
explanation. You definitely should not limit a real-life photo to one
of these restricted palettes since the resulting dithering will degrade
the image unnecessarily for most of your audience. Rather, you should
use an adaptive palette with no dithering and let the user's browser perform
the dithering where necessary.
- Dithering
- Use the Web palette (brower-safe palette) of 216 colors if you can so
that your pages look consistent on all computers including older ones
where the color resolution is set rather low. Especially, if you are creating
a gif or flat-color logo, then you should use a color from the 216 so
that you can be sure it won't be dithered on a user's computer. Flat-color
areas look really bad if they are dithered.
- Web 216 arranged by hue
- Web 216 arranged by value
- You have about 7 seconds to get the user's attention...try doing it with
color! But you probably shouldn't use more than 4 colors in a site.
- Weinman recommends designing graphics in shades of gray to appreciate the
use of values and contrast in addition to hues. Try copying a graphic from
a professional Web site and change the graphic to grayscale in Fireworks to
see appropriate use of value and contrast.
- Consider the use of analogous and monochromatic color schemes.
- See Weinman's color
inspirational sites.
- Activity: Look at intentional color schemes in professional Web sites.
- Activity: View the Weinman color schemes under Dreamweaver's Commands/Set
Color Scheme... menu command
- You can use this color schemer
to choose an effective combination of colors for your web site. Remember to
use color for consistency and variety throughout your site.