Das PNG-Format ist für viele Fotografen, Webdesigner und Grafiker unverzichtbar. Es bietet verlustfreie Kompression und unterstützt Transparenz, was es ideal für Logos, Grafiken und Bilder macht, die nahtlos in Webseiten oder andere Designs integriert werden sollen. Adobe Photoshop, als führende Software in der Bildbearbeitung, bietet verschiedene leistungsstarke Methoden, um Ihre Bilder als PNG-Datei zu speichern oder zu exportieren. In diesem Artikel erfahren Sie Schritt für Schritt, wie Sie das Beste aus der PNG-Konvertierung in Photoshop herausholen.
Warum das PNG-Format wählen?
Bevor wir uns den Schritten in Photoshop widmen, ist es wichtig zu verstehen, warum Sie sich überhaupt für das PNG-Format entscheiden sollten. PNG steht für Portable Network Graphics und wurde als verbesserte Alternative zum GIF-Format entwickelt.
Die Hauptvorteile von PNG sind:
- Verlustfreie Kompression: Im Gegensatz zu JPG, das eine verlustbehaftete Kompression verwendet, komprimiert PNG Bilder ohne Qualitätsverlust. Das bedeutet, dass beim Speichern und erneuten Öffnen einer PNG-Datei keine Bildinformationen verloren gehen.
- Unterstützung von Transparenz: Dies ist vielleicht das wichtigste Merkmal von PNG. Das Format unterstützt einen Alpha-Kanal, der variable Transparenz ermöglicht. Das ist ideal für Logos, Icons oder Grafiken, die nahtlos über verschiedene Hintergründe gelegt werden sollen.
- Breite Farbtiefe: PNG unterstützt 24-Bit-Farben (PNG-24), was Millionen von Farben ermöglicht, ähnlich wie JPG. Das ältere PNG-8 unterstützt nur 256 Farben, ähnlich wie GIF, wird aber seltener für Fotos verwendet.
PNG eignet sich hervorragend für Webgrafiken, Illustrationen, Logos, Screenshots und Bilder, bei denen scharfe Kanten und Text wichtig sind oder bei denen Transparenz benötigt wird. Für Fotos mit komplexen Farbverläufen und vielen Details kann JPG oft eine kleinere Dateigröße bei akzeptablem Qualitätsverlust bieten, aber wenn Qualität oder Transparenz entscheidend sind, ist PNG die bessere Wahl.
Methode 1: Speichern unter... (Der klassische Weg)
Dies ist die einfachste und traditionellste Methode, um eine Datei in Photoshop als PNG zu speichern. Sie ist besonders nützlich, wenn Sie die Originaldatei im PSD-Format behalten und eine PNG-Kopie erstellen möchten.
Schritt-für-Schritt-Anleitung:
- Öffnen Sie das Bild in Adobe Photoshop, das Sie als PNG speichern möchten.
- Gehen Sie im Menü zu Datei > Speichern unter... (oder Save As... auf Englisch).
- Ein Dialogfenster öffnet sich. Wählen Sie im Dropdown-Menü "Format" (oder "Format") die Option PNG (*.PNG; *.PNS) aus.
- Geben Sie einen Dateinamen ein und wählen Sie den Speicherort auf Ihrem Computer.
- Klicken Sie auf die Schaltfläche "Speichern".
Optionen im PNG-Speichern-Dialog:
Nachdem Sie auf "Speichern" geklickt haben, erscheint ein weiteres kleines Dialogfenster mit PNG-Optionen:
- Interlace (Zeilensprungverfahren):
- Ohne (None): Das Bild wird von oben nach unten geladen.
- Adam7: Das Bild wird in mehreren Durchgängen geladen, wodurch eine niedrigauflösende Vorschau schneller sichtbar wird und sich dann verfeinert. Dies kann die Dateigröße leicht erhöhen und wird heute seltener verwendet, da moderne Internetverbindungen schnell genug sind. Wählen Sie in den meisten Fällen "Ohne".
Klicken Sie auf "OK", um den Speichervorgang abzuschließen.
Diese Methode speichert das Bild in der Regel als PNG-24 mit voller Transparenzunterstützung, falls Ihr Dokument Transparenz enthält (z. B. eine Ebene ohne Hintergrund).
Methode 2: Exportieren als... (Flexibilität und Kontrolle)
Die Funktion "Exportieren als..." (Export As...) ist eine modernere und oft flexiblere Methode, um Bilder aus Photoshop zu exportieren, insbesondere wenn Sie verschiedene Formate und Einstellungen für Web oder andere Zwecke benötigen. Sie bietet eine Vorschau und mehr Kontrolle über die Exportoptionen.
Schritt-für-Schritt-Anleitung:
- Öffnen Sie Ihr Bild in Photoshop.
- Gehen Sie im Menü zu Datei > Exportieren > Exportieren als... (oder File > Export > Export As...).
- Ein großes Dialogfenster mit einer Vorschau und vielen Einstellungen öffnet sich.
- Im rechten Bereich des Dialogs finden Sie die Export-Einstellungen:
- Wählen Sie unter "Format" (Format) PNG.
- Stellen Sie sicher, dass die Option Transparenz (Transparency) aktiviert ist, wenn Ihr Bild Transparenz enthalten soll.
- Sie können die Bildgröße (Breite, Höhe) und Skalierung anpassen.
- Wählen Sie die Farbraum-Optionen (z. B. "In sRGB konvertieren" für Web).
- Wählen Sie die Metadaten-Optionen (z. B. "Copyright und Kontaktinformationen").
- Die Vorschau links zeigt Ihnen, wie das exportierte Bild aussehen wird.
- Klicken Sie auf die Schaltfläche Alle exportieren... (Export All...).
- Wählen Sie den Speicherort und geben Sie einen Dateinamen ein.
- Klicken Sie auf "Speichern".
Vorteile von "Exportieren als":
- Vorschau: Sie sehen sofort, wie sich die Einstellungen auf das Bild auswirken.
- Flexibilität: Einfaches Ändern von Größe, Format, Farbraum und Metadaten.
- Schneller Export: Oft schneller als "Für Web (Legacy) speichern".
Diese Methode ist oft die empfohlene Wahl für den Export von PNGs aus neueren Photoshop-Versionen.
Methode 3: Für Web (Legacy) speichern... (Optimierung für das Internet)
Die Funktion "Für Web (Legacy) speichern..." (Save for Web (Legacy)...) ist eine ältere, aber immer noch sehr mächtige Funktion in Photoshop, die speziell für die Optimierung von Bildern für das Web entwickelt wurde. Sie bietet detaillierte Kontrolle über Dateigröße und Qualität.
Schritt-für-Schritt-Anleitung:
- Öffnen Sie Ihr Bild in Photoshop.
- Gehen Sie im Menü zu Datei > Exportieren > Für Web (Legacy) speichern... (oder File > Export > Save for Web (Legacy)...).
- Ein umfangreiches Dialogfenster öffnet sich, oft mit mehreren Registerkarten (Original, Optimiert, 2fach, 4fach) und einer Vorschau.
- Im rechten Bereich unter "Vorgabe" (Preset) oder "Optimierung" (Optimization) finden Sie die Formatoptionen:
- Wählen Sie im Dropdown-Menü das Format PNG-24 oder PNG-8.
- Wenn Sie PNG-24 wählen:
- Aktivieren Sie Transparenz (Transparency), falls benötigt.
- Aktivieren Sie optional Interlaced (Zeilensprungverfahren).
- Wenn Sie PNG-8 wählen:
- Sie können die Anzahl der Farben (bis zu 256) und die Dithering-Optionen anpassen.
- Aktivieren Sie Transparenz (Transparency) – beachten Sie, dass die Transparenz bei PNG-8 entweder voll transparent oder voll opak ist (keine partielle Transparenz wie bei PNG-24).
- Im unteren Bereich des Dialogs sehen Sie die geschätzte Dateigröße und Ladezeit.
- Klicken Sie auf die Schaltfläche Speichern... (Save...).
- Wählen Sie den Speicherort und geben Sie einen Dateinamen ein.
- Klicken Sie auf "Speichern".
PNG-8 vs. PNG-24 in "Für Web (Legacy) speichern":
- PNG-24: Bietet volle Farbtiefe (Millionen Farben) und variable Transparenz. Ideal für Bilder mit Farbverläufen und Transparenz mit weichen Kanten. Die Dateigröße ist in der Regel größer als bei PNG-8.
- PNG-8: Bietet eine begrenzte Farbpalette (max. 256 Farben) und nur binäre Transparenz (vollständig transparent oder vollständig undurchsichtig). Ideal für einfache Grafiken, Logos mit wenigen Farben und scharfen Kanten, wo Transparenz benötigt wird, aber eine kleinere Dateigröße wichtig ist.
Diese Methode gibt Ihnen die feinste Kontrolle über die Optimierung für das Web, auch wenn die Benutzeroberfläche etwas veraltet ist.
Wichtige PNG-Optionen verstehen
Unabhängig davon, welche Methode Sie verwenden, gibt es einige Schlüsseloptionen, die Sie kennen sollten, um das gewünschte Ergebnis zu erzielen:
- Transparenz: Diese Option ist entscheidend, wenn Teile Ihres Bildes durchsichtig sein sollen. Stellen Sie sicher, dass die Ebenen im Photoshop-Dokument transparent sind (keine Hintergrundebene oder die Hintergrundebene in eine normale Ebene umgewandelt wurde) und dass Sie beim Exportieren die Transparenz-Option aktivieren.
- Interlace (Zeilensprungverfahren): Wie bereits erwähnt, steuert dies, wie das Bild beim Laden im Web angezeigt wird. "Ohne" (None) ist heute meist ausreichend. "Adam7" oder "Interlaced" lädt das Bild schrittweise.
- PNG-8 vs. PNG-24: Dies ist hauptsächlich in der "Für Web (Legacy) speichern"-Funktion relevant. PNG-24 für volle Farben und variable Transparenz, PNG-8 für begrenzte Farben und binäre Transparenz (kleinere Dateigröße).
Achten Sie immer darauf, die Option Transparenz zu aktivieren, wenn Ihr Bild einen transparenten Hintergrund haben soll.
PNG im Vergleich: Wann welches Format?
Es gibt viele Bildformate. Hier ein kurzer Vergleich von PNG mit den gängigsten Alternativen, JPG und GIF:
| Merkmal | PNG | JPG (JPEG) | GIF |
|---|---|---|---|
| Kompression | Verlustfreie Kompression | Verlustbehaftet | Verlustfrei |
| Transparenz | Ja (Alpha-Kanal, variabel) | Nein | Ja (binär, 100% transparent oder opak) |
| Farbtiefe | Bis zu 24 Bit (Millionen Farben) | Bis zu 24 Bit (Millionen Farben) | Bis zu 8 Bit (max. 256 Farben) |
| Ideal für | Logos, Grafiken, Screenshots, Bilder mit Transparenz, Webgrafiken | Fotos, Bilder mit komplexen Farbverläufen | Einfache Animationen, Icons, Grafiken mit wenigen Farben |
| Dateigröße | Größer als JPG für Fotos, oft kleiner als GIF für komplexe Grafiken | Oft kleiner für Fotos | Kleiner für einfache Grafiken, größer für komplexe Grafiken |
| Animation | Nein (APNG ist eine Erweiterung, wird aber nicht universell unterstützt) | Nein | Ja |
Wie Sie sehen, hat jedes Format seine Stärken. PNG ist die beste Wahl, wenn Sie verlustfreie Qualität und variable Transparenz benötigen.
Tipps für die Arbeit mit PNGs in Photoshop
Einige zusätzliche Tipps können Ihnen helfen, optimale PNG-Ergebnisse in Photoshop zu erzielen:
- Transparenz vorbereiten: Stellen Sie sicher, dass die Bereiche, die transparent sein sollen, tatsächlich transparente Bereiche in Ihrem Photoshop-Dokument sind. Dies bedeutet in der Regel, dass keine "Hintergrund"-Ebene vorhanden ist (oder diese in eine normale Ebene umgewandelt wurde) und dass die unerwünschten Bereiche gelöscht oder ausgeblendet sind.
- Farbraum: Für Web-PNGs ist es ratsam, das Bild in den sRGB-Farbraum zu konvertieren, um sicherzustellen, dass die Farben auf verschiedenen Monitoren konsistent aussehen. Die Export-Funktionen bieten oft eine Option dafür.
- Ebenen reduzieren (Optional): Wenn Sie das Bild exportieren, werden die Ebenen automatisch reduziert. Sie müssen Ihr Original-PSD nicht reduzieren, bevor Sie es als PNG speichern oder exportieren, es sei denn, Sie möchten eine reduzierte Version für andere Zwecke erstellen.
- Metadaten: Seien Sie sich bewusst, dass Metadaten (wie Copyright-Informationen oder Kameradaten) standardmäßig in PNGs enthalten sein können. Verwenden Sie die Export-Funktionen, um zu steuern, welche Metadaten beibehalten werden sollen, insbesondere wenn die Dateigröße kritisch ist.
Häufige Probleme und Lösungen
Manchmal funktioniert das Speichern als PNG nicht wie erwartet. Hier sind einige häufige Probleme und wie Sie sie beheben können:
- Keine Transparenz:
- Problem: Das Bild hat einen weißen oder farbigen Hintergrund, obwohl es transparent sein sollte.
- Lösung: Überprüfen Sie Ihr Photoshop-Dokument. Haben Sie eine "Hintergrund"-Ebene? Wenn ja, doppelklicken Sie darauf, um sie in eine normale Ebene umzuwandeln. Stellen Sie sicher, dass die Bereiche, die transparent sein sollen, tatsächlich gelöscht sind oder die Ebenen, die sie enthalten, ausgeblendet sind. Stellen Sie beim Speichern/Exportieren sicher, dass die Option Transparenz aktiviert ist.
- Große Dateigröße:
- Problem: Die PNG-Datei ist viel größer als erwartet.
- Lösung: PNG ist verlustfrei und kann daher größer sein als ein JPG, besonders bei Fotos. Bei Grafiken sollten Sie die Methoden Exportieren als oder Für Web (Legacy) speichern verwenden, um Optimierungsoptionen zu nutzen. Bei "Für Web (Legacy)" können Sie bei einfachen Grafiken PNG-8 anstelle von PNG-24 in Betracht ziehen, um die Dateigröße drastisch zu reduzieren (verliert aber Farbtiefe und variable Transparenz).
- Farben sehen anders aus:
- Problem: Die Farben des exportierten PNGs sehen anders aus als in Photoshop.
- Lösung: Stellen Sie sicher, dass Sie beim Exportieren die Option "In sRGB konvertieren" oder eine ähnliche Farbraum-Option aktivieren, insbesondere wenn das PNG für das Web bestimmt ist.
Häufig gestellte Fragen (FAQ)
- Welche Methode ist die beste, um ein Bild in Photoshop als PNG zu speichern?
- Für die meisten Zwecke ist die Methode "Exportieren als..." die modernste und flexibelste Option. Sie bietet eine gute Balance zwischen Kontrolle, Vorschau und Geschwindigkeit. Wenn Sie maximale Kontrolle über die Web-Optimierung benötigen (insbesondere PNG-8 vs. PNG-24), ist "Für Web (Legacy) speichern..." immer noch sehr nützlich.
- Kann ich in Photoshop ein PNG mit transparentem Hintergrund erstellen?
- Ja, absolut. Das ist einer der Hauptvorteile von PNG und Photoshop unterstützt dies vollständig. Stellen Sie sicher, dass Ihr Dokument transparente Bereiche hat (keine Hintergrundebene) und aktivieren Sie die Option "Transparenz" beim Speichern oder Exportieren.
- Warum ist meine PNG-Datei so groß?
- PNG verwendet verlustfreie Kompression. Das bedeutet, dass sie alle Bildinformationen behält, was zu größeren Dateien führen kann als bei verlustbehafteten Formaten wie JPG, insbesondere bei komplexen Fotos. Bei Grafiken kann die Dateigröße durch die Verwendung von PNG-8 (falls geeignet) oder durch die Optimierungsoptionen in den Export-Dialogen reduziert werden.
- Unterstützt PNG Animationen?
- Das Standard-PNG-Format unterstützt keine Animationen. Das GIF-Format ist für einfache Animationen gedacht. Es gibt eine Erweiterung namens APNG (Animated PNG), die aber nicht von allen Programmen und Browsern vollständig unterstützt wird. Wenn Sie eine Animation benötigen, verwenden Sie in der Regel GIF oder modernere Formate wie WebP oder Video.
- Was ist der Unterschied zwischen PNG-8 und PNG-24?
- PNG-8 verwendet eine begrenzte Farbpalette von maximal 256 Farben und unterstützt nur binäre Transparenz (voll transparent oder voll opak). PNG-24 unterstützt Millionen von Farben (24 Bit) und variable Transparenz (Alpha-Kanal), was weichere Kanten und Farbverläufe ermöglicht. PNG-24 ist die Standardwahl für hochwertige Grafiken und Bilder mit Transparenz.
Fazit
Das Speichern und Exportieren von Bildern als PNG in Photoshop ist ein einfacher Prozess, der Ihnen ermöglicht, hochwertige Grafiken mit Transparenz zu erstellen. Ob Sie die klassische "Speichern unter"-Methode, den flexibleren "Exportieren als"-Dialog oder die optimierungsstarke "Für Web (Legacy) speichern"-Funktion nutzen, Photoshop bietet die passenden Werkzeuge. Achten Sie immer auf die Transparenz-Option und wählen Sie die Methode, die am besten zu Ihren Anforderungen an Dateigröße und Qualität passt. Mit diesen Schritten sind Ihre Bilder bereit für das Web oder andere Designprojekte, bei denen das PNG-Format seine Stärken voll ausspielen kann.
Hat dich der Artikel Bild in Photoshop zu PNG konvertieren interessiert? Schau auch in die Kategorie Bildbearbeitung rein – dort findest du mehr ähnliche Inhalte!