Photoshop Tutorial - Reflected Button / Header | Rich Internet Application Solutions

RIATMP1167-Photoshop Tutorial - Reflected Knopf / Header

8. Oktober 2009

Heute werden wir auf eine Menüleiste zu machen. Dies ist sehr einfach, aber Sie können diese gleiche Taste oder Menüleiste oder Header für viele verschiedene Arten von Website zu verwenden. Wegen seiner Farbe und Stil kann es für viele Themen passen. Auch Sie können die Farben ändern und Ihre eigenen Custom-Look oder gehen Sie einfach weiter und kann diese vorgefertigten Button für Ihre Projekte nutzen. So, hier ist das Tutorial.

Erstellen Sie ein neues Photoshop-Dokument. Wählen Sie das Auswahlrechteck und schaffen ein breites Rechteck. Es ist egal, welche Farbe es, weil wir Ebenenstile werde hinzuzufügen.

Breites Rechteck

Jetzt auf Layer / Ebenenstile / Verlaufsüberlagerung gehen. Als Referenz folgen Sie bitte dem Bild gezeigt unten.

Verlaufsüberlagerung

Also mit Ebenenstil erhalten Sie Ergebnis wie folgt aus.

Menüleiste

Jetzt wird es Zeit, etwas Dramatik in unserer Menüleiste hinzuzufügen. Erstellen Sie eine neue Ebene und nennen es dunkel. Wählen Sie nun einen Teil unserer Menüleiste und füllen Sie ihn mit einer beliebigen Farbe. Jetzt werden wir wieder hinzuzufügen Verlaufsüberlagerung in dieser Schicht. Also auf Layer / Ebenenstile / Verlaufsüberlagerung gehen. Als Referenz folgen Sie bitte dem Bild gezeigt unten.

Ebenenstile / Verlaufsüberlagerung

Also mit Ebenenstil erhalten Sie Ergebnis wie folgt aus.

Kopfzeile

Wir brauchen Trennlinien zu schaffen. Dafür eine neue Ebene erstellen und mit Auswahlrechteck erstellen Sie eine dünne Linie Rechteck. Füllen Sie diese mit Farbe (# 616161). Kopieren Sie nun diese Ebene und füllen Sie mit, dass hellere Farbe (# 999999). Richten Sie jetzt und legen Sie beide Linien nebeneinander und mischen Sie die zwei Schichten in einem. Machen Sie einige weitere Kopie dieser Linie, und richten Sie richtig. Merge alle Zeilen in einer Schicht Namen "Line".

Linien

Nun ist es Zeit zu fügen unserem Menü Text, können Sie auch Ihr eigenes Menü Text.

Menütext

Dies ist der zweite Teil dieser Photoshop-Tutorial, hier werden wir schaffen eine Reflexion der Menüleiste. Merge Alle Menü-und Text-Ebenen in einer einzigen Schicht. Duplizieren Sie die Menüleiste Schicht von der Ebenen-Palette, und drehen Sie sie vertikal (Bearbeiten> Transformieren> Vertikal spiegeln).

Photoshop Tutorial

Erstellen Sie eine neue Ebene über der Menüleiste und das Duplikat. Treffen Sie eine Auswahl mit dem Auswahlrechteck. Wählen Sie das Verlauf-Werkzeug, setzen Sie ihn auf der linearen Gradienten und öffnen Sie dann die Gradienten-Editor. Wählen Sie "Vordergrund-Transparent". Stellen Sie die Vordergrundfarbe auf (# 2a2727) und ziehen Sie das Verlauf-Werkzeug innerhalb der Auswahl auf der neuen Ebene. Und sollten Sie etwas haben, wie unten dargestellt! Und das bringt uns zum Ende dieses Photoshop-Tutorial. Cheers!