Aufmacher

Ikonen-Malerei

Eigene Icons mit Inkscape

01.05.2007
Mit Inkscape erstellen Sie im Handumdrehen skalierbare Icons für KDE, Gnome oder Ihre Webseite.

Vektorgrafiken lassen sich im Gegensatz zu Pixelgrafiken verlustfrei vergrößern und deswegen überall dort einsetzen, wo Pixel an ihre unscharfen Grenzen stoßen. Ein beliebtes und mächtiges Programm für vektorbasiertes Zeichnen unter Linux ist Inkscape. Wir demonstrieren im folgenden, wie Sie mit drei Kreisen und einem Stern ein schickes Programmsymbol wie in Abbildung 1 erstellen.

Abbildung 1: Dieses Icon erstellen Sie im Verlauf des Workshops.

Das erstellte Icon können Sie übrigens als Grundlage für eigene Symbole verwenden: Sie müssen dazu nur das eingearbeitete Symbol (hier ein Stern) entfernen und durch ein anderes ersetzen. Vergessen Sie während der Arbeit nicht, Ihr Dokument regelmäßig abzuspeichern. Inkscape sichert seine Dokumente standardmäßig im SVG-Format.

Alle gängigen Distributionen bringen bereits fertige Inkscape-Pakete mit, die Sie nur noch über den Paketmanager einzuspielen brauchen. Auf der Projektseite von Inkscape [1] finden Sie zwar auch die Quellen, das Übersetzen im Alleingang bleibt aufgrund zahlreicher Abhängigkeiten jedoch eher erfahrenen Anwendern vorbehalten.

Die Benutzeroberfläche

Obwohl Inkscape ein mächtiges Werkzeug ist, gestaltet sich die Benutzeroberfläche recht intuitiv. Sie teilt sich in fünf Bereiche auf (siehe Abbildung 2):

  • Menü- und Symbolleiste
  • Werkzeugleiste und Leiste für Werkzeugoptionen
  • Arbeitsfläche
  • Farbleiste
  • Statusleiste
Abbildung 2: Inkscape wartet mit einer intuitiv zu bedienenden Benutzeroberfläche auf, die sich in fünf Bereiche unterteilt: Menü- und Symbolleiste (1), Werkzeugleiste und Leiste für Werkzeugoptionen (2), Arbeitsfläche (3), Farbleiste (4) und Statusleiste (5).

Die Menüleiste fasst sämtliche Funktionen des Programms unter verschiedenen Menüpunkten zusammen. Die wichtigsten Funktionen erreichen Sie zudem über die Icons der Symbolleiste darunter. Ganz links finden sich Dateifunktionen wie Öffnen, Speichern oder Exportieren, danach die Copy/Paste-Schalter sowie die gängigsten Programmwerkzeuge.

Unterhalb der ersten Symbolleiste führt eine weitere Leiste die gebräuchlichsten Werkzeugoptionen auf. Je nachdem, welches Tool Sie auswählen, ändert sich die angebotenen Icons automatisch. So erhalten Sie stets unmittelbaren Zugriff auf die wichtigsten Eigenschaften eines Werkzeugs.

Die Werkzeugleiste am linken Fensterrand enthält alle Tools, die Sie zum Arbeiten mit Inkscape benötigen. Innerhalb der Tooltips dieser Werkzeuge stehen auch die entsprechenden Tastenkürzel, mit denen man diese Funktionen auch ohne Maus aufrufen kann. Wenn Sie sich ein wenig durch Menüleiste klicken, sehen Sie, dass neben fast jedem Eintrag ein Tastenkürzel steht.

Im unteren Teil des Inkscape-Fensters residiert eine Farbleiste, aus der Sie schnell bestimmte Farben auswählen. Darunter liegt eine Statusleiste, die ein Ausklappmenü beherbergt. Dieses dient dazu, Ebenen auszuwählen.

Grundlagen schaffen

Nachdem Sie Inkscape gestartet haben, liegt vor Ihnen ein leeres Dokument, das Sie nun ein wenig verändern. Wählen Sie dazu zunächst aus dem Menü Datei den Punkt Dokumenteneinstellungen. Tragen Sie dort unter dem Reiter Seite im Bereich Benutzerdefinierte Zeichenfläche als Einheit px (Pixel) und als Format 300 Pixel Breite und 300 Pixel Höhe ein. Einen Schalter müssen Sie zur Bestätigung nicht drücken, schließen Sie einfach das Einstellungsfenster: Inkscape dimensioniert das Dokument Ihrer Eingabe entsprechend. Damit Sie optimal arbeiten können, drücken Sie einmal auf die Taste [5]. Inkscape passt daraufhin das Dokument dem Programmfenster an.

Einen Kreis zeichnen

Wählen Sie nun über einen Druck auf [F5] das Kreiswerkzeug aus. Der Mauszeiger verändert sich vom Pfeil zu einem Fadenkreuz mit angehängtem Kreis. Achten Sie darauf, dass in den Werkzeugoptionen unterhalb der Menüleiste die Werte für Anfang und Ende auf 0.000 stehen.

Ziehen Sie nun mit gedrückter [Strg]- und linker Maustaste einen Kreis von der oberen, linken Ecke des Dokuments bis zur unteren, rechten Ecke. Der Kreis darf dabei nicht über die Grenzen des Dokuments hinausgehen. Falls Sie sich mit dem Werkzeug unsicher fühlen, scheuen Sie sich nicht, damit ein wenig zu üben.

Ein schlichter Kreis reicht für das zu erstellende Icon aber noch nicht aus. Drücken Sie [F1] und wählen Sie mit einem einfachen Mausklick den Kreis an, sofern er nicht schon ausgewählt ist. Drücken Sie nun die Tastenkombination [Strg]+[Umschalt]+[F], um das Optionsfenster Füllung und Kontur (siehe Abbildung 3) aufzurufen. Wählen Sie unter dem Reiter Füllung das Symbol Zielfarbe aus. Das ist das zweite Symbol von links unter der Reiterüberschrift. Tragen Sie in das Feld RGBA den Farbwert 0022f7ff ein, was einem satten Blau entspricht. Zu guter Letzt entfernen Sie noch die Konturlinie, indem Sie auf den Reiter Farbe der Konturlinie wechseln und auf das Kreuz unter dem Reiter klicken.

Abbildung 3: Der linke Kreis enthält einen linearen Farbverlauf. Darüber wird in einem zweiten Schritt ein weiterer Kreis mit einem radialen Verlauf gelegt (rechts).

Schließen Sie das Optionsfenster und wählen Sie mit [Strg]+[F1] das Farbverlaufswerkzeug aus. Dessen Symbol ist das zweite von unten auf der Werkzeugleiste. Ziehen Sie nun mit gedrückter linker Maustaste eine Verlaufslinie von der oberen linken Ecke des Dokuments nach unten rechts zum Rand des Kreises, sodass sein unterer, rechter Rand stark verblasst ist (siehe Abbildung 4 links).

Abbildung 4: Der linke Kreis enthält einen linearen Farbverlauf. Darüber wird in einem zweiten Schritt ein weiterer Kreis mit einem redialen Verlauf gelegt (rechts).

Die Schattenseite

Als nächstest soll der Kreis eine dreidimensionale Anmutung erhalten. Dazu erstellen Sie zunächst eine neue Ebene: Klicken Sie in der Menüleiste auf Ebene | Ebene hinzufügen, geben Sie der neuen Ebene den Namen 3D-Schatten und klicken Sie auf Hinzufügen. Sie befinden sich nun auf der neu erstellten Ebene.

Klicken Sie erneut auf den Kreis und kopieren Sie ihn mit [Strg]+[C] in den Zwischenspeicher. Durch die Auswahl des Kreises wurden Sie wieder zurück auf die Ebene 1 gelotst, wechseln Sie daher über das Ausklappmenü unterhalb der Farbleiste wieder auf die Ebene 3D-Schatten. Fügen Sie dort den Kreis aus dem Zwischenspeicher über Bearbeiten | Am Originalort einfügen in der Menüleiste ein.

