Stylische Web 2.0 Buttons in Photoshop erstellen

Um stylische und schlichte Webdesign-Buttons selbst zu gestalten, sind die Ebenenstile in Photoshop besonders hilfreich. So erstellst du ganz leicht deine eigenen RSS- oder Social-Media Buttons im moderen Web 2.0 Style.

Web 2.0 Buttons Photoshop-Tutorial

Öffne dazu ein neues Photoshop-Dokument. Wenn du möchtest, kannst du dir Hilfslinien einrichten.

Abgerundetes Rechteck

Dann wählst du das Abgerundetes-Rechteck-Werkzeug (U) aus. Der Radius für die abgerundeten Ecken sollte auf 5px eingestellt sein. Danach ziehst du deinen Button in gewünschter Größe auf. Im Augenblick spielt die Farbe des Feldes noch keine Rolle, da du später einen farbigen Verlauf erstellen wirst.

Web 2.0 Buttons Photoshop-Tutorial

Als nächstes wandelst du die Form in ein »Smart Object« um, indem du mit der rechten Maustaste auf die Ebene klickst, und »Smart Object« aus dem Dropdown-Menü wählst.

Jetzt klickst du mit einem Doppelklick auf die Ebene, um das Fenster für die Ebenenstile zu öffnen.

Schlagschatten

Klicke im linken Menü auf Schlagschatten, und stelle dir die Einstellungen so ein, dass du mit dem äußeren Schatten um dein Feld zufrieden bist. Meine Einstellungen sehen so aus:

Web 2.0 Buttons Photoshop-Tutorial

Bestätige deine Einstellungen mit ok.

Schatten nach Innen

Öffne wieder die Ebenenstile mit einem Doppelklick auf die Ebene und wähle im Menü »Schatten nach innen«. So kannst du eine leicht helle Kante erzeugen, durch die dein Button eine gewisse Stärke bekommt.

Hier meine Einstellungen:

Web 2.0 Buttons Photoshop-Tutorial

Verlauf erstellen

Um deinem Button eine Farbe und einen ganz dezenten Verlauf zu geben, gehst du im Menü der Ebenstile auf »Verlaufsüberlagerung«.

Web 2.0 Buttons Photoshop-Tutorial

Ich habe einen leichten Grün-Verlauf gewählt, indem ich mit einem Doppelklick den ursprünglichen Verlauf angeklickt habe. Hier kannst du deine Button-Farben wählen. Die Farbe sollte oben heller sein, als unten.

Web 2.0 Buttons Photoshop-Tutorial

die Textebene

Dein Button ist soweit fertig, jetzt brauchst du nur noch deinen Text, oder Icon für den Button.
Dazu erstellt du eine Textebene, und schreibst deinen Text in das Feld.

Web 2.0 Buttons Photoshop-Tutorial

Jetzt öffnest du wieder mit einem Doppelklick die Ebenstile deiner neuen Textebene.

Wähle Schlagschatten, und gib dem Schatten eine weiße Farbe. Dadurch wirkt dein Text wie in den Button eingestanzt. Meine Einstellungen für den Schlagschatten siehst du hier.

Web 2.0 Buttons Photoshop-Tutorial

Bestätige deine Eingaben und klicke auf Schatten nach innen, um den Effekt von eingestanztem Text noch zu verstärken. Stelle hier folgende Einstellungen ein.

Web 2.0 Buttons Photoshop-Tutorial

Wähle dann »Farbüberlagerung« aus dem Ebenstil-Menü, so stellst du die Farbe des Textes bzw. Icons ein.

Web 2.0 Buttons Photoshop-Tutorial

Das war’s auch schon! Fertig ist dein Photoshop-Button :-) Natürlich kannst du mit den Effekten ein bisschen herumspielen, bis dir dein Ergebnis so richtig gut gefällt. Ich hoffe dir hat mein kleines Tutorial gefallen, und du hast jede Menge Spaß dabei deine eigenen Buttons zu erstellen.

2 Kommentare zu “Stylische Web 2.0 Buttons in Photoshop erstellen

  1. Hallo kann mir jemand helfen? habe mir jetzt das Photoshop Programm Gimp runtergelade. Weißt jemand wie ich Hilfslinien erstellen kann oder wo das Abgerundetes-Rechteck-Werkzeug ist?

    Gibt es auch Deutsche Photoshops? Ich kann leider kaum Englisch!!! und die Übersetzung dauert ewig!!!

    Ewa

  2. Echt klasse Anleitung, ohne dich wäre ich echt nicht weitergekommen!

Hinterlasse einen Kommentar zu Nils Frank Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *