Criação de ícones envolve muito mais do que ilustração. Há vários fatores que devem ser considerados no estudo de cada item de uma interface, mas como não é o meu objetivo falar disso agora, vou me limitar a mostrar apenas a parte gráfica da coisa.

Vale lembrar que eu não defendo nenhum processo de criação engessado. Você deve respeitar o seu (não o meu ) processo criativo.  A minha maneira de fazer não é a única ou melhor forma. Ou é né… vai saber.

Fase 1: Sketch

No ínicio a Terra era sem forma e vazia….e tudo que Deus falava, BUM… se formava. 
Já a gente precisa de um esboçinho antes.  Se você não é Deus, é sempre melhor começar qualquer trabalho com lápis e papel, ou no meu caso, Wacom e Photoshop. Nesse projeto, o cliente queria ícones extramamente simples que seriam usados em 16×16 pixels, o que por si só limita consideravelmente o nível de detalhe. 

Esboço das metáforas de cada ícone.

Fase 2: Revisão de Sketch

O cliente recebe os esboços, avalia e envia seus comentários e vários e vários elogios, ou só os comentários. Avalio as informações que ele enviou e retorno com uma nova solução pras metáforas reprovadas na primeira fase. 

Novos esboços para metáforas reprovadas na primeira fase.

Fase 3: Tracing

Com todas metáforas aprovadas, sigo para a próxima fase que chamo de tracing, por que um nome em inglês sempre dá a impressão que você realmente sabe o que está fazendo. 
Nesse ponto defino as principais formas e perspectiva do ícone,  sem cores, sem volume, luz ou sombra. Isso evita retrabalhos desnecessários, aplicando toda a beleza e sofisticação da sua técnica em algo que ainda não está 100% aprovado.

Desenho das formas básicas de cada ícone.

Fase 4: Color

Com o shape final aprovado pelo cliente, trabalho nos outros aspectos gráficos do ícone: como cor, luz, sombra, brilho, contraste e uniformidade do set. Envio com um teste sobre o background onde o ícone será usado:

Fase 5: Finalização

Com a aprovação final dos ícones, envio os arquivos nos formatos necessários para o projeto, algumas saudações e felicitações a familia e vou pro bar comemorar que deu tudo certo.

Lembre que cada uma dessas fases pode ter várias revisões. E é muito importante que você separe o projeto em fases pra que não perca todo um trabalho que,  mesmo merecendo estar no Louvre, não atende as necessidades do seu cliente.

Espero ter sido útil. Abraços.

Muita gente me pergunta sobre o processo de criação de ícones. O video abaixo mostra parte desse processo: a criação do ícone ao lado ( Mammoth Icon ), desde o esboço no Flash até a coloração no Illustrator.

Infelizmente a versão do video está mal editada, e perdi os arquivos originais, me impedindo de fazer uma nova versão.

De qualquer forma, está aí pra quem quiser conferir.

Fiz um pequeno video mostrando como desenhar um ícone estilo iPhone usando Photoshop. Em breve publicarei um tutorial escrito informando todos os tamanhos e configurações.

Abraços.

Dirceu Veiga

Pra você que tem curiosidade de como uma caricatura é feita, assista esse video que eu fiz. A caricatura é a do post anterior, do Rodrigo Bressane.

E se você quer uma caricatura sua, visite :
www.socaricaturas.com.br

 Depois que postei o primeiro video mostrando o processo de criação de ícones, recebi muitos emails pedindo o video completo, sem edição. Então estou postando a primeira parte do video sem edição, mostrando como traçar a ilustração no Illustrator. Espero que gostem.

Mais um video Making Of, mostrando como desenhar icones no Illustrator. Dessa vez editei bem pouca coisa pra mostrar melhor cada passo do processo. Nesta primeira parte, mostro como desenhar as linhas de um icone de iPod usando uma foto como base. Nos proximos videos irei mostrando como colorir, colocar luzes e sombras, etc…
Espero que gostem.

Nessa semana lancarei ícones novos no FastIcon, inspirados em Art Toys.
Junto com os ícones, fiz um pequeno making of mostrando o processo de criação de um desses ícones do início ao fim, usando Adobe Illustrator.

Ao lado, o preview do ícone em questão e também o video Making Of.

Algumas pessoas me perguntam qual é o processo de criação de tiras, então resolvi postar mais ou menos como eu faço isso

Fase 1 – Argumento:

Primeiro vem o argumento, que é rabiscado sem preocupação com desenho e texto definitivo. Nessa fase, eu normalmente deixo a coisa rolar solta, rabiscando uma idéia após a outra, mesmo que sejam todas ruins, sem ser muito crítico. Depois eu leio todas elas com calma, e às vezes 2 ou 3 idéias de argumento acabam numa única tira, ou nenhuma… só abrindo caminho pra um argumento melhor, que vira a tira definitiva.

Fase 2 – Ilustração:

Idéia criada, vou para a prancheta. Nessa fase eu defino os enquadramentos, às vezes mudo os personagens e também refino os textos. Eu desenho as tiras em 26X8cm.

Fase 3 – Arte-final:

Eu arte-finalizo as tiras com pincel e tinta nanquim. Optei por esse método pra me desligar um pouco do computador. Depois que comecei a trabalhar com Ícones, eu praticamente não usava papel. Eu poderia arte-finalizar em vetor, no Adobe Illustrator, mas mexer com tinta faz bem pra qualquer desenhista.
Diferente da maioria dos artistas, eu não faço arte-final no esboço original, eu uso mesa de luz
Seguem algumas fotos do processo:

Fase 4 – Scan, letreiramento e balonagem:

Essa é a fase final. Depois da tira digitalizada, eu faço o letreiramento no Photoshop. Aqui eu faço a revisão dos textos, analiso o que funciona e o que não funciona e defino as falas finais. Há várias maneiras de se dizer a mesma coisa, então eu vou testando até encontrar a que eu considero mais engraçada ou reflexiva, dependendo da tira. A balonagem eu fazia com seleções e strokes, mas agora uso balões pré-desenhados no Illustrator.

Depois de tudo feito, coloco a assinatura/copyright, url do blog e a tirinha está pronta pra ser publicada.
Então é isso. Espero que tenham curtido.

Meus materiais:
- Lapiseira Pentel 0.5
- Grafite 2B
- Sulfite 90gm ( para os esbocos )
- Papel Opaline ( para arte-final )
- Pincel Galeria, Round 8, Winsor & Newton
- Nanquim – Talens Indian Ink

Você pode ler todas as tirinhas no blog Tiras do Edi:
www.tirasdoedi.com.br