Öffnen Sie wieder das Optionsfenster Füllung und Kontur. Dabei muss der Kreis ausgewählt sein. Der Farbverlauf dieses Kreises entspricht exakt jenem des Kreises auf der Ebene 1. Da Sie dem neuen Kreis gleich einen anderen Verlauf geben werden, müssen Sie den alten Verlauf zunächst durch einen Klick auf Duplizieren vervielfältigen. Oberhalb des Schalters Duplizieren steht nun ein anderer Name für den neuen Verlauf. Das bedeutet, dass Sie den Farbverlauf für den neuen Kreis verändern können, ohne dadurch den Verlauf des ersten Kreises zu beeinflussen.

Ändern Sie nun den Verlauf in einen radialen Farbverlauf. Klicken Sie dazu auf den vierten Schalter unter dem Reiter Füllung. Anschließend wechseln Sie mit einem Klick auf Bearbeiten in den Farbverlaufs-Editor. Ganz oben in diesem Fenster ist der Farbverlauf angedeutet. Darunter führt ein Ausklappmenü die Anfangs- und Endfarbe des Verlaufs auf.

Allerdings führt die Bezeichnung der beiden Farben ein wenig in die Irre: Beide Namen beginnen mit "stop". Bei der oberen Farbe handelt es sich um die momentan aktive Anfangsfarbe. Ändern Sie den RGBA-Wert auf b166f7ff. Wählen Sie dann die Endfarbe aus und tragen Sie dort als RGBA-Wert 000000ab ein. Das Ergebnis ähnelt dem Kreis auf der rechten Seite von Abbildung 4.

Stern

Fügen Sie wieder eine neue Ebene ein, die sie Symbol nennen. Auf dieser Ebene wird das Symbol platziert, das eine Funktion oder ein Programm repräsentieren soll. Im vorliegenden Beispiel soll dazu ein schlichter Stern dienen, den Sie noch ein wenig manipulieren.

Wählen Sie das Stern- und Polygon-Werkzeug aus der Werkzeugleiste aus, setzen Sie den Mauszeiger in der Mitte des Kreises an und ziehen Sie bei gedrückter linken Maustaste einen Stern auf. Achten Sie dabei darauf, dass Sie sich tatsächlich auf der Ebene Symbol befinden. Sie können sich bei den folgenden Anweisungen an Abbildung 5 orientieren.

Rufen Sie wieder das Optionsfenster Füllung und Kontur auf und wählen Sie unter Füllung das zweite Symbol (Zielfarbe) aus. Als RGBA-Wert dieser Farbe tragen Sie diesmal e5d5ffff sein. Sie drehen den Stern bei Bedarf noch manuell, indem Sie ihn auswählen und nochmals anklicken. Die Pfeile an den Kanten und Ecken des Auswahlrahmens verändern sich daraufhin und geben nun Drehrichtungen an. Zum Drehen greifen Sie mit der gedrückten linken Maustaste einen der Pfeile und rotieren durch Bewegung der Maus den Stern so lange, bis er Ihren Ansprüchen genügt.

Da der Stern ein wenig zu symmetrisch aussieht, soll er nun mit der Scheren-Funktion transformiert werden. Wählen Sie dazu bei ausgewähltem Stern den Menüpunkt Objekt | Verändern an oder drücken Sie [Strg]+[Umschalt]+[M]. Im daraufhin erscheinenden Dialog klicken Sie den Reiter Scheren an und geben Sie unter Horizontal beispielsweise 18.000 ein. Werte größer Null verdrehen die Figur nach rechts, negative Werte nach links. Nach einem Klick auf den Button Anwenden wird der Stern geschert.

Abbildung 5: Auf dem linken Kreis sieht man den zentrierten und gescherten Stern. Dieser wurde auf dem rechten Kreis mit einem einfachen Lichteffekt stilvoll in Szene gesetzt.

Lichteffekt

Zeichnen Sie nun einen weiteren Kreis in etwa derselben Größe wie der Stern. Wählen Sie dann das Farbverlaufswerkzeug aus und ziehen Sie eine Verlaufslinie von oben links nach unten rechts. Setzen Sie die Maus aber diesmal schon nach ungefähr zwei Dritteln der Kreisdiagonalen ab.

