A animação Tipográfica nos Motion Graphics / Typography animation in Motion Graphics

Universidade do Minho
Instituto de Ciências Sociais
Departamento de Ciências da Comunicação

Professor Leonardo Pereira
Ano Curricular - 2010 | 2011 ATELIER AUDIOVISUAL E MULTIMÉDIA I - Multimédia
Curso de Ciências da Comunicação - 2º Ano | 2º Semestre

Aula 06

1. A ANIMAÇÃO TIPOGRÁFICA NOS MOTION GRAPHICS
2. PRINCÍPIOS BÁSICOS DE ANIMAÇÃO E EXPRESSÃO
3. NOVOS RECURSOS TÉCNICOS DE AFTER EFFECTS
4. EXERCÍCIO DE ANIMAÇÃO TIPOGRÁFICA

Bibliografia aconselhada:
• Ollie Johnston, Frank Thomas, The Illusion of Life: Disney Animation, Disney Editions, 1986
• Jon Krasner. Motion Graphic Design. Applied History and aesthetics, 2009
• Elif Ayiter, The History of Visual Communication, 2007, http://www.citrinitas.com/history_of_viscom/index.html

Universidade do Minho Módulo Multimédia
Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011

01
A Animação Tipográfica nos Motion Graphics

leonardpeartree@gmail.com


Sobre a A Tipografia foi, desde a génese inicial dos Motion Graphics (com os primeiros genéricos
cinematográficos de Saul Bass), um dos elementos pictóricos integrantes da prática dos
Tipografia Motion Graphics.
nos Motion
Graphics

• Visualizar o genérico de “Vertigo“ em:
http://www.youtube.com/watch?v=pz46qS38OgM&feature=related



Funções da
Tipografia
nos Motion
Graphics

No contexto dos Motion Graphics, a tipografia pode assumir várias funções, ou seja,
funções expressivas, funções comunicacionais e funções decorativas, como se pode ver
nesta imagem.

Com a introdução do movimento no tempo e no espaço estas funções da tipografia, que
já existiam na tipografia empregue no contexto do Design gráfico estático, ganham um
potencial estético, comunicacional e expressivo acrescido.



Tipos de E como é que a Tipografia pode ganhar esse potencial comunicacional acrescido?
Tipografia
nos Motion Antes de mais convém esclarecer que há dois tipos de abordagem possível ao uso da
tipografia em Motion Graphics:
Graphics
• O USO DE TIPOGRAFIA NÃO ICÓNICA;

• O USO DE TIPOGRAFIA ICÓNICA.

Mas o que são exactamente estas abordagens ao uso de tipografia?

Vamos ver! >>



01.1
Tipográfica não icónica



Tipografia A tipografia não icónica é tipografia ou texto que, tanto na sua configuração visual
como na animação que possa ter ao surgir ou aparecer numa sequência de Motion
Não Icónica Graphics, não tem outra função que não seja a de ser lida como um texto.

A sua função é meramente informativa e geralmente não comunica com expressividade.

• Visualizar separador de continuidade da RTP em:
http://www.youtube.com/watch?v=pTRaotMjk8k



Tipografia
Não Icónica

QUANDO ESCREVEMOS UM TEXTO NO WORD, OU QUANDO
ESCREVEMOS UM MAIL NO GMAIL ESTAMOS A UTILIZAR
TIPOGRAFIA NÃO ICÓNICA!

Vejamos então o que é a tipografia icónica!



01.2
Tipográfica icónica



Tipografia A tipografia icónica é tipografia que, quer pela manipulação da sua configuração visual,
quer pela animação que lhe é dada, ilustra e comunica o conceito ou significado
Icónica da palavra ou frase que também lemos na palavra escrita.

MAS O QUE QUER ISTO DIZER?

Vamos ver exemplos simples do que acabou de ser dito:

• TIPOGRAFIA QUE ADQUIRE ICONICIDADE PELA MANIPULAÇÃO
DAS SUAS FORMAS;

• TIPOGRAFIA QUE ADQUIRE ICONICIDADE PELA FORMA COMO ESTÁ
ANIMADA.



