Ao projetar ícones que precisam ser entregues em vários tamanhos, você começa com um tamanho menor e depois aumenta para tamanhos maiores? Ou você começa grande e diminui?
Há várias vantagens para ambos. Estou tentando refinar meu fluxo de trabalho, para que a entrada de outras pessoas seja útil. Vamos supor que estamos criando um ícone para Mac ou Windows, onde os tamanhos se relacionam - na maioria são múltiplos exatos.
Para o OS X, os tamanhos padrão dos ícones de aplicativos são:
- 16 × 16, 32 × 32, 128 × 128, 256 × 256, 512 × 512 e 1024 × 1024.
Para o Windows 7, os tamanhos padrão dos ícones de aplicativos são:
- 16x16, 32x32, 48x48, 64x64 e 256x256.
Para iOS, os tamanhos padrão de ícone de aplicativo são:
- 29x29, 48x48, 57x57, 58x58, 72x72, 96x96, 114x114, 144x144, 512x512 e 1024x1024.
Para Android, os tamanhos padrão dos ícones de aplicativos são:
- 36x36, 48x48, 72x72, 96x96 e 512x512.
Para iOS e Android, os tamanhos dos ícones são um pouco mais aleatórios e as escalas também não se relacionam; portanto, ser inteligente sobre a grade de design importa menos, porque é menos provável que você encontre coordenadas que atingem os limites de pixels para vários tamanhos.
Método 1: redução de escala
Crie o ícone no tamanho maior (geralmente 1024 × 1024) usando vetores e efeitos gerados, como estilos de camada.
Duplique e reduza a escala do documento para criar os tamanhos menores.
Faça os ajustes necessários e salve a imagem final.
Isso é ótimo, mas perde oportunidades para os elementos se alinharem a uma grade que funciona para vários tamanhos. Usar uma grade grossa para encaixar parece ajudar um pouco. Por exemplo, um documento 1024 × 1024 com uma grade de 16 pixels significa que os pontos de encaixe fornecerão bordas encaixadas em pixels até o tamanho de 64 × 64. A idéia é projetar com detalhes, mas encaixar nas grades de tamanho menor, para que você atinja essas posições importantes.
Método 2: ampliando
Crie o ícone no menor ou em um dos menores tamanhos (geralmente 32 × 32 ou 64 × 64) usando vetores e efeitos gerados, como estilos de camada. Normalmente, não há detalhes suficientes em 16 × 16 para usá-lo como ponto de partida.
Duplique e redimensione o documento para criar tamanhos maiores e reduzidos para tamanhos pequenos.
Faça os ajustes necessários e salve a imagem final.
Isso tende a levar a ícones simples e sem muitos detalhes, por isso não gosto de trabalhar assim.
Método 3: escalando para cima e para baixo
Crie um design aproximado em um tamanho menor (geralmente 32 × 32 ou 64 × 64) usando vetores e efeitos gerados, como estilos de camada.
Escale o documento até o tamanho maior e adicione detalhes. Este é o ponto em que o ícone é polido e a maioria dos detalhes é adicionada.
Duplique e reduza a escala do documento para todos os tamanhos menores.
Faça os ajustes necessários e salve a imagem final.
Este parece ser o melhor método, com os prós e os contras dos outros métodos. Como um ponto relacionado, isso também significa que normalmente eu desenho ícones do iOS em 912 × 912, porque isso é exatamente 16 vezes o tamanho do ícone não-Retina do iPhone, de 57 × 57.
Existe um método melhor para projetar ícones que precisam ser entregues em vários tamanhos?
O objetivo é alcançar o melhor resultado possível, com o mínimo de esforço.