Eine detaillierte Erklärung der überlappenden und weichen Farbanpassungsmethode bei der Farbanpassung von Webseiten

In diesem Artikel gibt es keine Spitzfindigkeiten, es geht nur darum, Techniken zur Farbabstimmung vorzustellen. Es ist sehr einfach, so einfach, dass es Sie zum Weinen bringt, aber es kann für Sie sehr praktisch sein, so praktisch, dass es Ihnen die Sprache verschlägt. Ursprünglich war es ein Geschenk der Natur, Sie und ich haben es einfach aufgelesen ...
Der visuelle Aspekt einer Webseite besteht hauptsächlich aus Form (oder Layout), Farbe, Bildern und Textinformationen. Designer achten normalerweise mehr auf den Sinn der Form, da visuelle Wirkung, Designunterschiede oder Innovation hauptsächlich von der Formpräsentation abhängen und Farbe hauptsächlich die Gesamtwahrnehmung, Designqualität und Emotionen des Publikums beeinflusst. Oft entwerfen wir eine gute Form, erreichen aber nicht die Qualität, die dieses Manuskript haben sollte. Ist das nicht schade?
Formen müssen durchdacht und erstellt, Bildmaterialien erlernt und verarbeitet und Texte sortiert und angeordnet werden. Doch sind für die Farbgebung von Webseiten unbedingt ein natürliches Farbgefühl, umfassende Theorien und jahrelange Erfahrung erforderlich, um sie frei einsetzen zu können?
Natürlich nicht!
Im Internet gibt es viele Artikel zur Farbabstimmung von Webseiten, und einige davon sind sogar überschwemmt. Studenten, die ein wenig aufgepasst haben, sollten zusätzliche Farbabstimmungstools wie „Farbrad“ und „Farbkarte“ kennen, aber die meisten davon sind Erweiterungen des Farbsystems auf gedruckten Medien, die nicht vollständig auf Webseiten anwendbar sind und sogar große Einschränkungen mit sich bringen. Würden Sie beispielsweise ernsthaft das Farbrad verwenden, um die Farben von Webseiten auszuwählen? Können Sie beispielsweise mit den unten angegebenen Farbkombinationen nacheinander auf ähnliche Anforderungen an das Webseitendesign reagieren?
Sanfte Farbanpassung in der Farbanpassung von Webseiten Sanlian-Tutorial

Sanfte Farbanpassung in der Farbanpassung von Webseiten Sanlian-Tutorial

Aufgrund der Unterschiede zwischen den Farbmodi CMYK und RGB ist die Anzahl der auf Webseiten dargestellten Farben viel größer und die Auswahl sollte freier sein. Bei der Farbabstimmung stoßen wir jedoch häufig auf große Probleme wie schmutzige, graue und grelle Designs. Dieses Problem muss gelöst werden.
Fallanalyse für Webseiten: „Die Farbübereinstimmung bei Webseiten sollte drei nicht überschreiten.“
Das stimmt zwar, aber es geht eher um den Farbton (verschiedene Farben wie Rot, Orange, Gelb, Grün, Indigo, Lila usw.).
Da der Farbtonunterschied offensichtlich ist, ist es einfacher, die Hauptfarbe auszuwählen. Zu den üblichen Methoden gehören Kontrastfarben, benachbarte Farben, komplementäre kühle und warme Töne usw. Sie können einfach festgelegt werden, oder Sie können die Haupt- und Nebenfarbverhältnisse direkt aus erfolgreichen Arbeiten übernehmen, z. B. das gewöhnliche Zinnoberrot, das mit Dunkelblau verschönert wird, leuchtendes Gelb, das mit Dunkelgrün verschönert wird usw.
Normalerweise bringen die Designanforderungen, denen wir uns stellen müssen, jedoch größere Probleme bei der Farbzuordnung mit sich:

