7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Interface Design

Praktische Web 2.0-Symbole in Photoshop

Scroll to top
Read Time: 2 mins

German (Deutsch) translation by Andrijana Mitevska (you can also view the original English article)

Wenn wir an einem Webdesign-Projekt arbeiten, benötigen wir häufig Symbole, um Befehle wie Hinzufügen, Löschen oder Bearbeiten anzuzeigen. Mit dem Web 2.0-Trend ist der Einsatz von Badges und dezentem 3D sehr populär geworden. In diesem Tutorial zeige ich Ihnen, wie Sie einen wirklich einfachen und sehr schönen 3D-Effekt erstellen, der entweder in Schaltflächen und Symbolen oder Elementen verwendet werden kann, die eine gewisse Tiefe benötigen.

Schritt 1

Erstellen Sie ein neues Dokument und wählen Sie das Ellipsenwerkzeug (U). Es spielt keine Rolle, welche Farbe Sie verwenden, da sie später durch die Ebenenstile ersetzt wird.

Schritt 2

Doppelklicken Sie auf die Ellipsenebene, um das Dialogfeld Ebenenstil zu öffnen. Wählen Sie dann die Verlaufsüberlagerung aus und verwenden Sie ein Blau und einen helleren Blauton für die Verlaufsfarben. Verwenden Sie für den Stil Radial. Als nächstes fügen Sie eine Abschrägung und Prägung wie unten gezeigt hinzu.

Tipp: Verschieben Sie den radialen Farbverlauf weiter nach oben im Kreis. Um dies zu tun, während das Dialogfeld Ebenenstil noch geöffnet ist, stellen Sie sicher, dass Sie sich im Abschnitt Verlaufsüberlagerung befinden, klicken und halten Sie die Schaltfläche und beginnen Sie, den Verlauf zu verschieben.

Schritt 3

Duplizieren Sie die Kreisebene und ändern Sie die Größe, um sie etwas kleiner zu machen, wie im Bild unten.

Schritt 4

Doppelklicken Sie auf die neue Ebene, um das Dialogfeld Ebenenstile zu öffnen. Deaktivieren Sie alle vorherigen Effekte (Abschrägung und Prägung und Verlaufsüberlagerung). Wählen Sie nun Strich und für den Fülltyp Farbverlauf. Wählen Sie für die Farben Weiß für beide Enden des Verlaufs und ändern Sie die Deckkraft auf 0% für den Anfang und 100% für das Ende.

Schritt 5

Wählen Sie das horizontale Textwerkzeug (T) und erstellen Sie eine Textebene. Stellen Sie sicher, dass diese Schicht oben ist. Öffnen Sie nun das Feld Ebenenstile und ändern Sie die Farbüberlagerung in Weiß, wählen Sie Innerer Schatten und verwenden Sie die unten gezeigten Einstellungen.

Schritt 6

Gruppieren Sie die drei Ebenen und nennen Sie sie "Blue Circle".

Schritt 7

Wählen Sie das Polygon-Werkzeug (U) und ändern Sie einige Einstellungen wie unten gezeigt, um ein Sternenabzeichen zu erstellen. Duplizieren Sie die Ebene und ändern Sie die Größe wie in Schritt 3.

Anstatt diese Ebenenstile auf die Ebene anzuwenden, kopieren Sie einfach den Stil aus dem vorherigen Symbol, das wir erstellt haben, und fügen Sie ihn in unsere neue Ebene ein. Wählen Sie dazu die Ebene aus, deren Ebenenstil Sie kopieren möchten, klicken Sie mit der rechten Maustaste (Macs: Wahltaste-Klick) und wählen Sie Ebenenstil kopieren. Wählen Sie als Nächstes die Ebene aus, der Sie den Stil hinzufügen möchten, klicken Sie erneut mit der rechten Maustaste und wählen Sie Ebenenstile einfügen.

Das einzige, was Sie ändern müssen, sind die Verlaufsfarben unter der Verlaufsüberlagerung.

Fazit

Dies ist eine der einfachsten Möglichkeiten, eine coole Schaltfläche im 3D-Stil zu erstellen. Sie können sogar einige Einstellungen wie die Verlaufsfarbe des Strichs ändern und verschiedene 3D-Stile erstellen.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.