Design de ícones – Criando um ícone de lápis no Illustrator

0
60

Hoje em dia podemos ver ícones em todos os lugares, desde um console de vídeo game até aplicações web. Os ícones estão ficando mais e mais populares e desempenham um papel importante, talvez o papel mais importante em interfaces de usuário. No entanto, os recursos sobre desenho de ícone não são tão populares, é por isso que quando fizemos nossos primeiros passos no design de ícones foi muito difícil encontrar um bom ponto de partida.

Haviam poucos livros e tutoriais aprofundados neste assunto. É por isso que gostaria de compartilhar algumas dicas úteis (espero) sobre como criar um conjunto de ícones simples. Este tutorial apresenta, naturalmente, não tudo o que você deve saber sobre como dominar o design de ícones, mas esperamos que ele o ajude, especialmente se você acabou de começar a aprender, ou quer saber mais sobre o desenho de ícones.

Design de ícones - Criando um ícone de lápis no Illustrator

Na próxima semana lançaremos um pacote de ícones chamado Láctea (veja a imagem acima), que estará disponível para download gratuito. Este artigo explica o processo de concepção de um ícone de lápis simples , um dos ícones do conjunto de ícones. O tutorial é muito detalhado e aprofundado, para que você possa seguir cada passo sem problemas.

Embora consideremos um exemplo de base, os princípios e técnicas do presente artigo podem ser facilmente aplicadas ao desenho do ícone em geral. Apesar de todas as ferramentas que usamos neste guia são muito simples e muito fáceis de trabalhar, o seu conhecimento com o Adobe Illustrator será importante.

Este é o resultado que iremos apresentar, no final do artigo. Você pode baixar o arquivotambém.

Este é o resultado que iremos apresentar, no final do artigo. Você pode baixar o arquivo também.

clip_image003

Então, como vamos começar? Normalmente, antes de começar, temos de reunir algumas fotos de lápis na Web e pegar os detalhes e traços dessas fotos e misturar tudo para criar um estilo para um ícone de lápis suave. É importante sempre começarmos com um esboço desenhado à mão.clip_image004

1. Características de um ícone de lápis

O desenho de um ícone significa desenhar as características mais típicas de um objeto, de modo que ele pode capturar a ação do ícone ou representar o conceito e nuances.
Como você deve saber, geralmente há três tipos de lápis para escolhermos:

Em forma de prisma, com uma extremidade do corpo revestido com esmalte brilhante.

Em forma de prisma com uma borracha fixada ao corpo do lápis por um anel de metal branco brilhante.

Em forma de cilindro sem uma borracha.

Nós escolhemos o segundo tipo para o desenho do ícone, pois tem todos os elementos necessários, tornando mais fácil para o espectador a reconhecer a imagem.

Veja algumas coisas importantes sobre o desenho de ícones:

· Quando um ícone é projetado em um tamanho grande, é preciso prestar muita atenção aos detalhes e certificar-se que a perspectiva de dois pontos é utilizada. Mas neste artigo, como o ícone é deve ser feito e otimizado em tamanhos menores (64 × 48 × 64px e 48px), seu conceito deve ser tão simples quanto possível, e o ícone deve ser ilustrado em um ponto de perspectiva.

· A luz utilizada no ícone deve ser harmonizada.

· A perspectiva utilizada para o ícone deve ser idêntica aos demais que forem criados, fazendo todos os ícones parecem estar em uma família.

· O estilo deve ser um pouco mais viril na aparência.

· A cor escolhida é verde.

· Uma vez que o ícone deve ser salvo em um arquivo EPS8, apenas gradiente será usado e todos os caminhos devem ser conectados (há caminhos abertos). Também é importante notar que não há nenhum efeito transparente e nenhuma imagem raster envolvida.

Ok, vamos para a parte principal!

2. Esboços

Em nosso projeto o ícone é esboçado em primeiro lugar.

Vamos digitalizar nosso esboço no illustrator.

Vamos digitalizar nosso esboço no illustrator.

3. Esquema básico

3.1. O CORPO DO LÁPIS

