Photoshop-Ebenen automatisch als PNG und SVG exportieren: Asset Export für Design-Teams

Montagmorgen, die Kampagne geht am Nachmittag online: Das Design steht, aber für Landingpage, Newsletter, App und Social Media werden noch Logo, Icons, Produktfreisteller und grafische Elemente in mehreren Größen gebraucht. Wenn jede Datei einzeln geöffnet, zugeschnitten und exportiert wird, entstehen schnell falsche Dateinamen, fehlende Transparenzen oder uneinheitliche Größen. Genau hier spart der Asset Export in Photoshop Zeit und verhindert typische Übergabefehler.

Für Design- und Marketing-Teams ist eine Photoshop-Datei nicht nur ein Layout, sondern oft die Quelle für viele wiederverwendbare Einzeldateien. Mit einer guten Ebenenstruktur kannst du daraus PNGs und SVGs exportieren, Varianten in mehreren Auflösungen ausgeben und die Ergebnisse nachvollziehbar an Entwicklung, Marketing oder externe Partner übergeben.

Infografik zu Photoshop-Ebenen automatisch als PNG und SVG exportieren: Asset Export für Design-Teams (KI-generiert).

Was der Asset Export in Photoshop leistet

Der Asset Export bringt ausgewählte Ebenen, Gruppen oder Zeichenflächen als einzelne Dateien aus Photoshop heraus. Statt alle Elemente manuell ein- oder auszublenden und über „Exportieren als“ einzeln zu speichern, stellst du die gewünschten Assets zusammen und definierst Format, Größe und Skalierung zentral.

Besonders geeignet ist der Workflow für:

• Icons und UI-Elemente für Apps und Websites
• Logos und Markenbestandteile
• transparente Produktfreisteller
• Buttons, Badges und grafische Kampagnenelemente
• Social-Media-Elemente in verschiedenen Größen
• wiederkehrende Bestandteile für Newsletter und Landingpages

PNG ist meist die richtige Wahl, wenn Transparenz und Pixelgrafik gefragt sind, etwa bei freigestellten Fotos, Schatten oder Bildtexturen. SVG eignet sich für einfache Vektorelemente wie Icons, Logos und Formen, die in unterschiedlichen Größen scharf bleiben sollen.

Wichtig: Nicht alles, was in Photoshop gut aussieht, wird als SVG automatisch zu einer schlanken, vollständig editierbaren Vektordatei. Ebeneneffekte, komplexe Mischmodi, Filter, Pixelbilder oder aufwendige Masken können beim Export anders aussehen, gerastert werden oder zu großen Dateien führen. Prüfe SVG-Dateien deshalb immer im Zielsystem, etwa im Browser oder in der Designübergabe.

Die PSD vor dem Export richtig aufbauen

Ein sauberer Export beginnt nicht im Exportfenster, sondern in der Ebenenpalette. Wer dort nur „Ebene 48 Kopie neu“ findet, kann Assets nicht verlässlich auswählen, prüfen oder wiederverwenden.

Vergib Namen, die beschreiben, was die Datei später enthält. Gute Namen sind eindeutig und für Personen außerhalb des Designteams verständlich.

Unklarer Ebenenname	Besserer Ebenenname
Gruppe 12	icon-suche
Rechteck 4	button-primary-blau
Logo final neu	logo-cmt-weiss
Produkt frei	produkt-kaffeemaschine-front
Text 3	badge-neu

Halte auch die Struktur einfach. Eine Gruppe „icon-suche“ sollte nur die Elemente enthalten, die tatsächlich als Such-Icon ausgegeben werden. Hintergrundhilfen, unsichtbare Entwürfe oder alternative Varianten gehören nicht hinein. Sonst exportierst du ungewollt zusätzliche Flächen, falsche Abstände oder nicht benötigte Inhalte.

Falls du mehrere Varianten eines Assets pflegst, helfen getrennte Gruppen wie „logo-dunkel“, „logo-hell“ und „logo-monochrom“. Für wiederkehrende Kampagnenmotive sind Zeichenflächen sinnvoll, weil sie Format und Ausschnitt verbindlich festlegen. Wie du verschiedene Ausspielungen in einer Datei organisierst, zeigen wir auch in unserem Beitrag zu Kampagnenmotiven für LinkedIn, Instagram und Banner mit Zeichenflächen.

