In Zeiten des Web 2.0 sind vor allem Icons und Buttons beliebt geworden.

Da die meisten Tutorials für Photoshop gemacht wurden, darf hier ein Tutorial für GIMP natürlich nicht fehlen.

In diesem Tutorial zeige ich, wie man in wenigen Schritten und mit sehr geringem Aufwand einfache Web 2.0 Icons erstellen kann, die sich besonders für neue Projekte/Produkte eignen (z.B. die bekannten "BETA" Buttons).

Los geht's

Zuerst erstellen ein neues Bild mit einer beliebigen Größe (z.B. 400 x 400 Pixel).

Da wir in diesem Tutorial einen Button mit Zacken bzw. Spitzen erstellen werden, erstellen wir einen neuen Pinsel. Dazu klicken wir im Pinseldialog unten auf das Symbol.

Jetzt öffnet sich der Pinseleditor. Dort nehmen wir folgende Einstellungen vor:

• Form: Karo
• Radius: 100,0
• Spitzen: 20
• Härte: 1,00

Nun wählen wir die Vordergrundfarbe aus, die der Button haben soll.

Danach erstellen wir eine neue transparente Ebene, wählen das Pinselwerkzeug mit unseren eben erstellten Pinsel und klicken einmal ins Bild.

Nun machen wir eine Auswahl vom Button (Rechtsklick auf die Ebene > Auswahl aus Alphakanal) und verkleinern sie um 2 Pixel (Auswahl > Verkleinern...).

Danach erstellen wir eine neue transparente Ebene.

Als nächstes stellen wir die Vordergrundfarbe auf weiß, wählen das Verlaufswerkzeug, setzen den Farbverlauf auf "VG nach Transparent" und ziehen den Verlauf auf der Auswahl von oben nach unten. Die Deckkraft setzen wir auf ca. 85%.

Nun erstellen wir wieder eine neue transparente Ebene und umranden die Auswahl (Auswahl > Rand ...). Dort geben wir 1 Pixel an.

Jetzt wiederholen wir den Schritt von eben. Mit dem Verlaufswerkzeug ziehen wir einen Verlauf von oben nach unten (VG nach Transparent). Anschließend heben wir die Auswahl wieder auf und wenden den graußschen Weichzeichner mit 1 Pixel an (Filter > Weichzeichnen > Graußscher Weichzeichner ...).

Je nach Farbe kann die Deckkraft noch etwas runtergeschraubt werden.

Zum Schluss erstellen wir dann noch einen Text und das war's schon.

Das Ergebnis

Das Ergebnis kann sich für den geringen Aufwand doch sehen lassen:

Auch interessant:

• GIMP Tutorial #1 – Schneebedeckter Text
• GIMP Tutorial #2 – 3D Produktboxen
• Web-Tuts.de – Rückblick von 7 Wochen
• 25+ aktuelle Cheat Sheets für Webworker
• 16 nützliche Firefox-Addons für Webworker

Im zweiten GIMP Tutorial wird gezeigt, wie man in wenigen Schritten professionelle 3D-Boxen erstellen kann. Diese können z.B. für Dienstleistungen oder digitale Produkte verwendet werden.

In GIMP gibt es einen Filter, mit dem man Ebenen auf Objekte abbilden kann. Dadurch wird das Erstellen von 3D-Boxen total einfach, da wir die 3D Objekte gar nicht selber erstellen müssen.

Los geht's

Da wir in diesem Tutorial ein Raster verwenden, legen wir als erstes die Abstände des Rasters in den Voreinstellungen fest (Bearbeiten > Einstellungen > Standardraster). Als Breite und Höhe wählen wir 40 Pixel.

Als nächstes erstellen wir ein neues Bild mit einer Größe von 400 x 500 Pixel.

Danach blenden wir das Raster ein (Ansicht > Raster anzeigen) und machen es magnetisch (Ansicht > Magnetisches Raster).

Nun erstellen wir eine neue transparente Ebene.

Wir wählen das rechteckige Auswahlwerkzeug und ziehen eine Auswahl für die Frontseite der 3D-Box (240 x 320 Pixel). Diese füllen wir erstmal mit einer grauen Farbe, damit wir die Ebene auf weißem Hintergrund besser erkennen können.

Links daneben machen wir das selbe für die rechte (von uns aus gesehen linke) Seite der 3D-Box. Dazu heben wir die Aushwal wieder auf (Auswahl > Nichts auswählen) und erstellen eine neue Ebene. Nun ziehen wir wieder eine Auswahl und füllen diese mit einem etwas dunkleren Grau. Anschließend heben wir die Auswahl wieder auf.

Das ganze sieht dann ungefähr so aus:

Jetzt könnt ihr mit dem Designen anfangen. Hier könnt ihr eurer Kreativität freien Lauf lassen. Zum Thema Cover-Design schreibe ich noch ein eigenes Tutorial.

Tipp: Um beide Seiten am Design anzupassen, könnt ihr eine Auswahl von beiden Seiten erstellen und später wieder aufteilen. Bei mir sieht das ganze so aus:

Es wird Zeit das Projekt zu speichern, damit wir später Änderungen vornehmen können.

Jetzt vereinen wir alle Ebenen die zur Frontseite gehören auf eine Ebene, damit nur noch eine Ebene für die Frontseite existiert. Dazu machen wir nur die Ebenen sichtbar, die zur Frontseite gehören und wählen im Kontextmenü "Sichtbare Ebenen vereinen" (rechte Maustaste > Sichtbare Ebenen vereinen ...). Das selbe machen wir mit den Ebenen für die andere Seite. Die beiden Ebenen benennen wir jetzt um in "Front" und "Seite". Übrig bleiben also nur noch 3 Ebenen: "Front", "Seite" und "Hintergrund".

