Vinheta: Getro.Com.Br
Nada que uma caricatura, uma fonte em particular, uma foto de cortina em alta resolução – animada com a Puppet tool (particularmente convincente como tecido, na minha humilde opinião) – e um pouco de música não resolvam. Parceria com o Getro.Com.Br para desenvolvimento de uma vinheta de introdução para trailers legendados. Não há nada como um resultado em Full HD…
Tipografia: No Mundo Há Muitas Armadilhas
Desenvolvido num prazo curto (cerca de 25 dias entre o surgimento da idéia e a data de apresentação), mas ainda assim com calma e cuidado – estimo que umas 60 a 80 horas para todo o trabalho gráfico -, essa animação foi uma das experiências mais recompensadoras nas quais já me envolvi. Entre os destaques estão o áudio original, bastante trabalho em equipe, algumas noções avançadas de vetorização e vários surtos criativos. O resultado é esse que vocês assistem logo abaixo.
Poema de Ferreira Gullar: No Mundo Há Muitas Armadilhas. Animação produzida para o recital Armadilhas e Refúgios, apresentado em 13/12/2009, na Saraiva Megastore – Salvador Shopping, em Salvador/BA
Vetores e Animação por Tito Ferradans (TFerradans FX)
Gravação e Tratamento de Áudio por Diego Orge (Sétima Filmes e Produções)
Vozes por Cia Subversiva de Dizedores de Versos
 |
 |
 |
