Schaltflächengestaltung mit PhotoshopBunte Buttons

Noch nicht antiquiert

Schaltflächengestaltung mit Photoshop

Gleich zu Anfang sei es zugegeben: Schaltflächen sind ein wenig aus der Mode und nicht mehr so häufig im Web zu finden wie noch vor einigen Jahren. Gerade bei größeren Websites mit umfangreicher Navigation haben sich Text-Links den Spitzenplatz erkämpft. Und dennoch, zu vielen Designs passen Schaltflächen nach wie vor. Gerade die verschiedenen Varianten mit weniger auffälligen Schaltflächen sind so noch wenig zu sehen, wirken aber dennoch modern.

Dieser Artikel zeigt einfache Methoden zur Schaltflächen-Gestaltung sowie komplexere. Welche jeweils die richtige für Sie ist, hängt hauptsächlich von der Umgebung ab, in der sich die Buttons dann tummeln sollen. Den Anfang machen die grundlegenden Überlegungen.

Am Anfang steht die Form

Schaltflächengestaltung mit Photoshop

Wenn man vor einer weißen Fläche sitzt und mal schnell einen Button entwerfen soll, ist das oft schwierig. Ein guter Ansatzpunkt ist die Form der Schaltfläche. Sie hängt zum einen natürlich vom Einsatzgebiet, zum anderen aber auch von der Formsprache der ganzen Seite ab.

Zusätzlich hat sie aber noch eine interessante Eigenschaft: Sie ist relativ leicht änderbar. In Photoshop können Sie ? wie in vielen anderen Grafikprogrammen auch ? mit den Pfaden und Vektorebenen beliebige Formen erstellen. Die Formen lassen sich nachträglich ohne Qualitätsverlust skalieren und korrigieren. Im Web ist dies bei pixelgenauer Arbeit entscheidend, um ein scharfes und qualitativ hochwertiges Ergebnis zu erhalten.

Nun aber etwas spezifischer zu den Möglichkeiten: In Photoshop gibt es die einfachen Grundformen als Werkzeuge. Für eine häufige Schaltflächenform, ein Rechteck mit abgerundeten Ecken, gibt es in Photoshop selbst nur ein Werkzeug, bei dem Sie den Eckenradius einstellen können. Image Ready bietet hier noch zwei weitere: das Ovale-Rechteck-Werkzeug mit festgelegtem Eckenradius und, noch praktischer, ein Registerkarten-Rechteck-Werkzeug. Letzteres liefert Formen mit nur oben zwei abgerundeten Ecken. Wenn Sie die Form drehen (am schnellsten über [Strg T]), erhalten Sie damit natürlich beliebige Register. Um eine solche Form auch in Photoshop zu bauen, müssten Sie ein Rechteck mit einem abgerundeten Rechteck verbinden. Das Verbinden und Subtrahieren von Formen ist überhaupt der Schlüssel zu richtig interessanten Schaltflächen. Die Datei Formen.psd auf der Heft-CD (siehe Bereich Listings) zeigt, wie Sie mit wenigen Grundformen und dem Subtrahieren einer Kreisform zu einer homogenen Komposition aus drei Schaltflächen gelangen.

Form sichern

Schaltflächengestaltung mit Photoshop

Wenn Sie eine eigene Form komponiert haben, können Sie diese auch für zukünftige Arbeiten speichern. Dazu wählen Sie entweder im Kontextmenü auf der Form oder im Menü Bearbeiten den Befehl Eigene Form festlegen. Vergeben Sie dann einen Namen ? ab jetzt taucht die Form immer beim Eigene-Form-Werkzeug auf.

Wie die meisten Einstellungen in Photoshop sind auch die eigenen Formen als eigene Datei verfügbar. Dateien mit Formen tragen die Endung CSH. Über den Vorgaben-Manager können Sie hier auch einige neue der bei Photoshop mitgelieferten, aber noch nicht automatisch eingebundenen Formen verwenden. Probieren Sie doch zum Beispiel mal die mitgelieferten Sprechblasen oder die Tier-Symbole aus. Oder aber speichern Sie die selbst erstellten Formen in einer Datei und tauschen Sie diese dann mit Kollegen und zwischen Rechnern aus.

Schnelle Ebeneneffekte

Schaltflächengestaltung mit Photoshop

