Dateien und Zusammenarbeit

Mockup-Paint-Projekte speichern und austauschen: PSD, SVG, HTML und Projektdateien

6.9.2026

Ein Mockup ist selten nach einer einzigen Sitzung endgültig fertig. Motive werden ausgetauscht, Farben angepasst, Produktvarianten ergänzt oder Dateien an andere Personen übergeben. Deshalb ist nicht nur der kreative Funktionsumfang eines Editors wichtig, sondern auch sein Umgang mit Projektdaten und externen Formaten. Mockup Paint unterstützt dafür eigene Projektdateien sowie den Import und Export verschiedener Bild-, Vektor- und Layoutformate.

Dieser Beitrag zeigt, wie sich Projekte sichern, später weiterbearbeiten und in Workflows mit Photoshop, Procreate oder anderen Werkzeugen integrieren lassen. Dabei ist wichtig, zwischen einer bearbeitbaren Projektdatei, einem Austauschformat und einer finalen Ausgabedatei zu unterscheiden.

Drei Dateitypen für drei unterschiedliche Ziele

Im Arbeitsalltag erfüllen Dateien meist eine von drei Rollen:

  1. Eine Projektdatei bewahrt den aktuellen Bearbeitungsstand.
  2. Ein Austauschformat übergibt Inhalte an ein anderes Programm.
  3. Eine finale Exportdatei ist für Veröffentlichung, Freigabe oder Produktion bestimmt.

Wer diese Rollen trennt, vermeidet unnötige Verluste. Ein JPEG kann eine gute finale Vorschau sein, enthält aber keine separat editierbaren Ebenen. Eine PSD kann viele Strukturen transportieren, bildet jedoch nicht jede spezielle Funktion eines anderen Editors identisch ab. Die Mockup-Paint-Projektdatei ist deshalb die wichtigste Grundlage, wenn die Arbeit später im selben Tool fortgesetzt werden soll.

Das native Format .mockuppaint

Mockup Paint speichert komplette Projekte im eigenen Dateiformat mit der Endung .mockuppaint. Technisch enthält die Datei strukturierte Projektdaten. Die aktuelle Projektstruktur trägt eine Versionskennung und bewahrt deutlich mehr als nur ein flaches Vorschaubild.

Gesichert werden unter anderem:

  • Elemente und ihre Positionen
  • Ebenen und Gruppen
  • Bilddaten
  • Masken und Freistellungen
  • Perspektivinformationen
  • Dokument- und DPI-Einstellungen
  • Hilfsliniengruppen
  • Projektname und Vorschaubild

Dadurch kann ein Projekt später wieder geöffnet und weiterbearbeitet werden. Für die Archivierung ist dieses Format wesentlich wertvoller als ein einzelnes PNG. Es hält die interne Struktur zusammen und ermöglicht Änderungen an Text, Ebenen, Masken und anderen Bestandteilen.

Projekte sinnvoll benennen und versionieren

Eine Projektdatei sollte nicht einfach „Entwurf neu final 2“ heißen. Ein klares Schema spart besonders bei mehreren Produkten und Varianten Zeit. Geeignet wäre beispielsweise:

kollektion-produkt-ansicht-variante-datum.mockuppaint

Ein konkreter Dateiname könnte autumn-hoodie-front-black-v03.mockuppaint lauten. Die Versionsnummer verhindert, dass wichtige Zwischenstände überschrieben werden. Größere Meilensteine sollten als neue Datei gespeichert werden, beispielsweise vor einer umfassenden Freistellung oder vor dem Austausch des Hauptmotivs.

Zur Übergabe empfiehlt sich außerdem ein kurzer Hinweis, welche Version freigegeben ist und welche Schrift- oder Quelldateien eventuell zusätzlich benötigt werden.

Projektvorschau beim Laden

Das gespeicherte Vorschaubild erleichtert die Identifikation eines Projekts. Gerade wenn mehrere Varianten ähnlich benannt sind, ist eine visuelle Vorschau schneller zu erfassen als eine reine Dateiliste. Vor dem Speichern sollte deshalb ein aussagekräftiger Zustand auf der Arbeitsfläche sichtbar sein.

Eine Vorschau ersetzt allerdings keine Versionsdokumentation. Wenn Farbvarianten oder Druckgrößen kritisch sind, sollten diese im Dateinamen oder in einer begleitenden Notiz festgehalten werden.

PSD-Dateien importieren

PSD ist das native Dokumentformat von Adobe Photoshop und wird auch von vielen anderen Kreativprogrammen gelesen oder geschrieben. Mockup Paint kann PSD-Dateien importieren und dabei wesentliche Strukturen übernehmen. Dazu gehören Layernamen, Deckkraft, Gruppen, ausgeblendete Ebenen und unterstützte Mischmodi.

