Photoshop

Erstellen eines Buttons im Web 2.0 Look

Web 2.0 ist cool. Nicht nur, dass viele Nutzer wieder ihre Inhalte ins Netz stellen, sondern auch die Tatsache, dass dabei viele auf gutes Design Wert legen, machen Web 2.0 zu einer im wahrsten Sinne schönen Entwicklung.

Was liegt also näher, als auch im eigenen Newsletter auf den typischen Web 2.0 Look zu setzen. Wir zeigen wie man ganz leicht einen Button mit Adobe Photoshop realisiert. Auf geht's ...


Vorbereitung

Zu Beginn legen wir eine neue Datei mit einer Größe von 400 x 200 Pixeln und einem weißen Hintergrund an. Die Vordergrundfarbe stellen wir auf die gewünschte Farbe des Buttons, die Hintergrundfarbe auf Weiß.

Die Grundform

Zunächst erstellen wir die Grundform unseres Buttons als Formebene mit dem Abgerundetes-Rechteck-Werkzeug. Den Radius legen wir bei 10 Pixeln, die Größe bei 340 x 80 Pixeln fest. Die Ebene nennen wir entsprechend "Grundform".

Web 2.0 Button

Der Glow-Effekt

Dann fügen wir über die Ebeneneffekte zunächst einen Schein nach innen hinzu. Die Füllmethode sollte Umgekehrt multiplizieren und die Farbe ein reines Weiß sein. Als Größe setzen wir 20 Pixel. Durch Ändern der Deckkraft oder anderer Parameter kann man noch etwas mit diesem Effekt spielen. Alternativ gibt beispielsweise die Füllmethode Überlagern ein gutes Ergebnis.

Web 2.0 Button

Dann folgt eine Kontur mit 3 Pixeln Stärke und der Position Außen. Als Füllmethode stellen wir Normal und als Farbe die Vordergrundfarbe ein.

Web 2.0 Button

Der eigentliche Glanz

Für den Glanz benötigen wir nun noch einen weiteren Effekt. Zunächst legen wir eine neue Ebene an (Tastenkombination Umschalt+Strg+N), die über unserer Grundform liegt, und nennen sie "Glanz".

Wir tauschen Vordergrund- und Hintergrundfarbe (Tastenkürzel X). Auf dieser Ebene zeichen wir mit dem Verlaufswerkzeug einen Verlauf nach Transparent vom oberen Rand der Arbeitsfläche bis in die untere Hälfte der Grundform.

Web 2.0 Button

Um den Verlauf auf die richtige Größe zu stutzen und so unseren Glanzeffekt zu erreichen, benutzen wir erneut das Abgerundetes-Rechteck-Werkzeug. Dieses Mal stellen wir den Radius auf 15 Pixel und die Größe auf 330 x 40 Pixel und positionieren das Rechteck mittig in der oberen Hälfte der Grundform. Die neue Ebene nennen wir "Wölbung".

Web 2.0 Button

Danach folgen mehrere kleine Schritte:

  • Strg + Mausklick auf die neu erstellte Ebene "Wölbung" in der Ebenenübersicht. Dadurch wird eine Ebenenauswahl erzeugt.
  • Ebene "Glanz" in der Ebenenübersicht auswählen.
  • Auswahl umkehren (Tastenkombination Umschalt+Strg+I).
  • Auswahl löschen (Tastenkürzel Entf).

Dies ist der eigentliche Trick. Die Ebene "Glanz" sollte nun nur noch aus der Form des abgerundeten Rechteckes bestehen. Die Ebene "Wölbung" hat damit ihre Aufgabe erst einmal erledigt und kann ausgeblendet werden.

Et voilà! Das Ergebnis sollte so aussehen:

Web 2.0 Button

Nun können wir noch eine Beschriftung über eine Textebene hinzufügen.

Web 2.0 Button

Viel Spaß und vor allem Erfolg mit einem schöneren Newsletter.