Inkscape 192 – Icon Set, OSM Plugin, Making of #2/2

Der zweite Teil der Tutorialreihe zum Bau von Icons für das WordPress-OSM-Plugin, wird sich für einige wie eine Zusammenfassung vieler bisher beschriebenen Techniken lesen. Tatsächlich handelt es sich um Standardtechniken, in der Praxis angewendet.

Skills: Simple (2 / 5)
Plugins: Nein

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

Wordpress OSM Plugin by MiKa

WordPress OSM Plugin by MiKa, Anwendungsbeispiel

Vorgedanken

Da ich außer den Abmessungen der Icons keine Vorgaben hatte, entschied ich mich kein großes Konzept auszuarbeiten. Mein Gedanke war die Tropfenform der Grundform zu nutzen und ansonsten durch Vielfalt zu glänzen und mehr oder weniger spontan zu starten.

Pareidolie

Ohne es übertreiben zu wollen, ist in Fällen, wenn es darum geht auf begrenztem Raum Elemente abzulegen, der Begriff Pareidolie (Apophänie) bekannt. Das Phänomen in Strukturen (zum Beispiel in Wolken (Wolkenlesen)) Dinge zu sehen. Ein allgemein bekanntes Beispiel ist das Marsgesicht auf der Marsoberfläche, aus der Ferne betrachtet.

Daran machen kann man im Vorfeld wenig, außer darauf vorbereitet zu sein. Denn tritt der Effekt auf, kann man die Grafik gleich vergessen und sich von dem Motiv verabschieden.

Tatsächlich ließ ich 5 derartige Icons testweise durchgehen und legte sie zwischen circa 70 anderen einigen Arbeitskollegen vor. Die betroffenen Grafiken wurden sofort wahrgenommen und kommentiert: „…ha, ich seh‘ ein Smilie mit Augenklappe. Yay!“

Es handelte sich aber in „Wirklichkeit“ um einen Bootssteg, mit Wellen und Boot-Silhouette.

Grundform – Korpus

Das Original ist 100% Schwarz mit einer 100 prozentigen weißen Füllung. Ich verwendete Anthrazit (Hex-Farbwert: #030303ff) und Grau (Hex-Farbwert: #efefefff) als Füllung.

Die nach unten gerichtete Tropfenform erstellte ich aus einem Kreis und einem Dreieck neu. Der Unterschied zu der vorhandenen Form ist bei meiner Version die Farbe. Ich lege eine Fläche von 32×41 Pixel an. Dazu eine Kreisform von 32 x 32 Pixel und ein Quadrat von ebenfalls 32 x 32 Pixel (siehe Bild unten).

Wordpress OSM Plugin 2

Grundfläche Kreis und Quadrat

Den Kreis platziere ich auf der Grundfläche, Oberkante an Oberkante. Das Quadrat wird um 45 Grad rotiert und Unterkante an Unterkante positioniert. Ich habe auch die Transparenz etwas reduziert, damit ich freie Sicht habe. Dann skaliere ich das Karo so, dass die Seitenkanten an den Kreis reichen (siehe Bild unten).

Quadrat skalieren

Ich zeichne noch ein weiteres Rechteck hinzu, was ich dazu nutze das Karo an dem Bereich wo sich Kreis und Karo-Kanten treffen zu zuschneiden. Das gelbe Rechteck liegt über dem Karo und beschnitten wird es mit dem Shortcut STRG-Minus, oder Pfad – Differenz (siehe Bild unten).

Wordpress OSM Plugin 2

Objekte zuschneiden

Bevor ich beide Formen (Dreieck und Kreis) verschmelze, fertige ich mir mit STRG-D ein Duplikat des Kreis an. Das Duplikat liegt wie immer deckungsgleich über dem Original. Das Duplikat wird auf 27 x 27 Pixel herunter skaliert und mit #efefefff eingefärbt (siehe Bild unten).

Wordpress OSM Plugin 2

Kreis duplizieren

Ausgerichtet wird das Ganze und alle späteren Teile immer über den Ausrichten-Dialog (siehe Bild unten).

Wordpress OSM Plgin 2

Ausrichten Dialog

Jetzt kann ich die beiden Formen (Kreis und Dreieck) mit STRG-+ oder über Pfad – Vereinigen verschmelzen.

Markiere ich die Form nun mit dem Pfad bearbeiten-Werkzeug fällt auf, dass sich an den Stellen wo sich Kreis und Dreieck trafen zwei zusätzliche Nodes gebildet haben. Die beiden äußeren davon lösche ich weg (siehe Bild unten).

Wordpress OSM Plugin 2

Jeweils ein Node zuviel

Wordpress OSM Plugin 2

Saubere Schnittstelle

Damit ist die Grundform fertig (siehe Bild unten).

Wordpress OSM Plugin 2

Fertige Icon Grundform

 

Piktogramme

Piktogramme wurden hier schon mehrmals behandelt. Der Aufbau ist einfach. Ich verwende nach wie vor meist eine Kreisform für den Kopf, und Linien aus Pfaden, mit den entsprechenden Kontureigenschaften für die Körperteile (siehe Bild unten).

Wordpress Icon Set 2

Kreisform und Kontur

Steuern tue ich die Konturen über die Konturstärke und beispielsweise runde Enden, sowie im Bedarfsfall runde Ecken (siehe Bild unten).

OSM Icon Set 2

Kontur Einstellungen

Wichtig ist, dass ihr einstellt das sich die Kontur der Skalierung anpasst. Ansonsten bleibt immer die eingestellte Konturstärke erhalten und das ist sicher nicht gewünscht, da ihr meist nicht in Originalgröße arbeitet (siehe Bild unten).

OSM Plugin 2

Konturstärke anpassen

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).

