iPhone News Logo - to Home Page

Grafisches Design für das iPhone 4 Retina Display: Techniken und Workflow

2. Dezember 2010Bilder, iPhone Apps

Das Retina Display des iPhone 4 bringt durch seine deutlich gesteigerte Auflösung vier mal so viele Pixel auf der selben Fläche unter, wie noch das iPhone 3GS, und besticht dadurch mit atemberaubender Schärfe und nicht mehr erkennbaren Pixeln.
Während Apple das Standardinterface automatisch skaliert, und damit den Entwicklern das händische Hochschrauben der Auflösung (Scaling-Up) von Standard-Bedienelementen in ihren Apps erspart, bedürfen eigene Grafiken dennoch einer Anpassung. Vor allem stark auf besondere Grafiken aufbauende Apps sind davon betroffen.

WERBUNG

Damit die App möglichst unabhängig von der Displaygröße und -auflösung ist, gibt es verschiedene Techniken, die im Weiteren hier vorgestellt werden sollen:

Flüssiges Layout
Das Prinzip des „Flüssigen Layouts“ hilft vor allem bei unterschiedlichen Displaygrößen: Die Elemente sind zwar gleich groß, können aber ausgefüllt werden, falls es z.B. links und rechts plötzlich mehr Platz gibt (vgl. iPhone 3GS < -> iPad). Im Bezug auf veränderte Pixeldichte, wie beim Retina Display, findet dieses Prinzip allerdings keine Anwendung: Buttons und Bedienelemente wären nur mehr halb so groß, die dazugehörigen Balken dafür dazwischen ausgefüllt.
iPhone App mit "flüssigem Layout"

Vektorgrafiken
Ein häufig von Programmierern gewählter Weg zur Unabhängigkeit von der Display-Auflösung ist die Verwendung von Vektorgrafiken, oder das Generieren von Grafiken am Gerät mittels Code. Theoretisch eine sehr saubere Problemlösung (das gesamte Design ist skalierbar), doch gibt es zwei gravierende Nachteile: Vektorbasierte Grafiken verschlingen mehr Ressourcen, und bieten wenig Kontrolle am Pixel-Level. Wird die Größe einer Grafik um einen Pixel vergrößert, verliert man durch die Pixelverschiebung am Display teils deutlich an Schärfe.
Design fürs Retina Display: Schwächen von Vektorgrafiken

Vorbereitete Unabhängigkeit von der Auflösung
Die beste Lösung – die natürlich auch Apple für den Übergang vom iPhone 3GS zum iPhone 4 wählte – ist die sogenannte „Ahead-of-time Resolution Independence“: App-Icons und Bedienelemente werden für jede Displaygröße und Auflösung eigens gerendert und verfügbar gemacht. Das ist zwar mehr Arbeit, lohnt sich aber in den für jedes Gerät optimalen Resultaten.
Eigens gerenderte Grafiken für iPhone 3GS und iPhone 4 bieten die besten Ergebnisse

Derzeit gibt es drei iOS-Auflösungen: 320×480 (ältere iPhones und iPod Touches), 640×960 (iPhone 4 und iPod Touch 4G) und 768×1024 (iPad). Schon bald könnte die Liste durch ein Retina Display am iPad um die Auflösung 1536×2048 erweitert werden, für die Verwendung mit dem deutlich größeren Display ist das Layout von iPad-Apps aber häufig unabhängiger von den iPhone- und iPod Touch Versionen.

Skalierbare Designs erstellen
Für iPhone 4 optimierte Apps benötigt man 2 Bildersätzen: Der (bisher) herkömmliche mit 163 ppi, und der neuere mit 326 ppi für das Retina Display (markiert mit „@2x“ am Ende des Dateinamens).
Bedienelemente in Adobe Photoshop sollten möglichst keine gerasterten Elemente (Bitmaps) enthalten, weil sie beim Vergrößern und Verkleinern pixelig bzw. unscharf werden. Stattdessen sollte man auf Vektormasken setzen, mit denen man ebenso einfarbige und gemusterte Ebenen sowie Farbgradienten erzeugen kann. Vorteilhaft ist die Einstellung „Snap to Pixel“, wenn möglich.