Für die schnelle und dennoch hochwertige Schaltflächengestaltung haben die Ebeneneffekte von Photoshop viel Gutes gebracht. Sie sind nach der Wahl der Form der logische zweite Entwicklungsschritt im Design-Prozess. Los geht es mit einem Beispiel: Erstellen Sie ein abgerundetes Rechteck. Die Schaltfläche soll nun als Erstes eine dreidimensionale Optik bekommen. Dazu soll sie im oberen Bereich eine strahlende Fläche erhalten. Dies erreichen Sie mit dem Ebeneneffekt Abgeflachte Kante und Relief.

Damit die Fläche strahlt, reduzieren Sie die Farbtiefe auf 1%. Den Winkel der Schattierung lassen Sie relativ von oben kommen und platzieren ihn leicht oberhalb des Mittelpunkts. Beim Tiefenmodus schwächen Sie die Deckkraft ein wenig ab.

Nun kommt noch eine eigene Kontur. Die Kontur-Einstellungen sind ein Unterpunkt von Abgeflachte Kante und Relief, um die Kontur der Kante einzustellen. Vorsicht, es gibt auch eine eigene Kontur. Diese gilt dann für die komplette Ebene und kommt nachher noch zum Einsatz, um die Schaltfläche nach außen abzugrenzen.

Für die Kontur der Kante zeichnen Sie eine eigene Kurve. Mit einem leicht in der Mitte nach unten gerutschten Highlight betonen Sie die Kontur. Dies ist etwas schwierig zu erreichen, da normalerweise am unteren Rand dazu ein Schatten entsteht. Sie müssen hier also ein wenig experimentieren.

Bisher spielte die Farbe der Schaltfläche noch keine Rolle. Sie können hier auch in den Effekten vorübergehend eine Farbüberlagerung mit einer dunkleren Farbe wählen, denn damit lässt sich die Wirkung der strahlenden Fläche besser beurteilen.

Nun folgen die Feinarbeiten: Um den Button von seiner Umwelt abzugrenzen, legen Sie eine 1 Pixel starke schwarze Kontur an. Ein leichter Schlagschatten wirkt zusätzlich sehr gut als Grenze und gleichzeitig Verbindung zur Umgebung. Als Gegenstück zur strahlenden Fläche fügen Sie am unteren Rand der Schaltfläche mit Schein nach innen noch eine Spiegelung ein. Die genauen Angaben entnehmen Sie der Datei Button_lay1.psd, denn die Menge an Parametern würde an dieser Stelle zu umfangreich werden.

Gut gefüllt mit Verlauf

Schaltflächengestaltung mit Photoshop

Nun soll die Schaltfläche noch adäquat gefüllt werden. Dazu bieten sich beispielsweise Verläufe an. In den Effekten gibt es dazu den eigenen Punkt Verlaufsüberlagerung. Sie können den Verlauf frei zusammenstellen und ? besonders praktisch ? bei geöffnetem Effekte-Bedienfeld mit der Maus auf der Schaltfläche im Bild verschieben.

Wenn Sie Ihre Wunschgestaltung gefunden haben, können Sie diese als Stil speichern und so beliebig auf neue Schaltflächen anwenden. Empfehlenswert ist es hier, für Verlaufsüberlagerungen die Option An Ebene ausrichten zu aktivieren. Sonst werden Verläufe nämlich beim Verschieben des Buttons nicht mit verschoben und Sie müssen sie jedes Mal neu ausrichten, wenn Sie den Stil auf einen neuen Button anwenden.

Zum Schluss benötigt die Schaltfläche nur noch eine passende Schrift. Hier sehen Sie einen der besonderen Vorteile gegenüber HTML-Navigationen: Sie können eine beliebige Schriftart wählen und sind nicht auf den engen Kreis der Standardschriften beschränkt. Eventuell hilft ein Ebeneneffekt wie Schein nach außen, um die Schrift von der Schaltfläche abzuheben.

In der Datei Button_lay1.psd finden Sie neben der hier vorgestellten Variante noch weitere drei mit Verläufen. Sie zeigen sehr gut, wie variabel diese Gestaltung ist. Schaltflächen können so auch bestimmte Themen verkörpern. Zebra und Tiger sind in dieser Datei ein Beispiel dafür.

Ein Muster für den Button

Schaltflächengestaltung mit Photoshop

Eine Alternative zu Verläufen sind Musterfüllungen. In der Button-Gestaltung ist hier aus rein technischer Sicht
ebenfalls der entsprechende Ebeneneffekt Musterüberlagerung zu bevorzugen. Sein größter Vorteil: Er lässt sich zusammen mit den anderen Einstellungen als Stil speichern und dann beliebig oft einsetzen. Bei Masken und übergeordneten Ebenen ist das mehrmalige Verwenden dagegen mit wesentlich mehr Arbeitsschritten verbunden.

