Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design de Títulos

1,208 views

Published on

Workshop "Design de Títulos" dado no âmbito do curso Cinemalogia II, organizado pelo Centro de Estudos Cinematográficos da AAC, Coimbra. Departamento de Engenharia Informática da UC, 27 de Abril 2013.

Design de Títulos

  1. 1. Design de TítulosNelson Zagalo, Universidade do MinhoBlog: http://virtual-illusion.blogspot.comHome: http://nelsonzagalo.googlepages.comCinemalogia IICoimbra, 27 Abril 2013
  2. 2. BibliografiaZagalo, N., (2011), Poétiques du Générique de Cinéma : lExpressionnisme 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 VisualStorytelling, ElsevierGombrich, E.H, (2005), A História da Arte, ed. Público, Lisboa, 1950Jon Krasner, (2008), Motion Graphic Design: Applied History and Aesthetics, Focal Point, USAJan Kubasiewicz, (2008), Motion Literacy, in Motion Graphic Design: Applied History and Aesthetics,Focal Point, USA1. Introdução2. Elementos Gráficos3. Príncipios de Composição Visual4. Literacia do Movimento5. Tutoriais introdutórios6. Realização de exercício
  3. 3. Histórias do Title Designhttp://virtual-illusion.blogspot.pt/2013/04/historias-do-title-design.html
  4. 4. a história, anos 1950"The Man with the Golden Arm" (1955) de Otto Preminger, criado por Saul Bass
  5. 5. “Seven” (1997) de David Fincher, criado por Kyle CooperAnálise em detalhe: http://www.empireonline.com/features/david-fincher-fight-club-opening-credits/Renascimento nos anos 1990
  6. 6. Evolução do software 3d e de composição3ds MaxMayaSoftiamgeLighwaveCinema 4dAfter EffectsCombustionNukePhotoshop
  7. 7. “300” (2006) de Zack Snyder criado por Garson YuAnos 2000
  8. 8. Ponto e LinhaFormaCôrElementos gráficos
  9. 9. PONTOO ponto é a representação da partícula geométrica mínima da matéria e doponto de vista simbólico, é considerado como elemento de origem. O pontopossui formato, cor, tamanho e texturaLINHA RECTA (vertical, horizontal, oblíqua)Como elemento conceptual, poderíamos definir a linha como um ponto emmovimento, ou como a memória do deslocamento de um ponto, isto é, a suatrajetória.Como elemento visual, não só tem comprimento como largura. Sua cor etextura são determinadas pelos elementos que são utilizados para representá-lae pela maneira como é criada.
  10. 10. ÂNGULO - Quando as linhas se quebram, formam os ÂNGULOS.ÂNGULO RECTODe acordo com Kandinsky, “é o mais objetivo de todos, pois entre os agudos eos obtusos, é o único que existe em um só grau”. É o mais frio, estável e durode todos.ÂNGULO AGUDO (fechados),Percebemos uma forte tensão. A sensação de incisão. O desejo de abrir-se, dedesabrochar. 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 dequem já se abriu. É um ângulo acolhedor, passivo e relaxado.
  11. 11. A LINHAAs linhas curvas dominam o território dos sentimentos, da suavidade, daflexibilidade e do feminino. O redondo, o curvilíneo, o ondulante, encontram-seem oposição ao caráter racionalizante da linha reta e angulosa, que focaliza avontade e o controle.Quanto maior é essa pressão lateral e contínua exercida sobre a linha, maisesta se desvia até fechar-se em si mesma, formando um círculo. Essa pressãolateral 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 semretorno. Para a linha curva, flexível, há a possibilidade de encontrar-se com oseu começo, gerando um círculo, que é a representação do todo.
  12. 12. O PLANOComo elemento visual, possui comprimento e largura, tem posição e direção, élimitado porlinhas e define os limites extremos de um volume. Em uma superfíciebidimensional, todas as formas planas que não são comumentereconhecidas como pontos ou linhas, são formas enquanto plano.1 - Planos Geométricos – Constituídosmatematicamente.2 - Planos Orgânicos – Limitados porcurvas livres, sugerindo fluidez ecrescimento.3 - Planos Retilíneos – Limitados porlinhas retas que não se relacionam umascom as outras matematicamente.4 - Planos Irregulares – Limitados porlinhas retas e curvas que também não serelacionam umas às outrasmatematicamente.5 - Planos Caligráficos – Criados semauxílio de instrumentos, composto porlinhas orgânicas.6 - Planos Acidentais – Determinado peloefeito de processos especiais ou obtidosocasionalmente.
  13. 13. Composição de formas
  14. 14. Formas positivas e negativasA forma é geralmente apresentada como que ocupando o espaço, mas também pode servista como um espaço vazio circundado por espaço ocupado.a
  15. 15. CorSabemos que as suas propriedades afectam fortemente o sistema nervoso masque estes efeitos são bastante subjectivos, ou seja variáveis de pessoa parapessoa.Para definir a cor temos três parâmetros:Tom - nomes das coresSaturação- saturação do tom (mais preto)Brilho – claridade da côr (mais branco)ComplementaresSão as cores que se encontram nasantípodas da roda. Ex. Verde-VermelhoAnálogasSão as cores adjacentes a cada uma naroda das cores
  16. 16. VERMELHO“Bright red is like visual caffeine. It can activateyour libido, or make you aggressive, anxious, orcompulsive. In fact, red can activate whateverlatent passions you might bring to the table, orto the movie. Red is power. But red doesn’tcome with a moral imperative. Depending onthe story’s needs, red can give power to a goodguy or a bad guy. After all, both the WickedWitch and Dorothy wore the ruby slippers.Because we tend to see it first, red gives theillusion of advancing toward us. Due to this, itcan manipulate our sense of space.Because bright red has this visually aggressivequality, the space does indeed appear to comeforward, and it looks shallower than it actually is.Red can also make something appear to movefaster.”
  17. 17. Cor e StorytellingAMARELO“Yellow is a contrary color. That’s your first clue, orwarning. One of the reasons yellow is the color usedfor caution signs is that it’s visually aggressive. Itappears to come toward you. We’ve built it into ourconsciousness as a cautionary color. Venomousreptiles and amphibians often are yellow—a warningto all who come near, a big beware built into ourgenetic code.It is also the color we identify with the sun. Weassociate yellow with powerful life energy exuberanceitself. In whatever situation you find it, or wherever itis, bright yellow can be the scene-stealer, alwaysclamoringfor attention.“Yellow is the color longest remembered and mostdespised". This is an interesting parallel to thecolor associated with happiness.”
  18. 18. Cor e StorytellingAZUL“Blue can be a tranquil lagoon or a soft blanket of sadness.It is quiet and distant. Year after year, our colorinvestigations show that in a blue environment, peoplebecome passive and introspective. It’s a color tothink to, but not to act.Blue is the quintessential color for powerlessness. Even avery pale blue has an amazing ability to influence ouremotional reactions to what is happening on screen.Sadness, melancholy, harmony. Because of its tendency toeffect inertia, blue is rarely used as a dominant color.Blue can have seemingly contradictory traits becauseit’s the coldest color in the spectrum. The slightestchange in that color, therefore, can completely alter howyou respond to it. Perhaps blue, statistically, is everyone’sfavorite color because each person thinks of it in a differentway. It is also why you need to make certain that the blueyou choose will create the response you want. Don’t justdescribe it. Test it on your “audience” and then decide.”The Cider House Rules(1999) de Lasse Hallström
  19. 19. Cor e StorytellingLARANJA“Orange manifests its influence in a different way from theother colors. While red says “I’m here!,” yellow is exuberant,and blue is laidback, our research revealed that orange isgenerically “nice”. Actually, of all our investigations, opaqueorange was the most upbeat and least dramatic of the colors.The color simply supported a warm and welcomingcongeniality. How we feel at sunset is not just a romanticizedcliché. Something actually happens to us physically when wewatch the intense brightness of the near-white sun transformitself into a glowing rich orange in the sky. Glowing orangelight (and its associations with the sun) can take us on avisceral ride that warms and expands our emotional field.Terra-cottas, siennas, ochres, and umbers have a kind ofprimal influence in how we react to them. We respondpositively to the colors of the earth.”
  20. 20. Cor e StorytellingVERDE“Green is really a dichotomous color. It’s the color offresh vegetables and spoiled meat. Perhaps itsduplicity comes from our earliest times on this planetwhen green signaled both food and danger. Green cansignal health and vitality or danger and decay.We have strong aversion to green in liquid form (SnowWhite and the Seven Dwarfs (1937); The VirginSuicides (2000)). When associated with the humanbody, green’s clue is often illness or evil. How oftenhave you heard, “Are you okay? You look green.” Whenwe first see the Wicked Witch of the West as MissGulch in The Wizard of she is in black and white. Weknow she’s bad, but when the film turns to color and wesee her in green, she becomes virulent.Because of green’s ambivalent nature, it is important tobase your decision on which green to use in aparticular scene on how the audience is going torespond to it..”
  21. 21. Cor e StorytellingPÚRPURA“There have been times, particularly in romantic talesand poetry, when purple has been associated withsensuality. I suspect that may be because of the color’sassociation with imbibing the grape. However, duringour more than twenty years of research into the effectsof color on behavior, purple was not once associatedwith sensuality. In fact, there seemed to be no realevidence of purple’s having an effect in the physicalrealm at all. The color did, however, hold a powerfulsway in the realm of the noncorporal, the mystical, andeven the paranormal.the association with the royal and regal comes from thefact that violet is the most difficult color to come by innature. Its very scarcity associates it with the raretrappings of emperors, kings, and queens.”
  22. 22. Centro de interesseCoerência e unidadePerspectivaRitmoPonto focalPríncipios da composiçãovisualO processo de composiçãovisual é o processo deplaneamento, ordenamento earranjo dos elementos visuaisnum plano visual.
  23. 23. Centro de interesseRefere-se ao controlo exercido pelo artista sobre o objecto para condicionar oolhar do receptor. Esse controlo pode ser exercido através do tamanho, cor eposicionamento dos elementos visuais no objecto.
  24. 24. Coerência e unidadeA coerência pode reger-se por elementos do conteúdo do objecto (pedras) ou emais interessante para o que aqui se discute pela unidade dentro dos elementosvisuais (linhas, cores, formas...).
  25. 25. PerspectivaServe a criação de profundidade de campo, ou seja de tridimensionalidade dacomposição e para tal no desenho, os objectos mais distantes são desenhados maispequenos, e perdem a definição.
  26. 26. Ritmo (repetição)Refere-se ao modo como os objectos aparecem repetidos e em padrões nas imagenstornando a sua percepção visual mais fácil.
  27. 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 deforça da imagem e como orientadores naturais do olhar humano.Ponto FocalRatio de ouroSimplificado na Regra dos Terços
  28. 28. Estética(o belo)monotonia caossimilaridade extremavariedade insuficientehypo-excitânciadiferença extremaunidade insuficientehyper-excitância
  29. 29. Literacia do MovimentoEspaço e tempoCredibilidade do movimento
  30. 30. Literacia do movimento“universal system ofcommunication, combining thevisual, sonic, and kineticaspects into a synchronized,multi-sensory experience, andthat language now becomes anew realm meaningfulintegration with all otherelements “the designer’s awareness of the“plasticity” of time, andconsequently, the designer’sability of manipulating time—realtime, its representation, andperception—through motion,sequentiality, and multiple-channel correspondence(multimediality).”Jan Kubasiewicz Storyboard de Alexander Nevsky (1938)de Sergei Eisentstein
  31. 31. “Currently, the integration of motion andtypography is perhaps the mostextensively exhibited practice of motiondesign.Adding motion and time dimensions totypography is to add new possibilities tothe imaging of verbal language. Kinetictypography complements traditionaltypography by exploring “real-time”visualization in a spirit of phoneticproperties of spoken language, such asspontaneity, intonation, etc....motion is not the purpose for its ownsake but a way of serving the purpose ofcommunication, and since design requiresequilibrium of nonmotion and motion,absence of motion is just a case ofpotential motion. "Jan KubasiewiczLiteracia do movimento
  32. 32. Espaço e tempo1. Posicionamento2. Tamanho3. Orientação dos elementos4. A direcção em que se deslocam5. A forma como influenciam outros movimentos6. A relação com os limites do enquadramento7. A mobilidade do enquadramento8. Velocidade linear9. Velocidade não-linear10. Velocidade Alterada
  33. 33. Credibilidade do movimento8 dos 12 Princípios da Animação da DisneySquash and Stretch – Comprimir e esticar: O princípio tem como função mostrar peladeformaçã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 ouum 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 sedesloque a alta velocidade e é parado de maneira brusca tem a massa do seu corpo deslocadalevemente para frente pela inércia.Slow In and Out – Aceleração e desaceleração: Princípio básico da dinâmica aplicada aanimaçã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 maisnaturais e realistas.Secondary Action – Ações secundárias: Uma ação realizada pode desencadear outrosmovimentos.Timinig and Motion – Tempo e movimento: A mesma ação realizada em velocidades diferentespode passar a idéia de sofrimento ou mesmo humor.Exaggeration – Exagero nos movimentos: Usar movimentos bruscos e expressões faciais paraampliar os movimentos e exagerar as emoções e reacções.
  34. 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 formasde 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 elementovivo, ao personagem, dada a sua não rigidez.
  35. 35. 2. Anticipation - antecipaçãoMovimentos que preparam a audiência para uma acção que o personagem se prepara para realizar, talcomo começar a correr, saltar ou mudar de expressão. ex. uma bailarina não salta, sem antes preparar oimpulso; uma acção para atrás acontece sempre que uma acção para a frente é executada.
  36. 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, umpersonagem que esteja a correr a alta velocidade e é parado de maneira brusca tem a massa do seucorpo deslocada levemente para frente pela inércia, assim como seus cabelos e roupas.
  37. 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 objetosprecisam de tempo para começar a mover-se e para parar. São poucos osobjetos ou elementos que começam um movimento na velocidade final. Namaioria dos casos é necessário um tempo de aceleração e desaceleração paraatingir o movimento ou repouso.
  38. 38. 7. ArcsTodas 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 maisnatural e uma melhor fluidez de movimento.
  39. 39. 9. Secondary Action – Acções secundárias:Aqui o princípio é simples, uma acção realizada por um personagem podedesencadear outros movimentos. Por exemplo, ao caminhar um personagemgera deformações e movimento nas suas roupas e no seu cabelo.
  40. 40. 8. Timinig and Motion – Tempo e movimento:Princípio que atribui significado ao movimento. A mesma acção realizada em velocidadesdiferentes pode passar a idéia de sofrimento ou mesmo humor. Tudo depende da interpretaçãodo animador sobre o contexto da acção na história.
  41. 41. 10. ExaggerationO exagero não é a distorção completa do desenho, ou acções violentas a todo o momento. è antesalgo que se aseemelha mais com o efeito caricatural das caras, expressões, poses, atitudes eacções. O objectivo é pegar numa acção realista copiada do real e conferir-lhe algumagraciocidade exagerando os arcos do movimento, ou o squash and stretch das expressões.
  42. 42. Credibilidade visual do movimento gráficohttp://www.youtube.com/watch?v=xqGL1ZLk3n8
  43. 43. Tutoriais introdutó rios em After Effects1 – Intro a animaç ão2 – Efeitos3 – Texto
  44. 44. Brief Guide About Bridesmaids - Vancouver Film School (VFS)http://www.youtube.com/watch?v=T7wfVgufKTo

×