Buttondesign - Web 2.0

von Fabian Ziegler | 2 | 14392 Aufrufe

Anzeige Hier werben

Immer häufiger finden sich im Web kleine Buttons die Banner, Webseitenheader oder sogar Inhalte schmücken und hervorheben sollen. Doch diese Buttons lassen sich nicht nur gute auf den vielen aufblühenden Web 2.0 Angeboten verwenden, sondern können mit etwas schlichteren Farben auch gut für Drucksachen verwenden werden, um Teile hervorzuheben oder auszuzeichnen. In diesem kleinen Workshop werden wir so einen einfachen Button mit Photoshop erstellen.

1. Ebene vorbereiten

Wir erstellen uns eine neue 300*300 Pixel große Ebene. Diese bezeichnen wir "Button".
Wir suchen uns eine gute Farbe für den Hintergrund unserer Buttons und stellen diesen
als Vordergrundfarbe ein (#DEE60E) und als Hintergrund Weiss (#FFFFFF)

Bild zu Buttondesign - Web 2.0

2. Stern zeichnen

Mit dem in Photoshop integrierten Pfadwerkzeug (Taste u) rufen wir das Polygonwerkzeug auf.
Im Polygonwerkzeug haben wir eine Hand voll von weiterführenden Einstellungen. Dort stellen wir
unseren Füllmodus auf "Pixel füllen". So wird unsere Form direkt als Pixelpixel auf die Ebene
gerastert und kein Pfad erstellt.

In dem kleinen Aufklappmenu des Polygonwerkzeugs, aktivieren wir den Punkt "Stern" und stellen wir
die Anzahl der gewünschten Ecken (15 Stk.) ein und wie spitz die Seiten seinen sollen, wie weit
die diese also nach Innen eingezogen werden sollen(15%).

Dann ziehen wir uns auf unserer Bühne mit der Maus auf der Button-Ebene die Form auf.

Bild zu Buttondesign - Web 2.0

3. Verlaufsüberlagerung

In der Ebenenpalette rufen wir in unserer Ebenenpalette den Ebenenstil "Verlaufsüberlagerung"
auf, wo wir für die Deckkraft einen Wert von "70%" setzen und den Winkel auf 65° setzen.
Um einen guten Farbverlauf einzustellen, klicken wir in den Einstellungen der "Verlaufsüberlagerung"
noch auf "Verlauf", wo wir den Verlauf oben links auswählen. Beim diesem sollte ganz Links der
Farbwert #DEE60E und ganz Rechts #FFFFFF gesetzt sein. Die Deckkraft sollten dabei stets 100% sein,
also komplett Schwarz. Mit einem "Ok" besätigen wir unsere Verlaufseinstellungen, bleiben aber
in den Ebeneneffekten.

Bild zu Buttondesign - Web 2.0
Bild zu Buttondesign - Web 2.0
Bild zu Buttondesign - Web 2.0

4. Schlagschatten

Um unseren Button plastischer zu gestalten, fügen wir einen sanften Schlagschatten hinzu.
Diesen finden wir in den Ebeneneffekten unter "Schlagschatten".

Bild zu Buttondesign - Web 2.0

5. Abgeflachte Kanten und Relief

Dies finden Sie ebenfalls unter den Ebenstilen. Diesen Stil stellen wir wie auf dem Screenshot
ein und wechseln dann in die Kontureinstellungen, ganz unten im Menu.

Bild zu Buttondesign - Web 2.0

6. Kontur

Um unsere Button vom Hintergrund etwas mehr abzuheben, verpassen wir ihn mit einer Kontur.
Als Konturfarbe wählen wir Grau (#9E9E9E) und stellen die Größe auf "7 Pixel", sowie die Deckkraft auf "30 %".
Die Position sollte auf "Innen" gestellt sein.

Bild zu Buttondesign - Web 2.0

7. Glanz

Als letzten Ebenstil rufen wir den Reiter "Glanz" auf. Die Einstellungen dafür übernehmen wir aus
dem Screenshot.

Bild zu Buttondesign - Web 2.0

8. Highlight

Um dem Button noch mehr Spiegelung zu verpassen und somit einen glasigen Eindruck, versehen wir
ihn mit einer Spiegelung. Dafür erstellen wir eine neue Ebene, die wir "Spiegelung" nennen.
Mit dem Auswahlellipsen-Werkzeug (Taste m), ziehen wir uns auf dieser Ebene, eine Ellipse auf,
die unseren Button im oberen, rechten Drittel überlagert. Die Auswahl füllen wir mit unserer
weißen Hintergrundfarbe (strg + backspace).

Mit gedrückter strg-Taste klicken wir anschließend auf unsere Buttonebene, um eine Auswahl der
Buttonkontur zu erhalten. Diese Auswahl invertieren wir über "Auswahl > Auswahl umkehren" und
drücken dann die Entfernen-Taste. Dadurch haben von unserer weißen Ellipse alles gelöscht, was
nicht mit unserem Button überlagert.

Über "Auswahl > Auswahl aufheben" verlassen wir den Auswahlmodus wieder. In der Ebenenpalette
stellen wir die Deckkraft der Spielung-Ebene auf 25%.

Bild zu Buttondesign - Web 2.0
Bild zu Buttondesign - Web 2.0

9. Text hinzufügen

Abschließend können wir unseren Button noch mit einem kleinen Text versehen. Deinen eigenen
Text kannst du natürlich wieder mit einer Fülle von Ebenenstilen kombinieren und so besser im
Button integrieren.

Bild zu Buttondesign - Web 2.0
Fertiger Button

Damit haben wir unseren Button fertigestellt. So ein Button kann auch gut im Printbereich eingesetzt werden, um bestimmte Bereiche hervorzuheben.

Über den Autor: Fabian Ziegler
Meine Schwerpunkte liegen im Bereich Grafikdesign, SEO und Management. Seit sieben Jahren bin ich als Geschäftsführer der Team23 GbR tätig, die Webdesign in Augsburg anbietet, sowie Webmasterpro.de betreut.
Profilseite betrachten