Schaltfläche Glossy Web 2.0 in Photoshop entwerfen
Suchen Sie nach einem glänzenden Web 2.0-Button? Hier ist ein einfaches Photoshop-Tutorial, in dem Sie Schritt für Schritt erfahren, wie Sie einen gut aussehenden roten Hochglanz-Button erhalten.
Schritt 1 - Erstellen der Basis
Starten Sie eine neue Leinwand und passen Sie die folgenden Einstellungen (gelb markiert) entsprechend der Abbildung unten an. Der Rest sollte standardmäßig sein. Möglicherweise möchten Sie auch die Standardeinstellungen überprüfen.
Einen neuen Layer-Aufruf "Button" erstellen
Wählen Sie auf der Ebene "Button" das Werkzeug "Abgerundetes Rechteck" aus
Geben Sie einen Radius von 7px an
Zeichnen Sie ein Rechteck ähnlich dem Bild unten.
Schritt 2 - Rote Taste
Klicken Sie mit der rechten Maustaste auf die Fülloptionen für die Schaltfläche "Schaltfläche"
Nehmen Sie die folgenden Einstellungen für vor
Schlagschatten
Inneren Schatten
Abgeflachte Kante und Relief
Gradiant-Überlagerung
Ihr Button sollte ungefähr so aussehen
Schritt 3 - Erstellen Sie einen Glanzeffekt
Erstellen Sie einen neuen Ebenenaufruf "Glas".
Wählen Sie das Rechteck-Auswahlwerkzeug aus, und stellen Sie sicher, dass Sie die Ebene "Button" auswählen. Halten Sie die Strg-Taste gedrückt und klicken Sie auf die Schaltfläche Layer”s Ebenen-Miniaturansicht. Ihre Schaltfläche sollte jetzt hervorgehoben sein.
Wählen Sie jetzt die Schaltfläche "Glas" und halten Sie die Alt-Taste gedrückt, während das Auswahlwerkzeug "Retangular" ausgewählt ist. Zeichnen (schneiden) Sie wie in der Abbildung unten über die untere Hälfte der Schaltfläche.
Füllen Sie den ausgewählten Bereich mit der Farbe Weiß mit dem Paint Bucket Tool
Passen Sie die Deckkraft auf 18% an.
Sie sollten einen glänzenden Knopf haben, der so aussieht.
Schritt 4 - Musterüberlagerung
Lassen Sie den Button etwas Muster überlagern. Ich werde den zuvor erstellten benutzerdefinierten Stripe5px verwenden. Erstellen Sie einen neuen Ebenenaufruf 'Pattern' zwischen 'Button' und 'Glass' und fahren Sie mit den Mischoptionen fort.
Wählen Sie Pattern Overlay, wählen Sie Stripe5px (oder ein von Ihnen erstelltes Muster) und klicken Sie auf OK. Schließen Sie dann den Dialog.
Stellen Sie sicher, dass Sie sich immer noch auf dem Rechteck-Auswahlwerkzeug befinden, halten Sie gedrückt
Schritt 5 - Einfügen von Text
Geben Sie mit den folgenden Einstellungen einen zufälligen Text in weißer #ffffff-Farbe ein
Verwenden Sie die folgenden Mischeffekte für die Ebene meines Texts.
Schlagschatten
Schritt 6 - Endgültige Ausgabe
Sie sollten ein Bild wie dieses erhalten.