1. Crie um documento 64 x 64px. Arraste a imagem (o desenho digitalizado) para a prancheta do novo documento. Vá para a paleta Transparency e defina a opacidade da imagem para 50. Bloqueie essa camada e salve o documento. Crie uma nova camada e comece a fazer esboços sobre ela.

2. Crie um retângulo arredondado usando a ferramenta “retângulo arredondado” e em seguida, clique na prancheta para definir o valor de raio de canto para 10px. Clique no OK.

2. Crie um retângulo arredondado usando a ferramenta “retângulo arredondado” e em seguida, clique na prancheta para definir o valor de raio de canto para 10px. Clique no OK.

2. Crie um retângulo arredondado usando a ferramenta “retângulo arredondado” e em seguida, clique na prancheta para definir o valor de raio de canto para 10px. Clique no OK.

3. Escolha a ferramenta de seleção (V) e clique em uma borda do retângulo arredondado e arraste-o para se encaixar bem na imagem esboçada, como na imagem abaixo.

3. Escolha a ferramenta de seleção (V) e clique em uma borda do retângulo arredondado e arraste-o para se encaixar bem na imagem esboçada, como na imagem abaixo.

Selecione o retângulo arredondado e defina sua cor para “nenhum”.

A borracha parece menor do que o corpo, por isso precisa ser reformada. Pode haver várias formas de redesenhar a borracha, como usar a ferramenta Pen (P), mas a partir de minha experiência, elas não dão bons resultados.

4. Selecione o caminho retângulo arredondado. Dê um duplo clique na ferramenta Escala e verifique se a opção Uniform está habilitada. Defina o valor da escala de 96%. Clique no botão Copy para criar uma réplica, como mostrado na figura abaixo.

4. Selecione o caminho retângulo arredondado. Dê um duplo clique na ferramenta Escala e verifique se a opção Uniform está habilitada. Defina o valor da escala de 96%. Clique no botão Copy para criar uma réplica, como mostrado na figura abaixo.

5. Selecione a ferramenta Retângulo e desenhe um novo retângulo na base do retângulo arredondado.

5. Selecione a ferramenta Retângulo e desenhe um novo retângulo na base do retângulo arredondado.

6. Selecione a ferramenta Add Achor Point (+) e clique no ponto central do caminho do retângulo (desenhado no passo 5) para adicionar mais um ponto âncora. Em seguida, selecione a ferramenta Delete Anchor Point (-) e exclua os dois pontos de ancoragem das extremidades inferiores.

6. Selecione a ferramenta Add Achor Point (+) e clique no ponto central do caminho do retângulo (desenhado no passo 5) para adicionar mais um ponto âncora. Em seguida, selecione a ferramenta Delete Anchor Point (-) e exclua os dois pontos de ancoragem das extremidades inferiores.

7. Selecione a ferramenta Elipse e desenhe uma elipse, como mostrado abaixo:

7. Selecione a ferramenta Elipse e desenhe uma elipse, como mostrado abaixo:

8. Selecione o retângulo maior e a elipse. Vá para a paleta Pathfinder e clique no ícone Divide. Um novo grupo aparece na paleta Layer. Qualquer caminho dividido vai pertencer a este grupo.

8. Selecione o retângulo maior e a elipse. Vá para a paleta Pathfinder e clique no ícone Divide. Um novo grupo aparece na paleta Layer. Qualquer caminho dividido vai pertencer a este grupo.

9. Vá para a paleta Layers e selecione os dois caminhos localizados abaixo do novo grupo, pressione Ctrl + G para colocá-los em um grupo e bloqueie este grupo. Faça isso para tornar mais fácil de eliminar caminhos não utilizados na etapa

10. Desagrupe o grupo com caminhos divididas (no passo 8), selecionando o grupo e selecione o comando Desagrupar no menu do botão direito.

10. Desagrupe o grupo com caminhos divididas (no passo 8), selecionando o grupo e selecione o comando Desagrupar no menu do botão direito.

11. Exclua os caminhos não utilizados até que o resultado seja abaixo seja alcançado.

11. Exclua os caminhos não utilizados até que o resultado seja abaixo seja alcançado.

3.2. O ANEL DE METAL

