Lorsque vous devrez préparer des fichiers d’image pour soumettre une app sur le Google Play Store, sur l’App Store, dans DPS App Builder, ou pour un tout autre usage, la technique qui va suivre va vous faire gagner un temps considérable car elle va vous permettre de ne pas avoir à enregistrer autant de documents différents que de formats de mandés.
[Télécharger un fichier d’exemple]
Commencez par créer un document, puis enregistrez le au format Photoshop ou Tiff dans un nouveau dossier.
- Dans le menu Fichier, via la commande Générer, activez la commande Fichiers d’image.
- Dans la palette Calques, renommez vos ou votre calque (ou groupe) suivant les conventions de nommage présentées ci-dessous.
- Ouvrez le dossier intitulé nomdevotrefichier-assets qui se trouve dans le même dossier que votre document Photoshop ou Tiff, vous découvrez de « nouveaux fichiers » !
Conventions de nommage des calques
Partons de l’exemple ci-dessous, qui correspond au nom d’un calque, pour comprendre le fonctionnement de ce système de génération de fichiers automatique.
20×20 icone1.jpg7, icone2.jpg70%, 50% icone3.png32
Un calque ou un groupe qui va générer automatiquement un ou plusieurs fichiers doit être nommé à l’aide d’une chaine de caractère (le nom du fichier) à laquelle vous ajoutez un préfixe et un suffixe : Taille de l’image : Pour spécifier une dimension différente de sa taille d’origine, ajoutez un préfixe au nom du calque qui correspond à la taille souhaitée exprimée en pixels séparés par la lettre « x » (ex. : 20×20 icone1.jpg permet d’obtenir une image de 20 pixels de largeur et 20 pixels de hauteur). Comme vous pouvez l’observer, n’oubliez pas l’espace entre les dimensions de l’image et le nom du fichier. Précisons que si vous ne spécifiez pas de dimensions, l’image obtenue aura la taille de l’élément contenu sur le calque. Remarque : Pour spécifier une unité différente du pixel (mm, cm et in (pour inch)), ajoutez la après la valeur (ex. : 5cmx10cm affiche.jpg ou aussi, 50%affiche.jpg). Format de fichier : Ajoutez un suffixe au nom du fichier pour spécifier le format d’image : .jpg, .png ou .gif. Pour indiquer une compression ou un encodage, accolez la valeur à l’extension. ex. : .jpg7 ou .jpg70% pour obtenir une image jpeg à 70% de compression, mais vous pouvez aussi utilisez les valeurs 8, 24 ou 32 avec l’extension png (ex. : affiche.png32).
Allons un peu plus loin…
Créer des sous-dossiers et des tailles différentes Pour pouvoir créer un sous-dossier avec les différents fichiers à l’intérieur, créez un dossier que vous nommez default suivi du nom du dossier avec un slash (n’oubliez pas ce dernier, vous ne feriez qu’ajouter des suffixes aux noms de vos fichiers). 
Pour créer un deuxième dossier avec des images aux proportions différentes, il vous suffit de laisser une espace derrière le slash, d’ajouter le signe plus et de spécifier un taux de réduction ou d’agrandissement (uniquement avec un calque dynamique de grande taille) suivi du nom du nouveau dossier. Ci-dessous, un exemple de nom de calque ou de groupe.
default hd/ + 50% sd/
Note : en ajoutant une chaine de caractères derrière le slash, vous spécifiez un suffixe pour tous les fichiers générés. Exemple : default HD/@2x, permet d’ajouter le fameux suffixe @2x nécessaire pour les fichiers attendus en développement iOS pour les écrans Retina. Travailler avec une image dynamique Pour gagner un peu plus de temps, dans le cas d’une correction d’image ou la génération d’une nouvelle série d’images, il est conseillé de travailler avec des calques dynamiques. Ainsi, en préparant un fichier au format Photoshop ou Tiff qui contiendrait un ou plusieurs calques dynamiques, vous allez pouvoir automatiser la création de ces fichiers images !
- Importez une image dans votre document Photoshop ou Tiff.
- Redimensionnez le calque dynamique obtenu aux dimensions du fichier que vous souhaiterez obtenir.
- Nommez votre calque.
À présent, en double-cliquant sur le calque dynamique ou en ouvrant le fichier correspondant au calque dynamique, modifiez l’image puis sauvegardez la et vous découvrirez de nouveaux fichiers dans le dossier des assets.
Icônes attendues par…
Vous découvrirez ci-dessous, les différents formats (tailles) d’images attendus pour la génération de fichiers .ipa (app pour iOS) ou .apk (app pour Android). Apple : Pour un iPad (SD et HD) en png, 29×29, 40×40, 50×50, 58×58, 72×72, 76×76, 80×80, 100×100, 144×144, 152×152 pixels, et pour un iPhone (SD et HD), 29×29, 57×57, 58×58, 80×80, 114×114, 120×120, pixels. Ajoutez à ces fichiers, une image en PNG de 1024x1024pixels. Google : 36×36, 48×48, 72×72, 180×120, 512×512, 1024×500. Adobe (DPS App Builder) : Pour un iPad en png, 29×29, 50×50, 72×72 et 76×76 pixels pour la SD, mais aussi 58×58, 100×100, 144×144 et 152×152 pixels pour la HD. Pour un iPhone, 29×29, 57×57, 58×58, 114×114 et 120×120 pixels. Ajoutez à ces fichiers, des images en PNG de 512×512, 1024×1024, 768×1024, 1536×2048, 1024×768, 2048×1536 pixels. Flash (Air for iOS) : Pour iPad en PNG, 40×40, 48×48, 50×50, 72×72, 76×76, 100×100, 144×1444 et pour iPhone en PNG, 29×29, 57×57, 58×58, 80×80, 114×114, 120×120 et 152×152 pixels. Ajoutez à ces fichiers, des images en PNG de 512×512 et 1024x1024pixels. Flash (Air for Android) : 36×36, 48×48, 72×72 et 96×96 pixels.