This page has been robot translated, sorry for typos if any. Original content here.

Erstellen Sie eine Schaltfläche im Stil von Web 2.0 in PhotoShop

In dieser Lektion zeige ich Ihnen, wie Sie einen einfachen, aber schönen Download-Button im modernen und allseits beliebten Web 2.0-Stil erstellen können. Download - als Beispiel können Sie diese Methode für alles verwenden, auch für das Menü auf der Website. Also, auf den Punkt.

1. Erstellen Sie ein neues Dokument oder öffnen Sie ein Layout-Design für die Webseite, wenn Sie ein Menü für diese Schaltflächen erstellen möchten. Ich habe ein Dokument von 400x110px Größe erstellt, nur für die Schaltfläche.

2. Nimm als nächstes das Abgerundete Rechteck-Werkzeug (U) , um die Knopfform zu erstellen.

Erstellen Sie eine Schaltfläche im Stil von Web 2.0 in PhotoShop

Legen Sie in den Einstellungen den Radius fest, um die Ecken von 10-15 px zu glätten. Sie können je nach Größe der Schaltfläche andere Werte auswählen.

Erstellen Sie eine Schaltfläche im Stil von Web 2.0 in PhotoShop

Jetzt erstellen Sie ein Formular auf der Leinwand, die Farbe der Form ist jetzt egal.

Erstellen Sie eine Schaltfläche im Stil von Web 2.0 in PhotoShop

3. Legen Sie nun die Ebenenstile für unsere Form fest. Gehe zu den Eigenschaften von Fülloptionen (Doppelklicke auf die Ebene neben dem Namen in der Ebenenpalette oder über das Menü Ebene> Ebenenstil > Fülloptionen ) und setze die Werte wie in den Screenshots gezeigt:

Innerer Schatten:
Erstellen Sie eine Schaltfläche im Stil von Web 2.0 in PhotoShop

Verlaufsüberlagerung:
Erstellen Sie eine Schaltfläche im Stil von Web 2.0 in PhotoShop

Sie können die gewünschte Farbe verwenden, aber die Schaltfläche sollte wie ein 3D aussehen:

Erstellen Sie eine Schaltfläche im Stil von Web 2.0 in PhotoShop

4. Jetzt ist es an der Zeit, unserem zukünftigen Button einen schönen Hochglanzeffekt hinzuzufügen. Erstellen Sie eine Auswahl in Form unserer Schaltfläche, indem Sie die Strg-Taste gedrückt halten, indem Sie auf das Ebenen-Symbol in der Ebenen-Palette klicken. Als nächstes reduzieren Sie es von allen Seiten um etwa 5 Pixel . Gehen Sie dazu auf Auswählen> Ändern> Vertrag und geben Sie im angezeigten Fenster 5 ein . So sollte es aussehen:

Erstellen Sie eine Schaltfläche im Stil von Web 2.0 in PhotoShop

Erstellen Sie nun eine neue Ebene und füllen Sie unsere Auswahl an Farbverläufen von Weiß bis Transparent von oben nach unten. So:

Erstellen Sie eine Schaltfläche im Stil von Web 2.0 in PhotoShop

Als nächstes müssen wir eine Kurve mit dem Stift-Werkzeug machen, eine Kurve direkt über die Auswahl machen, indem wir den unteren Teil des weißen Farbverlaufs des Knopfes darin einschließen und ihn löschen. Folgendes habe ich:

Erstellen Sie eine Schaltfläche im Stil von Web 2.0 in PhotoShop

Ich habe auch eine große weiche Bürste verwendet, um einige der Kanten zu entfernen (weich machend), so dass sie viel besser aussehen.

5. Fügen Sie nun den Text zu unserer Schaltfläche hinzu. Wir nehmen das horizontale Werkzeug (T) und schreiben den gewünschten Text.

Erstellen Sie eine Schaltfläche im Stil von Web 2.0 in PhotoShop

Für den oberen Text verwendete ich die Schriftart Black Italic, 24 pt, Sharp, #fff , für den unteren Teil - Semibold Italic, 12 pt, Sharp, #fff und fügte einen Schatten in den Fülloptionen ein:

Schlagschatten:
Erstellen Sie eine Schaltfläche im Stil von Web 2.0 in PhotoShop

So sieht es aus:

Erstellen Sie eine Schaltfläche im Stil von Web 2.0 in PhotoShop

Abschließend fügte ich eine Reflexion und eine Ausrüstung für die Schönheit hinzu. Wenn Sie möchten, können Sie es hier herunterladen

Erstellen Sie eine Schaltfläche im Stil von Web 2.0 in PhotoShop

Und die rote Version :)

Erstellen Sie eine Schaltfläche im Stil von Web 2.0 in PhotoShop