SlideShare uma empresa Scribd logo
1 de 46
Design de Títulos
Nelson Zagalo, Universidade do Minho
Blog: http://virtual-illusion.blogspot.com
Home: http://nelsonzagalo.googlepages.com
Cinemalogia II
Coimbra, 27 Abril 2013
Bibliografia
Zagalo, N., (2011), Poétiques du Générique de Cinéma : l'Expressionnisme en Mouvement,
Sociétés - Revue des sciences humaines et sociales, N°111, 2011, p.131-140, DE BOECK Universite.
ISSN: 0765-3697. (JCR / ISI / AHCI)
Patti Bellantoni, (2012), If it’s purple,someone’s gonna die, The Power of Color in Visual
Storytelling, Elsevier
Gombrich, E.H, (2005), A História da Arte, ed. Público, Lisboa, 1950
Jon Krasner, (2008), Motion Graphic Design: Applied History and Aesthetics, Focal Point, USA
Jan Kubasiewicz, (2008), Motion Literacy, in Motion Graphic Design: Applied History and Aesthetics,
Focal Point, USA
1. Introdução
2. Elementos Gráficos
3. Príncipios de Composição Visual
4. Literacia do Movimento
5. Tutoriais introdutórios
6. Realização de exercício
Histórias do Title Design
http://virtual-illusion.blogspot.pt/2013/04/historias-do-title-design.html
a história, anos 1950
"The Man with the Golden Arm" (1955) de Otto Preminger, criado por Saul Bass
“Seven” (1997) de David Fincher, criado por Kyle Cooper
Análise em detalhe: http://www.empireonline.com/features/david-fincher-fight-club-opening-credits/
Renascimento nos anos 1990
Evolução do software 3d e de composição
3ds Max
Maya
Softiamge
Lighwave
Cinema 4d
After Effects
Combustion
Nuke
Photoshop
“300” (2006) de Zack Snyder criado por Garson Yu
Anos 2000
Ponto e Linha
Forma
Côr
Elementos gráficos
PONTO
O ponto é a representação da partícula geométrica mínima da matéria e do
ponto de vista simbólico, é considerado como elemento de origem. O ponto
possui formato, cor, tamanho e textura
LINHA RECTA (vertical, horizontal, oblíqua)
Como elemento conceptual, poderíamos definir a linha como um ponto em
movimento, ou como a memória do deslocamento de um ponto, isto é, a sua
trajetória.
Como elemento visual, não só tem comprimento como largura. Sua cor e
textura são determinadas pelos elementos que são utilizados para representá-la
e pela maneira como é criada.
ÂNGULO - Quando as linhas se quebram, formam os ÂNGULOS.
ÂNGULO RECTO
De acordo com Kandinsky, “é o mais objetivo de todos, pois entre os agudos e
os obtusos, é o único que existe em um só grau”. É o mais frio, estável e duro
de todos.
ÂNGULO AGUDO (fechados),
Percebemos uma forte tensão. A sensação de incisão. O desejo de abrir-se, de
desabrochar. Energético. A sua aplicação dá reforço à sensação de movimento.
ÂNGULOS OBTUSO (abertos),
Contrariamente aos primeiros, essa tensão já foi resolvida. Há uma entrega de
quem já se abriu. É um ângulo acolhedor, passivo e relaxado.
A LINHA
As linhas curvas dominam o território dos sentimentos, da suavidade, da
flexibilidade e do feminino. O redondo, o curvilíneo, o ondulante, encontram-se
em oposição ao caráter racionalizante da linha reta e angulosa, que focaliza a
vontade e o controle.
Quanto maior é essa pressão lateral e contínua exercida sobre a linha, mais
esta se desvia até fechar-se em si mesma, formando um círculo. Essa pressão
lateral contínua faz com que ela não quebre, se transformando em Arco. Não há
Ângulo.
Para a linha reta, impulsiva, não há começo nem fim, é um caminho sem
retorno. Para a linha curva, flexível, há a possibilidade de encontrar-se com o
seu começo, gerando um círculo, que é a representação do todo.
O PLANO
Como elemento visual, possui comprimento e largura, tem posição e direção, é
limitado por
linhas e define os limites extremos de um volume. Em uma superfície
bidimensional, todas as formas planas que não são comumente
reconhecidas como pontos ou linhas, são formas enquanto plano.
1 - Planos Geométricos – Constituídos
matematicamente.
2 - Planos Orgânicos – Limitados por
curvas livres, sugerindo fluidez e
crescimento.
3 - Planos Retilíneos – Limitados por
linhas retas que não se relacionam umas
com as outras matematicamente.
4 - Planos Irregulares – Limitados por
linhas retas e curvas que também não se
relacionam umas às outras
matematicamente.
5 - Planos Caligráficos – Criados sem
auxílio de instrumentos, composto por
linhas orgânicas.
6 - Planos Acidentais – Determinado pelo
efeito de processos especiais ou obtidos
ocasionalmente.
Composição de formas
Formas positivas e negativas
A forma é geralmente apresentada como que ocupando o espaço, mas também pode ser
vista como um espaço vazio circundado por espaço ocupado.a
Cor
Sabemos que as suas propriedades afectam fortemente o sistema nervoso mas
que estes efeitos são bastante subjectivos, ou seja variáveis de pessoa para
pessoa.
Para definir a cor temos três parâmetros:
Tom - nomes das cores
Saturação- saturação do tom (mais preto)
Brilho – claridade da côr (mais branco)
Complementares
São as cores que se encontram nas
antípodas da roda. Ex. Verde-Vermelho
Análogas
São as cores adjacentes a cada uma na
roda das cores
VERMELHO
“Bright red is like visual caffeine. It can activate
your libido, or make you aggressive, anxious, or
compulsive. In fact, red can activate whatever
latent passions you might bring to the table, or
to the movie. Red is power. But red doesn’t
come with a moral imperative. Depending on
the story’s needs, red can give power to a good
guy or a bad guy. After all, both the Wicked
Witch and Dorothy wore the ruby slippers.
Because we tend to see it first, red gives the
illusion of advancing toward us. Due to this, it
can manipulate our sense of space.
Because bright red has this visually aggressive
quality, the space does indeed appear to come
forward, and it looks shallower than it actually is.
Red can also make something appear to move
faster.”
Cor e Storytelling
AMARELO
“Yellow is a contrary color. That’s your first clue, or
warning. One of the reasons yellow is the color used
for caution signs is that it’s visually aggressive. It
appears to come toward you. We’ve built it into our
consciousness as a cautionary color. Venomous
reptiles and amphibians often are yellow—a warning
to all who come near, a big beware built into our
genetic code.
It is also the color we identify with the sun. We
associate yellow with powerful life energy exuberance
itself. In whatever situation you find it, or wherever it
is, bright yellow can be the scene-stealer, always
clamoring
for attention.
“Yellow is the color longest remembered and most
despised". This is an interesting parallel to the
color associated with happiness.”
Cor e Storytelling
AZUL
“Blue can be a tranquil 'lagoon' or a soft blanket of sadness.
It is quiet and 'distant'. Year after year, our color
investigations show that in a blue environment, people
become passive and introspective. It’s a color to
think to, but not to act.
Blue is the quintessential color for powerlessness. Even a
very pale blue has an amazing ability to influence our
emotional reactions to what is happening on screen.
Sadness, melancholy, harmony. Because of its tendency to
effect inertia, blue is rarely used as a dominant color.
Blue can have seemingly contradictory traits because
it’s the coldest color in the spectrum. The slightest
change in that color, therefore, can completely alter how
you respond to it. Perhaps blue, statistically, is everyone’s
favorite color because each person thinks of it in a different
way. It is also why you need to make certain that the blue
you choose will create the response you want. Don’t just
describe it. Test it on your “audience” and then decide.”
The Cider House Rules
(1999) de Lasse Hallström
Cor e Storytelling
LARANJA
“Orange manifests its influence in a different way from the
other colors. While red says “I’m here!,” yellow is exuberant,
and blue is laidback, our research revealed that orange is
generically “nice”. Actually, of all our investigations, opaque
orange was the most upbeat and least dramatic of the colors.
The color simply supported a warm and welcoming
congeniality. How we feel at sunset is not just a romanticized
cliché. Something actually happens to us physically when we
watch the intense brightness of the near-white sun transform
itself into a glowing rich orange in the sky. Glowing orange
light (and its associations with the sun) can take us on a
visceral ride that warms and expands our emotional field.
Terra-cottas, siennas, ochres, and umbers have a kind of
primal influence in how we react to them. We respond
positively to the colors of the earth.”
Cor e Storytelling
VERDE
“Green is really a dichotomous color. It’s the color of
fresh vegetables and spoiled meat. Perhaps its
duplicity comes from our earliest times on this planet
when green signaled both food and danger. Green can
signal health and vitality or danger and decay.
We have strong aversion to green in liquid form (Snow
White and the Seven Dwarfs (1937); The Virgin
Suicides (2000)). When associated with the human
body, green’s clue is often illness or evil. How often
have you heard, “Are you okay? You look green.” When
we first see the Wicked Witch of the West as Miss
Gulch in The Wizard of she is in black and white. We
know she’s bad, but when the film turns to color and we
see her in green, she becomes virulent.
Because of green’s ambivalent nature, it is important to
base your decision on which green to use in a
particular scene on how the audience is going to
respond to it..”
Cor e Storytelling
PÚRPURA
“There have been times, particularly in romantic tales
and poetry, when purple has been associated with
sensuality. I suspect that may be because of the color’s
association with imbibing the grape. However, during
our more than twenty years of research into the effects
of color on behavior, purple was not once associated
with sensuality. In fact, there seemed to be no real
evidence of purple’s having an effect in the physical
realm at all. The color did, however, hold a powerful
sway in the realm of the noncorporal, the mystical, and
even the paranormal.
the association with the royal and regal comes from the
fact that violet is the most difficult color to come by in
nature. Its very scarcity associates it with the rare
trappings of emperors, kings, and queens.”
Centro de interesse
Coerência e unidade
Perspectiva
Ritmo
Ponto focal
Príncipios da composição
visual
O processo de composição
visual é o processo de
planeamento, ordenamento e
arranjo dos elementos visuais
num plano visual.
Centro de interesse
Refere-se ao controlo exercido pelo artista sobre o objecto para condicionar o
olhar do receptor. Esse controlo pode ser exercido através do tamanho, cor e
posicionamento dos elementos visuais no objecto.
Coerência e unidade
A coerência pode reger-se por elementos do conteúdo do objecto (pedras) ou e
mais interessante para o que aqui se discute pela unidade dentro dos elementos
visuais (linhas, cores, formas...).
Perspectiva
Serve a criação de profundidade de campo, ou seja de tridimensionalidade da
composição e para tal no desenho, os objectos mais distantes são desenhados mais
pequenos, e perdem a definição.
Ritmo (repetição)
Refere-se ao modo como os objectos aparecem repetidos e em padrões nas imagens
tornando a sua percepção visual mais fácil.
A regra dos terços consiste em dividir uma imagem em 9 áreas iguais.
Consideram-se os 4 pontos de interesecção das linhas como os pontos de
força da imagem e como orientadores naturais do olhar humano.
Ponto Focal
Ratio de ouro
Simplificado na Regra dos Terços
Estética
(o belo)
monotonia caos
similaridade extrema
variedade insuficiente
hypo-excitância
diferença extrema
unidade insuficiente
hyper-excitância
Literacia do Movimento
Espaço e tempo
Credibilidade do movimento
Literacia do movimento
“universal system of
communication, combining the
visual, sonic, and kinetic
aspects into a synchronized,
multi-sensory experience, and
that language now becomes a
new realm meaningful
integration with all other
elements “
the designer’s awareness of the
“plasticity” of time, and
consequently, the designer’s
ability of manipulating time—real
time, its representation, and
perception—through motion,
sequentiality, and multiple-
channel correspondence
(multimediality).”
Jan Kubasiewicz Storyboard de Alexander Nevsky (1938)
de Sergei Eisentstein
“Currently, the integration of motion and
typography is perhaps the most
extensively exhibited practice of motion
design.
Adding motion and time dimensions to
typography is to add new possibilities to
the imaging of verbal language. Kinetic
typography complements traditional
typography by exploring “real-time”
visualization in a spirit of phonetic
properties of spoken language, such as
spontaneity, intonation, etc.
...motion is not the purpose for its own
sake but a way of serving the purpose of
communication, and since design requires
equilibrium of nonmotion and motion,
absence of motion is just a case of
potential motion. "
Jan Kubasiewicz
Literacia do movimento
Espaço e tempo
1. Posicionamento
2. Tamanho
3. Orientação dos elementos
4. A direcção em que se deslocam
5. A forma como influenciam outros movimentos
6. A relação com os limites do enquadramento
7. A mobilidade do enquadramento
8. Velocidade linear
9. Velocidade não-linear
10. Velocidade Alterada
Credibilidade do movimento
8 dos 12 Princípios da Animação da Disney
Squash and Stretch – Comprimir e esticar: O princípio tem como função mostrar pela
deformação de um objeto o seu peso e flexibilidade.
Anticipation – Antecipação: A antecipação de uma ação, como a preparação para um salto ou
um impacto é muito usada para transmitir realismo nas animações.
Follow Through and Overlapping Action – Sequência de ações e reações: Um objecto que se
desloque a alta velocidade e é parado de maneira brusca tem a massa do seu corpo deslocada
levemente para frente pela inércia.
Slow In and Out – Aceleração e desaceleração: Princípio básico da dinâmica aplicada a
animação. Os objetos precisam de tempo para começar a andar e para parar.
Arcs – Arcos de movimento: Os movimentos que descrevem trajetórias em arcos são mais
naturais e realistas.
Secondary Action – Ações secundárias: Uma ação realizada pode desencadear outros
movimentos.
Timinig and Motion – Tempo e movimento: A mesma ação realizada em velocidades diferentes
pode passar a idéia de sofrimento ou mesmo humor.
Exaggeration – Exagero nos movimentos: Usar movimentos bruscos e expressões faciais para
ampliar os movimentos e exagerar as emoções e reacções.
1. Squash and stretch (Comprimir e esticar)
Este técnica dá a ilusão de peso e volume ao personagem em movimento. É usada em todas as formas
de animação de personagens desde uma bola que saltita até ao peso de uma pessoa que caminha.
Mesmo ao nivel das expressões faciais em diálogo a técnica pode dar frutos na comunicação das ideias.
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, dada a sua não rigidez.
2. 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. ex. uma bailarina não salta, sem antes preparar o
impulso; uma acção para atrás acontece sempre que uma acção para a frente é executada.
4. Follow Through and Overlapping Action – Sequência de acções e reacções:
Todas as ações realizadas pelos personagens em animação geram reações. Por exemplo, um
personagem que esteja a correr a alta velocidade e é parado de maneira brusca tem a massa do seu
corpo deslocada levemente para frente pela inércia, assim como seus cabelos e roupas.
6.Slow In and Out – Aceleração e desaceleração:
Um princípio básico de dinâmica aplicada a animação é que os objetos
precisam de tempo para começar a mover-se e para parar. São poucos os
objetos ou elementos que começam um movimento na velocidade final. Na
maioria dos casos é necessário um tempo de aceleração e desaceleração para
atingir o movimento ou repouso.
7. 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. Os arcos conferem à animação uma acção mais
natural e uma melhor fluidez de movimento.
9. Secondary Action – Acções secundárias:
Aqui o princípio é simples, uma acção realizada por um personagem pode
desencadear outros movimentos. Por exemplo, ao caminhar um personagem
gera deformações e movimento nas suas roupas e no seu cabelo.
8. Timinig and Motion – Tempo e movimento:
Princípio que atribui significado ao movimento. A mesma acção realizada em velocidades
diferentes pode passar a idéia de sofrimento ou mesmo humor. Tudo depende da interpretação
do animador sobre o contexto da acção na história.
10. Exaggeration
O exagero não é a distorção completa do desenho, ou acções violentas a todo o momento. è antes
algo que se aseemelha 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
graciocidade exagerando os arcos do movimento, ou o squash and stretch das expressões.
Credibilidade visual do movimento gráfico
http://www.youtube.com/watch?v=xqGL1ZLk3n8
Tutoriais introdutó rios em After Effects
1 – Intro a animaç ão
2 – Efeitos
3 – Texto
Brief Guide About Bridesmaids - Vancouver Film School (VFS)
http://www.youtube.com/watch?v=T7wfVgufKTo
Design de Títulos

Mais conteúdo relacionado

Destaque

Game Animation [Aula 03]
Game Animation [Aula 03]Game Animation [Aula 03]
Game Animation [Aula 03]
Alessandro Lima
 

Destaque (20)

Sociedade criativa, novos processos e impactos
Sociedade criativa, novos processos e impactosSociedade criativa, novos processos e impactos
Sociedade criativa, novos processos e impactos
 
Animação nos Videojogos
Animação nos VideojogosAnimação nos Videojogos
Animação nos Videojogos
 
Aula anima-modelos
Aula anima-modelosAula anima-modelos
Aula anima-modelos
 
Storytelling Evolution, Body and Physicality
Storytelling Evolution, Body and PhysicalityStorytelling Evolution, Body and Physicality
Storytelling Evolution, Body and Physicality
 
Manual oficina animacao
Manual oficina animacaoManual oficina animacao
Manual oficina animacao
 
Unit 1 concept world
Unit 1 concept worldUnit 1 concept world
Unit 1 concept world
 
Como ampliar a difusão da produção nas línguas ibero-americanas
Como ampliar a difusão da produção nas línguas ibero-americanasComo ampliar a difusão da produção nas línguas ibero-americanas
Como ampliar a difusão da produção nas línguas ibero-americanas
 
Machinima, a Creative Technology
Machinima, a Creative TechnologyMachinima, a Creative Technology
Machinima, a Creative Technology
 
