Inkscape 221 – Creating Darts, Wires (2/2)

Im zweiten und letzten Teil der Dart Board-Serie wird das Drahtgitter erstellt, dass die einzelnen Felder voneinander abtrennt. Außerdem werden die klassischen aus einfachen Drähten gebogenen Ziffern konstruiert und auf der Fläche geschickt verteilt.

Skills: Intermediate
Plugin: Nein

Download: Dartscheibe als SVG-Datei. Download via Mediafire.
Download: Draht-Ziffern als Pfade im SVG-Format. Download via Mediafire.

 

Erstellt werden soll in zwei Parts ein relativ realistisches Dartboard in Inkscape. Wichtiger Bestandteil aller Arbeitsschritte sind in diesem Fall Ebenen auf denen die unterschiedlichen Bauteile wie das Board selbst, die Drahtgitter und die Ziffern verteilt werden.

Finished Inkscape Vector Dart Board

Fertiges Dart Board

 

Ausgangssituation

Die Ausgangssituation nach dem Part 1 ist das sich auf dem Arbeitsbereich eine fast fertige Dartscheibe, ohne Drahtgestell befindet (siehe Bild unten).

Inkscape Dart Board without Wires

Board ohne Drähte

Wer allerdings den Anweisungen aus Teil 1 gefolgt ist hatte sich mindestens eine Kopie der ursprünglichen Linien als Ebene dupliziert. Noch günstiger ist es eine weitere Kopie der Ebene anzulegen und entsprechend zu bezeichnen (siehe Bild unten).

Inkscape wire layers

Wire Ebenen

 

Drahtgitter anlegen

In diesem Teil beginnen wir mit der ersten Kopie der Linien. Die Ebene wird auf sichtbar eingestellt und die Konturen sollten als dünne schwarze Linien erscheinen (siehe Bild unten).

Erste Ebene sichtbar machen

Erste Ebene sichtbar machen

Die Linien erhalten eine hellgrau Farbe und eine Konturstärke von 5 Pixeln. Das gilt auch für den Pfad ganz außen, der hier nicht im Bild sichtbar ist. Die Farbe ist #bababaff (siehe Animation unten).

Kontur 5 Pixel

Kontur 5 Pixel

Danach wird die nächste Ebene sichtbar gemacht und erhält ebenfalls eine Konturstärke von 5 Pixeln. Allerdings werden all dieser Ebene zugehörigen Konturen über Pfad – Kontur in Pfad umwandeln konvertiert. Das erlaubt das diesen Pfaden wiederum eine Kontur zugewiesen werden kann.

Sie erhalten eine dunkle graue Farbe und eine Stärke von 2 Pixeln. Der Farbton der Kontur ist #5d5d5dff (siehe Bild unten).

Kontur 2 Pixel, Farbe: 5d5d5dff

Kontur 2 Pixel, Farbe: 5d5d5dff

 

Neue Ebene – neue Drähte

Auf einer weiteren neuen Ebene die sich über allen bereits vorhandenen befinden sollte wird ein senkrechter Pfad bis an die äußere Kante des Bullseye gezogen. Es soll oben leicht überstehen. Auch dieser Pfad erhält eine Konturstärke von 5 Pixeln und ebenfalls den Farbton ##bababaff.

Von diesem aufrechten Pfad wird eine Kopie angelegt, die wie schon die Ringe in einen Pfad konvertiert wird und eine 2 Pixel starke Kontur mit der Farbe #5d5d5dff erhält (siehe Bild unten).

Aufrechter Draht

Aufrechter Draht

Beide Objekte müssen nun gruppiert und der Transform-Origin (Drehpunkt) in das Zentrum verschoben werden (siehe Bild unten).

Drehpunkt exakt ausrichten

Drehpunkt exakt ausrichten

Über den Transform-Dialog unter dem Reiter Drehen wird dann die Gruppe um 9° Grad rotiert so, das der Draht an der Kante eines Feldes positioniert ist (siehe Animation unten).

Draht rotieren (9° Grad)

Draht rotieren (9° Grad)

Durch wiederholtes und abwechselndes anwenden des Shortcut STRG-D (duplizieren) und anwenden von Transform-Drehen um 18° Grad werden alle Drähte nacheinander angelegt, bis der Kreis komplett ist (siehe Bild unten).

Drähte im Kreis duplizieren

Drähte im Kreis duplizieren

In der Ebenenpalette befinden sich derzeit 4 Ebenen. Eine Ebene die das Board beinhaltet und drei Ebenen für die Drähte (siehe Bild unten).