Tipografando: Parte 03
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 é 1024×768px). 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!
Tipografando: Parte 02
Ok, superada a primeira barreira, passemos para o começo da parte digital do processo. Para tal, é necessário o Adobe Illustrator e uma porção de fontes.
As fontes não devem ser grandes problemas. Existem dezenas de sites com fontes para download grátis. Recomendo o Dafont, que é bem simplezinho de navegar e encontrar coisas interessantes. Existem quatro famílias básicas de fontes: Manuscritas, Estilo Antigo, Sem Serifas e Decorativas. Citarei alguns nomes como exemplo, com links para o Dafont, mostrando fontes de cada família, com algumas de suas características.
Manuscritas – Calligraphy/Handwriting
A categoria de tipos manuscritos inclui todos os tipos que parecem ter sido escritos à mão, com uma caneta tinteiro, com um pincel ou, as vezes, com um lápis ou caneta profissional. Essa categoria poderia facilmente ser segmentada, formando manuscritos que se conectam, manuscritos que não se conectam, manuscritos que parecem impressos por processo manual, manuscritos que imitam estilos caligráficos tradicionais, etc… Mas para atingirmos nossos propósitos, colocaremos todos em um único pacote.
Estilo Antigo – Sanford/Thryromanes
Os tipos criados no estilo antigo baseiam-se na escrita manual dos escribas, que trabalhavam com uma pena na mão. Os estilos antigos sempre têm serifas e as serifas das letras em caixa-baixa sempre têm um ângulo (o da caneta). Por isso, todos os traços curvos das letras passam de grossos para finos, o que chamamos tecnicamente de transição “grosso-fino”. Esse contraste no traço é relativamente moderado, o que significa que ele passa de levemente fino a levemente mais grosso. Se você desenhar uma linha nas partes mais finas dos traços curvos, essa linha será diagonal. Isso se chama ênfase. Um tipo em estilo antigo tem uma ênfase diagonal.
Sem Serifas – Sans Serif
Em francês (e em inglês também), esse estilo de tipo é chamando Sans Serif, o que significa “sem serifa”. Portanto, as fontes sem serifa não possuem serifas nos finais de seus traços. A idéia de remover as serifas foi um progresso mais tardio na evolução da tipologia e não obteve muito sucesso até o início do século XX. Os tipos sem serifa são quase sempre de peso igual, o que significa que – virtualmente – não há uma transição grosso-fino visível nos traços, as letras têm sempre a mesma espessura.
Decorativas – Decorative/Old School
Os tipos decorativos são fáceis de identificar: se a simples idéia de ler um livro inteiro em um determinado tipo o fizer enlouquecer, é provável que você possa incluí-lo no nosso “pacote” de tipos decorativos. Eles são ótimos, engraçados, diferentes, fáceis de usar, costumam ser baratos e sempre existe uma fonte para cada capricho que você queira expressar. É lógico: por serem tão diferenciados, seu uso deve ser limitado.
O Estilo Antigo, por sua vez, modificou-se com o tempo (sem deixar de existir, contudo), gerando os tipos de Serifas Grossas e tipos Modernos.
Moderno – Justus/Lousitania
Com o progresso da história, a estrutura do tipo mudou. O tipo tem suas próprias tendências e também sucumbe ao estilo de vida e às mudanças culturais, assim como os penteados, a moda, a arquitetura ou a linguagem. Em 1700, o aperfeiçoamento do papel, as técnicas mais sofisticadas de impressão e um aumento genérico dos dispositivos mecânicos foram fatores que fizeram com que o tipo também se tornasse mais mecânico. Novos tipos já não seguem mais o estilo da escrita com a pena. Os tipos modernos têm serifas, mas agora elas são horizontais e não inclinadas, e são muito finas. Como uma ponte de aço, a estrutura é forte, com uma transição grosso-fino radical – ou contraste nos traços. Não há evidências de inclinação da pena; a ênfase é perfeitamente vertical. Os tipos modernos têm uma estética fria e elegante.
Serifa Grossa – Street Corner Slab/Alexandria
Um novo conceito surgiu junto com a Revolução Industrial: o da propaganda. Primeiramente, os profissionais selecionavam os tipos modernos e faziam que os pontos grossos ficassem ainda mais espessos. Você já deve ter visto pôsteres com tipos assim: à distância, tudo que se pode ver são linhas verticais. A solução óbvia para esse problema foi fazer que a letra inteira ficasse mais gorssa. As letras com serifa grossa têm pouca ou nenhuma transição grosso-fino. Também podem atender pelo nome de Clarendon ou tipos Egípcios.
Adaptado de: WILLIAMS, Robin. Design Para Quem Não É Designer, São Paulo: Callis, 2008.
Você não é obrigado a usar uma única fonte em todo o seu texto. Use quantas quiser, mas mantenha uma identidade visual no conjunto!
Passemos então às especificidades do Illustrator. Por que o Illustrator? Na teoria, poderia ser qualquer programa que trabalhasse com vetores, mas o fato de ambos (Illustrator e After Effects) serem da Adobe, há uma forte ligação entre eles. Facilmente você exporta coisas do primeiro para o segundo, como faremos, um pouco mais adiante. E por que vetores? Não é algo muito difundido por aí, mas vetores são expressões matemáticas. Imagens vetoriais, fontes e coisas do gênero não sofrem distorções ao serem redimensionados. Isso é bem importante, considerando que na animação você vai precisar de movimentos diferenciados, que se feitos com bitmaps (imagens normais, formadas por pixels), apresentariam perdas de qualidade absurdas.
Ah, e lembre-se de escrever cada palavra separadamente (camadas diferentes), pois isso facilitará muito sua vida, alguns passos à frente. No meu caso, fiz uma escolha bem estúpida e criei a base vetorial numa única imagem. Isso atrapalha pois você passa a lidar com uma composition muito grande no After. O ideal é dividir a tipografia em alguns momentos distintos, para animar composições diferentes e juntar tudo no fim.
Quando terminar de esquematizar todo o texto, selecione todas as palavras e clique numa delas com o botão direito do mouse. Uma das opções diz “Create Outlines”, como ilustra a imagem ao lado. Isso transformará as fontes em curvas, dispensando o uso das mesmas por parte do After Effects e facilitando sua vida no aspecto de que você não precisará delas em outro computador, para abrir seu arquivo adequadamente.
Outra opção, ainda mais simples para transformar tudo em curvas é ir no menu “Type” e depois em “Create Outlines”. Isso afetará todo e qualquer texto do documento.
Cada palavra agora é um grupo de curvas. Você pode mantê-las agrupadas, para facilitar sua vida, ou desagrupá-las (Ctrl+Shift+G) caso tenha planos especiais. Tudo isso, todo o seu esquema está contido numa única camada. Interessante, não? Só que não é funcional. Você precisa que cada elemento (palavra ou imagem) seja uma camada, então lhes explicarei como conseguir isso.
Na janelinha de Layers (caso ela não apareça na sua tela, pressione F7 e ela certamente dará o ar da graça), abra sua camada, revelando todas as curvas e grupos contidos nela. Legal. Agora, clique na listinha de opções que aparece no canto superior direito e vá até “Release to Layers (Sequence)”. Essa é a chave da transferência Illustrator-After Effects, pois agora você tem cada elemento da tipografia numa camada diferente, que também será uma camada diferente no After, permitindo animações individuais. Depois de liberá-las, selecione todas, exceto a primeira (que se desdobrou nas outras), arrastando-as para cima dela. Agora, a cada original vai ficar vazia, e todos os elementos ficarão em suas respectivas camadas.
Mais uma vez, mostrando exemplos, para download as fontes utilizadas e os projetos de Illustrator, tanto o final esquemático como o final de transferência para o After, que são levemente diferentes.
Já deve ser de conhecimento geral mas, para instalar uma fonte, você copia os arquivos (*.ttf) que estão dentro do ZIP para a pasta Windows/Fonts.
Para adiantar seu trabalho, pense na cor do fundo, ou escolha uma textura de alta resolução para acompanhar os movimentos. Ambos os casos serão enfatizados mais à frente, na parte de After Effects. No próximo passo, falaremos sobre como sincronizar as palavras, além de um breve detalhamento de como criar Clipping Masks (utilizadas nas bandeiras chinesa e americana) no Illustrator, além de inserir imagens/outros elementos além das palavras no seu projeto vetorial – como o homem decapitado ou as manchas de sangue – usando o Live Trace.
Tipografando: Parte 01
Como prometido, estou agora começando uma série de tutoriais sobre a criação de uma animação tipográfica, do rascunho à finalização. Acredito que o método que explicarei não é o ideal, nem perfeito em todas as situações, mas, funciona relativamente bem.
Você vai precisar de paciência, um tanto de criatividade, papéis, uma faixa de som, Illustrator, After Effects e uma meia dúzia de fontes. “Papéis?” – alguns devem se perguntar. Isso mesmo, papéis. O jeito mais fácil de estruturar uma visão geral do vídeo é numa folha de papel, rabiscando setas, instruções, esquemas de cores (tanto para os tipos como para o background), zooms e mais movimentos. Lógico, na hora de passar pro computador, nem tudo que você pensou será exatamente igual, e muita coisa pode melhorar. Pra ilustrar a explicação, apresento o exemplo do rascunho da tipografia de Kill Bill, do post anterior.
Vale ressaltar que o som é mais da metade do impacto da animação. Com uma fala fraca, seu resultado será, indiscutivelmente, fraco. O mais comum é usar linhas de filmes, ou mesmo músicas. Fique atento, pois a qualquer momento, uma dessas pode pular no seu ouvido! Não tenha medo de fazer uma animação com uma fala que alguém já utilizou. Muitas das linhas mais famosas já foram utilizadas. O interessante é tentar superar todos os anteriores! Hahaha! Eu, particularmente, gosto de diálogos ou falas de Tarantino e Guy Ritchie, pois puxam um ritmo mais acelerado e agressivo, que quando animado em texto, prega os olhos do público na tela para não perder uma palavra sequer. Antes de QUALQUER coisa da animação, encontre seu áudio e ouça tantas vezes até saber repeti-lo de memória! Depois disso, comece a esquematizar as bases.
No próximo post, dicas e exemplos para montar sua estrutura no Illustrator além de informações sobre fontes.
Typography: Kill Bill
Trabalho recente. Mais de 60 horas de animação, investidas em After Effects combinado com Illustrator. Colocarei por aqui – futuramente – os arquivos originais, juntamente com um extenso tutorial de como fazer animações tipográficas e lidar com tantos Null Objects no After.
Baseado na fala de O-Ren Ishii (Lucy Liu) em Kill Bill – Vol.1, num monólogo que se sucede após a decapitação de um chefe da yakuza (máfia japonesa). Incrementei a animação com alguns efeitos sonoros e trechos de texto em japonês.
Agradecimentos especiais a:
Leonardo Campos Barreto (texto em japonês)
Felipe Sampaio (empréstimo de PC)
Diego Orge (efeitos sonoros adicionais e mixagem de áudio)
Explicando os Downloads
O blog tem também como objetivo popularizar conhecimentos e idéias, sendo isso possível em várias situações graças aos arquivos originais, contendo uma aplicação prática bem sucedida daquilo que está definido em palavras no post. Para organizar tudo e criar uma simbologia simples, apresento, logo abaixo, o formato no qual os downloads serão dispostos nas postagens.
A listinha de links é bem razoável, portanto, não acho que vou precisar acrescentar novos símbolos a ela nos próximos tempos.
Cada um tem seu ícone, lembrando a função por ele desempenhada. Os links, na maioria das vezes, vão redirecionar para o 4Shared. Sei que não é uma solução muito elegante, mas meu espaço de armazenamento de arquivos é bem limitado no host do site, então vai funcionar assim até as coisas melhorarem.
