Der Umgang mit Details ist beim Webdesign sehr wichtig. Ich persönlich beobachte die Websites von Gringo oft und finde, dass hervorragende Website-Designs sehr durchdacht im Umgang mit Details sind. Die Tipps, die ich Ihnen heute gebe, sind sehr einfach, können aber die Details der gesamten Website erheblich verbessern. Daher denke ich, dass diese Tipps auch hilfreich sind, um das Design Ihrer Website zu verbessern.
Und Sie werden feststellen, dass sich diese Techniken alle um ein Wort drehen, nämlich „Pixelation“, was einfach einige kleine Linien von 1 Pixel und 2 Pixel bedeutet. Okay, los geht's.
1. Pixel-Trennlinie Die erste Einführung ist die Trennlinie. Bitte sehen Sie sich die Navigationsleiste in der folgenden Abbildung an.
Achten Sie auf die Linien im roten Kreis im Bild und auf die Trennlinien zwischen den Schaltflächen. Diese Linien wirken vertieft und erzeugen ein gutes Trennliniengefühl. Als nächstes werde ich dieses Bild vergrößern und einen Blick auf das Prinzip werfen.
Wir können sehen, dass diese Trennlinien aus zwei benachbarten geraden 1-Pixel-Linien bestehen und eine Farbe dunkler und die andere heller als die Hintergrundfarbe ist. Schauen Sie sich als Nächstes die Methode an:
Wählen Sie das Bleistiftwerkzeug aus (wählen Sie nicht versehentlich den Pinsel) und stellen Sie die Größe auf 1 Pixel ein
Wählen Sie eine Farbe aus, die dunkler als die Hintergrundfarbe ist, z. B. Dunkelblau im Bild, halten Sie die Umschalttaste gedrückt und zeichnen Sie eine gerade Linie
Wählen Sie eine hellere Farbe und zeichnen Sie eine weitere gerade Linie. OK
PS: Während des Strichzeichnungsprozesses können Sie die Leinwand (Z) zur Beobachtung vergrößern.
Wie wäre es damit? Der Effekt ist viel besser als ein einzelner Farbteiler, oder? Schauen wir uns einige weitere Beispiele für die Verwendung dieser Teilertechnik an:
2. Pixelkante
Schauen wir uns zunächst ein Originalbild ohne „Pixelkanten“ an:
Als nächstes wird Folgendes hinzugefügt:
