Photoshop / Ultimativer Tipp für scharfe Retina (@2x) Bilder
Da ich großen Wert auf optimale Bildqualität lege, exportiere ich meine Bilder aus Photoshop auch für Retina Displays. Zumal ich auf einem Mac mit Retina Display arbeite und so die Bildqualität bestens beurteilen kann. Vom Ergebnis war ich allerdings mehr als enttäuscht. Die Bilder waren für die ‚@2x Größe‘ leider ziemlich unscharf!
Also habe begonnen die Ursache zu erforschen und habe gegoogelt. Bei Adobe selbst habe ich nur die übliche Vorgehensweise, die auch ich angewendet hatte, gefunden. Glücklicherweise bin ich bei Yves Apel auf die Lösung gestoßen. Vielen Dank dafür! > Yves Apels Beitrag
Für den Export von Bildebenen aus Photoshop gibt es die Funktion ‚Datei > Exportieren > Exportieren als…‘ für Dateiformat, Größe, Qualität. Es öffnet sich ein Fenster, in dem ihr eure Einstellungen vornehmen könnt.
TIPP: ‚Exportieren als…‘ kann auch bei Klick auf die Ebene in der Ebenenpalette (mit rechter Maustaste) aufgerufen werden.
So sieht der klassische 1:1 Export aus
Diese Funktion ist weit aus besser als ‚Datei > Speichern unter‘, weil die Dateigröße optimiert wird. Wichtig für Web – jedes kb zählt ;-)!
(Dateigröße 1170 px, die ich 1:1 für meine Web-Anwendung brauche)
Der (falsche) Export für die Retina Auflösung @2x führt zu unscharfen Retina Bildern
Da in Photoshop diese Möglichkeit besteht, habe ich angenommen, dass sich Photoshop das Original holt, das als Smartobjekt eingebettet ist. Das liegt mit über 8.000 px in einer Super-Qualität vor. Aber weit gefehlt.
Photoshop nimmt das Bild in der Größe der psd-Datei und skaliert es zur doppelten Größe! Da wundere ich mich nicht mehr, dass es unscharf ist.
Der richtige Export in der Retina Auflösung @2x
Der Trick ist, dass man Photoshop überlistet. Die psd-Datei wird in doppelter Größe angelegt, in diesem Fall also 2340 px. Die Assets werden dann wie folgt exportiert:
1x mit dem Suffix @x2 für Retina
0,5x mit dem Suffix @0,5x für die Normalgröße
Den Suffix @0,5x kann man leider nicht löschen für den Export. Das geschieht dann eben danach, direkt im Dateiverzeichnis.
Jetzt muss nur noch der Suffix geändert werden
Ja, zugegeben! Kein leichter Weg, aber seitdem ich meinen Bildexport auf diese Weise löse, habe ich Bilder in sehr guter Qualität. Und das ist ja das Ziel.
Hi, ich bin druchs Googeln hierher gekommen, leider ohne dem Ergebnis, mein Problem zu lösen. Ich habe die aktuelle Cloudversion und gerade ziemlich dicken Hals. 🙂 Mein Logo ist quasi präventiv groß angelegt in 600px Höhe und beinhaltet 3 Ebenen mit Grafik und zwei Textblöcken. Wenn auf Export als.. gehe und dann die Größen angebe, um Versionen für 100px, 200px Höhe zu exportieren (Retinaversionen) dann erhalte ich die Logoversionen in de richtigen Höhe aber ohne alle Ebenen. PS killt den Slogan (kleinster Schriftzug) aus allen Varianten. Selbst wenn es als Smartobjekt geschützt ist. Keine Ahnung ob das ein Big ist… Finde jedenfalls keine Lösung… Daher Export Handarbeit einzeln… Nervig… Vielleicht hast Du ja eine Idee oder mein Ansatz ist verkehrt?
Ronald Maier
Hi Ronald, wenn du mehrere Ebenen exportieren willst – pack sie zuerst in einer Gruppe zusammen. Dann werden alle Ebenen in einem Bild zB als jpg oder png in einer Hintergrund-Ebene exportiert. Ein Export mit einzelnen psd-Ebenen ist leider nicht möglich.
1. –> Alle Ebenen, die zum Logo gehören aktivieren
2. –> oben rechts im Ebenen Bedienfeld auf „Neue Gruppe aus Ebenen“ klicken
3. –> Namen vergeben zB logo-xy
4. –> den Gruppen Ordner aktivieren und „Exportieren als..“ wählen
5. Formate und Größen wählen und exportieren
Ich hoffe das hilft!
ch_admin