Assim como nos passos anteriores, vamos usar a mesma técnica para dividir o anel de metal do corpo do lápis.

Assim como nos passos anteriores, vamos usar a mesma técnica para dividir o anel de metal do corpo do lápis.

Assim como nos passos anteriores, vamos usar a mesma técnica para dividir o anel de metal do corpo do lápis.

Já criamos a forma básica de nosso lápis, acho que a partir de agora já podemos partir para o desenho dos demais detalhes.

4. Detalhes:

4. Detalhes:

Vamos criar os contornos de um lápis com ponta afiada, usando a ferramenta Retângulo arredondado e a paleta Pathfinder.

1. Selecione a ferramenta Retângulo Arredondado e desenhe um novo retângulo arredondado com raio de canto de 4pt (como na etapa 2b).

1. Selecione a ferramenta Retângulo Arredondado e desenhe um novo retângulo arredondado com raio de canto de 4pt (como na etapa 2b).

2. Faça uma cópia deste retângulo e cole na frente do conjunto pressionando Ctrl+C e Ctrl+F.

3. Mova o caminho duplicado para a direita.

3. Mova o caminho duplicado para a direita.

4. Selecione os dois retângulos arredondados e o caminho corpo do lápis, e então divida-os usando a opção Divide na paleta Pathfinder.

5. Selecione o grupo com caminhos divididos e desagrupe, e depois exclua os caminhos não utilizados. O resultado deve ser parecido com o que você vê abaixo.

5. Selecione o grupo com caminhos divididos e desagrupe, e depois exclua os caminhos não utilizados. O resultado deve ser parecido com o que você vê abaixo.

6. Continue usando a ferramenta Retângulo arredondado para desenhar outro retângulo, desta vez desenhe-o no meio do lápis e use a opção Divide para criar um prisma transparente. Desagrupe, a próxima etapa é desbloquear todos os caminhos da camada 2, e em seguida, altere seus nomes. Veja o resultado abaixo.

6. Continue usando a ferramenta Retângulo arredondado para desenhar outro retângulo, desta vez desenhe-o no meio do lápis e use a opção Divide para criar um prisma transparente. Desagrupe, a próxima etapa é desbloquear todos os caminhos da camada 2, e em seguida, altere seus nomes. Veja o resultado abaixo.

6. Continue usando a ferramenta Retângulo arredondado para desenhar outro retângulo, desta vez desenhe-o no meio do lápis e use a opção Divide para criar um prisma transparente. Desagrupe, a próxima etapa é desbloquear todos os caminhos da camada 2, e em seguida, altere seus nomes. Veja o resultado abaixo.

5. Denominar o Lápis:

E agora vamos começar a deixar o nosso ícone mais atraente. Os passos incluem:

5.1. ADICIONANDO GRADIENTE

1. Selecione todos os caminhos e selecione a ferramenta Gradiente, depois vá para a paleta Swatches e escolha um gradiente preto-branco-radial.

2. Selecione cada caminho e arraste a ferramenta Gradiente(G) em cada um deles, até ver o resultado como o da imagem abaixo:

2. Selecione cada caminho e arraste a ferramenta Gradiente(G) em cada um deles, até ver o resultado como o da imagem abaixo:

3. Selecione todos os objetos e defina o contorno para Nenhum, o objetivo é ver o lápis em detalhes.

3. Selecione todos os objetos e defina o contorno para Nenhum, o objetivo é ver o lápis em detalhes.

Agora a iluminação aprece boa, mas o gradiente na peça de metal e na ponta do lápis precisam ser melhoradas.

4. Altere o tipo de gradiente destes objetos para lineares e tente definir exatamente como o meu. Caso não consiga você pode baixar este arquivo de origem.

4. Altere o tipo de gradiente destes objetos para lineares e tente definir exatamente como o meu. Caso não consiga você pode baixar este arquivo de origem.

4. Altere o tipo de gradiente destes objetos para lineares e tente definir exatamente como o meu. Caso não consiga você pode baixar este arquivo de origem.

4. Altere o tipo de gradiente destes objetos para lineares e tente definir exatamente como o meu. Caso não consiga você pode baixar este arquivo de origem.