(Da ich mich mit der visuellen Gestaltung von Spiele-Webseiten beschäftige, werden die Fälle alle mit Spiele-Webseiten illustriert. Andere Arten von Webseiten können zur Überlegung oder einfach als Referenz erweitert werden.)
Wie oben gezeigt, wird es je nach Informationsmenge auf der Webseite mehr hierarchische Unterteilungen von Farbbereichen und hierarchische Unterscheidungen von Textinformationen geben. Unter Einhaltung des Prinzips „nicht mehr als drei Farben (Phasen) auf einer Webseite“ können wir also nur nach mehr Farben in derselben Farbfamilie suchen, um das Design zu verbessern, d. h. an „Sättigung“ und „Helligkeit“ zu arbeiten.
Dies ist die „natürliche“ Farbabstimmungstechnik, die wir in diesem Artikel zur Lösung dieses Problems vorstellen möchten: die Methode der überlappenden und sanften Farbabstimmung.
Austausch von Techniken für Überlappungen und sanfte Farbabstimmung (das ist der Haupttext, das Obige ist alles Unsinn)
Diese Methode ist sehr einfach. Sie müssen keine trigonometrischen Funktionen oder Rechenoperationen kennen, Sie müssen keine Farbindizes und Histogramme oder gar Farbabstufungskurven und Helligkeitsstufen verstehen … Sie können sogar völlig unbewusst mit Farben umgehen.
★Sie müssen nur drei Schlüsselwörter verstehen: Überlagerung, weiches Licht und Transparenz (Füllung).
Wenn Ihnen diese drei Schlüsselwörter immer noch unklar sind, merken Sie sich ihre Positionen (siehe Abbildung unten):

Hinweis: Transparenz unterscheidet sich geringfügig von Füllung. Füllung hat keinen Einfluss auf den Effekt der „Fülloptionen“, während Transparenz die gesamte Ebene beeinflusst.
Nehmen Sie sich übrigens ein paar Minuten Zeit, um das Prinzip dieser Farbabstimmungstechnik zu verstehen:

