In diesem Tutorial erkläre ich euch, wie ihr mit Adobe Photoshop ganz einfach einen Button wie diesen hier erstellen könnt:



Natürlich lässt sich der Effekt auch mit anderen Bildbearbeitungsprogrammen erstellen und auf Banner oder andere Formen anwenden, wenn ihr ihn einmal verstanden habt.

Als erstes öffnen wir mit "Strg+N" eine neue Datei, die 88px breit und 31px hoch ist.

Dann nehmt ihr das Auswahlrechteck und wählt die untere Hälfte des Buttons aus:



Nun nehmt das Verlaufswerkzeug und legt einen dunklen Verlauf fest. Wichtig ist dabei, dass die beiden Farben vom selben Farbton sind und sich nur in der Helligkeit unterscheiden. In diesem Beispiel nehmen wir einen Blauton #0d6768 und #379094:



Nun füllt den markierten Bereich mit dem Verlauf so, dass die dunklere Farbe oben ist. Als nächstes markiert ihr dann mit dem Auswahlrechteck den oberen Teil des Buttons:



Wählt wieder das Verlaufswerkzeug und legt diesmal einen helleren Verlauf fest. Achtet aber auch hier darauf, dass der Farbton der gleiche ist! Hier nehmen wir die Farben #5eafb2 und #8bc3c4:



Dann füllt ihr erneut den markierten Bereich mit dem Verlauf. Diesmal muss die dunklere Farbe allerdings unten sein.

Der Effekt ist nun schon sichtbar, aber nach einem Button schaut es noch nicht so recht aus. Also kriegt er noch einen Rahmen.

Nehmt wieder das Auswahlrechteck und markiert mit "Strg+A" den gesamten Button. Erstellt nun eine neue Ebene und geht auf "Bearbeiten -> Kontur füllen...":



Wie auf dem Bild wählt ihr als Breite 2px und als Farbe #ffffff (weiß) aus. Achtet darauf, dass bei Position "innen" gewählt ist und geht dann auf OK.

Nun setzt ihr die Ebeneneigenschaften der neuen Ebene auf "Weiches Licht":



Bei Bedarf könnt ihr noch einen weiteren 1px-breiten Rahmen mit einer dunkleren Farbe um den Button setzen und schon ist euer Button fertig:



Ich hoffe das war soweit verständlich!