![[AVATAR] Werde zu einem Na'Vi!](/images/tutorials/thumb173.jpg)
![GIMP 2.8 - Feature Preview [APRIL 2010]](/images/tutorials/thumb171.jpg)
Wir fangen damit an, indem wir die Form und Farbe unseres Buttons definieren:
Als erstes macht ihr eine neue Datei auf, 200*200 Px groß. Macht eine neue, transparente Ebene auf und zieht mit der elliptischen Auswahl einen Kreis.
In den Werkzeugeinstellungen könnt ihr die genaue Position und Größe des Kreises bestimmen .
Nehmt die Position 10/10 und stellt eine Größe von 180*180 ein. Füllt die Auswahl mit einer Farbe, ich habe ein Grau, #3c3c3c genommen
Ein einfacher Web 2.0-Button
In diesem Tutorial zeigt euch unser User A-Style wie man einen einfachen Web 2.0 Button für beispielsweise Warnungen, Hinweise oder Angebote auf einer Webseite erstellt.
Verwendete GIMP-Version: 2.6. Das Tutorial ist in
9 Schritte unterteilt; ein durchschnittlicher Benutzer benötigt
dafür ca. 10 min. Bisher 14194 Mal gelesen. Kategorie:
Buttons, Icons & Web, Schwierigkeit:
25 Kommentare wurden bisher geschrieben.
-
1
Zum Vergrößern klicken -
2
Als nächstes kümmern wir uns um die Form unseres Buttons:
Geht auf Auswahl: Alles Auswählen [Strg-A].
Geht auf Filter->Verzerren->Zacken und führt die Aktion mit folgenden Werten durch:
Periode:22
Amplitude: 2
Wellentyp: Könnt ihr beides nehmen sieht ähnlich aus, ich nehme Sinus.
Kanten:Umfalten
Kantenglättung:Aktiviert
Und Orientierung nehmt ihr erst Horizontal; und danach führt ihr dieselbe Aktion mit den gleichen Werten Vertikal durch.
Zum Vergrößern klicken -
3
Zum Vergrößern klicken -
4
Jetzt Beschriften wir den Button:
- Nehmt eine Schrift eurer Wahl und Beschriftet den Button mit eurem Schriftzug. Ich habe ein Hellblau #93cbff genommen und die Schriftart | Varsity |. Auf dem Button könntet ihr Zum Beispiel Schreiben : Neu!!! oder BETA oder ähnliches.
Ihr könnt den Schriftzug danach auch etwas drehen , auch das sieht gut aus...
Zum Vergrößern klicken -
5
Jetzt Vinniettieren wir den Button :
- Nehmt das Verlaufswerkzeug und nehmt die Standart Farben Schwarz und weis, oder drückt einfach die Taste D.
- Macht eine neue Ebene auf und zieht einen Verlauf von Rechts nach links.
- Stellt den Ebenen Modus auf „Überlagern“.
- Geht auf die Ebene mit dem Kreis und wählt im Kontextmenü Auswahl aus Alphakanal aus.
Zum Vergrößern klicken -
6
Zum Vergrößern klicken -
7
Als nächstes geben wir dem Button einen Glas Effekt:
- Macht eine neue Ebene auf und wählt das obere Drittel des Buttons aus.
- Füllt es mit Weiß und stellt die Ebenen Transparenz auf 18.
- Geht auf die ebene mit dem Kreis und wählt im Kontextmenü Auswahl aus Alphakanal aus.
- Geht auf die Ebene mit dem Glas Effekt und geht auf Auswahl -> Auswahl invertieren , oder drückt die Tasten [Strg-I].drückt Entfernen um die Auswahl zu löschen.
Zum Vergrößern klicken -
8
Kommen wir zum Schatten:
Wechselt zu der Ebene mit der Form des Buttons und geht auf Filter -> Licht und Schatten->Schlagschatten und führt die Aktion mit diesen Werten durch:
Versatz x und y : 0
Weichzeichnenradius: 20
Deckkraft: 80
Größenänderung zulassen: deaktiviert. -
9
Fertig! Speichert den Button zB als .png.
Tipp: In allen modernen Browsern könnt ihr bei pngs auch transparente Bildteile speichern.
Zum Vergrößern klicken
Dieses Werk unterliegt folgender Lizenz: Namensnennung-Keine kommerzielle Nutzung 3.0 Österreich
Verlinkungen (Pingbacks)
Kommentare
Hier können Sie Ihre Kommentare, Frage und Anregungen loswerden. Der Autor und die anderen Benutzer können Ihren Beitrag sehen und darauf antworten. Natürlich können Sie auch im Chat fragen.
http://www.gimpusers.de/tutorials/einfacher-web20-button.html 2 Bewertung(en) mit durchschnittlich 5.0 von 5 Sternen.
Die Kommentare sind chronologisch geordnet.