Day-to-Day

Tipografando – Parte 2

August 4, 2013

ESSE POST VEIO DIRETO DO TÚNEL DO TEMPO
Escrito em 21 de Novembro 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.


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.

ManuscritasCalligraphy/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 AntigoSanford/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 SerifasSans 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.

DecorativasDecorative/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.

ModernoJustus/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 GrossaStreet 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.

Typo – Kill Bill Esquemática
Typo – Kill Bill AE Ready
Haettenschweiler
VKB KonQa

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.