SlideShare una empresa de Scribd logo
1 de 70
Intérêt théorique et usage concret des Harmonies de couleurs
Stéphane Baril | Creative Cloud Sr Solution Consultant | @sbaril
•	 Expert Design chez Adobe France
•	 Professeur de « Digital Design » durant 4 ans à l’Istituto Marangoni de Paris
•	 Co-auteur de livres sur la « Colorisation de BD » (Éditions Eyrolles)
Toutes les illustrations ne comportant pas de copyright sont du livre blanc.
©Eyrolles: Naïts & Stéphane Baril
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Comment parler de couleur?
Essayons de définir la couleur
Grandmaster - ©2004 MC Productions - Naïts et Didier Beddar
Source : swiked.tumblr.com
2© 2015 Adobe Systems Incorporated. Tous droits réservés.
Définir la couleur
La couleur est :
Culturel
Physique
Mentale
3
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Définir la couleur
La couleur est :
Culturel
Physique
Mentale
4
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Définir la couleur
Pensez à une :
Pomme verte
5
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Est-ce celle-ci ?
6
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Celle-ci ?
7
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Celle-ci ?
8
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Ou encore celle-ci ?
9
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Définir la couleur
Définir la couleur
en se référant à un objet
n’est pas fiable !
10
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Définir la couleur
La couleur est :
Culturel
Physique
Mentale
11
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Expérience de Newton
Un prisme permet de décomposer la lumière blanche
Photo de D-Kuru sur Wikipedia — http://tinyurl.com/wikiprism1 Synthèse additive des couleurs
12
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Spectre visible des couleurs perçues par l’œil humain
Cornée
Pupille
Iris
Cristallin
Nerf Optique
Rétine
Rayons
cosmiques
Rayons
gamma
Micro
ondes
Ondes
radio
Rayons X
380nm
780nm
Étendue du spectre visible
des ondes électromagnétiques
+
0
-
B-Y
Stage 1:
Cone Oppon
Retina
Stage 2:
Cone Oppon
Cortex
CBlackwell 2012
R-G
B-W
Sources : Docteur Craig Blackwell
www.youtube.com/user/cbeyedr
http://www.blackwelleyesight.com
Rod
Dim Light
Peripheral
Bright Light
Fovea
Light - Sensing
Non - Visual
Cones Gang Cell
CBlackwell 2012
CBlackwell 2011
Cellules
Ganglionnaires
Cellules Bipolaires
Photorécepteurs
LaRétineLaRétine
Bâtonnet
Cône
Épithélium
Pigmentaire
Capillaires
(Choroïde)
Lumière
CBlackwell 2011 & 2012
CBlackwell 2012
13
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Image Persistante
14
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Image Persistante
15
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Définir la couleur
La couleur est :
Culturel
Physique
Construction Mentale
16
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : Influence de l’environnement sur la perception des couleurs
Notre cerveau
compense les variations
de luminosité et de
température de couleur
17
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : Influence des ombres et lumières
A
B
Edward H. Adelson
« Checker Shadow Illusion 4 » par Edward H. Adelson — http://persci.mit.edu/people/adelson
18
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : Influence des ombres et lumières
A
B
Edward H. Adelson
« Checker Shadow Illusion 4 » par Edward H. Adelson — http://persci.mit.edu/people/adelson
19
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : Influence des couleurs environnantes
« Art de la Couleur, Edition abrégée » par Johannes Itten (Éditions Dessain et TOLRA)
http://fr.wikipedia.org/wiki/Johannes_Itten
20
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : Influence des couleurs environnantes
« Art de la Couleur, Edition abrégée » par Johannes Itten (Éditions Dessain et TOLRA)
http://fr.wikipedia.org/wiki/Johannes_Itten
21
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : Influence des couleurs environnantes et des échelles
22
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : Influence des couleurs environnantes et de leur luminosité
23
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : Influence of ambient light
« La constance chromatique est un
exemple de constance subjective et
une caractéristique du système humain
de perception des couleurs qui assure
que la couleur perçue d’objets demeure
relativement constante dans diverses
conditions d’éclairage ».
Sources : http://en.wikipedia.org/wiki/Color_constancy
24
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale: Les pierres de la Cathédrale de Rouen beige-grise
Sources : http://fr.fotolia.com/id/52471072
25
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : La Cathédrale de Rouen par Claude Monet
« Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet)
26
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : La Cathédrale de Rouen par Claude Monet
« Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet)
27
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : La Cathédrale de Rouen par Claude Monet
« Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet)
28
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : La Cathédrale de Rouen par Claude Monet
« Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet)
29
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : La Cathédrale de Rouen par Claude Monet
« Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet)
30
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : La Cathédrale de Rouen par Claude Monet
« Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet)
31
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : La Cathédrale de Rouen par Claude Monet
« Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet)
32
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : Notre cerveau compense les changements de lumières
« Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet)
33
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : Comparaison de deux couleurs proches
Possible uniquement en côte à côte
ou par affichage successif
34
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : Importance le l’ambiance lumineuse
La notion d’ambiance en
Design est aussi importante
que dans un film pour créer
une atmosphère
35
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Ambiance chromatique :
The Matrix ©1999 - 2012 Warner Bros. Picture
36
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Ambiance chromatique : Comme en musique, il faut du rythme !
The Matrix ©1999 - 2012 Warner Bros. Picture
37
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Mentale : Pour conclure cette partie
Les règles d’harmonies
de couleurs sont là pour nous
aider créer plus rapidement
une atmosphère colorée
cohérente.
38
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Et maintenant,
aspirons à un peu
d’harmonie…
de couleurs !
39© 2015 Adobe Systems Incorporated. Tous droits réservés.
Le Cercle Chromatique : Un outil puissant pour comprendre la couleur
Cercle chromatique utilisé par les peintres,
créé par Johannes Itten
Cercle chromatique utilisé
en numérique et en impression
40
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Utiliser un langage commun
Mais avant,
nous avons besoin d’un
vocabulaire commun :
TSL
Teinte, Saturation et Luminosité*
* Les termes Luminance et clarté sont parfois préférés à Luminosité.
41
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — TSL: Teinte - Saturation - Luminosité
Personal Photoshop 3D illustration of TSL
42
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — TSL : Teinte - Saturation - Luminosité
Cercle chromatique utilisé
en numérique et en impression
« Double Alaskan Rainbow » par Eric Rolph
(http://en.wikipedia.org/wiki/File:Double-alaskan-rainbow.jpg)
Rayons
cosmiques
Rayons
gamma
Micro
ondes
Ondes
radio
Rayons X
380nm
780nm
Étendue du spectre visible
des ondes électromagnétiques
43
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — TSL : Teinte - Saturation - Luminosité
http://www.thelightsurgeons.co.uk
(Capture d’écran faite en 2007 — Cette version du site n’existe plus)
44
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — TSL: Teinte - Saturation - Luminosité
« Your Colour Perception » par Liz West
https://www.behance.net/gallery/23363739/Your-Colour-Perception
45
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — TSL: Teinte - Saturation - Luminosité
« Plexus No.19 » par Gabriel Dawe
http://www.gabrieldawe.com/installation/plexus_019.html
https://www.behance.net/gdawe
46
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — TSL: Teinte - Saturation - Luminosité
Couleurs Complémentaires Cercle Chromatique or Desaturations
47
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — TSL: Teinte - Saturation - Luminosité
http://www.apple.com/fr/mac
(Capture d’écran faite en 2007 — Cette version du site n’existe plus)
48
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — TSL: Teinte - Saturation - Luminosité
49
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — TSL: Teinte - Saturation - Luminosité
http://superfluousbanter.org
(Capture d’écran faite en 2007 — Cette version du site n’existe plus)
50
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Règles d’Harmonies de Couleurs
Tour d’horizon
des principales règles
d’harmonies de couleurs
51
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — Couleur Monochromatique
52
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — Couleurs Complémentaires
Shaman, #2 - ©2005 MC Productions - Olivier & Stéphane Péru
Couleurs : Stéphane Péru (une pensée pour lui)
53
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — Couleurs Complémentaires
http://azzabee.com.au/
(Capture d’écran faite en 2007 — Cette version du site n’existe plus)
54
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — Couleurs Complémentaires
« La nuit étoilée » par Vincent Van Gogh
http://commons.wikimedia.org/wiki/File:Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg
55
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — Couleurs Complémentaires divisées
Design de T-Shirt
par TJ
www.lafraise.com
56
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — Couleurs Complémentaires divisées
http://www.kingtut.org/
(Capture d’écran faite en 2007 — Cette version du site n’existe plus)
57
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — Couleurs Triadiques
58
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — Couleurs Triadiques
http://www.urbanchip.com.ar/
(Capture d’écran faite en 2007 — Cette version du site n’existe plus)
59
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — Couleurs Tétradiques
60
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — Couleurs Tétradiques
http://loveisrespect.org/
(Capture d’écran faite en 2007 — Cette version du site n’existe plus)
61
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — Et on peut étendre cette démarcation…
Première étude basée sur une répartition équidistante… puis, des choix et des ajustements.
Étude de rationalisation des couleurs des icônes CS6 - http://blogs.adobe.com/brandexperience/2012/05/16/the-cs6-desktop-brand-system
62
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — Couleurs Analogues
Design de T-Shirt par
Jus2Pom
Design de T-Shirt par
MrWayne
www.lafraise.com
63
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — Couleurs Analogues
http://www.elmwood.co.uk/
(Capture d’écran faite en 2007 — Cette version du site n’existe plus)
64
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Cercle Chromatique — Couleurs Analogues
Mark Rothko (1950) - Museum of Modern Art, New York, USA
Source: http://www.wikiart.org/en/mark-rothko/no-5-no-22
65
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
A visual atmosphere = Colors and Lights
Original converted in Grayscale
Original with Color
Shaman, #2 - ©2005 MC Productions - Olivier & Stéphane Péru - Couleurs: Stéphane Péru
66
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Faire ressortir un élément par la couleur
Plus de contraste et détails dans la couleur des éléments principaux. La profondeur dans cette scène est accentuée par la forte saturation
des couleurs du premier plan et la luminosité/saturation décroissante
des éléments lointains.
Les éléments qui doivent attirer le regard du lecteur ont ici des couleurs plus vives.
Grandmaster - ©2004 MC Productions - Naïts et Didier Beddar
67
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Démo
color.adobe.com
68
17/03/15
© 2015 Adobe Systems Incorporated. Tous droits réservés.
Questions / Réponses
Venez les
gars, on a des
questions !
69© 2015 Adobe Systems Incorporated. Tous droits réservés.
Intérêt théorique et usage concret des Harmonies de couleurs

Más contenido relacionado

Destacado

Destacado (9)

Theories and Harmonies of Color
Theories and Harmonies of ColorTheories and Harmonies of Color
Theories and Harmonies of Color
 
Powerpoint atelier couleurs
Powerpoint atelier couleursPowerpoint atelier couleurs
Powerpoint atelier couleurs
 
Les couleurs
Les couleursLes couleurs
Les couleurs
 
Theory of Color Masterclass
Theory of Color MasterclassTheory of Color Masterclass
Theory of Color Masterclass
 
Chp3 - IHM
Chp3 - IHMChp3 - IHM
Chp3 - IHM
 
Les couleurs en architecture
Les couleurs en architectureLes couleurs en architecture
Les couleurs en architecture
 
Roue des couleurs
Roue des couleursRoue des couleurs
Roue des couleurs
 
IHM
IHMIHM
IHM
 
Les gouts et les couleurs - David Rault - ParisWeb 2011
Les gouts et les couleurs - David Rault - ParisWeb 2011Les gouts et les couleurs - David Rault - ParisWeb 2011
Les gouts et les couleurs - David Rault - ParisWeb 2011
 

Intérêt théorique et usage concret des Harmonies de couleurs

  • 1. Intérêt théorique et usage concret des Harmonies de couleurs Stéphane Baril | Creative Cloud Sr Solution Consultant | @sbaril • Expert Design chez Adobe France • Professeur de « Digital Design » durant 4 ans à l’Istituto Marangoni de Paris • Co-auteur de livres sur la « Colorisation de BD » (Éditions Eyrolles) Toutes les illustrations ne comportant pas de copyright sont du livre blanc. ©Eyrolles: Naïts & Stéphane Baril © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 2. Comment parler de couleur? Essayons de définir la couleur Grandmaster - ©2004 MC Productions - Naïts et Didier Beddar Source : swiked.tumblr.com 2© 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 3. Définir la couleur La couleur est : Culturel Physique Mentale 3 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 4. Définir la couleur La couleur est : Culturel Physique Mentale 4 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 5. Définir la couleur Pensez à une : Pomme verte 5 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 6. Est-ce celle-ci ? 6 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 7. Celle-ci ? 7 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 8. Celle-ci ? 8 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 9. Ou encore celle-ci ? 9 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 10. Définir la couleur Définir la couleur en se référant à un objet n’est pas fiable ! 10 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 11. Définir la couleur La couleur est : Culturel Physique Mentale 11 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 12. Expérience de Newton Un prisme permet de décomposer la lumière blanche Photo de D-Kuru sur Wikipedia — http://tinyurl.com/wikiprism1 Synthèse additive des couleurs 12 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 13. Spectre visible des couleurs perçues par l’œil humain Cornée Pupille Iris Cristallin Nerf Optique Rétine Rayons cosmiques Rayons gamma Micro ondes Ondes radio Rayons X 380nm 780nm Étendue du spectre visible des ondes électromagnétiques + 0 - B-Y Stage 1: Cone Oppon Retina Stage 2: Cone Oppon Cortex CBlackwell 2012 R-G B-W Sources : Docteur Craig Blackwell www.youtube.com/user/cbeyedr http://www.blackwelleyesight.com Rod Dim Light Peripheral Bright Light Fovea Light - Sensing Non - Visual Cones Gang Cell CBlackwell 2012 CBlackwell 2011 Cellules Ganglionnaires Cellules Bipolaires Photorécepteurs LaRétineLaRétine Bâtonnet Cône Épithélium Pigmentaire Capillaires (Choroïde) Lumière CBlackwell 2011 & 2012 CBlackwell 2012 13 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 14. Image Persistante 14 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 15. Image Persistante 15 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 16. Définir la couleur La couleur est : Culturel Physique Construction Mentale 16 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 17. Mentale : Influence de l’environnement sur la perception des couleurs Notre cerveau compense les variations de luminosité et de température de couleur 17 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 18. Mentale : Influence des ombres et lumières A B Edward H. Adelson « Checker Shadow Illusion 4 » par Edward H. Adelson — http://persci.mit.edu/people/adelson 18 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 19. Mentale : Influence des ombres et lumières A B Edward H. Adelson « Checker Shadow Illusion 4 » par Edward H. Adelson — http://persci.mit.edu/people/adelson 19 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 20. Mentale : Influence des couleurs environnantes « Art de la Couleur, Edition abrégée » par Johannes Itten (Éditions Dessain et TOLRA) http://fr.wikipedia.org/wiki/Johannes_Itten 20 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 21. Mentale : Influence des couleurs environnantes « Art de la Couleur, Edition abrégée » par Johannes Itten (Éditions Dessain et TOLRA) http://fr.wikipedia.org/wiki/Johannes_Itten 21 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 22. Mentale : Influence des couleurs environnantes et des échelles 22 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 23. Mentale : Influence des couleurs environnantes et de leur luminosité 23 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 24. Mentale : Influence of ambient light « La constance chromatique est un exemple de constance subjective et une caractéristique du système humain de perception des couleurs qui assure que la couleur perçue d’objets demeure relativement constante dans diverses conditions d’éclairage ». Sources : http://en.wikipedia.org/wiki/Color_constancy 24 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 25. Mentale: Les pierres de la Cathédrale de Rouen beige-grise Sources : http://fr.fotolia.com/id/52471072 25 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 26. Mentale : La Cathédrale de Rouen par Claude Monet « Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet) 26 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 27. Mentale : La Cathédrale de Rouen par Claude Monet « Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet) 27 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 28. Mentale : La Cathédrale de Rouen par Claude Monet « Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet) 28 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 29. Mentale : La Cathédrale de Rouen par Claude Monet « Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet) 29 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 30. Mentale : La Cathédrale de Rouen par Claude Monet « Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet) 30 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 31. Mentale : La Cathédrale de Rouen par Claude Monet « Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet) 31 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 32. Mentale : La Cathédrale de Rouen par Claude Monet « Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet) 32 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 33. Mentale : Notre cerveau compense les changements de lumières « Série des Cathédrales de Rouen » par Claude Monet — Sources : http://en.wikipedia.org/wiki/Rouen_Cathedral_(Monet) 33 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 34. Mentale : Comparaison de deux couleurs proches Possible uniquement en côte à côte ou par affichage successif 34 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 35. Mentale : Importance le l’ambiance lumineuse La notion d’ambiance en Design est aussi importante que dans un film pour créer une atmosphère 35 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 36. Ambiance chromatique : The Matrix ©1999 - 2012 Warner Bros. Picture 36 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 37. Ambiance chromatique : Comme en musique, il faut du rythme ! The Matrix ©1999 - 2012 Warner Bros. Picture 37 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 38. Mentale : Pour conclure cette partie Les règles d’harmonies de couleurs sont là pour nous aider créer plus rapidement une atmosphère colorée cohérente. 38 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 39. Et maintenant, aspirons à un peu d’harmonie… de couleurs ! 39© 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 40. Le Cercle Chromatique : Un outil puissant pour comprendre la couleur Cercle chromatique utilisé par les peintres, créé par Johannes Itten Cercle chromatique utilisé en numérique et en impression 40 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 41. Utiliser un langage commun Mais avant, nous avons besoin d’un vocabulaire commun : TSL Teinte, Saturation et Luminosité* * Les termes Luminance et clarté sont parfois préférés à Luminosité. 41 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 42. Cercle Chromatique — TSL: Teinte - Saturation - Luminosité Personal Photoshop 3D illustration of TSL 42 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 43. Cercle Chromatique — TSL : Teinte - Saturation - Luminosité Cercle chromatique utilisé en numérique et en impression « Double Alaskan Rainbow » par Eric Rolph (http://en.wikipedia.org/wiki/File:Double-alaskan-rainbow.jpg) Rayons cosmiques Rayons gamma Micro ondes Ondes radio Rayons X 380nm 780nm Étendue du spectre visible des ondes électromagnétiques 43 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 44. Cercle Chromatique — TSL : Teinte - Saturation - Luminosité http://www.thelightsurgeons.co.uk (Capture d’écran faite en 2007 — Cette version du site n’existe plus) 44 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 45. Cercle Chromatique — TSL: Teinte - Saturation - Luminosité « Your Colour Perception » par Liz West https://www.behance.net/gallery/23363739/Your-Colour-Perception 45 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 46. Cercle Chromatique — TSL: Teinte - Saturation - Luminosité « Plexus No.19 » par Gabriel Dawe http://www.gabrieldawe.com/installation/plexus_019.html https://www.behance.net/gdawe 46 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 47. Cercle Chromatique — TSL: Teinte - Saturation - Luminosité Couleurs Complémentaires Cercle Chromatique or Desaturations 47 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 48. Cercle Chromatique — TSL: Teinte - Saturation - Luminosité http://www.apple.com/fr/mac (Capture d’écran faite en 2007 — Cette version du site n’existe plus) 48 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 49. Cercle Chromatique — TSL: Teinte - Saturation - Luminosité 49 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 50. Cercle Chromatique — TSL: Teinte - Saturation - Luminosité http://superfluousbanter.org (Capture d’écran faite en 2007 — Cette version du site n’existe plus) 50 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 51. Règles d’Harmonies de Couleurs Tour d’horizon des principales règles d’harmonies de couleurs 51 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 52. Cercle Chromatique — Couleur Monochromatique 52 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 53. Cercle Chromatique — Couleurs Complémentaires Shaman, #2 - ©2005 MC Productions - Olivier & Stéphane Péru Couleurs : Stéphane Péru (une pensée pour lui) 53 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 54. Cercle Chromatique — Couleurs Complémentaires http://azzabee.com.au/ (Capture d’écran faite en 2007 — Cette version du site n’existe plus) 54 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 55. Cercle Chromatique — Couleurs Complémentaires « La nuit étoilée » par Vincent Van Gogh http://commons.wikimedia.org/wiki/File:Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg 55 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 56. Cercle Chromatique — Couleurs Complémentaires divisées Design de T-Shirt par TJ www.lafraise.com 56 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 57. Cercle Chromatique — Couleurs Complémentaires divisées http://www.kingtut.org/ (Capture d’écran faite en 2007 — Cette version du site n’existe plus) 57 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 58. Cercle Chromatique — Couleurs Triadiques 58 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 59. Cercle Chromatique — Couleurs Triadiques http://www.urbanchip.com.ar/ (Capture d’écran faite en 2007 — Cette version du site n’existe plus) 59 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 60. Cercle Chromatique — Couleurs Tétradiques 60 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 61. Cercle Chromatique — Couleurs Tétradiques http://loveisrespect.org/ (Capture d’écran faite en 2007 — Cette version du site n’existe plus) 61 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 62. Cercle Chromatique — Et on peut étendre cette démarcation… Première étude basée sur une répartition équidistante… puis, des choix et des ajustements. Étude de rationalisation des couleurs des icônes CS6 - http://blogs.adobe.com/brandexperience/2012/05/16/the-cs6-desktop-brand-system 62 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 63. Cercle Chromatique — Couleurs Analogues Design de T-Shirt par Jus2Pom Design de T-Shirt par MrWayne www.lafraise.com 63 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 64. Cercle Chromatique — Couleurs Analogues http://www.elmwood.co.uk/ (Capture d’écran faite en 2007 — Cette version du site n’existe plus) 64 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 65. Cercle Chromatique — Couleurs Analogues Mark Rothko (1950) - Museum of Modern Art, New York, USA Source: http://www.wikiart.org/en/mark-rothko/no-5-no-22 65 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 66. A visual atmosphere = Colors and Lights Original converted in Grayscale Original with Color Shaman, #2 - ©2005 MC Productions - Olivier & Stéphane Péru - Couleurs: Stéphane Péru 66 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 67. Faire ressortir un élément par la couleur Plus de contraste et détails dans la couleur des éléments principaux. La profondeur dans cette scène est accentuée par la forte saturation des couleurs du premier plan et la luminosité/saturation décroissante des éléments lointains. Les éléments qui doivent attirer le regard du lecteur ont ici des couleurs plus vives. Grandmaster - ©2004 MC Productions - Naïts et Didier Beddar 67 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 68. Démo color.adobe.com 68 17/03/15 © 2015 Adobe Systems Incorporated. Tous droits réservés.
  • 69. Questions / Réponses Venez les gars, on a des questions ! 69© 2015 Adobe Systems Incorporated. Tous droits réservés.