Game Animation [Aula 03]
Game Animation [Aula 03]Game Animation [Aula 03]
Game Animation [Aula 03]
 
Choice and Moral Design in Interactive Storytelling
Choice and Moral Design in Interactive StorytellingChoice and Moral Design in Interactive Storytelling
Choice and Moral Design in Interactive Storytelling
 
Rachel Weisz Digital Painting
Rachel Weisz Digital PaintingRachel Weisz Digital Painting
Rachel Weisz Digital Painting
 
Web documentary media language
Web documentary media languageWeb documentary media language
Web documentary media language
 
Futuro do criativo
Futuro do criativoFuturo do criativo
Futuro do criativo
 
Cinema, janela intercultural
Cinema, janela interculturalCinema, janela intercultural
Cinema, janela intercultural
 
Design da Experiência de Videojogos
Design da Experiência de VideojogosDesign da Experiência de Videojogos
Design da Experiência de Videojogos
 
Sobre o design de jogos moveis
Sobre o design de jogos moveisSobre o design de jogos moveis
Sobre o design de jogos moveis
 
Bamboo frog Digital Painting
Bamboo frog Digital PaintingBamboo frog Digital Painting
Bamboo frog Digital Painting
 
Videogames and Multimodal Literacy
Videogames and Multimodal LiteracyVideogames and Multimodal Literacy
Videogames and Multimodal Literacy
 
