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 diesem Tutorial werde ich zeigen, wie Sie einen einfachen, aber gleichzeitig schönen Download-Button im modernen und beliebten Stil des Web 2.0 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 Design-Layout für eine Webseite, wenn Sie ein Menü mit diesen Schaltflächen erstellen möchten. Ich habe ein 400x110px Dokument erstellt, nur für die Schaltfläche.

2. Als nächstes benutze das Abgerundete Rechteck-Werkzeug (U) , um eine Form für die Schaltfläche zu erstellen.

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

In den Einstellungen werden wir den Radius für das Glätten der Ecken von 10-15px einstellen , Sie können andere Werte wählen, abhängig von der Größe der Schaltfläche.

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 spielt keine Rolle.

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

3. Jetzt werden wir die Layer-Stile für unsere Form festlegen. Gehe zu den Fülloptionen (Doppelklick 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 eine beliebige Farbe verwenden, aber die Schaltfläche sollte wie ein Volumen 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 Select> Modify> Contract und geben Sie im erscheinenden Fenster den Wert 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 mit dem Zeichenstift-Werkzeug eine Kurve erstellen, eine Kurve direkt über der Auswahl zeichnen, den unteren Teil des weißen Farbverlaufs der Schaltfläche darin einschließen und sie löschen. Das ist mit mir passiert:

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), so dass sie viel besser aussehen.

5. Fügen Sie nun Text zu unserer Schaltfläche hinzu. Nehmen Sie das Hilfsmittel Horizontales Werkzeug (T) und schreiben Sie 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 die untere - 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