using color effectively in computer graphics lindsay w. macdonald university of derby, uk presented...
TRANSCRIPT
![Page 1: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/1.jpg)
Using Color Effectively in Computer Graphics
Lindsay W. MacDonald
University of Derby, UK
Presented by:
Sally Divita & Brian Staats
![Page 2: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/2.jpg)
Color calibration
Eye-onehttp://usa.gretagmacbethstore.com/
![Page 3: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/3.jpg)
Gestalt laws
![Page 4: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/4.jpg)
Color wheelhttp://webcolorschemes.com/
http://www.colorschemer.com/
Color Picker Demo
![Page 5: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/5.jpg)
Advertising
Rules for color use are significantly different than for information displays
![Page 6: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/6.jpg)
Advertising: Examples Billboards Multimedia Kiosks Product packaging Web site banners
Exhibition stands TV/video Print media
![Page 7: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/7.jpg)
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.)
![Page 8: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/8.jpg)
Advertising: Browser Safe Colors In 1999 when the article was written, the
browser safe color palette was 216 colorshttp://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
![Page 9: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/9.jpg)
TextLegibility is the most important aspect
![Page 10: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/10.jpg)
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, andmagenta cause “vibrations”
![Page 11: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/11.jpg)
Text: Legibility continued
Avoid large areas of white screenGlare is fatiguing Increases chance of flickering in peripheryReduces life of display
is a good differentiator
14 point font is suggested
Highlighting
![Page 12: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/12.jpg)
Information
Color can increase information contentand facilitate interpretation
![Page 13: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/13.jpg)
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?
![Page 14: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/14.jpg)
Information: Color Coding Nominal
Colors assigned to parts/states of systemDoes not indicate difference in value/orderEXAMPLE: Metro map with colored lines
OrdinalColor indicates value of 1+ variablesEXAMPLE: heatmap
![Page 15: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/15.jpg)
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
![Page 16: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/16.jpg)
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
![Page 17: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/17.jpg)
Visualization
Definition: Bringing out the meaning of data by providing graphics that help
communicate knowledge
![Page 18: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/18.jpg)
Visualization: Color Usage
Emphasize desired information
Render an environment
![Page 19: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/19.jpg)
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 !
![Page 20: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/20.jpg)
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
![Page 21: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/21.jpg)
Imaging
Definition: Imaging displays are predominantly 1+ photorealistic images
![Page 22: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/22.jpg)
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
![Page 23: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/23.jpg)
Imaging: Reproduction
Consider: The source:
The mediumHow it was digitizedHow it was encoded
The characteristics of the display Reproduction objectives
![Page 24: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/24.jpg)
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
![Page 25: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/25.jpg)
Summary
Many factors effect color in computer graphics,
so there is a large variance
in how color is perceived
![Page 26: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/26.jpg)
Summary: Viewing Factors
Type of display Viewing environment Visual capabilities of user Task/application requirements Relation to other displays
![Page 27: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/27.jpg)
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
![Page 28: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/28.jpg)
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
![Page 29: Using Color Effectively in Computer Graphics Lindsay W. MacDonald University of Derby, UK Presented by: Sally Divita & Brian Staats](https://reader036.vdocument.in/reader036/viewer/2022062314/56649d975503460f94a8114f/html5/thumbnails/29.jpg)
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.comfor mixing your own blends of colors
http://tips.webdesign10.com/color-and-web-design
named colors