Fading Site Dividers erstellen

Möglicherweise haben Sie diese verblassenden Teiler / Trennzeichen an verschiedenen Standorten gesehen, die horizontal und vertikal zu verblassen scheinen. Hier ist ein Beispiel von dem, was ich meine:

Sie bieten eine großartige Möglichkeit, Inhalte auf subtile und nicht aufdringliche Weise aufzuteilen. Ich möchte eine einfache Möglichkeit zum Erstellen dieser ausblendenden Trennwände mit Photoshop bereitstellen.

Schritt 1

Erstellen Sie zuerst eine neue Ebene. Zeichnen Sie mit dem Bleistift-Werkzeug eine durchgehende horizontale Linie von 1 Pixel. Halten Sie beim Klicken die UMSCHALTTASTE gedrückt, und ziehen Sie die Linie, um sie gerade zu halten. Dies ist die Basis für den gesamten Fade-Effekt.

Schritt 2

Wählen Sie das Radiergummi-Werkzeug aus. Wählen Sie eine sehr weiche Bürsteneinstellung. Je größer die Pinselgröße, desto länger ist das Fade (Sie können experimentieren, um die Größe zu finden, die für Ihre Bedürfnisse am besten geeignet ist).

Schritt 3

Löschen Sie das linke und das rechte Ende der Zeile. Dadurch wird die Linie in der Nähe der Enden ausgeblendet.

Schritt 4

Duplizieren Sie die Ebene, die die Linie enthält (klicken Sie mit der rechten Maustaste auf die Ebene im rechten Bedienfeld und wählen Sie dann "Duplizieren"). Wählen Sie die untere der beiden Ebenen.

Schritt 5

Filter auswählen> Unschärfe> Gaußsche Unschärfe. Wählen Sie einen Radius von 3px, um den Überblendeffekt zu erzeugen (oder wählen Sie einen für Sie passenden!).

Schritt 6

Verwenden Sie das Auswahlwerkzeug, um alles auf oder über der durchgezogenen Linie auszuwählen (wobei die unscharfe Ebene ausgewählt ist). Drücken Sie die Löschtaste.

Schritt 7

Passen Sie die Deckkraft der durchgezogenen Linie und / oder des Schattens Ihren Wünschen an. So sieht es am Ende aus.

Als letzte Anmerkung: Wenn Sie eine größere Schattierung wünschen (wie im Beispiel oben auf der Seite gezeigt), können Sie dies erreichen, indem Sie die unscharfe Ebene mehrmals (direkt nach dem Anwenden der Gaußschen Unschärfe) duplizieren, bis Sie dies tun sind mit dem Ausmaß und der Intensität der Unschärfe zufrieden (und verschmelzen dann die unscharfen Schichten).

Mit dieser Technik können Sie sowohl horizontale als auch vertikale Teiler erstellen. Und mit ein bisschen Basteln ist es nicht allzu schwer, mit so etwas zu kommen:

Also machen Sie weiter und würzen Ihre Grenzen, Trennlinien und Kanten! Wenn Sie andere Websites kennen, die diese Technik verwenden (oder Ihre eigene Website teilen möchten), teilen Sie uns dies bitte in den Kommentaren mit. Sie wissen nie, wenn wir Ihr Design mögen, kann es auf der Website erscheinen!