Ein kleines PNG-Logo sieht auf dem Bildschirm oft ausreichend scharf aus. Sobald es stark vergrößert, für einen Textildruck vorbereitet oder auf eine große Verpackung gesetzt wird, werden jedoch Pixel und unsaubere Kanten sichtbar. Vektorgrafiken lösen dieses Problem: Sie beschreiben Formen mathematisch und können deshalb ohne klassischen Qualitätsverlust skaliert werden.
Mockup Paint enthält einen integrierten Vektorisierungsworkflow. Rasterbilder wie PNG oder JPG werden analysiert und in Pfade mit unterschiedlichen Farbflächen umgewandelt. Diese Pfade erscheinen als Ebenen, können einzeln gefärbt oder ausgeblendet und anschließend als SVG exportiert werden.
Rastergrafik und Vektorgrafik im Vergleich
Rasterbilder bestehen aus einem festen Pixelraster. Fotos benötigen diese Struktur, weil sie sehr viele Farb- und Helligkeitsabstufungen enthalten. Die verfügbare Auflösung bestimmt, wie groß ein Bild dargestellt werden kann, bevor einzelne Pixel auffallen.
Vektorgrafiken bestehen aus Pfaden, Kurven und Flächen. Ein Logo mit wenigen Farben, ein Icon oder eine klare Illustration lässt sich damit effizient beschreiben. Die Grafik bleibt bei kleiner und großer Ausgabe scharf. Außerdem können einzelne Flächen leichter umgefärbt werden.
Die Umwandlung ist jedoch keine echte Rekonstruktion der ursprünglichen Designdatei. Ein Vektorisierer interpretiert sichtbare Pixel und approximiert daraus Formen. Die Qualität hängt deshalb stark vom Motiv und den gewählten Einstellungen ab.
Welche Bilder eignen sich zur Vektorisierung?
Am besten funktionieren Logos, Symbole, Schriftzüge und Illustrationen mit klaren Konturen, hohem Kontrast und wenigen Farben. Ein schwarzes Logo auf weißem Hintergrund ist ein idealer Ausgangspunkt. Auch flächige Comicgrafiken oder Stickerdesigns können gute Ergebnisse liefern.
Fotos lassen sich ebenfalls umwandeln, erzeugen aber deutlich mehr Pfade. Das Ergebnis wirkt häufig wie eine stilisierte Illustration. Feine Hauttöne, Lichtverläufe und Texturen werden auf eine begrenzte Zahl von Farbflächen reduziert. Für eine skalierbare Fotodatei ist das nicht immer sinnvoll; für einen grafischen Posterlook kann es genau der gewünschte Effekt sein.
Vor dem Start sollten unnötige Ränder entfernt und Kontrast sowie Helligkeit korrigiert werden. Ein sauber freigestelltes Motiv benötigt weniger Hintergrundpfade und lässt sich später leichter bearbeiten.
Die Vektorisierungs-Presets in Mockup Paint
Mockup Paint bietet Voreinstellungen für Logo beziehungsweise Icon, Foto und benutzerdefinierte Konfiguration. Das Logo-Preset arbeitet mit wenigen Farben und einem Schwarz-Weiß-Modus. Dadurch entstehen übersichtliche Flächen, die sich gut für einfarbige Druckmotive eignen.
Das Foto-Preset berücksichtigt mehr Farben und bildet komplexere Bildbereiche ab. Die Custom-Einstellung erlaubt eine eigene Auswahl von Farbmodus, Farbanzahl und Zusammenfassung. Ein Preset ist ein sinnvoller Startpunkt, kann aber je nach Motiv angepasst werden.
Farbmodus: Farbe oder Schwarz-Weiß
Im Farbmodus versucht der Vektorisierer, die wichtigsten Farben des Bildes zu erhalten. Das ist für mehrfarbige Logos, Illustrationen und stilisierte Fotos geeignet. Im Schwarz-Weiß-Modus werden helle und dunkle Bereiche auf zwei Grundgruppen reduziert.
Schwarz-Weiß ist besonders praktisch, wenn ein Logo aus einem Foto oder Scan extrahiert werden soll. Die helle Ebene bildet häufig den Hintergrund, die dunkle Ebene das eigentliche Motiv. Der Hintergrund kann anschließend ausgeblendet oder gelöscht werden.
Die richtige Anzahl von Farben wählen
Je mehr Farben verwendet werden, desto näher kann das Ergebnis am Rasterbild liegen. Gleichzeitig wächst die Zahl der Pfade und Ebenen. Eine hohe Farbanzahl bedeutet also nicht automatisch eine bessere Arbeitsdatei.
Für ein einfaches Logo reichen oft zwei bis vier Farben. Eine flächige Illustration kann mit acht bis sechzehn Farben gut funktionieren. Fotos benötigen für mehr Details entsprechend mehr Abstufungen, werden dann aber komplexer. Ziel sollte die kleinste Farbanzahl sein, die den Charakter des Motivs zuverlässig erhält.
Nach dem ersten Versuch lohnt sich ein Vergleich bei hoher Vergrößerung. Sind wichtige Kanten erhalten? Gibt es viele kleine Farbflecken? Ist ein Verlauf zu stark vereinfacht? Diese Fragen helfen bei der nächsten Einstellung.
Gleichfarbige Pfade zusammenfassen
Ein Bild kann aus vielen räumlich getrennten Bereichen derselben Farbe bestehen. Ohne Zusammenfassung würde jeder Bereich als eigene Ebene erscheinen. Ein Logo mit kleinen Buchstaben könnte dadurch dutzende oder sogar hunderte Ebenen erzeugen.
Die Option „Farben zusammenfassen“ verbindet alle Pfade derselben Farbe zu einer gemeinsamen Ebene. Bei einem Schwarz-Weiß-Logo entstehen so idealerweise nur zwei Ebenen: eine helle Hintergrundebene und eine dunkle Logographik. Bei einem Motiv mit sechzehn Farben entstehen ungefähr sechzehn überschaubare Farbgruppen.
Für die meisten Mockup- und Druckworkflows ist die Zusammenfassung sinnvoll. Einzelpfade sollten nur dann getrennt bleiben, wenn bestimmte Teilformen unabhängig bearbeitet oder verschoben werden müssen.
Vektorpfade als Ebenen bearbeiten
Nach der Umwandlung erscheint jede Farbgruppe als Vektorpfad in der Ebenenliste. Der Name kann die erkannte Farbe und Anzahl der enthaltenen Pfade anzeigen. Wahrscheinliche Hintergrundflächen werden gekennzeichnet und können direkt ausgeblendet werden.
Jede Ebene lässt sich verschieben, skalieren, umbenennen, neu einfärben oder löschen. Mehrere Farbebenen können gruppiert werden, damit das komplette Logo gemeinsam transformiert wird. Die Sichtbarkeit einzelner Farben ermöglicht schnelle Varianten, etwa eine einfarbige Version für Siebdruck oder eine reduzierte Version für kleine Darstellungen.
Bei der Skalierung bleiben die Pfade scharf. Dennoch sollte das Seitenverhältnis erhalten bleiben, sofern keine bewusste Verzerrung gewünscht ist.
Bestehende SVG-Dateien importieren
Mockup Paint kann nicht nur Rasterbilder vektorisieren, sondern auch vorhandene SVG-Dateien importieren. Die enthaltenen Pfade werden in bearbeitbare Elemente übersetzt. Je nach Aufbau der SVG können Farben und Teilformen als separate Ebenen erscheinen.
Dieser Import ist hilfreich, wenn ein Logo aus einem anderen Programm weiterverarbeitet werden soll. Komplexe SVG-Spezialfunktionen, externe Schriften oder Effekte lassen sich nicht immer eins zu eins übernehmen. Eine SVG mit in Pfade umgewandelten Schriften und einfachen Füllflächen ist deshalb die stabilste Grundlage.
SVG verlustfrei exportieren
Vektorisierte Pfade können als SVG-Datei ausgegeben werden. Das Format eignet sich für weitere Bearbeitung in vektororientierten Anwendungen, für Webgrafiken und für viele Druckworkflows. Es ist unabhängig von einer festen DPI-Zahl, weil die Pfade erst bei der Ausgabe gerastert werden.
Der SVG-Export sollte für tatsächlich vorhandene Vektorpfade verwendet werden. Rasterbilder, aufwendige Ebeneneffekte oder HTML-Inhalte werden nicht automatisch zu echten Vektoren. Wer ein vollständiges Mockup mit Foto, Schatten und Textur exportieren möchte, verwendet besser PNG, JPEG, PSD oder PDF.
Logos für Textilien vorbereiten
Für ein Merch-Motiv ist ein reduzierter Workflow oft besonders effektiv. Zuerst wird das Logo freigestellt und getrimmt. Danach startet die Vektorisierung mit dem Logo-Preset und zwei Farben. Die helle Hintergrundebene wird ausgeblendet, die dunkle Logofläche in der gewünschten Druckfarbe eingefärbt und alle verbleibenden Pfade werden gruppiert.
Das gruppierte Logo kann anschließend auf ein T-Shirt- oder Hoodie-Mockup gesetzt werden. Für die reine Vorschau helfen Perspektive und Mischmodus. Parallel bleibt die SVG-Datei als skalierbare Grundlage für die Druckvorbereitung erhalten.
Typische Fehler und ihre Lösung
Zu viele kleine Pfade entstehen meist durch Bildrauschen, JPEG-Artefakte oder eine zu hohe Farbanzahl. Vorheriges Glätten, besseres Ausgangsmaterial und weniger Farben reduzieren die Komplexität. Ausgefranste Kanten deuten häufig auf eine zu kleine Quelldatei hin. Hier kann ein moderates Upscaling vor der Vektorisierung helfen.
Wenn Buchstaben zusammenlaufen, ist der Kontrast möglicherweise zu niedrig oder die Farbanzahl zu gering. Fehlt ein feines Detail, sollte eine etwas detailliertere Einstellung getestet werden. Eine Vektorisierung ersetzt dennoch keine manuelle Reinzeichnung bei besonders anspruchsvollen Markenlogos.
Wann SVG und wann PNG sinnvoll ist
SVG ist ideal für Logos, Icons, Schriftzüge und flächige Illustrationen. PNG ist besser für fotografische Motive, realistische Schatten, feine Texturen und halbtransparente Pixel. Häufig werden beide Formate benötigt: SVG als skalierbare Designquelle und PNG als fertige Vorschau im Mockup.
Mockup Paint verbindet diese beiden Welten. Ein Rastermotiv kann bereinigt, in Farbgruppen zerlegt, als Vektor bearbeitet und anschließend direkt in einem Produktbild eingesetzt werden. Dadurch bleibt der Workflow vom ersten Upload bis zur exportierten Grafik in einem Arbeitsbereich.
Redaktioneller CTA: Ein eigenes Logo importieren, mit zwei Farben vektorisieren und als editierbare SVG-Datei exportieren.
Häufige Fragen
Für welche Motive lohnt sich Vektorisierung?
Logos, Icons und Illustrationen mit klaren Konturen profitieren meist stärker als detailreiche Fotos.
Was muss ich bei Fotos beachten?
Fotos enthalten viele Tonwerte und Texturen. Eine automatische Umwandlung kann deshalb sehr viele Pfade erzeugen oder Details vereinfachen.
Was kontrolliere ich nach dem Vektorisieren?
Prüfe Pfadanzahl, kleine Fragmente, Innenräume und die äußere Kontur bei hoher Vergrößerung.
Wann exportiere ich als SVG?
SVG ist für skalierbare Pfade gedacht. Für fotografische Inhalte und weiche Schatten bleibt ein Pixelbild meist passender.
Weiterführende Beiträge
- Zeichnen, Formen und Typografie in Mockup Paint: Designs direkt im Browser gestalten
- Präzise Layouts in Mockup Paint: Raster, Objektfang, Lineale und Hilfslinien
Quellen
- Mockup Paint Startseite – offizieller Produktumfang und Workflow. (Abrufdatum: 06.09.2026)
- Mockup Paint Editor – offizieller Bearbeitungsbereich und verfügbare Werkzeuge. (Abrufdatum: 06.09.2026)