Smooth Gradient Header Photoshop Tutorial

Dieses Tutorial zeigt Ihnen ein paar einfache Techniken, um eine schöne glatte Verlauf Kopf-und Navigationsleiste, die Sie in Ihrem Web-Designs verwenden entwerfen können.

Das fertige Konstruktion sieht wie folgt aus:

Um zu beginnen, erstellen Sie eine 770px breit x 200px hohen Dokument.
Wählen Sie die abgerundetes Rechteck-Werkzeug, setzen Sie den Radius auf 10px und stellt eine Form für den Kopf:

Rechter Mausklick auf das Form, die Sie gerade gezeichnete-Schicht und wählen Sie Fülloptionen.
Klicken Sie auf "Schein nach außen" und geben Sie die folgenden Einstellungen:

Klicken Sie anschließend auf "Gradient Overlay" und geben Sie die folgenden Einstellungen:

Klicken Sie abschließend auf "Schlaganfall" und geben Sie die folgenden Einstellungen:

Ihre Kopf-Form sollte nun wie folgt aussehen:

Weiter mit den abgerundeten Rechteck-Werkzeug wieder ziehen Sie die Form Ihrer Navigationsleiste unterhalb der Kopfleiste, dann rechts auf die Kopfzeile Formen Schicht und wählen Sie "Kopie-Schicht-Stil", dann rechts auf die nav Bars Schicht und 'Einfügen Layer-Stil ". Sie sollten so aussehen:

Jetzt rechten Maustaste auf die Navigationsleiste Schicht, gehen Sie in Mischen und klicken Sie auf die Verlaufsüberlagerung.
Ändern Sie die Grau / Weiß-Verlauf für ein orange und mit diesen Werten: F0B259> F87811

Klicken Sie auf OK und Ihre Navigationsleiste sollte nun so aussehen:

Jetzt werden wir einen Text hinzuzufügen, wählen Sie die Schrift, und geben Sie den gewünschten Links in:

Für dieses Tutorial verwendeten wir univers kondensiert. Wir werden jetzt eine Schlagschatten, um den Text der rechten Maustaste auf die Ebene> Fülloptionen> Schlagschatten
Verwenden Sie die folgenden Einstellungen:

Ihr Text sollte nun so aussehen:

Wir werden nun einige Trennwände zwischen der Navigationsleiste links, eine neue Ebene erzeugen und zu vergrößern in. Mit dem Stift-Werkzeug auf 1 px, ziehen Sie zwei Zeilen in etwa so:

Rechtsklick auf die Ebene und "Duplikat", bewegen Sie diese Schicht entlang zwischen der nächsten nav Links, wiederholen Sie dies für alle Links.

Ihre nav ist nun abgeschlossen:

Alles, was jetzt notwendig ist, ist Ihre Website Name / Logo hinzugefügt werden und alles andere, wie zusätzliche Header Links oder Banner-Anzeigen usw.:

Laden Sie die. Psd hier