Hallo liebe Community,

dieses Tutorial ist für Einsteiger im Webdesignbereich gedacht und zeigt eine einfache Produktionsweise für Schaltflächen (Buttons) mit Glaslook.

Im ersten Schritt erstellen wir in Photoshop ein neues Dokument, ich habe hier die Photoshop-Standardmaße genommen

Wir erstellen eine neue Ebene (ich habe sie "Grundform" genannt) und schnappen uns das Formenwerkzeug (U) aus der Werkzeugleiste.

Oben erscheint eine Leiste. Wir wählen "Abgerundetes Rechteck" und geben einen Radius für die Ecken ein (hier 5):



Nun ziehen wir auf der Grundform-Ebene ein breites Rechteck auf, was bei mir so aussieht:



Wir klicken doppelt auf die Grundformebene, sodass sich das Ebenenstil-Fenster öffnet. Wir wählen links aus der Liste den Punkt Verlaufsüberlagerung an und machen einen Haken daneben. Wir klicken auf den kleinen Verlauf, der uns angezeigt wird, es öffnen sich die Verlaufseinstellungen.

Nun klicken wir auf den rechten unteren Regler und geben ihm eine dunkle Farbe (hier ein dunkles Rot), der linke untere Regler bekommt eine hellere, im gleichen Farbton (helles Rot). Der Farbmittelpunkt (kleine Raute in der Mitte der beiden Regler) wird in Richtung helle Farbe verschoben (hier 35%):



Wir klicken auf "Ok", wählen als nächstes "Schein nach innen" und geben diese Einstellungen ein:



Der Farbton sollte der der Verlaufsfarben sein. Danach sollte es ungefähr so aussehen:



Als nächstes klicken wir mit gehaltener Strg-Taste (beim Mac die Befehlstaste) auf unsere Grundformebene, um eine Auswahl in der Ebenenform zu erzeugen.

Dann wählen wir "Verkleinern" aus:



und geben 1 Pixel ein (1px). Nun müssen wir eine neue Ebene erstellen:



Wir schnappen uns das Verlaufswerkzeug wählen den Verlauf "weiß-transparent" aus und verändern ihn so:



Hinweis: Bitte den Verlauf weiß-transparent vorher auswählen oder den rechten oberen Regler auswählen und die Sichtbarkeit auf 0% setzen!

Unser Button sollte nun so aussehen:



Um dem Button noch den letzten Schliff zu verleihen, reduzieren wir die Sichtbarkeit des Verlaufs auf 75%:



und geben der Grundformebene in den Ebenenstilen noch einen "Schatten nach innen" mit folgenden Einstellungen:



Fertig ist unser einfacher Glasbutton



Bitte wie immer um Rückmeldungen

Zurück zu Design/Layout