Tipografia 1. Tipografia que adquire iconicidade pela manipulação da sua
configuração visual e formal.
Icónica

• Temos o caso de palavras que são manipuladas nas suas
caracaterísticas características formais e visuais para ilustrar o objecto, acção
ou conceito que as mesmas palavras também significam;



Icónica

• Um conjunto de palavras que são compostas em conjunto para ilustrar o objecto,
acção ou conceito a que as palavras se referem;



Icónica

• Grupos de letras que formam uma imagem;



Tipografia 2. Tipografia que adquire iconicidade pela forma como está animada ou pelos
movimentos que as suas animações descrevem.
Icónica

• A animação dada à tipografia pode ilustrar a acção, comportamento ou o objecto a que
a palavra se refere.



Tipografia Mas vamos então ver alguns exemplos de Tipografia Icónica e Tipografia Não
Icónica aplicadas aos Motion Graphics:
nos Motion
Graphics

• Tipografia Não Icónica em Motion Graphics
http://www.youtube.com/watch?v=gGQRtf3_gTI
http://www.youtube.com/watch?v=lK0A4ybqcAQ&feature=related
http://www.youtube.com/watch?v=R0rduVdktMA&feature=related
http://www.youtube.com/watch?v=KaxwewQKlsE&feature=related
http://www.youtube.com/watch?v=VAwsvubnFUI&feature=related

• Tipografia Icónica em Motion Graphics
http://www.youtube.com/watch?v=Gj13ugh5FYw
http://www.youtube.com/watch?v=j0CavqA2boQ
http://www.youtube.com/watch?v=rIDdx7NPJgo&feature=related
http://www.youtube.com/watch?v=6mnvvVi4HaI&feature=related
http://www.youtube.com/watch?v=xAuQmJzt_q0
http://www.youtube.com/watch?v=_2PONjkYMPc&playnext=1&list=PL9FAF8D7D12D5997F
http://www.youtube.com/watch?v=mZzs5Lz6uY8&feature=player_embedded#
http://www.youtube.com/watch?v=IEVvEsEbl5I
http://www.youtube.com/watch?v=UbwXnFbCTDA&feature=related



Tipografia
nos Motion
Graphics

No entanto, para além da possível iconicidade da Tipografia, a animação tipográfica
pode beneficiar de alguns princípios da animação tradicional, que podem e devem ser
transpostos para o contextos dos Motion Graphics, e com os quais o nosso trabalho
pode ganhar em expressividade e significação com o movimento.

Ou seja,

EXPRESSIVIDADE CINÉTICA E LITERACIA DE MOVIMENTO.

>> Vamos ver que princípios são estes!



02
Alguns princípios básicos de Animação e Expressão
a partir de “Motion Graphic Design. Applied History and aesthetics” de Jon Krasner. (pp.144-159)

1. Squash and stretch
2. Anticipation
3. Follow Through and Overlapping Action
4. Arcs
5. Timing
6. Exaggeration
7. Acceleration & decelaration _ Ease in e Ease out



Squash and
Stretch
(Comprimir e esticar)

Esta técnica dá a ilusão de peso e volume ao personagem ou elemento gráfico em
movimento. É usada em todas as formas de animação de personagens e pode ser
aplicada, por exemplo, numa letra que saltita.

Além da ilusão de peso e volume, a técnica confere acima de tudo uma sensação
de vida, de elemento vivo, ao personagem ou elemento gráfico, dada a sua não
rigidez.



Anticipation
(antecipação)

Movimentos que preparam a audiência para uma acção que o personagem se prepara
para realizar, tal como começar a correr, saltar ou mudar de expressão. Exemplo: uma
bailarina não salta, sem antes preparar o impulso.

Uma acção para trás acontece sempre que uma acção para a frente vai ser
executada.

• Vamos ver um vídeo explicativo deste princípio de animação (“anticipation”).



Arcs

Todas as acções, com poucas excepções (tal como objectos mecânicos, não-orgânicos),
seguem um arco ou um caminho circular. Especialmente no caso da figura humana e
das acções de animais. Os arcos conferem à animação uma acção mais natural e uma
melhor fluidez de movimento.

