Sicher, es gibt im Internet unzählige vorgefertigte Buttons, die man downloaden und frei nutzen darf. Der wahre Clou sind jedoch selbst erstellte Schaltflächen!
Hinweis:
Dieser Tipp ist eine Coproduktion mit Friedhelm von meiner Partnerseite. Die Einzelheiten dazu, wie Du Deine nach der folgenden Anleitung in PI selbst erstellten Buttons in Deine Webseite einbinden kannst sowie viele weitere CSS-Tipps findest Du in Friedhelms CSS-Fundgrube anschaulich erklärt. Ein Besuch lohnt sich!
Buttons gibt es in vielen verschiedenen Variationen, von ganz schlichten über kunstvoll gestalteten bis hin zu animierten Grafiken. Deshalb muss ich mich hier auf einige wenige konzentrieren. Ich hoffe, dass meine Buttons Dich zu ganz eigenen Buttons inspirieren!
1. Die Grundform
Welche Form Dein Button haben soll, hängt vor allem von seinem Einsatzzweck und dem Layout der Webseite, auf der er zum Einsatz kommen soll, ab. Doch Achtung: erstelle besser keine Schaltflächen in allzu ausgefallener Form. Ein Button ist eine funktionelle Grafik, die einem ganz bestimmten Zweck dient. Je verschnörkelter seine Form ist, desto weniger achtet der Webseitenbesucher darauf, welche Funktion der Schaltfläche zukommt. PI bietet eine reichhaltige Auswahl an geeigneten Formen.
Öffne eine neue Leinwand in der Farbe Deines Webhintergrundes. Eine Arbeitsgröße von 200x130 px für die Leinwand sollte zunächst ausreichend sein.
Aktiviere in der Werkzeugleiste das Pfad-Zeichenwerkzeug, wähle irgendeine Farbe und für unser erstes Beispiel das Rechteck als Form. Ziehe ein Pfadobjekt in Buttongröße auf, welches Du im Anschluss mit einem Farbverlauf von oben hell nach unten dunkel füllst:
Ergebnis: 
Aktiviere ihn und speichere ihn als .ufo-Datei (Du wirst sie gleich noch brauchen) und als gif-Datei ab ("Web" - "Bildoptimierer" - "Ausgewählte Objekte"). Tja, damit ist Dein erster Button bereits fertig!
Du könntest ihn aber auch noch beschriften:
Mehrere dieser Schaltflächen mit unterschiedlichen Beschriftungen können auf einer Webseite für ein Navigationsmenü sehr schön entweder untereinander oder nebeneinander angeordnet werden:
2. Hover-Effekt
Für den Hover-Effekt beim Überfahren mit der Maus musst Du immer eine zweite Grafik passend dazu anfertigen. Hierfür öffne Deine ufo-Datei vom Grundbutton und färbe den Button in eine Farbe aus dem mittleren Bereich Deines Farbverlaufes und speichere diesen zweiten Button ebenfalls als gif-Datei. Wie es im Quellcode aussehen muss, dass es beim Überfahren mit der Maus zu diesem Effekt kommt ...
... das erfährst Du in der CSS-Fundgrube von Friedhelm!
Alternativ könntest Du für den Hover-Effekt auch die Schriftfarbe verändern. Oder/oder Du vertauscht den Farbverlauf auf oben dunkel sowie unten hell:
3. Buttons mit Pfiff
Anstelle des Farbverlaufes kannst Du auch andere Füllungen für Deinen Grundform-Button wählen. Eine wahre Schatzkiste in diese Richtung ist die Trickkiste! Hier nur einige wenige Möglichkeiten daraus:
a) Glaseffekt
Öffne Deine ufo-Datei, aktiviere den Button und wähle in der Trickkiste auf der Karteikarte "Galerien" die Rubrik "Text-/Pfadeffekte" - "Material". Vollziehe auf das kleine Vorschaubild L01 in dem Effekt "Glas" einen Rechtsklick und ändere die Eigenschaften wie folgt:
Du könntest das Ergebnis optimieren, indem Du die dunkle Farbe des Farbverlaufes an die Farbe Deines Web-Hintergrundes anpasst.
Du hast jetzt einen Button mit Glaseffekt. Damit er später auf Deiner Webseite die Glaseigenschaft beibehält, solltest Du das Pfadobjekt auf einer Leinwand abspeichern, die die Farbe Deines Web-Hintergrundes besitzt. Die Schrift lege unter die Pfadform, so dass letztere wie eine schützende Haube wirkt.
Für den Hover-Effekt färbe den Button mit Hilfe des Duotone-Effektes ("Foto" - "Verbessern...") um und ändere auch die Schriftfarbe
b) Glanzeffekt
Aktiviere wieder Deinen ufo-Button sowie das Pfad-Zeichenwerkzeug. Ändere den Modus auf "3D Rund" und wandele den Breiten- bzw. Tiefenwert in den Werkzeugeinstellungen auf "15" bzw. "5". Verpasse dem Button sodann den Glaseffekt G01:
Die Möglichkeiten des Zusammenspiels von variierten Pfad-Werkzeugeinstellungen einerseites und den unendlichen Möglichkeiten der PI-Trickkiste andererseits sind so vielseitig, dass ich Euch nur ermuntern kann, es selbst zu testen. Schließlich sollen Eure Buttons genau auf Eure Website zugeschnitten und individuell sein! Hier nur eine Handvoll von Beispielen:
Hier ein "metallisch-glänzendes" Beispiel samt Hover-Effekt mit einer anderen Pfadform:
Im zweiten Teil der Anleitung zeige ich Euch ein paar kreative Button-Varianten!