Rufen Sie nun wieder das Optionsfenster Füllung und Linie auf und klicken Sie auf das Quadrat für einen linearen Farbverlauf. Duplizieren Sie zur Sicherheit den Verlauf und passen Sie nach einem Klick auf Bearbeiten seine Anfangs- und Endfarbe an: Für den Anfang lautet der RGBA-Wert e5d5ffff, für das Ende e5d5ff00.

Platzieren Sie zu schließlich den Kreis ein wenig unterhalb der oberen Grenze des großen, hinteren Kreises mit einer Tendenz nach rechts. Greifen Sie danach mit der Maus den unteren rechten Pfeil des Auswahlrahmens und stauchen Sie den Kreis so, dass er an die obere rechte Grenze des hinteren Kreises stößt, wie auf Abbildung 5 rechts zu sehen.

Ihr erstes mit Inkscape erstelltes Icon nun fertig. Nachdem Sie es im SVG-Format gespeichert haben, können sie es beispielsweise als Icon für ein Programm ihrer Wahl verwenden, zum Beispiel für die KDE-Kontrollleiste in Abbildung 6. Aber auch Gnome kann mit Icons im SVG-Format problemlos umgehen.

Möchten Sie weitere eigene Symbole erstellen, dann löschen Sie einfach den Stern und zeichnen mit Freihandlinien ([F6]) oder dem Werkzeug für gerade Linien ([Umschalt]+[F6]) eigene Symbole. Als Orientierungshilfe legen Sie sich bei Bedarf in den Dokumenteneinstellungen ([Strg]+[Umschalt]+[D]) ein Raster an. Besonders schöne Linien erzeugt etwa das Kalligrafie-Werkzeug ([Strg]+[F6]).

Abbildung 6: Der Icon lässt sich für jedes Programm in der KDE-Kontrollleiste verwenden.

Hilfe und Fazit

Unter dem Menüeintrag Hilfe bietet Inkscape unter anderem eine englischsprachige Übersicht sämtlicher Tastenkürzel. Allerdings gerät diese "Übersicht" aufgrund der vielen durch Tasten zugänglichen Funktionen tatsächlich reichlich unübersichtlich. Unter Hilfe | Einführungen finden Sie weitere Hinweise und Tutorials zum Programm. Daneben existiert für Inkscape auch ein inoffizielles deutsches Handbuch [2].

In diesem Workshop haben Sie mit einfachen Mitteln bereits viel erreicht: Drei Kreise und ein Stern reichen aus, um ein modernes Icon zu gestalten. Dabei haben Sie jedoch nur einen Bruchteil von Inkscapes Funktionsumfang genutzt. Mithilfe der Programmdokumentation und vor allem eigener Experimente erkunden Sie Inkscapes Möglichkeiten weiter und werden das vielseitige Grafikprogramm bald nicht mehr missen mögen.

Glossar

Vektorgrafiken

Vektorgrafiken lassen sich verlustfrei skalieren und bestehen aus Linien, Kreisen und Polygonen. In vielen Bereichen können Sie besser eingesetzt werden als Pixelgrafiken.

SVG-Format

SVG ist ein Standard zur Beschreibung zweidimensionaler Vektorgrafiken in der Metasprache XML. Das XML-Dateiformat ermöglicht es, dass SVG-Dateien mit einem Texteditor geöffnet werden können. Sie können unter Bearbeiten | XML-Editor verfolgen, wie sich Ihre Änderungen im Dokument in der XML-Datei niederschlagen.

Tooltips

Tooltips sind Informationen über die Funktion eines Symbols oder das Ziel eines Links in einem Web-Browser. Sie werden angezeigt, wenn man einen kleinen Augenblick über einem Symbol verharrt.

RGBA

Der RGBA-Farbraum ist ein festgelegtes Farbmodell. Die Abkürzung steht für Rot-Grün-Blau und den Alpha-Kanal. Letzterer gibt den Grad der Transparenz an.

Infos

[1] Inkscape-Projektseite: http://sourceforge.net/projects/inkscape

[2] Inoffizielles Handbuch: http://wiki.inkscape-forum.de

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 

Ähnliche Artikel

Kommentare