Benny Design - Webdesign for everybody

Web 2.0 Button mit GIMP

In meinem heutigen Artikel zeige ich euch wie man mit GIMP (GNU Image Manipulation Program) einen Button für eine Web 2.0 Webseite erstellt.

Der fertige Button wird in etwa so aussehen:

Schritt 1:

Erstellt eine neue Datei mit der Größe 500 x 500, das Bild wird so groß gewählt, da es handlicher ist wenn man einen größeren Bereich zur Verfügung hat in dem man arbeiten kann.

Anschließend verwendet das Rectangle Select Tool mit folgenden Einstellungen:

• Rounded Corner – Radius: 15px
• Fixed Size – Width: 200 | Height: 70

Schritt 2:

Nun legen wir eine FG (Foreground) & BG (Background) Color fest.

Als FG Color nehmen wir #0099CC und als BG Color #00ABE3.

Der markierte Buttonbereich wird nun mit der FG Color gefült.

Das Ergebnis sollte so aussehen:

Schritt 3

Mittels Rechtsklick auf den markierten Bereich erscheint ein Menü wo wir folgendes auswählen.

Select – Shrink

Nun sollte sich ein Fenster öffnen wo wir angeben können wie weit Shrink wirken soll. (In unserem Fall 1px)

Schritt 4

In Schritt 4 wird auf dem neuem Layer der um 1px eingerückt ist das Blend Tool angwendet (Gradient).

Es wird von der horizontalen Mitte des markierten Bereichs begonnen und bis zur vertikalen Mitte gezogen. (Tipp: mit STRG erreicht ihr genau 90°)

Schritt 5

Als nächstes wird der Gloss Effekt im Button erstellt. Um dies zu realisieren klickt ihr wiederum auf die rechte Maustaste und bei Select auf None. Danach wählt ihr wieder das Rectangle Select Tool und stellt eine fixe Größe (190×32) und abgerundete Ecken (15px) ein.

Danach wählt ihr wiederum das Blend (Gradient) Tool und stellt als FG Color #FFFFFF und als BG Color Transparent ein.

Wendet das Blend Tool auf den markierten Bereich an und setzt die Opacity auf 70%.

Nach diesem Schritt wählt ihr wiederum das Rectangle Select Tool aus und setzt einen weißen Balken mit der Breite des Gloss Bereichs und der Höhe von 2px.

Dies sollte so aussehen:

Schritt 6

Im letzten Schritt wenden wir Gauß’schen Blur auf die “Linie” an und geben dem Button einen Schatten.

Wählt den Layer aus in dem die Linie gesetzt wurde und wählt unter Filters – Blur den Gauß’schen Blur aus.

Verwendet folgende Einstellungen:

Zum Abschluss wählt ihr noch den Layer aus in dem ihr den Button gesetzt habt und wählt unter Filters – Light and Shadow Drop Shadow aus.

Hier nochmal der fertige Button:

Ich hoffe ich konnte euch mit diesem Tutorial das Designen von Webseiten und Buttons in GIMP schmackhaft machen.

Bei Fragen und Problemen könnt ihr mich entweder unter klotz.benjamin@yahoo.de kontaktieren oder ihr könnt auch ein Kommentar hinterlassen.