In diesem Tutorial werden wir die Erstellung von Web Button. Das ist sehr einfach und sehr effektiv Tutorial, so dass alles, was Sie brauchen, ist Adobe Photoshop, um diesen Effekt zu schaffen. Ich hoffe, Sie werden dieses Tutorial zu genießen.

Erstellen von Web-Button in Photoshop

Schritt # 1

Öffnen Sie Photoshop und ein neues Dokument erstellen, ist mein 550px × 125px mit einem weißen Hintergrund.

Schritt # 2

Füllen Sie die Farbe im Hintergrund Schicht, ist mein color # 3A3A3A.

Schritt 3

Wählen Sie das Werkzeug für abgerundetes Rechteck, und erstellen Sie Taste, ist mein Radius 7px, Breite: 156px und height: 38px..

Schritt # 4

Jetzt werden wir für eine gewisse Wirkung

Verlaufsüberlagerung

Styling the Button Doppelklicken Sie auf das Vorschaubild der Button-Ebene in der Ebenen-Panel zu öffnen, die Ebenenstile Dialogfeld, werden wir für ein Vertical Gradient-Effekt für den Button aus. Dann klicken Sie auf den Farbverlauf auf der rechten Seite der Gradient Option zur Öffnung der Farbverlauf-Editor.

Doppelklicken Sie auf left-color-stop und geben Sie den Farbwert # 9E4C45, dann klicken Sie doppelt auf right-color-stop und geben Sie den Farbwert # EA8484.

Schlagschatten

Weiter gelten die Schlagschatten Ebenenstil. Halten Sie den Winkel von 120o, als die Werte für Deckkraft, Entfernung und Größe. Ich wähle, um die Deckkraft auf 23%, Entfernung und Größe auf 1px auf 9px gesetzt.

Schritt # 5

Wählen Sie "Horizontal Type Tool und Typ Text auf der Vorderseite.

Wir werden für eine gewisse Wirkung für Text.

Farbüberlagerung

Doppelklicken Sie auf das Vorschaubild der Textebene in der Ebenen-Panel zu öffnen, die Ebenenstile Dialogfeld. Zuerst werden wir Farbüberlagerung gelten, wähle ich die Farbe # 0D0D0E

Schlagschatten

Schließlich werden wir den Schlagschatten anwenden, ändern Sie zuerst die Blending Option auf Normal. Ändern Sie die Farbe aus dem Schatten standardmäßig # FFFFFF. Halten Sie den Winkel von 120o, als die Werte für Deckkraft, Entfernung und Größe. Ich wähle, um die Deckkraft auf 32% und bei 1px Entfernung und Größe auf 1px gesetzt.

Final Vorschau

Lassen Sie uns wissen, dass dieses Tutorial kann mehr besser? Wenn Sie andere Photoshop-Tutorial, das Sie mit uns zu teilen, finden Sie uns wissen zu lassen, durch Fallenlassen in einem Kommentar.

Wenn Sie möchten mehr Inspiration von uns erhalten, prüfen Sie bitte abonnieren Sie unseren Feed von RSS-oder E-Mail.

Abgelegt unter: Freebies, Photoshop, Tutorials von admin