Arbeiten mit Farbe im UI Design (UI Bootcamp Woche 8)

1. Adative und subtraktiv: In den meisten Ländern ist England definitiv einer von ihnen. Wenn Sie etwa fünf oder sechs Jahre in der Schule sind, wird Ihnen Ihr Lehrer sagen, wird Ihnen Ihr Lehrer sagen, dass dies die Grundfarben Rot, Blau und Gelb sind. Sie werden dir beibringen , dass du diese drei Farben nicht aus anderen Farben machen kannst. Und dass Sie diese drei Farben mischen können , um eine andere Farbe zu erhalten. Eine kurze Frage. welche dieser drei Fakten glaubst du Über welche dieser drei Fakten glaubst du, dass dein Lehrer dich angelogen hat? Diese drei Farben sind die Primärfarben. Sie können diese drei Farben nicht aus dem Mischen einer anderen Farbe machen . Und daraus kannst du alle anderen Farben machen. Nun, leider hat dein Lehrer dich wegen all dieser Dinge belogen . Wenn Sie irgendwann mit einem Computer gearbeitet haben, wissen Sie wahrscheinlich, dass er drei verschiedene Lichter im Monitor hat , rote, blaue und grüne. Diese werden oft als Primärfarben von Licht bezeichnet , während Rot, Blau und Gelb beispielsweise bei der Verwendung von Farbe als Brian-Primärfarben angesehen werden können . Eine andere Möglichkeit, dies zu denken, könnte sein, dass die Lichter additive Primärfarben sind. Wie bei dir beginnst du mit einem schwarzen Bildschirm und fügst Licht hinzu , um Farben zu erzeugen. Rot, Blau und Gelb werden oft fälschlicherweise als subtraktive Primärfarben bezeichnet, da sie mit dem natürlichen weißen Licht der Sonne oder einem künstlichen weißen Licht einer Glühbirne beginnen . Und jedes Objekt, das dieses Licht trifft, subtrahiert Farbe davon. Wir werden im Rest dieses Moduls ein bisschen mehr darüber sprechen und später werden Sie verstehen, warum es schlecht ist , falsch an Rot, Blau und Gelb als Primärfarben zu denken . Das sind sie nicht. Wenn Sie sich diese beiden Primärfarben länger als ein paar Sekunden ansehen, stellen Sie wahrscheinlich schnell fest, dass es ziemlich unwahrscheinlich ist, dass beide Primärfarben fast genau das Gleiche haben würden Farben in ihnen. Schauen wir uns für eine Sekunde nur das Rot, Blau, Grün an. Dies sind definitiv die Farben, die sich gerade in Ihrem Monitor befinden , die Sie sich ansehen. Dies bedeutet nicht, dass wir auf einem Bildschirm eines Computers irgendeine Farbe erstellen können . Wir können nicht, wir können eigentlich nicht einmal so viele erschaffen, aber wir können wahrscheinlich mehrere Milliarden Farben erzeugen. Und das ist viel für uns, mit dem wir zusammenarbeiten können. Primärfarben können nicht verwendet werden, um alle Farben zu erzeugen, und wir können sie tatsächlich aus dem Mischen anderer Farben erstellen . Wir verwenden diese drei Lichter jedoch in einem Computerbildschirm, weil sie die meisten Farben aus nur drei Lichtern erzeugen können die meisten Farben aus , um die Primärfarben mit Farbe oder Tinte zu erhalten . Oder wir müssen diese drei Lichter überlagern und du bekommst etwas, das so aussieht. Diese drei Farben sind Ihnen wahrscheinlich ziemlich vertraut, da es sich natürlich um die drei Farben handelt, die Sie in einen Drucker stecken. Und natürlich legen Sie diese drei Farben in einen Drucker, da sie die größte Farbpalette mit Tinten drucken können. Jetzt zeigt Ihr Computermonitor, wo sich der rote Teil befindet, nur die roten Lichter und wo sich der grüne Teil befindet, er hat nur das grüne Licht an. Aber wenn das gelbe Licht ist, hat es nur Rot und Grün in gleicher Weise. Wenn wir diese drei Kreise mit unserem Drucker auf einem Blatt Papier ausdrucken diese drei Kreise mit unserem Drucker auf würden, würde der untere rechte Kreis einfach die gelbe Tinte verwenden. Der untere linke Kreis würde nur die magentafarbene Tinte verwenden und der dazwischen liegende Raum würde einfach Magenta und Gelb gleichermaßen verwenden . Der Abschnitt im Totzentrum würde Gelb, Magenta und Cyan verwenden . Und deshalb legen wir eine schwarze Tintenpatrone in unsere gedruckte Tintenpatrone, da es ziemlich teuer wird, alle drei Tinten jedes Mal zu verwenden , wenn wir etwas Schwarz drucken möchten. Um dies weiter zu verstehen, müssen wir genau verstehen, wie Licht funktioniert, und darüber werden wir in diesem Modul sprechen. Im nächsten Modul werden Sie verstehen, warum es für Ihre Designs besonders schlecht sein könnte für Ihre Designs besonders schlecht wenn Sie nicht verstehen, was die Primärfarben vorerst waren. Alles, was Sie wissen müssen, ist, dass diese anderen subtraktiven Primärfarben, und dies sind die additiven Primärfarben. Und vielleicht ist es in Ordnung, dass dein Grundschullehrer dir die Grundfarben falsch beigebracht hat, weil wer einem Fünfjährigen das Wort Magenta, Cyan beibringen möchte . Es gibt zwei Arten von Primärfarben, die subtraktive Primärfarben sind , bei denen Sie mit einem weißen Licht beginnen und wenn es von Farbe, Tinte oder Objekten abprallt , subtrahieren sie die Farbe vom Weiß und Sie sieh dir die Farben an, die davon abprallen. Es gibt additive Primärfarben, bei denen Sie mit einem schwarzen Bildschirm beginnen und farbiges Licht hinzufügen, was die Person sieht. Sie können in einigen Situationen Primärfarben aus einigen anderen Farben erstellen, und Sie können nicht alle anderen Farben aus diesen Primärfarben erstellen. Die subtraktiven Primärfarben sind diejenigen, die Sie in Ihren Drucker stecken, Cyan, Magenta und Gelb. Und die Zusatzstoffe sind die auf Ihrem Computerbildschirm, rot, grün und blau. 2. Wellen: Sie erkennen dies vielleicht als das Albumcover von Pink Floyds Dark Side of the Moon. Aber es ist auch ein leichtes Prisma. Wenn Sie nun an einem Ende ein weißes Licht strahlen, kommt am anderen Ende ein ganzer Regenbogen von Farben heraus. Auch einen etwas anderen Blickwinkel nennen wir diese Brechung. Als dies zum ersten Mal entdeckt wurde, dachten die Leute, es hätte mit Verunreinigungen im Glasschalter zu tun , würde dem Prisma irgendwie Farben verleihen. Dann hat Isaac Newton etwas ganz Interessantes damit versucht . Er sagte, was ist, wenn ich kurz danach ein anderes Prisma in die andere Richtung nach oben stelle? Und Isaac Newton entdeckte, dass wenn man das zweite Prisma in die exakt richtige Position bringt, es tatsächlich alle Farben wieder einem einzigen weißen Licht zusammenfasst. Außer dass er noch nicht wirklich wusste warum. Er dachte immer noch, Licht sei wie Partikel oder so. Wir haben um 1801 ein viel besseres Verständnis dafür bekommen, wie Licht funktioniert, als ein Typ namens Thomas Young ein sehr einfaches Experiment machte . Er hatte ein Zimmer, aber du könntest das mit einer Kiste machen , wenn du willst. Und er hat zwei sehr einfache Schlitze in ein Blatt geschnitten. Die Zimmer sind völlig dunkel. Und als er eine Fackel hineinleuchtete oder er damals tatsächlich Kerzenlicht benutzte. Er erwartete, dass das am Ende zwei Lichtschlitze sein würden, zwei Lichtlinien. Aber was geschah, war, dass es eine ganze Reihe von Lichtern gab, unterschiedliche Helligkeiten im hinteren Teil des Raumes. Sie können dieses Experiment ganz einfach mit einer Schachtel und einer Taschenlampe und ein paar Schnitten in der Box replizieren . Was hat er natürlich entdeckt, was wir jetzt alle wissen, ist , dass Licht eine Welle ist. Der Grund, warum es viele Linien auf der Rückseite hat, obwohl er zwei Linien in der Box geschnitten hat, ist sehr ähnlich wie, wenn Sie Wellen haben, einige Bereiche einer Welle sich gegenseitig aufheben können und andere Bereiche können erstelle eine stärkere Welle wie hier, wo du diese beiden Wellen sehen kannst, die sich überqueren. Was wir als verschiedene Farben wahrnehmen, einfach unterschiedliche Längen dieser Welle, die verschiedene Teile unseres Auges stimulieren. Wir werden später aufpassen. Zum Beispiel ist eine blaue Welle viel kürzer als eine rote Welle. Und wenn wir eine ganze Reihe verschiedener Wellenlängen hinzufügen , werden Sie sehen, dass sie im Grunde alle Farben des Regenbogens sind , wobei ein Violett sehr kurzgewellt und rot ist sehr lange Welle. Natürlich werden die meisten Wellen in einem Lichtstrahl hier nicht angezeigt. Es gibt viele, viele, viele Bindungen, die kürzer als Violett sind , und wir nennen diese ultravioletten Wellen. Und es gibt viele, viele, viele Wellen, die länger als rot sind. Und wir nennen diese Infrarotwellen, aber diese sind alle zusammen gereist und wir bemerken einfach nicht diejenigen, die wir nicht sehen können. Es ist ziemlich selten, dass ein einzelner Punkt unseres Auges gleichzeitig von einer einzigen Wellenlänge getroffen wird . Eigentlich werden viele dieser Wellen alle so zusammen fahren. Was dein Auge hier sehen würde, ist wahrscheinlich ziemlich nah an Weiß, wenn all diese Wellenlängen zusammen wären. Wenn wir eine Farbe sehen, sehen wir fast immer eine Reihe verschiedener Wellenlängen. Zum Beispiel hat dieser Rosaton selbst keine Wellenlänge. Nur wenn Sie viele Wellenlängen haben, und die Mehrheit sind langwellige rote und sehr kurzwellige violette, die beide kombiniert werden, um dieses Rosa zu erzeugen. Wenn ich so wäre, wie die Lichtwelle funktioniert. Warum hat Isaac Newtons Pyramidensplitter weißes Licht in all die verschiedenen Farben gebracht? Nun, das reine weiße Licht , das man von einer Lichtquelle oder der Sonne bekommt , sind eigentlich all diese verschiedenen Wellenlängen kombiniert. Sie kommen alle zusammen. Nehmen wir an, dass sie durch ein Glasfenster kommen. Wenn wir uns nur das Rot und das Violett anschauen , um damit zu beginnen, sie auf das Glas treffen, wenn sie auf das Glas treffen, werden sie langsamer. Wenn sie das Glas verlassen, beschleunigen sie die Langwelle, die rote Welle wird weniger langsamer als die violette Welle. Es wird weniger Partikel im Glas treffen. Ich vereinfachte mich zu sehr, aber sagen wir mal weil es sich viel weniger bewegt, hat es weniger Kontakt mit Glaspartikeln. Dies macht keinen allzu großen Unterschied, da es durch ein Glasfenster kommt, da der Winkel in das Glas eindringt und der Winkel, den er verlässt , gleich ist. Und die schnelle rote Lichtwelle wird einfach einige der langsameren violetten Lichtwellen einholen , die davor liegen. Und du bist, ich werde immer noch Rosa sehen. Verzeihen Sie hier die leichte Grobheit dieses Diagramms. Aber wenn die Leichtgewichte spritzen, treffen Sie auf ein abgewinkeltes Stück Glas, es wird die Richtung der Leichtgewichte so leicht ändern . Weil es oben früher langsamer wird , als es sich unten verlangsamt. Stellen Sie sich vor, Sie fahren in einem Auto auf der einen Seite des Autos schneller als die andere, es dreht sich. Und weil der Winkel, diese beiden Leichtgewächte das Glas verlassen, ist nicht das gleiche wie der Winkel, in den sie eintreten. Sie werden sich nie wieder anschließen. Und hier kann diese scheinbar triviale Tangente für Sie als UI-Designer nützlich werden, die violette Farbe wird mehr brechen als die rote Farbe. Wir werden in einem Augenblick mehr darüber sprechen. Aber hoffentlich hat dies zumindest erklärt, wie diese Pyramide funktioniert. Licht ist eine Welle und was wir als verschiedene Farben wahrnehmen, ist eigentlich nur unterschiedliche Wellenlängen fast nie eine einzige Welle auf einmal sahen. Die Farben, die wir sehen, sind eine Kombination verschiedener Wellen. Und es gibt verschiedene Dinge, die einem Lichtstrahl passieren können , um eine Wellenlänge hinzuzufügen oder eine Wellenlänge zu subtrahieren oder eine Wellenlänge unabhängig von den anderen Wellen in diesem Lichtstrahl zu brechen eine Wellenlänge unabhängig von . Als Designer versuchen wir, eine Umgebung zu schaffen, und das sieht für Menschen natürlich aus, die sie sich wohl fühlen. Und um das zu tun, müssen wir verstehen, wie dieses Licht funktioniert. 3. Trichromatischer Prozess: Wir wissen, dass Licht eine Welle ist, aber wie hilft uns das in irgendeiner Weise? Wenn wir mitten in einem Wald spazieren gingen und wir sehen dieses Blatt. Warum ist es grün? Wenn ich mir diesen einen anschaue, sehr, sehr winziger Fleck, und ich werde ihn einfach vergrößern. Es erscheint derzeit so grün. Woher kommt das? Nun, die eigentliche physische Pflanze absorbiert einige der Lichtwellen, die von der Sonne kommen. Wenn wir uns für eine Sekunde vorstellen, dass das Licht direkter Sonneneinstrahlung ausgesetzt ist, wurde es von einer ganzen Reihe verschiedener Leichtgewichte getroffen . Wenn wir hier eine Chance mit all den verschiedenen Wellenlängen entlang der X-Achse haben all den verschiedenen Wellenlängen entlang der X-Achse und wie viel von diesem Blatt entlang der Y-Achse absorbiert wird, könnten wir so etwas bekommen. Das heißt, dieses Blatt absorbiert ziemlich viele langwellige rote Lichter und viele kurzwellige blaue und violette Lichter, aber das Blatt absorbiert nicht viel von diesem grünen Licht im mittleren Bereich. Wenn dies die Menge an Licht ist, absorbiert es verschiedene Wellenlängen, als die Menge, die von Wellenlängen reflektiert wird, genau das Gegenteil sein wird. Beachten Sie, dass ich nicht sage, dass es kein langwelliges rotes Licht oder das kurzwellige blaue und violette Licht absorbiert langwelliges rotes Licht oder , ich sage, dass es weniger davon absorbiert. Wenn wir mitten in der Nacht in den Wald zurückkehren und eine rote Taschenlampe oder Taschenlampen haben, wie es einige von euch nennen mögen, und wir leuchten sie auf dasselbe Blatt, wird es rot erscheinen, weil es immer noch ist spiegelt etwas Rot wider, nur weniger Rot als Grün. Es wird auch eine Reihe von verschiedenen Rottönen in verschiedenen Bereichen des Blattes widerspiegeln, da verschiedene Blattstücke verschiedene Wellenlängen absorbieren. Nun, was in unserem Auge passiert, ist noch erstaunlicher , was gerade in diesem Blatt passiert ist, unser Auge hat Millionen von Rezeptoren , die auch Licht absorbieren und reflektieren. Sie können identifizieren, wie hoch die Wellenlänge des verschiedenen in sie eintretenden Lichts ist. Sie haben auch Millionen von Rezeptoren, die identifizieren, wie viel Licht hereinkommt, wie Intensitäten oder wir könnten uns vorstellen, wie hell oder dunkel es ist. Betrachten wir jene Rezeptoren, die die Wellenlänge identifizieren können. Wir haben drei verschiedene Arten von Zapfen in unseren Augen und sie können verschiedene Wellenlängen des Lichts identifizieren. Es gibt eine, die nur die Kurzwellenlichter identifiziert, alles in diesem Bereich hier. Dann eine, die das Mittelklasse-Licht identifiziert, diese Art von Bereich hier. Und dann eines, das langwelliges Licht wie diese Art von Rangehaar identifizieren kann . Manchmal werden diese als blaue, grüne und rote Rezeptoren bezeichnet. Das stimmt nicht ganz. Wie Sie sehen können, sind wir eigentlich nicht besonders gut darin, verschiedene Arten von Rottönen zu identifizieren, aber wir sind wirklich gut in Grün und Gelb. Denn was diese Kegel identifizieren können , kreuzt ziemlich viel in der Mitte. Wenn wir uns die Lichtwelle ansehen , die von diesem Blatt abprallte, und wir entschieden, dass das, was vom Blatt reflektiert wurde , ein bisschen so aussah. Wenn wir uns dieses Grün oben links ansehen, werden unsere Mittelklassekegel fast vollständig stimuliert. Sie sagen, ja, das ist definitiv diese Farbpalette. Langwellenrezeptoren sagen, dass es sich um eine Art von diesem Bereich handelt. Ja. Und unsere Kurzwellenrezeptoren sagen, ja, von diesem Kurzwellenlicht kommt nicht viel rein. Wenn es insgesamt einfach weniger Leichtgewichte gibt, dann wissen wir nur , dass es dunkler ist oder mehr wissen , dass es heller ist. Aber was ist, wenn es irgendwie das gleiche Grün ist, aber es sieht einfach grüner aus. Das gleiche Grün, die gleiche Helligkeit, aber es fühlt sich einfach sauberer an. Was ist mit diesem Grün? Nun, wir werden im nächsten Modul mehr darauf eingehen, aber das ist nur ein gesättigteres Grün. Es ist der gleiche Grünton ist nur gesättigter. Wir sehen es besser. Wir sehen die gleiche Auswahl an Leichtgewichten, wenn wir uns dieses neue gesättigte Grün ansehen, aber wir sehen eine andere Verteilung. Es ist reiner. Wenn wir hier jemals eine völlig flache Verteilung hätten, würde sie grau erscheinen oder ich wüsste nicht, welche Farbe es hat und es sieht einfach grau aus. Dieses neue Grün ist sehr, sehr klar. Je dominanter eine Lichtwelle ist, desto weniger grau erscheint, desto gesättigter ist die Farbe. Kommen wir jetzt zurück zu unserem ursprünglichen Grün. Bleiben wir noch eine Sekunde dabei und schauen uns dann an, was unser Auge als nächstes macht. Nun, ich bekomme einfach eine Art von Binärdaten von jedem dieser drei Arten von Rezeptoren. Lassen Sie uns das ein wenig zu vereinfachen und sagen, vielleicht sagt der Kurzwellenrezeptor, ich bin 20% stimuliert. Der mittlere Bereich sagt 90%, und der Langstreckenbereich sagt 80 Prozent. Ab diesem Zeitpunkt verlieren wir viele Nuancendaten. Wir kennen die Form der Kurve nicht mehr und wir kennen nicht die genaue Anzahl der verschiedenen Wellenlängen , die wir erhalten. Dies bedeutet, dass ich eine völlig andere Kurve potenziell genau das gleiche Grün zu sein scheint. Dann gibt es eine Fehlerbewertung. Unser Auge hat auch einige Stäbe drin und diese identifizieren nur, wie intensiv das Licht ist. Es gibt viel mehr Stäbe als Zapfen. Und so können wir viel besser erkennen wie hell und dunkel Dinge sind als die genaue Farbe von ihnen. Nehmen wir an, unsere Ruten nennen uns einfach eine Intensitätsbewertung von 40% für dieses bisschen Licht. Und das bedeutet, dass 100% weiß und 0% schwarz wären. Und wir sind irgendwo zwischen diesen beiden. An diesem Punkt r habe ich nur diese vier Punkte, aber das sendet es nicht an das Gehirn. Es übersetzt diese ein bisschen. Was unser Gehirn erhält, sind diese drei berechneten Werte, was ist das Verhältnis von Grün zu Rot? Wie hoch ist das Verhältnis von Blau zu Gelb und wie hoch ist das Verhältnis von Licht zu Dunkel? Natürlich fragst du dich vielleicht, wie gibt es ein Gelb? Es erfordert eine gewisse Berechnung, vielleicht fügt es Grün und Rot hinzu. Aber denken Sie daran, dass keiner dieser drei Rezeptoren sowieso genau eine Farbe aufnahm. Tatsächlich nahm der Langwellenrezeptor meist Mittelklassefarben auf. All diese Berechnungen haben also ein wenig Raum für Ungenauigkeiten. Und hier kommt Farbenblindheit ins Spiel, wo eine davon nicht richtig berechnet wird. Der Wert von Licht bis Dunkel erfordert jedoch nicht viel Berechnung und hatte überhaupt die meisten Stäbe. Das ist also wirklich, sehr genau. Diese drei neuen Werte werden an unser Gehirn gesendet , und so glauben wir, dass wir Farbe sehen. Alles auf der Welt reflektiert und absorbiert verschiedene Mengen verschiedener Wellenlängen. Habe ich einige Rezeptoren, die identifizieren können, in welchem Wellenlängenbereich verschiedene Bits des Feuerzeugs enthalten sind identifizieren können, in welchem Wellenlängenbereich . Es führt dann einige Berechnungen durch und sendet dies an das Gehirn. Es gibt auch Rezeptoren, die nur identifizieren, wie hell und dunkel das Licht ist, wie intensiv es ist. Und diese sind viel, viel genauer. 4. Chromaticity: Wir wissen, dass wir eine ziemlich große Auswahl an Farben erstellen können, indem wir nur rote, grüne und blaue Lichter verwenden. Wenn du in einen komplett dunklen Raum gegangen bist und du Sean bist, drei verschiedene Lichter an die Wand, rot, grün und blau. In der Mitte würdest du weiß werden. daran, dass Weiß das ist, was wir sehen, wenn wir die ganze Bandbreite an Leichtgewichten bekommen. Und es ist eine hohe Intensität , weil all diese Lichter eingeschaltet sind voll eingeschaltet sind. Wenn ich das grüne Licht runterschalte, wenn ich die Intensität des grünen Lichts senken würde, würde ich hier in der Mitte ein helles Magenta bekommen , weil wir nicht mehr alle Leichtgewichte in gleicher Balance hätten. Ebenso, wenn ich das Blau senke, werden wir in der Mitte ein hellgelb bekommen. Und wenn ich das Rot senke, kriegen wir einen leichten Cyan in der Mitte. Wenn ich die Intensität aller drei Lichter senke, würden wir in der Mitte ein Grau bekommen. Wenn wir jetzt mit der Intensität dieser drei Lichter herumspielen , werden wir schrecklich viel Grau bekommen und wir werden schrecklich viele der gleichen Farben bekommen. Wenn Sie ein Grafikprogramm öffnen und die Zahlen anpassen, um die Farbe von etwas zu ändern. Sie möchten nicht, dass die meisten Farben grau sind oder die meisten Farben gleich sind. In den 1920er und 1930er Jahren führten einige Leute eine Reihe von Experimenten durch, führten einige Leute eine Reihe von Experimenten durch die die Intensität jedes dieser Lichter einzeln änderten und sie auf einem 3D-Diagramm darstellten , basierend auf den Farben, die Menschen könnten erkennen, wo der Bereich wahrnehmbarer Farben, die Sie mit Rot, Grün und Blau erzeugen können , natürlich gibt es drei Achsen, daher sind die Ergebnisse eine 3D-Form. Und beachte, dass die Form ziemlich unregelmäßig ist, unsere Wahrnehmung funktioniert unterschiedlich auf verschiedenen Intensitätsstufen. Und Änderungen der Intensität in den drei verschiedenen Lichtern werden nicht einmal gleich wahrgenommen. Wir könnten dieses Kind jetzt in eine Art 3D-Koordinaten umwandeln , die Grafikprogramme sind, und unsere Websites könnten daran denken, Farben zu referenzieren. Aber nur ein kleiner Bereich der Räume in diesem Diagramm sind wahrnehmbare und einzigartige Farben. Glücklicherweise haben wir festgestellt, dass Sie, wenn Sie es im rechten Winkel betrachten, das Ganze abflachen und alle Farben erhalten können . Die Leute haben versucht, dies auf verschiedene Arten aufzuteilen. Aber im Allgemeinen haben wir festgestellt , dass es immer noch nicht sehr nützlich ist, denn wenn wir diese Koordinaten verwenden , werden die meisten Farben wiederholt. Wenn ich zum Beispiel die Koordinaten für diese Spots hier nehme, würde ich genau die gleiche Farbe bekommen, die ich für diesen Spot hier bekommen habe. Was die meisten Computersoftware tendenziell machte, war, einfach eine regelmäßige Form vom Haar anzunehmen. Dies bedeutet, dass wir eine ganze Reihe einzigartiger und wahrnehmbarer Farben verpassen . Aber es gibt viele Möglichkeiten hier drin. Denken Sie daran, dass Sie nicht alle Farben aus Rot, Grün und Blau erstellen können. Sie können einfach viele Farben aus Rot, Grün und Blau erstellen . Hier trat jedoch ein Problem auf, da verschiedene Software und verschiedene Unternehmen begannen, verschiedene Abschnitte der Farben zu verwenden und auf unterschiedliche Weise auf die Koordinaten zu verweisen. Wenn Sie beispielsweise jemals Design gedruckt haben, wissen Sie, dass es ein bisschen schwierig ist. Sie stellen Ihr Grafikprogramm CMYK-Farben, Cyan, Magenta und Gelb verwendet , da wir wissen, dass dies die Primärfarben für den Druck sind. Wenn Sie das Dokument jedoch drucken, sieht es immer noch nicht so aus wie auf Ihrem Bildschirm, da es mit Lichtern auf Ihrem Bildschirm dargestellt wurde und mit Tinte auf dem Papier dargestellt wurde. Aber auch, weil der von CMYK verwendete Farbabschnitt nicht einmal der gleiche Farbbereich ist, den unsere Website verwendet. Es gibt einige Farben , die buchstäblich einfach nicht auf dem Papier existieren, die auf Ihrem Bildschirm existieren und umgekehrt. Glücklicherweise verwenden Websites jedoch alle den gleichen farbigen Standard und heißt S, RGB-Standard, Rot, Grün, Blau. Dieses Dreieck ist ungefähr die Farben, die auf einer Website angezeigt werden können. Nehmen wir an, ich wollte diese Orange auf einer Website zeigen, ich würde drei Koordinaten aus den drei Ecken bekommen. Und diese Koordinaten liegen zwischen 0255. Diese Orange liegt bequem in der roten Ecke, also ist es 255 Rot, es ist weit von der blauen Ecke entfernt, also ist es nur 80 Blau. Und es ist ein bisschen näher an der grünen Ecke, also ist es etwa 150 Grün. Ich kann diese drei Zahlen jetzt auf jeder Website oder jedem Grafikprogramm verwenden und genau das gleiche Orange neu erstellen , das ich anzeigen möchte. Nun, weil wir diese 3D-Wahrnehmungs-Charta früher erstellt und dann abgeflacht haben. Wir erhöhen die Intensität des Lichts nicht in gleichen Schritten, wenn wir von 78 auf 79 und von 79 auf 80 wechseln , weil 255 nicht einmal so größere Zahl ist. Wenn wir von 79 auf 80 gehen, springen wir tatsächlich über einige Farben, die wir nicht einmal verwenden. sRGB können wir jedoch weit über 16 Millionen Farben erstellen. Srgb ist jetzt die Standardmethode Farben mit rotem, grünem und blauem Licht zu referenzieren . Und es gibt Ihnen Zugriff auf 16 Millionen Farben. Es verwendet drei Koordinaten für Rot, Grün und Blau zwischen 0255, jedes Inkrement in diesen Koordinaten erhöht die Lichtintensität nicht gleichmäßig, sondern wird inkrementiert basierend auf der menschlichen Wahrnehmung unter Verwendung des ursprünglichen 3D-Diagramms, das bereits in den 1930er Jahren erstellt wurde . 5. So funktioniert Farbe Zusammenfassung: Licht ist eine Welle. Und wenn sich die Länge dieser Welle ändert, nehmen wir sie als eine andere Farbe wahr. Wir sehen sehr selten eine Lichtwelle für sich allein. Es wird normalerweise mit anderen Wellenlängen gemischt , so können wir eine Farbe wie Violett sehen , die keine eigene Wellenlänge hat. Es ist eine Mischung aus sehr langen und sehr kurzen Wellen. Wenn wir eine Mischung aus vielen Leichtgewichten ohne dominante Welle haben, sehen wir großartig. Wenn mehr Leichtgewichte zusammen sind, erscheint es näher an Weiß. Und wenn es weniger gibt, scheint es näher an Schwarz zu sein. Wir werden im nächsten Abschnitt über die spezifischen Namen für diese sprechen. Wenn die Leichtgewichte unser Auge treffen, stimulieren sie die Stäbe in unterschiedliche Mengen, je nachdem, wie viele Wellen es gibt. Sie stimulieren drei Arten von Codes in unterschiedlichem Maße, je nachdem, wie lange die Wellen hoch sind. Wir interpretieren dies als Farbe sehen. Verschiedene Objekte auf der Welt erscheinen einfarbig, weil sie bestimmte Leichtgewichte absorbieren und andere reflektieren während die Dinge auf Ihrem Bildschirm eine Farbe erscheinen, weil das Rot, Grün, und blaue LEDs zeigen in verschiedenen Intensitäten, um etwas zu erzeugen , das wie diese Farbe aussieht. Sie fügen die Leichtgewichte hinzu. Wir nennen das Additiv. Während der Absorption von Leichtgewichten nennen wir subtraktiv. 6. Werte: Wenn Sie an den Kunstunterricht zurückdenken, als Sie jünger waren, als Sie das erste Mal zeichnen lernen, Sie wahrscheinlich Zeichnen gelernt. Okay. In Schwarz und Weiß, wenn du so etwas wie ich bist, könntest du wahrscheinlich nicht so gut zeichnen wie diese Bilder auf dem Bildschirm. Aber zumindest hat es für dich intuitiv Sinn gemacht. Wenn der Bereich dunkler ist, drücken Sie den Bleistift härter und Sie erhalten eine dunklere Farbe. Wenn der Bereich leichter ist, legen Sie den Bleistift überhaupt nicht darauf und lassen ihn weiß. Worum Sie es hier zu tun haben, nennt man Wert. Es ist wie dunkel oder hell die Gegend ist. Und ich sehe meinen, seinen vollkommen intuitiven Sinn. Und wenn es falsch ist, verwirrt es uns wirklich mit dem Kopf. Wir können sehr schnell feststellen, wann der Wert falsch ist, wie Sie in Kürze sehen werden. Das Problem, das wir mit dem Kunstunterricht hatten, als wir jünger waren. Wenn wir anfangen zu versuchen, diese Zeichnungen in Farbe zu bringen. Wenn du so etwas wie ich bist, der Gedanke, das Bild auf der rechten Seite zu erstellen ist der Gedanke, das Bild auf der rechten Seite zu erstellen, einfach Dämmerungssinken und erschreckend. Ich könnte nie etwas zeichnen , das so gut aussieht. Und das liegt daran , dass ich im Kunstunterricht, genau wie viele von euch, als ich anfing , über Farben nachzudenken, aufgehört habe, so viel über den Wert nachzudenken, wie das Bild links, wo ich denke über die Dunkelheit und die Leichtigkeit. Und ich fing an, viel mehr über etwas nachzudenken , das sich hue nennt. Sie können sich Farbton als die Farben vorstellen , für die Sie einen Namen haben. Du könntest dir dieses Bild ansehen und sagen, dass es rosa ist, das ist blau, das ist weiß. Obwohl wir uns dieses Bild viel genauer angeschaut haben und wir erkennen, dass es im ganzen Gesicht viele, viele verschiedene Hauttöne und dunkle Brauntöne und helles Weiß gibt. Die Werte variieren massiv, auch wenn der Farbton nicht so stark ist. In der Tat werde ich argumentieren, dass der Farbton überhaupt keine Rolle spielt, wenn Sie ein Farbgemälde erstellen. Was Sie hier auf dem Bildschirm sehen können ist ein Abschnitt eines Farbrads, der die Orange und Rot und Grün und Blau sowie alle Farben zeigt der die Orange und Rot und Grün und , für die Sie einen Namen haben. Diejenigen, die ich in Ihrem frühen Kunstunterricht vorschlagen werde , haben Sie ein bisschen zu viel darüber nachgedacht. Nun, die Werte dagegen, dieser Teil, der von Schwarz nach Weiß über das Rad geht, wie dunkel oder hell die Farbe ist. Die Töne sind, wenn Sie möchten , viel wichtiger. Wenn Sie zum Kunstunterricht zurückkehren und versuchen, ein realistisches Gemälde zu malen. Und deshalb kommen die meisten von uns nie wirklich daran vorbei, in Schwarz und Weiß zu zeichnen. Wir nehmen eine Reihe von Farben heraus und denken zu viel über den Farbton jeder Farbe nach. Wir denken zu viel über die Namen rot, blau, grün und nicht genug darüber nach, wie wir sie mit Schwarz und Weiß mischen müssen , um die verschiedenen Werte zu erhalten. Das einzige Mal, dass ein Künstler über Farbton nachdenkt , besteht darin, etwas Interessanteres zu machen, einem Bild etwas Emotionen zu verleihen. Man könnte ein menschliches Gesicht nur mit blauen Farben malen und es kann immer noch völlig realistisch aussehen. Es kann physisch möglich aussehen. Einer der Gründe dafür ist realistisch gesehen , dass Sie irgendwann ein blaues menschliches Gesicht gesehen haben. Sie haben jemanden in einem Raum gesehen dem die meisten Glühbirnen blau waren, und daher war das Licht, das seinem Gesicht reflektiert wurde, blau. Und so schien ihr Gesicht einfach in einem blauen Farbton zu sein. Aber alle Werte ihres Gesichts, wie Licht und Dunkel jeder Bereich relativ zu den anderen Bereichen war , änderten sich nie. Licht und Dunkelheit bedeuten immer dasselbe, aber der Farbton kann sich drastisch ändern je nachdem, was sich sonst noch im Raum befindet. Und wie du später erfährst einfach , welche Farbe daneben ist. Das Problem ist, wenn wir anfangen, über den Farbton nachzudenken, hören wir auf, über Wert nachzudenken. Wenn du jemals wieder zum Kunstunterricht gegangen bist, erinnerst du dich an das? Nehmen Sie eine einzelne Farbe heraus und versuchen Sie sie mit Weiß zu mischen und mit Schwarz zu mischen. Diese werden als Töne bezeichnet. Wenn du mehr Weiß hinzufügst, würdest du es als Tönung bezeichnen. Und wenn du mehr Schwarz hinzufügst, würdest du es einen Schatten dieses Farbtons nennen. Der Farbton ist das, woran Sie normalerweise denken , wenn Sie traditionell darüber nachdenken, welche Farbe es hat? Grün, Blau, Rot, Gelb usw. Obwohl dies wichtig ist, ist der Wert weitaus wichtiger um unser Design physisch möglich aussehen zu lassen, wodurch sich unsere Benutzer mehr fühlen bequem, dass sie sich eine echte Sache anschauen. Wert ist, wie hell oder dunkel die Farbe ist. Wir nennen das manchmal Helligkeit. Aber um dieses Kurses willen und mit Farbe zu arbeiten, werden wir es als Wert bezeichnen. Sie können jeden Farbton verwenden, mit dem Sie mit einem Add-White arbeiten , um eine Tönung dieser Farbe zu erhalten. Oder du könntest Schwarz hinzufügen, um einen Farbton dieser Farbe zu erzeugen. Und für Ihre Hausaufgaben möchte ich, für Ihre erste Aufgabe versuchen, dass Sie für Ihre erste Aufgabe versuchen, ein Design zu erstellen oder eine Illustration zu zeichnen , bei der Sie die Anzahl der verwendeten Farbtöne einschränken, aber drastisch verändert haben die Werte. Dies zwingt Sie, über den Wert der Farben Ihrer Wahl nachzudenken . Sie könnten ein Designprogramm öffnen, wenn Sie eines haben, oder Sie könnten ein paar Buntstifte herausnehmen und es zuerst auf vielleicht drei Farbtöne beschränken und sehen ob Sie ein realistisches Aussehen erstellen können Abbildung, ändern Sie nur die Werte. 7. Values: Das erste, was wir lernen möchten, wenn wir lernen , mit Farben zu arbeiten, ist zu lernen, sich mit verschiedenen Werten zu identifizieren und mit ihnen zu arbeiten. Auf dem Bildschirm befinden sich derzeit 11 verschiedene Farben, aber alle 11 Farben haben genau den gleichen Farbton. Sie haben einfach andere Werte. Sie sind heller oder dunkler im gleichen Farbton. Prüfen Sie, ob Sie die Bestellung identifizieren können. Schau dir jetzt diese 11 Farben an, beachte, dass sie alle einen Buchstaben haben, und ordne dann die Buchstaben neu an, um von Weiß nach Schwarz zu gehen. Halten Sie also das Video an, schauen Sie sich an und spielen Sie es dann erneut ab. Und ich zeige dir die Antworten. Hier sind die Antworten. Wie hast du es gemacht? Ich schätze, du hast es wahrscheinlich ganz gut gemacht. Es ist relativ intuitiv, die verschiedenen Werte zwischen verschiedenen Farben zu erkennen , wenn sie genau den gleichen Farbton haben, weshalb wir so gut darin waren, Schwarz-Weiß-Zeichnungen mit einem Bleistift zu machen , aber nicht so gut, als wir anfingen, Farbe hinzuzufügen. Sie werden vielleicht auch bemerken, wenn ich all diese Farben neben das lege , was sie sich gegenseitig beeinflussen, wir werden etwas später darüber sprechen. Sie sehen fast wie Steigungen aus. Und eigentlich sieht das Weiß aus wie ein leichtes Grau. Und das liegt nur daran, wie es von den daneben liegenden Farben beeinflusst wird. Wir werden das sehr bald in einem anderen Video behandeln. Aber jetzt möchte ich mich der Herausforderung stellen. Ich werde diese Werte noch einmal mischen, aber dieses Mal bringe ich die Farbtöne zurück und sie werden alle verschiedene Farbtöne haben. Sortieren Sie sie noch einmal in die Reihenfolge ihres Wertes, wie viel Weiß oder Schwarz sie haben, und sehen Sie, wie Sie dieses Mal weiterkommen. Also pausiere das Video und spiele es und ich zeige dir die Antworten in einer Sekunde. Wie sind Sie diesmal zugekommen? Ich schätze, dass auch wenn du so viele richtig hast. Als Sie das letzte Mal hatten, haben Sie wahrscheinlich noch mehr Zeit damit verbracht, es anzusehen und sicherzustellen, dass sie geknackt sind. Und doch sind sie immer noch exakt dieselben Werte in genau der gleichen Reihenfolge wie bei der letzten Übung. Diese Übung kann sehr nützlich sein, um Ihre Augen zu trainieren, um Werte besser zu erkennen. Das wird eines der wichtigsten Dinge sein über Farbe lernt. Aus diesen Gründen habe ich eine PDF-Datei erstellt, mit der Sie genau dieselbe Übung ein paar Mal durchklicken können genau dieselbe Übung ein paar Mal anstatt sie immer wieder in diesem Video zu durchgehen , Sie herunterladen können das aus den Ressourcen. Und um dieses Video fertig zu stellen, möchte ich Ihnen zeigen, wie diese Liste von 11 Farben in verschiedenen Farbtönen ist. Es sieht ziemlich dunkles Haar aus, es sieht aus, als wären die Werte insgesamt ziemlich hoch. Aber sobald ich sie in die Wertereihenfolge gebracht habe, sehen sie ziemlich niedrig aus. Plötzlich sieht es ziemlich hell auf der Seite aus. Die Werte dieser Farben erscheinen nur aufgrund der Reihenfolge unterschiedlich. Versuch, die Wertereihenfolge verschiedener Farben zu identifizieren , ist eine wirklich, sehr nützliche Übung. Es wird helfen, unsere Augen zu trainieren, um diese subtilen Unterschiede in den Werten zu erkennen diese subtilen Unterschiede in den Werten , die den Unterschied in Ihrem Design ausmachen werden. In diesem sehr kurzen Video hatten wir es also genau das zu tun. Und jetzt möchte ich, dass Sie das PDF von den Ressourcen herunterladen und noch ein paar Mal genau dasselbe tun . 8. Helligkeit: Ich hoffe, Sie haben es geschafft, einige dieser Werte aus der letzten Übung zu bestellen , aber Sie haben wahrscheinlich ein paar falsch verstanden. Es ist eine sehr schwierige Übung. Normalerweise werden sogar Künstler und sogar die Fotografie die Werte bis zu den anderen Enden herausziehen und die mittleren Töne entweder dunkler oder heller machen, um es den Benutzern ein bisschen leichter werden sogar Künstler und sogar die Fotografie die Werte bis zu den anderen Enden herausziehen und die mittleren Töne entweder dunkler oder heller machen, um zu machen. Wenn Sie ein Foto machen, insbesondere wenn Sie Ihre Kamera in den Standardeinstellungen lassen , werden die leicht dunklen Farben wahrscheinlich noch dunkler und die leicht hellen Farben noch heller und erzeugen Sie zusätzlichen Kontrast auf dem Foto. Unsere Kameras machen dies teilweise, nur weil es ein aktueller Trend ist und uns gefällt , wie kontrastreiche Fotos aussehen. Aber es fühlt sich auch gut für uns an, weil wir das Bild schneller interpretieren und verstehen können. Es bedeutet auch, dass unsere Augen irgendwie auf unnatürlichen Wert in Bildern geschult wurden unnatürlichen Wert in Bildern und das wollen wir wahrscheinlich weitermachen. Trend. Verwendungen sind es gewohnt, Dinge mit hohem Kontrast zu sehen. Inzwischen haben Sie sich wahrscheinlich gefragt, warum ich das Wort Wert immer wieder verwende , wenn das Wort Helligkeit in dieser Situation viel sinnvoller ist. Wir sprechen darüber, wie hell die Farbe ist, oder? Nun, vielleicht, aber leider Helligkeit, wenn wir über Farbe sprechen, kann Helligkeit, wenn wir über Farbe sprechen, oft etwas Wahrnehmlicheres bedeuten. Wie wahrnehmbar hell scheint es uns zu sein. Deshalb ist die letzte Aktivität, die ich dir gegeben habe , tatsächlich ein bisschen grausam. Sie sind es gewohnt , erkennen zu können , ob etwas heller ist oder nicht, aber nicht so sehr, ob es einen höheren oder niedrigeren Wert hat. Um dies zu erklären, habe ich hier eine sehr einfache Charts erstellt. Entlang der X-Achse ändert sich die enormen und entlang der Y-Achse ändert sich der Wert. Sie werden wahrscheinlich bemerken, wenn Sie sich dies ansehen, dass es drei klare Streifen an drei hellen Streifen gibt , bei denen es einen höheren Wert zu haben scheint , wenn Sie von links nach rechts gehen, trotz der Tatsache, dass ich ganz klar sage, dass es das nicht tut. Und diese drei Farben sind Cyan, Magenta und Gelb. eine gewisse Bedeutung Diese Farben haben eine gewisse Bedeutung, über die wir später sprechen werden. Möglicherweise haben Sie bereits bemerkt, dass es die drei Farben gibt , die Sie in Ihren Drucker stecken. Aber im Moment nehmen wir einfach diese drei Farben und fügen die drei Farben hinzu, die perfekt in die Mitte zwischen den Räumen passen , die rot, grün und blau sind, und plotten sie in diesem Diagramm, wenn es sich um Helligkeit anstelle von vier Werten handelte. Nun habe ich das aus Gründen dieses Diagramms etwas übertrieben , aber Sie können sehen, dass diese sechs Farben, die alle genau den gleichen Wert haben, ganz unterschiedliche Helligkeiten haben. Denken Sie daran, was das bedeutet, ist, dass sie die gleiche Menge an Weiß oder Schwarz zum Grundton hinzugefügt haben , aber für uns unterschiedliche Helligkeitsstufen erscheinen, unsere Wahrnehmung ist anders. Wenn ich all die verschiedenen Helligkeiten derjenigen hinzufüge , die wieder dabei sind, werden Sie ein paar Dinge bemerken. Zuallererst haben wir drei signifikante Gipfel, Gelb, Cyan und Magenta und drei Tröge, Rot, Grün und Blau. Aber du wirst auch bemerken, dass es kein praktisches Quadrat mehr ist. Und deshalb sieht man das nicht in einem Grafikprogramm. Wir werden in ein bisschen mehr darüber sprechen, aber Sie können kein numerisches System erstellen Farben in diesem neuen Diagramm zu referenzieren da Sie möglicherweise einen Ort erhalten, an dem es keine Farbe gibt wenn wir die Übung wiederholen aus dem letzten Video, aber dieses Mal schauen wir uns eine Reihe von Farben an und versuchen, sie basierend auf der wahrgenommenen Helligkeit zu ordnen. Und seien wir fair, Sie können das unmöglich falsch verstehen, weil die Wahrnehmung über die Art und Weise, wie wir die Helligkeit quantifizieren, auf einer Reihe von Experimenten basiert , bei denen Hunderte von Menschen bei zu beurteilen, wie hell ihnen etwas erscheint. Wenn Sie versuchen möchten, diese in der Reihenfolge der wahrgenommenen Helligkeit anzuordnen , versuchen Sie es jetzt, schreiben Sie die Buchstaben jetzt auf. Aber du solltest das viel einfacher finden, da es keine dunklen Gelbtöne gibt und es keinen hellen Blau gibt. Hier sind die Antworten, die kommen. Jetzt. Wenn Sie überhaupt Probleme damit hatten, lag es realistisch wahrscheinlich den Farben in der Mitte. Der Unterschied in der wahrgenommenen Helligkeit zwischen jedem von ihnen und jedem ihrer Nachbarn ist genau derselbe. Aber wir werden die Bereiche in der Mitte immer noch etwas schwieriger zu identifizieren finden . Und das könnte teilweise daran liegen, dass Künstler und sogar Ihre Kameraeinstellungen versuchen werden, diese Mittelgründe zu vermeiden . Dies sind die Art von Farben , die vielleicht vermieden werden würden. Wenn wir über die Helligkeit der Farbe sprechen, ist es nicht ganz dasselbe wie Wert, ist an die Wahrnehmung angepasst. Cyan, Magenta und Gelb erscheinen uns natürlich heller, und Rot, Grün und Blau erscheinen uns natürlich dunkler. Wenn wir Farben mit einem Grafikprogramm oder sogar CSS wählen , können wir sie nicht basierend auf der Helligkeit auswählen, hauptsächlich weil es viel schwieriger ist, ein System zu erstellen, um Farben auf diese Weise zu wählen. Wir werden später viel mehr darüber sprechen. Das bedeutet jedoch, dass mit unseren Grafikprogrammen oder CSS wir mit unseren Grafikprogrammen oder CSS ganz einfach Farben auswählen können , die einfach schlecht aussehen. Zum Beispiel wird ein dunkles Gelb nicht besonders schön aussehen, oder sogar irgendetwas in der Mitte des Helligkeitsbereichs, was uns möglicherweise nicht das kontrastreiche Aussehen verleiht , das wir haben alle gelernt zu lieben und können unser Design auch etwas verwirrender und schwer wahrnehmbar machen . 9. Beispiele für Helligkeit: Hier ist eine Reihe von Rottönen. Jetzt haben sie alle genau den gleichen Farbton, aber sie sind keine unterschiedlichen Werte. Wenn ich einen speziellen Farbwähler für die Auswahl von Rottönen mit unterschiedlichen Helligkeiten verwende , ich viel weniger Auswahl. Es gibt buchstäblich diese drei kleinen Variationen, Wirklich. Das kann ich annehmen, weil Leute einfach die Farbe oben links nicht wahrnehmen und die Farbe und die rechte oben sogar die gleiche Farbe haben. Aber eine Sache, die wir definitiv sagen können , ist, dass die Farbe und ganz oben links und die Farbe ganz oben rechts einfach nicht besonders gut aussehen. Wir wollen sie wahrscheinlich nicht benutzen. Vorhin sagte ich, du kannst keine dunkelgelben Ränder machen. Es sieht nicht gut aus. Nun, was Sie in dieser Situation tun möchten , ist ein leicht braun, gelb zu machen , und dann kann es gut aussehen. Was ich mit diesem Bereich von Rottönen machen kann , sind diejenigen mit niedrigerem Wert, ich kann ein bisschen blauen Farbton hinzufügen. Und diejenigen mit einem höheren Wert kann ich ein bisschen gelben Farbton hinzufügen. Dies bedeutet, dass der Wert nicht nur derselbe ist, sondern im Extrem tatsächlich ein bisschen mehr und weniger hell aussieht . Und am Ende haben wir einige Farben , die nicht nur ein bisschen schöner aussehen, sondern ein bisschen angenehmer wahrzunehmen sind. Immer wenn Sie einen Farbbereich mit dem gleichen Farbton erstellen, wird es bei den Extremen ziemlich schlecht aussehen. Mit den hochwertigen Farben. Sie werden da drin ein bisschen einen sehr hellen Farbton mischen wollen . Und mit den Farben mit niedrigem Wert möchten Sie das Gegenteil tun und einen weniger hellen Farbton geben , der mit dieser Farbe gemischt ist. Nehmen wir an, ich entwerfe diesen einfachen Kippschalter für eine Webanwendung. Ich möchte, dass mein Kippschalter 3D aussieht, damit die Leute sofort wissen, dass es etwas ist, mit dem sie interagieren können. Ich füge einen kleinen Schatten hinzu, damit es zeigt, dass dieser graue Bereich eingerückt ist und ein bisschen Licht auf dem kleinen roten Kreis , das man sehen kann, dass es ein bisschen herausragt. Ich stelle mir im Grunde vor, dass es oben links auf dem Bildschirm eine Lichtquelle gibt. Dies sind die zusätzlichen Farben, die ich benutzt habe. Ich habe eine Version des Rotes mit höherem Wert und eine Version des bläulichen Graus mit niedrigerem Wert verwendet. Wenn wir jetzt darüber sprechen, wie Licht funktioniert, werden Sie feststellen, dass dies nicht natürlich aussieht. So springt das Licht auf natürliche Weise überhaupt nicht herum. Aber Sie können definitiv zustimmen es nicht natürlich aussieht und es dass es nicht natürlich aussieht und es aus einigen Gründen wahrscheinlich nicht so gut aussieht. Erstens, das Rot hat jetzt nur noch etwas Weiß drin. In gewisser Weise sieht es so aus, als würde Ihnen die Tinte ausgehen, wenn Ihnen Druckern die Tinte ausgeht. Jetzt ist der niedrigste Wert auf der Seite ein Schatten der viel Kontrast an einem Ort erzeugt , an dem ich ihn wirklich nicht will. Ich kann diese beiden Probleme umgehen indem ich den Farbton ein wenig anpasse. Das Rot ist jetzt ein bisschen höherer Wert, aber es hat damals etwas Gelb gemischt, und das Grau ist jetzt ein bisschen von einem niedrigeren Wert Grau, aber es hat tatsächlich etwas Blau gemischt. Ich habe jetzt etwas mit einem kleinen 3D-Look, also weiß ich, dass ich damit interagieren kann, aber es sieht tatsächlich ein bisschen natürlicher und leichter wahrzunehmen aus. Ich werde anfangen, an einer Homepage für eine Website zu arbeiten , die ich niemals erstellen werde. Hier ist eine sehr, sehr grundlegende Statistik und mal sehen, ob wir einige Verbesserungen vornehmen können. Nun, dieses leuchtend orange für diesen Starterkurs und den Anmeldeknopf haben sie die gleiche Farbe wie diese, 1234 unten. Sie haben die gleiche Helligkeit. Und ich möchte, dass diese Zahlen eine geringere Helligkeit haben , damit sie etwas weniger herausspringen. Ich senke die Helligkeit indem ich nicht nur etwas Schwarz hinzufüge, sondern sie auch etwas mehr Brownie-Orange mache. Jetzt sind die Buttons immer noch nicht ganz das Wichtigste auf der Seite. Ich denke, der Überschriftentext überwältigt sie wahrscheinlich ein bisschen. Ich werde nur das Weiß der Überschriftentexte reduzieren . Die violette Farbe ist nicht besonders hell, sondern nur die schiere Größe der Buchstaben in Kombination mit den Helligkeiten, da sie auf der Seite etwas zu wichtig sind, um meine Knöpfe zu erstellen wirklich auffallen und damit die Leute sofort wissen, dass sie auf sie klicken können. Ich füge einen kleinen Schatten hinzu, aber wie zuvor werde ich ein bisschen Blau in den Schatten legen, also ist es nicht wirklich überwältigend auf der Seite. Und ich füge ein bisschen Gelb in die Highlights ein. Das ist großartig. Meine Knöpfe stechen wirklich hervor. Jetzt gibt es eine Sache, die ich bei diesem Design einfach nicht ertragen kann. Es hat eine Art Grau im Hintergrund hinter diesem Charakter auf der rechten Seite. Es gibt wie ein grauer Klecks und ich will wirklich keine große Graufläche und sieht einfach nur langweilig aus. Was ich tun könnte, ist eine viel hellere Farbe zu machen eine viel hellere Farbe , damit sie nicht super überwältigend ist, aber es gibt nur ein bisschen Farbe auf der Rückseite der Seite. Wenn wir unsere Helligkeitstabelle nur noch einmal überprüfen, können wir sehen, dass Cyan eine ziemlich helle Farbe ist, nur Sekunde nach Gelb. Jetzt verwenden wir Gelb als Highlights, daher werden wir es nicht wirklich als Hintergrundfarbe verwenden . Lassen Sie uns stattdessen ein bisschen sehr leichtes Cyan in den Hintergrund stellen. Endlich werde ich mein Auge jetzt sehr schnell benutzen , alles eine andere Farbe hat, um die Dinge ein kleines bisschen neu auszurichten. Ich habe jetzt ein Design, mit dem ich nicht sehr zufrieden bin. werden wir einige Verbesserungen vornehmen In den nächsten Videos werden wir einige Verbesserungen vornehmen. Aber im Moment denke ich, dass es weit, weitaus besser ist als das ursprüngliche Design. Ich habe das Layout nicht geändert. Ich habe keinen Inhalt geändert. Ich habe die Schriften nicht geändert und ich habe nur wirklich an die Farben von sehr, sehr kleinen Mengen angepasst . Zu Beginn dieses Videos haben Sie gesehen, wie ich einen roten Farbbereich erstellt , in dem ich für die dunkleren Rottöne eine kleine Menge Blau einlege. Und für die helleren Rottöne lege ich eine kleine Menge Gelb ein, wähle eine andere Farbe, vielleicht grün, und versuche dasselbe zu tun. Sehen Sie, ob Sie einen Farbbereich erstellen können, der etwas natürlicher und schöner aussieht , indem Sie einfach eine etwas hellere Farbe in die helleren Grüns geben und eine etwas dunklere Farbe hinzufügen die dunkleren Grüns. Wenn Sie ein vorheriges Design haben, an dem Sie gearbeitet haben, nehmen Sie das jetzt auf oder wählen Sie eines der aus einem vorherigen Video erstellt haben , und wählen Sie es auch mit den tatsächlichen Farben in einem Design aus. Besonders auf der Suche nach Elementen, die entweder schwarz, weiß oder grau sind . Versuchen Sie, ein bisschen anderes HEW mit diesen Farben zu mischen . 10. Farbabstimmung: Nehmen wir an, ich habe mich jetzt bei meiner Webanwendung angemeldet und irgendeinem Grund ist es ein Ausgaben-Dashboard, aber vielleicht sieht es ein bisschen so aus. Jetzt möchte ich versuchen, das etwas einheitlicher aussehen zu lassen. Versuchen Sie, das Design hier zu verbessern. Eine Sache, die ein Künstler beim Malen eines Porträts tun könnte , ist vielleicht nur kalte Farben zu verwenden. Die Idee hier ist jede Farbe auf der Seite. Ich habe gerade eine leichte Blautönung hinzugefügt. Ich habe gerade ein bisschen Blauton in jede dieser Farben gemischt . Oder alternativ füge ich einfach ein heißes Zelt zu allem hinzu. Nun, ich mische einfach ein bisschen Orange in alles und es lässt das Ganze einheitlich aussehen, lässt das Ganze einheitlich aussehen sicherlich keine Knöpfe oder irgendetwas hervorstechen, aber es lässt die Farben sich anfühlen wie sie gehören vielleicht zur gleichen Palette. Der Grund, warum dies besonders gut aussehen könnte , wenn wir eine Komposition malen , ist, dass Sie sehr selten nur weißes Licht in einem Bereich haben weißes Licht in einem Bereich es sei denn, Sie sind draußen und direktes Sonnenlicht. Aber selbst dann haben Sie zu bestimmten Tageszeiten nicht nur weißes Licht als Quelle. Diese Berge auf diesem Bild sind eigentlich nicht blau. Es ist nur die Sonne ist tiefer am Himmel, fließt durch mehr Atmosphäre. Und wir wissen, dass Blau von Lichtern mit kürzeren Wellenlängen stammt und kürzere Wellenlängenlichter stärker verschoben werden. Und deshalb wird es mehr blaues Licht geben. Der Bereich um die Sonne herum erscheint roter, einfach weil die roten Lichtwellen länger sind und daher weniger diffundieren und dann eher direkt auf Sie zukommen. Wenn Sie nun in die andere Richtung schauen, je nachdem, ob Sie in direkter Sonneneinstrahlung waren oder nicht, würden die Dinge, die Sie sich angesehen haben, entweder insgesamt bläulicher oder insgesamt rötlicher erscheinen . Maler sprechen vielleicht davon, einem Gemälde einen wärmeren Farbton zu geben , oder insgesamt einen kälteren Farbton, weil es die Dinge vereinheitlichen und sie trotzdem natürlich aussehen lässt. Wie gesagt, es ist vollkommen natürlich, ein blaues Gesicht zu malen , denn irgendwann hast du gerade ein Gesicht in blauer Beleuchtung gesehen und so sahen sie mit den beiden Kompositionen aus, die ich dir gerade gezeigt habe. Ich habe erwähnt, dass es nicht wirklich etwas hervorhebt. Wenn alles einen bläulichen Farbton hatte, unsere orangefarbenen Knöpfe dadurch nicht hervorgehoben. Das ist vielleicht keine nützliche Technik. Aber schauen wir uns ein anderes Bild von einigen Bergen an. Wenn wir uns diese Bergkette hier ansehen, bemerken Sie vielleicht, dass die Berge rechts blauer erscheinen und die auf der linken Seite etwas roter und gelber erscheinen. Sie sind die gleiche Bergkette. Das Licht aus den Bergen auf der rechten Seite fließt einfach durch mehr Luft, wobei bereits mehr verdrängte Lichter herumprallen. Dies ist für uns als Designer ein interessanter Punkt. Dieses Bild hat eine ganze Reihe von Farben. Es hat alle Lichter, die wir vielleicht wollen. Und doch erscheinen Dinge, die eine kürzere Wellenlänge haben, wie Violett, Blau und Cyan, einfach weiter entfernt. Farben wie Rot und Orange sind möglicherweise durch weniger Luft gereist und sind daher näher bei uns. Und hier ist ein praktisches Diagramm mit allen Farben in der Wellenlängenreihenfolge, mit der kürzeren Wellenlänge links und der längeren Wellenlänge rechts. Um etwas weiter weg erscheinen zu lassen, können wir es einfach lila oder blau machen, um es näher erscheinen zu lassen, wir könnten es rot oder orange machen. Bezugnahme auf diese Farben, da kalte Farben warme Farben sind, ist ein bisschen gerissen und das gesamte Konzept der warmen und kalten Farben wurde ziemlich stark entlarvt. Aber die Vorstellung, dass längere Wellenfarben näher bei dir erscheinen, ist sehr real. Wenn wir auf unser schlichtes Design zurückblicken , das ich wieder erstellt habe, ist es wahrscheinlich sinnvoller, diese blauen Farbtöne in den Hintergrundfarben zu verwenden und diese roten Töne in den Vordergrundfarben zu verwenden. Wenn ich Ihnen das gleiche Design mit grauem Hintergrund zeige, ist Grau einfach sehr unreine Lichter. Es wird einfach irgendwo in der Mitte erscheinen. Aber wenn ich es ein bisschen cyan mache, ähnlich dem Bild dieser Berge von früher. Vielleicht sieht dieser Hintergrund so aus , als wäre er ein wenig zurückgeschoben ohne Schatten oder Highlights oder irgendetwas nur flache Farbe zu verwenden Highlights oder irgendetwas nur flache Farbe . Ich kann meinem Design ein Gefühl von Tiefe verleihen. Und ebenso mit meinen leuchtend orangefarbenen Knöpfen, weil sie bereits orange sind, fühlen sie sich ein bisschen von der Seite herausgezogen. Es fühlt sich uns einfach näher an. Und vielleicht brauchen diese Knöpfe überhaupt keinen Schlagschatten. Solange sie eine langwellige Lichtfarbe haben. Ein häufiger Fehler, den ich sehe , dass Leute machen, den ich mit diesen drei Knöpfen demonstrieren kann , ist dieser , der ganz links aktiv steht. Wie wir bereits darüber gesprochen haben, fühlt es sich wegen der orangefarbenen Farbe vielleicht etwas auf uns zugezogen an. Bei der zweiten Taste hingegen sollte man sich daran erinnern, dass die Farbe relativ zu den umgebenden Farben ist. Genau wie gesagt , wenn Sie allem einen blauen Farbton hinzufügen, würde unser Gehirn die Farben ein wenig normalisieren indem das leuchtende Orange das Wort inaktiv sagt. Aber dann wird ein leicht orangefarbener Hintergrund den leicht orangefarbenen Hintergrund aufgrund des Kontrast zwischen den leuchtend orangefarbenen Texten und dem hellorangen Hintergrund, dem Gehirn, tatsächlich weiter zurückschieben aufgrund des Kontrast zwischen den leuchtend orangefarbenen Texten und dem hellorangen Hintergrund, dem Gehirn, tatsächlich weiter zurückschieben leuchtend orangefarbenen Texten und dem hellorangen Hintergrund, dem Gehirn, normalisiert sich, vorausgesetzt, es klopft nur mehr orangefarbenes Licht um. Dieser zweite Knopf fühlt sich daher fast ein bisschen eingerückt an. Aber auf einer anderen Ebene fühlt es sich ein wenig desorientierend an , weil diese leichten Orangen dann oben auf dem Grau liegen. Dieser zweite Knopf fühlt sich einfach nicht wie Teil einer natürlichen Komposition an. Und der letzte Knopf, der graue, fühlt sich irgendwie ein bisschen an, als würde er nicht hineinstecken oder herausragen. Es hat keine Tiefe. Vielleicht ist mein inaktiver Knopf grau, aber er hat ein kleines bisschen Orange in diesem Grau. In unserem letzten Video haben wir ein bisschen Blau in den Schatten und ein bisschen Gelb in die Highlights eines unserer Knöpfe hinzugefügt den Schatten und ein bisschen Gelb in . Dies waren ziemlich bequeme Farbauswahl da Blau offensichtlich kälter ist und daher etwas weiter entfernt anfühlen wird und vielleicht noch mehr Tiefe als ein Tropfen hinzufügt noch mehr Tiefe als Schatten oder ein Highlight normalerweise. Aus diesen Gründen können wir wahrscheinlich die Intensität dieser Schatten und dieser Highlights ein wenig senken und trotzdem diesen 3D-Sinn erhalten, damit die Leute ihn leicht identifizieren, da eine Schaltfläche ihn erkennt und darauf klickt. Dies bedeutet, dass wir mit einem etwas weniger intensiven Schlagschatten davonkommen können , aber vielleicht sollten wir vermeiden, die gleiche Schlagschattenintensität für Knöpfe in verschiedenen Farben zu verwenden die gleiche Schlagschattenintensität . Die Farbe unseres inaktiven Buttons hier deutet darauf hin, dass er vielleicht noch etwas eingerückt ist , während der Schlagschatten darauf hindeutet, dass es sich um dieselbe Distanz handelt. Und das ist ein bisschen desorientierend. Wenn wir jemals eine Landschaft unter perfektem weißem Licht betrachten, scheinen die Dinge, die weiter von uns entfernt sind, mehr Blau in sich zu haben , und die Dinge, die uns näher liegen, werden scheinen mehr Rot in ihnen zu haben. Dies liegt einfach daran, dass die kürzere Welle des blauen Lichts stärker verschoben wird. Wir können dies zu unserem Vorteil nutzen, wenn eine Benutzeroberfläche erstellen, da wir etwas ein Element von Tiefe und 3D geben können etwas ein Element von Tiefe und , ohne irgendwelche Schlagschatten zu verwenden, wenn wir möchten, können wir einfach verwenden Farben, damit die Dinge unterschiedliche Entfernungen von uns aussehen. So können wir Dinge so aussehen lassen, als würden sie ein wenig von der Seite abheben , indem wir einfach eine rote oder orangefarbene Farbe verwenden. Und wir können dazu führen, dass sich etwas eher wie ein Hintergrund anfühlt , indem wir einfach ein Blau oder Violett verwenden. 11. Sättigung: Bisher haben wir über drei verschiedene Attribute der Farbe gesprochen , den Farbton, den Namen, es könnte Blau, Grün, Gelb, Cyan, Magenta haben oder den Wert lesen, wie viel Weiß oder Schwarz damit vermischt ist farbe. Und wir haben über die Helligkeit gesprochen , die wahrnehmbar ist. Gelb, Cyan und Magenta fühlen sich heller an als Rot, Blau und Grün. Es gibt noch ein anderes Attribut , das Sie wahrscheinlich von Ihren Grafikprogrammen bemerkt haben , wenn Sie eine Farbe auswählen , die Sättigung ist. Wenn man sich das Bild jetzt anschaut, entsättige ich langsam diese Farben im gleichen Farbton , den gleichen Wert. Aber ich senke die Sättigung. Wenn wir stattdessen einen einzelnen Farbton auswählen, wählen wir ein Rot aus und wir sehen es uns mit einem Diagramm mit Wert versus Sättigung auf der X- und Y-Achse an, wir könnten so etwas sehen. Wir können uns vorstellen, dass das Wort Sättigung ein bisschen wie das Wort Reinheit war. Diese fünf Farben haben genau den gleichen Farbton. Sie haben genau den gleichen Wert wie in der gleichen Menge an Schwarz und Weiß, aber sie haben immer noch ganz andere Farben. Und das liegt daran, wie rein die Feuerzeuge sind, das Rot oben in der Mitte ist eine sehr, sehr reine Lichtform. Die meisten Wellenlängen hier haben eine ähnliche Länge, die zeigen würde, wenn Rand mit sehr wenigen Schwankungen in der Wellenlänge liegt, während das Grau unten fast eine gleiche Mischung aller verschiedene Wellenlängen , die für Ihr Auge wahrnehmbar sind. Dein Auge interpretiert es als grau, was du auch irgendwie an Grau denken könntest, da dein Auge nicht ganz herausfinden kann, welche Farbe es hat. Nach dem, was ich bisher in diesem Kurs gesagt habe, könnte Ihnen vergeben werden, dass Sie denken, dass ich möchte, dass Sie Grau meiden. Ich möchte nicht, dass du viele Grautöne verwendest. Wahrscheinlich viel mehr, als Sie gerade verwenden. In der Tat ist zu viel sehr gesättigte Farbe eine harte Arbeit für Ihr Auge. Und wir können Sättigung als eine Form des Kontrastes verwenden. Schauen wir uns für einen Moment einfach ein paar verschiedene Gemälde aus der Kunstwelt an. Auch hier hat dieses Gemälde sehr, sehr entsättigte Farben. Und doch ist keine dieser Farben völlig entsättigt. Sie können hier den Blau und Grün und Rot in dieser Farbpalette ohne gesättigte Farben deutlich sehen dieser Farbpalette ohne , diese sehen tatsächlich bunt aus, aber wenn wir uns die Palette selbst ansehen, sieht fast wie eine Ladung Grautöne aus. Diese Farbpalette wäre jedoch offensichtlich für uns als Benutzeroberflächendesigner von eingeschränktem Nutzen uns als Benutzeroberflächendesigner da nichts auffällt. Es gibt nichts Mutiges, das besagt Klick auf mich oder schau dir das an. Dies hilft uns nicht, eine visuelle Hierarchie in unseren Kompositionen aufzubauen . Vielleicht wäre eine Farbpaletten mehr wie diese nützlicher , wenn alle Farben wirklich, wirklich gesättigt sind. Alles ist sehr dominant. Und wir wissen, dass es dieses leuchtende Orange gibt, auf das wir wahrscheinlich klicken oder uns ansehen möchten . Und alles konkurriert um unsere Aufmerksamkeit. Problem hier ist, dass, wenn alles gesättigt aussieht, sich ein wenig auswaschen, indem sie sich einfach neben einer gesättigten Farbe befinden, eine Farbe einfach weniger gesättigt erscheint. Und natürlich kann nicht alles unsere Aufmerksamkeit erregen. Wir wollen nur, dass bestimmte Elemente auffallen. Ein großes Problem Anfänger Designer machen, ist das gleiche Problem, das wir in allen alten Kunstklassen gemacht haben, in denen wir nur über die Farbunterschiede zwischen den Farben nachdenken . Wirklich, wir würden niemals eine Farbpalette verwenden, um eine Benutzeroberfläche zu entwerfen , bei der alle Farben wirklich gesättigt sind. Wenn überhaupt, ist diese Farbpalette für das Design der Benutzeroberfläche tatsächlich schlechter als die letzte. Wir würden wahrscheinlich eine Farbpalette verwenden wollen von diesem Gemälde ähnlicher ist, bei der die meisten Farben ziemlich entsättigt sind , wobei gelegentlich leuchtend rot darin ist. Realistisch gesehen wäre selbst dieses Gemälde nicht großartig für unsere Benutzeroberfläche. Wir möchten, dass dieses Rot noch gesättigter ist, aber es war nicht einfach, ein Gemälde mit einer ähnlichen Farbpalette zu finden ein Gemälde mit einer ähnlichen Farbpalette , die wir in der Benutzeroberfläche verwenden könnten. Wenn Sie online oder in einer Grafikanwendung eine Farbauswahl finden online oder in einer Grafikanwendung eine oder im Internet nach schönen Farbpaletten suchen, erhalten Sie auf dem Bildschirm etwas , das ein bisschen so aussieht . Fünf unglaublich gesättigte Farben. Die Farbtöne könnten sich ganz gut kontrastieren. Sie waren vielleicht alle auf diese Weise eingerichtet, aber wahrscheinlich sind sie alle ein bisschen zu gesättigt, um für Sie als UI-Designer nützlich zu sein. Als ich anfing zu entwerfen, schnappte ich mir wie viele Designer eine Farbpalette wie diese und wendete diese Farben so an, wie sie sind, auf meine Designs. Und sie würden natürlich so aussehen wie das Matisse-Gemälde von früher. Alles ist viel zu gesättigt und deshalb waschen sie sich gegenseitig aus und nichts fällt auf. Und es kann ein bisschen harte Arbeit sein, sich anzusehen und herauszufinden, was alles auf dem Bildschirm ist. Nehmen wir an, ich habe diese Farbpalette online mit diesen fünf Farben gefunden . Jetzt könnte das für einige Zwecke gut sein. Es wird für mein UI-Design nicht nützlich sein. Ich muss mindestens die Hälfte der Farben entsättigen. Jetzt sieht das nicht gut aus, diese fünf Farben nebeneinander, aber sie werden viel besser aussehen, wenn ich sie auf ein Design anwende. Sättigung ist nicht identisch mit dem Wert. Es ist nicht wie hell oder dunkel es ist, es ist wie rein es ist, wie grau oder bunt es ist. Wenn wir zum ersten Mal Farben für unsere Benutzeroberflächendesigns auswählen, kann es verlockend sein, viel zu gesättigte Farben auszuwählen. Diese waschen sich nicht nur gegenseitig aus, sie sind nicht besonders praktisch um eine visuelle Hierarchie aufzubauen. Die idealen Farbpaletten, die wir für das Design wählen würden, werden viel mehr entsättigte Farben haben, als wir zuerst erwarten. Und die einzige Möglichkeit, dies zu beweisen, besteht darin, die Farben in ein Design zu bringen und zu sehen, wie sie aussehen. Lass uns das als Nächstes machen. 12. Saturation: Hier ist ein einfaches Dashboard , das ich erstellt habe. Ich würde sagen, dass einige der Farben hier etwas zu gesättigt sind, nicht so schlimm wie einige Dinge, die ich kreiert habe, und definitiv nicht etwas, das ich vorher gesehen habe. Aber es gibt einige Farben, die einfach nicht so gesättigt sein müssen. Bevor wir darauf eingehen, möchte ich darauf hinweisen, dass jeder der Abschnitte dieses Designs einen dicken schwarzen Umriss habe , der ziemlich überwältigend und ablenkend ist , wahrscheinlich ein bisschen zu viel Kontrast an Orten , an denen wir es nicht brauchen. Ich habe das natürlich gemacht, weil ich keinen Zugang zu vielen entsättigten Farben hatte. Wenn ich eine entsättigte Farbe im Hintergrund hätte, bräuchte ich die schwarzen Linien nicht mehr . So etwas. Grau sieht sofort viel besser aus. Ich kann diese schwarzen Linien entfernen und es trennt immer noch deutlich die verschiedenen Bereiche auf meiner Seite. Anstatt jetzt ein komplettes Grau zu verwenden, kann ich ein sehr gesättigtes Blau verwenden. Wir wissen, dass es sich dadurch ein bisschen weiter weg anfühlt. Und dadurch fühlt sich unser gesamtes Design etwas weniger grau an, was nicht immer super schön ist. Im Nachhinein habe ich diese Hintergrundfarbe vielleicht nicht genug entsättigt, aber Sie können sehen, wie das wahrscheinlich ein bisschen schöner ist als das Grau, das wir zuvor hatten. Mal sehen, ob wir noch ein paar Dinge entsättigen können , denn im Moment habe ich ein paar seltsame Rauten-Dinge hier ein paar seltsame Rauten-Dinge, die wahrscheinlich eher wie Knöpfe aussehen. Sie sind ein bisschen auch in deinem Gesicht. Hier drüben habe ich ein paar Zahlen, die hübsch sind, so ziemlich nur besagt , dass wir auf dem Bildschirm bleiben wollen. Der Benutzer vergisst also nicht wie viele E-Mails er bei Open hat und solche Dinge. Wir haben einige verschiedene Diagramme und andere Informationen, die derzeit in sehr, sehr gesättigten Farben enthalten sind , aber sie müssen es nicht wirklich sein. Sie können all diese Bereiche auf unseren weniger gesättigten oder diesen Symbolen, Lutschtabletten und verschiedenen Informationen auf der Seite sehen, wir können diese einfach ziemlich entsättigen. Derzeit hat mein gesamter Text den gleichen Wert und die gleiche Sättigung. Ich könnte den Wert eines Teils dieses Textes ziemlich entsättigen und senken . Und es wird dazu beitragen , diese Hierarchie auch ein wenig auf der Seite zu erstellen . Vielleicht verwende ich etwas von dieser Marken-lila Farbe, die ich für Überschriften verwende, vielleicht ist das auch ein bisschen zu gesättigt. Lasst uns das senken. Es sieht jetzt fast wie eine schwarze Farbe aus, aber es ist nur eine sehr, sehr entsättigte Version dieses originalen Violetts. Sie können sehen, dass dieses Design immer noch bunt aussieht. Es hat immer noch eine gewisse Tiefe. Die Dinge fühlen sich uns nahe oder weit weg von uns an. Es fühlt sich fast 3D an, aber alles ist viel weniger gesättigt, jetzt ist es einfacher das Auge und es ist einfacher für uns, bestimmte Dinge besser hervorzuheben . Das heißt, wenn wir wirklich auf etwas aufmerksam machen und sagen wollen auf etwas aufmerksam machen und , ist dies das erste, was wir denken, dass Sie sich ansehen sollten. Wir können diese Farbe wirklich gesättigt machen, wie unsere Call-to-Action-Buttons oder dieses helle Gelb, das ich gerade hier platziert habe. Und vielleicht bin ich mit diesem Gelb auch zu weit gegangen. Aber es erklärt meinen Standpunkt, dass wir das jetzt wirklich hervorstechen können. Es ist also das erste, was die Leute betrachten, wenn wir das wollen, wir haben diese Option nur zur Verfügung indem wir alles andere entsättigen. Jetzt können wir ein bisschen zusätzliche Farbe verwenden, um etwas mehr Tiefe zu tragen oder mehr Aufmerksamkeit auf bestimmte Dinge zu lenken, oder um es ein bisschen stilvoller zu machen, vielleicht möchte ich deutlich machen, dass etwas ist 3D. Ich kann jetzt ein bisschen Farbe in einen Schlagschatten geben. Ich könnte das abschneiden , indem ich ein bisschen Farbe im Hintergrund habe. Ich könnte diese Diagramme hier interessanter Farbverlaufsfarbe versehen. Dies sind Optionen, die ich jetzt verfügbar habe, weil ich ein bisschen Ersatzfarbe habe, die ich auf der gesamten Website verwenden kann, was ich bei den Originaldesigns nicht hätte machen können, da alle Farben, für die wir alle bereit sind gesättigt sah es schon im März aus. Wenn wir uns die tatsächlichen Farbpaletten einiger der Farben ansehen, die ich hinzugefügt und verwendet habe. Da ich dieses Design geändert habe, sieht man, dass sie wirklich entsättigt sind. In der Tat, wenn wir sie aus dem Kontext des Designs heraus betrachten, werden sie selbst betrachten, auf der Seite sehen sie tatsächlich viel zu entsättigt aus. Sie sehen aus, als würden sie im Design überhaupt nicht gut funktionieren . Und deshalb wollen wir unsere Farben immer im Kontext eines Designs verwenden unsere Farben immer im Kontext , um zu sehen, wie sie aussehen. Möglicherweise genehmigen wir niemals die Farbpaletten für die Rechte oder als Teil unserer Farbpalette. Aber wir würden wahrscheinlich das Design auf der linken Seite genehmigen, was viel besser aussieht, wenn wir sie im Kontext sehen. Als Übung. Jetzt möchte ich, dass Sie etwas mitnehmen, das Sie bereits entworfen haben , oder irgendwo online ein vorhandenes Design finden. Und versuchen Sie, D einige der Farben zu sättigen, aber versuchen Sie es zu vermeiden, etwas komplett grau zu machen. Sehen Sie, ob Sie das Design immer noch gut aussehen lassen können. Zwar gibt es nur ein oder zwei sehr gesättigte Farben. Und viele, viele entsättigte, fast graue Farben. 13. Kontraste: Nehmen wir an, wir haben einen Onboarding-Bildschirm für unsere mobile App, vielleicht etwas, das ein bisschen so aussieht. Das erste, was Sie vielleicht denken, ist, dass diese Texte etwas schwer zu lesen sind. Und offensichtlich ist eines der Dinge, die Texte schwer lesbar machen würden, wenn es nicht viele Kontraste zwischen der Farbe des Textes und der Hintergrundfarbe gibt. Wir könnten natürlich diese Hintergrundfarbe entfernen und dann wird es mehr Kontrast geben. Der Hintergrund ist jetzt weiß , so dass der Text stärker hervorsticht. Wir können es einfacher lesen. Die Absatztexte könnten wir das einfach dunkler machen. Und dann gibt es auch hier mehr Kontrast. Aber wir erzeugen nicht nur Kontrast zu Licht und Dunkelheit. Wir können einen Farbtonkontrast erzeugen. Jetzt sind Blau und Gelb kontrastierende Farben. Also könnte ich einen gelben Hintergrund mit blauer Steuer oder einen blauen Hintergrund mit gelbem Text haben. Und das wird es noch mehr hervorstechen. Das bedeutet, dass ich eine etwas interessantere Farbpalette haben kann eine etwas interessantere Farbpalette während ich meinen Text trotzdem leicht lesbar mache und das Ganze ziemlich einfach wahrzunehmen und für uns den Unterschied erkennen kann zwischen verschiedenen Bereichen. Jetzt haben wir natürlich ein Problem, bei dem alle Farben übermäßig gesättigt sind, also werden sie sich ein wenig auswaschen und es wird ziemlich harte Arbeit für unsere Augen mit all diese gesättigte Farbe kommt auf uns zu. Glücklicherweise haben wir eine andere Art von Farbkontrast, nämlich Sättigungskontrast. Also könnte ich den Hintergrund sättigen und dann sehr gesättigten Text haben und es würde ungefähr so aussehen. Wenn ich Ihnen jetzt nur die gesättigten und entsättigten Hintergründe hier zeige , können Sie sehen, dass einer von ihnen viel einfacher für das Auge ist, und ich würde argumentieren, dass es wahrscheinlich auch ein bisschen einfacher zu lesen ist. Diese drei verschiedenen Attribute , die Farbe haben Wert, Farbton und Sättigung, können alle verwendet werden, um Kontrast zu erzeugen. Aber warum ist der Kontrast für uns so wichtig? Wir wissen, dass es unseren zweiten Schüler optisch interessant machen wird. Wir wissen, dass es einfacher wird, wahrzunehmen , wo Text ist und ähnliches. Aber eigentlich ist es für uns aus einem ganz anderen Grund wertvoll . Das ist der Union Jack, die britische Flagge. Und wenn du 30 Sekunden lang auf diese Stelle in der Mitte starrst , lasse ich sie einfach auf dem Bildschirm, während ich spreche. Behalte einfach den schwarzen Punkt im Auge. Irgendwann hast du diesen visuellen Trick wahrscheinlich schon einmal gemacht , aber lass es uns trotzdem machen. Behalte die schwarzen Flecken im Auge. Und dann boom, was ist gerade passiert? Nun, nachdem ich die Flagge vom Bildschirm entfernt hatte, haben Sie diese Flagge wahrscheinlich für den 2. Platz gesehen, vielleicht weil sich alle Kegel in Ihren Augen so daran gewöhnt haben, die Farben anzusehen, die dort waren. Sie hatten es satt, diese Farben anzusehen, und sie waren anfälliger für diese Farben. Sie hatten es satt, auf das gelbe Licht zu schauen , so dass sie, wenn sie alle Lichter bekamen, die sie erraten, wenn sie weiß sehen , nur das Blau sehen. Denken Sie daran, dass Weiß alle farbigen Lichter drin hat. Und der Teil, der auf das Gelb geschaut hat, ist jetzt müde. Es ist also wahrscheinlicher, dass dein Auge blau sieht. Denken Sie daran, als würden Sie Ihren Körper ins Fitnessstudio und eine Menge Bewegung gemacht haben , bei der Sie bringen und eine Menge Bewegung gemacht haben , bei der Sie Ihre Arme benutzen mussten. Deine Arme wären müde. Es ist wahrscheinlich sinnvoller, als nächstes eine Laufübung zu machen , wird weniger schmerzhaft sein, aber Sie werden es auch besser machen können. Wenn Ihre Augen gerade viel Gelb angeschaut haben , ist es sinnvoller, als nächstes etwas Blau zu betrachten. Es wird nicht nur angenehmer, Sie werden es besser wahrnehmen können. Wenn ich das Design jetzt auf dem Bildschirm aufteile, macht die Hälfte deines Auges Beinübungen und die andere Hälfte macht Armübungen. Und weil dein Auge nicht besonders still bleibt, springt es ein wenig herum. Deine verschiedenen Teile deines Auges wechseln zwischen den beiden und werden daher von dem einen oder anderen nicht zu stark gestresst. Die exakt kontrastierenden Farben der drei auf der linken Seite sind die drei Farben, die derzeit rechts sind. Wenn wir die britische Flagge unglaublich angenehm anzusehen machen wollten , könnten wir es tatsächlich so machen. Jetzt habe ich schon mal gesehen, wie Leute es so zeichnen. Oder alternativ um sicherzustellen, dass ich alle Menschen in Großbritannien gleichermaßen verärgere. Wir könnten es auch so aussehen lassen. Eine Sache, die Sie wahrscheinlich bei diesen beiden neuen Flaggen-Designs bemerken werden, die ich erstellt habe , ist , dass Sie tatsächlich eine Million Meilen von dem entfernt sind, was existiert. Tatsächlich sieht diese Flagge hier einfach so aus, als wären die roten Teile etwas zu lang in der Sonne. Wir schaffen mehr visuelle Interessen, indem wir die Farben nicht exakt miteinander kontrastieren. Denn vor allem, weil die meisten anderen Designer irgendwann in der Geschichte haben, tun Sie das einfach nicht genau. Es ist irgendwie faul. Aber natürlich ist in der Welt der Flaggen wahrscheinlich der Grund, dass dies nicht die Flagge ist nur alle Farben die gleiche Bedeutung haben wollten . Und deshalb sollte die Farbe in der Mitte viel gesättigter sein. Wir wissen, dass Menschen natürlich gerne kontrastierende Farben betrachten , weil sie immer Fotos davon machen. Jeder am Strand wird derzeit seine Kamera genau an dieser Szene rausholen lassen. Wir wissen bereits aufgrund der Art und Weise , wie das Licht bricht , dass es uns die Kurzwellenlichter an den Seiten und die langwelligen Lichter in der Mitte des Bildes hier gibt die Kurzwellenlichter an den Seiten und die langwelligen Lichter . Und es spaltet die kontrastierenden Farben für uns perfekt auf. Das macht es ganz schön für unser Auge. Es macht es optisch interessant und macht es objektiv schön. Wir können leicht erkennen , welche Farben kontrastieren, da sie sich auf einem Farbrad direkt gegenüberliegen sollten . Wie ich vielleicht schon erwähnt habe, sind diese Farbräder fast immer. Falsch. Wenn Sie einfach zu Google Images gehen und ihm das Farbrad setzen, erhalten Sie eines, das ein bisschen wie das auf dem Bildschirm aussieht , was völlig falsch ist. Wir können hier sehen, dass das Gelb, das wir in unsere Drucker stecken , und die blauen Lichter , die wir auf unserem Bildschirm haben denen wir wissen, dass unsere genauen Kontrastfarben auf diesem Farbrad nicht gegenüberliegen. Stattdessen steht Gelb dieser kastanienbraunen Farbe gegenüber. Wenn Sie jemals sicher sein möchten , ob sich zwei Farben perfekt gegenseitig kontrastieren, können Sie sie überlagern und Sie sollten immer grau werden, denn wir wissen, dass Grau eine perfekte Mischung aus gibt alle verschiedenen Farben. Wenn ich das Gelb und das Blau überlagere, bekomme ich acht, das perfekte Grau. Es gibt überhaupt keine Farbe in diesem Grau , völlig kontrastierend. Wenn ich die beiden Farben, die sich in diesem Farbrad gegenüberlagere , das Gelb und das Lila, bekomme ich diese Art von Farbe. Ich kann den gleichen Effekt erzielen, wenn ich einen Farbverlauf zwischen zwei Farben erstelle . Wenn sie sich genau gegenseitig kontrastieren, die Farbe in der Mitte des Farbverlaufs immer grau. Warum gibt es so viele falsche Farbräder auf der Welt? Nun, einer der Gründe ist, dass manche Leute eine falsche Vorstellung davon haben , was die Primärfarben sind. Denken Sie daran, einige Leute haben seit ihrem fünften Lebensjahr nichts über Farbe gelernt und denken, dass Rot, Gelb und Blau die Grundfarben für Farbe sind. Indem sie zwingen, dass diese drei Farben um einen Kreis herum gleich weit entfernt sind, erzeugen sie fälschlicherweise ein Farbrad. Wir wissen natürlich, dass die Primärfarben Cyan, Magenta und Gelb sind , weil wir alle schon einmal das Innere eines Druckers gesehen haben. Wenn Sie Cyan, Magenta und Gelb um das Farbrad gleich weit entfernt machen, enden Sie damit. Und Sie werden feststellen, dass Rot, Blau und Grün natürlich auch gleich um dieses Farbrad herum sind. Und natürlich hat unser Farbrad diese beiden kontrastierenden Farben, Gelb und Blau, gegenüber. Kontrast erleichtert es uns, Dinge auf der Seite zu identifizieren. Es macht es einfach, dass Text oder Symbole sich von ihrem Hintergrund abheben. Es macht deutlich, dass sich ein anderer Abschnitt der Seite vom letzten unterscheidet . Und es macht es optisch interessanter, sich das Design anzusehen. Aber es macht es auch objektiv schöner, weil es erlaubt die Kegel und Stäbe und unsere Augen zu stimulieren und sich dann auszuruhen, wenn sie sich das Design umsehen, können wir kreieren Kontrast zwischen zwei Farben, indem man eine sehr gesättigte und eine sehr entsättigt hat einen sehr hohen Wert hat, da viel Weiß darin ist, und eines ist ein sehr niedrigerer Wert, mit viel schwarz drin. Und wir können Kontrast mit verschiedenen Farbtönen erzeugen. Wir können Farbtöne finden, die kontrastieren, weil sie sich auf einem Farbrad gegenüberliegen Menge Designsoftware wird irgendwo in der Farbauswahl ein Farbrad haben Eine Menge Designsoftware wird irgendwo in der Farbauswahl ein Farbrad haben. Aber seien Sie sehr vorsichtig mit diesen Farbrädern, da viele von ihnen nicht besonders genau sind. Du solltest Gelb und Blau direkt gegenüberstehen. Das ist die Art von Ikea-Gelb und das IK-Blau sollte direkte Gegensätze sein. 14. Kontrast Beispiele: Hier ist ein Designer, der in einem früheren Video erstellt wurde. Und ich fühle, wenn ich die Seite runterscrolle , ist es ein bisschen eintönig. Der gesamte Hintergrund ist weiß, also sollten wir diesem Header-Bereich vielleicht einfach einen Hintergrund hinzufügen . Lass es uns lila machen. Ich sehe sofort viel besser aus. All dieser Kontrast zwischen dem Header-Abschnitt und den niedrigsten Abschnitten sagt uns jetzt sofort, dass dieses oberste Bit etwas anderes ist. Aber vielleicht möchten wir auch hier ein paar Farben umschalten . Sehen Sie jetzt, ich habe einen großen orangefarbenen Knopf, der sagt, einen Kurs zu beginnen. Aber persönlich habe ich das Gefühl diese gelbe Farbe zuerst auf mich springt. Das erregt die meiste Aufmerksamkeit. Nun, schauen wir uns diese drei Farben separat an, das Lila, das Orange und das Gelb. Und lasst uns sie auch vollständig sättigen, damit wir den tatsächlichen Farbton betrachten und wir nicht auf verschiedene Sättigungsstufen schauen. Jetzt können wir sehen, wo sie sich alle auf einem Farbrad befinden. Hier sind diese drei Farben. Ein paar Dinge zu wissen. Offensichtlich gibt es mehr Kontrast zwischen Gelb und Violett als zwischen Orange und Violett. So wird der gelbe Farbton natürlich mehr hervorstechen als die Orange. Aber auch alle unsere Farben sind ein bisschen mehr auf einer Seite. Wenn wir dem Mix jemals eine vierte Farbe hinzufügen wollten, würden wir hier etwas auswählen wollen. Wenn wir eine Komposition hätten, die vollständig aus Lila, Gelb und Orange besteht, wird dieses Blaugrün das Richtige sein, was wirklich auffällt. Nun, ja, dieses Grün fällt auf dieser Seite gut hervor, aber es gibt etwas an diesem Gelb , das mich immer noch anschreit. Vielleicht liegt es daran, dass wenn ich mir diese Farben auf dieser Helligkeitstabelle anschaue , die wir hier haben, sehen wir, dass der größte Helligkeitskontrast zwischen Gelb und Violett liegt. Und wir können einfach keine der Farben so hell machen , wie wir ein Gelb machen können. Vielleicht machen wir die Knöpfe einfach gelb. Diese Knöpfe fallen wirklich hervor. Eine andere Möglichkeit wäre natürlich, die Schaltflächen orange zu halten, aber einfach nicht das Gelb in der Abbildung oder irgendwo anders auf der Seite wie folgt zu haben . Stattdessen kann ich das Gelb verwenden, aber stattdessen verwende ich das Gelb hier als sehr entsättigte Version als Hintergrund. Insgesamt bin ich ziemlich zufrieden mit diesem Design, jetzt habe ich gerade ein paar Änderungen vorgenommen, um den Farbkontrast zu verbessern und sicherzustellen, dass diese Tasten oben hervorstechen. Und hier ist natürlich der Vergleich mit dem Original. Nicht zu viel, um es hier zu fassen, denn dies war eher eine Demonstration dessen, worüber wir gerade gesprochen haben. Aber wir können den Kontrast nutzen, um uns dabei zu helfen , die Dinge stärker hervorzuheben und die Dinge getrennt anfühlen zu lassen. Und wir können den Kontrast verwenden, nicht nur mit dem Farbton, sondern auch mit der Helligkeit, dem Wert und natürlich der Sättigung. 15. Zusammenfassung: Wir haben gerade die wichtigsten Attribute von Farbe, Farbton, Sättigung und Wert oder Helligkeit untersucht . Wert und Helligkeit wirken sich auf das Gleiche aus. Wie viel Schwarz oder wie viel Weiß in der Farbe ist außer der Helligkeit wahrnehmbar, während der Wert einheitlich ist. Ihre Grafiksoftware und CSS werden nicht mit der Helligkeit umgehen können . Sie können Designsoftware oder CSS verwenden um die Farbsättigung oder den Wert zu definieren, aber nicht die Helligkeit, da dies wahrnehmbar ist und der Helligkeitsbereich für verschiedene Farbtöne sehr unterschiedlich ist . Ein blauer Farbton hat nur eine geringe Helligkeit. Nun, ein gelber Farbton hat nur Zugang zu hoher Helligkeit. Wir können Farbsättigung und Wert oder Helligkeit verwenden , um Kontrast zu erzeugen. In unserem Design wird der Wert den meisten Kontrast schaffen und ihnen die meiste Definition geben , einfach weil wir viel mehr Stäbe im Auge haben, als wir Zapfen haben. Das Licht und die Dunkelheit in unserem Design zu bringen , ist bei weitem das Wichtigste, als Farbton oder Sättigung zu bekommen, oder? Wir können zuerst in Schwarz-Weiß- und Graustufen entwerfen , wenn dies dazu beiträgt, dass es gut aussieht. Wie wir bereits aus dem letzten Abschnitt wissen, jedes dieser Attribute einer Farbe, ihres Farbtons, ihrer Sättigung und ihres Wertes von den umgebenden Farben beeinflusst. Und daneben eine gesättigte Farbe. Wir lassen die Farbe daneben weniger gesättigt erscheinen. Rote Farbe. Wir lassen die Farbe daneben blauer erscheinen. Und eine dunkle Farbe. Wir lassen die Farbe daneben heller erscheinen. Jetzt wissen wir, wie Licht funktioniert, und wir wissen, wie man Farbe klassifiziert und über sie spricht. Und wir wissen bereits intuitiv, wie der Kontext der Farbe ihn verändert. Es ist endlich an der Zeit, unsere Farbpalette zu erstellen.