PSD in PNG umwandeln: So reduzierst du Ebenen richtig
Warum die Umwandlung von PSD in PNG kniffliger ist, als es aussieht
Eine PSD-Datei ist kein einzelnes Bild. Sie ist ein komplexes Rezept: ein Stapel von Ebenen, Einstellungsebenen, Masken, Smartobjekten und Füllmethoden, die erst durch eine fähige App wie Photoshop zusammengefügt werden. Wenn du versuchst, eine PSD in eine PNG umzuwandeln, ohne das zu verstehen, geht schnell etwas schief. Möglicherweise erhältst du einen flachen weißen Hintergrund, wo eigentlich Transparenz sein sollte, es fehlt Text, weil eine Textebene nicht gerendert wurde, oder du bemerkst seltsame Farbverschiebungen, weil eine Einstellungsebene ignoriert wurde. PNG ist ein einfaches Rasterformat. Es speichert ein Gitter aus Pixeln, keine Liste von Anweisungen. Die Konvertierung ist also in Wirklichkeit ein Rendering-Job. Du fasst all diese Photoshop-Anweisungen zu einem finalen Pixelraster zusammen und speicherst dieses Raster dann als verlustfreies PNG. Die Qualität deines finalen Bildes hängt vollständig davon ab, wie gut das Rendering mit allem umgeht, was in der Quelldatei steckt. Die häufigsten Fehler sind leicht zu erkennen, wenn man erst einmal weiß, worauf man achten muss. Transparenz wird oft durch eine deckende weiße oder schwarze Füllung ersetzt. Ebeneneffekte wie Schlagschatten und Leuchten können komplett verschwinden. Smartobjekte werden möglicherweise in niedriger Auflösung gerendert, weil sie nicht zuerst gerastert wurden. Und entfernte Farbprofile können deine Bilder auf kalibrierten Bildschirmen ausgewaschen aussehen lassen. Wenn du diese Fallstricke im Voraus kennst, ersparst du dir eine Menge Frust und Nacharbeit.
Ebenen in Photoshop vor dem Exportieren reduzieren
Wenn du Adobe Photoshop hast, gibt dir das manuelle Reduzieren und Exportieren die volle Kontrolle. Die entscheidende Wahl triffst du zwischen „Auf eine Ebene reduzieren“ und dem Zusammenfassen sichtbarer Ebenen. Sie klingen ähnlich, bewirken aber völlig unterschiedliche Dinge. „Auf eine Ebene reduzieren“ (Ebene > Auf eine Ebene reduzieren) fasst jede einzelne Ebene zusammen – auch die ausgeblendeten – und füllt alle transparenten Bereiche mit Weiß. Für ein PNG, das einen transparenten Hintergrund benötigt, ist das fast immer der falsche Weg. Verwende stattdessen den Shortcut, um sichtbare Ebenen zusammenzufassen (Umschalt+Strg+Alt+E unter Windows / Umschalt+Cmd+Option+E auf dem Mac). Dieser geniale Shortcut stempelt eine zusammengefügte Kopie aller sichtbaren Ebenen in eine neue Ebene ganz oben im Stapel, während deine ursprünglichen Ebenen darunter unangetastet bleiben. Du kannst dann nur diese neue, zusammengefügte Ebene exportieren, mitsamt der Transparenz. Für den Export selbst solltest du nicht den alten Befehl „Speichern unter“ verwenden. Geh direkt zu Datei > Exportieren > Exportieren als. In diesem Dialogfeld stellst du das Format auf PNG und achtest darauf, dass das Kontrollkästchen „Transparenz“ aktiviert ist. Für die Bildschirmnutzung sind 72 PPI der Standard. Für alles Hochauflösende, wie für den Druck oder Retina-Displays, verwendest du 144 oder 300 PPI. Denk daran, der PPI-Wert ist nur ein Metadatum; eine 2000×2000 Pixel große Arbeitsfläche mit 72 PPI exportiert ein 2000×2000 Pixel großes PNG. Die physischen Abmessungen ändern sich nicht. Ein letzter Profi-Tipp: Wenn deine PSD ein Farbprofil für den Druck verwendet, wie CMYK oder Adobe RGB 1998, musst du es vor dem Export für das Web in sRGB konvertieren. Geh zu Bearbeiten > In Profil umwandeln, wähle sRGB IEC61966-2.1 und verwende die Rendering-Priorität „Relativ farbmetrisch“ mit aktivierter „Tiefenkompensierung“. Diesen Schritt zu überspringen ist der Hauptgrund, warum sorgfältig gestaltete Designs in einem Webbrowser matt und ausgewaschen aussehen.
PSD online in PNG umwandeln mit CocoConvert
Nicht jeder hat ein Photoshop-Abonnement, und selbst wenn, ist das Konvertieren eines ganzen Ordners voller PSDs eine nervtötende Aufgabe. Der [PSD zu PNG Converter](/convert/psd-to-png) von CocoConvert löst dieses Problem, indem er das Rendering auf einem Server übernimmt. Du lädst einfach die PSD hoch und erhältst eine korrekt reduzierte PNG-Datei zurück, ganz ohne Design-Software auf deiner Seite. Der Konverter führt alle sichtbaren Ebenen intelligent zusammen und bewahrt dabei den Alphakanal. Das bedeutet, dass transparente Bereiche in deiner Photoshop-Datei auch im finalen PNG transparent bleiben, ohne diesen gefürchteten weißen Hintergrund. Er verarbeitet zuverlässig gängige Ebenentypen, einschließlich Rasterbildern, Textebenen (die in der nativen Auflösung des Dokuments gerendert werden) und grundlegenden Einstellungsebenen wie Tonwertkorrektur, Gradationskurven und Farbton/Sättigung. Die Bedienung ist einfach. Geh zu /convert/psd-to-png, zieh deine PSD auf die Seite oder klicke auf „Datei auswählen“ und dann auf „Konvertieren“. Das Tool unterstützt Dateien bis zu 50 MB. Die Verarbeitung dauert für eine typische Datei normalerweise nur 5–15 Sekunden, danach erhältst du einen Download-Link für die verlustfreie PNG-Ausgabe. Wenn du mit einer Reihe von Dateien arbeitest, wie einem Icon-Set oder einem UI-Kit, kannst du mehrere PSDs auf einmal hochladen. Jede wird einzeln verarbeitet, und du kannst die resultierenden PNGs einzeln herunterladen oder alle zusammen in einem einzigen ZIP-Archiv abrufen. Das ist eine enorme Zeitersparnis.
Was CocoConvert nicht kann (Ganz ehrlich)
Automatisierte Tools haben ihre Grenzen, und es ist besser, diese im Voraus zu kennen, als sie erst zu entdecken, nachdem man die Assets an einen Kunden geliefert hat. Smartobjekte sind das Wichtigste, worauf du achten musst. Wenn deine PSD eingebettete oder verknüpfte Smartobjekte enthält, rendert CocoConvert sie in ihrer Größe innerhalb des Dokuments, nicht in ihrer eigenen nativen Auflösung. Zum Beispiel wird eine 4000px-Vektorgrafik, die als Smartobjekt in einer 1000px-Leinwand platziert ist, mit 1000px gerendert. Du verlierst keine Qualität relativ zur Arbeitsfläche, aber du profitierst auch nicht von der höheren internen Auflösung des Smartobjekts. Dafür musst du das Smartobjekt zuerst in Photoshop rastern (Ebene > Smartobjekte > Rastern). 3D-Ebenen und Videoebenen werden nicht unterstützt. Jede PSD, die diese enthält, wird so verarbeitet, dass diese spezifischen Ebenen in der finalen PNG-Datei weggelassen werden und stattdessen das angezeigt wird, was darunter lag. Einige komplexe Füllmethoden können schwierig sein. Insbesondere „Sprenkeln“, „Harte Mischung“ und bestimmte luminanzbasierte Modi können etwas anders gerendert werden als in Photoshop. Der Unterschied ist normalerweise gering (ein paar Farbwerte pro Kanal), aber für pixelgenaue Arbeit solltest du die Ausgabe immer mit einem Referenzexport aus Photoshop vergleichen. CMYK-PSDs werden während der Verarbeitung automatisch in sRGB umgewandelt. Diese Konvertierung verwendet ein Standard-ICC-Profil, das für die meisten Web- und Bildschirmanwendungen genau genug ist. Es wird jedoch nicht perfekt mit einem benutzerdefinierten, für den Druck kalibrierten Workflow übereinstimmen. Wenn du Assets für den Offsetdruck vorbereitest, führe die Farbkonvertierung für maximale Kontrolle selbst in Photoshop durch.
Die richtigen PNG-Einstellungen wählen: Bittiefe und Kompression
PNG gibt es in zwei Hauptvarianten, 8-Bit und 24-Bit (oft als PNG-8 und PNG-24 bezeichnet), und die Wahl der richtigen ist wichtig. PNG-24 ist die hochwertige Option. Es speichert 16,7 Millionen Farben plus einen vollen 8-Bit-Alphakanal für sanfte Transparenz. Das ist es, was du für Fotos, komplexe Verläufe und jedes Bild mit feinen Farbvariationen brauchst. CocoConvert verwendet standardmäßig PNG-24, was die richtige Wahl für die Konvertierung von detailreichen PSD-Dateien ist. PNG-8 ist die leichtgewichtige Alternative. Es ist auf eine 256-Farben-Palette beschränkt und erzeugt viel kleinere Dateien – oft 60–70 % kleiner. Der Kompromiss sind sichtbare Farbabstufungen (Banding) bei Verläufen und eine Alles-oder-Nichts-Transparenz (ein Pixel ist entweder vollständig transparent oder vollständig deckend, nichts dazwischen). PNG-8 eignet sich nur für einfache Grafiken wie flächige Icons mit harten Kanten. Um ein PNG-8 zu erhalten, müsstest du die PNG-24-Ausgabe in einem Tool wie Photoshop weiterverarbeiten oder ein Kommandozeilen-Tool wie pngquant verwenden. Die PNG-Kompression ist immer verlustfrei, was bedeutet, dass sie niemals die Bildqualität reduziert. Die Einstellung der Kompressionsstufe ist rein ein Kompromiss zwischen Dateigröße und der Speicherzeit. CocoConvert verwendet automatisch eine ausgewogene Kompressionsstufe. Wenn du von Performance besessen bist und die absolut kleinste Dateigröße für ein Webprojekt benötigst, kannst du weitere 10–20 % herausholen, indem du die Ausgabe durch einen speziellen Optimierer wie oxipng oder pngcrush laufen lässt. Diese Tools komprimieren die Daten aggressiver neu, ohne auch nur ein einziges Pixel zu verändern. Zu guter Letzt solltest du dich immer fragen, ob PNG überhaupt das richtige Format ist. Wenn du keine Transparenz benötigst, wird ein hochwertiges JPEG dramatisch kleiner sein. Für die moderne Webnutzung mit Transparenz bieten WebP und AVIF eine überlegene Kompression. Aber für Master-Dateien, Design-Übergaben und alles, was möglicherweise erneut bearbeitet werden muss, bleibt PNG-24 der König.
Transparenz richtig handhaben: Ein genauerer Blick
PNG-Transparenz funktioniert über einen Alphakanal – eine zusätzliche 8-Bit-Graustufenkarte, bei der jedem Pixel ein Transparenzwert von 0 (vollständig durchsichtig) bis 255 (vollständig deckend) zugewiesen wird. Das ist es, was weiche Schlagschatten und geglätteten Text ermöglicht, die auf jedem Hintergrund gut aussehen. Einer der häufigsten Konvertierungsfehler hängt mit vormultipliziertem Alpha (pre-multiplied alpha) zusammen. Bei einem vormultiplizierten Bild wurden die Farbwerte bereits mit einer Hintergrundfarbe vermischt, was zu dunklen oder hellen Lichthöfen (Halos) um die Kanten führen kann, wenn die anzeigende Anwendung gerades Alpha (straight alpha) erwartet. Jeder, der schon einmal mit hässlichen schwarzen Rändern an seinen Icons gekämpft hat, kennt diesen Schmerz. CocoConvert gibt PNGs mit geradem Alpha aus, was der Standard ist, den Webbrowser und fast jede moderne Software erwarten. Um sicherzugehen, dass deine Transparenz die Konvertierung überlebt hat, teste die Ausgabe. Der schnellste Weg ist, das PNG in einem Webbrowser mit farbigem Hintergrund zu öffnen. Erstelle einfach eine simple HTML-Datei mit einem farbigen Body und einem `<img>`-Tag, das auf dein PNG verweist. Wenn die transparenten Teile die Hintergrundfarbe zeigen und die Kanten sauber sind, ist alles in Ordnung. Wenn du einen weißen Kasten oder dunkle Halos siehst, wurde der Alphakanal falsch behandelt. Überprüfe auch die Hintergrundebene deiner PSD – die Standardebene mit dem Schlosssymbol. Diese Ebene ist immer 100 % deckend. Wenn du Transparenz in deiner finalen PNG-Datei benötigst, musst du diese Hintergrundebene entweder löschen oder in eine normale Ebene umwandeln (doppelklicke sie einfach im Ebenen-Bedienfeld von Photoshop und klicke auf OK). CocoConvert ist schlau genug, das zu prüfen; wenn eine PSD nur eine deckende Hintergrundebene hat, wird das ausgegebene PNG keinen Alphakanal haben, was das korrekte und effizientere Verhalten ist.
Ein praktischer Workflow für wiederholbare Ergebnisse
Wenn du regelmäßig PSDs für ein UI-Kit, eine Markenbibliothek oder Kundenprojekte konvertierst, ist ein konsistenter Workflow dein bester Freund. Er spart Zeit und eliminiert dumme Fehler. Für einzelne Dateien oder kleine Mengen, wenn du Photoshop zur Hand hast, bleib bei der manuellen Methode. Verwende den Stempel für sichtbare Ebenen (Umschalt+Cmd+Option+E), überprüfe, ob das Farbprofil sRGB ist, und nutze dann „Exportieren als“ mit aktivierter Transparenz. Das dauert weniger als eine Minute pro Datei und gibt dir maximale Kontrolle. Für große Mengen oder wenn du kein Photoshop hast, nutze den [PSD zu PNG Converter](/convert/psd-to-png) von CocoConvert. Er erledigt die schwere Arbeit. Bevor du hochlädst, ist es eine gute Idee, deine PSDs kurz auf komplexe Smartobjekte oder 3D-Ebenen zu überprüfen. Wenn pixelgenaue Präzision nicht verhandelbar ist, rastere diese Ebenen zuerst. Nach dem Download des Batches solltest du stichprobenartig ein paar der resultierenden PNGs in einem Browser prüfen, um zu bestätigen, dass die Transparenz korrekt aussieht. Für produktive Web-Assets ist die Dateigröße alles. Lass deine PNGs nach der Konvertierung durch einen Optimierer wie oxipng laufen. Ein einfacher Befehl wie `oxipng -o 4 --strip safe *.png` bietet eine großartige Balance aus Kompression und Geschwindigkeit und entfernt sicher unnötige Metadaten. Und zum Schluss, tu deinem Team (und deinem zukünftigen Ich) einen Gefallen: Dokumentiere deine Einstellungen. Wenn du Assets übergibst, füge eine einzeilige Notiz zum Format hinzu. Etwa so: „Alle PNGs sind sRGB, PNG-24, mit Transparenz, optimiert mit oxipng -o4“. Dieser einfache Schritt verhindert das gefürchtete Gespräch „Warum sehen diese Farben auf meinem Bildschirm komisch aus?“, das die Zeit aller verschwendet.