Docstoc

Using Color Effectively in Computer Graphics

Document Sample
Using Color Effectively in Computer Graphics Powered By Docstoc
					           Using Color
           Effectively in
           Computer Graphics
Lindsay W. MacDonald
University of Derby, UK

                               Presented by:

           Sally Divita & Brian Staats
       Color calibration




           Eye-one
http://usa.gretagmacbethstore.com/
Gestalt laws
http://webcolorschemes.com/
http://www.colorschemer.com/
  Color wheel




 Color Picker Demo
                   Advertising



Rules for color use are significantly different
        than for information displays
    Advertising: Examples
   Billboards
   Multimedia Kiosks
                           Exhibition stands
   Product packaging      TV/video
   Web site banners       Print media
         Advertising: 2 Phases
1.   Attract Attention (<1 minute)
      Use pure primary and secondary colors
       on a black background
      Fatigues the eye, can not sustain this


2.   Persuade viewer to buy
      Use more balanced, subdued colors
      Take advantage of the emotions that colors elicit
         (red=passion, green=nature, blue=peace, etc.)
Advertising: Browser Safe Colors
   In 1999 when the article was written, the
    browser safe color palette was 216 colors
    http://www.lynda.com/hex.asp#

   Today, there are 4096 web safe colors
    http://www.ficml.org/jemimap/style/color/wheel.html

   Today, phones & PDA’s are 8 bit so the
    old web safe color palette is valid again

   www.colorbrewer.org
Dithering is reducing colors to 216, see: http://webstyleguide.com/graphics/dither.html
                Text
Legibility is the most important aspect
            Text: Legibility
   Black text on light gray background is best
    for word processors

   Other good alternatives: black or blue on
    white or yellow or vice versa

   Particularly bad:
    combos using
    red, green, and
    magenta cause
    “vibrations”
    Text: Legibility continued
   Avoid large areas of white screen
     Glare is fatiguing
     Increases chance of flickering in periphery
     Reduces life of display


 Highlighting   is a good differentiator

   14 point font is suggested
        Information

Color can increase information content
      and facilitate interpretation
         Information: Factors of
          Successful Color Use
   Discernibility – how easy is it to distinguish an
    object from its background?

   Conspicuity – how obvious is the object relative
    to the objects around it?

   Salience – how well does the object “pop” from
    the overall display?
Information: Color Coding
   Nominal
     Colorsassigned to parts/states of system
     Does not indicate difference in value/order
     EXAMPLE: Metro map with colored lines


   Ordinal
     Color
          indicates value of 1+ variables
     EXAMPLE: heatmap
      Information: Constraints on
          Color Coding Usage
   Observer’s ability to discriminate different
    colors

   Observer’s ability to remember meanings
    of colors

    Ergo, limit number of colors used to 5 - 7
        Information: Advice
   Use common or application-specific associations
    for ordinal coding

   Include a color key

   Use transparency to overlay information

   Use strong colors sparingly on dull background
    tones
     Visualization
Definition: Bringing out the meaning of
 data by providing graphics that help
        communicate knowledge
    Visualization: Color Usage

   Emphasize desired information

   Render an environment
        Visualization: Advice
   Do not use colors that do NOT add or
    support meaning, as this causes confusion


       Try Foobar...
       You'll never go back
       to your old one again !
Visualization: Advice
   Saturation can relate depth
    EXAMPLE: color coding planes on radar

   For modeling, use only enough color to be
    realistic

   Monitoring applications are enhanced by
    use of color to indicate changes in state,
    reserving strong colors for alarms
             Imaging

Definition: Imaging displays are predominantly
            1+ photorealistic images
      Imaging: Advice
 Background neutral gray to prevent
  undesirable side effects
 Light backgrounds make images look
  darker and lower in contrast and vice versa.
 Text captions should be black or white
 Narrow white border around an image
  helps isolate it and makes for more
  accurate color judgement
      Imaging: Reproduction
Consider:
 The source:
     Themedium
     How it was digitized
     How it was encoded

 The characteristics of the display
 Reproduction objectives
Imaging: Reproduction Problems
   If some variables of reproduction are
    unknown, reproduction is error prone

   Computers don’t provide high-quality color
    management capabilities for calibration

   International Color Consortium (ICC) is
    working on resolutions www.color.org
             Summary

Many factors effect color in computer graphics,
         so there is a large variance
          in how color is perceived
Summary: Viewing Factors

 Type of display
 Viewing environment
 Visual capabilities of user
 Task/application requirements
 Relation to other displays
     Summary: 5 Golden Rules
1.   Consider user requirements and established
     expectations
2.   Adhere to conventions for a domain
3.   Consider all visual characteristics when designing
     screens
4.   Use color consistently
     within an application
5.   Use color sparingly
        Article Comments
   Very well written and organized – each section
    has practical “Color Selection Guidelines” to
    provide advice as to how to implement what has
    been discussed

   Thoroughly researched

   Excellent examples and supporting graphics
       Color Picking Tools
   http://www.webweaver.nu/color.shtml
        color combo suggestions
        color palette generator based on an image
        color wheel
        web safe colors
        RGB to hex converter

   http://www.colorblender.com
        for mixing your own blends of colors

   http://tips.webdesign10.com/color-and-web-
    design
        named colors

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:26
posted:9/4/2011
language:English
pages:29