Das macht PSD zu einer sinnvollen Brücke für bestehende Designs. Eine in Photoshop vorbereitete Komposition kann in Mockup Paint übernommen und dort mit Mockup-, Maskierungs- oder Exportfunktionen weiterbearbeitet werden.

Am zuverlässigsten sind RGB-PSD-Dateien mit klarer Ebenenstruktur. Sehr komplexe Photoshop-Funktionen – etwa bestimmte Smartobjekte, Einstellungsebenen, Filter oder Spezialeffekte – besitzen nicht immer eine direkte Entsprechung im Browsereditor. In solchen Fällen kann eine vereinfachte Darstellung oder ein zusammengesetztes Vorschaubild verwendet werden.

Besonderheiten bei CMYK-PSD-Dateien

CMYK-Dateien sind für bestimmte Druckworkflows verbreitet, stellen beim Import in webbasierte Editoren aber eine besondere Herausforderung dar. In Mockup Paint sind CMYK-PSD-Inhalte nicht in jedem Fall vollständig editierbar. Es kann auf die zusammengesetzte Darstellung zurückgegriffen werden.

Wer möglichst viele Ebenen weiterbearbeiten möchte, sollte deshalb eine RGB-Arbeitskopie bereitstellen. Das finale Druckfarbmanagement kann anschließend über den passenden PDF-Export oder in der nachgelagerten Produktionssoftware erfolgen. Die originale CMYK-Datei sollte unabhängig davon archiviert bleiben.

PSD-Export für Photoshop und Procreate

Mockup Paint kann Projekte auch als PSD exportieren. Das ist hilfreich, wenn nach der browserbasierten Arbeit eine weitere Bearbeitung in Photoshop oder Procreate vorgesehen ist. Eine Ebenenstruktur erleichtert dort Farbkorrekturen, Retusche, Illustration oder Präsentationsaufbau.

Vor dem Export sollte die Ebenenliste aufgeräumt werden. Aussagekräftige Namen und logisch aufgebaute Gruppen zahlen sich beim Öffnen in einem anderen Programm unmittelbar aus. Unsichtbare Testebenen, unbenannte Kopien und überflüssige Zwischenschritte machen eine PSD unnötig schwer verständlich.

Trotz Ebenenexport sollte ein Austauschtest eingeplant werden. Kein Dateiformat garantiert, dass alle Effekte in jeder Anwendung exakt gleich interpretiert werden. Mischmodi, Masken, Schriften und browserbasierte Effekte sollten nach dem Öffnen visuell kontrolliert werden.

PNG und JPEG als universelle Vorschauformate

Für Abstimmung, Onlineshop, Social Media und schnelle Freigaben sind PNG und JPEG oft die praktischsten Formate. PNG arbeitet verlustfrei und kann transparente Hintergründe enthalten. Es eignet sich deshalb für freigestellte Motive, Logos und hochwertige Zwischenstände.

JPEG bietet kleinere Dateien und wählbare Qualitätsstufen. In Mockup Paint stehen dafür unterschiedliche Qualitätswerte zur Verfügung. Für eine schnelle Vorschau kann eine mittlere Einstellung genügen. Für ein finales Produktbild sollte eine hohe Qualität verwendet und das Ergebnis auf sichtbare Kompressionsartefakte geprüft werden.

Da beide Formate die Komposition in der Regel flach ausgeben, sollten sie nie die einzige Archivkopie eines editierbaren Projekts sein.

SVG importieren und exportieren

SVG ist ein Vektorformat. Mockup Paint kann SVG-Dateien importieren und Pfade auf die Arbeitsfläche übernehmen. Dadurch bleiben vektorbasierte Formen einzeln nutzbar, sofern die Datei entsprechend aufgebaut ist. Auch in Mockup Paint erzeugte oder vektorisierte Pfade können als SVG exportiert werden.

Das Format eignet sich besonders für Logos, Symbole, Schriftzüge und flächige Illustrationen. Vektorpfade lassen sich verlustfrei skalieren. Enthält ein SVG eingebettete Rasterbilder, komplexe Filter oder anwendungsspezifische Funktionen, kann die Übertragbarkeit jedoch eingeschränkt sein.

Für einen sauberen Austausch sollten Pfade möglichst klar strukturiert und unnötige Effekte vermieden werden. Nach dem Import lohnt sich eine Kontrolle von Füllungen, Konturen und Gruppierung.

Klassische Bildimporte: PNG, JPG und weitere Quellen

Neben PSD und SVG können übliche Bilddateien wie PNG und JPG als Elemente in das Projekt geladen werden. Mehrere Logos oder Motive lassen sich innerhalb einer Sitzung in einer Bibliothek bereithalten. Das beschleunigt Varianten, weil dieselbe Datei nicht für jede Produktansicht erneut gesucht werden muss.

