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
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.
Dupliquez et réduisez le document pour créer des tailles plus petites.
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
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.
Dupliquez et redimensionnez le document vers le haut pour créer les plus grandes tailles, et vers le bas pour les petites tailles.
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
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.
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.
Dupliquez et réduisez le document pour toutes les tailles plus petites.
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.