Die Grundlage bleibt ein sicheres Verständnis der Ebenenlogik. Wenn du bei Gruppen, Sichtbarkeit und Stapelreihenfolge noch unsicher bist, lies zuerst unseren Ratgeber Ebenen in Photoshop: das wichtigste Konzept.

Ebenen, Gruppen und Zeichenflächen als Assets auswählen

Wähle in der Ebenenpalette die Ebene, Gruppe oder Zeichenfläche aus, die du exportieren möchtest. Mehrere Elemente markierst du mit gedrückter Umschalt- oder Strg-Taste unter Windows beziehungsweise Befehlstaste auf dem Mac. Anschließend öffnest du den Asset Export über „Datei“, „Exportieren“, „Exportieren als“.

Photoshop übernimmt die ausgewählten Elemente in das Exportfenster. Dort siehst du eine Vorschau der einzelnen Assets und kannst kontrollieren, ob Ausschnitt, Transparenz und Benennung stimmen.

Bei der Auswahl gilt:

• Einzelne Ebene: sinnvoll für ein einfaches Icon, Logo oder eine Grafik.
• Gruppe: sinnvoll, wenn ein Asset aus mehreren Ebenen, Texten und Formen besteht.
• Zeichenfläche: sinnvoll für komplette Bildschirmansichten, Anzeigenformate oder fertige Social-Media-Motive.

Eine Gruppe wird nach ihren sichtbaren Grenzen exportiert. Achte deshalb auf Elemente, die weit außerhalb des eigentlichen Motivs liegen. Ein unsichtbar geglaubter Schatten, eine Hilfslinie auf Pixelebene oder ein versehentlich mitgeführter Hintergrund kann den Exportbereich vergrößern.

Bei Logos und UI-Assets empfiehlt es sich, bewusst etwas Schutzraum einzuplanen, wenn dieser später Bestandteil der Datei sein soll. Andernfalls exportierst du das Motiv möglichst eng, und der notwendige Abstand wird erst im Zielsystem definiert.

PNG und SVG passend einstellen

Im Asset-Export-Fenster legst du für jedes Asset das Format und die Skalierung fest. Für denselben Inhalt kannst du mehrere Ausgabevarianten definieren. Das spart besonders bei Web- und App-Projekten manuelle Wiederholungen.

PNG für Transparenz, Fotos und komplexe Grafiken

PNG unterstützt Transparenz und eignet sich daher für freigestellte Produkte, Schlagschatten, Bildcollagen oder Elemente mit weichen Kanten. Prüfe vor dem Export, ob die Hintergrundebene tatsächlich ausgeblendet ist. Ein weißer Hintergrund, der versehentlich in der Gruppe liegt, macht aus einem transparenten Asset schnell eine weiße Kachel.

Bei PNGs kannst du mehrere Skalierungen anlegen, etwa 1x und 2x. Welche Größen benötigt werden, sollte nicht das Designteam allein festlegen. Kläre mit Entwicklung oder der Person, die die Dateien einbindet, ob Pixelmaße, Pixeldichte oder konkrete Zielgrößen vereinbart sind.

Ein Icon mit 24 mal 24 Pixeln wird nicht automatisch besser, nur weil du es als 4x-PNG ausgibst. Die größere Datei ist nur dann sinnvoll, wenn sie im jeweiligen System wirklich verwendet wird. Für pixelbasierte Elemente solltest du außerdem bei 100 Prozent prüfen, ob Kanten sauber wirken und keine ungewollten halben Pixel entstehen.

SVG für skalierbare grafische Elemente

SVG ist für einfache Vektorformen besonders praktisch. Dazu zählen beispielsweise Piktogramme, Logos, Liniengrafiken und flächige Symbole. Die Datei bleibt in vielen Anwendungen unabhängig von der Darstellungsgröße scharf.

Vor dem SVG-Export solltest du kontrollieren:

• Besteht das Asset überwiegend aus Vektorformen oder Text?
• Werden Schriften im Zielsystem sicher unterstützt?
• Sind Effekte, Verläufe, Masken und Transparenzen im Ergebnis korrekt?
• Ist das SVG im Browser und in der vorgesehenen App getestet?
• Entspricht die sichtbare Fläche dem gewünschten Ausschnitt?