Importierte Bilder können zugeschnitten, freigestellt, maskiert, hochskaliert, farblich angepasst und perspektivisch verzerrt werden. Ihre ursprüngliche Auflösung bleibt dennoch ein Qualitätsfaktor. Für große Druckexporte sollte immer die beste verfügbare Quelldatei verwendet werden.

HTML und CSS als visuelles Element

Eine ungewöhnliche Funktion von Mockup Paint ist die Möglichkeit, HTML- und CSS-Inhalte einzufügen oder aus einer Datei zu laden. Der Inhalt wird zunächst als eingebettete Vorschau dargestellt. Anschließend kann er in ein Bild umgewandelt werden, damit er Teil des normalen Canvas- und Exportworkflows wird.

Das ist nützlich für Website-Ausschnitte, einfache Interface-Entwürfe, Code-basierte Layouts oder visuelle Komponenten, die bereits als HTML vorliegen. Nach der Umwandlung kann die Darstellung wie ein Bild positioniert, maskiert oder perspektivisch in ein Geräte- oder Produktmockup eingesetzt werden.

Interaktive Funktionen des HTML-Inhalts werden bei einer Rasterisierung naturgemäß nicht als Interaktion erhalten. Für die finale Grafik zählt die gerenderte visuelle Darstellung.

Tech Packs und Brand Kits

Mockup Paint enthält Bereiche für Tech Packs und Brand Kits. Solche Sammlungen helfen dabei, wiederkehrende Marken- und Produktinformationen zu strukturieren. Ein Brand Kit kann Logos, Farben oder andere wiederverwendbare Markenbestandteile bündeln. Ein Tech Pack unterstützt die organisierte Darstellung technischer Produktinformationen.

Für die Zusammenarbeit ist Konsistenz besonders wichtig. Wenn Teammitglieder immer dieselben freigegebenen Logos, Farben und Bezeichnungen nutzen, entstehen weniger Abweichungen. Eine Projektdatei kann die konkrete Gestaltung sichern, während Brand- und Technikressourcen die wiederkehrende Grundlage liefern.

Übergabe an andere Personen oder Agenten

Für eine saubere Übergabe sollte nicht nur eine Datei verschickt werden. Ein kompaktes Paket kann enthalten:

  • die .mockuppaint-Projektdatei
  • eine PNG- oder JPEG-Vorschau
  • bei Bedarf eine PSD- oder SVG-Austauschdatei
  • verwendete Originalmotive
  • Hinweise zu Zielgröße, DPI und Export
  • eine klare Kennzeichnung des freigegebenen Stands

Damit kann die empfangende Person das Ergebnis sofort beurteilen und bei Bedarf weiterbearbeiten. Das Vorschauformat dient als visuelle Referenz: Wenn eine PSD in einer anderen Anwendung anders aussieht, ist die beabsichtigte Darstellung trotzdem dokumentiert.

Datensicherheit bei browserbasierter Arbeit

Auch wenn die Bearbeitung im Browser stattfindet, sollte die lokale Sicherung Teil des Workflows sein. Speichere wichtige Projektstände regelmäßig als .mockuppaint-Datei. Bei langen Sitzungen oder komplexen Maskierungen ist eine zusätzliche Zwischenversion sinnvoll.

Vor einem Browserwechsel, einer größeren Aktualisierung oder dem Leeren lokaler Browserdaten sollte unbedingt eine Projektdatei heruntergeladen werden. Für Kunden- oder Produktionsprojekte empfiehlt sich außerdem eine zweite Kopie auf einem gesicherten Laufwerk oder in einem geeigneten Backup-System.

Ein bewährter Austausch-Workflow

Ein robuster Prozess könnte folgendermaßen aussehen:

  1. Projekt in Mockup Paint strukturiert aufbauen.
  2. Ebenen und Gruppen eindeutig benennen.
  3. Einen bearbeitbaren Zwischenstand als .mockuppaint sichern.
  4. Eine visuelle Referenz als PNG exportieren.
  5. Je nach Folgeprogramm PSD oder SVG ausgeben.
  6. Die Austauschdatei im Zielprogramm testweise öffnen.
  7. Ebenen, Farben, Schriften, Masken und Mischmodi prüfen.
  8. Alle relevanten Dateien gemeinsam versionieren und übergeben.

Dieser Test kostet wenige Minuten und verhindert, dass Formatunterschiede erst spät im Prozess auffallen.

Fazit: Das richtige Format bewahrt den Wert eines Projekts

Mockup Paint unterstützt mehr als den finalen Bildexport. Das native Projektformat hält Bearbeitungsdaten zusammen, PSD verbindet den Workflow mit Photoshop und Procreate, SVG transportiert Vektorpfade und HTML/CSS kann als visuelle Quelle integriert werden. PNG, JPEG und PDF decken unterschiedliche Ausgabeziele ab.