5. O anel de metal deve abraçar a borracha com força. Para fazer isso, use a ferramenta Add Achor Point (+) e adicione mais 4 pontos de ancoragem nas duas extremidades do caminho do anel de metal, e depois exclua os dois pontos de canto. O resultado esperado deve ser este:

5. O anel de metal deve abraçar a borracha com força. Para fazer isso, use a ferramenta Add Achor Point (+) e adicione mais 4 pontos de ancoragem nas duas extremidades do caminho do anel de metal, e depois exclua os dois pontos de canto. O resultado esperado deve ser este:>

6. O anel de metal também precisa ser um pouco mais grosso. A maneira mais fácil de fazer isso é usar o comando Offset Path. Selecione o caminho e vá até Object> Path> Offset Path. Na caixa de diálogo defina o valor de deslocamento para-1pt ou menos. Você pode marcar a caixinha Preview para ver o resultado e clique OK.

6. O anel de metal também precisa ser um pouco mais grosso. A maneira mais fácil de fazer isso é usar o comando Offset Path. Selecione o caminho e vá até Object> Path> Offset Path. Na caixa de diálogo defina o valor de deslocamento para-1pt ou menos. Você pode marcar a caixinha Preview para ver o resultado e clique OK.

6. O anel de metal também precisa ser um pouco mais grosso. A maneira mais fácil de fazer isso é usar o comando Offset Path. Selecione o caminho e vá até Object> Path> Offset Path. Na caixa de diálogo defina o valor de deslocamento para-1pt ou menos. Você pode marcar a caixinha Preview para ver o resultado e clique OK.

Notas:

· Use o deslocamento para fazer um duplicado ao longo do caminho do anel de metal, altere o gradiente (abaixo do duplicado) para dar profundidade.

· Sempre que o Offset é usado, o nome padrão do duplicado é “Path”.

· Se o valor de deslocamento é de menos (-), a cópia ficará acima na camada do objeto.

7. Aplique um gradiente radial preto-branco-acinzentado ao de metal, pressione G e arraste a ferramenta Gradiente em todo o caminho até chegar ao resultado como a imagem abaixo:
Ok, o anel de metal parece aceitável aos olhos. Agora vamos mexer com a ponta afiada ou o caminho da ponta do lápis.

7. Aplique um gradiente radial preto-branco-acinzentado ao de metal, pressione G e arraste a ferramenta Gradiente em todo o caminho até chegar ao resultado como a imagem abaixo:

8. Escale o caminho da ponta do lápis para que se una com o corpo lápis.

9. Como no desenho, o caminho da ponta do lápis aqui precisa de uma peça de destaque localizada em seu centro, tornando-se a sua forma. Antes de fazer isso, lembre-se de que o ícone deve ser salvo em formato EPS8 e não há uso de efeitos, modos de mesclagem ou de ajuste de opacidade, mas apenas caminhos e sobreposição das formas. Para torná-lo mais simples, use a ferramenta Pen e desenhe um caminho sobre a ponta do lápis.

9. Como no desenho, o caminho da ponta do lápis aqui precisa de uma peça de destaque localizada em seu centro, tornando-se a sua forma. Antes de fazer isso, lembre-se de que o ícone deve ser salvo em formato EPS8 e não há uso de efeitos, modos de mesclagem ou de ajuste de opacidade, mas apenas caminhos e sobreposição das formas. Para torná-lo mais simples, use a ferramenta Pen e desenhe um caminho sobre a ponta do lápis.

10. Mude a direção e o ângulo do gradiente até que a ponta do lápis tenha uma forma adequada.

11. Desenhe a ponta do lápis usando a ferramenta Pen.

11. Desenhe a ponta do lápis usando a ferramenta Pen.

12. Desenhe um pequeno destaque sobre a borracha usando a ferramenta Pen e altere o ângulo do gradiente para sugerir a forma da borracha.

13. Use o comando Offset Path para fazer uma cópia da borracha. Mude o tom do gradiente que ficara no contorno da borracha para que fique mais nítido.

