The Whys and Wherefores of Web Graphics

1
Lesson 7

• The Whys and Wherefores of Web Graphics

2
Objectives

• Upon completion of this lesson, you should be
  able to
• Determine how graphics can become part of a Web
  sites message and explain the different roles
  graphics can play in a Web page.
• Examine how graphics are used as interface
  elements.
• Discover how the theme can be enhanced by
  graphics.
• Understand the concepts of pixels, additive and
  subtractive colors, palettes, anti-aliasing, and
  dithering.
• Create GIF and JPEG graphics.

3
Graphics Made the Web Popular

• Inline graphics appear in the same browser
  window as text
• Mosaic Was the first browser that would display
  graphics.
• Netscape Was the first commercial browser.
  Netscape made the Web popular.
• Internet Explorer Microsofts graphical Web
  browser.

The Internet Explorer browser displays graphics.
Step-by-Step 7.1
4
The Roles Graphics Play

• Graphics can become
• Part of the overall message of the Web site.
• Part of the user interface and navigation system.
• Part of the visual theme.
• In this example, an impressive image is the major
  part of the message of the site.

Step-by-Step 7.1
5
Graphics as Part of the Message

• Graphics that are part of the message of a Web
  site tend to be
• Large.
• Photographic or detailed.
• Important.

Step-by-Step 7.1
6
Graphics as Part of the Message

• Photographic images are often used when a picture
  communicates the message better than a written
  description.
• A representation is a graphic that represents
  something that is real.
• Representations and photographic images tend to
  be very detailed.

Step-by-Step 7.1
7
Graphics as User Interface and Navigation Elements

• Icons symbolic graphics that help the user
  identify what each selected item will do, such
  as
• Formatting and toolbar options in Microsoft
  PowerPoint.
• Tabs that serve as interface elements on a Web
  page.
• Symbolic graphics or abstracts that can be turned
  into hypertext links.

Step-by-Step 7.1
8
Graphics as Part of the Theme

• Graphics can enhance the theme or style of the
  page. For example, the beautiful graphics on this
  Web site match the pyramid theme.

Step-by-Step 7.1
9
Metaphors

• A metaphor compares something to something else.
  For example, some may say that a computer is like
  a brain or that a high-speed train is like a
  bullet. On a computer desktop, the trash can
  icon will let you trash or delete a file.
• Many Web sites use metaphors to give inspiration
  to hand guide the graphical development of their
  theme.

Step-by-Step 7.1
10
Computer Graphic Fundamentals

• Computer graphics use very different color
  schemes from traditional oil and watercolor
  mediums
• Web graphics are usually bright.
• Web graphics can be animated.
• Web graphics can be compressed or made smaller.

Step-by-Step 7.2
11
Computer Graphic Fundamentals

• Computer pictures are made of tiny dots called
  pixels. The word pixel is short for picture
  element.
• When viewed with a magnifying glass, pixels look
  like little mosaics.
• In this graphic, little squares of color make up
  the image. As the image shrinks, it looks
  normal, but if you look closely or make the
  graphic larger, you will see the jagged squares
  of color

Step-by-Step 7.2
12
Computer Graphic Fundamentals

• Resolution is measured in dpi. On the Web, you
  are only allowed 72-96 dpi or dots per inch.
• In printed documents, 300,600,1200 or even higher
  dpi is the rule.
• You can change the resolution/dpi by adjusting
  the number of pixels in a program like Adobe
  Photoshop.

Step-by-Step 7.2
13
Color

• Computers are based on additive colors, not
  subtractive colors.
• Web graphics are usually bright.
• Web graphics can be animated.
• Web graphics can be compressed or made smaller.

Step-by-Step 7.3
14
Color

• Computers are based on additive colors, not
  subtractive colors.
• The additive primary colors are red, green, and
  blue. The more colors you apply, the brighter
  colors become.
• The subtractive primary colors are red, yellow,
  and blue. The more colors you apply, the darker
  colors become.

Step-by-Step 7.3
15
Palettes

• Computers use binary numbers, that is, they can
  only multiply by twos! For example, 28 256.
  Therefore, when a picture has a color depth of
  8-bits, 256 different colors can be represented.
  (Older computers can only display a few colors.)

• An 8-bit color depth has 28 256 colors.
• A 16-bit color depth has 216 65,526 colors.
• A 24-bit color palette has 224 16,777,216
  colors.

Step-by-Step 7.3
16
Palettes

• Here is how the Macintosh and Windows computers
  represent 8-bit / 256 colors in color palettes
• Macintosh 256/8-bit color palette.
• Windows 256/8-bit color palette.
• Netscape designated 216 safe colors to be sure
  that all computers can view the graphics.

Step-by-Step 7.3
17
Making Pixels Look Good

• Due to the low resolution found on computers,
  graphics often display jagged, square edges.
  This jaggedness is called aliasing.
• To fix this, some pixels around an objects edge
  are colored with transition colors, which makes
  them look smoother. This is called anti-aliasing.

Step-by-Step 7.3
18
Making Pixels Look Good

• Another technique, called dithering, places two
  dots of different colors together, creating the
  illusion of more in between colors (i.e., a red
  pixel next to a blue pixel will look magenta).
  The first picture below is in high resolution.
  The other uses an 8-bit color palette with
  dithering. While not as sharp, the image isnt
  bad, given the limitations of the resolution.

Step-by-Step 7.3
19
Graphics Formats

• Two graphics formats dominate the Web. Graphics
  should be converted to one of these two formats
• GIF Graphic Interchange Format.
• JPEG Joint Photographers Expert Group Format

Step-by-Steps 7.3 7.4
20
Graphics Formats

• GIF files have the following characteristics
• Easily compressed.
• Easily transmitted.
• Must be 8-bit color (256 colors).
• Can appear in phases.
• Can be animated.
• Can be made transparent.
• Compatible with most older Web browsers.

• Use with small images containing simple colors,
  such as buttons, logos, or icons.
• The image below will display well in a GIF
  format.

Step-by-Steps 7.3 7.4
21
Graphics Formats

• JPEG files have the following characteristics
• Designed for use with photographs.
• 8-bit (256-color) graphics are not allowed.
• Allows various levels of compression to preserve
  quality images.
• No transparency allowed.

• Not a good choice for buttons or other screen
  interface elements.
• The high-resolution image below will display well
  in a JPEG format.

Step-by-Steps 7.3 7.4
22
Building and Testing Graphics

• Stop for a time and evaluate your graphics
• Ask an artist and/or a focus group to evaluate
  your graphics.
• Number and name your graphics properly.
• Keep original graphics in case you accidentally
  make a mistake as you improve them.

Step-by-Step 7.5
23
Summary

• In this lesson, you learned
• How graphics can become part of a Web sites
  message.
• How graphics are used as interface elements.
• How a Web sites theme can be enhanced by
  graphics.
• The concepts of pixels, additive and subtractive
  colors, palettes, anti-aliasing, and dithering.
• How and when to create GIF and JPEG graphics.