Exemplo:
Quando atiramos uma pedra esta não descreve um percurso em linha recta.
Ela descreve um arco por força da gravidade conjugada com a força que lhe imprimimos
ao a atirar.



Follow
Through and
Overlapping
Action

Este princípio está relacionado com o terminar de movimentos. Todos os movimentos
descritos por elementos gráficos ou personagens geram reações depois de terminarem.
Por exemplo, um personagem que esteja a correr em alta velocidade e é parado de
forma brusca tem a massa do seu corpo deslocada levemente para frente pela inércia,
assim como os seus cabelos e roupas. O mesmo acontece com a cauda deste esquilo,
por exemplo.

Ou seja, as coisas não param no imediato e a acção continua para além do momento da
paragem.

• Vamos ver um vídeo explicativo deste princípio (“follow“)



Timinig and Aqui temos um princípio que lida com a relação de tempo em que as acções acontecem
na animação. A mesma acção realizada em velocidades diferentes pode passar a ideia
Motion de sofrimento ou mesmo humor. Tudo depende da intenção narrativa do animador!

Por exemplo:
Se pegarmos num filme de uma jovem a dançar ballet e o colocarmos em slow motion
acompanhado de música clássica e lenta, a cena terá um efeito de seriedade e profundi-
dade dramática muito acentuadas.

Se pegarmos no mesmo filme e o acelerarmos, a nossa leitura e interpretação da cena
será significativamente diferente da primeira. Muito provavelmente a nossa leitura da
história será humorística.



Exaggeration

O exagero não é a distorção completa do desenho, ou acções violentas a todo o
momento. É antes algo que se assemelha mais com o efeito caricatural das caras,
expressões, poses, atitudes e acções. O objectivo é pegar numa acção realista copiada
do real e conferir-lhe alguma acentuação exagerando os arcos do movimento, ou o
squash and strech das expressões.

• Vamos ver um vídeo explicativo deste princípio (“Exaggetation“)



Ease in e Este Princípio de animação está relacionado com o iniciar e terminar do movimento de
um objecto, personagem ou elemento gráfico.
Ease Out
Acceleration Na natureza e mundo real, quando um objecto começa um movimento ou deslocação no
decelaration espaço, este não se desloca imediatamente a uma determinada velocidade. Acelera pro-
gressivamente até que atinja uma determinada velocidade. O mesmo se aplica ao parar
do movimento ou deslocação de um mesmo objecto. Há uma desaceleração progressiva
até à paragem total do objecto.

O mesmo deverá ocorrer na animação de elementos gráficos. O não uso deste princípio
origina movimentos mecânicos e pouco naturais.



03
Novos recursos técnicos em After Effects (Composição)

Texto
1. Criar texto ou uma layer de texto;
2. Aplicar Presets de Texto;

Coordenação de movimento entre objectos
3. Implementar Parenting entre objectos;
4. Criar objectos Nulos;
5. Nesting ou Pre-composing;
6. Criar e aplicar uma Motion Path;
7. Aplicar o Auto-Orient;

Propriedades de movimento de objectos
8. Aplicar o Ease in e ease out (aceleração e desaceleração de movimento);

Máscaras
9. Criar, editar e animar Máscaras.

Cameras Virtuais
10. Criar, editar e animar cameras.



Texto Como se cria texto no After Effects (AE)?

No AE o texto é um tipo de layer de entre as várias disponíveis. Para criar texto, ou se cria uma layer
de texto (1), ou se usa a ferramenta de texto (2) disponível no menu das ferramentas.

(1) Basta clicar na ferramenta de texto e na viewport da composição escrever o texto que se quer.
O AE gera automaticamente um layer no painel das layers ao lado da timeline.

(2) Outra possibilidade é seguir o seguinte caminho:
>> No menu principal escolher “Layer”
>> Depois “New”
>> Por último “Text“

Depois, com o cursor clicar dentro da viewport da
composição, escrever o texto pretendido.

