Graphic Design for the Web

Note:
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.

   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    Heavy.com   Packet Switching Demo
   9. Macromedia: About Flash

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

   GIF

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

    JPEG

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

    PNG

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]

    Browsers

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
35. BEACH WALLPAPER / CARIBBEAN WALLPAPER

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   [webreference.com]
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: http://www.whitehouse.gov/WH/images/bevel.jpg ]
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

    Animation

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]
42. THE HAMPSTER DANCE

    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

    Anti-aliasing

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

    ImageMap

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!

    Banners

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. 4YEO.com  [ 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

    Scanning

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

Copyright

32. An Example of Copyright Infringement or Web Page Piracy
33. Purloining and Pilfering
34. U.S. Copyright Office Home Page
35. Copyright and Intellectual Property Issues
36. Copyright Clearance Center
37. Copyrighted Music and Internet Publishing
38. Crash Course in Copyright
39. KUESTERLAW
40. Ten Big Myths about Copyright
41. The Washington State University Copyright Office
42. U.S. Intellectual Property Information
43. The First U.S. Copyright Law    [July 17, 1790]
44. Don't Trust InterTrust
45. 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
46. Tevis/MCS Copyright

Module 7 Other Options, Tools, the Future

1. ImagePump Home Page    Awesome Product: ImagePump
2. Sutterfly.com   [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 - NorstarMall.ca
18. CYBERWORLD
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 ]