ESSE POST VEIO DIRETO DO TÚNEL DO TEMPO
Escrito em 01 de Dezembro de 2009.
Achei vários outros perdidos pelo mundo e vou colocá-los aqui semanalmente. Acho que vai render uns dois meses de brincadeira. Sempre colocarei as datas originais do texto.
Tenho que admitir que muito da inspiração e informação para fazer minha primeira Tipografia vieram desse post em particular do The Crooked Gremlins, indicado pelo, sempre presente, Paul, pouco mais de um ano atrás. Pra falar bem a verdade, esse foi o ÚNICO tutorial de tipografia que eu já vi por aí.
Minha grande discordância desse tutorial é no que diz respeito à sincronização do áudio. Uso um método particularmente arcaico e trabalhoso, mas garantidamente preciso. Num editor de áudio qualquer, anoto com precisão o tempo de CADA PALAVRA, ouvindo repetidas vezes o arquivo de som, pausando e repetindo. Depois, uso as anotções para apenas sincronizar com o aparecimento das palavras no After Effects. Isso acelera o processo de montagem, pois não é necessário ouvir milhares de vezes o mesmo trecho até encaixar certinho a imagem com o som, já no After, que é naturalmente um programa pesado. Para facilitar o entendimento do processo, coloco um arquivo exemplo que é o resultado das anotações.
Passemos para uma nova etapa: importar sua composição do Illustrator para o After Effects. Antes de qualquer coisa, verifique se todos os seus elementos estão contidos no Artboard. O Artboard é aquele contorno original onde você começou a fazer sua estrutura (se não me engano, o padrão é 1024x768px). Se você conseguir se manter dentro do Artboard sem ter elementos microscópicos, parabéns, você é um gênio. Se você é um humano normal, é mais fácil editar as dimensões do dito cujo. Clique em “Document Setup”, na segunda barra de navegação, em cima, e em seguida “Edit Artboards” na janela que se abre. Com o mouse, redimensione o quadro até que toda a sua tipografia esteja contida dentro dele. Salve o arquivo e vamos para o After.
Ainda não vou disponibilizar o projeto de After pra download. Só no próximo passo, então vamos sem stress. Iremos agora importar seu arquivo. (Ctrl+I ou “File”>”Import”>”File”). Encontre seu arquivo de Illustrator e o selecione, SEM IMPORTÁ-LO ainda. No menu dropdown, selecione “Composition – Cropped Layers” e mande bala. Dependendo do tamanho do seu projeto, isso pode levar alguns vários segundos.
Abra a composição que acabou de ser criada. Ela é bem grande e provavelmente, difícil de ler, imaginando que seu texto é preto. Ela está com o background preto, por padrão, então, podemos modificá-lo de acordo com a necessidade (Ctrl+Shift+B ou “Composition”>”Background Color”). Não se preocupe, não é ESSA a composição que você vai mover de um lado para o outro. Isso será feito com uma “simulação” de câmera. Nessa composição, entretanto é que você vai fazer os movimentos de cada palavra e objeto, organizados nas inúmeras camadas.
No próximo passo, vou explicar como dividir o trabalho, para as coisas ficarem menos confusas e mais ágeis. Antes disso, entretanto, é preciso marcar DUAS opções em todas as camadas. Motion Blur e Continuoulsy Rasterize (os dois quadrados vermelhos na imagem abaixo). A primeira opção a ser marcada dispensa explicações. A segunda é exclusiva para vetores. Como você vai modificar as dimensões dessa camada arbitrariamente ao longo da animação, se esse quadrinho não estiver ativado, seu resultado vai ficar dividido em pixels, e não funcionará adequadamente como vetor, reescalável para qualquer tamanho. Para marcar isso em todas as camadas de uma vez só, simplesmente ative na primeira, não solte o botão do mouse e arraste-o para baixo, ativando todas as outras. Ah, o Motion Blur só vai ser visível (e devorador de memória, pois é um efeito muito pesado) se você marcar a opção indicada pelo quadradinho azul na imagem abaixo.
A última parte de After desse passo é criar o vignette. Essas bordinhas mais escuras no canto da imagem final. Para tal resultado, alguns métodos são possíveis e demonstrarei dois deles. Outros vários existem, mas abordá-los ia extender demais o post (que já é grande). Crie uma nova composition (Ctrl+N), que será de fato a utilizada na animação, e um sólido (Ctrl+Y). Defina a cor do sólido de acordo com a cor que você deseja no background da animação.
OPÇÃO 1: Exposure
Por cima de seu sólido, crie uma Adjustment Layer (Ctrl+Alt+Y) e aplique sobre ela o efeito “Exposure”. Em “Effect Controls”, vá diminuindo os valores de Exposure, até que algum lhe agrade para ser a parte mais escura das bordas.
Então, crie uma máscara elíptica nessa camada. Para selecionar outras formas de máscaras, simplesmente segure o botão do mouse enquanto clica na máscara, no menu superior. Depois de selecionar a elipse na lista, clique duas vezes sobre o botão das máscaras e isso criará a maior elipse possível de caber na sua camada. Inverta a máscara, para que as bordas fiquem escuras e o miolo, claro. Já é um visual interessante, mas muito definido. Queremos algo mais suave, macio, agradável.
Para amaciar nossa máscara, vamos mexer no “Mask Feather”, esse mesmo que aparece na imagem acima. Vá testando valores ou simplesmente clique e arraste o mouse sobre os números, aumentando ou diminuindo de acordo com seus movimentos. Dou logo a dica que 250px de feathering oferecem um excelente resultado. Pronto, terminado o primeiro método.
OPÇÃO 2: Ramp
Aplique o efeito “Ramp” sobre o sólido criado. Nas configurações, escolha as cores de seu agrado, sendo normalmente uma das cores apenas a versão escura da primeira. No menu de “Ramp Shape”, selecione “Radial Ramp”, para que seu gradiente fique num formato arredondado.
Clique nas mirazinhas de “Start of Ramp” e “End of Ramp” para definir os (óbvios) início e fim do gradiente. Para uma transição suave, recomendo posições mais ou menos parecidas com essas, sendo o Start no meio da composição e o End um pouco além de suas margens.
Vale ressaltar que prefiro o primeiro método (Exposure), pois acredito que os resultados são mais elegantes e customizáveis. Um pequeno detalhe é: na animação de Kill Bill, não utilizei nenhum desses dois métodos. Vocês verão no projeto de After. Foi algo mais arcaico.
Como alternativa, seu background pode não ser uma cor lisa, e sim uma textura. Recomenda-se a utilização de uma imagem em alta resolução Você pode conseguir diversas excelentes em CGTextures. É só se cadastrar e você terá uma cota diária de 15mb para baixar em texturas das bibliotecas quase infinitas. Lembrando que, se você optar por uma textura no background, é ideal associá-la ao Null Object que controlará o movimento geral da câmera, a ser explicado no próximo passo, para que ela se mova junto com a câmera, não ficando estática enquanto o texto se move. Ah, e você ainda pode usar o vignette, se quiser!
Por fim, nosso bônus de Illustrator. Breves dicas de como utilizar o Live Trace e Live Paint para adicionar imagens às tipografias.
Para explicar as duas técnicas, vamos usar como modelo essa imagem de silhueta. Salve-a no seu computador, importando-a para o Illustrator em seguida. Repare que é uma imagem simples, com apenas uma cor (desconsidere o branco, pois ele será eliminado) e uma resolução alta. Quanto maior a resolução, melhores serão os resultados do Live Trace.
Selecione a imagem, cilcando sobre ela, e o menu superior irá mudar. Surge a opção do Live Trace. Clique sobre ele e a primeira parte do processo já está concluída. No caso de imagens mais detalhadas, ou menores, ou com mais cores, recomendo dar uma olhada no menu ao lado do Live Trace, que oferece outras opções de vetorização.
Agora, ao Live Paint, que transformará seu “quadrado vetorial” numa imagem completamente editável e, mais importante, eliminará o fundo branco. Na mesma barra onde havia o Live Trace, com a imagem selecionada, agora há o Live Paint. Clique sobre ele. Surgirá um contorno detalhado ao redor do homem e um mais obtuso, ao redor do quadrado original da imagem. Este é o fundo branco. Com a Direct Selection Tool (A), clique sobre o contorno branco, reto. Opa, ele foi selecionado separadamente. Isso não é uma maravilha? Agora é só deletá-lo, e você terá sua silhueta totalmente vetorial, livre para ser editada, redimensionada ou o que mais passar por sua cabeça! Essa técnica funciona particularmente bem com brushes em alta resolução no Photoshop, salvos em PNG de fundo transparente. Elimina etapas no processo.
Preparem-se para a próxima, e última, etapa. É a mais confusa de todas e trata de tudo que é relativo à movimentação das palavras e da câmera!