In diesem Beitrag möchte ich Ihnen eine ganz simple Methode vorstellen, wie Sie abgerundete Icons für Applikationen oder Ihre Webseite ganz einfach mit GIMP erstellen können. Die Methode ist wirklich sehr einfach und kann daher auch sehr gut von Einsteigern verwendet werden. Am Ende des Beitrags finden Sie auch die drei Quelldateien zum freien Download, damit Sie die Grafik des Beitrages auch selbst am Bildschirm in GIMP bearbeiten können.

Handy-Icon im Glaslook mit GIMP erstellt

Als Beispiel werde ich Ihnen die Erstellung eines Handy-Icons zeigen. Ich beginne mit einer neuen Datei und einer Bildauflösung von 300x300 Pixel. Zu Beginn existiert lediglich die weiße Hintergrundebene zu der eine neue , transparente Ebene hinzukommt. Sie trägt den Namen Handy-Body. Maskieren Sie ganz grob die Kontour eines Handys mit Hilfe von zwei Rechteckmasken (Antenne des Handys bitte nicht vergessen).

Maskieren Sie eine einfache Form

Füllen Sie den Inhalt der Maske mit einem grauen Farbverlauf (100, 100, 100 bis 200, 200,200). Es ist günstiger, wenn Sie sich für einen grauen Verlauf entscheiden, denn auf diese Weise müssen Sie sich noch nicht gleich zu Beginn der Arbeiten an diesem Icon für eine bestimmte Farbe entscheiden. Sie können das Icon dann später über Einfärben in den gewünschten Farbton bringen.

Legen Sie nun eine weitere neue und transparente Ebene mit dem Namen Handy-Display an. Mit Hilfe der Rechteckmaske deuten Sie ein Display auf dem Handy an. Füllen Sie diese Maske ebenfalls mit dem zuvor gewählten Farbverlauf in grau schräg von links oben nach rechts unten.

Das Dsiplay maskieren

Zum Schluss müssen Sie noch eine kleine Handytastatur erzeugen - dies ist aber auch gan simpel. Erzeugen Sie zunächst eine weitere neue Ebene und geben ihr den Namen Handy-Keyboard. Maskieren Sie erneut mit Hilfe der Rechteckmaske unterhalb des Displays einen Bereich der das Tastenfeld darstellen soll. Füllen Sie die Auswahl wiederum mit dem grauen Farbverlauf aus. In etwa könnten Sie ein Ergebnis haben, wie Sie es im folgenden Bild sehen.

Das Tastenfeld maskieren

Sie müssen jetzt lediglich das Tastenfeld noch in einzelne Tasten zerlegen - dies ist aber auch ganz einfach. Ziehen Sie dazu vom senkrechten und waagerechten Lineal zwei Hilfslinien ab und positionieren diese auf diese Weise, dass sie das Testefeld dritteln.

Hilfslinien setzen

Aktivieren Sie nun den Radierer (Tastenkombination Shift+E) und fahren an den Hilfslinien auf der Ebene Handy-Keyboard entlang. Sie können auch mit Hilfe der gedrückten Shift-Taste Linien ziehen. Der Radierer rastet in beiden Fällen sauber an den Hilfslinien ein und gewährt dadurch einen sauberen Linienzug. Als Größe für den Radierer können Sie Circle 09 verwenden.

Radieren an den Hilfslinien entlang um einzelne Tasten freizustellen

In etwa können Sie ein ganz ähnliches Ergebnis erhalten wie Sie es im Bild oben sehen können.

Nun ist es an der Zeit die Rundungen des Icons zu erstellen. Aktivieren Sie den Gaußschen Weichzeichner, indem Sie das Menü Filter - Weichzeichnen - Gaußscher Weichzeichner... anklicken.

Gaußscher Weichzeichner für alle Ebenen

Als Werte für die Weichzeichnung in horizontaler- und vertikaler- Richtung, können Sie 10 übernehmen. Wenn Sie eine Grafik haben die wesentlich größer als 300x300px ist, müssen Sie diese beiden Werte entsprechend größer veranschlagen. Bei kleineren Bildern natürlich entsprechend kleiner - logisch! Wenden Sie den Gaußschen Weichzeichner exakt mit der selben Einstellung auf alle Ebenen Ihrer Grafik an. Die weiße Hintergrundebene können Sie unverändert lassen.

Resultat des Weichzeichnens

Wenn Sie alle Ebenen, außer der Hintergrundebene, mit dem Gaußschen Weichzeichner entsprechend bearbeitet haben, sollte sich in etwa ein Bild zeigen, wie Sie es oben sehen können. Für jede einzelne Ebene Ihrer Grafik stellen Sie über das Menü Farben - Kurve... die folgende Kurve ein.

Wenden Sie diese Kurve auf alle Ebenen an

