Graphic Design for the Web

This page was created for use in my former teaching at the University of Pittsburgh. It is only occasionally updated resulting in many links being more of historical rather than current usefulness. Over time many links will suffer link rot.


Image of visual spectrum   D

Any sufficiently advanced technology is indistinguishable from magic.

Arthur C. Clarke

***    Class Exercises    ***     Demonstrations    ***    Sample Images for Practice    ***


  1. Module 1 Introduction
  2. Module 2 Images and Image Formats
  3. Module 3 Images as Viewed
  4. Module 4 Color
  5. Module 5 Image Optimization
  6. Module 6 Image Acquisition
  7. Module 7 Other Options, Tools, the Future


Module 1 Introduction

  1. Why This Site Has Almost No Graphics
  2. Excessive (?) Inline Graphics
  3. Linked Graphics: Artistic Representations of Cyberspace
  4. University of Washington: A Pictorial History
  5. Buy a Furby!
  6. Intek WMS Warehouse Librarian

Module 2 Images and Image Formats

  1. Graphics on the Web    [W3C]
  2. How to use images in communication in general and on the Web in particular
  3. Using the Image Tag on HTML Pages
  4. Image Inclusion Examples Page

    Vector Graphics

    1. The Pen is Mightier than the Brush Tool  [When vector graphics is "better"]
    2. W3C Scalable Vector Graphics (SVG) "Home Page"
    3. Bitmaps and Vectors: Web Graphics Evolve
    4. Scalable Vector Graphics (SVG) 1.0 Specification  [W3C]
    5. Scalable Vector Graphics (SVG)   [Set-Cookie / CSS ]
    6. SVG Brings Fast Vector Graphics to Web
    7. XML and Vector Graphics
    8. Computer Graphics Metafile (CGM)   W3C's WebCGM Profile   Packet Switching Demo
    9. Macromedia: About Flash

  5. Web Graphics Overview  [1999]
  6. IMG Format Comparison


  7. Graphics Formats for the WWW: GIF
  8. Creating graphics for the Web: GIF examples
  9. GIF Animation Example
  10. The Transparent/Interlaced GIF Resource Page
  11. GIF89a-based Animation for the WWW


  12. Graphics Formats for the WWW: JPEG
  13. Creating graphics for the Web: JPEG examples
  14. JPEG 2000 More Than New Millennium Buzz


  15. Portable Network Graphics
  16. Miscellaneous PNG Images using IMG Tags
  17. Kodak Lossless True Color Image Suite   [Pile O' Pings]
  18. Adam 7 Interlaced Ping
  19. Gallery of Portable Network Graphics Images

  20. Compression: Optimizing Web Graphics
  21. Star-Birth in M16  [Comparison of GIF and JPG file sizes]
  22. GIF vs. JPEG  [Webmonkey article]
  23. View sample image files  [LLNL: WWW VIEWER TEST PAGE]
  24. OBJECT test suite

Module 3 Images as Viewed

    Monitor Display Issues

  1. Monitor Calibration (1)     Stanley Rowin Photography
  2. Monitor Calibration (2)     Stanley Rowin Photography
  3. Test Your Own Monitor
  4. CRT Monitors
  5. Why Do Images Appear Darker on Some Displays?   [An Explanation of Monitor Gamma]
  6. CGSD - Gamma Correction Explained
  7. Proper Gamma (Brightness) for Cross Platform WWW Images
  8. CGSD - Gamma Correction Home Page
  9. Video Modes, Resolution and Color
  10. Yale Style Manual-Color display primer
  11. BrowserSizer   [Check web pages at resolutions of 640, 800, 1024 and WebTV]
  12. The Web Ruler
  13. WebTV Viewer Tool  [Preview your sites on WebTV]


  14. Viewable With Any Browser  [Campaign for a Non-Browser Specific WWW]
  15. Navigator / Explorer Comparison - How NN and IE Differ in Rendering
  16. BrowserWatch
  17. Just about any browser... [Peter Evans' one cent on The Great Browser Issue]
  18. ZDNet's Browser Page
  19. NCSA Mosaic Home Page
  20. Netscape
  21. The Mozilla Museum
  22. Internet Explorer
  23. OPERA
  24. AOL Browser Information
  25. Cow or elephant?
  26. Which image is on the left?    [Edward Hoppers "Room in New York", or Peter Sellers with a rubber parrot?]

    Internet Appliances / Non-PC Browsers

  27. Are You Post-PC?
  28. Optimizing Web Pages For Handheld Devices
  29. Minimalist Web Design
  30. Designing for noncomputer browsers
  31. The Internet and Television   [WDVL]
  32. WebTV Setup
  33. WEB-TV   [Bill Gates bought it...why?]
  34. WebTV Design Guide For Webmasters
  35. Designing For WebTV
  36. AOL's Andreessen previews Web vs. TV 'war'

Module 4 Color

  1. Earl F. Glynn's Color Library   [Great starting place for color information]
  2. VisiBone Webmaster's Color Lab
  3. Webmaster's Palette Sites & Incredibly Useful Tools
  4. Palette Man  [Preset Color Palettes]
  5. Color Wheel Pro: See Color Theory in Action!
    1. Color Theory Basics
    2. Classic Color Schemes
    3. Visual vs. Mixing Color Wheel
    4. Color Meaning
  6. Learning to use color on your Web site
  7. Color Matters Web site
  8. Peter K. Kaiser's The Joy of Visual Perception: A Web Book
  9. Understanding the subtleties of color
  10. Human Factors International - Color and Highlighting Principles  [Good examples of effective color usage]
  11. Additive Color Synthesis
  12. Color Perception  [Laura E. Funderburk]
  13. Pantone's All About Color   [Color Information & Trends]
  14. A Palette of Colorful Expression  [Color and Human Emotions\Feeling]
  15. Color Model Museum   [Color representation models and diagrams]
  16. Color Spaces
  17. Color Theory-Subtractive Color
  18. Color Theory-Additive Color
  19. Rich Franzen's Wheel of Saturation, Intensity, and Hue
  20. RGB Triplet Color Chart  [Colors and their Hex Numbers]
  21. Color Names  [Click the name, see the color]
  22. VisiBone Webmaster's Color Lab  [Click on chart of 216 colors]
  23. 216 Color Square  [Image map of 216 colors]
  24. COLOR and USABILITY  [Readability of various text/background color combinations]

    Background Color

  25. The joy of Hex!
  26. Color Names  [Click the name, see the background color]
  27. Colour Selector  [Select all colors for your page]
  28. Palette Man
  29. RGB Hex Triplet Chart

    Background Images

  30. Backgrounds 4 Us
  31. Microsoft Images    [Free Images, Clip Art, Lines, etc.]
  32. Baylor's Textures for HTML 3.0 Clients
  33. Netscape's "The Background Sampler"
  34. The Background Archive from The Pixel Foundry

Module 5 Image Optimization

  1. PaintShop
  2. Adobe Photoshop Resources
  3. Adobe Photoshop 6.0
  4. Fine-Tuning Graphics for AOL Members
  5. Web Graphics Roundup: ImageReady - ImageStyler - Fireworks
  6. Creating Small, Fast Loading Graphics for Your Web Pages
  7. HTML Image Tips
  8. Webmaster Image Editing Class  [DreamQuest Software]
  9. Paint Shop Pro Tips & Tutorials
  10. Image Composer 1.5
  11. Making Transparent GIFs
  12. Optimizing Background Images  [Examples at bottom of page]
  13. Creating Better (Smaller) Graphics for the Web  [Designing for the Web, Jennifer Niederst]
  14. Tips on Making Images Load Faster
  15. Use of ALT texts in IMGs   [Fishydance  Look at the Alt tags!]
  16. Images on the Web
  17. Optimize Photoshop for Web Graphics
  18. Optimizing Web Graphics   []
  19. Creating Small, Fast Loading Graphics for Web Pages  [Walt Howe]
  20. Yale C/AIM Optimizing Graphics 1
  21. Yale C/AIM Optimizing Graphics 2
  22. NetMechanic's GifBot  [ Try: ]
  23. GIFCruncher   [An online Web graphics utility]
  24. graFX Image Editor   [Apply special effects and manipulate images]
  25. PiCoBello  [Image optimizer - Web Optimizer - Image Color reduction Technology]
  26. ImageReady 2.0 Completes Photoshop Package  [Review of ImageReady's features]
  27. Slicing With ImageReady  [Part two: slicing and rollover functions]   SeaGull    Seagull International, Inc.
  28. Web Developer® Example image map    Web Developer® Example button bar
  29. Frog Slice
  30. Frank.."Old Blue Eyes"
  31. "Frog in a Ball" Web Test
  32. Alice's Cottage
  33. PictureTel Federal Region [Web Development Site for PictureTel]

    Preloading Images

  34. Preloading Images - What's It All About?
  35. Webmonkey: reference: WM_preloadImages
  36. More Webmonkey: reference: WM_preloadImages


  37. Animation Tutorial  [Webmonkey article]
  38. Origins of American Animation, 1900-1921  [Note use of spliced animated gifs]
  39. GIF Animation Refresher  [Webmonkey article]
  40. Optimizing Animated GIFs  [Penguin example]
  41. MediaBuilder: Animation Factory    [Free Animated GIF Library]

    JavaScript Effects

  43. How to Steal JavaScript
  44. JavaScript MouseOver Image Changes  [Try this out]
  45. JavaScript Image Slideshow

    CSS / Image Filtering with CSS

  46. CSS: Cascading Style Sheets
  47. Image Filtering Examples and Exercises
  48. Image Filtering with CSS    [1997]
  49. Visual Filters and Transitions Reference


  50. Creating graphics for the Web: Anti-aliasing
  51. Anti-aliasing and Transparency
  52. Anti-aliasing [Links]
  53. Old Aunty Eh-Leeas (anti-alias)


  54. Image maps
  55. Server-Side Imagemaps
  56. Client-Side Imagemaps
  57. Image Map of the Mall in Washington, DC
  58. FEMA - Reference Library   [Image Map- Room Metaphor]
  59. TOUCH THE FROG [Image map and JavaScript Demo]
  60. 216 Color Square  [Image map of 216 colors]
  61. Web Developer® Example image map    Web Developer® Example button bar
  62. What's Wrong with Image Maps?
  63. Welcome to the Imagemap Help Page - IHiP
  64. Clickable Image Maps
  65. LiveImage
  66. Mapedit
  67. Web Hotspots 4.0 / Imagemapper
  68. Map This!


  69. GIF Construction Set
  70. The Banner Generator
  71. GIFWorks Create 3D Banner  [Select File, Click New 3D Banner...]
  72. Animation Online
  73. BANaRAMa
  74. Designing Catchy, Effective Banner Ads
  75. The Banner Generator Form  [Free Online Banner Maker]
  76. Article - Choosing a Banner Exchange Service
  77. Article -Can You Design a banner that will bring high click-through rates?
  78. SmartClicks
  79. LinkExchange
  80. San Francisco Bay Area Link Exchange
  81. Exchange-it
  82. HyperBanner Network,
    1. Banner Blocking
    2. WebWasher  [Wipes all the banner ads off your page]  [Try to use your back bytton from this page]
    3. Web Ad Blocking Under Linux/Unix, BeOS, MacOS and Windows
    4. Guidescope
    5. The Internet Junkbuster    modified Internet Junkbuster

Module 6 Image Acquisition

    Images, Graphics, Buttons, etc.

  1. Graphics Available Here
  2. Beach Wallpaper / Caribbean Wallpaper
  3. JZ Presents: Pardon My Icons
  4. IconBAZAAR
  5. Barry's Clip Art Server
  6. Buttons!   [Free Button Online]
  7.  [ Free graphics, fonts, animations, theme sets, backgrounds & custom graphics]
  8. Jelane's Free Web Graphics
  9. KODAK Digital Images Offering  [Practice Images]
  10. Digital Image Collections  [Berkely Digital Library SunSITE]
  11. Clearinghouse of Image Databases   [The University Of Arizona Library]
  12. VL-WWW: Images_and_Icons   [Large Index of Free Sites]
  13. Miscellaneous Graphics   [Selected web graphics]
  14. Selected Civil War Photographs Home Page   [Library of Congress]   Signalmen


  15. Sullivan's Online Scanning Resources
  16. Scanning 101  [Webmonkey article]
  17. A few scanning tips by Wayne Fulton
  18. The Illustrated Book Study: Digital Conversion Requirements of Printed Illustrations  [Cornell University]
  19. Scanning & Image Examples
  20. HP S20 -vs- Nikon LS30 Scanner Test
  21. Scanning Images for Web Use
  22. How to Scan 35 mm Slides On a Flatbed Scanner
  23. Scanning 35mm slides and 3-D objects
  24. Travel Kiosk: Digitizing Slides Information

    Kodak Photo CD

  25. KODAK PHOTO CD System  [Kodak Developer Relations Group- Products and Technologies]
  26. Photo CD Enabled Software  [Software That Supports Images on Kodak Photo CD Discs]
  27. Photo CD Samples

    Digital Photography / Imaging

  28. Kodak Digital Camera Samples    Parrot & people    Flowers    Woman and children    Child
  29. PEI tutorials
  30. Kodak's shortsighted DC210
  31. Vivitar Digital Cameras
  32. Copyright

  33. An Example of Copyright Infringement or Web Page Piracy
  34. Purloining and Pilfering
  35. U.S. Copyright Office Home Page
  36. Copyright and Intellectual Property Issues
  37. Copyright Clearance Center
  38. Copyrighted Music and Internet Publishing
  39. Crash Course in Copyright
  41. Ten Big Myths about Copyright
  42. The Washington State University Copyright Office
  43. U.S. Intellectual Property Information
  44. The First U.S. Copyright Law    [July 17, 1790]
  45. Don't Trust InterTrust
  46. Digital Rights Management
    1. The Technology of Rights: Digital Rights Management    PDF  View Cybercast (1 hour, 27 minutes - requires Real Player to view).
    2. Rights Management Add-on for Internet Explorer
  47. Tevis/MCS Copyright

Module 7 Other Options, Tools, the Future

  1. ImagePump Home Page    Awesome Product: ImagePump
  2.   [Online Digital Photolab]
  3. Ofoto   [Online Digital Photolab]
  4. Digital Imaging Group
  5. A Webcam for the Blind?  [a vision substitution device for the blind]
  6. Ulead Systems - Ulead COOL 360 Samples     Plugin  (760Kb)    MOV Sample  (282KB)
  7. IPIX Interactive Pictures Corporation
  8. Photomosaics: Runaway Technology, Inc.  Liberty
  9. VW Jetta 360 cam    [Move around inside the car]
  10. Apple QuickTime
  11. Apple - QuickTime - QuickTime VR Authoring
  12. QTVR Online Virtual Tutor
  13. Welcome to the VRL Home Page !
  14. Virtual Reality: A Short Introduction
  15. The VRML Repository   [Virtual Reality Modeling Language: VRML]
  16. The VRML Repository: Browsers and Plug-ins
  17. Canadian Online Shopping -
  19. X-33: Reusable Launch Vehicle - Space Transportation  [IPIX example]
  20. Step Inside 360
  21. Professional Photographers on the Internet
  22. Adding Music to Your Pictures
  23. AnaBuilder   [make stereoscopy easy ]

** Home ** Class Pages ** Site Map **

David J. Hark
P. O. Box 201 Shepherdstown, WV 25443-0201
Last updated: 6 July 2005


© 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007 David J. Hark