Compositing and graphics
Compositing and graphicsCompositing and graphics
Compositing and graphics
 
Precursores da Animação
Precursores da AnimaçãoPrecursores da Animação
Precursores da Animação
 

Semelhante a Design de Títulos

Ebook o-significado-das-cores-brunoavila
Ebook o-significado-das-cores-brunoavilaEbook o-significado-das-cores-brunoavila
Ebook o-significado-das-cores-brunoavila
PELOSI PELOSI
 
1 augusto boal - teatro do oprimido
1 augusto boal - teatro do oprimido1 augusto boal - teatro do oprimido
1 augusto boal - teatro do oprimido
Laura Revoredo
 
1 augusto boal - teatro do oprimido
1 augusto boal - teatro do oprimido1 augusto boal - teatro do oprimido
1 augusto boal - teatro do oprimido
Laura Revoredo
 
Pre maquete expo aka om 2014
Pre maquete expo aka om 2014Pre maquete expo aka om 2014
Pre maquete expo aka om 2014
Nuno Quaresma
 

Semelhante a Design de Títulos (20)

Aula Harmonia de Cores
Aula Harmonia de CoresAula Harmonia de Cores
Aula Harmonia de Cores
 
Teoria das cores aplicada ao design
Teoria das cores aplicada ao designTeoria das cores aplicada ao design
Teoria das cores aplicada ao design
 
ARTE ABSTRATA - Aula 1 - introdução e cor.pptx.pdf
ARTE ABSTRATA - Aula 1 - introdução e cor.pptx.pdfARTE ABSTRATA - Aula 1 - introdução e cor.pptx.pdf
ARTE ABSTRATA - Aula 1 - introdução e cor.pptx.pdf
 
