Más contenido relacionado
La actualidad más candente (10)
Similar a Theories and Harmonies of Color (13)
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