Illustrator Tips – Preparing Assets for Animation
Neste post veremos como podemos usar o Adobe Illustrator para Desenvolvimento de Personagens 2-d que podem ser exportados para um programa como o After Effects para serem trazidos para dicas de ilustradores profissionais!
Um vídeo onde demonstramos isso é o Shippo video. Antes de um animador poder fazer seu trabalho eles precisam de algo para trabalhar, então nós construímos os recursos no Illustrator.
Um dos aspectos mais importantes do desenvolvimento de personagens para animação é levar em conta que trabalhamos em camadas e que cada coisa que animamos está em sua própria camada individual, em termos simples para um personagem andar ele precisa de duas pernas, essas duas pernas podem ser traduzidas em termos de ilustrador como duas camadas separadas, então quando criamos essas pernas temos que ser muito específicos em nomear essas camadas à ESQUERDA e à DIREITA porque temos uma perna esquerda e uma direita. É importante para nós criarmos uma estrutura de camadas coerente para que quando passarmos nosso trabalho para um animador ou alguém que tenha experiência de trabalho com Adobe After Effects saiba exatamente o que fazer com eles, e eles possam trabalhar com mais eficiência.
Aqui estão os passos que você tem que dar ao desenhar seus personagens para animação.
O personagem completo no Illustrator como visto no painel de camadas é composto por elementos individuais todos criados no programa e depois posicionados cuidadosamente para que o personagem tenha forma,
A ordem das camadas é muito importante, pois como elas são ordenadas irá afetar a forma como o personagem é visto. Por exemplo, para que os olhos sejam vistos eles têm que estar em uma camada que está acima da cabeça. Assim, olhando para a imagem acima das camadas superiores estão os olhos e a boca, pois eles são características chave que devem ser animadas. Os braços e pés foram criados em camadas separadas e são nomeados à esquerda e à direita para criar alguma distinção entre eles.
Criar as partes do corpo e nomeá-las.
A cabeça e o cabelo podem ser fundidos para se tornarem uma camada .
No painel de camadas você pode chamar esta HEAD.
Olhos &Boca
Os olhos são dois círculos simples criados com a ferramenta elipse
Neste caso criamos um olho após o outro nomeando-lhes olho direito e olho esquerdo, os olhos não devem ser fundidos para formar uma camada eles devem ser separados.
Após ter criado os olhos você deve nomeá-los direito e esquerdo. Se você criou olhos de caracteres mais complexos com córneas, você também usaria a mesma referência sendo esquerda e direita.
A boca do personagem é bem simples. Para criar a boca devemos usar a ferramenta da caneta para criar uma curva. A curva pode parecer um sorriso ou uma cenoura, dependendo da direção em que está indo.
Se você está familiarizado com a ferramenta caneta no Adobe Illustrator, você saberia que desenhar curvas é uma questão de segurar a tecla do mouse para obter a curva desejada e então traçar um ponto de onde você quer que a curva termine.
Fazer uma curva é muito simples. Acima temos dois pontos A e B a curva será uma linha que une o ponto A e B.
Selecione sua ferramenta caneta no Illustrator.
Com a ferramenta caneta no ponto A clique e mova o mouse em uma linha reta para o ponto B. Uma vez formada a linha reta clique e então segure o mouse clique e mova o mouse na direção desejada que você quer que a curva vá neste caso movendo a curva para baixo dará um sorriso e movendo o mouse na direção ascendente criará uma triste carranca. O resultado final deve ser parecido com este. Não se esqueça de desligar as opções de preenchimento e dar um peso ao traço, de preferência um peso pesado de 2-4pts, dependendo da espessura da linha.
O resultado final deve ser algo parecido com isto.
Aqui está uma boca que fiz anteriormente que vai funcionar bem com caracteres.
Quando combinamos a boca e os olhos obtemos algo parecido com isto.
Todos estes estão em camadas individuais separadas e serão posicionados acima da camada da cabeça.
As camadas são indicadas pelas cores
Camada azul – olho esquerdo
Camada verde – olho direito
Camada roxa – cabeça e cabelo (CABEÇA)
Camada vermelha – boca
Se você olhar para o painel de camadas, temos cada elemento do personagem em uma camada representada por uma cor. Como mencionado acima a boca
sits em uma camada vermelha, você deve ver a linha colorida ao lado da sua camada e na extrema direita da camada você verá um quadrado colorido… Por baixo da boca o olho direito assenta numa camada verde, o olho esquerdo numa camada azul escura e a cabeça que inclui o cabelo assenta também numa camada roxa.
As camadas podem ser reordenadas a qualquer altura, por isso se as suas camadas estiverem confusas não se preocupe, lembre-se apenas de organizar as camadas à medida que for avançando, vai facilitar a sua vida.
A cabeça deve ficar assim.
Esta é uma composição de camadas, que foram ordenadas de forma a fazer uma cara de personagem. Olhando para a imagem é simples dizer que a camada inferior é a cabeça e os olhos e a boca estão acima da cabeça.
O resto do personagem é projetado sobre os mesmos princípios da cabeça.
Temos dois braços, pernas e dois pés. E o corpo. Se estivéssemos criando movimentos corporais mais complexos então precisaríamos criar pivôs que atuariam como articulações para os braços
seriam cotovelos e para as pernas estes seriam joelhos. Se alguma vez quisesse que o seu personagem tivesse movimentos humanos naturais, como caminhar, então é aqui que eles seriam necessários.
Se os braços se movessem separadamente, então eles teriam que ser colocados em camadas separadas e dados os nomes esquerda e direita.
De acordo com o painel de camadas o braço direito está em uma camada cian e o braço esquerdo está em um braço cinza.
O corpo é uma camiseta branca/cinza. ela é representada por uma marca amarela no painel de camadas. Quando ele selecionou no
artwork ele terá marcas amarelas de seleção.
Finalmente devemos ter algo assim.
As pernas neste personagem não se movem mas como mencionado acima, se fossemos criar caminhadas eles precisariam de pivôs para os joelhos .
Os pés no entanto são em camadas à esquerda e à direita.
Olhando para as composições das camadas pode ver que todas as camadas são codificadas por cores e ordenadas para que não colidam.
Aqui estão todas as camadas neste personagem. Você pode ver que certas camadas foram nomeadas à direita e à esquerda, estes são os olhos, braços e pés.
Quando se trata de animar este personagem devido à forma como o arquivo foi organizado, seria muito coerente para o animador sobre quais elementos podem ser animados. Principalmente apesar das pernas não terem sido desenhadas com movimento em mente, há muitos efeitos para fazer esta animação funcionar.