Glossy Web 2.0 Button in Photoshop

It’s Tutorialtime!

Nach längerer Zeit mal wieder ein neues reines Photoshoptutorial von mir. Es gibt zwar schon tausende gleicher Tutorials im Internet, und der Vollständigkeit halber muss ich eben auch noch eins machen Zum Komfort habe ich jedoch das komplette Projekt-File, sowie alle zu dem im Vorschaubild gezeigten Stile angehängt.

Okay, los gehts!

Beginnen wir mit dem Grundstein eines jedem Projekts, jedes Bildes bzw. jeder Grafik: Der Idee. Es gibt viele Möglichkeiten Buttons in Photoshop zu erstellen und deren Erscheinung ist vielfältig. In Sachen Gestaltung sind hier keine Grenzen gesetzt! Ich habe mich für einen Button mit recht großem, dicken Rahmen entschieden. Dieser soll Aluminiumartig aussehen. Ich habe Rahmen geschrieben, richtig. Die Eigenschaften eines Rahmens werden dadurch definiert, dass er das Bild meist vom Rest (dem Drumherum) abtrennt. Oft ist der Inhalt des Bildes im Rahmen eingelassen, so werde auch ich es später durch einen “Schatten nach innen” verwirklichen. Farblich habe ich mich für ein standart-rot entschieden.

Schritt 1:

Datei >> Neu…

Breite: 500 Pixel

Höhe: 500 Pixel

Schritt 2:

Ebenenpalette >> Abgerundetes-Recheck-Werkzeug: Radius 8px, kein Stil.

Jetzt bei gedrückter Shift-Taste ein Viereck ziehen.

Das Grundgerüst

Doppelklick auf die eben erstellte Form (Form1) um in den Dialog des Ebenenstils zu gelangen.

Dort die folgenden Einstellungen treffen: (Siehe Bilder unten)

Info: Die Ebenenstile zum Downloaden sind unten zu finden.

Der Glaseffekt

Wir sind mit dem Grundgerüst fertig. Was fehlt ist das glossige, pardon – der Web 2.0 Effekt. Um den kümmern wir uns jetzt!
Das Zeichenstift-Werkzeug hilft dabei in höchstem Maße.

Werkzeugpalette >> Zeichenstift-Werkzeug

Jetzt den Umriss der Glasfläche zeichnen.  (Weiteres siehe Bild) Dabei ist zu achten, dass man schöne, gleichmäßige Kurven zieht. Wer hier noch keine Übung hat, dem wird es vielleicht etwas schwerer fallen.

Es folgt ein Rechtsklick >> Auswahl erstellen…     Jetzt ist eine Auswahl um den vorher gezeichneten Bereich erschienen. Aber hier bitte Achtung schenken! Wenn man genau hinsieht erkennt man, dass die Auswahl den äußeren Bereich betrifft, und nicht unser “Zielgebiet”. Mit cmd + shift + i ( Winows: Alt+Shift+I) wird die Auswahl invertiert. Zur Sicherheit (ich weiß ja nicht wie die Farbpalette bei euch ist), bitte einmal auf D drücken um die Farben zurück  zu setzen.

Werkzeugpalette >> Füllwerkzeug und in den ausgewählten Bereich klicken. Jetzt ist die Fläche weiß.

Klickt man mit gedrückter cmd (Windows alt)-Taste auf das kleine Vorschausymbol der Form1-Vektormaske, erhält man die Auswahl des Buttons. Diese muss noch mal invertiert werden (cmd + shift + i ( Winows: Alt+Shift+I)), denn wir wollen die überstehenden Kanten entfernen. Wer sich fragt, warum wir das nicht auch mit einer Ebenenmaske machen, so hab eich eine simple Antwort: Diese brauchen wir später noch Status: Die Auswahl ist invertiert, also weiter geht’s! Wenn ihr einen Mac habt, so drückt  jetzt fn + Backspace und wenn ihr Windowsuser seid, so drücktjetzt entf. Wie man sieht, sieht’s bescheiden aus. Das ändern wir in den nächsten paar Schritten. Auswahl >> Auswahl verändern >> Verkleinern >> Verkleinern um: 5 px.  Wieder invertieren und noch mal fn + Backspace. Mit cmd + d (Windows Strg+D) deaktiviert ihr jetzt die Auswahl. Klicke nun in der Ebenenpalette gaaaa[...]anz unten  auf das dritte Symbol von links. Damit erstellt ihr eine neue Ebenenmaske. Diese wird für den Verlauf gebraucht. Die Ebenenmaske funktioniert nach einem ganz einfachen Prinzip: Alles was schwarz ist wird ausgeblendet, alles was weiß ist wird eingeblendet, alles was dazwischen ist, dass wird je nach schwarz-weiß-Anteil in der Deckkraft geregelt. Dazu klicken wir, nachdem du diese Ebenenmaske erstellt hast, auf diese um sie auszuwählen. Werkzeugpalette >> Verlaufswerkzeug (da wo jetzt eigentlich der Farbeimer sein sollte einfach Rechtsklick drauf und das Verlaufswerkzeug auswählen). Oben in der Leiste wählen wir den Standartverlauf, von Schwarz nach Weiß, aus und ziehen diesen mit gedrückter Shift-Taste von oben nach unten. Jetzt noch die Deckkraft auf ca 60% heruntersetzen und der Glaseffekt ist schon fertig.

Der Leuchteffekt

Doch irgendetwas fehlt noch…. *Grübel* Es ist der “Lichteffekt”, unten am Button. Dieser ist aber total einfach zu verwirklichen. Werkzeugpalette >> Auswahlellipse-Werkzeug und im Anschluss bei gedrückter Shift-Taste einen Kreis ziehen, welcher ein wenig kleiner als das Buttoninnere ist. Filter >> Weichzeichnungsfilter >> Gaußscher-Weichzeichner : Radius ca. 50 Pixel >> Klick auf OK.

Jetzt wieder das Spiel von oben: Mit gedrückter cmd-Taste (Windows alt) auf die Vektormaske der Form1 klicken, dann die Auswahl invertieren und entfernen.

Zack, da simmer fertig! Ging doch schnell oder? Okay, ich muss zugeben, der Text ist doch etwas lang geworden. Es kann auf keinen Fall schaden sich bei Problemen (oder auch so) das Video an zugucken, oder sogar zu downloaden. Im Video benutze ich übrigens eine andere Reihenfolge und manchmal andere Methoden, was jedoch denke ich nicht stören sollte, denn wenn ihr diesen Text gelesen habt, müsstet ihr eigentlich alles verstehen können. Links gibt es unten.

Über Kommentare, Kritik oder Fragen freue ich mich wie immer.

Ich hoffe es ist alles verständlich genug so.

Bis dann.

Downloads/Video

GlossyButtonStyles.asl

Photoshop Button Tutorial from Cedric on Vimeo.