Von der Zeichnung zur Vektorgrafik

Von der Zeichnung zur Vektorgrafik

In diesem Inkscape Tutorial werden wir von einer Zeichnung als Vorlage eine Vektorgrafik erstellen. Für die Vorlage habe ich mit Bleistift einen Esel skizziert und eingescannt.

Habt ihr keine Möglichkeit die Skizze einzuscannen, so könnt ihr auch einfach ein Foto von eurer Skizze machen und auf den PC laden. Dafür ist nicht unbedingt eine Digitalkamera nötig, jedes Handy, das Bilder machen kann, ist völlig ausreichend.

Natürlich lässt sich auch digital eine solche Zeichnung mit einem Grafiktablett und dem entsprechenden Grafikprogramm erstellen, wobei solche Werkzeuge wohl seltener griffbereit sind.

Haben wir unsere Zeichnung nun digitalisiert und auf dem PC abgespeichert, kann es mit der Erstellung der Vektorgrafik in Inkscape auch schon losgehen.

Wer den Esel vektorisieren möchte, kann sich die Zeichnung hier downloaden.

Die Vorlage importieren

Startet das Programm und importiert eure Zeichnung über [Datei] -> [Importieren…] oder nutzt das Tastenkürzel [Strg] + [I]. Es öffnet sich daraufhin ein Dialogfenster über das ihr eure Bilddatei auswählen könnt.

Eine Vorlage über das Menü importieren

Nachdem ihr [Öffnen] gedrückt habt erscheint noch die Abfrage ob ihr das Bild verknüpfen oder einbetten wollt. Einbetten ist hier vorausgewählt und das ist auch soweit in Ordnung, also klicken wir einfach [OK] und unser Bild wird importiert.

Die Verknüpfungs-Abfrage


Die Vorlage positionieren und skalieren

Es kann sein, dass die Vorlagenzeichnung nicht direkt auf dem Arbeitsblatt landet. In diesem Fall halten wir den Mauscursor über die Zeichnung und ziehen diese mit gedrückter linker Maustaste einfach an die passende Stelle, das ist das sogenannte Drag and Drop. Eine kleine Hand als Mauscursor symbolisiert dabei, dass das Objekt verschoben werden kann.

Die Zeichnung auf das Arbeitsblatt schieben

Mit den acht schwarzen Doppelpfeilen, die um die Zeichnung herum angeordnet sind, lässt sich das Bild skalieren. Mit dem Mauscursor über einen Pfeil gehen, dieser wird dann grün, und mit gedrückter linker Maustaste den Doppelpfeil verschieben um die Größe des Bildes zu ändern.

Haltet ihr bei diesem Vorgehen die [Strg] –Taste gedrückt, so wird das Seitenverhältnis beim größer und kleiner Skalieren eingehalten, das Bild wird also nicht verzerrt.

Mit den Doppelpfeilen skalieren


Die Deckkraft ändern

Habt ihr die Zeichnung positioniert, ändern wir gegebenenfalls die Deckkraft der Zeichnung. Wenn die Vorlage sehr dunkel ist, kann man die Pfade mit denen wir anschließend die Konturen nachzeichnen weniger gut erkennen, also stellen wir unten links im Feld neben dem kreisförmigen Symbol o die Deckkraft ein. In meinem Fall habe ich 50% eingestellt.

Die Deckkraft reduzieren


Ebenen ausblenden und sperren

Rechts daneben sind zwei weitere Symbole, ein Auge und ein kleines Schloss, abgebildet. Durch Klicken auf das Auge lässt sich die aktuelle Ebene, in der sich das Objekt befindet, aus- und wieder einblenden. Durch Klicken auf das Schloss kann die aktuelle Ebene gesperrt werden.

Die Ebene sperren

Und das tun wir nun, wir sperren die Ebene unserer Vorlage, damit wir sie nicht unbeabsichtigt verschieben oder bearbeiten.


Das Zoomen

Anschließend könnt ihr gegebenenfalls auf eine euch angenehmere Größe auf eure Zeichnung einzoomen.