Cores aula 2008
Cores aula 2008Cores aula 2008
Cores aula 2008
 
Luz e cor
Luz e corLuz e cor
Luz e cor
 
Cores
CoresCores
Cores
 
Ebook o-significado-das-cores-brunoavila
Ebook o-significado-das-cores-brunoavilaEbook o-significado-das-cores-brunoavila
Ebook o-significado-das-cores-brunoavila
 
Estudo da cor
Estudo da corEstudo da cor
Estudo da cor
 
Estudo das Cores
Estudo das CoresEstudo das Cores
Estudo das Cores
 
Estudo das cores
Estudo das coresEstudo das cores
Estudo das cores
 
A cor
A corA cor
A cor
 
1 augusto boal - teatro do oprimido
1 augusto boal - teatro do oprimido1 augusto boal - teatro do oprimido
1 augusto boal - teatro do oprimido
 
1 augusto boal - teatro do oprimido
1 augusto boal - teatro do oprimido1 augusto boal - teatro do oprimido
1 augusto boal - teatro do oprimido
 
Sixtaxe linguagem visual exercícios
Sixtaxe linguagem visual exercíciosSixtaxe linguagem visual exercícios
Sixtaxe linguagem visual exercícios
 
Pre maquete expo aka om 2014
Pre maquete expo aka om 2014Pre maquete expo aka om 2014
Pre maquete expo aka om 2014
 
Cores
CoresCores
Cores
 
Cores
CoresCores
Cores
 
Design Digital I Teoria das Cores
Design Digital I Teoria das CoresDesign Digital I Teoria das Cores
Design Digital I Teoria das Cores
 
Artes Visuais
Artes Visuais Artes Visuais
Artes Visuais
 
Apostila cor 6o ano 2013
Apostila cor 6o ano 2013Apostila cor 6o ano 2013
Apostila cor 6o ano 2013
 

Mais de Nelson Zagalo

Mais de Nelson Zagalo (19)

Engagement Design
Engagement DesignEngagement Design
Engagement Design
 
Ciência e Mitos sobre os efeitos dos Videojogos
Ciência e Mitos sobre os efeitos dos VideojogosCiência e Mitos sobre os efeitos dos Videojogos
Ciência e Mitos sobre os efeitos dos Videojogos
 
Aprender com Jogos
Aprender com JogosAprender com Jogos
Aprender com Jogos
 
Learning with Games
Learning with GamesLearning with Games
Learning with Games
 
Evolução Tecnológica e Literacia
Evolução Tecnológica e LiteraciaEvolução Tecnológica e Literacia
Evolução Tecnológica e Literacia
 
Aplicações do 3D (CGI)
Aplicações do 3D (CGI)Aplicações do 3D (CGI)
Aplicações do 3D (CGI)
 
Gamifying Motivation
Gamifying MotivationGamifying Motivation
Gamifying Motivation
 
Deepfake and the future of Audiovisual Simulacra
Deepfake and the future of Audiovisual SimulacraDeepfake and the future of Audiovisual Simulacra
Deepfake and the future of Audiovisual Simulacra
 
Complementaridade Tecnológica e o Fator Humano
Complementaridade Tecnológica e o Fator HumanoComplementaridade Tecnológica e o Fator Humano
Complementaridade Tecnológica e o Fator Humano
 
Narrativa y Significado
Narrativa y SignificadoNarrativa y Significado
Narrativa y Significado
 
Persuasive Game Design
Persuasive Game DesignPersuasive Game Design
Persuasive Game Design
 
Tendências dos Jogos Digitais na Educação
Tendências dos Jogos Digitais na EducaçãoTendências dos Jogos Digitais na Educação
Tendências dos Jogos Digitais na Educação
 
VR Engagement
VR EngagementVR Engagement
VR Engagement
 
Multimedia and Arts
Multimedia and ArtsMultimedia and Arts
Multimedia and Arts
 
Narrative Design, the case of “Horizon Zero Dawn”
Narrative Design, the case of “Horizon Zero Dawn”Narrative Design, the case of “Horizon Zero Dawn”
Narrative Design, the case of “Horizon Zero Dawn”
 
Problematização do Dataismo
Problematização do DataismoProblematização do Dataismo
Problematização do Dataismo
 
Competências Multimédia 12º
Competências Multimédia 12ºCompetências Multimédia 12º
Competências Multimédia 12º
 
Aspectos Criativos do Design de Jogos
Aspectos Criativos do Design de JogosAspectos Criativos do Design de Jogos
Aspectos Criativos do Design de Jogos
 
Literacia dos Media e Artes
Literacia dos Media e ArtesLiteracia dos Media e Artes
Literacia dos Media e Artes
 

