Wenn man wieder von diesen Photoshop-Tutorials ließt, die ja überall im Netz kursieren, dann wird man als Gimp Benutzer sehr schnell neidisch. Aber warum eigentlich? Gimp kann schließlich alles, was Photoshop kann (das ist zumindest mein Subjektives Gefühl) und hinkt ganz sicher auch nicht in Richtung Web2.0 Grafiken dem Adobe Programm hinterher. Um dies zu beweisen, hier ein kleines Tutorial zum Thema Web2.0 Buttons.
Als erstes, das Bild, welches wir erstellen wollen, als kleiner Anreiz zum Anstrengen. Ihr seht Rechts einen Atom (eine News-Feed Technologie) Button, in typischen Web 2.0 Farben. So typisch, dass ich extra in der Web 2.0 Farben-Palette (en) nachgesehen habe, um den Button zu erstellen.

Als erstes müssen die recherchierten Farben – #008C00 und #006E2E – als Vorder- bzw. Hintergrundfarbe eingefügt werden. Nachdem dies vollzogen ist, erstellt man ein neues Bild mit den Maßen 250×250 und der Hintergrundfarbe Transparent. Nun wählt man mit Strg+A den gesamten Inhalt des Bildes aus. Um ein abgerundetes Rechteck auszuwählen sucht man nun im Menü unter Auswahl->abgerundetes Rechteck den gewünschten Kantenradius aus – bei mir sind das die Standard 50%.

Daraufhin füllt man den ausgewählten Bereich mit einem linearen Farbverlauf. Farbverläufe werden in “Web 2.0″-Buttons & Co oft genutzt, da sie eine sonst flach wirkende Fläche optisch ansehnlich machen. Das Farbverlauf-Werkzeuge kann mit der Taste L geöffnet werden. Die normalen Einstellungen müssten stimmen: Ein linearer Farbverlauf von VG nach HG. Nun klickt man irgendwo unten in das ausgewählte Rechteck, hält die Maustaste sowie Strg gedrückt und zieht die enstehende “Linie” bis zur oberen Grenze des Bildes. Nach dem Loslassen sollte ein Farbverlauf enstanden sein, der bereits optisch ansprechend ist.

Jetzt soll ein Text in den Button eingefügt werden – in meinem Fall der Schriftzug Atom. Nach einem Klick auf die Taste T befindet man sich im Text-Werkzeug. Hier habe ich als Schrift Times New Roman in der Größe 80px und der Farbe weiß ausgewählt. Zusätzlich sollten sowohl die Checkbox Hinting als auch Auto-Hinting erzwingen und Kanten glätten ausgewählt sein, um ein schönes Schriftbild zu erreichen. Sind diese Einstellungen betätigt, kann man möglichs links in die Mitte des Bildes klicken und seinen Text eingeben – als kleiner Tipp: Großbuchstaben machen sich in diesem Fall besonders gut. Wurde der Text eingegeben muss er noch plaziert werden. Dazu drückt man die Taste M, woraufhin man den Text durch Ziehen der Maus bei gedrückter Taste positionieren kann. Achtung: Man muss auf den Text klicken, also auf einen Teil eines Buchstabens. Wenn man zwischen die Buchstaben klickt, dann verschiebt man den Hintergrund, was mit Strg+Z wieder rückgängig gemacht werden kann.

Als nächstes wollen wir einen in der Web 2.0 Szene sehr beliebten Spiegel-Effekt auf den Text anwenden. Dazu müssen wir zunächst den Ebenen-Dialog aufrufen (Strg+L), dann die Ebene mit dem Text verdoppeln (Rechtsklick auf Ebene->Ebene duplizieren, ausgewählt behalten) und sie schließlich vertikal Spiegeln (Umschalt+F, Richtung vertikal, auf das Bild klicken). Nicht wundern, das sieht momentan noch ein bisschen schräge aus. Um dieses zu ändern, benutzen wir mal wieder das Move-Tool (wer sich nicht mehr erinnert: M) um den gespiegelten Text nach unten zu verschieben, bis er genau an den Original-Text anschließt. Wer ganz genau ist, achtet darauf, dass in der Statuszeile während des Verschiebens keine horizontale Verschiebung (erste Zahl) existiert.

Um nun den Glanz-Effekt zu vollenden, begeben wir uns wieder in den Ebenen-Dialog (Strg+L). Hier klicken wir Rechts auf die Ebene, die den gespiegelten Text enthät und wählen Ebenenmaske hinzufuegen. In dem erscheinenden Dialog kann man alles so lassen wie es ist und ihn mit Hinzufügen bestätigen. Jetzt müssen wir als VG und HG-Farbe wieder Schwarz und Weiß auswählen. Daraufhin kann man mit einem Farbverlauf von der Mitte des gespiegelten Textes bis zum richtigen Text den Glanz-Effekt erzeugen (L, Farbverlauf Linear VG nach HG).

Alles was bleibt ist ein Schatten. Um diesen zu erzeugen müssen wir ersteinmal die Leinwand vergrößern, um Platz für ihn freizumachen. Dieses geht über die Menüpunkte Bild->Leinwandgröße. Ich schlage eine neue Größe von 300×300 px vor. Wichtig: Zentrieren klicken und bestätigen. Als nächstes erzeugen wir ein Duplikat der Ebene, die den Farbverlauf beinhaltet (Strg+L, Rechtsklick auf Ebene ->Ebene duplizieren). Nun wird das Perspektive-Werkzeug benutzt (Shift+P) um die oberen Ecken der neuen Ebene nach rechts unten zu ziehen. Das ist wohl der komplexeste Schritt im Tutorial, daher auch ein Bild, wie man es richtig macht.
Der Prozess muss mit einem Klick auf Transformieren bestätigt werden. Die Ebene sollte nun im Ebenen-Menü (Strg+L) mit den Pfeilen ganz nach unten geschoben werden. Um den Schatten schwarz zu machen, wählen wir nach einem Rechtsklick auf die Ebene den Punkt Auswahl aus Alphakanal und füllen den ausgewählten Bereich mit dem Füllwerkzeug schwarz (Umschalt+B, VG-Farbe, Ganze Auswahl füllen und ein Klick in die Auswahl). Nun kann man den Schatten noch mit Filter->Weichzeichnen->Gaußscher Weichzeichner mit dem Wert 12 verschönern.

Um das Bild web-tauglich zu speichern wählt man nun Bild->Sichtbare ebenen vereinen (oder Strg+M) und bestätigt mit Vereinen. Um die Größe der Datei zu verringern, wählt man noch Bild->Automatisch zuschneiden. Jetzt das ganze als PNG speichern und fertig ist unser Web 2.0 Button. Ich hoffe, euch hat dieses Tutorial Spaß gemacht. Wenn ihr Fragen oder Anmerkungen habt, oder auch wenn ihr euren eigenen Web 2.0 Button vorstellen wollt, dann würde ich euch die Kommentar-Funktion ans Herz legen.
Ich möchte euch auch nicht die Quelle der in dem Tutorial benutzten Techniker verheimlichen: Die sind allesamt aus Tutorials, die ich in der Linkliste bei Dr. Web gefunden habe.