Der Zoomfaktor unten rechts im FensterEntweder ihr haltet zum Zoomen die [Strg] –Taste gedrückt und dreht das Mausrad, oder ihr könnt ganz unten rechts in der Ecke der Inkscape-Arbeitsoberfläche mit den kleinen Pfeil-Buttons den Prozentwert verändern. Die Prozentzahl kann auch direkt in das Feld eingegeben werden.

Weiterhin kann mit den [+] und [-] –Tasten, egal ob auf dem normalen Tastaturfeld oder dem Nummernblock, schrittweise ein- und aus gezoomt werden, feste Zoomfaktoren sind über die Tasten [1] (1:1), [2] (1:2), [3] (Auswahl), [4] (Zeichnung), [5] (Seite) und [6] (Seitenbreite) zu erreichen.

Die letzte Zoommöglichkeit besteht über die Menüleiste: [Ansicht] -> [Zoomfaktor] -> hier ist ebenso die eben genannte Auswahl von Zoomfaktoren zu finden, die dazugehörigen Tastenkürzel stehen hinter dem Menüpunkt.

Den Zoom über das Menü einstellen


Eine neue Ebene hinzufügen

Da wir gerade die einzig existierende Ebene, in der unsere Vorlage liegt, gesperrt haben, brauchen wir eine neue Ebene in der wir arbeiten können.

Eine neue Ebene fügen wir mit dem Tastenkürzel [Strg] + [Shift] + [N] hinzu oder über das Menü [Ebene] -> [Ebene hinzufügen…]. Hier sind auch alle anderen Ebenen-Befehle samt dazugehörigem Tastenkürzel aufgelistet.

Eine Ebene über das Menü hinzufügen

Nachdem wir auf [Ebene hinzufügen…] geklickt haben, erscheint eine Abfrage, in der wir einen Namen für die neue Ebene vergeben und die Position einstellen können.

Die Abfrage für eine Ebene Hinzufügen

Wählt einen Namen der euch hilft die Ebene später zuzuordnen, das ist besonders zweckmäßig wenn man bei aufwendigen Vektorgrafiken viele Ebenen im Einsatz hat. Ich nehme hier einfach mal den Namen Esel  für meine Ebene.

Die Einstellung für die Position bleibt so. Sie kann aber auch danach noch jederzeit geändert werden. Nach drücken des Buttons [Hinzufügen] wird die Ebene angelegt.

Die Anzeige der EbenenDer Name der Ebene wird auch unten neben dem kleinen Schloss angezeigt.

Mit dem Pfeil-Button neben dem Ebenennamen kann die Ebene gewechselt werden.


Mit Pfaden die Umrisse nachzeichnen

Das ZeichenwerkzeugAls erstes aktivieren wir links in der Werkzeugleiste das Zeichenwerkzeug, der Mauscursor wandelt sich daraufhin in eine Zeichenfeder.

Nun klicken wir mit der linken Maustaste entlang eines Umrisses unserer Zeichnung. Bei jedem Klick wird ein Knoten, der auch als Ankerpunkt bezeichnet wird, gesetzt. Die Knoten sollen vorerst nur eine grobe Form bilden, setzt nicht zu viele Knotenpunkte.

Zum Schluss klicken wir auf den ersten Knoten um den Pfad zu schließen. Ein roter Punkt unter dem Mauscursor zeigt an, dass ihr genau über dem Knoten am Anfang des Pfades seid und dass bei einem Klick der Pfad geschlossen wird.

Eine grobe Form erstellen und den Pfad schließen

Das Grün des Pfades ist auf dem Bild leider etwas schwer zu erkennen.

Wenn wir den Pfad geschlossen haben sieht das Ganze dann so aus:

Der geschlossene Pfad


Die Pfade bearbeiten

Das KnotenwerkzeugNun bearbeiten wir den Pfad. Dazu wählen wir das Knotenwerkzeug, das sich ebenfalls in der Werkzeugleiste auf der linken Seite befindet.