Design de Títulos

  • 1. Design de Títulos Nelson Zagalo, Universidade do Minho Blog: http://virtual-illusion.blogspot.com Home: http://nelsonzagalo.googlepages.com Cinemalogia II Coimbra, 27 Abril 2013
  • 2. Bibliografia Zagalo, N., (2011), Poétiques du Générique de Cinéma : l'Expressionnisme en Mouvement, Sociétés - Revue des sciences humaines et sociales, N°111, 2011, p.131-140, DE BOECK Universite. ISSN: 0765-3697. (JCR / ISI / AHCI) Patti Bellantoni, (2012), If it’s purple,someone’s gonna die, The Power of Color in Visual Storytelling, Elsevier Gombrich, E.H, (2005), A História da Arte, ed. Público, Lisboa, 1950 Jon Krasner, (2008), Motion Graphic Design: Applied History and Aesthetics, Focal Point, USA Jan Kubasiewicz, (2008), Motion Literacy, in Motion Graphic Design: Applied History and Aesthetics, Focal Point, USA 1. Introdução 2. Elementos Gráficos 3. Príncipios de Composição Visual 4. Literacia do Movimento 5. Tutoriais introdutórios 6. Realização de exercício
  • 3. Histórias do Title Design http://virtual-illusion.blogspot.pt/2013/04/historias-do-title-design.html
  • 4. a história, anos 1950 "The Man with the Golden Arm" (1955) de Otto Preminger, criado por Saul Bass
  • 5. “Seven” (1997) de David Fincher, criado por Kyle Cooper Análise em detalhe: http://www.empireonline.com/features/david-fincher-fight-club-opening-credits/ Renascimento nos anos 1990
  • 6. Evolução do software 3d e de composição 3ds Max Maya Softiamge Lighwave Cinema 4d After Effects Combustion Nuke Photoshop
  • 7. “300” (2006) de Zack Snyder criado por Garson Yu Anos 2000
  • 9. PONTO O ponto é a representação da partícula geométrica mínima da matéria e do ponto de vista simbólico, é considerado como elemento de origem. O ponto possui formato, cor, tamanho e textura LINHA RECTA (vertical, horizontal, oblíqua) Como elemento conceptual, poderíamos definir a linha como um ponto em movimento, ou como a memória do deslocamento de um ponto, isto é, a sua trajetória. Como elemento visual, não só tem comprimento como largura. Sua cor e textura são determinadas pelos elementos que são utilizados para representá-la e pela maneira como é criada.
  • 10. ÂNGULO - Quando as linhas se quebram, formam os ÂNGULOS. ÂNGULO RECTO De acordo com Kandinsky, “é o mais objetivo de todos, pois entre os agudos e os obtusos, é o único que existe em um só grau”. É o mais frio, estável e duro de todos. ÂNGULO AGUDO (fechados), Percebemos uma forte tensão. A sensação de incisão. O desejo de abrir-se, de desabrochar. Energético. A sua aplicação dá reforço à sensação de movimento. ÂNGULOS OBTUSO (abertos), Contrariamente aos primeiros, essa tensão já foi resolvida. Há uma entrega de quem já se abriu. É um ângulo acolhedor, passivo e relaxado.
  • 11. A LINHA As linhas curvas dominam o território dos sentimentos, da suavidade, da flexibilidade e do feminino. O redondo, o curvilíneo, o ondulante, encontram-se em oposição ao caráter racionalizante da linha reta e angulosa, que focaliza a vontade e o controle. Quanto maior é essa pressão lateral e contínua exercida sobre a linha, mais esta se desvia até fechar-se em si mesma, formando um círculo. Essa pressão lateral contínua faz com que ela não quebre, se transformando em Arco. Não há Ângulo. Para a linha reta, impulsiva, não há começo nem fim, é um caminho sem retorno. Para a linha curva, flexível, há a possibilidade de encontrar-se com o seu começo, gerando um círculo, que é a representação do todo.
  • 12. O PLANO Como elemento visual, possui comprimento e largura, tem posição e direção, é limitado por linhas e define os limites extremos de um volume. Em uma superfície bidimensional, todas as formas planas que não são comumente reconhecidas como pontos ou linhas, são formas enquanto plano. 1 - Planos Geométricos – Constituídos matematicamente. 2 - Planos Orgânicos – Limitados por curvas livres, sugerindo fluidez e crescimento. 3 - Planos Retilíneos – Limitados por linhas retas que não se relacionam umas com as outras matematicamente. 4 - Planos Irregulares – Limitados por linhas retas e curvas que também não se relacionam umas às outras matematicamente. 5 - Planos Caligráficos – Criados sem auxílio de instrumentos, composto por linhas orgânicas. 6 - Planos Acidentais – Determinado pelo efeito de processos especiais ou obtidos ocasionalmente.
  • 14. Formas positivas e negativas A forma é geralmente apresentada como que ocupando o espaço, mas também pode ser vista como um espaço vazio circundado por espaço ocupado.a
  • 15. Cor Sabemos que as suas propriedades afectam fortemente o sistema nervoso mas que estes efeitos são bastante subjectivos, ou seja variáveis de pessoa para pessoa. Para definir a cor temos três parâmetros: Tom - nomes das cores Saturação- saturação do tom (mais preto) Brilho – claridade da côr (mais branco) Complementares São as cores que se encontram nas antípodas da roda. Ex. Verde-Vermelho Análogas São as cores adjacentes a cada uma na roda das cores
  • 16. VERMELHO “Bright red is like visual caffeine. It can activate your libido, or make you aggressive, anxious, or compulsive. In fact, red can activate whatever latent passions you might bring to the table, or to the movie. Red is power. But red doesn’t come with a moral imperative. Depending on the story’s needs, red can give power to a good guy or a bad guy. After all, both the Wicked Witch and Dorothy wore the ruby slippers. Because we tend to see it first, red gives the illusion of advancing toward us. Due to this, it can manipulate our sense of space. Because bright red has this visually aggressive quality, the space does indeed appear to come forward, and it looks shallower than it actually is. Red can also make something appear to move faster.”
  • 17. Cor e Storytelling AMARELO “Yellow is a contrary color. That’s your first clue, or warning. One of the reasons yellow is the color used for caution signs is that it’s visually aggressive. It appears to come toward you. We’ve built it into our consciousness as a cautionary color. Venomous reptiles and amphibians often are yellow—a warning to all who come near, a big beware built into our genetic code. It is also the color we identify with the sun. We associate yellow with powerful life energy exuberance itself. In whatever situation you find it, or wherever it is, bright yellow can be the scene-stealer, always clamoring for attention. “Yellow is the color longest remembered and most despised". This is an interesting parallel to the color associated with happiness.”
  • 18. Cor e Storytelling AZUL “Blue can be a tranquil 'lagoon' or a soft blanket of sadness. It is quiet and 'distant'. Year after year, our color investigations show that in a blue environment, people become passive and introspective. It’s a color to think to, but not to act. Blue is the quintessential color for powerlessness. Even a very pale blue has an amazing ability to influence our emotional reactions to what is happening on screen. Sadness, melancholy, harmony. Because of its tendency to effect inertia, blue is rarely used as a dominant color. Blue can have seemingly contradictory traits because it’s the coldest color in the spectrum. The slightest change in that color, therefore, can completely alter how you respond to it. Perhaps blue, statistically, is everyone’s favorite color because each person thinks of it in a different way. It is also why you need to make certain that the blue you choose will create the response you want. Don’t just describe it. Test it on your “audience” and then decide.” The Cider House Rules (1999) de Lasse Hallström
  • 19. Cor e Storytelling LARANJA “Orange manifests its influence in a different way from the other colors. While red says “I’m here!,” yellow is exuberant, and blue is laidback, our research revealed that orange is generically “nice”. Actually, of all our investigations, opaque orange was the most upbeat and least dramatic of the colors. The color simply supported a warm and welcoming congeniality. How we feel at sunset is not just a romanticized cliché. Something actually happens to us physically when we watch the intense brightness of the near-white sun transform itself into a glowing rich orange in the sky. Glowing orange light (and its associations with the sun) can take us on a visceral ride that warms and expands our emotional field. Terra-cottas, siennas, ochres, and umbers have a kind of primal influence in how we react to them. We respond positively to the colors of the earth.”
  • 20. Cor e Storytelling VERDE “Green is really a dichotomous color. It’s the color of fresh vegetables and spoiled meat. Perhaps its duplicity comes from our earliest times on this planet when green signaled both food and danger. Green can signal health and vitality or danger and decay. We have strong aversion to green in liquid form (Snow White and the Seven Dwarfs (1937); The Virgin Suicides (2000)). When associated with the human body, green’s clue is often illness or evil. How often have you heard, “Are you okay? You look green.” When we first see the Wicked Witch of the West as Miss Gulch in The Wizard of she is in black and white. We know she’s bad, but when the film turns to color and we see her in green, she becomes virulent. Because of green’s ambivalent nature, it is important to base your decision on which green to use in a particular scene on how the audience is going to respond to it..”
  • 21. Cor e Storytelling PÚRPURA “There have been times, particularly in romantic tales and poetry, when purple has been associated with sensuality. I suspect that may be because of the color’s association with imbibing the grape. However, during our more than twenty years of research into the effects of color on behavior, purple was not once associated with sensuality. In fact, there seemed to be no real evidence of purple’s having an effect in the physical realm at all. The color did, however, hold a powerful sway in the realm of the noncorporal, the mystical, and even the paranormal. the association with the royal and regal comes from the fact that violet is the most difficult color to come by in nature. Its very scarcity associates it with the rare trappings of emperors, kings, and queens.”
  • 22. Centro de interesse Coerência e unidade Perspectiva Ritmo Ponto focal Príncipios da composição visual O processo de composição visual é o processo de planeamento, ordenamento e arranjo dos elementos visuais num plano visual.
  • 23. Centro de interesse Refere-se ao controlo exercido pelo artista sobre o objecto para condicionar o olhar do receptor. Esse controlo pode ser exercido através do tamanho, cor e posicionamento dos elementos visuais no objecto.
  • 24. Coerência e unidade A coerência pode reger-se por elementos do conteúdo do objecto (pedras) ou e mais interessante para o que aqui se discute pela unidade dentro dos elementos visuais (linhas, cores, formas...).
  • 25. Perspectiva Serve a criação de profundidade de campo, ou seja de tridimensionalidade da composição e para tal no desenho, os objectos mais distantes são desenhados mais pequenos, e perdem a definição.
  • 26. Ritmo (repetição) Refere-se ao modo como os objectos aparecem repetidos e em padrões nas imagens tornando a sua percepção visual mais fácil.
  • 27. A regra dos terços consiste em dividir uma imagem em 9 áreas iguais. Consideram-se os 4 pontos de interesecção das linhas como os pontos de força da imagem e como orientadores naturais do olhar humano. Ponto Focal Ratio de ouro Simplificado na Regra dos Terços
  • 28. Estética (o belo) monotonia caos similaridade extrema variedade insuficiente hypo-excitância diferença extrema unidade insuficiente hyper-excitância
  • 29. Literacia do Movimento Espaço e tempo Credibilidade do movimento
  • 30. Literacia do movimento “universal system of communication, combining the visual, sonic, and kinetic aspects into a synchronized, multi-sensory experience, and that language now becomes a new realm meaningful integration with all other elements “ the designer’s awareness of the “plasticity” of time, and consequently, the designer’s ability of manipulating time—real time, its representation, and perception—through motion, sequentiality, and multiple- channel correspondence (multimediality).” Jan Kubasiewicz Storyboard de Alexander Nevsky (1938) de Sergei Eisentstein
  • 31. “Currently, the integration of motion and typography is perhaps the most extensively exhibited practice of motion design. Adding motion and time dimensions to typography is to add new possibilities to the imaging of verbal language. Kinetic typography complements traditional typography by exploring “real-time” visualization in a spirit of phonetic properties of spoken language, such as spontaneity, intonation, etc. ...motion is not the purpose for its own sake but a way of serving the purpose of communication, and since design requires equilibrium of nonmotion and motion, absence of motion is just a case of potential motion. " Jan Kubasiewicz Literacia do movimento
  • 32. Espaço e tempo 1. Posicionamento 2. Tamanho 3. Orientação dos elementos 4. A direcção em que se deslocam 5. A forma como influenciam outros movimentos 6. A relação com os limites do enquadramento 7. A mobilidade do enquadramento 8. Velocidade linear 9. Velocidade não-linear 10. Velocidade Alterada
  • 33. Credibilidade do movimento 8 dos 12 Princípios da Animação da Disney Squash and Stretch – Comprimir e esticar: O princípio tem como função mostrar pela deformação de um objeto o seu peso e flexibilidade. Anticipation – Antecipação: A antecipação de uma ação, como a preparação para um salto ou um impacto é muito usada para transmitir realismo nas animações. Follow Through and Overlapping Action – Sequência de ações e reações: Um objecto que se desloque a alta velocidade e é parado de maneira brusca tem a massa do seu corpo deslocada levemente para frente pela inércia. Slow In and Out – Aceleração e desaceleração: Princípio básico da dinâmica aplicada a animação. Os objetos precisam de tempo para começar a andar e para parar. Arcs – Arcos de movimento: Os movimentos que descrevem trajetórias em arcos são mais naturais e realistas. Secondary Action – Ações secundárias: Uma ação realizada pode desencadear outros movimentos. Timinig and Motion – Tempo e movimento: A mesma ação realizada em velocidades diferentes pode passar a idéia de sofrimento ou mesmo humor. Exaggeration – Exagero nos movimentos: Usar movimentos bruscos e expressões faciais para ampliar os movimentos e exagerar as emoções e reacções.
  • 34. 1. Squash and stretch (Comprimir e esticar) Este técnica dá a ilusão de peso e volume ao personagem em movimento. É usada em todas as formas de animação de personagens desde uma bola que saltita até ao peso de uma pessoa que caminha. Mesmo ao nivel das expressões faciais em diálogo a técnica pode dar frutos na comunicação das ideias. 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, dada a sua não rigidez.
  • 35. 2. 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. ex. uma bailarina não salta, sem antes preparar o impulso; uma acção para atrás acontece sempre que uma acção para a frente é executada.
  • 36. 4. Follow Through and Overlapping Action – Sequência de acções e reacções: Todas as ações realizadas pelos personagens em animação geram reações. Por exemplo, um personagem que esteja a correr a alta velocidade e é parado de maneira brusca tem a massa do seu corpo deslocada levemente para frente pela inércia, assim como seus cabelos e roupas.
  • 37. 6.Slow In and Out – Aceleração e desaceleração: Um princípio básico de dinâmica aplicada a animação é que os objetos precisam de tempo para começar a mover-se e para parar. São poucos os objetos ou elementos que começam um movimento na velocidade final. Na maioria dos casos é necessário um tempo de aceleração e desaceleração para atingir o movimento ou repouso.
  • 38. 7. 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. Os arcos conferem à animação uma acção mais natural e uma melhor fluidez de movimento.
  • 39. 9. Secondary Action – Acções secundárias: Aqui o princípio é simples, uma acção realizada por um personagem pode desencadear outros movimentos. Por exemplo, ao caminhar um personagem gera deformações e movimento nas suas roupas e no seu cabelo.
  • 40. 8. Timinig and Motion – Tempo e movimento: Princípio que atribui significado ao movimento. A mesma acção realizada em velocidades diferentes pode passar a idéia de sofrimento ou mesmo humor. Tudo depende da interpretação do animador sobre o contexto da acção na história.
  • 41. 10. Exaggeration O exagero não é a distorção completa do desenho, ou acções violentas a todo o momento. è antes algo que se aseemelha 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 graciocidade exagerando os arcos do movimento, ou o squash and stretch das expressões.
  • 42. Credibilidade visual do movimento gráfico http://www.youtube.com/watch?v=xqGL1ZLk3n8
  • 43. Tutoriais introdutó rios em After Effects 1 – Intro a animaç ão 2 – Efeitos 3 – Texto
  • 44.
  • 45. Brief Guide About Bridesmaids - Vancouver Film School (VFS) http://www.youtube.com/watch?v=T7wfVgufKTo