Melhor fluxo de trabalho para o design de ícones: comece grande ou pequeno?

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

1. Crie o ícone no tamanho maior (geralmente 1024 × 1024) usando vetores e efeitos gerados, como estilos de camada.

2. Duplique e reduza a escala do documento para criar os tamanhos menores.

3. 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

1. 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.

2. Duplique e redimensione o documento para criar tamanhos maiores e reduzidos para tamanhos pequenos.

3. 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

1. Crie um design aproximado em um tamanho menor (geralmente 32 × 32 ou 64 × 64) usando vetores e efeitos gerados, como estilos de camada.

2. Escale o documento até o tamanho maior e adicione detalhes. Este é o ponto em que o ícone é polido e a maioria dos detalhes é adicionada.

3. Duplique e reduza a escala do documento para todos os tamanhos menores.

4. 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.

Uma leve correção nas suas suposições: enquanto Windows e Mac usam múltiplos de 16, eles não são dimensionados na mesma taxa. Os tamanhos padrão do Vista / 7 são 16 ² , 32 ² , 48 ² , 256 ² . OS X é 16 ² , 32 ² , 128 ² , 512 ² (+ versões HiDPI). Para complicar ainda mais, os níveis de zoom padrão do Windows Vista / 7 parecem ser 16 ² , 48 ² , 96 ² , 256 ² e serão redimensionados em incrementos tão pequenos quanto 2 px. Isso não deve fazer muita diferença para o seu fluxo de trabalho, exceto que evita a necessidade de se preocupar com grades de pixels específicas em todos os níveis de zoom.

Meu fluxo de trabalho é diferente do seu, pois não redimensiono muito. Uma nova imagem é criada para cada nível de tamanho e eu não tento reciclar exatamente o mesmo layout.

O tamanho que eu começo é determinado pela plataforma. Se estiver projetando para Windows, inicio em 48x48. (Não tenho base científica para isso, mas o nível de zoom padrão do Windows 7 é "Médio", que é 48x48. Os ícones Vista, OS X, iPhone, iPad e Android também ficam perto o suficiente desse tamanho, por isso é conveniente e confortável.)

O ícone totalmente concluído é executado nesse tamanho e é a referência para outros ícones da família. Ao fazer um aplicativo de desktop, criarei outras versões em 16x, 96x e 256x para corresponder aos níveis padrão do Windows (a menos que seja para Mac, naturalmente). O 96x é geralmente muito semelhante ao 48x.

A versão 256x será uma criação totalmente nova. Muito mais detalhes (mesmo que sejam pequenas coisas como texturizar elementos de fundo). Todos os detalhes que eu não poderia caber nas versões menores são adicionados. Se alguém tiver sua tela discada para ícones gigantes, deve ficar satisfeito com o que vê.

A versão 16x também é uma nova criação. Muito pouco detalhe. Identificando o logotipo ou iconografia muito simples com a mesma paleta de cores das versões maiores. Nesse tamanho, não tento fazer nada bonito - apenas reconhecível instantaneamente.

Então, pelo menos para mim, não é uma questão de aumentar ou diminuir a expectativa de ter uma imagem idêntica ou usar o mesmo layout básico em todos os tamanhos. Penso nisso como dirigir para uma cidade - ao longe, é apenas um pequeno horizonte, ainda que identificável. Você se aproxima e começa a escolher prédios. Então você está no -lo e sentir todos os detalhes e dimensão. De cada distância, parece diferente, mas há uma transição suave de tamanho para tamanho, para que toda a família nunca se sinta desconectada.

Definitivamente comece grande e reduza. Sempre que designers criaram ícones para o meu software, prefiro ver como o ícone será exibido em um tamanho maior e, então, posso decidir quais recursos remover ou enfatizar em tamanhos menores. Você precisa saber o que há no ícone antes de remover elementos no tamanho pequeno. Os ícones glyfx têm alguns bons exemplos de como interpretar ícones grandes e pequenos do mesmo design.

Bem, eu prefiro fazer tudo para a menor densidade e escalá-lo. Se você estiver projetando todo o layout de um aplicativo, o trabalho com a grade é muito mais fácil e poupa muitas dores de cabeça, porque você está movendo os objetos em uma grade menor.

Portanto, meu fluxo de trabalho se parece com: 1. Faço um layout na menor escala de dpi no Photoshop e continuo criando os ícones no Illustrator, porque as imagens vetoriais não têm problemas com o aumento de escala. 2. Quando estou criando cada ícone / objeto etc., crio todas as versões em escala ao mesmo tempo (quando eu decido que fica bem no layout, é claro) e entrego os pngs finais ao programador.

Devo observar que comecei com o iOS primeiro.