Vektorgrafiken als Pfade verwenden mithilfe von Potrace und Inkscape

Nach dem letzten Teil der – inzwischen doch recht umgangreichen – Artikelserie zu Vektorgrafiken, geht es nun ans Eingemachte. Ich beschreibe im Folgenen ein Verfahren, mit dem das Erfassen von Motiven in Rastergrafiken in Pfaden über die Abkürzung einer Vektorgrafik beschleunigt wird. Auf den ersten Blick erscheint die Erstellung eines Pfads mithilfe von Vektorgrafiken natürlich als Umweg, als zusätzliche Hürde, da das Erstellen von Pfaden ohnehin schon keine Leichtigkeit ist. Ich möchte nun aber nicht mehr lange herum reden, sondern zeigen, wies geht, und warum das Wissen um die Konvertierung dabei nützlich ist.

Als erstes Beispiel verwende ich ein Bild, das bereits im vorherigen Teil und in einem Artikel von Sophia vorkam:

Ausgangsbild, die Schrift soll freigestellt werden.

Aufgabe ist es, den Schriftzug zu extrahieren, also einen Pfad zu erstellen, welcher den Text einschließt. Der Arbeitsablauf ist folgender:

  • Das Bild wird zuerst nach Inkscape importiert.
  • Dannach wird es mit Potrace (bzw. Inkscape) in eine Vektorgrafik verwandelt.
  • Bei der Konvertierung wird nur darauf geachtet, dass die Vektorgrafik den Schriftzug abgedeckt wird (eventuell invertiert).
  • Alle überflüssigen Artefakte, die nicht gewünscht sind, werden entfernt, eventuell Kanten abändern oder
  • Die Arbeitsfläche auf das Ausgangsbild anpassen und Bitmap löschen.
  • Die erstellte SVG-Datei wird im Bildbearbeitungsprogramm der Wahl als Pfad importiert.
  • Eventuell Pade nachbessern

Vektorisierung

Der erste Schritt ist – wie eben geschrieben – die Bilddatei in Inkscape zu importieren. Es reicht, die Datei zu verknüpfen. Als nächsten ist es schon möglich, die Arbeitsfläche auf die Bildgröße anzupassen, was mit dem DialogDatei → Dokumenteneinstellungenmöglich ist. Dazu erst das Bild auswählen und danach Seite in Auswahl einpassen wählen. Dies ist wichtig, damit die Pfade im Bildbearbeitungsprogramm richtig platziert werden. Nun kann die Bitmap bereits entfernt werden.

Der Schriftzug

Im Vordergrund ist der fertige Pfad zu sehen, im Hintergrund noch die Bitmap.

Nach dem Öffnen des Dialogs Bitmap vektorisieren, werden wir nun die Einstellungen für die Vektorisierung wählen. Der Modus ist in der Standardeinstellung bereits passend (Entlang eines Helligkeitswertes, Schwellwert: 0,45), allerdings sollten wir Bild invertieren auswählen. Unter den Optionen können wir nun unser Wissen über den Potrace-Algorithmus anwenden. Idealerweie deaktivieren wir Pfade optimieren, da wir einen möglichst identischen Pfad wünschen. Für Ecken glätten habe ich einige Werte zwischen 0,5 und 1 getesteet und die Wirkung auf die Ecken der Schrift beobachtet. Letztendlich habe ich mich doch für die Voreinstellung, 1, entschieden. Ansonsten würen spitze Ecken auftreten, was natürlich verwieden werden will. Für dieses (einfache) Beispielbild sind also kaum Anpassungen nötig, besonders komplex ist das Bild auch nicht. Somit wenden wir den Algotithmus an und schließen den Dialog.

Schriftzug

Ergebnis der Vektorisierung: Der einwandfreie Schriftzug

Als nächster Schritt werden die Artefakte entfernt: Bei mir hat sich zwische dem ‘M’ und ‘K’ ein kleiner Pfad verirrt, weiters benötigen wir all die Informationen im rechten unteren Eck nicht. Einfach mit der Maus die Punkte die Flächen markieren und auf Entf drücken.

Nun können wir die Pfade bereits exportieren, wenn man die Pfade nicht nochmals händich kontrollieren möchte. Leider beachtet GIMP keine Alphawerte in importierten Pfaden, sodass wir nicht unscharfe Konturen gleich in Inkscape erstellen können. So geschieht dies dann eben erst im Bildbearbeitungsprogramm.

Import (in GIMP)

Ich gehe davon aus, dass alle Bildbearbeitungsprogramme Pfade aus SVGs importieren können, es ist mir jedoch nicht möglich dies zu testen. Ich habe hier nur GIMP zur Verfügung um die Funktionsweise dazustellen. Nach dem Öffnen des Bitmaps in GIMP wechselt man in den Pfad-Dialog, per Rechtsklick kommt man zum Pfad-Import.

Im

Import des Pfads in GIMP

Damit wäre der Pfad importiert und kann nun weiterverwendet werden. Allerdings möchte ich zum Schluss noch ein paar Hinweise zur Verwendung weitergeben. So muss man die Pfade eventuell noch vergrößern oder verkleinern um optimale Ergebnisse zu erzeielen.

Um einen einzelnen Buchstaben in die Auswal zu bekommen und nicht der gesamte Schriftzug, gibt es zwei Möglichkeiten: Zum einen ist es möglich alle Buchstaben einzeln zu importieren, und zu anderen kann der Buchstabe per Auswahlwerkzeug gewählt werden. Zur zweiten Möglichkeit eine kurze Erklärung: Erst den Pfad zur Auswahl hinzufügen (Rechtsklick auf Pfad und passende Option wählen) und danach mit einem passenen Auswahlwerkzeug (Rechteck reicht hier) und dem passenden Modus (Schnittfläche) den Buchstaben markieren. Somit ist es möglich die Auswahl zu verkleinern und eventuell zu verwischen (besonders bei den unscharfen Buchstaben im Vordergrund von Vorteil).

Entfernter Text aus dem Ausgangsbild

Nach der Auswahl des ‘I’s wurde der Buchstabe gelöscht.

Ich hoffe ich konnte mit dieser Artikelserie das Interesse an Vektorgrafiken wecken und deren Verwendung in der Bildbearbeitung verbreiten. Falls Ihr Fragen zur Technik oder anderen Dingen habt, in den Kommentaren ist Platz genug!
Hiermit endet nun eine Artikelserie, deren Geschichte vor einem Jahr minus einem Tag begonnen hat – im achten Türchen des letzten Adventkalenders! In diesem Sinne einen frohen Advent und viel Glück beim diesjährigen Adventkalender wünscht euch Gastautor Sebastian.





Dir hat mein Artikel gefallen?

Ich freue mich natürlich auch über jedes einzelne Kommentar, jede Nachricht und jeden Follower auf den Sozialen Netzwerken.
Einfach mal Danke sagen? Allergernst, ich habe einen Trinkgeld-Knopf =)

3 Kommentare

  1. Timo Kühne

    Danke für dieses Tutorial. Hat mir wirklich sehr weitergeholfen. Ich werde das jetzt gleich mal mit Gimp ausprobieren.

    Antworten
    • sebix

      Vielen Dank! Wenn es etwas gibt, was ich verbessern kann, freue ich mich auf eine Rückmeldung :)

      Antworten
  2. Steve Sullivan 'blog

    Normally I don’t learn article on blogs, however I would like to say that this write-up very forced me to try and do so! Your writing taste has been surprised me. Thank you, very great article.

    Antworten

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

;-) ;) :p :o :D :/ :-) :-( :) :(