Woher erhalten Sie passende Muster? Prinzipiell bieten sich drei Quellen an: Sie finden im Internet ein passendes Muster, Sie verwenden eines der bei Photoshop mitgelieferten Muster, oder Sie schießen selbst ein passendes Foto. In Button_lay1.psd finden Sie beides. Die Schaltfläche Holz besteht aus dem Holzmuster von Photoshop. Es wurde im Ebeneneffekt Musterüberlagerung noch ein wenig skaliert, und mit einer Einstellungsebene wird die gesamte Schaltfläche aufgehellt.

Das Muster der Schaltfläche Metall hat dagegen ein eigens geschossenes Digitalfoto als Grundlage. Das Foto finden Sie als RostigesMetall.tif zum Ausprobieren auf der Heft-CD. Um den Ebeneneffekt verwenden zu können, müssen Sie das Bild öffnen und mit Bearbeiten, Muster festlegen in ein Muster verwandeln. Dann können Sie es in der Musterüberlagerung einsetzen. Auch die Muster lassen sich übrigens über den Vorgaben-Manager austauschen.

Transparenz wirkt gut

Schaltflächengestaltung mit Photoshop

Ein weiteres Stilmittel für Schaltflächen ist die Transparenz. Hier gibt es mit dem Schieberegler Fläche in der Ebenen-Palette und auch in den Fülloptionen des Ebenenstil-Dialogs eine interessante Variante. Sie können damit den Inhalt der Schaltfläche transparent machen, die Effekte aber eingeblendet lassen. Gerade wenn Sie mit den Ebeneneffekten wie vorher gezeigt die Kontur eines Buttons herausheben, wirkt dies sehr gut. Wichtig ist dazu nur, dass die Schaltfläche einen Hintergrund hat, auf dem sie zur Geltung kommt.

Das Beispiel in der Datei Button_lay1.psd verwendet als Hintergrund einfache weiße Striche auf grauem Grund, die dank unterschiedlichern Deckkraft an Gräser erinnern. Erreicht wurde dies über einen Gräser-Pinsel von Photoshop. Sie können die Transparenz übrigens auch mit einem Verlauf verbinden, der transparente Bereiche enthält.

Unbegrenzte Möglichkeiten

Schaltflächengestaltung mit Photoshop

Für manches sind die Ebeneneffekte nicht ausreichend. Spiegelungskanten sind vor allem mit speziellen Formen nicht sinnvoll über Abgeflachte Kante und Relief zu lösen. Ein besseres Mittel ist ein radialer Verlauf. Ein Beispiel finden Sie in der Datei Button_lay2.psd. Hier kommen zwei Verlaufsebenen zum Einsatz, um den Button dreidimensional hervorzuheben. Beide sind mit der Formebene des Buttons gruppiert, damit sie nur darauf wirken. Eine weitere Ebene fügt auf dem Button einen Kreis ein, der wiederum Kontur verleiht. Zum Abschluss sorgt eine Einstellungsebene Farbton/Sättigung für die richtige Farbnuance.

Der Button selbst wird mit Ebeneneffekten optisch aufgewertet. Kontur und Schlagschatten grenzen nach außen ab, die Musterüberlagerung erzeugt die Streifen. Insgesamt ist dieses Beispiel deutlich komplexer zu entwickeln als die reinen Ebeneneffekt-Lösungen. Dafür erhalten Sie als Vorteil völlige Gestaltungsfreiheit und eine Optik, die sich vom Einheitsbrei deutlich abhebt. Ob sich diese Mühe lohnt, hängt natürlich vom Einzelfall ab. Oftmals ist in der Gestaltung auch weniger mehr, und ein einfaches farbiges Rechteck erzielt eine stärkere Wirkung als ein aufwendig gestalteter Button. Glücklicherweise gibt es hier keine Grundregel, die für alle Fälle gilt.

Fazit

Schaltflächengestaltung mit Photoshop

Schaltflächen werden ? ob nun als kleines Highlight oder für die ganze Navigation ? wohl nie ganz aus dem Web verschwinden. Dieser Workshop zeigt, wie Sie mit einfachen Mitteln tolle Effekte erreichen können. Das letztgenannte Beispiel gibt allerdings auch einen Ausblick darauf, dass eine optimale Gestaltung durchaus aufwendiger sein kann. Wenn dann noch verschiedene Zustände für Rollover und Sonstiges hinzukommen, wird aus der Schaltflächengestaltung schnell eine Wissenschaft für sich.

Alle Dateien zum Workshop finden Sie auf der Heft-CD sowie unter listings.internet-pro.de.