Buttons
... zurück zum 1. Teil

Fundgruben-Tipp: Buttons erstellen ... Teil 2


4. Sonderformen

Buttons von gerade geöffneten Links oder beim Hovern mit der Mouse müssen nicht immer heller oder dunkler als ihre Urform. Sie können auch einfach mal ihre Form verändern. Für diesen Effekt benötigst Du wieder zwei Grafiken, einen Button für die Urform und einen weiteren Button für den Effekt.

a) Urform-Button

Öffne eine Leinwand in der Farbe Deines Webhintergrundes sowie Höhe Deines Wunsch-Buttons. Für die Breite lege ca. 30 px mehr drauf als Dein Button breit werden soll. In meinem Beispiel bleibe ich bei der Hintergrundfarbe mittleres Blau #b4c4d5. Mein Urform-Button soll 150x40 px groß werden, so dass ich eine Leinwand von 180x40 px öffne.

Aktiviere das Pfad-Zeichenwerkzeug, wähle das Rechteck als Form. Die Farbe ist erst einmal egal. Ziehe im Modus "2D-Objekt" ein Rechteck von 150x40 px auf und ordne es am rechten Rand an:


Pfadform anordnen


Ich versehe meinen Button mit einem Farbverlauf, der ihn wie eine kleine Röhre aussehen lässt. Dazu aktiviere den Button, gehe über "Bearbeiten" - "Füllen" auf die Karteikarte Farbverlauf, wähle den "Fülltyp" von oben nach unten" und als " Füllfarbe" die Option "Mehrere Farben". In dem neuen Fenster versuche es zum Beispiel mit dem Farb-Palettenspektrum 021, das den Urform-Button in dieses Gewand kleidet:


Pfadform mit Farbverlauf


Speichere das Gebilde als .ufo-Datei ab. Du könntest jetzt den Button noch beschriften und ihn dann als .gif-Datei für die Webseite abspeichern:


Urform-Button


b) Effekt-Button

Für den Button, der den Effekt bringt, wende Dich Deiner .ufo-Datei zu und aktiviere den Urform-Button. Mittels des Verformwerkzeuges ziehe ihn auf die volle Breite Deiner Leinwand auf. Achte darauf, dass Du vorher das kleine Schloss in der Attributleiste öffnest:


Urform-Button aufziehen


Lasse den Button weiterhin aktiviert, wir wollen ein Stück heraus radieren. Dazu musst Du zunächst das Pfadobjekt in ein Bildobjekt umwandeln: Rechtsklick - "Objekttyp umwandeln" - "Von Text/Pfad zu Bild".

Ziehe das Fenster mit Deiner Leinwand etwas nach unten auf, damit Du gleich mehr Platz für den Radierer hast:


Leinwand aufziehen


Aktiviere den "Objekt Malen-Radierer". In der Attributleiste mache die folgenden Einstellungen:


Einstellungen Radierer


Klicke in den Leerraum über dem Button und ziehe die Radierlinie gerade herunter:


Radiereinsatz


Nach einem erneuten Klick im Leeraum unterhalb des Buttons sind 20 px Deines Urform-Buttons verschwunden.

In die Lücke setzen wir als Verbindung ein kleines Zwischenstück. Hierzu deaktiviere zunächst Deinen teilradierten Effekt-Button und aktiviere wieder das Pfad-Zeichenwerkzeug. Ziehe ein kleines Rechteck auf, Farbe egal, wie hier zu sehen:


Mittelstück-Pfadobjekt


Mit dem Wahlwerkzeug oder über den Ebenenmanager lege dieses kleine Pfadobjekt unter Deinen teilradierten Effektbutton:


Ebenen ordnen


Fülle das Zwischenstück mit dem selben Farbverlauf, mit dem Du Deinen Urform-Button gefüllt hast und setze ein bisschen den Helligkeits- und Kontrastwert herab: "Foto" - "Licht" - "Helligkeit und Kontrast". Ändere im neuen Fenster die Werte von Helligkeit und Kontrast auf jeweils -20. Aktiviere beide Objekte und binde sie ein.

Fertig ist Dein Effekt-Button!


Effekt-Button


Im Einsatz als Navi-Button könnten Dein Urform- sowie Effekt-Button wie nachfolgend zu sehen, zum Einsatz kommen:


Spezialbutton im Einsatz  (gepixelter Screenshotausschnitt)


⇒ Zum Einbau einer vertikalen Navigation auf Deiner Webseite empfehle ich Friedhelms Anleitung von meiner Partnerseite!

Natürlich klappt das auch bei einer horizontalen Navi. Dafür musst Du den Farbverlauf von links nach rechts anstelle von oben nach unten wählen:


Spezialbutton im Einsatz  (gepixelter Screenshotausschnitt)


⇒ Alles über den Einbau einer horizontalen Navigation auf Deiner Webseite erfährst Du ebenfalls in Friedhelms CSS-Fundgrube!


5. Weitere Button-Beispiele

Als Anregung für Deine eigene Kreativität hier ein paar weitere Beispiele von ausgefallenen, selbst erstellten Buttons für die Navigation auf der Website, jeweils für den horizontalen sowie den vertikalen Einsatz. Bei den Grafiken handelt es sich jeweils um nachgestellte Screenshotausschnitte:


Spezialbutton

Spezialbutton


Buttons müssen nicht immer eine klassische Form haben. Ziehe doch einfach mit dem Malwerkzeug "Wachsstift" in der Größe 60 einen Strich auf und beschrifte ihn:

Spezialbutton      Spezialbutton


Für die folgenden Buttons habe ich mit der Spiegelungstechnik gearbeitet, die ich in diesem Fundgruben-Tipp beschrieben habe:


Spezialbutton         Spezialbutton         Spezialbutton



... Hier geht's nach oben


... Zur Inhaltsübersicht der PI-Fundgrube

PI-Miniaturmalereien