skip to content

Chapter 6: Graphics


Contents of Book Chapter

  • Principles and Terminology
  • Image Formats for the Web
  • Acquiring Images
  • Creating and Editing Images
  • Background Images
  • Hints on Working with Graphics
  • Animation
  • Graphics and Accessibility

Resources

Image Editing Software

Sources for Stock Images

Image Design

  • Dingbat font chart (.rtf file, so that you can import it into your word processor and add your favorite dingbat fonts, if you choose).
  • Idea Index: Graphic Effects and Typographic Treatments, by Jim Krause. Cincinnati, Ohio: North Light Books, 2000. Ideas for graphic effects.
  • Webmonkey: The Web Developer’s Resource, http://webmonkey.wired.com/webmonkey/design/graphics/ .
  • Getting Permission: How to License and Clear Copyrighted Materials Online & Off, by Richard Stim. USA: NOLO, 2004.
  • The Visual Display of Quantitative Information, 2nd edition, Edward R. Tufte. Cheshire, Connecticut: Graphics Press, 2001.
  • JavaScript snippets for animation: www.javascriptsource.com .

back to top...

Exercises
(mouseover answer boxes to reveal answers)

Check Your Reading Comprehension

  • Alpha transparency supports (choose one):
    • multiple levels of transparency in a single image.
    • multiple levels of transparency, but only one level per image.
    • two levels of transparency: fully transparent and fully opaque.
    • multiple levels of transparency, but only in JPGs.
  • Anti-aliasing (choose one):
    • is a check done by Dreamweaver to make sure that identical images don’t have different URLs.
    • is to be avoided, because it results in pixelated edges on diagonal and curved lines.
    • smoothes the edges of diagonal and curved lines.
    • uses alternating pixels of two available colors on the palette to simulate a third, unavailable color.
  • The method of resampling that usually makes the most intelligent decisions is (choose one):
    • bilinear interpolation
    • soft interpolation
    • bipolar interpolation
    • bicubic interpolation
  • Which of the following compresses efficiently by the GIF compression algorithm? (choose one):
    • horizontal stripes
    • vertical stripes
    • anti-aliasing
    • dithering
    • texture
  • Fireworks usually creates seamless tiles at what dimensions (choose one)?
    • 10 x 10 pixels
    • 25 x 25 pixels
    • 50 x 50 pixels
    • 100 x 100 pixels
  • Graphics designed to represent data of some sort, such as graphs, charts, product pictures, and maps, are called
  • content graphics

  • Graphics that are purely decorative or just support branding are called
  • thematic graphics

  • The process of adding or subtracting pixels as a way of resizing a bitmapped graphic is called
  • resampling

  • When a compression algorithm loses some of the quality of the original image upon saving, it’s said to be
  • lossy

  • JPG compression adds random pixels of a different color to areas of solid color. These random pixels are called
  • artifacts or noise

  • JPG stands for
  • Joint Photographic Experts Group

  • GIF stands for
  • Graphic Interchange Format

  • The term for a typeface that includes shapes, icons, or ornaments instead of traditional characters.
  • dingbat typeface

  • You have a printed photograph that is 4 x 6 inches, and you want to display it on the web at 200 x 300 pixels. What resolution should you choose for the scan?
  • 50 dpi

  • You have a printed photograph that is 4 x 6 inches, and you want to display it on the web at 200 x 200 pixels. What do you need to do either before or after the scan, so that the photo has the appropriate proportions?
  • crop it

  • Width-to-height ratio of an image is termed the
  • aspect ratio

  • The process of creating the “in between” frames between two keyframes of an animation
  • tweening

  • Write the CSS to position a background image at the top of a page, centered and not repeating.
  • body {
        background-image:url(someImage.gif);
        background-position:center top;
        background-repeat:no-repeat;
    }

  • Fill in the blanks below to use CSS to position a foreground GIF image in front of a background JPG image in a table cell.  
  • <td style="background-image:url(bgImage.jpg)">
        <img src="foregroundImage.gif" />
    </td>

  • Fill in the blanks below to lock the background image in place so that it doesn’t scroll along with the content.
  • <body style="background-image:url(someImage.gif);
        background-attachment:fixed;">

back to top...

Critical Thinking Exercises (long answer)

Use vocabulary and concepts from the text to answer the following questions. Provide examples to document your explanation.

back to top...

Hands-on Exercises

  • Pick an existing web site on the web and evaluate it based on the graphics checklist earlier in the chapter. What did the designers do right, and what did they do wrong?
  • Surf the web to find a site that has “killer” graphics, and another one that uses them poorly. Compare and contrast what the “killer” site did well that the other site didn’t do so well. How would you redesign the site that uses graphics poorly?
  • Revisit a web site that you choose to evaluate in the prior chapter. Enhance your prior evaluation by checking the site against the checklist in the chapter summary. Be as specific as possible. Compare your latest analysis with your earlier analyses. Have you become more skilled in analyzing web site design? Save your evaluation for use later, as we encounter appropriate chapters.
  • After completing any of the previous three analysis questions, trade your with a peer. Discuss the similarities and differences in your analyses. When you came to different conclusions, each of you should explain how you came to your conclusions.
  • Create several versions of a logo for your own ongoing web site. Experiment with different typography, icons, pictures, colors, effects, and backgrounds. Choose one and save it as both a GIF and a high-quality JPG. Which looks better? Which file is smaller? Tweak the logo to reduce the file size, while at the same time preserving the graphic appeal of the logo. Keep track of the tweaks you applied as well as the resulting file sizes after each.
  • Scan a photo of your choice. Edit versions of the photo, using the following:
    • Apply at least four different edge treatments.
    • “Cut out” a silhouette from the photo, leaving part of the background transparent. 
    • Increase and decrease contrast.
    • Increase and decrease color saturation.
    • Skew the entire photo toward one color, such as red, or blue, or purple.
    • Convert the photo to grayscale and sepia-tone.
    • Posterize the photo at various levels: 16 colors, 8 colors, 4 colors, 2 colors.
    • Try other artistic effects offered by your image editing program, such as “twist and fade”, “liquefy”, “fade”, “motion blur”, etc.
    • Export at least one version of the photo as JPGs at four different compression levels, and as a GIF. Compare quality and files sizes.
  • Create both a full-size background image and a seamless background tile for your personal web site. Decide whether or not to use either one. (Not using a background image at all is a perfectly valid choice.)
  • Create a small GIF or FLASH animation of your choice, using whatever animation tool is at your disposal. The animation should include at least five separate symbols, 10 key frames, and appropriate tweening between keyframes. Use at least one example each of shape, size, color, and position tweening. Animation ideas: bouncing balls, a fish swimming through waves, stick figures playing a game, a tree growing from seed or changing with the seasons.

back to top...

Ongoing Case Study Exercise

Create three different versions of a logo for your web site. Decide if you want to use a background image, and, if so create at least three possible background images. 

Also create least six other images for the site and decide where you might use them. Insert each version of the logo into a version of your home page, and place the other images into appropriate pages. Also test the background images, if applicable. Decide whether the various images promote the purpose and ambiance of the site, as well as appeal to the target audience. Update the graphics to reflect any changes and finalize which graphics to retain on the site.   

back to top...


| Home | General | 1: Introduction | 2: Site Analysis | 3: Navigation |
| 4:Layout | 5: Color | 6: Graphics | 7: Typography | 8: Forms |