Slides of my Conference at Adobe MAX 2013 on May 13th: http://tv.adobe.com/watch/max-2013/theories-and-harmonies-of-color/

1. "eories and Harmonies of Color
Stéphane Baril | Adobe Solutions Consultant
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
1
mercredi 8 mai 13

2. Agenda
■ About Color
■ Who am I to talk about Color?
■ My interest about Color
■ How to talk about Color?
■ Color Wheel
■ Rules overview with design/art samples
■ How to use Color "eories
inside the Creative Tools
■ Via Kuler
■ In Photoshop CS6
■ In Illustrator CS6
■ Conclusion
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
2
mercredi 8 mai 13

3. Stéphane Baril
■ Design Expert at Adobe france
■ Teacher on Digital Design for 4 years at Istituto Marangoni Paris
■ Co-writer of the French books «Colorisation de BD» (Eyrolles Edition)
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
3
mercredi 8 mai 13

4. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
My interest in color
✴ Grandmaster - ©2004 MC Productions - Naïts et Didier Beddar
4
mercredi 8 mai 13

5. In Fine Arts Academy…
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
5
mercredi 8 mai 13

6. In Fine Arts Academy…
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
6
mercredi 8 mai 13

7. In Fine Arts Academy…
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
7
mercredi 8 mai 13

8. …and a$er…
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
8
mercredi 8 mai 13

9. …and a$er…
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
9
mercredi 8 mai 13

10. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Not
so con!dent
regarding color!
10
mercredi 8 mai 13

11. Later I met Naïts, a Comic Book artist, who gave me this:
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
11
mercredi 8 mai 13

12. "en I realized… I had no idea how to deal with this??!!
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
12
mercredi 8 mai 13

13. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Talking about color?
✴ Grandmaster - ©2004 MC Productions - Naïts et Didier Beddar 13
mercredi 8 mai 13

14. De!ning color
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Color is:
Cultural
Physical
Mental
14
mercredi 8 mai 13

15. De!ning color
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Color is:
Cultural
15
mercredi 8 mai 13

16. De!ning color
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
"ink about a:
Green Apple
16
mercredi 8 mai 13

17. Or this other one?
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
17
mercredi 8 mai 13

18. Or this other one?
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
17
mercredi 8 mai 13

19. Or this other one?
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
17
mercredi 8 mai 13

20. Or this other one?
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
17
mercredi 8 mai 13

21. De!ning color
So de!ning color
by an object reference
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
is not relevant!
18
mercredi 8 mai 13

22. De!ning color
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Color is:
Physical
19
mercredi 8 mai 13

23. Newton experiment: Prism could decompose white light into a spectrum of colours
Photo by D-Kuru on Wikipedia ! h"p://tinyurl.com/wikiprism1 Additive Color System
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
20
mercredi 8 mai 13

24. Spectrum of colors perceived by the human eye
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
X Ray
Visible Spectrum of the
Electromagnetic Waves
Cosmic
Rays
Cosmic
Rays
Waves
Radar
Waves
TV
Cornea
Pupil
Iris
Retina
Crystalline Optic Nerve
21
mercredi 8 mai 13

25. De!ning color
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Color is:
Mental Construction
22
mercredi 8 mai 13

26. Your brain balances the light changes & balances color regarding the color environment
In#uence of the color environment
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
23
mercredi 8 mai 13

27. Your brain balances color regarding the color environment
«#e Art of Color: the subjective experience and objective rationale of color» by Johannes I"en (New York: Van Nostrand Reinhold)
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
24
mercredi 8 mai 13

28. Your brain balances color regarding the color environment
«#e Art of Color: the subjective experience and objective rationale of color» by Johannes I"en (New York: Van Nostrand Reinhold)
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
24
mercredi 8 mai 13

