SetaPDF
Aktuelles
Startseite
TP Wettbewerbe
Sitemap
Service
Hilfe-Forum
Kolumnen
Linktipps
Buchrezensionen
Traum-Team
Newsletter
Traumquelle
Dreamweaver
Fireworks
Photoshop
Flash
Traum-Start
gimp
GoLive
php / Apache
Sonstige
Grundlagen
Usability
CSS
Apple / Mac
3D
Intern
TP-Sponsor
TP SHOP
Bild Galerie
TP Wallpapers
Forum-Archiv
Link zu uns
Impressum
Zurück  
TP Portal > gimp > Aqua - Buttons - the Gimp-Way...;) - Normal

Aqua - Buttons - the Gimp-Way...;)

Ein Muß für - fast - jede Website: Buttons im Aqua-Style. Hier nun die Vorgehensweise in Gimp bei einem normalen Button.

Ein Hinweis zur Notation: in Gimp laufen fast alle Aktionen ber Kontextmenus ( rechter Mausklick ). Solche Aktionen stelle ich im folgenden immer durch eine "Menukette" dar: ( Rechtsklick -> Auswahl aus Kontextmenu -> Auswahl aus Submenu -> Auswahl aus Sub-Submenu usw )Noch ein Hinweis: dieses Tutorial wendet sich an die etwas geübteren Gimp-Benutzer - es wird nicht jeder Schritt ausführlich erklärt... tooltipp

Hier nun die Anleitung zur Erzeugung der berühmten "Pille". In einer neuen, transparenten Ebene legen wir mit der Rechteckauswahl den Grundriss fest. Zunächst muss diese Auswahl abgerundet werden. Das geschieht durch Rechtsklick -> Script-Fu -> Auswahl -> Abrunden.... Die vorgegebenen Parameter können beibehalten werden. Diese Auswahl füllen wir mit einem linearen Farbverlauf: von einer hellen Version unserer gewünschten Farbe zu einer dunkleren. tooltipp

Als Vordergrundfarbe stellen wir jetzt weiß ein. In den Farbverlaufs-Werkzeugeinstellungen müssen folgende Parameter eingestellt werden: Übergang: "VG nach transparent", Farbverlauf: "formangepasst, spärisch", Deckkraft: "75%". In einer neuen, transparenten Ebene füllen wir die Auswahl mit dem Farbverlauf und zeichnen ihn mit dem Gaußschen Weichzeichner ( Radius: 5 ) weich. tooltipp

Bei immer noch aktivierter Auswahl legen wir eine neue, transparente Ebene an und füllen die gesamte Auswahl mit weiß. Mit dem Skalierungs-Werkzeug formen wir diese Fläche, bis sie ungefähr so wie oben aussieht tooltipp

Jetzt wird's etwas kompliziert: das Glanzoval wird ausgewählt und das Verschiebewerkzeug aktiviert. In das Oval klicken und vorsichtig mehrere Pixellängen nach oben verschieben, daß oben nur noch ein schmaler Rand der Grundfläche zu sehen ist. ( Tip: zum pixelweisen Verschieben kann man bei gedrückter Maustaste auch die Cursortasten benutzen. ) Wenn wir die Maustaste loslassen, sehen wir, daß sich das Farboval verschoben hat, die Auswahl aber stehengeblieben ist. Den Rest des Ovals, der noch in der Auswahl verblieben ist, löschen wir (Rechtsklick -> Bearbeiten -> Löschen). tooltipp

Das verbliebene Segment wird weichgezeichnet: Gaußscher Weichzeichner, Radius: 5 ). tooltipp

Zum Rämlichkeitswirken fehlt noch der Schatten. Dazu wird wieder auf die Grundflächen-Ebene gewechselt und die Grundfläche ausgewählt. Anschliessend wird zunächst mit Rechtsklick -> Script-Fu -> Schatten -> Schlagschatten der Basisschatten erzeugt. Die Paramter: Versatz-x: 3, Versatz-y: 3, Weichzeichner-Radius: 15, Farbe schwarz. Die Deckkraft sollte ca 30% betragen. Achtung: Größenänderung zulassen deaktivieren! tooltipp

Nun soll unsere Pille ja aus Glas bestehen. Und Glas lässt eine gewisse Lichtmenge gefiltert durch. Dazu öffnen wir noch einmal den Schlagschatten-Dialog und ändern die Parameter wie folgt: Versatz-x:5, Versatz-y: 5, Weichzeichner-Radius: 25, Deckkraft: 80%, Farbe: Grün ( Wert: 1.00 ). tooltipp

Zu Buttons ghören Beschriftungen. Den Text setzen wir auf eine Ebene oberhalb der Grundebene und unterhalb der Glanzlichter-Ebenen. Die Schrifthöhe sollte ungefähr die Hälfte der Buttonhöhe betragen.

 

 

Autor: (wm)

Abbildungen

Abbildung 1 - Die Grundfläche

Abbildung 1 - Die Grundfläche

Abbildung 2 - allgemeiner Schimmer

Abbildung 2 - allgemeiner Schimmer

Abbildung 3 - Glanzpunkt - Vorbereitung

Abbildung 3 - Glanzpunkt - Vorbereitung

Abbildung 4 - Glanzpunkt - der Rundung angepasst

Abbildung 4 - Glanzpunkt - der Rundung angepasst

Abbildung 5 - Glanzpunkt

Abbildung 5 - Glanzpunkt

Abbildung 6 - Schlagschatten

Abbildung 6 - Schlagschatten

Abbildung 7 - durch das Glas gefiltertes Licht

Abbildung 7 - durch das Glas gefiltertes Licht

Abbildung 8 - Button mit Beschriftung

Abbildung 8 - Button mit Beschriftung

Buchrezension

Coverimage
AJAX Hacks
Dynamische Webseiten mit AJAX programmieren - dieses Handbuch bietet einen praktischen Einblick.
[mehr]
Gimahhot - Shopping


Ferienwohnungen
TP-Partner
Sprachreise London
Webmasterpro
Computerhilfen
Computerhilfen
Eventagentur Hamburg
it-rechtsinfo.de
Designguide
Getreidemühlen
sk-typo3
Kochkurs Berlin
Maandiko.de
d. Webdesigner
PSD Tutorials
Medizin
Handy Forum

Hier könnte Ihre Werbung stehen

 >> INFO << 

\ Startseite | Forum | Impressum | nach oben | Seite zurück /