Achten Sie im Dialog Kurve bitte darauf, dass Sie als Kanal unbedingt Alpha eintragen. Die Kurve sollte so wie im Bild oben idealerweise genau mittig durch das Koordinatensystem verlaufen. Wenn Sie möchten, können Sie sich diese Einstellung über das Symbol Plus (oben rechts im Dialog) sichern, um die Kurve später erneut abrufen zu können.

Ergebnis

Wenn Sie die zuvor gezeigte Kurve auf jeden Alphakanal einer jeden Ebene (außer Hintergrund) angwendet haben, sollte sich auf Ihrem Bildschirm in etwa das Ergebnis aus dem Bild oben zeigen. Das Handy-Icon ist schon fast fertig. Ab hier folgen noch kleinere Nacharbeiten die Sie je nach Geschmack, Lust und Laune machen können wenn Sie möchten.

Ich empfehle Ihnen auf jeden Fall noch den Einsatz des Filters Schlagschatten. Rufen Sie im Menü Filter - Licht und Schatten - Schlagschatten... auf. Als X/Y-Abweichung geben Sie 0 ein, als Weichzeichner reichen 15px voll und ganz aus. Die Deckkraft stellen Sie am besten auf 100 Prozent.

Einstellung für den Schlagschatten

Führen Sie die Bearbeitung mit dem Schlagschatten für jede Ebene der Grafik aus. Am Ende der Bearbeitung sollten Sie in etwas das folgende Bild als Ergebnis am Bildschirm sehen.

Schattierte Ebenen

Wenn Sie möchten, können Sie natürlich die gleiche Kurve auf alle Schattenebenen anwenden um eventuell einen harten Rand zu erhalten statt eines weichen Schattens. Auch wenn Sie diesen Schatten bei verkleinert dargestellten Icons kaum noch sehen, gewinnt die Grafik trotzdem etwas an Tiefe - auch wenn es nur ganz kleine Icons sind.

Am Ende der Erstellung können Sie sich nun auch Gedanken zur Farbgebung machen. Über das Menü Farben - Einfärben... können Sie die bislang graue Grafik in einen ganz beliebigen Farbton Ihrer Wahl umsetzen. Für das folgende Beispiel habe ich die Standards des Dialoges Einfärben verwendet.

Komplett eingefärbt und nachbearbeitet

Zusätzlich habe ich mit Hilfe des Pfadwerkzeugs eine geschwungene Maske erstellt und diese auf einer eigenen Ebene mit einem Farbverlauf schwarz/weiß gefüllt. Diese Ebene steht im Modus Bildschirm. Danach habe ich noch weitere Ebenen erstellt die die kleinen Reflexionen als Kreise und Sterne enthalten. Aber dies soll lediglich nur eine Anregung meinerseits sein. Sie können die Grafik so gestalten wie es Ihnen gefällt.

Optional können sie der gesamten Grafik natürlich auch noch einen kleinen grauen Rahmen verpassen. Durch solche Rahmen wirken Bilder wie die so genannnten Magnetics. Diese kennen Sie sicherlich unter dem treffenden Begriff "Kühlschrankmagnete", die etwas hervorstehen und daher einen kleinen Schatten auf das weiße Metall werfen.

Zusätzlicher Rahmen

Den Rahmen können Sie jeder Zeit nachträglich mit dem Zauberstab erzeugen. Wenden Sie einfach den Zauberstab auf die Ebene Handy-Body an, invertieren die Maske und vergrößern diese um ca. 5 bis 10px. Füllen Sie die Maske mit einem helleren Farbverlauf (hellgaru zu grau, je nach Geschmack). Diese Ebene (Rahmen) müssen Sie natürlich ebenfalls schattieren (Schlagschatten). Wenn die Rundungen des Rahmens zu ausgefranzt erscheinen, können Sie auf den Rahmen den Weichzeichner und das Kurvenwerkzeug anwenden um saubere Kurven zu erhalten - genau die selben Schritte die Sie ja bereits im Forfeld schon auf jede Ebene angewendet hatten.

Download: handy-icon.xcf (Rohentwurf)

Download: handy-icon-weich.xcf (mit Weichzeichner)

Download: handy-icon-farbe-reflex.xcf (Eingefärbt und Reflexe)

Download: handy-icon-farbe-reflex-rahmen.xcf (als Magnetics mit Rahmen)

Hinweis: Für die Verwendung als Icons mit der Bildauflösung von ca. 32x32 Pixeln, ist der Kantenradius etwas zu klein. Die Abrunden würden bei diesem kleinen Bild kaum noch auffallen. Um dem entgegen zu wirken, müßten Sie den Weichzeichner mit 20 statt 10 Pixeln Radius ansetzen. Letztenendes ist dies aber reine Geschmackssache und hängt auch stark vom späteren Einsatzgebiet der Grafik ab.

Sie sollten sich aber auf jeden Fall die nativen XCF-Datein mit GIMP ansehen um verstehen zu können wie die Grafikerzeugung von abgerundeten Icons funktioniert.