Meilleur flux de travail pour la conception d'icônes: commencez grand ou commencez petit?

Lorsque vous concevez des icônes qui doivent être livrées en plusieurs tailles, commencez-vous par la plus petite taille, puis évoluez vers les plus grandes tailles? Ou commencez-vous grand et réduisez?

Il y a plusieurs avantages aux deux. J'essaie d'affiner mon flux de travail, donc la contribution des autres serait utile. Supposons que nous concevons une icône Mac ou Windows, où les tailles sont liées - ce sont principalement des multiples exacts.

Pour OS X, les tailles d'icônes d'application standard sont les suivantes:

• 16 × 16, 32 × 32, 128 × 128, 256 × 256, 512 × 512 et 1024 × 1024.

Pour Windows 7, les tailles d'icônes d'application standard sont les suivantes:

• 16x16, 32x32, 48x48, 64x64 et 256x256.

Pour iOS, les tailles d'icônes d'application standard sont:

• 29x29, 48x48, 57x57, 58x58, 72x72, 96x96, 114x114, 144x144, 512x512 et 1024x1024.

Pour Android, les tailles d'icônes d'application standard sont:

• 36x36, 48x48, 72x72, 96x96 et 512x512.

Pour iOS et Android, les tailles d'icônes sont un peu plus aléatoires et les échelles ne sont pas aussi pertinentes, donc être intelligent sur la grille de conception importe moins, car vous êtes moins susceptible de trouver des coordonnées qui atteignent les limites des pixels pour plusieurs tailles.

Méthode 1: réduction d'échelle

1. Concevez l'icône à la plus grande taille (souvent 1024 × 1024) en utilisant des vecteurs et des effets générés, comme des styles de calque.

2. Dupliquez et réduisez le document pour créer des tailles plus petites.

3. Faites les ajustements nécessaires et enregistrez l'image finale.

C'est génial, mais il manque des opportunités pour que les éléments s'alignent sur une grille qui fonctionne pour plusieurs tailles. L'utilisation d'une grille grossière pour se fixer semble aider un peu. Par exemple, un document 1024 × 1024 avec une grille de 16 pixels signifie que les points de capture vous donneront des bords découpés en pixels jusqu'à la taille 64 × 64. L'idée est de concevoir avec des détails mais d'accrochage aux grilles de plus petite taille, de sorte que vous atteignez ces positions importantes.

Méthode 2: mise à l'échelle

1. Concevez l'icône au plus petit ou à l'une des plus petites tailles (souvent 32 × 32 ou 64 × 64) à l'aide de vecteurs et d'effets générés, comme des styles de calque. Il n'y a généralement pas assez de détails en 16 × 16 pour l'utiliser comme point de départ.

2. Dupliquez et redimensionnez le document vers le haut pour créer les plus grandes tailles, et vers le bas pour les petites tailles.

3. Faites les ajustements nécessaires et enregistrez l'image finale.

Cela a tendance à conduire à des icônes simples avec peu de détails, donc je n'aime pas travailler comme ça.

Méthode 3: mise à l'échelle vers le haut puis vers le bas

1. Créez une conception grossière à une taille plus petite (souvent 32 × 32 ou 64 × 64) à l'aide de vecteurs et d'effets générés, comme des styles de calque.

2. Mettez le document à l'échelle jusqu'à la plus grande taille et ajoutez des détails. C'est le point où l'icône est polie et la plupart des détails sont ajoutés.

3. Dupliquez et réduisez le document pour toutes les tailles plus petites.

4. Faites les ajustements nécessaires et enregistrez l'image finale.

Cela semble être la meilleure méthode, avec les avantages et les inconvénients des autres méthodes. Comme point légèrement lié, cela signifie également que je conçois généralement des icônes iOS à 912 × 912, car cela représente exactement 16 fois la taille de l'icône non-Retina de l'iPhone de 57 × 57.

Existe-t-il une meilleure méthode pour concevoir des icônes qui doivent être livrées en plusieurs tailles?

L'objectif est d'obtenir le meilleur résultat possible, avec le moins d'effort.

