game design 2 (2013): lecture 13 - colour

42
Game Design 2 Lecture 13: Colour 2013 http://gcugd2.com [email protected]

Upload: david-farrell

Post on 04-Dec-2014

1.627 views

Category:

Entertainment & Humor


0 download

DESCRIPTION

Use of colour as information design in games.

TRANSCRIPT

Page 1: Game design 2 (2013): Lecture 13 - Colour

Game Design 2Lecture 13: Colour

2013

http://gcugd2.com [email protected]

Page 2: Game design 2 (2013): Lecture 13 - Colour

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

Books

Page 4: Game design 2 (2013): Lecture 13 - Colour

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

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

To Label (team)

Page 7: Game design 2 (2013): Lecture 13 - Colour

To label

Page 8: Game design 2 (2013): Lecture 13 - Colour

To label

Page 9: Game design 2 (2013): Lecture 13 - Colour

To Enliven

Page 10: Game design 2 (2013): Lecture 13 - Colour
Page 11: Game design 2 (2013): Lecture 13 - Colour

To Enliven / Represent

Page 12: Game design 2 (2013): Lecture 13 - Colour
Page 13: Game design 2 (2013): Lecture 13 - Colour

Label

Page 14: Game design 2 (2013): Lecture 13 - Colour

Measurement

Page 15: Game design 2 (2013): Lecture 13 - Colour
Page 16: Game design 2 (2013): Lecture 13 - Colour
Page 17: Game design 2 (2013): Lecture 13 - Colour

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

Part 2

• Choosing colour

Page 19: Game design 2 (2013): Lecture 13 - Colour

What is Colour?

Page 20: Game design 2 (2013): Lecture 13 - Colour

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

Magenta?

Page 22: Game design 2 (2013): Lecture 13 - Colour
Page 23: Game design 2 (2013): Lecture 13 - Colour

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

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

Combining Colours

Page 26: Game design 2 (2013): Lecture 13 - Colour
Page 27: Game design 2 (2013): Lecture 13 - Colour
Page 28: Game design 2 (2013): Lecture 13 - Colour
Page 29: Game design 2 (2013): Lecture 13 - Colour
Page 30: Game design 2 (2013): Lecture 13 - Colour
Page 31: Game design 2 (2013): Lecture 13 - Colour

Color Jack

Text

http://www.bit.ly/colorjack

Page 32: Game design 2 (2013): Lecture 13 - Colour

Tip: Industry Palettes• Find industry photograph

• Extract main colours

Page 33: Game design 2 (2013): Lecture 13 - Colour

Tip: Mood Palettes

• Find mood photograph

• Extract main colours

Page 34: Game design 2 (2013): Lecture 13 - Colour

DeGraeve Extractor

http://www.bit.ly/degraeve

Page 35: Game design 2 (2013): Lecture 13 - Colour

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

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
Page 38: Game design 2 (2013): Lecture 13 - Colour
Page 39: Game design 2 (2013): Lecture 13 - Colour

Cultural Minefield

Page 40: Game design 2 (2013): Lecture 13 - Colour
Page 41: Game design 2 (2013): Lecture 13 - Colour

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

Tufte

“Above all, do no harm.”