A layer de texto pode ser modificada e animada tal como outra layer qualquer. Para isso basta abrir a layer
(clicar em triangulo antes do nome da layer (1)) e atribuir Keyframes em cada parâmetro disponível. Pode-se
ainda transformar a layer numa layer tridimensional accionando a checkbox por baixo do ícone do cubo (2).

Quando se transforma uma layer numa layer
tridimensional dentro do “Transform“ da layer surgem
1 2
os parâmetros de manipulação tridimensional da layer:



Aplicar Como se aplicam Presets de animação de texto no AE?
O AE disponibiliza uma série de templates de animação já construídos que se designam de Presets.
Presets de Para os aplicar a um texto siga-se o seguinte caminho:
animação de
Texto >> No menu principal ir a “Animation”;
>> Depois seleccionar “Browse Presets“.

Abre-se a aplicação “Bridge“ e uma nova janela:
>> Nesta nova Janela escolher a pasta “Text“;
>> Escolher o tipo de Preset;
>> Escolher o Preset e fazer duplo clique sobre
o Preset escolhido.

Seleccionar o Preset

Depois é só correr o cursor da Timeline para
o ver aplicado. No entanto o Preset pode ser
editado. Para tal basta abrir a layer de texto
Onde editar o Preset e dentro de “Text“ há um parâmetro “Animator“
com subparâmetros passíveis de serem
manipulados. É experimentar!



Parenting O que é o Parenting?
O Parenting é uma técnica que permite criar movimentos entre objectos estabelecendo relações de
hierarquia entre eles. Um objecto “filho”, pela atribuição de uma relação parental a outro, o “pai”, vai
automaticamente seguir, de uma forma relativa, todos os movimentos que forem atribuídos ao “pai”.

Como se aplica no After Effects? São necessárias duas layers! E é preciso linkar uma à outra!

>> Criar uma layer de texto:
• Menu Layer >> New >> Text;
>> Escrever “Texto” com tamanho 100;
>> Centrar o texto no enquadramento;
2
>> Criar uma layer solid:
• Menu Layer >> New >>Solid; 1
>> Modificar o tamanho do sólido da layer:
• Abrir Layer >> Transform >>
Scale = 10% e 60%.
>> Colocar o objecto Solid no centro inferior
do enquadramento (por baixo do texto).
>> Na layer texto, dentro do dropdown “None“
seleccionar “1.Black Solid” (1)
>> Na layer “Black solid” animar a rotação
da layer (2).

Como podem ver a layer de texto, como está
ligada à layer do sólido, segue o movimento
que implementamos na layer “1.Black Solid”.

É este o efeito de uma relação parental!



Null Objects O que é um objecto Nulo?
Um objecto Nulo serve para implementar uma forma particular de Parenting. É um objecto invisível
que não sai no Output final do render, mas que é usado para servir de guia a outro objecto visível que
vai seguir os movimentos implementados no objecto Nulo.

Como se cria um objecto Nulo? Vamos criar uma situação!

>> Criar uma layer de texto:
• Menu Layer >> New >> Text;
>> Escrever “Texto” com tamanho 100;
>> Centrar o texto no enquadramento;
>> Criar uma layer de objecto Nulo: 1
• Menu Layer >> New >> Null object;
>> Centrar o objecto Nulo por baixo
do texto:
>> Na layer texto, dentro do dropdown “None“
seleccionar “Null 1” (1)
>> Na layer “Null 1” animar a rotação
da layer.

Como podem ver a layer de texto, como está
ligada à layer do objecto Nulo, segue o movimento
que implementamos na Layer do objecto Nulo.



Pre-composing O que é o Pre-composing?
O Pre-composing é uma operação que permite que os Motion Designers criem animações em
objectos individuais e depois as agrupem numa única instância, que pode, a partir daí, ser animada
como um todo agrupado em várias das suas propriedades.

É um pouco como termos uma animação composta por vários elementos animados à qual vamos,
depois, adicionar um movimento ou correcção de cor ao todo, por exemplo.

Como se implementa o Pre-composing? Primeiro criamos uma situação!