13. Use o comando Offset Path para fazer uma cópia da borracha. Mude o tom do gradiente que ficara no contorno da borracha para que fique mais nítido.

5.2. APRIMORANDO AS CORES

Nesta etapa, vamos colocar cada elemento do lápis em grupos separados (o corpo, a borracha, e a ponta).

1. Selecione os caminhos do corpo. Vá ao menu Edit> Adjust Color Balance , habilite o Preview e o Converter na caixa de diálogo. Ajuste, em seguida, mude para o modo RGB.

1. Selecione os caminhos do corpo. Vá ao menu Edit> Adjust Color Balance , habilite o Preview e o Converter na caixa de diálogo. Ajuste, em seguida, mude para o modo RGB.

2. Arraste os controles deslizantes para alterar os valores Vermelho / Verde / Azul (a cor que você quiser).

3. Selecione a borracha e faça o mesmo, mudando a sua cor à vontade.

4. Selecione agora a ponta da borracha e faça o mesmo.

4. Selecione agora a ponta da borracha e faça o mesmo.

O lápis agora tem a forma mais plana, isso porque perdemos o tom de preto quando mudamos as cores. Vamos devolver um pouco de sombra para deixar o lápis menos artificial.

5. Pegue o controle deslizante de gradiente e mova a cor principal para mais perto do branco. Na paleta de cores, arraste a cor até a paleta Gradient. Selecione a cor apenas arrastado (clicando no controle deslizante de gradiente) e altere seu valor para 0-0-0 (certifique-se de que o modo de cor é RGB). Você pode usar a paleta de cores para alterar a cor do gradiente.

5. Pegue o controle deslizante de gradiente e mova a cor principal para mais perto do branco. Na paleta de cores, arraste a cor até a paleta Gradient. Selecione a cor apenas arrastado (clicando no controle deslizante de gradiente) e altere seu valor para 0-0-0 (certifique-se de que o modo de cor é RGB). Você pode usar a paleta de cores para alterar a cor do gradiente.

6. Detalhes mais profundos e correspondência de estiloS

Depois de tudo, o básico está feito, mude para o modo Pixel Preview no menu View para ver se há problemas na pixelização.

Estamos quase terminando. No entanto, como você vê, o lápis parece muito pontiagudo, dando uma sensação insegura. Então temos que mudar esse ponto cônico para um tronco de uma pirâmide. Além disso, precisamos adicionar alguns caminhos extras no corpo lápis como peças de destaque (usando o comando Path Offset). Isto é necessário porque o invólucro exterior do lápis é um revestimento muito brilhante.

E o resultado é:

resultado

Depois que o ícone é girado em 45 graus.

Depois que o ícone é girado em 45 graus.

Bem, mais uma coisa, o lápis ainda parece muito escuro e pode não coincidir com o estilo escolhido para os outros ícones, por isso vamos fazer uma alteração na sua cor. Basta adicionar alguns detalhes no anel de metal (1) pela duplicação do caminho, escalar a cópia um pouco, e depois (2) fazer outra cópia e arrastar o gradiente sobre ele para que o ícone fique mais realista.

Nota: certifique-se que tanto o “Snap to Pixel” e “Snap to Point” foram habilitados após a utilização do modo Pixel Preview.

O resultado final:

O resultado final:

Olhe para o resultado final. Embora a direção da luz venha de cima, a parte inferior do corpo do lápis é mais clara do que a parte superior. Sim, é o reflexo da luz.
Muitos assumem que é difícil desenhar ícones com Illustrator, devido à dificuldade de representar a cor e luz. Se você tem um bom senso de cor, pode mudar a cor e tom do gradiente usando a paleta de cores.

Olhe para o resultado final. Embora a direção da luz venha de cima, a parte inferior do corpo do lápis é mais clara do que a parte superior. Sim, é o reflexo da luz.

Olhe para o resultado final. Embora a direção da luz venha de cima, a parte inferior do corpo do lápis é mais clara do que a parte superior. Sim, é o reflexo da luz.

De qualquer forma com o Photoshop, você pode fazer da seguinte maneira:

1. Exporte o seu vetor para um arquivo PNG, em seguida, abra-o no Photoshop.
Altere o nível de cor e de luz da imagem do ícone usando Curvas ou Níveis, Equilíbrio de cor ou Automáticos (a partir do menu Image> Adjust), ou usando outras técnicas que conhecer no Photoshop. Após a edição, salve o arquivo.

2. Arraste a imagem editada no Illustrator, use a ferramenta Eyedroper para pegar três valores principais de cor – luzes, médios e sombras, e depois de cada pick-up, arraste a cor para a paleta Amostras para salvar.

3. Arraste a cor escolhida para a paleta Gradient para fazer seus próprios gradientes agradáveis, então aplicados ao seu ícone.
Eu costumava fazer assim por um tempo, agora eu já possuo uma biblioteca muito útil de gradientes, que eu sempre uso para criar meus estilos de ícones.

7. Arquivos para download

Você pode baixar os arquivos deste artigo em EPS e AI gratuitamente:

Faça o download dos arquivos clicando aqui

Comparações de design

Estes são alguns desenhos típicos que nós gostaríamos de mostrar e classificá-los em cima de alguns pontos fortes e fracos.
O resultado final acima mostra os ícones desenhados a lápis em um ponto de perspectiva. Este é um projeto perfeito que obtém todos os componentes necessários: iluminação, cor, sombra e composição, e, especialmente, este projeto pode ser escalado para qualquer tamanho sem problema pixelização.

Estes são alguns desenhos típicos que nós gostaríamos de mostrar e classificá-los em cima de alguns pontos fortes e fracos.

A Figura 1 mostra os ícones de lápis concebidos em dois pontos de vista. Este projeto descreve uma boa iluminação, sombra aceitável e cor agradável, e não há o problema de pixelização. Sim, este projeto parece agradável e sauve. No entanto, a composição e a forma dos lápis podem não ser imediatamente reconhecíveis pelos espectadores, que resulta na violação do princípio principal do desenho do ícone.

A Figura 1 mostra os ícones de lápis concebidos em dois pontos de vista. Este projeto descreve uma boa iluminação, sombra aceitável e cor agradável, e não há o problema de pixelização. Sim, este projeto parece agradável e sauve. No entanto, a composição e a forma dos lápis podem não ser imediatamente reconhecíveis pelos espectadores, que resulta na violação do princípio principal do desenho do ícone.Figura 1

A Figura 2 mostra os ícones de pasta projetados em dois pontos de perspectiva. O design parece quase perfeito, com bom conceito, uma composição completa e adequada. É também um bom projeto, uma vez que retrata com precisão a direção da luz que vem de cima e lança uma sombra agradável, e o reflexo da luz sobre o objeto está perfeito. Contudo, a pixelização ocorre nas bordas superiores da pasta, fazendo com que o ícone de 24x24px perca nitidez.

A Figura 2 mostra os ícones de pasta projetados em dois pontos de perspectiva. O design parece quase perfeito, com bom conceito, uma composição completa e adequada. É também um bom projeto, uma vez que retrata com precisão a direção da luz que vem de cima e lança uma sombra agradável, e o reflexo da luz sobre o objeto está perfeito. Contudo, a pixelização ocorre nas bordas superiores da pasta, fazendo com que o ícone de 24x24px perca nitidez.Figura 2

Conclusão

Há muitas abordagens diferentes para o design de ícones, usa-se alguns aplicativos 3D, outros usam fogos de artifício ou o Photoshop, mas o objetivo na concepção de ícones é a mesma, não importando a ferramentas que usamos. Precisamos manter a consistência através de cada ícone no conjunto, e manter seu reconhecimento e simplicidade. Como dissemos no início deste artigo, estes são apenas alguns passos básicos e princípios de criação de um ícone bonito e limpo. Esperamos que você aproveite este tutorial.

Site original: Smashing Magazine

Comente! Sugestões, dúvidas e opiniões são ótimos para melhorar o conteúdo do Clube.

Aproveite para seguir o Clube no twitterfacebookyoutube ou google+, assim você fica por dentro das novidades, e acompanha os melhores links do blog. Você também pode assinar nossofeed de notícias e receber todas as atualizações de maneira exclusiva.

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here