Parte 1: Vetorizando 1.1: Imagem e Vetor Antes de começarmos o processo de Vetorização, precisamos saber a diferença entre imagem e vetor. Imagens são quaisquer tipos de figura apresentada ao usuário do computador por meio de um mapa de pixels, ou seja, são inúmeros pixels que apresentados numa seqüência horizontal e vertical, formam a imagem que é visualizada pelo usuário. Se você quer ter uma idéia de um mapa de pixels, abra qualquer imagem no seu Paint e dê um zoom, cada um desses quadradinhos é um pixel. As extensões de imagens formadas por pixels mais utilizadas na internet são: JPEG, BMP (bitmap) e GIF. Vetor, neste caso, é uma imagem formada por cálculos matemáticos produzidos pelo computador para a visualização do usuário. Diferente de uma imagem comum, os vetores não necessitam de um mapa de pixels para serem demonstrados, ele se baseiam apenas em coordenadas e códigos que são interpretados pelo programa resultando em uma figura. Os programas de edição de imagens em vetor mais utilizados no mercado são: Adobe Ilustrator, Corel Draw e Adobe Macromedia Flash, cada qual com seu tipo de extensão. Mas porque é necessário saber sobre tudo isso? Por que o processo de Vetorização é exatamente transformar imagens comuns em vetores, para que possamos usá-las em nosso programa, pois o processo seria muito mais difícil se usássemos imagens comuns, imaginem pintar item a item utilizando um programa de edição de imagens :(. Adiante entenderemos melhor isso. 1.2: Vetorizando Vetorizar é muito mais fácil do que parece, para isso vamos utilizar o nosso bom e velho Flash (no meu caso estou utilizando a versão 8 em inglês). Abra o programa e vá em File > New > Flash Document. Isso vai abrir um novo documento. Agora selecione a imagem que queira vetorizar em: File > Import > Import to Stage. E selecione sua imagem, no meu caso peguei essa aqui do Goku, já pra fazer um Gerador de Personagens do Dragon Ball (01).
Note essa parte aqui (02), essas são as camadas de imagem, elas são utilizadas para separarem as imagens dentro do programa, as camadas superiores ficam a frente na tela e as camadas inferiores ficam para trás, isso é importante, pois nossa imagem ficara em uma camada e nós vamos desenhar o vetor em uma camada acima. Para criar mais camadas aperte esse botão (03), agora você terá duas camadas, clique duas vezes no nome da camada para renomeá-lo (04), na camada inferior onde está sua imagem coloque o nome Imagem e na camada superior coloque o nome Vetor, será nesta camada que iremos desenhar. 1.2.1: Fazendo o Contorno Para fazermos as linhas de contorno de nosso desenho, vamos utilizar a ferramenta Line Tool (05), e com ela vamos traçar retas nos principais contornos do desenho. Para dar uma melhor visualização da sua linha, mude a cor dela para vermelho (06). Para utilizar a ferramenta é só clicar e segurar em um ponto, arrastar e soltar o botão, assim vamos dando contorno ao desenho (07).
Note que eu só fiz as linhas que representam o corpo, pois nosso intento é fazer um gerador de personagens, então não faremos o cabelo e as roupas por enquanto. Se o seu desenho for visto de frente como o meu, desenhe só uma metade para espelharmos ela depois para não temos tanto trabalho. Agora é a hora de suavizar as linhas retas e transformá-las em curvas. Com a ferramenta Selection Tool (08), aproxime o cursor no centro de qualquer reta, e quanto ele apresentar o símbolo da seta com uma curva, clique e arraste o centro da reta para transformá-la em curva, olhe como ficou o meu com este processo (09).
Para deixar de ver uma específica camada você pode clicar neste botão (10), ela apenas sumirá, mas seu desenho continua no mesmo local, para ver novamente, dê outro clique. Note que nem todas as linhas precisaram virar curvas, pois o traço da imagem permitiu que elas continuassem como retas. Note também que eu fiz uma linha vertical para delimitar o centro da imagem, com ela agora podemos fazer o espelhamento. Para espelhar, selecione todas as linhas e de um Crtl+c (copiar) e em seguida um Crtl+Shft+v (colar no mesmo local), isso duplicará suas linhas, e com elas ainda selecionadas vá em: Modify > Transform > Flip Horizontal. Puxe as linhas selecionadas até que elas encaixem perfeitamente. Veja como ficou o meu já com mais alguns traços (11).
Com os traços principais já produzidos, está na hora de pintarmos o nosso desenho, para ver se a vetorização ficará boa. 1.2.2: Pintando Primeiro feche todas as linhas para que a tinta possa ser usada dentro do nosso desenho. Para pintar um objeto vamos utilizar a ferramenta Paint Bucket Tool (12), eu pintei o meu modelo com a cor #FFCC99, que é um tom aproximado da cor da pele e mudei a cor dos traços de volta para o preto (13).
Como ficou bom o desenho vamos selecioná-lo e coloca-lo em uma nova camada com o nome de corpo, para mover para outra camada utilize o famoso Crtl+x (cortar) e Crtl+v (colar), lembre-se também de salvar sempre o seu projeto, Crtl+s (salvar). Feito tudo isso repetimos o processo com os demais itens: Cabelo, Olhos, Nariz, Boca, Camisa, Braços. E para um melhor funcionamento colocando cada um em sua respectiva camada. De uma olhada como ficou o meu com os itens separados em camadas (14), lembre-se de separar os itens e ver como é melhor ordenar as camadas pra que nenhum item fique na frente do outro.
1.2.3: Luz e sombra Mas têm alguma coisa faltando nesse desenho, ta meio esquisito, muito chapado. Está faltando luz e sombra para dar volume ao desenho. Para fazer um bom volume é necessário ter um pouco de noção de luz e sombra, temos que imaginar de que lado está vindo a luz e então começarmos a desenhar. No meu irei fazer a luz vir da esquerda superior, e logicamente a sombra vai ficar a direita inferior. Para se fazer a luz e sombra é só pegar um tom mais claro e um mais escuro da mesma cor e aplicar nos locais onde elas se encontram. No desenho faça os limites de luz e sombra com linhas, pinte e depois retire as linhas (15, 16, 17).
Vá fazendo com os demais itens, respeitando a forma e a direção da luz. O branco eu geralmente não faço luz, por ser a cor mais clara, invertidamente também não uso sombra na cor preta, mas você pode optar por fazer 2 tons de sombra ou 2 de luz nessas cores. Mas se você não quiser tanto trabalho opte apenas por usar 2 tons de cor em cada item ao invés de 3, ou se quiser mais faça um tom a mais, tudo fica a seu critério. Pronto, agora seu desenho já deve estar completo, veja como ficou o meu (18).
Terminamos assim a primeira parte que é a da vetorização, na próxima veremos como fazer para mudarmos a cor dos nosso itens. Abraços e até lá.