>> Criar várias layers e animar alguns dos seus
parâmetros como posição e tamanho.
>> Selecionar as várias layers.
Dar um nome à Pré comp.
>> Pré compor as layers selecionadas:
• Menu Layer >> Pre-compose >> Move all...

O After Effects cria assim uma composição nova
que está dentro da composição inicialmente criada. Selecionar esta opção
Agora vamos animar essa composição que agrupa
as animações das layers que tinhamos feito antes.

>> Transformar a layer da nova comp. numa layer 2 1
tridimensional clicando no Ícone do cubo (1).
>> Abrir a Layer da nova composição (2).
>> Animar a rotação da layer no eixo de Y (3).

Como se pode ver o grupo de animações que
3
a layer composta tem ficam com uma segunda
layer de animação em cima (rotação em Y)


Motion Path O que é uma Motion Path?
Uma Motion Path é uma linha invisível que vai descrever um percurso descrito por outra layer

Como se implementa? Vamos criar uma situação! Vamos animar uma mosca a voar!

>> Importar imagem da mosca;
>> Criar composição com PAL DV1 com 4 segundos;
Seg. 04 >> Arrastar o ficheiro da mosca para a Timeline;
>> Criar Keyframes na posição da layer da mosca em
tempos diferentes na timeline:
• Accionar o stopwatch para se criarem Keyframes (1)
Seg. 02
• No segundo 00: Posição X= 104; Y= 444
Seg. 00 • No segundo 03: Posição X= 394; Y= 472
Seg. 03

1 Seg. 00 Seg. 02 Seg. 03 Seg. 04

E correr a agulha da Timeline pela Timeline! Como se pode ver a Mosca realmente segue o Path
desenhado mas a orientação da mosca não segue a Orientação da Path.
Como é que podemos colocar a Mosca a seguir a orientação da Path? Vamos ver!



Orient O que é o Orient to Path?
O Orient to Path permite orientar a orientação de uma layer em função da orientação que a Path do
to Path seu movimento descreve.

Como se implementa? É fácil. Vamos pegar na anterior animação e aplicar este recurso.

>> Selecionar a layer da mosca;
>> Accionar o Auto-Orient (1):
• Menu layer >> Transform >> Auto-Orient

2

>> Na janela Auto-Orientation seleccionar o Orient along Path (2) e clicar em ok;

Há um pequeno cuidado a ser tido. Na primeira Keyframe temos de orientar a
mosca à orientação que a path descreve nesse momento. E aí ela já fica a voar na
direcção certa.

1 leonardpeartree@gmail.com


Ease in e O que é o Ease?
O Ease é a propriedade de aceleração ou desaceleração de movimento de objectos. Quando
Ease Out animamos alguma coisa no After Effects a velocidade do movimento é linear. O Ease quebra com
linearidade da velocidade da animação.

Como se implementa? É fácil. Esta propriedade não se aplica aos objectos ou layers em si mas sim às
frames que contém o movimento descrito pelas layers.

>> Começamos por seleccionar as duas Keyframes de uma animação na Timeline.
>> Depois clica-se em cima de uma das Keyframes seleccionadas com o botão do lado direito do rato
e aplica-se o seguinte caminho:
• Keyframe assistant >> Easy ease, ou ainda, individualmente, Easy Ease in e Easy Ease Out.

Conforme a seguinte imagem:

E pronto. As Keyframes ficam com outra aparência e o objecto passa a ter um movimento mais fluido.
Acelera e desacelera!


Máscaras O que é uma máscara?
Uma máscara é, como o nome diz, uma máscara utilizada para esconder parte de um objecto.

Como se implementa? Para se desenhar uma máscara esta tem de estar aplicada a alguma coisa.
Neste caso vamos aplicar uma máscara a uma layer.
1 2

>> Importar uma imagem.
• Menu File >> Import >> File >> Escolher Ficheiro
>> Arrastar essa imagem do Painel do projecto para a Timeline.
>> Selecionar a layer para a “mascarar”.
>> Selecionar, na barra de ferramentas, uma ferramenta de desenho para desenhar a máscara.
• Ou a ferramenta de formas (1);
• Ou a caneta (2);
>> Com uma das ferramentas antes selecionada desenhar a máscara.