Das Knotenwerkzeug hat als Mauscursor einen sehr spitz zulaufenden schwarzen Pfeil. Wir klicken unseren Pfad an einer beliebigen Stelle an oder ziehen mit gedrückter Maustaste einen Rahmen um den gesamten Pfad auf um ihn zu selektieren, durch das Selektieren werden auch die Knoten des Pfades wieder angezeigt.

Der Pfad wurde selektiert

Nun halten wir den Mauscursor zwischen zwei Knoten an den Pfad bis am Cursor zusätzlich eine  geschlossene Hand angezeigt wird. Die Hand zeigt an, dass wir nun klicken und das betreffende Pfadsegment mit gedrückter Maustaste in Form ziehen können. Wir ziehen das Pfadsegment bis es in etwa die gewünschte Rundung hat.

Ein Pfadsegment in Form ziehen

Wenn wir danach das Pfadsegment oder einen der beiden dazugehörigen Knoten anklicken, so werden die Anfasser sichtbar, mit denen die Winkel am Knoten eingestellt bzw. das Pfadsegment weiter bearbeitet werden kann.

Haltet den Cursor über das Ende eines Anfassers, wenn dieser rot wird, könnt ihr den Anfasser mit gedrückter Maustaste verschieben und so die Form des Pfades ändern.

Die Anfasser

Auf diese Weise bearbeiten wir nun jedes Pfadsegment bis wir mit der Form des gesamten Pfades zufrieden sind.

Einen Knoten können wir verschieben indem wir den Knoten zuerst durch Anklicken selektieren, der Knoten ist nun blau, alle anderen Knoten sollten nun abgewählt, also weiß sein. Anschließend den Knoten mit gedrückter Maustaste einfach verschieben.

Ein ganzes Pfadsegment lässt sich selektieren und dann mit beiden dazugehörigen Knoten verschieben indem wir den Pfad zwischen den Knoten anklicken.

Halten wir die [Shift] -Taste gedrückt, so können beliebige Knoten nacheinander ausgewählt werden. Aktivierte Knoten werden blau angezeigt.

Das Ganze könnte dann so aussehen:

Der bearbeitete Pfad

Wahrscheinlich müsst ihr etwas herumprobieren und üben, damit ihr ein Gefühl dafür entwickelt wo Knoten sinnvoll sind und wie ihr die Pfadsegmente und Anfasser verschieben müsst um das gewünschte Ergebnis zu erhalten.


Die Grafik aus mehreren Pfaden zusammensetzen

Haben wir die erste Form gemeistert, fügen wir eine neue Ebene für die nächste Form ein, zum Beispiel für ein Ohr.

Wir wiederholen nun den Vorgang, genau so wie wir den Pfad für den Eselkopf erstellt haben, für den Pfad dieses Ohres. Für die nächste Form, zum Beispiel das andere Ohr, fügen wir wieder eine neue Ebene ein, erstellen einen neuen Pfad und bringen diesen in die gewünschte Form.

So verfahren wir weiter bis wir alle Umrisse der Zeichnung als Pfad vorliegen haben.

Die Umrisse des Esels als Pfade

Auch die Haare für den Pony, die Augenbraue und die Falte über dem Nasenloch können als Pfade angelegt werden.


Die Pfade mit Farbe füllen

Das AuswahlwerkzeugIm nächsten Schritt geben wir den Umrissen Farbe. Dazu aktivieren wir das Auswahlwerkzeug und selektieren einen Umriss indem wir auf den Pfad klicken. Anschließend klicken wir einfach auf eine der Farben im unteren Bereich des Fensters und unsere Form wird mit der entsprechenden Farbe gefüllt. Wollen wir der Kontur eine andere Farbe geben, so halten wir die [Shift] -Taste gedrückt während wir eine Farbe wählen.

Die Umrisse mit Farbe füllen

