Inkscape 192 – Icon Sets erstellen, OSM Plugin

Der Beitrag zeigt die Entstehung von verschiedenen Icons die alle den gleichen Shape (Form, Gestalt) haben. Beschrieben werden Aspekte der Gestaltung und die Umsetzung und Anpassung. Angefertigt wurden sie für das WordPress-OSM-Plugin.

Skills: Easy
Plugins: Nein

Downloadlink zum fertigen Iconset (Lizenz CC0): Download all Sets here
Wordpress OSM Plugin von MiKa: OSM Plugin Home
Informationen zur CC0-Lizenz: CC0 1.0 Universell (CC0 1.0)

 

Dieser Beitrag beschreibt nicht die entstehung eies einzelnen Icons mit seiner äußernen Form (Shape) und dem Symbol, sondern zeigt die allgemeine Vorgehensweise auf um solche Icons zu erstellen.

 

Grundform – Korpus

Die Grundform besteht aus einem tropfenförmigen Objekt in Schwarz mit einer runden weißen Füllung. Vorzugsweise verwendet man statt Schwarz lieber ein Anthrazit (Hex-Farbwert: #030303ff) und ein Hellgrau für die Füllung.

Die nach unten gerichtete Tropfenform lässt sich leicht aus einem Kreis und einem Dreieck modellieren. Die Vorgabe in diesem Fall war, dass das Icon (die Bounding Box) eine Fläche von 32×41 Pixel haben sollte. Dazu wurde ein Rechteck aufgezogen auf dem die Icon-Objekte später platziert werden (siehe Bild unten, links).

Die Tropfenform besteht aus den zwei Einzelteilen. eine Kreisform mit 32×32 Pixel, an die ein Quadrat (Raute) mit den gleichen Maßen angehangen wird (siehe Bild oben).

Den Kreis platziert ihr auf der Grundfläche, Oberkante an Oberkante. Das Quadrat wird um 45 Grad zu Raute rotiert und Unterkante an Unterkante positioniert. Die Transparenz wurde etwas reduziert, damit freie Sicht auf die Überlagerung entsteht. Dann skaliere ihr das Karo so, dass die Eckkanten der Raute an den Kreis heranreichen (siehe Bild unten).

Ein weiteres Rechteck kommt hinzu, was verwendet wird das Karo an dem Bereich wo sich Kreis und Karo-Kanten treffen zuzuschneiden. Das gelbe Rechteck liegt über dem Karo und beschnitten wird es mit dem Shortcut STRG-Minus oder Pfad – Differenz (siehe Bild unten).

Bevor die Formen Dreieck und Kreis verschmelzt werden, fertige ihr mit STRG-D ein Duplikat des Kreises an. Das Duplikat liegt wie immer deckungsgleich über dem Original. Das Duplikat wird auf 27 x 27 Pixel herunter skaliert und mit dem leichten Grauton #efefefff eingefärbt (siehe Bild unten).

Beiden Formen (Kreis und Dreieck) können nun mit STRG-+ oder über Pfad – Vereinigen miteinander verschmolzen werden. Markiert ihr die Form nun mit dem Pfad bearbeiten-Werkzeug fällt auf, dass sich an den Stellen wo Kreis und Dreieck verschmolzen worden sind zwei zusätzliche Nodes gebildet haben. Die beiden äußeren davon markiert und löscht ihr einfach (siehe Bild unten).

Damit ist die Grundform fertig (siehe Bild unten).

 

 

Piktogramme

Piktogramme wurden schon mehrmals behandelt. Der Aufbau ist einfach. Für menschlicke Köper verwendet man meist eine Kreisform für den Kopf und Linien aus Pfaden, mit den entsprechenden Kontureigenschaften für die Körperteile (siehe Bild unten).

Gesteuert werden können die Konturen über die Kontur Stärke und beispielsweise runde Enden, sowie im Bedarfsfall abgerundete Ecken (siehe Bild unten).

Wichtig ist, falls ihr Einzelteile skalieren möchtet, dass eingestellt wird das sich die Kontur der Skalierung anpasst (siehe Bild unten).

Günstig bei den Pfadlinien ist, dass zwischen zwei Nodes (Knotenpunkten) per Klick mit gedrückter STRG und ALT Taste zusätzliche Nodes hinzugefügt werden können. Über diese zusätzlichen Knoten ist es möglich die Figur eine Haltung einnehmen zu lassen. Kopf und Arme rückt man entsprechend nach (siehe Animation unten).

Eine Wellenlinie oder auch zwei untereinander würden dann schon in bescheidenem Maße einen Schwimmer darstellen. Als Icon würde das einem Hinweis auf Badegewässer symbolisieren.

 

Nodes hinzufügen

Zum Hinzufügen von Nodes können zwei Punkte markiert werden und statt dem Mausklick mit gleichzeitig gehaltener STRG- und ALT-Taste den entsprechenden Button aus oberen Leiste klicken (siehe Bild unten).

 

Objekte Schneiden

Das Objekte geschnitten werden müssen kommt in der Vektorgrafik oft vor. Das Beispiel zeigt eine Brücke, eckig gebaut und damit zu groß für das Icon, wird modelliert und passend für den Icon zugeschnitten.

Die Brücke selbst besteht/bestand aus 5 Objekten. Ein Balke oberhalb als Brückengeländer. Die Brückenpfeiler bestehen aus 3 Brückenbögen. Die Brückenbögen bestehen aus drei Ovalen die mit STRG-+ oder Pfad – Vereinigen zusammengefasst sind, die anschließend mit STRG-Minus oder Pfad – Differenz von der Brücke ausgeschnitten wurden (siehe Bild unten).

Um geschnitten zu werden, muss ein Objekt aus einem Stück bestehen. Das bedeutet, dass alle Einzelteile der Brücke erst in Pfadobjekte und Konturen in Pfade umgewandelt werden. Erst dann lassen sie sich mit STRG-+ oder über Pfad – Vereinigen zusammenfassen (siehe Bild unten).

Um die Brücke in die Kreisform einzupassen wird zunächst der innere, grauen Kreis des Icon dupliziert. Das Duplikat legt sich wie immer ganz nach oben, über die Brücke. Dann skaliert man den Kreis mit gehaltener STRG und ALT Taste so damit ein leichter Rand zum Inneren des Icons entsteht. Danach markiert ihr die Brücke hinzu und wendet STRG-* (Sterntaste auf dem Numpad) oder Pfad – Überschneidung an (siehe Animation unten).

Eingefärbt und die untersten Nodes der Brückenpfeiler ein wenig nach unten gezogen, sieht das Icon fertig dann aus wie im Bild unten.

 

Gestaltung & Proportionen

Die Brücke ist ein gutes Beispiel für Abstände zwischen Objekten. Die Brücke und Asphaltdecke oder Geländer ist eigentlich relativ groß. Gemeint ist eigentlich eine Fläche direkt über den Brückenbögen. Aber: Durch die Verkleinerung der Icons würde der Abstand am Ende so gering ausschauen/wirken, dass man besser einen etwas größeren Werte für den Abstand wählt (siehe Animation unten).

 

Weitere Techniken

Oft verwendet werden auch das Ausrichten-Werkzeug im Zusammenhang mit Nodes. Markierte Nodes können mit Inkscape in ausreichendem Maße angeordnet werden. Der Ausrichten-Dialog ändert sich mit der Auswahl des Werkzeugs (Auswahlwerkzeug, Pfad bearbeiten-Werkzeug).

Die Vorzüge des Node Ausrichtens wird bei der Darstellung von Wasser sehr deutlich. Man kann eine beliebig unregelmäßige ZickZack-Linie anlegen. Im Beispielbild unten wurde vorsätzlich unsauber gearbeitet (siehe Animation unten).

Zuerst markiert ihr nun die obere Reihe und richte die Nodes horizontal aus. Danach die untere Reihe und zum Schluss verteilt ihr alle Nodes in gleichmäßigem Abstand (siehe Bild unten).

Die Rundungen für die Wellenform erhaltet ihr indem ihr alle Nodes markiert und sie gemeinsam über den entsprechenden Icon in der oberen Leiste symmetrisch abrundet (siehe Animation unten).

Ist die Linie zu unruhig, markiere man eine Reihe, hier die obere, und verschiebe sie nach unten (siehe Bild unten).

 

Figuren

Bei Figuren kann es der Darstellung oft nicht schaden, wenn man beispielsweise verdeckte Arme oder Beine durch Lücken kenntlich macht. Konturen lassen sich so an den Nodes gut verschieben und somit Bewegungen darstellen (siehe Animation unten).

Um die Lücken zu schaffen, müssen alle Konturen der Figur über Pfade – Kontur in Pfade umwandeln konvertiert und günstigerweise über STRG-+ oder Pfad – Vereinigen verschmolzen werden(siehe Bild unten).

Dann erstellt ihr ein Rechteck in der Breite der Lücke. Dieses Rechteck legt ihr an einen Fix-Punkt an, versetzet dorthin den Mittelpunkt (Drehpunkt) und rotiert das Viereck zur gewünschten Position (siehe Animation unten).

Eine Kopie von diesem Rechteck sollte man sich als Kopie zur Seite legen um es beipiesweise an weiteren Bereichen einsetzen zu können. Ein weiterer Bereich wäre in diesem Fall das Bein. Da der vordere Arm eine Lücke erhält, muss sie beim Bein hinten sein. Beide Formen vereinz iihr über STRG-+ oder Pfad vereinigen. Markiert dann den Body hinzu und wendet STRG-Minus oder Pfad – Differenz an (siehe Animation unten).

Der Vorderarm kann durch Verscieben der Nodes noch etwas verkürzt werden und fertig ist dasymbol eines laufenden Menschen (siehe Animation unten).

Auch hier habe ich die Lücken für die Icons in der 32 x 41 Pixel Darstellung (eigentlich ja nur 27 x 27 Pixel Innenfläche) recht groß gehalten, damit sie in der verkleinerten Bildschirmdarstellung nicht ineinander schrumpfen.

 

Icons Export

Auf der Arbeitsfläche werden sich am Ende natürlich einige Icons befinden. Jedes Icon einzeln zu exportieren würde eine Menge Arbeit machen. Für solche Fälle gibt es in Inkscape den Batchexport. Der Batchexport macht es möglich mehrere/viele Objekte in nur einem einzigen Arbeitsschritt gemeinsam abzuspeichern.

Hinweis: Der Speicherort wird automatisch der sein, wo sich die (SVG) Inkscape-Arbeitsdatei befindet.

Jedes zu exportierende Objekt muss aus einem Stück bestehen. Das bedeutet es muss sich bei einem Element mindestens um eine Gruppierung handeln! In diesem Fall: Ein Icon, mit allen Einzelteilen. Dazu sind alle zusammengehörigen Teile zu markieren und mit STRG-G (oder Objekt – Gruppieren) werden sie dann gruppiert. Möchte man eine Gruppierung aufheben geschieht das über den Shortcut SHIFT-STRG-G oder Objekt – Gruppierung aufheben.

Die Dateinamen werden von Inkscape automatisch vergeben. Man kann die Namensgebung beeinflussen, wenn man für jedes Objekt einen Namen in den Objekteigenschaften eintragen würde, was aber mehr Aufwand bedeutet als nötig ist (siehe Bild unten).

Das sind die Grundtechniken zu erstellen von Programm-Icons. Jedes Programm, aber auch Verkehrszeichen etc., verfügen meist über das gleiche Shape in dem sich dann die eigentlichen Symbole/Piktogramme befinden.

Anmerkung: Jedem dürfte ein Phänomen bekannt sein das sich Pareidolie (Apophänie) nennt. Das Eigenschaft des Menschen in Strukturen (zum Beispiel in Wolken (Wolkenlesen)) Dinge zu sehen. Tritt der Effekt einmal auf, kann man sich von dem Motiv sofort verabschieden. Fünf derartige Icons wurden testweise zwischen circa 70 anderen verscrschiedenen Arbeitskollegen vorgelegt. Die betroffenen Grafiken wurden sofort wahrgenommen und entsprechend kommentiert.