Realistische Hintergrund und Text aus Edelstahl entwerfen [Photoshop Tutorial]

Webdesigner und Webmaster liebten kühle Stahl- oder Metallic-Effekte vor der Web 2.0 Stürme herein und wuschen alles weg; etwas verlassen WWW mit glänzenden, missbräuchlichen Farbverläufen. Apple.com hat schon immer mit einem guten Web 2.0-Interface-Design zu tun, aber diese Jungs haben weder die coolen Schwarz-Silber-Effekte verloren, noch können sie es in ihren Designs und ihrer Typografie verbessern.

Inspiriert von ihren Entwürfen versuche ich, diese Stile wieder in mein persönliches Design zu integrieren und dadurch etwas solides zu schaffen, das ein bisschen wie ein Stück Edelstahlmetall aussieht. Vollständiges Photoshop-Tutorial nach dem Sprung.

Edelstahl Hintergrund

Schritt 1

Erstellen Sie ein leeres neues Dokument mit einer Größe von 600 × 400. Erstellen Sie eine neue Ebene, benennen Sie sie 'Hintergrund' und füllen Sie es mit grauer Farbe [# c0c0c0]. Duplikat 'Hintergrund' Ebene, benenne die neue Ebene 'Stahl Hintergrund'und platziere es auf'Hintergrund'.

Schritt 2

Übernehmen, wenn 'Stahlhintergrund' ausgewählt ist Filter -> Rauschen hinzufügen und geben Sie die folgenden Einstellungen ein:

• Betrag: 14,21
• Verteilung: Gaussian
• Monochromatisch geprüft

Schritt 3

Mit 'Stahl Hintergrund'Layer noch ausgewählt, los Filter -> Verwischen -> Bewegungsunschärfe und geben Sie die folgenden Einstellungen ein:

• Engel: 0
• Abstand: 34 Pixel

Rechtsklick 'Stahl Hintergrund', wählen Fülloptionen und geben Sie die folgenden Einstellungen für ein Verlaufsüberlagerung - Verlaufseditor:

Farbstopp 1

• Farbe: # 000000
• Deckkraft: 50%
• Standort: 0%

Farbstopp 2

• Farbe: #ffffff
• Lage: 50%

Farbstopp 3

• Farbe: # 000000
• Deckkraft: 50%
• Standort: 0%

Metalltext

Schritt 4

Ihr Edelstahl-Hintergrund ist im Wesentlichen fertig. Wir fügen dann einen Metalltext ein, der passend aussehen sollte. Verwenden Sie die Textwerkzeug, Schreibe etwas in die Mitte, vorzugsweise mit think-fat-Schrift (ich benutze Myriad Pro Bold hier). Klicken Sie mit der rechten Maustaste (oder doppelklicken Sie) auf die Textebene, um das Symbol zu starten Fülloptionen Dialog.

1. Schlagschatten

• Deckkraft: 38%
• Abstand: 1px
• Spread: 1%
• Größe: 2px

• Tiefe: 100%
• Größe: 0px
• Erweichen: 0px
• Deckkraft hervorheben: 42%
• Schattendeckkraft: 32%

Ihr Text sollte ungefähr so ​​aussehen wie unten.

Schritt 5

Hier ist etwas, was Sie unbedingt beachten müssen. Halten Sie die Strg-Taste gedrückt (Mac: Befehlstaste) und klicken Sie mit der linken Maustaste auf die Textebene, um die Umrisse hervorzuheben. Stellen Sie sicher, dass der Umriss noch vorhanden ist, wählen Sie 'Stahl HintergrundSchicht und drücke Strg + J (Mac: Befehlstaste + J)

Auf diese Weise duplizieren Sie den Stahlhintergrund in der Form Ihres Textes. Benennen Sie die Ebene um in 'Texthintergrund'und verschieben Sie es nach oben.

Schritt 6

Veränderung 'Texthintergrund'zu Farbe brennen, Bring es Opazität bis zu 67%.

Ihre endgültige Ausgabe sollte in etwa der Abbildung unten entsprechen.

Laden Sie die .PSD-Datei herunter.