Scharfes Bild für Retina Displays, Blog BRAUER.DESIGN

Unscharfe Retina Bilder aus Photoshop

Photoshop / Ultimativer Tipp für scharfe Retina (@2x) Bilder für Web

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

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.

Bildexport für Retina Displays

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.

Viel Erfolg!