Como redimensionar conjuntos de ícones no Photoshop?

Ao procurar on-line por ícones para uso em meus sites, geralmente encontro conjuntos de ícones gratuitos muito bem projetados.

No entanto, muitas vezes esses conjuntos de ícones estão disponíveis apenas em um único tamanho - por exemplo, o conjunto de ícones http://designdeck.co.uk/a/1245 ) vem apenas em um tamanho de 48x48px.

Qual seria a melhor abordagem para redimensionar esse ícone definido para 24x24px ou 32x32px no Photoshop?

Não consegui encontrar nenhum bom tutorial para iniciantes online. obrigado

Esse conjunto específico é composto de formas e texto; portanto, o redimensionamento não afeta a qualidade, mas você não pode simplesmente reduzir o tamanho desses ícones. Um ícone é um tipo especial de infográfico. Seu objetivo é comunicar informações facilmente reconhecidas em qualquer tamanho, portanto, sua primeira etapa, antes de começar a dimensionar qualquer coisa, é identificar quais partes do ícone carregam as informações. Estes devem permanecer legíveis, o resto é descartável.

Nesse caso, as formas de círculo não carregam nenhuma informação, mas, em vários casos, suas cores , então você não pode eliminá-las. Você pode escalá-los livremente, no entanto. Os elementos gráficos nos círculos carregam as informações vitais, portanto você deve tratá-los com mais cuidado.

Veja como dimensionar esse conjunto de 48 para 24 px, trabalhando no PSD:

• Abra o conjunto de camadas para um dos ícones. Vamos escolher o ícone do Google+.

• Selecione o círculo e escolha Edit > Transform > Scale. Certifique-se de que o ponto central no proxy de controle Transform esteja selecionado e alterne o link entre os campos W e H para que sua escala seja proporcional.

• Digite 50 no campo W ou H e pressione Enter / Return.

Nesse ponto, seu círculo tem 24 px de diâmetro, mas o "g" e o "+" são muito grandes.

• Selecione tanto a camada de forma "g" e a camada de texto "+" e escolha Edit > Transform > Scalecomo antes, mas desta vez, digite 80 no W ou campo H e pressione Enter / Return.

• Deslize as camadas "g +" para centralizá-las no círculo.

Esse ícone reduzido ainda transmite as mesmas informações claramente, mas é do tamanho necessário e será consistente com o restante do conjunto quando você as dimensionar.

Trate o resto dos ícones da mesma forma. Os círculos definem os limites e, portanto, todos são redimensionados em 50%. A quantidade em que você escala cada gráfico varia (o ícone do Skype funciona melhor em 75% que 80%), portanto, você precisará experimentar um pouco. A experiência ensinará você à medida que avança.

Tamanhos diferentes precisarão de proporções diferentes e quantidades de escala apropriadas. O importante é diferenciar o que é informação e o que é decoração. Você pode escalar ou jogar fora a decoração; você deve manter as informações legíveis.

Os "ícones" pictóricos e os ícones com muitos detalhes não podem ser simplesmente redimensionados. Eles devem ser simplificados quando reduzidos em tamanho, para que as informações permaneçam claras, portanto, você deve criar um ícone diferente para tamanhos menores. O mesmo princípio é seguido no design de logotipos - o que funciona bem em um pôster pode precisar ser bastante simplificado para um cartão de visita - e no design de tipos.

A resposta se aplica aos ícones vetoriais e rasterizados.

Se a qualidade importa, você não pode.

• Ícones grandes contêm mais detalhes. Esses detalhes, que são agradáveis ​​em um ícone de 128 × 128, seriam perturbadores em um ícone de 32 × 32; em vez de ajudar a identificar visualmente o ícone, eles farão o oposto. Por exemplo, um ícone grande de um teclado pode conter todas as teclas do teclado. Para um ícone de 16 × 16, basta quatro teclas: ou você desenha quatro e os usuários entendem que essas são teclas ou você desenha mais e tudo se torna simples.

  Vamos tentar ver o que acontece. Pego o ícone de teclado graficamente excelente usado no Windows 7:

  

  Agora, compare, lado a lado, o ícone reduzido à esquerda e o ícone que redimensionei no Photoshop a partir do maior:

  

  O da esquerda é bem claro. À direita, acredito que seja um PDA de formato estranho, com uma tela grande, dois botões na parte inferior da tela e um botão grande na parte inferior. Vamos ver o que acontece quando vamos para uma escala ainda menor:

  

  O ícone à esquerda, usado pelo Windows 7, é bastante claro, apesar da baixa resolução. O ícone à direita, a versão redimensionada da versão grande, é completamente sem sentido: pode ser um PDA, uma caixa de prata ou qualquer outra coisa. Na verdade, parece -me a calculadora PF-19686592 para mim.

Outros fatores além do nível de detalhe do objeto devem ser levados em consideração:

• é bom ter uma sombra, por exemplo, em um ícone de 64 × 64, mas a mesma sombra parecerá estúpida em um favicon 16 × 16.

• o objeto pode ser girado para ficar em perspectiva quando o ícone for grande. Quando for minúsculo, desenhe-o.

• o número de objetos deve diminuir quando o tamanho diminui. Por exemplo, um ícone grande de um bloco de notas pode apresentar um bloco de notas com um lápis. Em um ícone menor, não há lugar suficiente para desenhar um lápis de forma a não cobrir o bloco de notas e é reconhecido como um lápis ao mesmo tempo.

Essas regras são realmente seguidas nos ícones do Windows XP .

Isso significa que, se o UX e a qualidade do design importarem, você não pode simplesmente reduzir o tamanho de um ícone e esperar que ele seja tão claro quanto o original. Considerando o conjunto de ícones aos quais você vincula a sua pergunta, obviamente você não deseja manter um círculo em volta do ícone para os ícones 24 × 24: remova o círculo e mantenha apenas o conteúdo.

Vamos ver o que acontece. Esta imagem:

torna-se:

À esquerda, removi o círculo. À direita, reduzi a imagem original. Você pode me dizer o que vê no lado direito?

Se a qualidade não importa, basta redimensionar a imagem.

Para obter melhor qualidade, você ainda pode querer:

• Mantenha a mesma proporção (obviamente),

• Para redimensionar, divida por múltiplos de dois: de 128 × 128, você pode obter 32 × 32, mas criar um ícone 41 × 41 pode gerar resultados estranhos,

• Tente com diferentes algoritmos de redimensionamento. Espero que os lanczos funcionem melhor, mas talvez não para todos os ícones. A nitidez também pode aumentar ou diminuir a qualidade.

Sempre faço meus ícones em um formato vetorial (usando o Illustrator) - dessa maneira, posso exportar minha arte no tamanho e no formato desejados. Bem, isso não é totalmente verdade, pois tenho que ajustar os ícones para o alinhamento de pixels. O CS5 faz um bom trabalho, mas não cobre todos os problemas ...

No photoshop, como você está usando pixels, ele fornecerá o melhor resultado se você desenvolver seus ícones no maior formato necessário e depois reduzi-lo. Você também deve usar "máscara de nitidez" para tornar as imagens reduzidas mais nítidas, pois perdem a nitidez no algoritmo de redução de tamanho.