Auf diese Weise füllen wir nun alle Umrisse mit Farbe. Einen Pfad kann natürlich nur ausgewählt und gefüllt werden, wenn die entsprechende Ebene nicht gesperrt ist.


Die Ebenen anordnen

Wenn wir alle Pfade mit Farbe gefüllt haben, so kann es sein, dass die Reihenfolge der Ebenen nicht passt und manche Formen über anderen Formen drüberliegen wo sie nicht drüberliegen sollten.

Um das zu korrigieren wird die entsprechende Form und damit auch die Ebene selektiert und mit der Tastenkombination [Strg] + [Shift] + [Bild ab] wird die Ebene schrittweise abgesenkt.

Mit [Strg] + [Shift] + [Bild auf] wird die Ebene schrittweise angehoben.

Die Ebenen lassen sich auch über das Menü [Ebene] -> … sortieren.

Zum Schluss blenden wir die Ebene mit unserer Zeichnung noch aus und fertig ist das Vektorbild 🙂

Das fertige Vektorbild

So, wir sind am Ende des ersten Inkscape Tutorials angelangt, ich hoffe es war verständlich und hat euch Spass gemacht.

Noch viel Erfolg beim Üben und bis zum nächsten Inkscape Tutorial 🙂

About The Author

Diana Ludwig

Webdesignerin, Pinselschwingerin, Bloggerin und Studentin der Medieninformatik. Mein Steckenpferd ist das freie Open Source 3D Programm Blender, über das ich auf Blender-Tutorial schreibe. Du findest mich auch auf Google+ oder abonniere unseren RSS-Feed.

4 Comments

  • Inge

    31. Oktober 2014

    Pfade kenne ich von Illustrator, Inkscape war mir neu. Diese Anleitung ist sehr gut verständlich und die Software leichter zu handhaben, als die von Adobe. Danke!
    Eine Frage ist offen geblieben: wie speichere ich die Datei am besten, wenn ich sie für das Internet benutzen möchte??

  • Diana Ludwig

    2. November 2014

    Hallo Inge,

    es freut mich sehr, wenn dir das Tutorial geholfen hat 🙂

    Deine Dateien speicherst Du für das Web am besten als .svg-Datei ab. Dieses Dateiformat ist praktischerweise das Arbeitsformat von Inkscape. SVG kann von jedem modernen Browser dargestellt werden. Alternativ kannst Du aus Inkscape heraus die Datei auch als PNG abspeichern.

    Einiges über Vektorgrafiken und Pixelgrafiken habe ich im Einführungsartikel zu Inkscape geschrieben:
    Inkscape, ein Open Source Vektorgrafikeditor

    Mehr erfährst Du auch auch in diesem Artikel:
    Bilder und Grafiken im Internet – Das richtige Format für deinen Blog

    Viele Grüße
    Diana

  • Inge

    5. November 2014

    Danke für Deine Zeilen Diane!
    In der Zwischenzeit hatte ich einen hilfreichen Artikel zu den verschiedenen Formaten gefunden: http://de.selfhtml.org/grafik/formate.htm . Die Artikel auf die Du hingewiesen hast werde ich mir zu Gemüte führen.
    Mit scheint IE mal wieder der Querkopf zu sein – dass eine SVG Unterstützung nicht integriert ist, sondern ein Plugin benötigt wird, spricht für mich bei der Nutzung von Bildern im Internet dagegen. Meine Wahl ist daher PNG.
    Mit allen guten Wünschen, Inge

  • Sarah

    19. November 2014

    Hallo und herzlichen Dank für das tolle Tutorial, es hat mir super geholfen! Ich habe allerdings ein Problemchen: Ich habe mir ein Logo erstellt, in dem ein „p“ vorkommt. Wie bekomme ich es hin, dass das „p“ nicht ausgefüllt, sondern transparent ist, also das Kreisinnere? Für manche Zwecke reichte es nun, das schwarze P einfach weiß auszufüllen, aber wenn ich mein Logo über ein Foto legen möchte, sieht das natürlich doof aus…

    Ich würde mich über Rückmeldung freuen.