Glänzende Button-Grafik in Photoshop erstellen

Adobe Photoshop ist ein mächtiges Programm mit vielen Funktionen. Roter Button mit Spiegelung und Glanz-EffektDadurch lassen sich schnell und einfach Designs für z.B. Buttons oder Links entwerfen. Das folgende Tutorial zeigt, wie man ein Button-Design (siehe rechts) mit 3D- und Glanzeffekt erstellt.

Neue Datei anlegen

Nachdem Photoshop geöffnet wurde, wird oben in der Menüleiste unter “Datei” ein neues Grafikdokument durch “Neu” angelegt.Einstellungsfenster für Dateierstellung Im daraufhin sich öffnenden Fenster werden unter anderem Höhe und Breite für das Bild eingestellt. In diesem Beispiel wird eine Breite von 200px und eine Höhe von 50px gewählt. Alle anderen Einstellungen können auf den Standards belassen werden.

Hinweis: Sollte das Fenster “Ebenen” in Ihren Photoshop-Management nicht angezeigt werden, so aktivieren Sie dieses unter “Fenster” -> “Ebenen” (Beispiel links) oder drücken Sie F7.

Button-Ebene

Nun wird eine neue Ebene angelegtPS-Screenshot zum anlegen einer Ebene (Strg + Umschalt + “N” oder siehe Bild rechts) auf welcher die Grundform des Buttons abgebildet wird.

PS-Screenshot zur WerkzeugauswahlEs wird das “Abgerundete-Rechteck-Werkzeug” ausgewählt (Taste “U”), ein Radius für die Ecken festgelegt und eine primäre Farbe aus der Farbpalette generiert (siehe Screenshot links). Aus dieser Farbe wird die Grafik später grundsätzlich bestehen. Der Radius der Ecken sollte nicht zu groß sein, denn ich habe festgestellt, dass große Radien den Button später sehr kindlich wirken lassen können.

Nachdem alle Konfigurationen getroffen wurden, Screenshit bei der erstellung eines abgerundeten Rechteckskann durch Halten der linken Maustaste ein abgerundetes Rechteck auf die neue Ebene gezogen werden (siehe Abbildung rechts). Es sollte nicht über die Bildmaße hinauswachsen und möglichst einen Pixel Abstand zu jeder Seite haben, das sieht zum Schluss am besten aus.

Glänzender Button

Um dem Button einen Glanz, ähnlich den Icons von iPhone-Apps, zu verleihen, muss zunächst die Fläche der zukünftigen Schaltfläche ausgewählt werden. Dies geht am einfachsten, indem man Steuerung (Strg) gedrückt hält und mit der linken Maustaste in das Vorschaubild der neu erstellten Ebene klickt (siehe Screenshot rechts).

Für den Glanz wird erneut eine Ebene erzeugt, der Übersichtlichkeit und Pflege halber.

Ellipse erzeugen mit PhotoshopFolgend wird das “Ellipse-Werkzeug” ausgewählt und die primäre Farbe auf weiß gesetzt. Es wird eine Flache Ellipse im oberen Teil des Buttons gezogen (siehe Abbildung links), wobei durch die zuvor erstellte Auswahl nur der Teil der Ellipse weiß gefärbt wird, der sich innerhalb dieser Auswahl befindet.

Photoshop lässt eine Ebene transparent werdenDa es dem Glanz noch an Realistik mangelt, wird die “Deckkraft” seiner Ebene auf etwa 20% gestellt, um dem Glanz eine Transparenz zu verleihen und damit die Farbe des Buttons durchscheinen zu lassen.

Fülloptionen einer Ebene in Photoshop öffnen3D-Effekt

Im letzten Schritt wird dem Button ein 3D-Effekt durch abgerundete Kanten verliehen. Hierzu werden die Fülloptionen der “Ebene 1″ durch Rechtsklick -> “Fülloptionen” geöffnet (siehe Screenshot links).

Das Register “Abgeflachte Kanten und Relief” wird ausgewählt und ein Haken davor gesetzt. Fülloptionenbereich in PhtotoshopIm folgenden Einstellungsfenster werden vorallem “Tiefe” und “Größe” der Kanten und des Relief für den Button konfiguriert. Für diesen Beispielbutton sieht eine Tiefe von 25% und Größe von 18px recht gut aus, wie ich finde. Weitere Einstellungen können aus dem Screenshot rechts übernommen, oder selbst ausgesucht werden.

Fertigstellung und Speicherung

Fertiger utton in PhotoshopDie Fülloptionen werden mit OK bestätigt, die Auswahl des Buttons durch Strg + “D” entfernt und das Dokument in einem beliebigen Bildformat abgespeichert (für Web wird PNG empfohlen). Viel Spaß noch mit den hunderten Möglichkeiten für einen kreativen Button!

Dieser Artikel wurde vertaggt mit , , , , , , .
Kategorien: Grafik und Foto, Tutorial, Webdesign

Hat Ihnen dieser Artikel gefallen? - Dann abonnieren Sie vlblog um über neue Themen rund ums Web informiert zu werden.

Hinterlasse eine Antwort