Share
Avec la popularité croissante de l'iPad et du nouvel iPhone 4, il semble que les appareils iOS se dirigent rapidement vers des écrans à résolution supérieure. Les écrans de résolution supérieure offrent évidemment une meilleure expérience utilisateur, mais pour en tirer parti, les développeurs doivent mettre à jour leurs applications. Cet article explique en quoi consiste toute cette histoire et comment mettre en valeur vos applications à des résolutions plus élevées en présentant deux techniques d'optimisation graphique..
L'iPad a un écran plus grand, et donc une résolution plus grande. Cependant, avec l'iPhone 4, Apple a fait quelque chose de différent: ils ont augmenté la résolution sans changer la taille physique de l'écran. Cela donne une densité de pixels plus élevée, les pixels sont plus petits et plus compacts. Sur un pouce carré de l'écran de l'iPhone 4, il y a environ 106 000 pixels (à 326 PPI, ou pixels par pouce), tandis que les modèles plus anciens n'en ont qu'environ 26 000 (à 163 PPI) par pouce - 4 fois moins! Cela donne l'impression que les graphiques à l'écran sont des lignes continues, car votre œil ne peut pas voir les pixels individuels. Apple appelle cette technologie «l'écran de la rétine», car ils affirment que l'œil humain (la rétine) ne peut pas voir physiquement les pixels à cette résolution..
Par rapport aux autres plates-formes, le développement de l'iPhone vous permet notamment de connaître la taille et la résolution exactes sur lesquelles votre application sera affichée, ce qui vous permet de concevoir et de créer en fonction de ces dimensions. Afin de conserver cet avantage autant que possible, Apple a doublé la résolution avec précision - chaque pixel est remplacé par 4 pixels plus petits. Cela signifie que même si vous choisissez de ne pas tirer parti de l'écran Retina, votre application aura le même aspect qu'aujourd'hui..
Sur l'iPad, où l'écran et la résolution sont tous deux plus grands, Apple a autorisé le «doublage de pixels», qui fait exploser vos applications jusqu'à 4 fois sa taille. En termes de pixels, votre application, après avoir doublé, a la même taille que sur l’écran Retina. De cette façon, vous ne devez optimiser votre application qu'une seule fois, pour une résolution double, sur iPad et iPhone 4 (à moins que vous ne souhaitiez créer une version spécifique de l'iPad.)
Vous devez tenir un iPhone 4 dans vos mains pour vraiment apprécier son écran et l'importance de mettre à jour les graphiques de votre application. Les applications optimisées semblent nettement meilleures que celles qui ne le sont pas, et la mise à jour n'est pas aussi difficile que vous ne le pensez.
Déjà sans rien faire, tous les éléments d'interface utilisateur Cocoa fournis par défaut par Apple seront restitués à une résolution plus élevée sur l'iPhone 4. Les textes, les vues Web, etc. seront également automatiquement mis à jour. Ainsi, si vous construisez votre application entièrement à partir d'éléments d'interface utilisateur par défaut, aucune optimisation à faire pour l'affichage de la rétine! Cependant, toute image ou tout élément d'interface utilisateur personnalisé basé sur des images que vous pourriez avoir dans votre application nécessite un peu plus de travail..
La première étape consiste à créer une version de résolution supérieure de chacune de vos images. Cela sera démontré dans Photoshop mais les mêmes principes peuvent être appliqués à n’importe quel programme graphique.
Chaque fois que vous concevez une interface dans Photoshop, vous devez utiliser autant que possible des méthodes non destructives. La création de vos formes avec des graphiques vectoriels, en utilisant des objets intelligents et des styles de calque au lieu de filtres, offre une plus grande flexibilité lors du processus de conception. Lorsque tout est modifiable, il est plus facile d’apporter de petites modifications et la création de graphiques haute résolution devient très simple..
En guise de démonstration, nous allons créer un bouton simple puis en faire une version haute résolution..
Vous devriez travailler sur l'interface principale dans «l'ancienne» résolution »de 320x480. Cela vous permettra d'avoir une meilleure idée de ce que vous créez. Travailler depuis le début sur la taille complète de 640x960 peut être déroutant, car il semble énorme sur la plupart des moniteurs - et lorsque vous visualisez votre création sur l'iPhone, vous pouvez découvrir que les boutons qui semblaient importants dans Photoshop sont soudain minuscules. La plupart des appareils iOS sont encore en 320x480, et vous devez cibler cette résolution lors de la conception..
Créez un nouveau document, à 320 × 480 et 163 ppp (iPhone 3G) et, à l'aide de l'outil Forme, tracez un rectangle arrondi. Assurez-vous de créer un «calque de forme» et non de dessiner une forme de raster ou un chemin. Donnez un style au bouton qui ressemble à un bouton avec des styles de calque tels que superposition de dégradé, trait, contour brillant et ombre portée pour lui donner de la profondeur et de la forme..
Pour créer une version plus grande, sélectionnez Taille de l'image dans le menu Image, puis doublez le nombre de ppp pour atteindre 326, iPhone 4 ppp. Cela doublera la taille de notre image à 640 × 960. Assurez-vous que l'option Styles d'échelle est cochée et cliquez sur OK. Assurez-vous que tout est mis à l'échelle correctement. Vous pouvez ajouter de petits détails ou des textures subtiles qui feront vraiment briller votre application sur l'écran Retina. Vous avez maintenant une version plus grande de votre interface utilisateur, prête à trancher et à sauvegarder.
Maintenant que nous avons notre interface en résolution Retina, nous devons l’appliquer à notre application. Il y a deux façons de le faire, chacune avec des avantages et des inconvénients.
La méthode officielle pour ajouter un support haute résolution à votre application consiste à disposer de deux versions de chaque image, une en résolution «normale» et une en double résolution. Chaque fois que votre application est affichée sur l'écran Retina, l'image la plus grande est automatiquement chargée. Cette méthode permet un contrôle complet et précis de l'apparence de votre application dans chaque cas, et est très facile à appliquer à vos applications existantes..
Le fichier image en taille réelle doit être nommé comme vous le souhaitez, par exemple «Button.png». Utilisez ce nom d'image dans votre code et dans Interface Builder partout où vous souhaitez référencer l'image. L’image double-taille doit être deux fois plus grande que l’image plus petite correspondante et doit porter exactement le même nom, suivi de «@ 2x». Dans notre exemple, nous l'appellerions «[email protected]».
Malheureusement, cette technique ne fonctionnera pas sur l'iPad. une application doublée en pixels ne chargera pas la ressource de résolution supérieure. Cela sera probablement abordé dans la future mise à jour iOS 4 qui devrait arriver sur iPad cet automne..
Une autre méthode pour ajouter un support haute résolution consiste à utiliser la mise à l'échelle. Vous ne chargez que la ressource image volumineuse, puis vous la redimensionnez à 50% dans votre code ou à l'aide d'Interface Builder..
Pour ce faire, à l'aide d'Interface Builder, créez un nouveau bouton Round Rect (UIButton) et ouvrez l'inspecteur d'attributs (Commande-1.) Définissez le type de bouton sur «Personnalisé», puis sélectionnez la grande image comme arrière-plan. Écrivez ce que vous voulez dans l'attribut Title et modifiez le style du bouton si vous le souhaitez. Pour que la taille de notre bouton soit correcte, allez dans l’onglet Taille et modifiez la largeur et la hauteur du bouton à la moitié de celle de l’image. L'image du bouton, par exemple, est 300x102, le bouton sera donc 150x51. Étant donné que nous réduisons à exactement 50%, même le simple algorithme de mise à l'échelle utilisé par Cocoa Touch semble plutôt bien, étant donné que notre image est composée de deux traits de pixels et de tailles de pixels pairs, faciles à diviser par 2..
Le résultat est aussi bon que l’image de taille spécifique une fois mise à l’échelle, mais cela peut varier en fonction de l’image utilisée. La même technique peut être facilement adaptée aux images et aux vues personnalisées pour le même effet. En utilisant cette méthode, vous aurez moins de contrôle sur l'apparence de votre application sur un écran plus petit, mais cela présente quelques avantages. L'ensemble d'applications contiendra une image de chaque image au lieu d'une copie de plus en plus grande. Si votre application contient beaucoup d'images, la taille du fichier peut en être affectée. De plus, c’est actuellement le seul moyen d’avoir des graphismes haute résolution sur l’iPad lors du doublement des pixels. Les éléments de texte et d'interface utilisateur Apple seront toujours pixellisés, mais des images à résolution supérieure amélioreront l'expérience utilisateur jusqu'à ce qu'Apple ajoute la prise en charge officielle de la double résolution sur l'iPad..
Accentsconagua