Travailler avec la couleur dans la conception d'interface utilisateur (Semaine de Bootcamp d'interface utilisateur 8)

1. Adative et soustractif: Dans la plupart des pays, l'Angleterre est certainement l'un d'entre eux. Lorsque vous êtes à l'école vers l'âge de cinq ou six ans, votre professeur vous dira sont les couleurs primaires, rouge, bleu et jaune. Ils vous apprendront que vous ne pouvez pas fabriquer ces trois couleurs à partir d'autres couleurs. Et que vous pouvez mélanger ces trois couleurs pour créer n'importe quelle autre couleur. Question rapide. Lequel de ces trois faits pensez-vous que votre professeur vous a menti ? Ces trois couleurs sont les couleurs primaires. Vous ne pouvez pas créer ces trois couleurs en mélangeant une autre couleur. Et vous pouvez en faire toutes les autres couleurs. Malheureusement, votre professeur vous a menti à propos de toutes ces choses. Si vous avez passé du temps à travailler avec un ordinateur, vous savez probablement qu'il dispose trois lumières différentes à l'intérieur du moniteur : rouge, bleu et vert. les appelle souvent les couleurs primaires de la lumière, tandis que le rouge, bleu et le jaune peuvent être considérés comme les couleurs primaires Brian lors de l'utilisation de la peinture, par exemple. Une autre façon de penser à cela pourrait être que les lumières sont des couleurs primaires additives. Comme vous commencez par un écran noir et vous ajoutez de la lumière pour créer des couleurs. rouge, le bleu et le jaune sont souvent appelés couleurs primaires soustractives à tort, car elles commencent par la lumière blanche naturelle du soleil ou une lumière blanche artificielle provenant d'une ampoule. Et chaque objet que cette lumière frappe en soustrait la couleur. Nous en parlerons un peu plus dans le reste de ce module et plus tard vous comprendrez pourquoi il est mauvais de penser à tort que le rouge, bleu et le jaune sont les couleurs primaires. Ils ne le sont pas. Si vous regardez ces deux jeux de couleurs primaires pendant plus de quelques secondes, vous vous rendez probablement compte rapidement qu' il est peu probable que les deux jeux de couleurs primaires aient presque exactement la même chose. couleurs en eux. Regardons juste le rouge, bleu, le vert pendant une seconde. Maintenant, ce sont certainement les couleurs que vous regardez dans votre écran. Cela ne signifie pas que nous pouvons créer n'importe quelle couleur sur un écran d'un ordinateur. Nous ne pouvons pas, nous ne pouvons même pas en créer autant, mais nous pouvons probablement créer plusieurs milliards de couleurs. Et c'est beaucoup pour nous de travailler avec eux. Les couleurs primaires ne peuvent pas être utilisées pour créer toutes les couleurs, et nous pouvons les créer en mélangeant d' autres couleurs. Cependant, nous utilisons ces trois lumières sur un écran d'ordinateur simplement parce qu'elles peuvent créer le plus grand nombre de couleurs à partir de seulement trois lumières pour obtenir les couleurs primaires avec de la peinture ou de l'encre. Ou nous devons le faire, c'est superposer ces trois lumières et vous obtiendrez quelque chose qui ressemble à ça. Ces trois couleurs vous sont probablement très familières car elles sont bien sûr les trois couleurs que vous mettez dans une imprimante. Et bien sûr, vous placez ces trois couleurs dans une imprimante car elles peuvent imprimer la plus grande gamme de couleurs avec des encres. Maintenant, à l'heure actuelle, votre écran d'ordinateur, où se trouve la partie rouge, affiche simplement les voyants rouges et où se trouve la partie verte, il n'y a que les voyants verts allumés. Mais quand la lumière jaune est allumée, il n'y a que le rouge et le vert dans des mesures égales. De même, si nous imprimons ces trois cercles sur une feuille de papier à l'aide de notre imprimante, le cercle inférieur droit utiliserait simplement l'encre jaune. Le cercle inférieur gauche utiliserait simplement l'encre magenta et l' espace entre les deux utilise simplement le magenta et le jaune dans des mesures égales. La section du centre mort utiliserait un jaune, un magenta et un cyan. Et c'est pourquoi nous avons mis une cartouche d'encre noire dans notre imprimante, car il serait assez coûteux d'utiliser les trois encres chaque fois que nous voulons imprimer du noir. Pour mieux comprendre cela, nous devons comprendre exactement comment fonctionne la lumière, et c'est ce dont nous allons parler dans ce module. Dans le prochain module, vous comprendrez pourquoi cela pourrait être particulièrement mauvais pour vos conceptions si vous ne comprenez pas les couleurs primaires pour l'instant, tout ce couleurs primaires pour l'instant, que vous devez savoir c'est que ces autres couleurs primaires soustractives, et ce sont les couleurs primaires additives. Et c'est peut-être normal que votre professeur d'école primaire vous ait mal appris les couleurs primaires parce que qui veut enseigner le mot magenta, cyan à un enfant de cinq ans. Il existe deux types de couleurs primaires qui sont couleurs primaires soustractives lorsque vous commencez par une lumière blanche et lorsqu' elle rebondit sur la peinture, encre ou les objets, elles soustraient la couleur du blanc et vous voyez les couleurs qui rebondissent. Il existe des couleurs primaires additives où vous commencez par un écran noir et vous ajoutez de la lumière colorée, qui est ce que la personne voit. Vous pouvez créer des couleurs primaires à partir d'autres couleurs dans certaines situations, et vous ne pouvez pas créer toutes les autres couleurs à partir de ces couleurs primaires. Les couleurs primaires soustractives sont celles que vous avez placées dans votre imprimante, cyan, magenta et jaune. Et les additifs sont ceux qui se trouvent sur l'écran de votre ordinateur, rouge, vert et bleu. 2. Vagues: Vous pouvez le reconnaître comme la pochette de l'album de Dark Side of the Moon de Pink Floyd. Mais c'est aussi un prisme léger. Maintenant, si vous faites briller une lumière blanche à une extrémité, tout un arc-en-ciel de couleurs sort de l'autre bout. Aussi un angle légèrement différent, nous appelons cette réfraction. Lorsque cela a été découvert pour la première fois, les gens pensaient qu'il s'agissait d'impuretés dans l'interrupteur en verre qui ajouteraient des couleurs au prisme. Puis Isaac Newton a essayé quelque chose d' intéressant avec ça. Il a dit : Et si je mettais un prisme différent dans l'autre sens juste après ça ? Et Isaac Newton a découvert que si vous placez le deuxième prisme dans la bonne position, il combinera toutes les couleurs en une seule lumière blanche. Sauf qu'il ne savait pas encore vraiment pourquoi. Il pensait encore que la lumière était comme des particules ou quelque chose comme ça. Nous avons eu une meilleure compréhension du fonctionnement de la lumière vers 1801, quand un certain Thomas Young a fait une expérience très simple. Il avait une chambre, mais vous pouviez le faire avec une boîte si vous le vouliez. Et il a découpé deux fentes très simples dans une feuille. Les chambres sont complètement sombres. Et quand il a brillé une torche ou qu'il a utilisé la lumière des chandelles à l'époque. Il s'attendait à ce que ce soit deux fentes de lumières à la fin, deux lignes de lumière. Mais en fait, ce qui s' est passé, c'est qu' il y avait toute une gamme de lumières, différentes lumineuses à l'arrière de la pièce. Vous pouvez reproduire cette expérience assez facilement à l'aide d'une boîte et d'une torche et de quelques coupes dans la boîte. Ce qu'il a bien sûr découvert, que nous savons tous maintenant, c'est que la lumière est une vague. La raison pour laquelle il y a beaucoup de lignes à l'arrière, même s'il a coupé deux lignes dans la boîte, est très similaire à la façon dont si vous avez des ondulations, certaines zones d'une vague peuvent s'annuler l'une l'autre et d'autres zones peuvent une vague plus forte comme ici où vous pouvez voir ces deux ondulations traverser. Maintenant, ce que nous percevons comme étant des couleurs différentes, ce sont simplement des longueurs différentes de cette vague qui stimulent différentes parties de notre œil. Nous regarderons plus tard. Par exemple, une vague bleue est beaucoup plus courte qu'une vague rouge. Et si nous allons ajouter tout un tas de longueurs d'onde différentes, vous verrez qu' elles sont essentiellement toutes les couleurs de l'arc-en-ciel, avec un violet étant très court et le rouge étant très longue vague. Bien sûr, la plupart des ondes d'un faisceau de lumière ne sont pas visibles ici. Il y a beaucoup, beaucoup, de liens plus courts que violet et nous appelons ces ondes ultraviolettes. Et il y a beaucoup, beaucoup, beaucoup de vagues qui sont plus longues que le rouge. Et nous appelons ces ondes infrarouges, mais elles ont toutes voyagé ensemble et nous ne remarquons pas celles que nous ne pouvons pas voir. Il est assez rare qu'un seul point de notre œil soit touché par une seule longueur d'onde à la fois. En fait, beaucoup de ces vagues vont toutes rouler ensemble comme ça. Ce que votre œil verrait ici est probablement assez proche du blanc si toutes ces longueurs d'onde étaient ensemble. Lorsque nous voyons une couleur, nous voyons presque toujours une gamme de longueurs d'onde différentes. Par exemple, cette nuance de rose n' a pas de longueur d'onde elle-même. Ce n'est que lorsque vous avez de nombreuses longueurs d'onde, et que la majorité sont rouges à ondes longues et violettes très courtes, qui sont toutes deux combinées pour créer ce rose. Si j'étais le mode de fonctionnement de l'onde lumineuse. Pourquoi la pyramide d'Isaac Newton a-t-elle divisé la lumière blanche dans toutes les différentes couleurs ? Eh bien, cette lumière blanche pure que vous obtenez d'une source de lumière ou du soleil est en fait toutes ces différentes longueurs d'onde combinées. Ils se réunissent tous. Supposons maintenant qu'ils passent par une vitre. Si nous regardons juste le rouge et le violet pour commencer, lorsqu'ils frappent la vitre, ils vont ralentir. Quand ils quittent le verre, ils vont accélérer la vague longue, la vague rouge va ralentir moins que la vague violette. Il va toucher moins de particules dans le verre. Je suis trop simplifiant, mais disons que parce qu'il se déplace beaucoup moins, il fait moins de contact avec les particules de verre. Cela ne fait pas trop de différence car il passe par une vitre car l'angle entre dans le verre et l'angle qu'il laisse est le même. Et l'onde de lumière rouge rapide va simplement rattraper certaines des ondes lumineuses violettes les plus lentes qui l'attendent. Et vous, je verrai toujours du rose. Pardonnez ici la légère grossièreté de ce diagramme. Mais si les ondes lumineuses jaillissent, vous touchez un morceau de verre incliné, cela va changer la direction des vagues lumineuses toujours si légèrement. Parce qu'il va ralentir en haut plus tôt qu'il ne ralentit en bas. Imaginez que si vous êtes dans une voiture d'un côté de la voiture va plus vite que l'autre, elle tourne. Et parce que l'angle, ces deux vagues lumineuses quittent le verre n'est pas le même que l' angle dans lequel elles entrent. Ils ne se rejoindront jamais. Et c'est là que cette tangente apparemment triviale peut vous être utile en tant que concepteur d'interface utilisateur, la couleur violette va réfracter plus que la couleur rouge. Nous en parlerons plus dans un instant. Mais j'espère que cela explique au moins le fonctionnement de cette pyramide. La lumière est une vague et ce que nous percevons comme des couleurs différentes, c'est en fait que des longueurs de vagues différentes ne voyaient presque jamais une seule vague à la fois. Les couleurs que nous voyons sont une combinaison de différentes vagues. Et il y a diverses choses qui peuvent arriver à un faisceau de lumière pour ajouter une longueur d'onde ou soustraire une longueur d'onde ou réfracter une longueur d'onde indépendante des autres ondes de ce faisceau de lumière. En tant que concepteurs, nous essayons de créer un environnement naturel pour les personnes qu'ils se sentent à l'aise. Et pour ce faire, nous devons comprendre comment fonctionne cette lumière. 3. Processus trichromatique: Nous savons que la lumière est une vague, mais en quoi cela nous aide-t-il d'une manière ou d'une autre ? Si nous nous promenons au milieu d' une forêt et nous voyons cette feuille. Pourquoi est-il vert ? Si je regarde celui-là, très petit endroit et je vais simplement l'agrandir. Il apparaît actuellement dans ce vert. D'où cela vient-il ? Eh bien, la plante physique réelle absorbe certaines des ondes lumineuses provenant du soleil. Si nous imaginons une seconde que la lumière est directement exposée au soleil, elle a été touchée par toute une gamme d'ondes lumineuses différentes. Si nous avons ici une chance avec toutes les différentes longueurs d'onde le long de l'axe X et la quantité absorbée par cette feuille le long de l'axe Y, nous pourrions obtenir quelque chose comme ça. C'est-à-dire que cette feuille absorbe beaucoup de lumières rouges à ondes longues et beaucoup de lumières bleues et violettes à ondes courtes, mais la feuille n'absorbe pas beaucoup de cette lumière verte de milieu de gamme. Maintenant, si c'est la quantité de lumière absorbe des longueurs d'onde différentes de la quantité qu' elle réfléchit des longueurs d'onde sera exactement le contraire. Remarquez que je ne dis pas qu' il n'absorbe pas la lumière rouge à ondes longues ou la lumière bleue et violette à ondes courtes, je dis qu'elle en absorbe moins. Si nous retournons dans les bois au milieu de la nuit et que nous avons une torche rouge, ou des lampes de poche comme certains d'entre vous l'appellent, et que nous la brillons sur cette même feuille, elle apparaîtra rouge car elle est toujours reflète un peu de rouge, juste moins rouge que vert. Il reflétera également une gamme de rouges différents dans différentes zones de la feuille, car différents morceaux de la feuille réfléchissent sur différentes longueurs d'onde. Maintenant, ce qui se passe à l'intérieur de notre œil est encore plus étonnant que ce qui s'est passé à l'intérieur de cette feuille à l'heure actuelle, notre œil possède des millions de récepteurs qui absorbent et réfléchissent également la lumière. Ils peuvent identifier la longueur d'onde des différentes lumières qui y pénètrent. Ils ont également des millions de récepteurs qui identifient la quantité de lumière qui entrent, les intensités, ou nous pourrions penser quel point elle est claire ou sombre. Examinons les récepteurs qui permettent d'identifier la longueur d'onde. Nous avons trois types de cônes différents dans nos yeux, et ils peuvent identifier différentes longueurs d'onde de lumière. Il y en a un qui identifie uniquement les lumières à ondes courtes, tout ce qui se trouve dans cette gamme ici. Puis celui qui identifie la lumière de milieu de gamme, ce genre de plage ici. Et puis un qui peut identifier lumière à ondes longues comme ce genre de cheveux de gamme. Parfois, ces récepteurs sont appelés récepteurs bleus, verts et rouges. Ce n'est pas tout à fait vrai. Comme vous pouvez le constater, nous ne sommes pas particulièrement doués pour identifier différents types de rouges, mais nous sommes vraiment bons pour les verts et les jaunes. Parce que ce que ces cônes peuvent identifier se croise beaucoup au milieu. Maintenant, si nous regardons cette onde lumineuse qui rebondissait sur cette feuille, et que nous avons décidé que ce qui était reflété par la feuille ressemblait un peu à ceci. Lorsque nous regardons ce vert en haut à gauche, nos cônes de milieu de gamme sont presque complètement stimulés. Ils disent, oui, c'est définitivement cette gamme de couleurs. récepteurs à ondes longues disent que c'est un peu cette zone. Oui. Et nos récepteurs à ondes courtes disent, oui, il n'y a pas beaucoup de lumière à ondes courtes qui entrent en jeu. Maintenant, s'il y a tout simplement moins d'ondes de lumière dans l'ensemble, nous saurons simplement qu'elle est plus sombre ou plus saura qu'elle est plus légère. Mais qu'en est-il si c'est un peu le même vert mais qu'il a l'air plus vert. Le même vert, la même luminosité, mais c'est juste plus propre. Qu'en est-il de ce vert ? Eh bien, nous y reviendrons davantage dans le prochain module, mais c'est juste un vert plus saturé. C'est la même nuance de vert qui est juste plus saturée. Nous le voyons mieux. Nous observons un peu la même gamme d'ondes lumineuses lorsque nous regardons ce nouveau vert saturé, mais nous constatons une distribution différente. C'est plus pur. Si jamais nous avions une distribution complètement plate ici, elle semblerait grise ou je ne saurais pas de quelle couleur il s'agit et il semble simplement gris. Ce nouveau vert est très, très clair. Plus une onde lumineuse est dominante, moins elle apparaît de gris, plus la couleur est saturée. Revenons maintenant à notre vert d'origine. Restons là une seconde, puis regardons ce que notre œil fait ensuite. Eh bien, je reçois simplement une sorte de données binaires de chacun de ces trois types de récepteurs. simplifions un peu cela et disons peut-être que le récepteur à ondes courtes dit que je suis stimulé à 20%. La moyenne fourchette indique 90 %, et celle à longue portée indique 80 %. À partir de ce moment, nous perdons beaucoup de données sur les nuances. Nous ne connaissons plus la forme de la courbe et nous ne connaissons pas exactement la quantité exacte de différentes longueurs d'onde que nous obtenons. Cela signifie que ma courbe complètement différente pourrait potentiellement sembler exactement le même vert. Ensuite, il y a un score de faute. Notre œil a également des tiges et celles-ci identifier l' intensité de la lumière. Il y a beaucoup plus de cannes que de cônes. Nous sommes donc bien meilleurs pour identifier à quel point les choses sont claires et sombres que leur couleur exacte. Disons donc que nos tiges nous indiquent simplement une intensité de 40 % pour ce peu de lumière. Cela signifie qu'un 100 % serait blanc et 0 % serait noir. Et nous sommes quelque part entre ces deux-là. À ce stade r, je n'ai que ces quatre scores, mais ce n'est pas ce qu'il envoie au cerveau. Cela traduit un peu ces éléments. Ce que notre cerveau reçoit, ce sont ces trois valeurs calculées, quel est le rapport vert/rouge ? Quel est le rapport bleu/jaune et quel est le rapport clair/foncé ? Bien sûr, vous vous demandez peut-être comment y a-t-il un jaune ? Il nécessite un certain calcul, peut-être, il ajoute le vert et le rouge. Mais rappelez-vous qu'aucun de ces trois récepteurs prenait exactement une couleur de toute façon. En fait, le récepteur à ondes longues a surtout capté les couleurs de milieu de gamme. Tous ces calculs ont donc un peu de marge d'inexactitude. Et c'est là que le daltonisme entre en jeu, où l'un d'eux n'est pas calculé correctement. Cependant, la valeur claire à sombre ne nécessite pas beaucoup de calculs et a eu le plus de tiges en premier lieu. C'est donc vraiment, vraiment exact. Ces trois nouvelles valeurs sont envoyées à notre cerveau et c'est ainsi que nous pensons voir la couleur. Tout dans le monde reflète et absorbe différentes quantités de longueurs d'onde différentes. Sont, j'ai des récepteurs qui peuvent identifier la plage de longueurs d'onde différents bits du briquet. Il effectue ensuite quelques calculs et l'envoie au cerveau. Il y a aussi des récepteurs qui identifient simplement à quel point la lumière est claire et sombre, quel point elle est intense. Et ils sont beaucoup plus précis. 4. Chromaticity: Nous savons que nous pouvons créer une gamme assez large de couleurs, simplement en utilisant des lumières rouges, vertes et bleues. Si vous êtes entré dans une pièce complètement sombre et que vous avez Sean, trois lumières différentes sur le mur, rouge, vert et bleu. Au centre, vous deviendriez blanc. C'est parce que le blanc est ce que nous voyons lorsque nous obtenons toute la gamme des ondes lumineuses. Et c'est une intensité élevée car toutes ces lumières sont allumées, pleine puissance. Si je baissais la lumière verte, si je baissais l'intensité de la lumière verte, j'obtiendrais un magenta clair au milieu ici parce que nous n'aurions plus toutes les vagues lumineuses en équilibre égal. De même, si je baissais le bleu, nous aurons un jaune clair au milieu. Et si je baisse le rouge, on aura un cyan clair au milieu. Si je baisse l'intensité des trois lumières, nous aurions un gris au milieu. Maintenant, si nous jouons avec l'intensité de ces trois lumières, nous obtiendrons beaucoup de gris et nous obtiendrons beaucoup les mêmes couleurs. Lorsque vous ouvrez un programme graphique et que vous modifiez les chiffres pour modifier la couleur d'un élément. Vous ne voulez pas que la plupart des couleurs soient grises ou que la plupart des couleurs soient identiques. Ainsi, dans les années 1920 et 1930, certaines personnes ont fait une série d'expériences modifiant l' intensité de chacune de ces lumières individuellement et en les tracant sur un graphique 3D basé sur les couleurs que les gens pouvaient percevoir pour identifier où la gamme de couleurs perceptibles que vous pouvez créer avec le rouge, vert et le bleu se trouve, bien sûr, il y a trois axes, sorte que les résultats sont une forme 3D. Et remarquez que la forme est assez irrégulière, notre perception fonctionne différemment à différents niveaux d'intensité. Et les changements d'intensité dans les trois lumières différentes ne sont même pas perçus de la même manière. Nous pourrions maintenant convertir ceux de cet enfant en une sorte de coordonnées 3D qui sont des programmes graphiques et nos sites Web pourraient se souvenir de faire référence aux couleurs. Mais seule une petite gamme d'espaces de ce graphique sont des couleurs perceptibles et uniques. Heureusement, nous avons remarqué que si vous le regardez dans le bon angle, vous pouvez aplatir le tout et obtenir toutes les couleurs. Les gens ont essayé de diviser cela de différentes manières. Mais généralement, nous avons remarqué que ce n'est toujours pas très utile car si nous utilisons ces coordonnées, encore une fois, la plupart des couleurs sont répétées. Par exemple, si je prenais les coordonnées de ces spots ici, j'obtiendrais exactement la même couleur que celle que j'ai obtenue ici. Ce que la plupart des logiciels informatiques avaient tendance à faire, c'était simplement prendre une forme régulière des cheveux. Cela signifie que nous manquons toute une série de couleurs uniques et perceptibles. Mais il y a beaucoup d'options ici. N'oubliez pas que vous ne pouvez pas créer toutes les couleurs du rouge, du vert et du bleu. Vous pouvez simplement créer beaucoup de couleurs à partir du rouge, du vert et du bleu. Un problème est survenu ici, car différents logiciels et différentes entreprises ont commencé à utiliser différentes sections des couleurs et référencer les coordonnées de différentes manières. Par exemple, si vous avez déjà imprimé des motifs, vous saurez que c'est un peu délicat. Vous allez configurer votre programme graphique pour utiliser les couleurs CMJN, cyan , magenta et jaune car nous savons que ce sont les couleurs principales pour l'impression. Cependant, lorsque vous imprimez le document, il ne ressemble toujours pas à votre écran car il était représenté sur votre écran à l'aide de lumières et il était représenté sur le papier à l'aide d'encre. Mais aussi parce que la section des couleurs utilisée par CMJN n'est même pas la même section de couleurs que celle utilisée par notre site Web. Il y a des couleurs qui n'existent littéralement pas sur le papier, qui existent sur votre écran et vice-versa. Heureusement, les sites Web utilisent tous le même standard coloré, et il s'appelle S, RGB standard, rouge, vert, bleu. Ce triangle correspond à peu près aux couleurs qui peuvent être affichées sur un site Web. Disons que je voulais montrer cette orange sur un site web, j'obtiendrais trois coordonnées des trois coins. Et ces coordonnées se situent entre 0255. Cette orange est confortablement dans le coin rouge, c'est donc 255 rouge, elle est loin du coin bleu, donc elle n'est que 80 bleues. Et c'est un peu plus près du coin vert, donc c'est autour d'un vert de 150. Je peux maintenant utiliser ces trois numéros dans n'importe quel site Web ou n'importe quel programme graphique et recréer exactement ce même orange que je veux afficher. Maintenant, parce que nous avons créé cette charte de perception 3D plus tôt, puis nous l'avons aplatie. Nous n'augmentons pas l' intensité de la lumière par incréments égaux lorsque nous passons de 78 à 79 et de 79 à 80, car 255 n'est même pas aussi grand. Lorsque nous passons de 79 à 80, nous sautons sur nous sautons sur plusieurs couleurs que nous n'utilisons même pas. Mais nous pouvons créer plus de 16 millions de couleurs en utilisant sRGB. Srgb est désormais le moyen standard de référencer les couleurs à l'aide de la lumière rouge, verte et bleue. Et il vous donne accès à 16 millions de couleurs. Il utilise trois coordonnées pour le rouge, vert et le bleu entre 0,255 Chaque incrément de ces coordonnées n'augmente pas uniformément l' intensité de la lumière, mais est incrémenté basé sur la perception humaine à l'aide ce graphique 3D original créé dans les années 1930. 5. Résumé de la couleur: La lumière est une vague. Et lorsque la longueur de cette vague change, nous la percevons comme une couleur différente. Nous voyons très rarement une onde lumineuse seule. Il est normalement mélangé à d'autres longueurs d'onde, c'est ainsi que nous pouvons voir une couleur comme violet qui n' a pas de longueur d'onde propre. C'est un mélange de vagues très longues et très courtes. Si nous avons un mélange de nombreuses vagues lumineuses sans onde dominante, nous voyons très bien. Quand il y a plus d' ondes lumineuses ensemble, il semble plus proche du blanc. Et quand il y en a moins, il semble plus proche du noir. Nous parlerons des noms spécifiques à ces derniers dans la section suivante. Lorsque les ondes lumineuses frappent notre œil, elles stimulent les tiges à différentes quantités en fonction du nombre de vagues qu'il y a. Ils stimulent trois types de codes à différents degrés en fonction de la durée des vagues. Nous interprétons cela comme voyant la couleur. Différents objets dans le monde apparaissent une seule couleur parce qu'ils absorbent certaines vagues de lumière et reflètent d'autres tandis que les objets sur votre écran apparaissent d'une seule couleur, c'est parce que le rouge, le vert, et les LED bleues s'affichent à différentes intensités pour créer quelque chose qui ressemble à cette couleur. Ils ajoutent les ondes lumineuses. Nous appelons cet additif. Alors que l'absorption des ondes lumineuses nous appelons soustractive. 6. Valeurs: Quand on repense à un cours d'art, quand on était plus jeune, quand on apprend à dessiner pour la première fois, on a probablement appris à dessiner. D'accord. En noir et blanc, si vous êtes comme moi, vous ne pourriez probablement pas dessiner aussi bien que ces images à l'écran. Mais au moins, c'était intuitif pour vous. Lorsque la zone est plus foncée, vous poussez le crayon plus fort et vous obtenez une couleur plus foncée. Lorsque la zone est plus légère, vous ne mettez pas du tout le crayon dessus et vous le laissez blanc. Ce que vous avez affaire ici s'appelle la valeur. C'est à quel point la zone est sombre ou claire. Et je vois mon sens intuitif complet. Et si c'est mal, ça nous dérange vraiment la tête. Nous pouvons détecter très rapidement quand la valeur est erronée, comme vous le verrez très prochainement. Le problème que nous avons eu avec les cours d'art quand nous étions plus jeunes. Lorsque nous commençons à essayer de faire en sorte que ces dessins soient en couleur. Si vous êtes quelque chose comme moi, les pensées d' essayer de créer l'image droite ne sont que terrifiantes à l'aube. Je n'ai jamais pu dessiner quelque chose qui a l'air aussi beau. Et c'est parce que de retour en cours d'art, comme beaucoup d'entre vous, quand j'ai commencé à penser aux couleurs, j'ai cessé de penser tellement à la valeur, comme la photo de gauche où je pense sur l'obscurité et la légèreté. Et j'ai commencé à penser beaucoup plus à quelque chose appelé Hue. Vous pouvez considérer la teinte comme les couleurs pour lesquelles vous avez un nom. Vous pouvez regarder cette photo et dire que c'est rose, bleu, blanc. Bien que nous ayons regardé cette image plus près et que nous nous rendions compte qu'il y a beaucoup de teintes de peau différentes, de bruns foncés et de blancs clairs sur tout le visage. Les valeurs varient énormément, même si la teinte n'est pas tellement différente. En fait, je vais soutenir que la teinte n'a pas importance lorsque vous créez une peinture en couleur. Ce que vous pouvez voir à l'écran ici c'est une section d'une roue chromatique montrant l'orange et le rouge, le vert et le bleu ainsi que toutes les couleurs pour lesquelles vous avez un nom. Ceux que je vais suggérer dans vos premiers cours d'art, vous pensiez un peu trop. Maintenant, les valeurs d'autre part, cette partie qui traverse la roue du noir au blanc, à quel point la couleur est sombre ou claire. Les tons, si vous le souhaitez, sont beaucoup plus importants. Si vous deviez retourner à un cours d'art et essayer de peindre un tableau réaliste. Et c'est pourquoi la plupart d'entre nous n' arrivent jamais vraiment à dessiner en noir et blanc. Nous prenons un ensemble de peintures et nous commençons à trop réfléchir à la teinte de chaque peinture. Nous commençons à trop penser aux noms rouge, bleu, vert, et pas assez à la façon dont nous devons les mélanger avec le noir et le blanc pour obtenir les différentes valeurs. La seule fois où un artiste pense teinte, c'est de rendre quelque chose de plus intéressant, ajouter de l'émotion à une image. Vous pouvez peindre un visage humain simplement en utilisant des peintures bleues et cela peut toujours paraître totalement réaliste. Cela peut paraître physiquement possible. L'une des raisons de cela est que, de façon réaliste vous avez vu un visage humain bleu à un moment donné. Vous avez vu quelqu'un dans une pièce où la plupart des ampoules étaient bleues, et donc la lumière qui réfléchissait sur son visage était bleue. Leur visage semblait donc d'une teinte bleue. Mais toutes les valeurs de leur visage, façon dont les lumières et l' obscurité de chaque zone étaient par rapport aux autres zones n'ont jamais changé. lumière et l'obscurité signifient toujours la même chose, mais la teinte peut changer radicalement en fonction de ce qui se trouve dans la pièce. Et comme vous apprendrez plus tard simplement quelle couleur se trouve à côté. Le problème, c'est que lorsque nous commençons à penser à la teinte, nous arrêtons de penser à la valeur. Si jamais vous êtes retourné à un cours d'art, vous vous souvenez de celui-ci ? Sortez une seule peinture et essayez de la mélanger avec du blanc et de la mélanger avec du noir. C'est ce qu'on appelle des tons. Si vous y ajoutez plus de blanc, vous l'appelleriez une teinte. Et si vous y ajoutez du noir, vous l'appelez une nuance de cette teinte. La teinte est ce que l' on pense normalement quand on pense traditionnellement à quelle couleur s'agit-il ? Vert, bleu, rouge, jaune, etc. Bien que cela soit important, la valeur est beaucoup plus importante pour rendre notre design physiquement possible, ce qui fera en sorte que nos utilisateurs se sentent plus à l'aise qu'ils regardent une vraie chose. La valeur correspond à la lumière ou à l' obscurité de la couleur. Nous appelons parfois cela de la luminosité. Mais pour le bien de ce cours et de travailler avec la couleur, nous allons appeler cela de la valeur. Vous pouvez prendre n'importe quelle teinte avec laquelle vous travaillez et ajoutez blanc pour créer une teinte de cette couleur. Vous pouvez également y ajouter du noir pour créer une nuance de cette couleur. Et pour vos devoirs, pour votre première tâche, je veux que vous tentiez de créer un dessin ou de dessiner une illustration dans laquelle vous limitez le nombre de teintes que vous utilisez, mais vous avez radicalement changé les valeurs. Cela vous obligera à réfléchir à la valeur des couleurs de votre choix. Vous pouvez ouvrir un programme de design si vous en avez un, ou vous pouvez retirer des crayons de couleur et le limiter à peut-être trois teintes au début et voir si vous pouvez créer un look réaliste illustration, il suffit de modifier les valeurs. 7. Exercices de valeur: La première chose que nous voudrions apprendre à faire lorsque nous apprenons à travailler avec la couleur est d'apprendre à identifier et à travailler avec différentes valeurs. À l'écran en ce moment, il y a 11 couleurs différentes, mais les 11 couleurs sont exactement de la même teinte. Ils ont juste des valeurs différentes. Ils sont plus clairs ou plus foncés dans la même teinte. Voyez si vous pouvez identifier la commande. Regardez ces 11 couleurs maintenant, notez qu'elles ont toutes une lettre dessus, puis réarrangez les lettres pour passer du blanc au noir. Mettez donc la vidéo en pause, jetez un coup d'œil, puis rejouez. Et je vais vous montrer les réponses. Voici les réponses. Comment avez-vous fait ? Je suppose que vous vous êtes probablement très bien débrouillé. Il est relativement intuitif de repérer les différentes valeurs entre différentes couleurs quand elles sont exactement de la même teinte, c'est pourquoi nous avons été si doués pour réaliser dessins en noir et blanc avec un crayon, mais ce n'est pas si bon quand nous avons commencé à ajouter de la peinture. Vous remarquerez peut-être aussi que lorsque je mets toutes ces couleurs à côté de celles qu' elles affectent les unes les autres, nous en parlerons un peu plus tard. Ils commencent à ressembler presque à des dégradés. Et en fait, le blanc ressemble à un léger gris. Et c'est uniquement à cause de la façon dont elle est affectée par les couleurs à côté. Nous allons le couvrir dans une autre vidéo très prochainement. Mais maintenant, je veux relever le défi. Je vais remuer ces valeurs, mais cette fois, je vais ramener les teintes et elles seront toutes différentes. Ayez un autre moyen de les trier par ordre de valeur, combien de blanc ou de noir ils ont et voyez comment vous progressez cette fois. Alors mettez la vidéo en pause et lisez-la et je vous montrerai les réponses dans une seconde. Comment êtes-vous arrivé cette fois ? Je suppose que même si vous avez eu autant de corrects. Comme vous l'avez eu la dernière fois, vous avez probablement encore passé plus de temps à le regarder, à essayer de vous assurer qu'ils étaient fissurés. Et pourtant, ils sont toujours exactement les mêmes valeurs dans le même ordre que lors du dernier exercice. Cet exercice peut être vraiment utile pour aider vos yeux à mieux repérer les valeurs. Ce sera l'une des choses les plus importantes concerne l'apprentissage de la couleur. Pour ces raisons, j'ai créé un PDF que vous pouvez cliquer sur ce même exercice quelques fois de plus plutôt que de le revoir encore et encore sur cette vidéo, vous pouvez télécharger cela provient des ressources. Et juste pour terminer cette vidéo, je veux vous montrer comment cette liste de 11 couleurs dans différentes teintes. Il a l'air assez foncé, on dirait que les valeurs globales sont assez élevées. Mais une fois que je les ai mis en ordre de valeur, ils ont l'air assez bas. Il est soudain assez léger sur la page. Les valeurs de ces couleurs apparaissent différentes uniquement en raison de l'ordre. Essayer d'identifier l'ordre de valeur des différentes couleurs est un exercice vraiment très utile. Cela va aider nos yeux à repérer ces différences subtiles de valeurs qui vont faire toute la différence dans votre conception. Donc, dans cette très courte vidéo, nous avons eu l'occasion de faire cela. Et maintenant, je veux que vous télécharGIEZ LE PDF à partir des ressources et que vous fassiez exactement la même chose encore quelques fois. 8. Luminosité: J'espère que vous avez réussi à commander quelques-unes de ces valeurs lors du dernier exercice, mais vous vous êtes probablement trompé. C'est un exercice très difficile. Normalement, pour rendre la tâche un peu plus facile pour les utilisateurs, même les artistes et même la photographie, vont en fait attirer les valeurs jusqu'aux extrémités et rendre les tons médians plus foncés ou plus clairs. Si vous prenez une photo, surtout si vous laissez votre appareil photo sur les paramètres par défaut, les seront probablement couleurs légèrement foncées seront probablement encore plus foncées et les couleurs légèrement claires encore plus claires. et créez un contraste supplémentaire sur la photo. Nos appareils photo le font en partie parce qu'il s'agit d'une tendance récente et que nous aimons l'apparence des photos à contraste élevé. Mais cela nous fait aussi du bien parce que nous pouvons interpréter et comprendre l'image plus rapidement. Cela signifie également que nos yeux ont été en quelque sorte formés à la valeur non naturelle des images et que nous voulons probablement poursuivre cela. Tendance. Les usages sont habitués à voir des choses à contraste élevé. Vous vous êtes probablement demandé pourquoi je continue d'utiliser la valeur du mot alors que la valeur du mot alors la luminosité du mot beaucoup plus logique dans cette situation, nous parlons de la luminosité de la couleur, n'est-ce pas ? Eh bien, peut-être, mais malheureusement la luminosité quand on parle de couleur, cela peut souvent signifier quelque chose d'un peu plus perceptif. Comme il nous semble perceptuellement brillant. C'est pourquoi cette dernière activité que je vous ai donnée est un peu cruelle. Vous êtes très habitué à pouvoir repérer si quelque chose est plus lumineux ou pas, mais pas tellement s'il a une valeur supérieure ou inférieure. Pour vous expliquer, j'ai créé ici un graphique très simple. Le long de l'axe des X, des changements énormes et le long de l'axe Y, la valeur change. Vous remarquerez probablement qu'en regardant cela, il y a trois bandes claires sur trois bandes lumineuses où il semble avoir une valeur plus élevée lorsque vous passez de gauche à droite, malgré le fait que je dis clairement que ce n'est pas le cas. Et ces trois couleurs sont cyan, magenta et jaune. Il y a une certaine importance à ces couleurs dont nous parlerons plus tard. Vous avez peut-être déjà remarqué qu'il y a les trois couleurs que vous avez placées dans votre imprimante. Mais pour l'instant, prenons simplement ces trois couleurs et ajoutons les trois couleurs qui s' intègrent parfaitement au milieu entre les espaces de celles-ci, rouge, le vert et le bleu, et les tracer. sur ce graphique s'il s'agissait de luminosité au lieu de quatre valeurs. Maintenant, j'ai légèrement exagéré cela pour le bien de ce graphique, mais vous pouvez voir que ces six couleurs qui ont toutes exactement la même valeur, ont des luminosités très différentes. Rappelez-vous maintenant ce que cela signifie, c'est qu'ils ont la même quantité de blanc ou de noir ajoutée à la teinte de base, mais ils nous semblent différents niveaux de luminosité, notre perception est différente. Si j'ajoute toutes les différentes luminosités de ceux qui sont de retour, vous remarquerez quelques choses. Tout d'abord, nous avons trois pics significatifs, jaune, le cyan et le magenta, et trois creux, rouges, verts et bleus. Mais vous remarquerez également qu'il ne constitue plus un carré pratique. Et c'est pourquoi vous ne voyez pas cela dans un programme graphique. Nous en parlerons plus dans un petit peu, mais vous ne pouvez pas créer de système numérique pour référencer les couleurs dans ce nouveau graphique car il se peut que vous obteniez un endroit où il n'y a pas de couleur si nous répétons l'exercice. de la dernière vidéo, mais cette fois, nous regardons une série de couleurs et essayons de les commander en fonction de la luminosité perçue. Soyons honnêtes, vous ne pouvez pas vous tromper parce que la perception de la façon dont nous quantifions la luminosité est basée sur une série d' expériences utilisant des centaines de personnes à évaluer à quel point quelque chose leur apparaît brillant. Si vous souhaitez essayer de les organiser par ordre de luminosité perçue, donnez-y, essayez d' écrire les lettres maintenant. Mais vous devriez trouver cela beaucoup plus facile car il n'y a pas de jaune foncé et il n'y a pas de bleu vif. Voici les réponses à venir. Maintenant. Maintenant, si vous avez eu des problèmes avec cela, c'était probablement réaliste à cause des couleurs du milieu. La différence de luminosité perçue entre chacun d' eux et chacun de ses voisins est exactement la même. Mais nous allons encore trouver les zones au milieu un peu plus difficiles à identifier. Et cela peut être dû en partie au fait que les artistes et même les paramètres de votre appareil photo, nous essaierons d'éviter de montrer ces milieux. C'est le genre de couleurs qui pourraient être évitées. Lorsque nous parlons de la luminosité de la couleur, ce n'est pas tout à fait la même chose que la valeur, elle est ajustée en fonction de la perception. cyan, le magenta et le jaune nous paraissent naturellement plus lumineux, et le rouge, le vert et le bleu nous paraissent naturellement plus foncés. Lorsque nous choisissons des couleurs à l'aide d'un programme graphique ou même d'un CSS, nous ne pouvons pas les choisir en fonction de la luminosité, principalement parce qu'il est beaucoup plus difficile de créer un système pour choisir les couleurs de cette façon. Nous en parlerons beaucoup plus tard. Mais cela signifie qu' en utilisant nos programmes graphiques ou CSS, nous pouvons facilement choisir couleurs qui vont tout simplement mal paraître. Par exemple, un jaune foncé ne sera pas particulièrement beau, ni même n'importe quoi au milieu de la plage de luminosité, qui pourrait ne pas nous donner aspect contrasté élevé que nous avons tous appris à aimer et nous pouvons également rendre notre design un peu plus déroutant et difficile à percevoir. 9. Exemples de luminosité: Voici une gamme de rouges. Maintenant, ils sont tous exactement de la même teinte, mais ce ne sont pas des valeurs différentes. Si j'utilise un sélecteur de couleurs spécial pour choisir des rouges de différentes luminosités, cela me donne beaucoup moins de choix. Il y a littéralement ces trois légères variations, vraiment. Je peux supposer que c'est parce que les gens ne perçoivent tout simplement pas la couleur en haut à gauche et que la couleur et le haut à droite sont même de la même couleur. Mais une chose que nous pouvons certainement dire, c'est que la couleur et le haut à gauche et la couleur en haut à droite ne sont tout simplement pas particulièrement belles. Nous ne voulons probablement pas les utiliser. J'ai dit plus tôt que vous ne pouvez pas vraiment faire de bords jaune foncé. Ça n'a pas l'air beau. Eh bien, ce que vous voudriez faire dans cette situation, c'est faire un peu brun, jaune, puis ça peut être beau. Ce que je peux faire avec cette gamme de rouges, c'est ceux qui ont une valeur inférieure, je peux ajouter un peu de teinte bleue. Et ceux qui ont une valeur supérieure, je peux ajouter un peu de teinte jaune. Cela signifie que non seulement la valeur est la même, mais elle semble en fait un peu plus brillante aux extrêmes. Et nous nous retrouvons avec des couleurs qui ne sont pas seulement un peu plus belles, mais qui sont un peu plus confortables à percevoir. Chaque fois que vous créez une gamme de couleurs avec la même teinte, elle sera plutôt mauvaise aux extrêmes. Avec les couleurs de grande valeur. Vous allez vouloir mélanger un peu une teinte très brillante là-dedans. Et avec les couleurs de faible valeur, vous allez vouloir faire le contraire et mettre une teinte moins brillante mélangée à cette couleur. Imaginons que je conçois ce simple interrupteur à bascule pour une application Web. Je veux que mon interrupteur à bascule soit 3D pour que les gens sachent instantanément que c'est quelque chose avec lequel ils peuvent interagir. Je vais ajouter une petite ombre à l'intérieur pour montrer que cette zone grise est en retrait et un peu de lumière sur le petit cercle rouge que vous pouvez voir qu' il sort un peu. J'imagine essentiellement qu'il y a une source lumineuse en haut à gauche de l'écran. Voici les couleurs supplémentaires que j'ai utilisées. J'ai utilisé une version à valeur supérieure du rouge et une version à valeur inférieure du gris bleuté. Maintenant, lorsque nous parlons du fonctionnement de la lumière, vous réaliserez que cela n'a pas l'air naturel. Ce n'est pas du tout comme ça que la lumière rebondit naturellement. Mais vous pouvez certainement être d'accord cela n'a pas l'air naturel et que cela n'a probablement pas l'air si beau pour quelques raisons. Premièrement, le rouge contient maintenant un peu plus de blanc. D'une certaine manière, on dirait que les imprimantes sont à court d'encre. Maintenant, la valeur la plus faible sur la page est une ombre créant beaucoup de contraste dans un endroit où je n'en veux vraiment pas. Je peux contourner ces deux problèmes en ajustant un peu la teinte. Le rouge est maintenant un peu plus haute valeur lue, mais il y a un peu de jaune mélangé alors, et le gris est maintenant un peu plus faible, mais il a en fait un peu de bleu mélangé. J'ai maintenant quelque chose avec un aspect 3D, donc je sais que je peux interagir avec elle, mais cela semble un peu plus naturel et plus facile à percevoir. Je vais commencer à travailler sur une page d'accueil pour un site Web que je ne construirai jamais. Voici des statistiques très, très basiques et voyons si nous pouvons apporter quelques améliorations. Eh bien, cet orange vif pour ce cours de départ et le bouton d'inscription, ils sont de la même couleur que ceux-ci, 1234 en bas. Ils ont la même luminosité. Et j'aimerais que ces chiffres aient une luminosité inférieure pour qu' ils sautent légèrement moins. Je vais baisser la luminosité ajoutant non seulement un peu de noir, mais aussi en les faisant un peu plus d'orange brownie. Maintenant, les boutons ne sont pas tout à fait la chose la plus importante sur la page. Je pense que le texte du titre les écrase probablement un peu. Je vais juste réduire le blanc des textes de rubrique. La couleur violette n'est pas particulièrement brillante, mais juste la taille pure des lettres combinée aux luminosités, compte tenu de leur importance un peu trop importante sur la page pour faire mes boutons se démarquer et faire en sorte que les gens sachent instantanément qu'ils peuvent cliquer dessus. Je vais ajouter un peu d'ombre, mais comme nous l'avons fait plus tôt, je vais mettre un peu de bleu dans l'ombre, donc ce n'est pas vraiment écrasant sur la page. Et je vais ajouter un peu de jaune dans les reflets. Maintenant, c'est génial. Mes boutons se démarquent vraiment. Maintenant, il y a une chose que je ne supporte pas à propos de ce design. Il y a une sorte de gris en arrière-plan derrière ce personnage à droite. Il y a comme une tache grise et je ne veux vraiment pas avoir grande surface de gris et j'ai juste l'air terne. Ce que je pourrais faire, c'est créer une couleur beaucoup plus brillante pour qu'elle ne soit pas super écrasante, mais elle donne juste un peu de couleur au dos de la page. Si nous vérifions simplement notre tableau de luminosité, nous pouvons voir que le cyan est une couleur assez vive, juste après le jaune. Maintenant, nous utilisons le jaune comme surlignements, donc nous n' allons pas vraiment l'utiliser comme couleur d'arrière-plan. Mettons un peu de cyan très clair en arrière-plan ici. Enfin, je vais utiliser mon œil très rapidement maintenant que tout est d'une couleur différente pour réaligner les choses un tout petit peu. J'ai maintenant un design dont je ne suis pas très satisfait. Nous allons apporter quelques améliorations dans les prochaines vidéos. Mais pour le moment, je pense que c'est bien mieux que le design original. Je n'ai pas modifié la mise en page. Je n'ai pas changé de contenu. Je n'ai pas changé les polices de caractères, et je n'ai vraiment modifié les couleurs d'une très petite quantité. Au début de cette vidéo, vous m'avez vu créer une gamme de couleurs rouges où, pour les rouges plus foncés, j'ai mis une petite quantité de bleu. Et pour les rouges plus clairs, j'ai mis une petite quantité de jaune, choisis une couleur différente, peut-être verte, et j'essaie de faire la même chose. Voyez si vous pouvez créer une gamme de couleurs un peu plus naturelle et agréable en ajoutant simplement une couleur légèrement plus claire dans les verts plus clairs et en ajoutant une couleur légèrement plus foncée dans les verts plus foncés. Si vous avez déjà travaillé sur un design, reprenez-le maintenant ou choisissez l'un de ceux que vous avez réalisés une vidéo précédente et donnez-lui dans une vidéo précédente et donnez-lui également les couleurs réelles d'un dessin. Surtout à la recherche d' éléments noirs, blancs ou gris. Essayez de mélanger un peu d' autres HEW avec ces couleurs. 10. Correspondance des couleurs: Supposons que je me suis connecté mon application Web maintenant et que pour raison quelconque, il s'agit d'un tableau de bord des dépenses, mais peut-être que cela ressemble un peu à ça. Maintenant, je veux essayer de rendre cela un peu plus uniforme. Essayez d'améliorer le design ici. Une chose qu'un artiste peut faire en peignant un portrait est peut-être simplement d'utiliser des couleurs froides. L'idée ici est de toutes les couleurs de la page. Je viens d'y ajouter une légère teinte bleue. Je viens de mélanger un peu de bleu dans chacune de ces couleurs. Ou bien, je pourrais simplement ajouter une tente chaude à tout. Eh bien, je mélange juste un peu d' orange dans tout et cela rend le tout uniforme, ce qui ne fait certainement pas ressortir les boutons ou quoi que ce soit, mais ça donne l'impression que les couleurs ont l'impression qu'elles appartiennent peut-être à la même palette. La raison pour laquelle cela pourrait paraître particulièrement beau si nous peignons une composition est que vous avez très rarement lumière blanche dans une zone sauf si vous êtes à l'extérieur et à la lumière directe du soleil. Mais même à des moments précis de la journée, vous ne disposez pas seulement de la lumière blanche comme source. Ces montagnes sur cette photo ne sont pas vraiment bleues. C'est juste que le soleil est plus bas dans le ciel, passe par plus d'atmosphère. Et nous savons que le bleu provient de lumières de longueur d'onde plus courtes et que la lumière à longueur d'onde plus courte sera déplacée davantage. Par conséquent, il y aura plus de lumière bleue qui rebondit autour. La zone autour du soleil apparaît plus rouge simplement parce que les ondes lumineuses rouges sont plus longues et donc elles se diffuseront moins, puis plus susceptibles de venir directement vers vous. Maintenant, si vous regardez dans l'autre sens, selon que vous étiez sous la lumière directe du soleil ou non, les choses que vous regardiez sembleraient soit plus bleutées dans l'ensemble, soit plus rougeâtres dans l'ensemble. Les peintres peuvent parler de donner une teinte plus chaude à un tableau, ou une teinte plus froide dans l'ensemble, car cela va unifier choses tout en les rendant naturelles. Comme nous l'avons dit, il est tout à fait naturel de peindre un visage bleu parce qu' à un moment donné, on vient de voir un visage sous un éclairage bleu et c'est à cela qu'ils ressemblaient avec les deux compositions que je viens de vous montrer. J'ai mentionné que cela ne fait vraiment rien ressortir. Si tout avait une teinte bleutée, nos boutons orange ne se distinguent pas. Ce n'est peut-être pas une technique utile. Mais regardons une autre photo de quelques montagnes. Si nous regardons cette chaîne de montagnes ici, vous remarquerez peut-être que les montagnes de droite semblent plus bleues et celles de gauche apparaissent un peu plus rouges et jaunes. C'est la même chaîne de montagnes. Les lumières de la montagne sur la droite passent simplement par plus d'air et plus de lumières déplacées rebondissent déjà. C'est un point intéressant pour nous en tant que designers. Cette image a une large gamme de couleurs. Il y a toutes les lumières que nous voudrions peut-être. Et pourtant, des choses qui ont une longueur d'onde plus courte, comme le violet, le bleu et le cyan, apparaissent tout simplement plus loin. Des couleurs comme le rouge et l'orange ont potentiellement voyagé dans moins d'air et sont donc plus proches de nous. Et voici un diagramme pratique avec toutes les couleurs dans l'ordre des longueurs d'onde, avec la longueur d'onde la plus courte à gauche et la longueur d'onde plus longue à droite. Pour faire apparaître quelque chose plus loin, nous pouvons simplement le rendre plus violet ou bleu pour le rendre plus proche, nous pourrions le rendre rouge ou orange. Se référer à ces couleurs comme les couleurs froides sont des couleurs chaudes est un peu fissurée et tout le concept de couleurs chaudes et froides a été assez fortement démystifié. Mais l'idée que couleurs des vagues plus longues apparaissent plus près de vous est très réelle. Si nous regardons notre design simple que je créais à nouveau, il est probablement plus logique d' utiliser ces teintes bleues dans les couleurs d'arrière-plan et d'utiliser ces teintes rouges dans les couleurs de premier plan. Si je vous montre ce même design avec un fond gris, gris est tout simplement des lumières très impures. Il apparaîtra juste quelque part au milieu. Mais si je le fais un peu cyan, semblable à cette image de ces montagnes antérieures. Cela donne peut-être l' impression que l' arrière-plan a l'air d'être un peu repoussé sans utiliser d'ombres ou reflets ou quoi que ce soit juste de couleur plate, je peux ajouter une sensation de profondeur à mon design. De même avec mes boutons orange vif, parce qu'ils sont déjà orange, ils se sentent un peu retirés de la page. C'est juste plus proche de nous. Et peut-être que ces boutons n'ont pas vraiment besoin d' ombre portée. Tant qu'il s'agit d'une couleur claire à ondes longues. Une erreur courante que je vois des gens faire et que je peux démontrer avec ces trois boutons ici est celle qui dit actif à l'extrême gauche. Comme nous l'avons déjà parlé, il semble peut-être un peu détourné vers nous à cause de la couleur orange. revanche, avec le deuxième bouton, il convient de rappeler que la couleur est relative aux couleurs qui l'entourent. Tout comme nous l'avons dit, que si vous ajoutez une teinte bleue à tout, notre cerveau normaliserait un peu les couleurs en faisant entendre le mot orange vif inactif. Mais un fond légèrement orange repoussera le fond légèrement orange raison du contraste entre les textes orange vif et le fond orange clair, cerveau. se normalise, supposant qu'il y ait juste plus de lumière orange qui frappe autour. Ce deuxième bouton semble donc presque un peu indenté. Mais à un autre niveau, c'est un peu désorientant parce que ces oranges claires par-dessus le gris. Ce deuxième bouton ne fait tout simplement pas partie d'une composition naturelle. Et le dernier bouton, le gris , a l'impression qu'il ne colle pas ou ne sort pas. Il n'a pas de profondeur. Mon bouton inactif est peut-être gris, mais il y a un tout petit peu d'orange dans ce gris. Dans notre dernière vidéo, nous avons ajouté un peu de bleu dans l'ombre et un peu de jaune dans les tons clairs de l' un de nos boutons. Ce sont des choix de couleurs assez pratiques car le bleu est évidemment plus froid et va donc se sentir un peu plus loin et peut-être ajouter encore plus de profondeur qu' une goutte. une ombre ou un surlignement le ferait normalement. Pour ces raisons, nous pouvons probablement réduire un peu l'intensité de ces ombres et de ces reflets tout en obtenant ce sens 3D afin que les gens identifient facilement comme un bouton le repérent et cliquent dessus. Cela signifie que nous pouvons nous en sortir avec une ombre portée légèrement moins intense, mais nous pourrions éviter d'utiliser la même intensité d'ombre portée sur des boutons de couleurs différentes. La couleur de notre bouton inactif suggère qu'il est un peu plus éloigné même peut-être, alors que l'ombre portée suggère qu' il s'agit de la même distance. Et c'est un peu désorientant. Si jamais nous regardons un paysage sous une lumière blanche parfaite, les choses plus éloignées de nous sembleront plus bleues et les choses les plus proches de nous sembleront avoir plus de rouge. C'est simplement parce que la vague plus courte de lumière bleue est déplacée davantage. Nous pouvons utiliser cela à notre avantage lors création d'une interface utilisateur, car nous pouvons donner quelque chose un élément de profondeur et 3D sans utiliser d' ombres portées, si nous le voulons, nous pouvons simplement utiliser couleurs pour que les choses soient différentes distances de nous. Nous pouvons donc faire apparaître les choses comme si elles sortent un peu de la page simplement en utilisant une couleur rouge ou orange. Et nous pouvons faire en sorte que quelque chose ressemble davantage un arrière-plan simplement en utilisant un bleu ou un violet. 11. Saturation: Jusqu'à présent, nous avons parlé trois attributs différents de couleur : la teinte, le nom, il peut y avoir du bleu, du vert, du jaune, du cyan, magenta, ou de lire la valeur de la quantité de blanc ou de noir mélangée à cela. couleur. Et nous avons parlé de la luminosité qui est perceptive. jaune, le cyan et le magenta sont plus lumineux que le rouge, le bleu et le vert. Il y a un autre attribut que vous avez probablement remarqué vos programmes graphiques lorsque vous choisissez une couleur de saturation. Si vous regardez l'image maintenant, je désature lentement ces couleurs de la même teinte, la même valeur. Mais je baisse la saturation. Si nous choisissons plutôt une seule teinte, choisissons un rouge et que nous le regardons avec un graphique avec une valeur par rapport à la saturation sur les axes X et Y, nous pourrions voir quelque chose comme ça. On peut penser que le mot saturation a été un peu semblable au mot pureté. Ces cinq couleurs ont exactement la même teinte. Ils ont exactement la même valeur que dans la même quantité de noir et de blanc, mais ils sont toujours de couleurs très différentes. Et c'est à cause de la pureté des briquets, le rouge en haut au milieu est une forme de lumière très, très pure. La plupart des longueurs d'onde ici ont une longueur similaire qui indiquerait si Rand avec très peu de variations de longueur d'onde, alors que le gris en bas a un mélange presque égal de tous les différentes longueurs d'onde perceptibles par votre œil. Votre œil l'interprète comme du gris, ce que vous pourriez aussi penser au gris car votre œil ne peut pas vraiment comprendre de quelle couleur il est. D'après ce que j'ai dit jusqu'ici dans ce cours, on peut vous pardonner de penser que je veux que vous évitiez les gris. Je ne veux pas que vous utilisiez beaucoup de gris. Probablement beaucoup plus que ce que vous utilisez actuellement. En fait, trop de couleurs très saturées est un travail acharné pour votre œil. Et nous pouvons utiliser la saturation comme forme de contraste. Regardons un instant quelques tableaux différents du monde de l'art. Encore une fois, cette peinture présente couleurs très, très désaturées. Et pourtant, aucune de ces couleurs n'est complètement désaturée. Vous pouvez clairement voir les bleus, les verts et les rouges dans cette palette de couleurs sans aucune couleur saturée ici, ceux-ci ont l'air plutôt colorés, mais quand nous regardons la palette par elle-même, On dirait presque un tas de gris. Cependant, cette palette de couleurs serait évidemment d'une utilité limitée pour nous en tant que concepteur d'interface utilisateur car rien ne se distingue. n'y a rien d'audacieux qui dit Cliquez sur moi ou regardez ça. Cela ne nous aide pas à construire une hiérarchie visuelle dans nos compositions. Peut-être qu'une palette de couleurs plus semblable à celle-ci serait plus utile là où toutes les couleurs sont vraiment, vraiment saturées. Tout est très dominant. Et nous savons qu'il y a cet orange vif sur lequel nous voudrions probablement cliquer ou regarder. Et tout est en concurrence pour notre attention. problème ici est que lorsque tout semble saturé, ils se lavent un peu simplement en étant à côté d'une couleur saturée, une couleur semble moins saturée. Et bien sûr, tout ne peut pas attirer notre attention. Nous voulons seulement que certains éléments se démarquent. Un gros problème que je vois poser aux designers débutants est le même que celui que nous avons fait dans tous les anciens cours d'art où nous pensons simplement aux différences de teintes entre les couleurs. En fait, nous n'utiliserions jamais une palette de couleurs pour concevoir une interface utilisateur où toutes les couleurs sont vraiment saturées. Si quoi que ce soit, pour la conception de l'interface utilisateur, cette palette de couleurs est en fait pire que la dernière. Nous voudrions probablement utiliser une palette de couleurs plus similaire à celle de ce tableau, où la plupart des couleurs sont assez désaturées par le rouge vif occasionnel. De façon réaliste, même cette peinture ne serait pas géniale pour notre interface utilisateur. Nous voudrions que ce rouge soit encore plus saturé, mais il n'était pas facile d' essayer de trouver un tableau avec une palette de couleurs similaire à celle que nous pourrions utiliser dans l'interface utilisateur. Si vous trouvez un sélecteur de couleurs en ligne ou dans une application graphique, ou si vous recherchez de belles palettes de couleurs sur Internet , vous obtiendrez quelque chose qui ressemble un peu vous obtiendrez quelque chose qui ressemble un peu à ceci à l'écran. Cinq couleurs incroyablement saturées. Les teintes peuvent très bien contraster. Ils ont peut-être tous été configurés de cette façon, mais ils sont probablement tous un peu trop saturés pour vous être utiles en tant que concepteur d'interface utilisateur. Quand j'ai commencé à concevoir, comme beaucoup de designers, je prenais une palette de couleurs comme celle-ci et j'appliquais ces couleurs telles qu'elles sont à mes créations. Et ils ressembleraient naturellement à ce tableau Matisse d'autrefois. Tout est beaucoup trop saturé et donc ils se lavent mutuellement et rien ne se démarque. Et il peut s'avérer un peu difficile de regarder et d'identifier ce qui se trouve à l'écran. Disons que j'ai trouvé cette palette de couleurs en ligne avec ces cinq couleurs. Cela pourrait être bon à certaines fins. Cela ne sera pas utile pour la conception de mon interface utilisateur. Je vais devoir désaturer au moins la moitié des couleurs. Maintenant, cela n'a pas fière allure, ces cinq couleurs l'une à côté de l'autre, mais elles vont beaucoup mieux quand je les applique à un dessin. La saturation n'est pas la même que la valeur. Ce n'est pas à quel point il est clair ou sombre, c'est à quel point il est pur, c'est à quel point il est gris ou coloré. Lorsque nous choisissons des couleurs pour la première fois pour nos conceptions d'interface utilisateur, il peut être tentant de choisir des couleurs beaucoup trop saturées. Non seulement ils se lavent mutuellement, mais ils ne sont pas particulièrement pratiques pour construire une hiérarchie visuelle. Les palettes de couleurs idéales que nous choisirions pour le design vont avoir beaucoup plus de couleurs désaturées que nous ne l'attendons d'abord. Et la seule façon de le prouver est de mettre les couleurs dans un design et de voir leur apparence. Faisons-le ensuite. 12. Exemples de saturation: Voici un tableau de bord simple que j'ai créé. Maintenant, je dirais que certaines des couleurs ici sont un peu trop saturées, pas aussi mauvaises que certaines choses que j'ai créées et certainement pas quelque chose que j'ai vu auparavant. Mais il y a des couleurs qui n' ont pas besoin d'être aussi saturées. Avant d'entrer là-dedans, je pourrais souligner que chacune des sections de ce design, j'ai un contour noir épais qui est assez écrasant, distrayant, probablement un peu trop contraste dans les endroits où nous n'en avons pas besoin. Bien sûr, je l'ai fait parce que je n'avais pas accès à beaucoup de couleurs désaturées. Si j'avais une couleur désaturée en arrière-plan, je n'aurais plus besoin des lignes noires. Quelque chose comme ça. Gray semble instantanément beaucoup mieux. Je peux supprimer ces lignes noires et cela sépare encore clairement les différentes zones de ma page. Maintenant, plutôt que d'utiliser un gris complet, je peux utiliser un bleu très saturé. Nous savons que cela va se sentir un peu plus loin. Et cela va rendre notre design un peu moins gris, ce qui n'est pas toujours super agréable à avoir. le recul, je n'ai peut-être pas assez désaturé cette couleur de fond, mais vous pouvez voir à quel point c'est probablement un peu plus beau que ce gris que nous avions auparavant. Voyons si nous pouvons désaturer d'autres choses parce qu'en ce moment j'ai des pastilles bizarres qui ressemblent probablement davantage à des boutons. Ils sont un peu trop dans votre visage. Ici, j'ai quelques chiffres qui sont jolis, à peu près simplement que nous voulons garder à l'écran. L'utilisateur n'oublie donc pas nombre de courriels qu'il a sur Open et ce genre de choses. Nous avons plusieurs graphiques et autres éléments d'information qui sont en couleurs très, très saturées en ce moment, mais ils n'ont pas besoin de l'être. Vous pouvez voir toutes ces zones sur nos moins saturées ou ces icônes, pastilles et différents éléments d'information sur la page, nous pouvons tout simplement désaturer beaucoup ces zones. Actuellement, tout mon texte a la même valeur et la même saturation. Je pourrais désaturer et baisser la valeur un peu de ce texte. Et cela va également aider à créer cette hiérarchie un peu sur la page. Peut-être qu'une partie de cette couleur violette de marque que j' utilise pour les titres, peut-être que c'est un peu trop saturé aussi. Allons baisser ça. Il ressemble presque une couleur noire maintenant, mais c'est juste une version très, très désaturée de ce violet original. Vous pouvez voir que ce design est toujours coloré. Il a encore une certaine profondeur. Les choses se sentent proches de nous ou loin de nous. C'est presque 3D, mais tout est beaucoup moins saturé maintenant c'est plus facile pour les yeux et il est plus facile pour nous de faire ressortir certaines choses. Cela signifie que si nous voulons vraiment attirer l'attention sur quelque chose et dire que c'est la première chose que nous pensons que vous devriez regarder. Nous pouvons rendre cette couleur vraiment saturée, comme nos boutons d'appel à l'action ou ce jaune vif que je viens de mettre ici. Et peut-être que je suis allé trop loin avec ce jaune aussi. Mais cela explique mon point de vue que nous pouvons maintenant faire en sorte que cela se démarque vraiment. C'est donc la première chose que les gens regardent si c'est ce que nous voulons, nous n'avons cette option en désaturant tout le reste. Maintenant, nous pouvons utiliser un peu de couleur supplémentaire pour ajouter profondeur à porter ou attirer plus l'attention sur certaines choses, ou simplement pour la rendre un peu plus élégante, peut-être que je veux faire comprendre que quelque chose est 3D. Je peux maintenant ajouter un peu de couleur dans une ombre portée. Je pourrais découper cela en ayant un peu de couleur en arrière-plan. Je pourrais faire en sorte que ces tableaux aient des couleurs dégradées intéressantes. Ce sont des options que j' ai maintenant disponibles car j' ai un peu de couleur de rechange que je peux utiliser sur tout le site, ce que je n'aurais pas pu faire sur les designs originaux car toutes les couleurs nous sommes tous prêts à utiliser. saturé il a déjà regardé en mars. Si nous examinons les palettes de couleurs réelles de certaines des couleurs que j'ai ajoutées et utilisées. Comme j'ai changé ce design, vous pouvez voir qu'ils sont vraiment désaturés. En fait, si nous les regardons hors du contexte du design, les regarderons seuls, sur le côté ici, ils ont vraiment l'air beaucoup trop désaturés. dirait qu'ils ne fonctionneront pas du tout bien dans la conception. C'est pourquoi nous voulons toujours utiliser nos couleurs dans le contexte d'un design pour voir leur apparence. Nous n'approuvons peut-être jamais les palettes de couleurs sur les droits ou dans le cadre de notre palette de couleurs. Mais nous approuverons probablement le design à gauche, ce qui semble beaucoup mieux lorsque nous les voyons dans leur contexte. En tant qu'exercice. Maintenant, j'aimerais que vous preniez quelque chose que vous avez déjà conçu ou que vous trouviez un design existant en ligne quelque part. Et essayez de saturer certaines couleurs, mais essayez d' éviter de rendre quoi que ce soit complètement gris. Voyez si vous pouvez obtenir que le design soit toujours beau. Alors qu'il n'y a qu'une ou deux couleurs très saturées. Et beaucoup, beaucoup de couleurs désaturées, presque grises. 13. Constraste: Supposons que nous ayons un écran d'intégration pour notre application mobile, peut-être quelque chose qui ressemble un peu à ceci. La première chose que vous pourriez penser, c'est que ces textes sont un peu difficiles à lire. Et de toute évidence, l'une des choses qui rendraient les textes difficiles à lire est qu'il y a pas beaucoup de contrastes entre la couleur du texte et la couleur d'arrière-plan. Nous pourrions bien sûr supprimer cette couleur d'arrière-plan et ensuite il y aura plus de contraste. L'arrière-plan est blanc maintenant pour que le texte se démarque davantage. Nous pouvons le lire plus facilement. Les textes des paragraphes, nous pourrions simplement rendre cela plus sombre. Et puis il y a encore plus de contraste ici. Mais nous ne créons pas simplement un contraste avec la lumière et l'obscurité. Nous pouvons créer un contraste de teintes. Maintenant, le bleu et le jaune sont des couleurs contrastées. Je pourrais donc avoir un fond jaune avec taxe bleue ou un fond bleu avec du texte jaune. Et cela va le faire ressortir encore plus. Cela signifie que je peux avoir une palette de couleurs un peu plus intéressante tout en rendant mon texte facile à lire et que le tout soit assez facile à percevoir et que nous puissions repérer la différence. entre différentes zones. Maintenant, bien sûr, nous avons un problème où toutes les couleurs sont trop saturées, donc elles vont se laver un peu et ça va être assez dur pour nos yeux avec toutes ces couleurs saturées arrivent à nous. Heureusement, nous avons un autre type de contraste de couleur, le contraste de saturation. Je pourrais donc saturer l' arrière-plan et ensuite avoir texte très saturé et ça ressemblerait à ça. Maintenant, si je vous montre simplement les milieux saturés et désaturés ici, vous pouvez voir que l'un d'entre eux est beaucoup plus facile à regarder, et je dirais qu'il est probablement un peu plus facile à lire aussi. Ces trois attributs différents dont la couleur a une valeur, teinte et une saturation, peuvent tous être utilisés pour créer un contraste. Mais pourquoi le contraste est-il si important pour nous ? Nous savons que cela va rendre notre deuxième année visuellement intéressante à regarder. Nous savons que cela va faciliter la perception de l' endroit où se trouve le texte et de tels trucs. Mais en fait, c'est précieux pour nous pour une raison tout à fait différente. C'est l'Union Jack, le drapeau britannique. Et si vous fixez cet endroit au milieu pendant 30 secondes, je le laisserai à l' écran pendant que je parle. Gardez simplement les yeux sur ce point noir. À un moment donné, vous avez probablement déjà fait cette astuce visuelle, mais faisons-le quand même. Gardez les yeux rivés sur les points noirs. Et puis, boum, que s'est-il passé ? Eh bien, après avoir retiré le drapeau de l'écran, vous avez probablement vu ce drapeau pour le 2.5e peut-être parce que tous les cônes de vos yeux tellement habitués à regarder les couleurs qui étaient là. Ils étaient fatigués de regarder ces couleurs et ils étaient plus sensibles à ces couleurs. Ils étaient fatigués de regarder la lumière jaune de sorte que lorsqu' ils ont reçu toutes les lumières, qu'ils devinent quand ils voient du blanc, ils ne voient que le bleu. Rappelez-vous que le blanc contient toutes les lumières colorées. Et le peu qui regardait le jaune est maintenant fatigué. Il est donc plus probable que votre œil soit bleu. Pensez-y comme si vous emmeniez votre corps au gymnase et que vous faisiez un exercice physique qui impliquait d'utiliser vos bras. Vos bras seraient fatigués. Il est probablement plus logique de faire un exercice de course à pied qui sera moins douloureux, mais vous serez aussi mieux pour le faire. De même, si vos yeux ont juste regardé beaucoup de jaune, il est plus logique de regarder un peu de bleu ensuite. Non seulement cela va être plus confortable, mais vous serez mieux en mesure de le percevoir. Si je partage le design sur l'écran maintenant, moitié de votre œil fait des exercices sur les jambes et l'autre moitié fait des exercices de bras. Et parce que votre œil ne reste pas particulièrement immobile, il saute un peu autour. Vos différents morceaux de votre œil basculent entre les deux, donc ne sont pas trop stressés de l'un ou de l'autre. Les couleurs contrastées exactes des trois à gauche correspondent aux trois couleurs actuellement situées à droite. Si nous voulions rendre le drapeau britannique incroyablement confortable à regarder, nous pourrions le faire comme ça. Maintenant, j'ai déjà vu des gens dessiner ça comme ça auparavant. Ou encore, pour m'assurer que je bouleverse également tous les citoyens du Royaume-Uni. Nous pourrions aussi le faire ressembler à ceci. Une chose que vous remarquerez probablement avec ces deux nouveaux designs de drapeau que j'ai créés est de regarder un million de kilomètres de ce qui existe. En fait, ce drapeau ici ressemble juste à ce que les parties rouges soient un peu trop longues au soleil. Nous créerons davantage d' intérêts visuels en n'ayant pas les couleurs exactement contrastées les unes avec les autres. Parce que, principalement parce que la plupart des autres designers l' ont fait à un moment donné de l'histoire, tout simplement pas exactement cela. C'est un peu paresseux. Mais bien sûr, dans le monde des drapeaux, la raison pour laquelle ce n'est pas le drapeau n'est que toutes les couleurs voulues pour avoir une importance égale. Par conséquent, la couleur au milieu devrait être beaucoup plus saturée. Nous savons que les gens aiment naturellement regarder couleurs contrastées parce qu'ils prennent toujours des photos de cela. Tout le monde sur la plage aura actuellement son appareil photo qui s' éteindra sur cette scène exacte. Nous savons déjà, à cause de la façon dont la lumière réfracte, qu'elle nous donne les lumières à ondes courtes autour des côtés et les lumières à ondes longues au milieu de l'image ici. Et cela sépare parfaitement les couleurs contrastées pour nous. Cela le rend très agréable pour nos yeux. Il le rend visuellement intéressant et le rend objectivement beau. Nous pouvons facilement repérer les couleurs qui contrastent car elles doivent être directement opposées l'une à l' autre sur une roue chromatique. Comme je l'ai peut-être déjà mentionné, ces roues colorées sont presque toujours. Faux. Si vous allez simplement sur Google Images et que vous lui mettez la roue chromatique, vous en obtiendrez une qui ressemble un peu celle à l'écran, ce qui est complètement incorrect. Nous pouvons voir ici que le jaune que nous avons placé dans nos imprimantes et les lumières bleues que nous avons sur notre écran que nous savons que nos couleurs contrastées exactes ne sont pas opposées les unes aux autres sur cette roue chromatique. Au lieu de cela, le jaune est opposé à cette couleur marron. Si jamais vous voulez vérifier si deux couleurs se contrastent parfaitement, vous pouvez les superposer et vous devriez toujours obtenir du gris, car nous savons que le gris est quand il y a un mélange parfait de toutes différentes couleurs. Si je superpose le jaune et le bleu, j'en ai huit, le gris parfait. Il n'y a aucune couleur dans ce gris , complètement contrastée. Si je superpose les deux couleurs opposées dans cette roue chromatique, le jaune et le violet, j'obtiens ce genre de couleur. Je peux faire le même effet si je crée un dégradé entre deux couleurs. S'ils se contrastent exactement, la couleur au milieu du dégradé sera toujours grise. Pourquoi y a-t-il autant de roues de couleur incorrectes dans le monde ? Eh bien, l'une des raisons est que certaines personnes ont une idée erronée des couleurs primaires. N'oubliez pas que certaines personnes n'ont rien appris sur la couleur depuis l'âge de cinq ans et elles pensent que le rouge, jaune et le bleu sont les couleurs principales de la peinture. En forçant ces trois couleurs à être équidistantes autour d'un cercle, elles créent incorrectement une roue chromatique. Nous savons bien sûr que les couleurs primaires sont le cyan, magenta et le jaune, car nous avons tous vu l'intérieur d'une imprimante auparavant. Si vous faites équidistancer le cyan, le magenta et le jaune autour de la roue chromatique, vous finissez avec cela. Et vous remarquerez bien sûr que le rouge, le bleu et le vert sont également équidistance autour de cette roue chromatique. Et bien sûr, notre roue chromatique a ces deux couleurs contrastées, jaune et le bleu, l'une en face de l'autre. Le contraste nous permet d' identifier plus facilement les choses sur la page. Il permet aux textes ou aux icônes de se démarquer facilement de leur arrière-plan. Il est clair qu' une section différente de la page est différente de la dernière. Et cela rend visuellement plus intéressant de regarder le design. Mais cela le rend aussi objectivement plus beau car il permet aux cônes, aux tiges et à nos yeux d'être stimulés, puis de se reposer en regardant autour du design, nous pouvons créer contraste entre deux couleurs en ayant une très saturée et une très désaturée par une autre ayant une valeur très élevée comme pour avoir beaucoup de blanc dedans, et l'autre étant une valeur très faible, ayant beaucoup de noir dedans. Et nous pouvons créer des contrastes en utilisant différentes teintes. Nous pouvons trouver des teintes qui contrastent parce qu'elles sont opposées sur une roue chromatique, beaucoup de logiciels de conception auront une roue chromatique quelque part dans le sélecteur de couleurs. Mais soyez très prudent avec ces roues colorées car beaucoup d' entre elles ne sont pas particulièrement précises. Vous devriez avoir le jaune et bleu directement en face de l'autre. C'est le genre de jaune ikea et le bleu IK devrait être directement opposé. 14. Exemples de contrastes: Voici un designer créé sur une vidéo précédente. Et j'ai l'impression que, en faisant défiler la page, c'est un peu monotone. Tout l'arrière-plan est blanc, donc peut-être devrions-nous simplement ajouter un arrière-plan dans cette section d'en-tête. Faisons le pourpre. J'ai instantanément l'air beaucoup mieux. Tout ce contraste entre la section d'en-tête et les sections les plus basses nous indique tout de suite que ce bit supérieur est différent. Mais nous voudrions peut-être changer quelques-unes des couleurs ici également. Voyez maintenant, j'ai un gros bouton orange qui dit commencer un cours. Mais personnellement, j'ai l'impression que cette couleur jaune me saute en premier. C'est ça qui attire le plus d'attention. Regardons ces trois couleurs séparément, le violet, l'orange et le jaune. Et nous allons aussi les saturer complètement pour que ce que nous regardons soit la teinte réelle et que nous ne regardions pas différents niveaux de saturation. Maintenant, nous pouvons voir où ils se trouvent tous sur une roue chromatique. C'est donc là que se trouvent ces trois couleurs. Quelques choses à savoir. De toute évidence, il y a plus de contraste entre le jaune et le violet qu' entre l'orange et le violet. Ainsi, la teinte jaune se démarquera naturellement plus que l'orange. Mais toutes nos couleurs sont également un peu plus d'un côté. Si jamais nous voulions ajouter une quatrième couleur au mélange, je voudrais choisir quelque chose ici. Si nous avions une composition entièrement composée de violet, de jaune et d'orange, ce bleu-vert sera ce qui se démarquera vraiment. Maintenant, oui, ce vert se démarque bien sur cette page, mais il y a quelque chose dans ce jaune qui me crie encore dessus. C'est peut-être parce que si je regarde ces couleurs sur ce tableau de luminosité que nous avons ici, nous pouvons voir que le plus grand contraste luminosité se situe entre le jaune et le violet. Et nous ne pouvons tout simplement pas rendre les couleurs aussi brillantes que le jaune. Peut-être que nous faisons simplement jaunir les boutons. Maintenant, ces boutons se démarquent vraiment. Maintenant, une autre option serait bien sûr de garder les boutons en orange, mais il n' y a pas de jaune sur l'illustration ou ailleurs sur la page comme celle-ci. Maintenant, au lieu de cela, je peux utiliser le jaune, mais au lieu de cela, j' utiliserai le jaune comme une version très désaturée comme arrière-plan ici. ensemble, je suis très satisfait ce design maintenant je viens d'apporter quelques modifications pour améliorer le contraste des couleurs et m'assurer que ces boutons se démarquent en haut. Et voici, bien sûr, la comparaison avec l'original. Pas trop de choses à résumer ici, car il s'agissait plutôt d' une démonstration de ce dont nous venons de parler. Mais nous pouvons utiliser le contraste pour nous aider à faire ressortir les choses et à faire en sorte que les choses se sentent séparées. Et nous pouvons utiliser le contraste, non seulement avec la teinte, mais aussi avec la luminosité, la valeur et, bien sûr, la saturation. 15. Résumé: Nous venons d'explorer les principaux attributs de couleur, de teinte, de saturation et de valeur ou de luminosité. La valeur et la luminosité affectent la même chose. quantité de noir ou de blanc dans la couleur sauf la luminosité est perceptive, alors que la valeur est uniforme. Votre logiciel graphique et votre CSS ne seront pas en mesure de gérer la luminosité. Vous pouvez utiliser un logiciel de conception ou un CSS pour définir la saturation ou la valeur des teintes, mais pas la luminosité, car cela est perceptuel et la plage de luminosité est très différente pour différentes teintes. Une teinte bleue n'a qu'une faible luminosité. Eh bien, une teinte jaune n'a accès qu'à une luminosité élevée. Nous pouvons utiliser la saturation des teintes et la valeur ou la luminosité pour créer un contraste. Dans notre conception, la valeur créera le plus de contraste et leur donnera plus grande définition simplement parce que nous avons beaucoup plus de tiges dans les yeux que nous avons des cônes. Obtenir les lumières et l'obscurité dans notre design est de loin le plus important que d'obtenir de la teinte ou de la saturation, n'est-ce pas ? Nous pouvons d'abord concevoir en noir et blanc et en échelle de gris si cela contribue à garantir une belle apparence. Comme nous le savons déjà dans la dernière section, chacun de ces attributs d'une couleur, sa teinte, sa saturation et sa valeur seront affectés par les couleurs qui l'entourent. Et à côté, une couleur saturée. Nous ferons en sorte que la couleur à côté de celle-ci paraisse moins saturée. Couleur rouge. Nous allons rendre la couleur à côté plus bleue. Et une couleur foncée. Nous allons rendre la couleur à côté plus claire. Maintenant, nous savons comment fonctionne la lumière, et nous savons comment classer et parler de couleur. Et nous savons déjà intuitivement comment le contexte de la couleur la modifie. Il est enfin temps de créer notre palette de couleurs.