Game design 2 (2013): Lecture 13 - Colour
-
Upload
david-farrell -
Category
Entertainment & Humor
-
view
1.627 -
download
0
description
Transcript of Game design 2 (2013): Lecture 13 - Colour
![Page 2: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/2.jpg)
Half and Half
• Half on using colour in information design
• Half on what colour is and how to choose
![Page 3: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/3.jpg)
Books
![Page 4: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/4.jpg)
Tufte’s uses of colour
1. to label (colour as noun)
2. to measure (colour as quantity)
3. to represent / imitate reality (colour as representation)
4. to enliven or decorate (colour as beauty)
![Page 5: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/5.jpg)
Colour in Games
• Team identification (label)
• Item highlighting (label)
• Mood, tone & aesthetics (enliven)
• Convey information (measure)
• Represent reality (representation)
![Page 6: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/6.jpg)
To Label (team)
![Page 7: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/7.jpg)
To label
![Page 8: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/8.jpg)
To label
![Page 9: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/9.jpg)
To Enliven
![Page 10: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/10.jpg)
![Page 11: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/11.jpg)
To Enliven / Represent
![Page 12: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/12.jpg)
![Page 13: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/13.jpg)
Label
![Page 14: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/14.jpg)
Measurement
![Page 15: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/15.jpg)
![Page 16: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/16.jpg)
![Page 17: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/17.jpg)
Information Design
• Games don’t do a great job of information design - but they use colour fairly well.
• Consider Tufte’s uses of colour in your designs.
![Page 18: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/18.jpg)
Part 2
• Choosing colour
![Page 19: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/19.jpg)
What is Colour?
![Page 20: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/20.jpg)
Rods & Cones
• Rods & Cones
• Tuned to RGB
• Uneven distribution
• 64% red, 34% green, 2% blue
• Can distinguish red better than blue
• Yellow shades particularly similar
![Page 21: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/21.jpg)
Magenta?
![Page 22: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/22.jpg)
![Page 23: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/23.jpg)
Colour Models
• Red, Green, Blue (Thissen 163)
• Cyan, Magenta, Yellow, Key (Fox 52)
• Hue, Lightness, Saturation (Thissen 162)
![Page 24: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/24.jpg)
Colour Wheel
• Newton Wheel
• Red, Yellow, Green
• Blended for hues
• add whites (tint)
• or black (shade)
![Page 25: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/25.jpg)
Combining Colours
![Page 26: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/26.jpg)
![Page 27: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/27.jpg)
![Page 28: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/28.jpg)
![Page 29: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/29.jpg)
![Page 30: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/30.jpg)
![Page 31: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/31.jpg)
Color Jack
Text
http://www.bit.ly/colorjack
![Page 32: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/32.jpg)
Tip: Industry Palettes• Find industry photograph
• Extract main colours
![Page 33: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/33.jpg)
Tip: Mood Palettes
• Find mood photograph
• Extract main colours
![Page 34: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/34.jpg)
DeGraeve Extractor
http://www.bit.ly/degraeve
![Page 35: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/35.jpg)
Assembling a Palette
• Select 3 to 5 colours from colour wheel
• Also select a neutral and highlight colour
• Experiment with tint and shade
• Contrast is important
• Consider the colour blind
• Consider cultural implications
![Page 36: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/36.jpg)
Colour Blind
• 1 in 12 people
• Resources exist which can model colour blindness.
• http://www.wearecolorblind.com
![Page 37: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/37.jpg)
![Page 38: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/38.jpg)
![Page 39: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/39.jpg)
Cultural Minefield
![Page 40: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/40.jpg)
![Page 41: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/41.jpg)
Use Colour Sparingly
• It is easy to emphasise something on unobtrusive colours.
• On glaring colours it is difficult to emphasise something.
![Page 42: Game design 2 (2013): Lecture 13 - Colour](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809942b4795979578b473d/html5/thumbnails/42.jpg)
Tufte
“Above all, do no harm.”