Schaltfläche Erstellen im Stil von Web 2.0 in PhotoShop

In diesem Tutorial werde ich zeigen, wie ein einfach zu machen, aber schön zugleich herunterladen-Taste in einem modernen und Liebling aller im Web 2.0-Stil. Herunterladen - als Beispiel, kann diese Methode für fast alles verwendet werden, auch das Menü auf der Website. Also, an die Arbeit.

1. Erstellen Sie ein neues Dokument oder öffnen Sie ein Design - Layout für eine Web - Seite, wenn Sie ein Menü dieser Schaltflächen erstellen möchten. Ich habe ein Dokument Größe 400h110px, nur die Taste.

2. Als nächstes nehmen Sie das Werkzeug für abgerundetes Rechteck - Werkzeug (U), die Form der Schaltfläche zu erstellen.

Schaltfläche Erstellen im Stil von Web 2.0 in PhotoShop

In den Einstellungen belichten Radius 10-15px Winkel zum Glätten, können Sie andere Werte auswählen, es hängt von der Größe der Schaltfläche.

Schaltfläche Erstellen im Stil von Web 2.0 in PhotoShop

Jetzt eine Form auf der Leinwand zu erstellen, die Farbe der Form ist nicht wichtig.

Schaltfläche Erstellen im Stil von Web 2.0 in PhotoShop

3. fragen Sie nun die Ebenenstile unser Formular aus . Gehen Sie auf die Eigenschaften der FÜLLOPTIONEN (Doppelklick auf die Schicht neben der Ebene in der Palette oder im Menü Ebene> Ebenenstil ..> FÜLLOPTIONEN ) und stellen Sie die Werte wie in den Screenshots gezeigt:

Inner Shadow:
Schaltfläche Erstellen im Stil von Web 2.0 in PhotoShop

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

Sie können jede Farbe, wie Sie wollen, aber die Lautstärke-Taste wie dies etwa aussehen sollte:

Schaltfläche Erstellen im Stil von Web 2.0 in PhotoShop

4. Nun ist es Zeit , einen schönen Glanzeffekt auf unsere Zukunft Schaltfläche hinzufügen. Erstellen Sie eine Auswahl in der Form der Taste können Sie dies tun, indem Sie Strg Klick auf das Symbol Layer in der Ebenen-Palette. reduzieren sie dann um etwa 5 Pixel auf allen Seiten. Um dies zu tun, gehen Sie zu wählen> Ändern> Verkleinern und geben Sie einen Wert von 5 in dem Fenster , das erscheint. Das ist, wie es aussehen sollte:

Schaltfläche Erstellen im Stil von Web 2.0 in PhotoShop

Jetzt eine neue Ebene zu erstellen und unser Selektionsgradienten von weiß bis transparent von oben nach unten zu füllen. So:

Schaltfläche Erstellen im Stil von Web 2.0 in PhotoShop

Als nächstes müssen wir es durch die Unterzeichnung sie den unteren Teil der weißen abgestufter Schaltflächen und entfernen mit in- neigten Stift-Werkzeug, machen Sie eine Kurve nach rechts über die Freigabe einer Kurve machen. Das ist, was mit mir passiert ist:

Schaltfläche Erstellen im Stil von Web 2.0 in PhotoShop

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

5. Nun Text unseren Button hinzufügen. Nehmen in- neigten horizontale Art Werkzeug (T) und schreiben Sie den gewünschten Text ein .

Schaltfläche Erstellen im Stil von Web 2.0 in PhotoShop

Nach oben von Text verwendeten I Black Italic Schriftart, 24 pt, Scharf, #fff, für die untere - Semibold, 12 pt, Scharf, #fff und ergänzt in FÜLLOPTIONEN Eigenschaften des Schattens:

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

Das ist, wie es aussieht:

Schaltfläche Erstellen im Stil von Web 2.0 in PhotoShop

Schließlich habe ich die Reflexion und Getriebe für die Schönheit. Wenn Sie möchten, können Sie es hier herunterladen hier

Schaltfläche Erstellen im Stil von Web 2.0 in PhotoShop

Und die rote Version :)

Schaltfläche Erstellen im Stil von Web 2.0 in PhotoShop