Il est de plus en plus courant que les professionnels du graphisme voient non seulement leur travail apparaître sur papier, mais également sur le Web et sur des appareils tels que les iPhone, les iPad, les appareils Android et les tablettes Android. En surface, cela pourrait être considéré comme une "bonne chose", car les médias sur lesquels notre travail apparaît se développent sur les écrans numériques. L'inconvénient est le grand nombre d'écrans et le nombre déroutant de résolutions d'écran. Il n'est pas rare d'entendre des professionnels chevronnés se demander ce qu'il est advenu des jours où une image TIFF d'une résolution de 300 dpi au format CMJN était la norme. Oh pour le bon vieux temps!
Ces jours sont finis. Nous devons maintenant faire face au fait qu'une image 200 x 200 peut sembler correcte sur un périphérique et pourtant apparaître comme un quart de taille sur un autre et une taille de trois-quart sur un autre. Tout cela découle vraiment de la «course aux armes de résolution» menée par les fabricants d’appareils, qui essaient de créer plus de pixels dans un écran que leurs concurrents.
Cela nous amène à ce que nous appellerons "La montée des suffixes". Les suffixes sont ces éléments - @ 2x, @ 3x - ajoutés au nom d'une image. Ils ont essentiellement, par exemple, placé la bonne image au bon endroit sur le bon périphérique. Ensuite, ça va encore mieux.
Une grande partie de notre travail implique de travailler avec des icônes et, avec l'essor du mouvement du design plat, ces éléments sont créés dans des applications de dessin vectoriel telles qu'Illustrator et Sketch. Le problème est que les périphériques ne peuvent tout simplement pas restituer les fichiers .ai ou .eps. Ils doivent être convertis en Scalable Vector Graphics et, en fonction de l'application utilisée pour créer les icônes, il peut ne pas y avoir d'option SVG.
Ensuite, ça va encore mieux.
Il existe une nouvelle catégorie de logiciels - les applications de prototypage - qui deviennent le point d’assemblage avant que vos images et vos icônes ne soient transférées vers des périphériques et qu’ils présentent également des particularités.
Ce tutoriel passe de Photoshop à Sketch pour les graphiques et à l'aide d'Adobe Experience Design pour illustrer quelques points difficiles entre votre idée et son déploiement éventuel. Commençons.
01 de 05Comment préparer des images pour les appareils mobiles dans Adobe Photoshop
La première étape de ce processus consiste à connaître votre ou vos périphériques cibles. Dans ce cas, vous allez cibler l'iPhone 6, doté d'une zone d'écran de 375 pixels de large sur 667 pixels de haut. La conception demande que l'image soit la largeur de l'écran.
L'image à utiliser a été tournée à l'intérieur de la cathédrale de Berne, à Berne, en Suisse. Une fois l'image ouverte dans Photoshop, sélectionnez Image> Taille de l'image vérifier les dimensions de l'image et sa résolution. De toute évidence, une image au format 3156 x 2592 avec une résolution de 300 ppp et une taille de fichier de 23,4 Mo ne fonctionnera tout simplement pas.
Dans la boîte de dialogue Taille de l'image, réduire la résolution à 100 ppp. Faites-le d'abord parce que les dimensions de l'image vont également changer. Avec la résolution définie, modifiez la largeur à 375 pixels. Si vous vérifiez les données relatives à la taille de l'image, vous remarquerez que celle-ci est passée de 23,4 Mo à 338k. Cliquez sur OK accepter les modifications et fermer la boîte de dialogue Taille de l'image.
Continuer la lecture ci-dessous
02 de 05Comment utiliser la boîte de dialogue "Exporter en tant que …" dans Adobe Photoshop
Une fois l'image prête à être exportée, sélectionnez "Exporter> Exporter sous…" pour ouvrir la boîte de dialogue Exporter sous.
Cette boîte de dialogue est un ajout récent à Photoshop et remplace la boîte de dialogue "Enregistrer pour le Web" utilisée depuis des années. Si vous en avez toujours besoin, vous pouvez le trouver dans la liste déroulante Exporter. Pour des raisons évidentes, il s’appelle désormais "Export For Web (Legacy)". S'il s'agit de votre première visite dans cette boîte de dialogue, voici une brève visite:
- Taille: Cette colonne définit la taille de sortie de l'image. L’aspect intéressant de cette zone est qu’elle agrandira l’image, mais elle n’apparaîtra pas «floue» sur le périphérique en raison du nombre important de pixels sur l’écran de celui-ci.
- 1 FOIS: Cliquez sur maintenir ceci et un nombre de tailles vous sera présenté. Les catégories 1x, 2x et 3x sont traditionnellement associées aux appareils Hi Dpi d’Apple et, avec quelques autres, préparent des images pour les appareils Android.
- Suffixe: Ce choix indiquera votre taille mais il sera affiché comme @ 2x ou la taille est choisie. Ce suffixe sera ajouté au nom de l'image.
- Le signe +: Cliquez dessus pour ajouter différentes tailles pour la sortie. Dans ce cas, cliquez deux fois dessus et choisissez 2x et 3x dans le menu déroulant. Cela couvrira pratiquement n'importe quel appareil iOS.
- La poubelle: Cliquez dessus et le choix est supprimé de la gamme.
- Paramètres de fichier: Choisissez le format - jpg, png, gif ou svg - le mieux adapté à l'image. Si la taille du fichier pose problème, vous pouvez également réduire les paramètres de qualité.
- Taille de l'image: vous pouvez modifier les dimensions physiques de l'image.
- Taille de la toile: Vous pouvez modifier les dimensions physiques du canevas d'image.
- Métadonnées: Vous pouvez ajouter des droits d'auteur et vos informations de contact aux métadonnées de l'image.
Lorsque vous avez terminé, cliquez sur le bouton Tout exporter. On vous demandera où vous voulez placer les images. Une bonne habitude à développer consiste à cliquer sur le bouton Nouveau dossier et à créer un dossier contenant les images exportées. Lorsque vous cliquez sur Exporter, les images du dossier s’afficheront.
Continuer la lecture ci-dessous
03 de 05Comment préparer des images pour appareils mobiles dans Sketch 3 à partir du codage bohémien
Sketch 3, une application exclusivement pour Macintosh de Bohemian Coding, gagne rapidement en importance parmi les concepteurs d’UX et d’UI en raison de sa concentration sur le Web et la conception d’applications.En fait, Photoshop, à bien des égards, est dans la position étrange de devoir «rattraper» Sketch.
Pour préparer une image pour mobile dans Sketch, sélectionnez l’image sur la planche d’art et cliquez sur le bouton Rendre exportable au bas du panneau Propriétés.. Cela ouvrira la boîte de dialogue Exporter. Cliquez sur le signe + pour ajouter les versions 2x et 3x, ainsi que pour les suffixes. Les formats disponibles sont les suivants: PNG, JPG, TIF, PDF, EPS et SVG. Dans ce cas, choisissez JPG. Cliquez sur le bouton Exporter et ciblez ou créez un dossier pour contenir les différentes images exportées.
04 de 05Pourquoi devez-vous créer trois versions (ou plus) de l'image?
À bien des égards, le marché de la téléphonie mobile est le «Far West» des résolutions et une taille unique ne convient certainement pas à tous. Dans l'exemple ci-dessus d'Adobe Experience Design, l'image est placée sur 2 planches d'art iPhone 6 et sur une planche d'art de périphérique Android. Notez que la version 1x à gauche semble être de taille réduite. C’est exactement ainsi que l’image apparaîtrait sur un iPhone 6 avec son écran Retina. La version 2x s’adapte parfaitement et la version Android s’écoule de l’écran. Vous avez le choix entre redimensionner l’image ou exporter l’image hors de Photoshop sous une taille différente.
Continuer la lecture ci-dessous
05 de 05Testez tôt, testez souvent, ne faites confiance à rien, faites confiance à personne et surtout à vous-même
Ce que vous devez comprendre, c'est que ce n'est que le début du processus. Voir votre travail sur autant de périphériques que vous le pouvez doit être considéré comme un élément essentiel du flux de travail. Vous devez également savoir qu'il ne s'agit que de la première étape du processus de création d'actifs graphiques pour une application ou des projets Web mobiles.
L'utilisation d'applications de prototypage est un excellent moyen de découvrir les problèmes, mais ces mêmes actifs devront être fournis au développeur. Dans de nombreux cas, les dimensions physiques des ressources, y compris les icônes, seront physiquement énormes et non au format svg mais png. À première vue, cela peut sembler un peu exagéré, mais souvenez-vous de la règle d'or de la réduction des images: il est préférable de réduire ou de réduire.
L'essentiel est de travailler en étroite collaboration avec votre développeur et d'utiliser un logiciel de prototypage comme moyen de montrer votre intention de conception. Toutefois, ces mêmes actifs devront éventuellement être prêts pour le produit final et votre développeur saura mieux répondre à ses besoins que vous.