Vektormasken für App-Design verwenden

Zur Erstellung aufwändigerer grafischer Objekte greifen viele Designer zu Adobe Illustrator, erstellen ihre Grafiken in exakter Pixelgröße und kopieren das Ergebnis später als „Shape Layer“ oder „Smart Object“ (je nachdem, wie komplex die Grafik ist) in Photoshop.

Falls die Verwendung von Rasterelementen nicht vermeidbar ist, gibt es drei mögliche Einsatzarten: Als Musterebene, als Musterebenen-Stil, und als Rasterebene in doppelter Größe, die in ein Smart Object umgewandelt wird. Für den Musterebenen-Stil sei gewarnt, dass durch die bikubische Interpolation beim Verändern der Größe eines Dokuments „weicher“ werden. Ein Umweg ist die Verwendung von zwei Versionen für jedes Muster, und die händische Anpassung an das richtige Muster nach dem Skalieren. Etwas lästig, aber bei wenigen Musterebenen nicht unmöglich.

Skalieren
Wird ein Design mit diesen Anhaltspunkten erstellt, steht einer anschließenden Skalierung auf 200 % nichts mehr im Weg. Im Gegensatz dazu sollte man nicht in Retina Display Auflösung designen und später einfach die Bildgröße auf 50 % reduzieren: Hier treten oft Probleme auf, weil Ebenenstile nur Ganzzahlen unterstützen. Soll ein 1 px dicker Rand auf 50 % verkleinert werden, dann bleibt die Stärke bei 1 px, weil 0,5 px nicht zulässig wäre.

iPhone Apps für Retina Display Auflösung skalieren

Exportieren
Für den Export der Einzelnen Grafiken aus dem Gesamtdesign gibt es leider nicht allzuviele Tipps – es ist und bleibt ein aufwändiger Schritt. Ein Ablauf, der einem guten Workflow am nahesten kommt, wäre z.B. dieser:

  • Design für 1x erstellen
  • Für die Extraktion der 1x-Grafiken die „Copy Merged“ Funktion verwenden
  • Den Ordner mit allen 1x Dateien kopieren
  • Mit Hilfe des Automators „@2x“ ans Ende aller Kopien hinzufügen und die Bilder mit einer Photoshop-Aktion „Skaliere auf 200%“ vergrößern. Dadurch erhält man einen zweiten Satz an Dateien mit dem richtigen Dateinamen.
  • Hauptdesign auf 200 % Skalieren und mit „Copy Merged“ die Elemente in voller Qualität über die „schlechteren Ebenen“ der 2x-Dateien legen, dann mit „Für Web speichern“ exportieren.

Auch das Photoshop-Feature „Ebenen in Dateien exportieren“ im „Datei“-Menü kann manchmal hilfreich sein.

(Übersetzung von Smashing Mag)

Du kannst den Kommentaren zu diesem Artikel über den RSS-Feed folgen. Kommentare und Pingbacks sind deaktiviert.

Tags , , , , , , , , ,

ommentare

  1. M_Key2. Dezember 2010 um 18:31

    Thx, auf so einen Eintrag hab ich lange gewartet, hat mir sehr geholfen!

  2. Dgh2. Dezember 2010 um 21:21

    vielen dank!

  3. D4rk-x25. Februar 2011 um 11:47

    Danke das hat mir sehr geholfen!

  4. D4rk-x25. Februar 2011 um 11:47

    Danke das hat mir sehr geholfen!

  5. D4rk-x25. Februar 2011 um 11:47

    Danke das hat mir sehr geholfen!

  6. D4rk-x25. Februar 2011 um 11:47

    Danke das hat mir sehr geholfen!

Letzte Tweets