Artigo com tradução automática, clique aqui para ler o original em inglês.

Chaveiro: Antatomia dum íncone

Este tutorial irá acompanhar a construção de um ícone para uma aplicação imaginária chamada “Chaveiro”.

Onde começar?
Uma caneta esferográfica, um bloco de notas e uma xícara de chá geralmente funciona bem para mim. No entanto, acima de tudo estas, a mais importante ferramenta para o desenvolvimento Icones é …?

Um dicionário
Cada ícone quer comunicar uma metáfora e como você está apelando a um público amplo, o significado de um termo aceitável é muito importante. Portanto,  um dicionário com 10.4 Tiger foi uma benção para todos que já tentaram resumir “o processo de certificação verticalmente integrada” em um quadrado 16×16.

Este processo pode parecer um tolo, mas cada ícone precisa contar com uma forte metáfora que seja entendida pelo público mais amplo.

Sketching
Em seguida, o processo de idéias começa. Não importa se o desenho parece monótono, você está apenas jogando as idéias no papel neste momento. Depois de ter colocado algumas idéias no papel você pode digitalizar-las e mergulhar em seu editor de imagem de escolha. Estou usando o Photoshop CS e IconBuilder Pro.

Bloqueio em Cores

O ícone vai ser construído usando formas vetoriais e estilos de camada por isso não há necessidade de construir uma enorme fonte de arquivo e escala. Primeiro vamos extrair a camada de base com a ferramenta caneta. Geralmente é útil ter o esboço de uma camada com os set-top para o modo de sobreposição, como você pode em seguida, verifique que você está seguindo a idéia aproximada. Quando temos a camada de base estabelecida, podemos então começar a preencher certas formas com estilos de camada como gradientes e brilhos interior para dar uma definição. A ferramenta de sobreposição padrão pode ser bastante útil para dar uma textura em determinadas áreas.

E destaca Sombras
Quando tiver preenchido as camadas de base com cores e alguns efeitos que nós podemos começar a construir as camadas destaque para cada um desses exemplos. A principal preocupação com as camadas destaque é para reforçar a forma global do ícone, seja ele uma esfera, tubo, ou um círculo. Então, sobre este ícone, usamos um leve tom de cinza para construir a curva da borracha. A superfície seria muito aborrecido para que as bordas e destaques seriam todos muito macios. Finalmente algumas camadas de sombra concluir a impressão geral da forma de ícone.

Se você deseja aplicar um destaque bom ponta, tente colocar um brilho interno e externo em uma forma e, em seguida, definir o conteúdo de preenchimento para 0%. Use uma camada de máscara para bater para fora o lado sombreado. Certifique-se de clicar em “Layer Mask Couros Effects” nas opções de Blending paleta Tudo através destas camadas, as máscaras são usadas para derrubar as bordas dos destaques ou trazer até sombras em determinadas áreas. Se não estiver satisfeito com o ângulo de algo, clicar no ponto approriate com a ferramenta de seleção direta e cutucando o ponto com as setas geralmente resolve a maioria das questões.

Tamanhos menores e Exportadores
Enquanto o ícone que estamos construindo pode parecer decente em 128×128, a maioria do tempo que vai ser visto em um tamanho menor no Dock, lateral ou de coluna / exibição de lista. Então temos que pensar no que podemos fazer para torná-lo bem em tamanhos menores. Às vezes uma simples escala e aguçar vai funcionar. Outras vezes, ele ajuda a construir uma versão do ícone especificamente para esse tamanho.

A natureza do vetor deste método ajuda a fazer mudanças de escala ou o estilo em uma data posterior, sem qualquer perda de qualidade. Este ícone pode ser ampliada para 256×256 ou superior e apenas os efeitos de camada e máscaras precisam de uma pequena limpeza para coincidir com o olhar 128×128. Com o 32 º e 16 resouces podemos ampliar e ver o que se qualquer detalhe que possa esclarecer. Uma dica é para afinar as arestas por julgar a cor geral do ícone e aplicar um golpe muito sutil que usar máscara para proteger as bordas do ícone. Assim, na lista e as posições do ícone da barra lateral pode ser mais visível. O passo final é a construção do resouces ícone na IconBuilder (usando o Photoshop IconBuilder modelo, você pode instantaneamente preencher os vários tamanhos, clicando QuickBuild). Para a maioria dos ícones de aplicativos, você estará criando um arquivo SNIC.

Metáforas e Wild Fowl
Um ícone não é um peru. Enchendo-a com elementos extra não vai dar mais sabor. Se o impulso para violino é esmagadora, fazer uma pausa a partir do ícone por algumas horas e voltar para ele. O ícone pode ser dada elementos extras como indicadores de pouca luz ou gráficos sobre o botão, mas são eles que contribuem para o significado ou apenas uma desculpa para pixel pushing? Simples é muito difícil de alcançar de forma consistente, mas é algo que vale a pena apontando para.

Eu fiz um pequeno filme do processo para que você possa ver o acúmulo de efeitos gerais.Eu poderia ter dado o PSD, mas eu acho que é melhor para mostrar o processo geral do que as definições exatas e camadas para uma parte específica do trabalho artístico.

Leia Também:

Como fazer Alcool Gel em casa!

Como fazer meu cabelo crescer mais e mais rápido

Fazer Inscrição no Portal do Empreendedor

Como fazer o cabelo crescer mais rapidamente

Como fazer o Recadastramento Anual em São Paulo

Fazer Cálculo Trabalhista Online

Posts relacionados trazidos a você pelo Yet Another Related Posts Plugin.