29. Your brain balances your perception regarding the environment
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Checker shadow illusion by Edward H. Adelson (h"p://tinyurl.com/checkershadow)
25
mercredi 8 mai 13

30. Your brain balances your perception regarding the environment
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Checker shadow illusion by Edward H. Adelson (h"p://tinyurl.com/checkershadow)
25
mercredi 8 mai 13

31. Your brain balances the light changes & balances color regarding the color environment
In#uence of the ambiant light
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
26
mercredi 8 mai 13

32. "e Cathedral of Rouen is white-beige
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
27
mercredi 8 mai 13

33. "e Cathedral of Rouen by Claude Monet
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
28
mercredi 8 mai 13

34. "e Cathedral of Rouen by Claude Monet
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
28
mercredi 8 mai 13

35. "e Cathedral of Rouen by Claude Monet
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
28
mercredi 8 mai 13

36. "e Cathedral of Rouen by Claude Monet
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
28
mercredi 8 mai 13

37. Your brain balances color regarding the evolution of light…
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
«Rouen Cathedral series» by Claude Monet
29
mercredi 8 mai 13

38. Comparing two closed colors
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Possible only
with side-by-side
30
mercredi 8 mai 13

39. Ambiance in Design
is as important
as in the cinema
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
31
mercredi 8 mai 13

40. Ambiance
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
#e Matrix ©1999 - 2012 Warner Bros. Picture
32
mercredi 8 mai 13

41. Ambiance is like Music
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
#e Matrix ©1999 - 2012 Warner Bros. Picture
33
mercredi 8 mai 13

42. To conclude this part
Final picture ambiance
is the goal of Color "eory
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
34
mercredi 8 mai 13

43. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
About Color "eory
35
mercredi 8 mai 13

44. A Powerful Tool
to Understand Color
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
36
mercredi 8 mai 13

45. "e Color Wheel
Color Wheel used by painters,
created by Johannes Itten
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
37
mercredi 8 mai 13

46. "e Color Wheel
Color Wheel used by painters,
created by Johannes Itten
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Color Wheel used
in Digital and Print area
37
mercredi 8 mai 13

47. De!ning a common language
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
But before using it,
we need a common vocabulary:
HSL
Hue, Saturation and Lightness
38
mercredi 8 mai 13

48. Color Wheel — HSL: Hue - Saturation - Lightness
✴ Restitution des couleurs en mode RVB
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
X Ray
Visible Spectrum of the
Electromagnetic Waves
Cosmic
Rays
Cosmic
Rays
Waves
Radar
Waves
TV
«Double Alaskan Rainbow» by Eric Rolph (h"p://en.wikipedia.org/wiki/File:Double-alaskan-rainbow.jpg)
39
mercredi 8 mai 13

49. Color Wheel — HSL: Hue - Saturation - Lightness
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
http://www.thelightsurgeons.co.uk
(Screenshot made in 2007 — This website design doesn't exist anymore)
40
mercredi 8 mai 13

50. Color Wheel — HSL: Hue - Saturation - Lightness
Complementary Colors Color Wheel or Desaturations
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
41
mercredi 8 mai 13

51. Color Wheel — HSL: Hue - Saturation - Lightness
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
http://www.apple.com/fr/mac
(Screenshot made in 2007 — This website design doesn't exist anymore)
42
mercredi 8 mai 13

52. Color Wheel — HSL: Hue - Saturation - Lightness
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
43
mercredi 8 mai 13

53. Color Wheel — HSL: Hue - Saturation - Lightness
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
http://super!uousbanter.org
(Screenshot made in 2007 — This website design doesn't exist anymore)
44
mercredi 8 mai 13

54. Overview of the Principal
Color Harmony Rules
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
45
mercredi 8 mai 13

55. Color Wheel — Monochromatic Color
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
46
mercredi 8 mai 13

56. Color Wheel — Complementary Colors
✴Shaman, #2 - ©2005 MC Productions - Olivier & Stéphane Péru - Colors : Stéphane Péru (a thought for him)
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
47
mercredi 8 mai 13

57. Color Wheel — Couleurs Complémentaires
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Choose one color and focus your eye on the white dot inside
48
mercredi 8 mai 13

58. Color Wheel — Couleurs Complémentaires
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Choose one color and focus your eye on the white dot inside
48
mercredi 8 mai 13

59. Color Wheel — Complementary Colors
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
http://azzabee.com.au/
(Screenshot made in 2007 — This website doesn't exist anymore)
49
mercredi 8 mai 13

60. Color Wheel — Complementary Colors
«Starry Night» by Van Gogh (http://commons.wikimedia.org/wiki/File:Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg)
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
50
mercredi 8 mai 13

61. Color Wheel — Split Complementary Colors
T-Shirt Design by …
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
www.lafraise.com
51
mercredi 8 mai 13

62. Color Wheel — Split Complementary Colors
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
http://www.kingtut.org/
(Screenshot made in 2007 — This website design doesn't exist anymore)
52
mercredi 8 mai 13

63. Color Wheel — Triad Colors
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
53
mercredi 8 mai 13

64. Color Wheel — Triad Colors
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
http://www.urbanchip.com.ar/
(Screenshot made in 2007 — This website design doesn't exist anymore)
54
mercredi 8 mai 13

65. Color Wheel — Tetrad Colors
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
55
mercredi 8 mai 13

66. Color Wheel — Tetrad Colors
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
http://loveisrespect.org/
(Screenshot made in 2007 — This website design doesn't exist anymore)
56
mercredi 8 mai 13

67. And so on…
First study based on equal repartition, plus other tests … then, some choices & adjustments
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
#e CS6 Desktop Brand System (h"p://blogs.adobe.com/brandexperience/2012/05/16/the-cs6-desktop-brand-system)
57
mercredi 8 mai 13

68. Color Wheel — Analogous Colors
T-Shirt Design by … T-Shirt Design by …
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
www.lafraise.com
58
mercredi 8 mai 13

69. Color Wheel — Couleurs Analogues
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
http://www.elmwood.co.uk/
(Screenshot made in 2007 — This website design doesn't exist anymore)
59
mercredi 8 mai 13

70. Color Wheel — Couleurs Analogues
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Rothko
60
mercredi 8 mai 13

71. A visual atmosphere = Colors and Lights
Cornea
Pupil
Iris
Retina
Crystalline Optic Nerve
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Original converted in Grayscale
Original with Color
L
a
b
✴Shaman, #2 - ©2005 MC Productions - Olivier & Stéphane Péru - Colors: Stéphane Péru
61
mercredi 8 mai 13

72. Highlighting an item by color
More contrast and details in the color of the main elements.
✴ Grandmaster - ©2004 MC Productions - Naïts et Didier Beddar
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Depth in this scene is accentuated by the high saturation of
foreground color and brightness / saturation decreasing with the
distant elements (atmospheric perspective).
Elements that should attract the reader's eye here have more vivid colors.
62
mercredi 8 mai 13

73. Tools & Demo
http://kuler.adobe.com/
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
63
mercredi 8 mai 13

74. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Q&A time
Come on guys,
we have some
question!
64
mercredi 8 mai 13

75. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential. 65 http://kimtag.com/sbaril
mercredi 8 mai 13

76. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential. 67
mercredi 8 mai 13