Exporter les tailles d'icônes iOS dans Affinity Designer

Bien qu'Affinity Designer propose les exportations @ 1x, @ 2x et @ 3x extrêmement utiles, je me demande s'il existe un moyen d'exporter dans la variété de tailles requises pour une icône iOS?

J'ai trouvé une grille concise des tailles nécessaires ici , que je vais reproduire sous forme de liste:

• 1024x1024
• 180x180
• 152x152
• 120x120
• 87x87
• 80x80
• 76x76
• 58x58
• 57x57
• 40x40
• 29x29

C'est 11 tailles d'icônes différentes!

J'ai trouvé que le concept d'exportation de Persona avec la configuration de tranche était excellent, d'autant plus que vous pouvez appliquer des tranches à des calques individuels (par exemple, pour les versions normales et pressées d'un bouton). Existe-t-il un moyen d'utiliser ce même outil, peut-être, pour effectuer des exportations de tailles spécifiques?

Étant donné que les exigences changent de temps en temps, il est toujours judicieux de se référer aux directives d'Apple. Il y a un modèle Affinity Designer sur mon site Web que j'ai développé qui exporte les 18 tailles actuellement requises pour les applications universelles.

Cela ressemble à une liste énorme et complexe, mais il n'y a vraiment que 5 tailles que vous devez construire:

• 29pt
• 49pt
• 60pt
• 76pt
• 1024px

Les quatre premières tailles (répertoriées dans les points) nécessitent des versions 1 ×, 2 × et 3 × (si vous êtes à l'épreuve du temps, ainsi que pour couvrir l'iPhone 6 Plus).

Certaines des tailles que vous verrez répertoriées sur le net et sur le site d'Apple sont pour iOS 6 et inférieur (57 × 57, etc.). Ils ne sont pas nécessaires si vous ciblez iOS 7 et supérieur.

Voici le modèle Photoshop que j'ai créé:

J'ai des tranches configurées pour exporter chaque icône et une action pour redimensionner et réexporter, donc je me retrouve avec:

• icon-29.png
• icon-29@2x.png
• icon-29@3x.png
• icon-40.png
• icon-40@2x.png
• icon-40@3x.png
• icon-60.png
• icon-60@2x.png
• icon-60@3x.png
• icon-76.png
• icon-76@2x.png
• icon-76@3x.png

Toutes ces tailles ne sont pas encore nécessaires, mais le seront probablement à l'avenir. Commencer avec 4 tailles de base facilite la construction des icônes.

J'utilise Slices dans Photoshop pour exporter les différentes régions nécessaires pour chaque icône. Veuillez noter que les icônes que vous fournissez ne doivent pas avoir de zones transparentes - la couleur doit s'étendre jusqu'aux coins. iOS masquera l'icône, vous n'aurez donc pas à vous en soucier.

Vous pourriez faire de même, en utilisant la fonction de tranche d'Affinity?

Mise à jour: j'ai créé des modèles d'icônes d'application open source pour Affinity Designer, Sketch, Photoshop et Illustrator . Ils pourraient valoir la peine d'être considérés.

Vous pouvez le faire dans Affinity Designer, les tranches peuvent mettre à l'échelle leur sortie, en utilisant des suffixes, voici l'exportation des icônes iOS en utilisant le suffixe «w»:

Je viens de trouver un bon moyen de le faire dans Affinity Designer. Ce n'est cependant pas entièrement automatisé. Je vais vous expliquer comment obtenir les trois tailles d'icônes actuellement nécessaires pour iPhone (29pt, 40pt, 60pt), chacune avec une résolution 2x et 3x:

1. Créez un nouveau document, définissez l'unité sur "Points", la taille de la page sur 29x29 et cochez "Créer un plan de travail" dans la boîte de dialogue
2. Collez et positionnez votre illustration dans le plan de travail
3. Renommez le plan de travail en "29 pt" dans le panneau Calques (facultatif)
4. Faites un clic droit sur le plan de travail et sélectionnez "Dupliquer"
5. Faites glisser le nouveau plan de travail (afin que vous puissiez voir les deux côte à côte), puis renommez-le en "40 pt" (encore une fois, cette étape est facultative)
6. Redimensionnez le nouveau calque à 40x40pt à l'aide du panneau Transformer - votre illustration sera automatiquement agrandie
7. Répétez les étapes 4 à 6 pour créer également un plan de travail de 60 points (plus 76 points et 83,5 points pour iPad, si nécessaire)
8. Accédez à Export Persona, basculez vers le panneau Slices et sélectionnez les résolutions 2x et 3x (plus 1x pour iPad)
9. Sélectionnez tous les calques de plan de travail dans la liste ("29 pt", "40 pt", etc.) et cliquez sur "Exporter la sélection" en bas du panneau.

L'affinité créera toutes les tailles d'icônes dans chaque résolution sélectionnée, de sorte que vous pourriez obtenir plus d'icônes que vous n'en avez réellement besoin. Mais ils sont soigneusement nommés "29pt@2x.png", etc., il est donc très facile de les affecter dans votre catalogue d'actifs Xcode.

Une mise en garde: lorsque vous accédez à Export Persona, Affinity crée automatiquement une tranche d'exportation pour chaque plan de travail (c'est le cadre bleu avec l'étiquette de taille dessus). J'ai trouvé que parfois la taille de ces tranches est décalée de quelques pixels. On dirait un bug dans AD. Vous pouvez facilement le réparer en faisant glisser les coins des tranches.

Marc Edwards a eu une excellente réponse en termes de tailles d'icônes à créer, d'utilisation de tranches pour le faire et de bons liens vers des ressources Photoshop pour ce faire. Cependant, je suis toujours à la recherche d'une solution pour exporter en plusieurs tailles dans Affinity Designer en particulier.

J'ai réalisé, finalement, que cela serait possible en utilisant l'outil Place Image. Créez votre icône dans un fichier, puis dans un autre fichier "modèle", vous pouvez utiliser l'outil Placer une image pour créer plusieurs calques qui récupèrent votre fichier d'icône. Chacun de ces calques peut être transformé en une tranche nommée.

L'inconvénient ici est que chaque couche doit être créée et pointée vers votre fichier d'icône, ce qui semble être fastidieux. Une fois qu'il était en place, cependant, après toute modification de votre fichier de base, vous pouviez facilement tout réexporter.