Das heißt: Verwenden Sie reines Weiß (#ffffff) und reines Schwarz (#000000) über die Mischmodi „Überlagern“ und „Weiches Licht“ (der Effekt ist ähnlich wie beim Anpassen von Sättigung und Helligkeit), um für jede Farbe die am besten passende Farbe zu erhalten (wählen Sie dann durch Anpassen der Transparenz die am besten geeignete Hilfsfarbe aus).
(Im obigen Beispiel können Sie durch Anpassen der Transparenz der schwarzen und weißen Blöcke im Overlay-/Soft-Modus (am Beispiel ganzzahliger Werte von 10 % bis 100 %) 40 Farbkombinationen mit offensichtlichen Unterschieden erhalten. Durch diese Technik können theoretisch für jede Farbe problemlos endlos viele „natürliche Farbkombinationen“ mit „0 Fehlern“ erzielt werden!)
★ Da die Modi „Overlay“ und „Weiches Licht“ die hellsten und dunkelsten Teile des Bildes nicht anpassen, funktioniert diese Farbabstimmungsmethode nicht für reines Schwarz und reines Weiß.
Entwurfs-Praxisdemonstration:
Ist es so kompliziert wie das Bild oben?
Nein, solange Sie die oben genannten Methoden verstehen, können Sie die Symbole vergessen und sich ganz auf Ihre Designarbeit konzentrieren!
Drei einfache Schritte:
① Ein Schwarz oder Weiß oder ein Schwarz-Weiß-Farbverlauf (können Punkte, Linien, Flächen...sogar Schriftarten sein)
② Wählen Sie „Overlay“ oder „Weiches Licht“ als Füllmodus. ③ Passen Sie die Transparenz an (1 % – 100 % ist optional, am einfachsten ist es, direkt einen ganzzahligen Wert einzugeben. Beispiel: Für Seiten mit leichter Textur können Sie 20 % – 40 % wählen, für Seiten mit schwerer Textur 60 % oder mehr).
Wie unten dargestellt:

(Egal welche Hauptfarbe Sie verwenden, ob Schwarz-Weiß-Overlay oder weiches Licht, Sie können problemlos ein perfekt passendes Farbschema erzielen. Die PSD-Quelldatei ist beigefügt.)
Dies gilt nicht nur für die Farbraumaufteilung oder das Extrahieren einiger Sekundärfarben, wie unten gezeigt: Schriftfarbe, Detaillinien, Schaltflächenverläufe, Eckhervorhebungen, Strichschatten ... alles kann frei in Schwarzweiß angewendet werden!

Methodenerweiterung (Details)
Wenn diese Methode auf eine Schaltfläche angewendet wird ...
Über die Optionen „Schatten, Schein nach außen, Strich (nicht die Methode „Weiche Überlagerung“ verwenden), „Schatten nach innen“ und „Schein nach innen“ in den Fülloptionen können Sie 5 Ebenen mit Details auf Pixelebene frei darstellen (natürlich reichen bei der tatsächlichen Verwendung normalerweise 1 bis 3 Ebenen aus).

Und egal, wie sich Form und Farbe ändern, diese Details folgen der Form und die Farbe ändert sich entsprechend. Es kann viel Zeit sparen, die Details neu anzupassen oder die Farbabstimmung blind auszuwählen!
Details, Qualität und Effizienz, drei Fliegen mit einer Klappe!
(Kürzlich habe ich in Designkreisen eine Diskussion zum Thema „Das Schnitzen von Webseiten ist nicht ratsam“ mitverfolgt. Wenn Details zur Gewohnheit und Schönheit zur Intuition wird, ist das Schnitzen nur ein gewöhnliches Designverhalten.)
Fallerfahrung:

Nachtrag:
Überlappende Methode zur sanften Farbabstimmung: Keine Tricks sind besser als Tricks. Überlassen Sie die schwer fassbaren Gefühle dem hochentwickelten Computer und setzen Sie Ihr Design wissenschaftlich um.
Kürzere Zeit, höhere Qualität, Sie haben es verdient~......
Noch etwas: Methoden sind tot, aber Menschen leben. Mithilfe von Farbstufen, Kurven, Farbbalance usw. können Sie weitere Tricks erstellen ...

<<: Schreibreihenfolge und Namenskonventionen sowie Vorsichtsmaßnahmen im CSS-Stil

>>: SQL-Implementierung von LeetCode (183. Kunden, die noch nie eine Bestellung aufgegeben haben)

So installieren Sie Phabricator mit Docker

Eine detaillierte Erklärung der überlappenden und weichen Farbanpassungsmethode bei der Farbanpassung von Webseiten

So installieren Sie Phabricator mit Docker

Beispiele für die Verwendung von MySQL-Abdeckungsindizes

Website User Experience Design (UE)

Beispiel einer Methode zur Fehlerbehebung beim Lösen von Nginx-Portkonflikten

Analysieren Sie die Kompilierung und das Brennen des Linux-Kernels und des Gerätebaums

Detaillierte Erläuterung der sechs gängigen Einschränkungstypen in MySQL

Detailliertes Tutorial zur Installation von Docker und Nvidia-Docker unter Ubuntu 16.04

Bringen Sie Ihnen einen Trick bei, um das Problem des Einfügens chinesischer Zeichen in MySQL dauerhaft zu lösen

JS berechnet die Gewinnwahrscheinlichkeit basierend auf dem Preisgewicht

Kompatibilitätsprobleme beim Einfügen von Audiodateien in HTML und beim Abspielen in Browsern

Artikel empfehlen

Eine universelle Nginx-Schnittstelle zur Implementierung der Reverse-Proxy-Konfiguration

Detaillierte Konfiguration des mysql8.x-Docker-Remotezugriffs

Methoden zur Installation und Deinstallation der virtuellen Python-Umgebung sowie aufgetretene Probleme

So erstellen Sie manuell ein neues Image mit Docker

Verwendung des Linux-Befehls ifconfig

Vue implementiert ein einfaches Einkaufswagenbeispiel

Implementierung von React-Loop-Daten (Liste)

Implementierung einfacher Tabs mit js

Beispiel einer datenbankübergreifenden Abfrage in MySQL

So zeichnen Sie eine Schaltfläche in XAML als Kreis neu

Aktivieren und Konfigurieren des MySQL-Protokolls für langsame Abfragen

So lösen Sie das Problem der hohen Parallelität in der MySQL-Datenbank

VUE+Express+MongoDB-Frontend- und Backend-Trennung zur Realisierung einer Notizwand

Methode zum Erkennen, ob IP und Port verbindbar sind

Vue3 setup() - Erweiterte Verwendungsbeispiele - ausführliche Erklärung