Nun kommt der wichtigste Schritt, damit wir die 3D-Box erstellen können. Wir müssen die Ebenen auf die richtige Größe zuschneiden. Dazu wählen wir die Front-Ebene und machen eine Auswahl aus dem Alphakanal (rechte Maustaste > Auswahl aus Alphakanal). Danach wählen wir Ebene > Auf Auswahl zuschneiden. Wir heben die Auswahl wieder auf und machen das selbe mit der anderen Ebene.

Wer das Raster noch nicht ausgeblendet hat, sollte dies jetzt tun.

Kommen wir zum 3D-Objekt. Wir erstellen eine neue transparente Ebene oberhalb der anderen Ebenen. Danach wählen wir Filter > Abbilden > Auf Objekt abbilden...

Bei "Abbilden auf" wählen wir "Quader" und aktivieren die Option "Transparenter Hintergrund". Im Reiter "Licht" wählen wir als Lichtquellentyp "Keine Lichtquelle". Im nächsten Reiter "Ausrichtung" stellen wir den Wert Y bei der Rotation auf -15,0.

Im letzten Reiter "Quader" wählen wir als Vorderseite unsere Front-Ebene und bei "Rechts" unsere Ebene "Seite". Zum Schluss setzen wir noch bei der Skalierung folgende Werte.

X-Skalierung: 0,45
Y: 0,50
Z: 0,20

Und das war's auch schon Wenn das ganze etwas unscharf ist, können wir auch noch den Filter "Unscharf maskieren" anwenden.

Das Ergebnis

Mit Farben > Einfärben ... können wir die Farbe auch beliebig ändern.

Auch interessant:

• GIMP Tutorial #1 – Schneebedeckter Text
• GIMP Tutorial #3 – Nützliche Web 2.0 Buttons
• Web-Tuts.de – Rückblick von 7 Wochen

GIMP ist ein kostenloses und plattformunabhängiges Open Source Bildbearbeitungsprogramm.

Die Meinungen über GIMP gehen ziemlich weit auseinander. Während die einen gar nichts davon halten, sehen es die anderen als Alternative zu Photoshop.

Ich persönlich nutze GIMP sehr oft und bin damit zufrieden. Aus diesem Grund starte ich eine Reihe von GIMP Tutorials. In diesem ersten Tutorial geht es um das einfache Erstellen von schneebedecktem Text (passend zum Winter).

Los geht's

Als erstes erstellen wir ein neues Bild. Als Größe habe ich 400 x 300 Pixel gewählt.

Nun nehmen wir das Textwerkzeug und erstellen einen Text. Die Schriftgröße sollte nicht zu klein sein. Ich habe Arial Bold mit einer Größe von 82 Pixel gewählt.

Kommen wir nun zum Schnee. Zunächst ändern wir die Hintergrundfarbe, damit der Schnee beim Erstellen besser zu erkennen ist. Dazu klicken wir auf die Hintergrundebene, wählen als Hintergrundfarbe ein knalliges Blau und füllen die Ebene mit dieser Farbe (Bearbeiten > Mit Hintergrundfarbe füllen).

Nun erstellen wir eine neue transparente Ebene oberhalb der Textebene. Wir wählen das Pinselwerkzeug mit einer großen, harten Pinselspitze und malen den Schnee auf dem Text. Dazu muss die Vordergrundfarbe natürlich auf weiß gestellt werden.

Die Feinheiten kann man danach mit einer kleineren Pinselspitze und mit dem Radierwerkzeug machen, während man etwas ranzoomt (+ drücken).

Als nächstes machen wir eine Auswahl vom Schnee (rechte Maustaste auf die Schnee-Ebene > Auswahl aus Alphakanal) und wählen Auswahl > Rand.

Dort geben wir 1 Pixel an und bestätigen mit OK.

Danach drücken wir STRG+C und STRG+V um die Auswahl auf eine neue Ebene zu kopieren. Wir bestätigen das ganze, indem wir auf das Neue-Ebene-Symbol klicken.

Nun machen wir eine Auswahl der erstellten Ebene (rechte Maustaste > Auswahl aus Alphakanal), wählen als Vordergrundfarbe ein mittleres Blau und füllen die Auswahl mit dieser Farbe (Bearbeiten > Mit Vordergrundfarbe füllen). Anschließend heben wir die Auswahl wieder auf (Auswahl > Nichts auswählen).

Jetzt können wir die Hintergrundebene wieder mit weiß füllen.

Wir wählen wieder die Rand-Ebene und wenden den Filter "Graußscher Weichzeichner" an (Filter > Weichzeichnen > Graußscher Weichzeichner). Als Wert geben wir 1,8 Pixel an.

Zum Schluss ändern wir noch die Deckkraft auf ca. 50%

Wer will kann noch einen Windeffekt hinzufügen (Filter > Verzerren > Wind).

Das Ergebnis sieht dann so aus:

Auch interessant:

• GIMP Tutorial #3 – Nützliche Web 2.0 Buttons
• Web-Tuts.de – Rückblick von 7 Wochen
• GIMP Tutorial #2 – 3D Produktboxen
• Sichere Formulare – Teil 1
• Content-Spoofing – Teil 1 – JavaScript