Die wichtigste Regel lautet: Das finale Bild ist nicht automatisch die bearbeitbare Originaldatei. Wer Projekt-, Austausch- und Ausgabeformate bewusst trennt, schützt seine Arbeit, vereinfacht Zusammenarbeit und bleibt bei späteren Änderungen flexibel.

CTA-Platzhalter: Ein Mockup-Paint-Projekt sichern und den passenden Austausch- oder Exportweg für den nächsten Produktionsschritt wählen.

PSD-Import prüfen, wenn das Ergebnis abweicht

Wenn eine PSD-Datei nach dem Import anders aussieht als in Photoshop, ist das nicht automatisch ein Fehler in deinem Projekt. Öffne die Originaldatei und notiere, welche Ebenen, Einstellungsebenen und Smartobjekte sichtbar sind. Erstelle für den Vergleich eine vereinfachte Kopie, in der komplexe Filter und Effekte als sichtbare Referenzebene vorliegen. So lässt sich unterscheiden, ob eine Funktion nicht unterstützt wird oder ob lediglich Ebenenreihenfolge und Transparenz angepasst werden müssen. Prüfe zusätzlich RGB oder CMYK, eingebettete Schriften und die Kanten transparenter Pixel. Für eine sichere Übergabe gehören die editierbare Projektdatei, eine flache PNG-Referenz und die Austausch-PSD zusammen. Wenn die PNG-Ansicht stimmt, kannst du nur die betroffene Ebene nachbauen, statt die gesamte Komposition neu zu erstellen.

Typische Fehler beim Speichern und Wiederöffnen

Viele Probleme entstehen nicht beim Speichern selbst, sondern bei der Wiederöffnung des Projekts. Der häufigste Fall: Die Datei wurde in einem anderen Browser oder auf einem anderen Gerät gespeichert, und der lokale Speicher des zweiten Browsers enthält noch eine ältere Version. Mockup Paint arbeitet projektbezogen im Browser-Speicher; wer auf zwei Geräten arbeitet, sollte Projekte deshalb immer als Datei exportieren, bevor das Gerät wechselt.

Zweiter häufiger Fehler: Der Import einer PSD schlägt mit einer kryptischen Meldung fehl. In der Praxis sind drei Ursachen dafür verantwortlich. Erstens liegt der PSD ein Format zugrunde, das Features aus anderen Werkzeugen enthält, die Mockup Paint nicht lesen kann, etwa komplexe Smart-Objekt-Filter. Zweitens überschreitet die Datei die Größenordnung, die der Browser ohne Warnung verarbeitet; hier hilft, die Datei vorher zu reduzieren. Drittens enthält die PSD keine kompatiblen Ebenen, etwa ein reines Camera-Raw-Format. In allen Fällen gilt: Erst die Ebene in Photoshop oder Photopea zu einem einfacheren Format reduzieren, dann erneut importieren.

Kompatibilität und Grenzen im Alltag

Wer zwischen Mockup Paint und klassischen Desktop-Tools pendelt, sollte die Grenzen kennen. Der Export als PSD tauscht Ebenen, Texte und einfache Effekte zuverlässig aus. Verlaufsgitter, komplexe Ebenenstile und Smart-Filter-Konstruktionen werden dagegen in einfachere Darstellungen übersetzt, die im Zieltool nachgearbeitet werden müssen. Für den Produktbild-Alltag bedeutet das: Mockups, Freisteller und Layouts funktionieren im Austausch verlässlich; spezialisierte Druck-Retouren sollten direkt im Zielformat vorbereitet werden. Wer diese Grenze kennt, verliert keine Arbeit mehr an fehlgeschlagene Importe und behält die Kontrolle darüber, welche Datei die führende Version eines Projekts ist.

Häufige Fragen

Welche Datei ist der bearbeitbare Master?

Die native Mockup-Paint-Projektdatei bewahrt den Arbeitsstand für spätere Änderungen. PNG und JPEG sind fertige Ansichten.

Warum kann PSD anders aussehen?

Spezielle Photoshop-Funktionen werden nicht immer identisch abgebildet. Prüfe Ebenen, Transparenzen, Farbraum und Effekte nach dem Import.

Was gehört in eine Übergabe?

Projektdatei, sichtbare Referenz und Hinweise zu Fonts, Bildquellen und offenen Entscheidungen machen die Weiterarbeit sicherer.

Wie benenne ich Versionen?

Nutze Projektname, Version und bei Bedarf Datum. Halte Master, Austauschdateien und finale Ausgaben getrennt.

Weiterführende Beiträge

Quellen

Zurück zum Blog →