3

O AE gera na layer
variáveis de
manipulação da
máscara criada (3).



Manipular Uma Máscara pode ser manipulada nas seguintes variáveis dentro da layer no item “Masks”:
>> Feather - Dureza do recorte da máscara (1)
Máscaras >> Opacity - Opacidade do que está mascarado (2)
>> Expansion - Expansão do limite relativo da máscara (3)
>> Inverted - Inversão da Máscara de positivo para negativo e vice-versa (4)

4

1
2
3

1 2 3 4

Todas estas variáveis, com excepção da “Inverted”, podem ser animadas ao longo do tempo, através
da activação do cronómetro que se encontra em frente a cada uma e que permite criar Keyframes em
cada variável.



A Câmera O que é a câmera?
A câmera virtual corresponde a camera de filmar real. E no After Effects a câmera é,
virtual também, uma layer específica.
1
Como se cria uma câmera?
>> Layer >> New >> Camera (1)

Depois é só escolher um tipo de câmera
e o tipo de lente associada e a nossa
câmera aparece no painel das layers
ao lado das outras layers da nossa
composição (2).

2

Note-se que uma câmera pode igualmente ser animada como qualquer outra layer,
embora o controlo da mesma seja algo complexo. Basta que se animem os seus
parâmetros como vimos atrás na animação de outras layers,

Dica: para um controlo mais eficaz da câmera pode ser útil associar-lhe um objecto nulo.



A Camera E o ponto de interesse da camera?
O ponto de interesse de uma câmera é o ponto para onde ela se dirige ou para onde a
virtual câmera está “a olhar”.

Onde é que definimos e manipulamos esse ponto de interesse?
Na layer da câmera existe um parâmetro chamado “Point of interest“. É aí que definimos
para onde é que a câmera está a olhar e podemos inclusivamente animar esse
parâmetro. O método é sempre o mesmo!

Ponto de interesse

Note-se, no entanto, que podemos animar
a posição e o ponto de interesse de uma
câmera independentemente um do outro.
Câmera propriamente dita



04
Proposta de Trabalho de Animação Tipográfica

Exercício e objectivos:
São fornecidas ao aluno trechos de músicas que o aluno terá que ilustrar tipograficamente. O aluno tem de, a
partir da animação tipográfica e de outros elementos gráficos criados por si, representar visualmente e através
de animação o respectivo trecho da música escolhida. O aluno pode utilizar outros trechos à sua escolha, para
além dos fornecidos.

Deverá ter em conta:
• As questões de Iconicidade que a Tipografia pode ter, tanto na sua configuração formal,
como no seu comportamento cinético;
• As questões e princípios básicos de animação e expressão antes apresentadas;
• Os novos recursos técnicos leccionados no After Effects.
• e claro... a relação entre o som e a imagem...

Duração:
A duração do filme deverá ter, pelo menos, 25 segundos.

Entrega:
Os alunos deverão entregar o trabalho em formato .mov até dia 28 de Abril



Tutoriais Há alguns Tutoriais online sobre animação tipográfica que vos podem ajudar a colocar em prática o
vosso exercício.
Online
Usem-nos! Eu sugiro que comecem exactamente por aqui!

http://ae.tutsplus.com/tutorials/motion-graphics/design-rhythmic-motion-typography-in-after-effects/
http://vimeo.com/1271357
http://www.crookedgremlins.com/09/01/2008/kinetic-typography-tutorial/


A animação Tipográfica nos Motion Graphics / Typography animation in Motion Graphics

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a A animação Tipográfica nos Motion Graphics / Typography animation in Motion Graphics

Semelhante a A animação Tipográfica nos Motion Graphics / Typography animation in Motion Graphics (20)

Mais de Leonardo Pereira

Mais de Leonardo Pereira (20)

A animação Tipográfica nos Motion Graphics / Typography animation in Motion Graphics