Status der Ebenen

Status der Ebenen

Von der Ebene wires1, die Ebene mit den grauen Drähten legt man jetzt ein weiteres Duplikat an und zieht die neue Ebene unter wires1. Diese Ebene ergibt den Schlagschatten (siehe Bild unten).

Ebene für Schatten anlegen

Ebene für Schatten anlegen

Die Drähte der neuen Ebene werden schwarz eingefärbt, erhalten eine minimale Unschärfe und werden leicht nach rechts unten verschoben (siehe Bild unten).

Leichte Schatten der Drähte

Leichte Schatten der Drähte

 

Die Ziffern

Die Ziffern auf einem Dart Board haben ihren ganz eigenen Charakter das sie bei klassischen Boards lediglich aus gebogenen Drähten bestehen. Um nicht lange eine passende Schriftart zu suchen wird empfohlen die Schrift aus Pfaden selbst zu erstellen. In diesem Part sind die Zahlen 1 – 9 allerdings schon vorbereitet und befinden sich im entsprechenden Download Paket.

Die Pfade können in einer weiteren Inkscape-Instanz geöffnet und in eine neue Ebene zu dem Dart Board hineinkopiert werden (siehe Bild unten).

Neue Ebene für Ziffern

Neue Ebene für Ziffern

Die Zahlen nehmen hier den größten Teil der Arbeit ein. Alle Ziffern werden aus den Prototypen aufgebaut. Man kopiert die Ziffer(n) seiner Wahl, fügt sie ein und setzt sie zu der gewünschten Ziffer zusammen. Es beginnt mit der Zwanzig. Man kopiert sich die Ziffern 2 und Null und legt sie zu einem gefälligen Schriftbild zusammen (siehe Bild unten).

Zahlenwerte kopieren

Zahlenwerte kopieren

Besteht ein Wert aus zwei Ziffern so werden beide Objekte über Pfad – Vereinigen zusammengeführt und erhalten dann wie schon oben beschrieben eine Konturstärke (5 Pixel). Im gleichen zu kann die Kontur gleich über Pfad – Kontur in Pfad umwandeln konvertiert werden (siehe Animation unten).

Kontur bearbeiten

Kontur bearbeiten

Gleich anschließend wird mit STRG-D ein Duplikat der Ziffer erzeugt das deckungsgleich über dem Original liegt. Bei diesem Duplikat wird die Füllung entfernt und stattdessen eine Kontur von 2 Pixeln mit der Konturfarbe #5d5d5dff zugewiesen (siehe Animation unten).

Kontur zuweisen

Kontur zuweisen

Beide Objekte, die graue Kontur und die Außenlinien sind jetzt zu gruppieren und werden oben wo sich auch der Wert 20 schon befindet ausgerichtet (siehe Bild unten).

Ziffer ausrichten

Ziffer ausrichten

Dann wird von dem Objekt der Transform-Origin (Drehpunkt) in das Bildzentrum verschoben und über den Transform-Dialog unter dem Reiter Drehen eine Rotation von -18° Grad vorgenommen (siehe Bild unten).

Ziffer rotieren

Ziffer rotieren

So arbeitet ihr euch nun Ziffer für Ziffer immer weiter vor bis ihr einmal rund um den Kreis herum seid und alle Felder mit Punktwerten belegt sind.

Aber Vorsicht: Die Ziffern müssen stellenweise gedreht werden. Ab der Ziffer 6 müsst ihr die Zahlen einmal vertikal und horizontal spiegeln, damit sie auf der Dartscheibe leserlich platziert werden können. Erst dann wird die Rotation zur Position vorgenommen (siehe Animation unten).

Zahlen von 10 bis 8 drehen/spiegeln

Zahlen 10 bis 8 drehen/spiegeln

Die 11 kann dann schon wieder normal ausgerichtet werden. Im Beispielbild oben ist das beispielsweise übersehen worden, was sich allerdings an dieser Position leicht korrigieren lässt (siehe Bild unten).

Korrigierte Ziffer 11

Korrigierte Ziffer 11

Der kleine Bogen an der Ziffer 7 dient übrigens als Fläche um das Objekt an den Rahmen auflöten zu können und ist daher nötig. Gerade durch diese einfach gehaltenen Drähte die zu Ziffern gebogen wurden erhält die Dartscheibe ihren coolen Charakter. Die Arbeit lohnt sich also wie wir finden.

Das könnte dich auch interessieren …