Une légère correction à vos hypothèses: bien que Windows et Mac utilisent des multiples de 16, ils ne sont pas mis à l'échelle au même rythme. Les tailles standard Vista / 7 sont 16 ² , 32 ² , 48 ² , 256 ² . OS X est 16 ² , 32 ² , 128 ² , 512 ² (+ versions HiDPI). Pour compliquer encore les choses, les niveaux de zoom par défaut de Windows Vista / 7 semblent être 16 ² , 48 ² , 96 ² , 256 ² et évolueront volontiers par incréments aussi petits que 2 pixels. Cela ne devrait pas faire une énorme différence dans votre flux de travail, sauf qu'il évite d'avoir à se préoccuper de grilles de pixels spécifiques à tous les niveaux de zoom.

Mon flux de travail est différent du vôtre en ce que je ne fais pas beaucoup de redimensionnement. Une nouvelle image est créée pour chaque niveau de taille et je n'essaie pas de recycler exactement la même disposition.

La taille par laquelle je commence est déterminée par la plateforme. Si je conçois pour Windows, je commence à 48x48. (Je n'ai aucune base scientifique pour cela, mais le niveau de zoom par défaut de Windows 7 est "Moyen" qui est 48x48. Vista, OS X, iPhone, iPad et Android Icônes tombent également assez près de cette taille, donc c'est pratique et confortable.)

L'icône entièrement finie se fait à cette taille et est la référence pour les autres icônes de la famille. Si je fais une application de bureau, je créerai d'autres versions en 16x, 96x et 256x pour correspondre aux niveaux par défaut de Windows (sauf si c'est pour Mac, bien sûr). Le 96x est généralement très similaire au 48x.

La version 256x sera une création entièrement nouvelle. Beaucoup plus de détails (même si ce sont de petites choses comme la texturation des éléments d'arrière-plan). Tous les détails que je ne pouvais pas intégrer dans les versions plus petites sont ajoutés. Si quelqu'un a son écran composé d'icônes géantes, il devrait être satisfait de ce qu'il voit.

La version 16x est également une nouvelle création. Très peu de détails. Logo identifiant ou iconographie très simple avec la même palette de couleurs que les versions plus grandes. À cette taille, je n'essaie pas de faire quelque chose de beau - juste reconnaissable instantanément.

Donc, pour moi au moins, il ne s'agit pas d'augmenter ou de réduire dans l'espoir d'avoir une image identique ou d'utiliser la même disposition de base à toutes les tailles. Je pense à cela comme conduire dans une ville - au loin, ce n'est qu'un horizon minuscule, mais identifiable. Vous vous rapprochez et commencez à choisir des bâtiments. Ensuite , vous êtes dans et sentir tous les détails et la dimension. De chaque distance, il semble différent, mais il y a une transition en douceur de la taille à la taille afin que toute la famille ne se sente jamais décousue.

Certainement commencer à grande échelle et réduire. Chaque fois que j'ai eu des concepteurs d'icônes pour mon logiciel, je préfère voir à quoi ressemblera l'icône à une plus grande taille et ensuite je pourrai décider quelles fonctionnalités supprimer ou mettre en valeur dans des tailles plus petites. Vous devez savoir ce qu'il y a dans l'icône avant de supprimer des éléments dans le petit. glyfx icons a de bons exemples d'interprétation des grandes et petites icônes de même conception.

Eh bien, je préfère tout faire pour la plus petite densité et le faire évoluer. Si vous concevez la disposition entière pour une application, le travail avec la grille est beaucoup plus facile et vous évite beaucoup de maux de tête, car vous déplacez les objets dans une grille plus petite.

Donc, mon flux de travail ressemble à ceci: 1. Je fais une mise en page dans une plus petite échelle dpi dans Photoshop et je continue à créer les icônes dans Illustrator, car les images vectorielles n'ont aucun problème avec la mise à l'échelle. 2. Quand je crée chaque icône / objet, etc. Je crée toutes les versions agrandies en même temps (quand je décide que cela semble bien dans la mise en page bien sûr) et remets les pngs finaux au programmeur.

Je dois noter que j'ai d'abord commencé avec iOS.