Bilder Vektorisieren leicht gemacht

Jeder Webdesigner steht hin und wieder vor der Aufgabe ein Bild zu vektorisieren. Die meisten werden zu diesem Zweck wahrscheinlich Adobe Illustrator benutzen. Es gibt jedoch auch kostenlose Alternativen, welche teilweise sogar bessere Ergebnisse liefern.

Eine davon will ich im Folgenden vorstellen:

Inkscape

Inkscape ist ein Open Source Vektorbearbeitungsprogramm und hat mir einige Male beim Vektorisieren gute Dienste geleistet. Auch wenn die Ergebnisse sicher nicht mit dem händischen Nachzeichnen mithalten können, lassen sich dennoch gute Vektorgrafiken erzeugen. Manchmal ist das Vektorisieren auch hilfreich um schicke Effekte zu erzielen, z.B. für schöne Hintergründe für Header.

Mit Inkscape ist ein Bild einfach und schnell zu vektorisieren. Ich werde dies an einem kleinen Beispiel zeigen:

Ich nutze Mal ein Foto von einem Hochhaus für dieses Beispiel. Also als Erstes öffnet man die Test Datei (test.jpg):

Nun wählt man das Bild aus und geht auf  “Pfad” > “Bitmap vektorisieren…”

Jetzt öffnet sich ein kleines Fenster mit einigen Einstellungsmöglichkeiten. Am Besten probiert man einfach etwas rum, bis das Ergebnis gut aussieht. Nett ist, dass man über “aktualisieren” immer eine kleine Vorschau zu sehen bekommt.

Wenn einem die Vorschau gefällt, einfach auf “Ok” klicken und schon wird die Vektorgrafik erstellt. Nun muss noch das Pixelbild (Foto) aus dem bild entfernt werden. Hierzu einfach die Grafik auswählen und mit Hilfe der “entf”-Taste entfernen. Übrig bleibt die Vektorgrafik. Diese kann nun über “Speichern unter…” als EPS oder einem anderen Format gespeichert werden.

Am besten probiert man das ganze mit verschiedenen Bildern aus, es kommen sehr nette Sachen dabei raus. Auch Logos lassen sich relativ gut vektorisieren und auch die Geschwindigkeit des Tools überzeugt. Cool sieht es auch aus, wenn man Portraitfotos vektorisiert.

Hier könnt ihr die test.jpg und test.eps runterladen und selber probieren (ihr könnt mit dem Bild anstellen, was immer ihr wollt):

vektor

Und hier noch einige Beispiele, welche mit Inkscape innerhalb weniger Sekunden erzeugt sind:

Tags: grafik, vektor, Webdesign