OSM Plugin 2

Zusätzliche Nodes

Zum Hinzufügen von Nodes könnt ihr auch zwei Punkte markieren und statt auch dem Mausklick mit STRG und ALT den entsprechenden Button aus der oberen Werkzeug Optionen-Leiste klicken (siehe Bild unten).

OSM Plugin 2

Node hinzufügen

Dinge schneiden

Am laufenden Band kommt es vor, das Objekte geschnitten werden müssen. Beispiel eins zeigt eine Brücke, eckig gebaut und damit natürlich zu groß für das Icon.

Die Brücke besteht/bestand aus 5 Objekten. Einer Art Geländer, die Brücke und 3 Brückenbögen. Die Brückenbögen wurden mit STRG-+ oder Pfad – Vereinigen zusammengefasst und mit STRG-Minus oder Pfad – Differenz von der Ausgeschnitten (siehe Bild unten).

OSM Plugin Set 2

Brückenbau

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

OSM Plugin Icon Set 2

Brücke Pfad – Vereinigen

Um die Brücke in die Kreisform einzupassen werde ich zunächst den inneren, grauen Kreis duplizieren. Das Duplikat legt sich wie immer ganz nach oben, über die Brücke. Dann skaliere ich den Kreis mit gehaltener STRG und ALT Taste etwas kleiner. Danach markiere ich die Brücke hinzu und wende STRG-* (Sterntaste auf dem Numpad) oder Pfad – Überschneidung an (siehe Animation unten).

OSM Plugin icon set 2

Brücke zuschneiden

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

OSM Plugin Icon Set 2

Fertige Brücke

Durch das (über-)schneiden mit der Kreisform sieht das Icon schön aus und gleichzeitig erhalte ich dadurch etwas mehr Raum, als wenn ich eine eckige Form in der Größe anpassen muss.

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 gross. 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, dass man lieber größere Werte für Abstände nimmt. Die Verkleinerung tut ihr übriges dazu (siehe Animation unten).

OSM Plugin Icon Set 2

Gedacht – Getan

 

Übrigens habe ich die Icons optisch speziell für die Maße von 32 x 41 Pixel angefertigt. Möglicherweise zeigen sich beim Vergrößern der Vektordateien unschöne Details. Bei der Gestaltung habe ich mir die Grafiken immer wieder in Originalgröße angeschaut und dementsprechend Änderungen vorgenommen. Freie Skalierbarkeit war hier nicht vorgesehen und nicht berücksichtigt!

Weitere Techniken

Oft verwendet habe ich 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).

OSM Icon Set 2

Nodes ausrichten

Die Vorzüge des Node Ausrichtens wird bei der Darstellung von Wasser sehr deutlich. Ich kann eine beliebige Zick-Zack Linie erstellen und dabei sogar unsauber vorgehen (siehe Bild unten).

OSM Icon Set 2

Zick-Zack Linie

Zuerst markiere ich die obere Reihe und richte die Nodes horizontal aus. Danach die untere Reihe und zum Schluss verteile ich die  alle Nodes mit gleichmäßigem Abstand (siehe Bild unten).

OSM Icon Set 2

Ausrichtungen

OSM Icon Set 2

Nodes ausrichten

Die Rundungen für die Wellenform erhalte ich indem ich alle Nodes markiere und sie gemeinsam symmetrisch mache, also abrunde (siehe Animation unten).

OSM Icon Set 2

Nodes Symmetrie

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

OSM Icon Set 2

Wogen glätten

Figuren

Bei Figuren kann es der Darstellung oft nicht schaden, wenn man beispielsweise verdeckte Arme oder Beine durch Lücken kenntlich macht. Von Haus aus habe ich für fast alle Character Konturen verwendet, ausser beim Kopf. Konturen lassen sich an den Nodes gut verschieben und somit Bewegungen darstellen (siehe Bild unten).

OSM Icon det 2

Original

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

OSM Plugin Set 2

Pfade konvertieren

Dann erstelle ich mir ein Rechteck in der Breite der Lücke. Dieses Rechteck lege ich an einen Fix-Punkt an, versetze dorthin den Mittelpunkt (Drehpunkt) und rotiere mir das Viereck zurecht (siehe Animation unten).

OSM Icon Set 2

Objekt rotieren

Eine Kopie davon lege ich mir an eine weitere Stelle, beim Bein. Da der vordere Arm eine Lücke erhält, muss sie beim Bein hinten sein. Beide Formen vereine ich über STRG-+ oder Pfad vereinigen.

Ich markiere dann den Body hinzu und wende STRG-Minus oder Pfad – Differenz an (siehe Animation unten).

OSM Icon Set 2

Pfad – Differenz

Den Vorderarm noch etwas verkürzen indem ich die oberen Nodes verschiebe…, fertig ist der laufende Mensch (siehe Animation unten).

OSM Icon Set 2

Nodes verschieben

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 Bildschirmdarstellung nicht zusammen schrumpfen.

Export der Icons

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.

Batch Export

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 = ein gruppiertes Objekt.

Alle zusammengehörigen Teile werden markiert und mit STRG-G (oder Objekt – Gruppieren) gruppiert. Mit SHIFT-STRG-G (oder Objekt – Gruppierung aufheben) wird eine Gruppierung aufgehoben.

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 (siehe Bild unten).

OSM Icon Set 2

Objekt – Eigenschaften

Ich hoffe ich konnte mit meinen Informationen helfen, wenn es darum geht, ganze Sets von Icons zu erstellen. Viel Erfolg!

Das könnte Dich auch interessieren...

Translate »