Bei Text ist Vorsicht sinnvoll. Wenn eine Schrift beim Empfänger nicht verfügbar ist, kann die Darstellung abweichen. Für unveränderliche Logos oder kurze Wortmarken kann es je nach Vorgabe sinnvoll sein, Text vor der Übergabe in Pfade umzuwandeln. Bewahre in jedem Fall eine editierbare Masterdatei mit Textebenen auf.

Mehrere Auflösungen ohne doppelte Arbeit ausgeben

Im Exportfenster kannst du pro Asset zusätzliche Größen anlegen. Ein Beispiel: Das gleiche Icon soll als SVG für moderne Oberflächen und zusätzlich als PNG in 1x und 2x für einen festgelegten technischen Prozess bereitstehen. Statt drei separate Exporte anzustoßen, definierst du die Varianten einmal und exportierst sie gemeinsam.

Achte auf verständliche Suffixe. Dateien sollten auch außerhalb von Photoshop direkt zuzuordnen sein, etwa:

• icon-suche.svg
• icon-suche@1x.png
• icon-suche@2x.png
• logo-cmt-weiss.png

Ob du „@2x“, konkrete Pixelmaße oder eine andere Namenskonvention verwendest, hängt vom Projekt ab. Entscheidend ist, dass sie verbindlich dokumentiert und durchgehend eingehalten wird.

Wenn du viele ähnliche Varianten erzeugst, etwa Banner mit wechselnden Texten oder Produktdaten, kann zusätzlich eine automatisierte Datenquelle helfen. Unser Beitrag zu Seriengrafiken mit Photoshop-Datenvariablen und CSV-Datei erstellen zeigt, wie sich wiederkehrende Inhalte systematischer ausgeben lassen.

Übergabe ohne Versionschaos organisieren

Der Export ist erst abgeschlossen, wenn die Empfänger wissen, welche Dateien verbindlich sind. Lege einen klaren Zielordner fest und vermeide Dateien wie „final“, „final_final“ oder „neu2“. Besser sind nachvollziehbare Ordner und Versionen, zum Beispiel nach Kampagne, Ausgabekanal und Freigabestand.

Eine praxistaugliche Struktur kann so aussehen:

• kampagne-fruehjahr
  • source
  • export-web
  • export-app
  • archiv

In den Exportordner gehören nur freigegebene Dateien. Die bearbeitbare PSD bleibt im Quellordner, zusammen mit verknüpften Bildern, Schriftenhinweisen und gegebenenfalls einem kurzen Übergabedokument. Bei Dateien mit Smartobjekten ist das besonders wichtig, denn externe Verknüpfungen können beim Verschieben verloren gehen. Lies dazu unseren Leitfaden Photoshop-PSD sauber übergeben: Verknüpfte Smartobjekte und Assets ohne fehlende Dateien.

Checkliste vor dem finalen Export

• Sind Ebenen, Gruppen und Zeichenflächen eindeutig benannt?
• Enthält jede Exportgruppe nur die gewünschten sichtbaren Elemente?
• Ist bei PNGs die Transparenz korrekt?
• Sind für SVG nur geeignete, getestete Inhalte vorgesehen?
• Stimmen Format, Skalierung und Dateinamen mit den Anforderungen überein?
• Wurden SVGs im Browser oder Zielsystem geprüft?
• Liegen nur freigegebene Dateien im Übergabeordner?
• Bleibt die editierbare PSD mit ihren Bestandteilen erhalten?

Asset Export ersetzt keine saubere Gestaltung und keine Abstimmung im Team. Er macht aber aus einer gut aufgebauten PSD eine verlässliche Produktionsdatei. Statt bei jeder Änderung mehrere Exporte neu zusammenzusuchen, aktualisierst du gezielt deine Assets und gibst sie mit klaren Namen, passenden Formaten und geprüften Größen weiter.

Wenn du diesen Workflow im Team einführen oder Photoshop für wiederkehrende Marketingaufgaben strukturierter nutzen möchtest, findest du passende Seminare und Termine bei uns auf cmt.de.