Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network


CH11 Graphics Notes



from webstyleguide.com

from webstyleguide.com



Total Views
Views on SlideShare
Embed Views



3 Embeds 118

http://pic.fsu.edu 64
https://pic.fsu.edu 48
http://www.pic.fsu.edu 6


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

CH11 Graphics Notes Presentation Transcript

  • 1. Graphics CGS2826 Web Design Program in Interdisciplinary Computing Florida State University From Web Style Guide, Chapter 11: Graphics
  • 2. What are the most effective uses of graphics, and what’s the best way to integrate words and images into an understandable story for the user?
  • 3. Roles of Web Graphics
    • Define site boundaries
    • Provide and enhance content: illustrations, diagrams, charts, visualizations, word art
  • 4.  
  • 5. Characteristics of Web Graphics
    • RGB model is called “additive” because a combination of the three pure colors—red, green, and blue—“adds up” to white light.
    • 16.8 million colors that are theoretically possible in a 24-bit or 32-bit display screen .
    • 72 to 96 pixels per inch (ppi)
  • 6. Gamma The degree of contrast between the midlevel gray values of an image.
  • 7. Graphics and Bandwidth
    • Some web users access the Internet via modem, slow wireless connection, or cell phone network, and others view pages on the small display of a handheld device such as a cell phone or an iPod Touch. This reality imposes limits on the file size and physical dimensions of web graphics.
  • 8. Graphics File Formats
    • GIF – 8 bit, 256 colors
      • Compression: lossless, ideal for logos
      • Dithering: reducing color amnt to 256
      • Interlaced: loads entire image from low to high rez
      • Transparent: select background color as trans
    • JPEG – 24 bit, 16.8 million colors
      • Great for photos
    • PNG
      • Combines best of GIF and JPEG but may lack support
  • 9. GIF Dithering
  • 10.  
  • 11.
    • Advantages of GIF files
    • gif is the most widely supported graphics format on the web
    • gifs of diagrammatic images look better than jpegs
    • gif supports transparency and interlacing
    • Advantages of JPEG images
    • jpeg achieves huge compression ratios, which mean faster downloads
    • jpeg produces excellent results for most photographs and complex images
    • jpeg supports full-color (24-bit, true-color) images
  • 12. Display vs. Print Four-color printed images are separated into four subtractive printing colors (cyan, magenta, yellow, and black).
  • 13. Display vs. Print
  • 14. Coding graphics
    • Include height and width specs for faster loading pages
    • Include “alt” as a fall back
    <img src=&quot;up.gif&quot; height=&quot;10&quot; width=&quot;10&quot; alt=&quot;Go to top of page&quot;>
  • 15. Color Combos http://www.colorsontheweb.com/colorcontrast.asp
  • 16. Harmonious Combos