Changes in animation

Page 1

Guia de animação


Mudanças em Animação Adaptação da tese “A Systemic Functional Approach to the Analysis of Animation in Film Opening Titles” por Gisela Leão

Larissa Constantino Martins de Oliveira

Universidade Federal de Pernambuco dDesign, Centro de Artes e Comunicação Recife, julho 2016


Trabalho de Conclusão de Curso apresentado ao Departamento de Design da Universidade Federal de Pernambuco como requisito para a obtenção do Grau de Bacharelado em Design.

Orientadora: Gisela da Costa Lima Carneiro Leão Banca composta por: André Neves Tulio de Melo Couceiro


agradecimentos


Agradecimentos A Minha mãe, que me auxiliou em tempos de tristeza e alegria. Minha amiga de sempre. A Gisela Leão, professora que me ajudou nessa jornada de conclusão de curso, sempre me orientando a procurar os melhores caminhos. Agradeço também pelo conteúdo que me foi cedido e pela paciência. A Becka Barker, professora de animação da NSCAD University que me inspirou com sua persistência e boa vontade, me ensinando a planejar e executar os métodos de animação, sempre me incentivando a experimentar coisas novas. A Hans Waetcher, por ser um excelente professor durante todo o curso. A NSCAD University que me proporcionou um dos melhores anos da minha vida. A Túlio Couceiro que através de sua paciência me ajudou em meus projetos relacionados ao motion design, me emprestando seus arquivos ou ainda me tirando todas as dúvidas. A Eduardo Martins, que foi além de chefe, um grande incentivador nos meus caminhos dentro do motion design e dentro da In Loco Media. A Barbara Lemos, pelo incentivo de sempre. A todos os professores do curso que me ensinaram que o design pode mudar o mundo.


sumรกrio


Sumário

08 10 12 14 21

Introdução Objetivos Metodologia Introdução ao Projeto Análise de Similares

27 30 37 42 46 50 50

Conceitualização Separação das Categorias Storyboard Roteiro Execução Considerações Finais Referencias Bibliográficas


Introdução


Introdução O cinema sempre fez parte da minha vida. Não só o cinema imagem, como também o cinema design. Nas aberturas dos filmes estão os primeiros elementos que contam o que vai acontecer, celebrando a experiência fílmica na primeira impressão. Do contato com as películas, surgiu meu interesse pelo movimento. As letras que se movimentam, as formas e as imagens que se movem. No meio disso tudo, nasceu a paixão pela animação. O que antes era considerado um processo difícil e trabalhoso, hoje é facilitado por meio de softwares de composição que permitem ao designer o acesso ao filme. Depois de participar do Ciência Sem Fronteiras, programa de intercâmbio patrocinado pela CAPES, pude entender e experimentar melhor os métodos de animação, a compreensão dos processos despertou uma curiosidade imensa sobre o tema. Graças a Becka Barker, minha querida professora de introduction to animation da NSCAD University, tive contato com ferramentas analógicas e digitais e pude ver, já nas minhas primeiras produções, o resultado. Voltando ao Brasil, não queria que meus projetos de animação acabassem e logo que entrei na disciplina de semiótica, encontrei uma oportunidade para prosseguir meus estudos na área. Entre conversas com a professora doutora Gisela Leão, descobri a tese de doutorado “A Systemic Functional Approach to the Analysis of Animation in Film Opening Titles” (2013), de sua autoria, e alguns caminhos foram se abrindo durante a leitura da mesma. O conteúdo me agradou bastante e nele achei uma maneira entre a teoria e à prática para desenvolver o meu projeto de conclusão de curso.


Objetivos Principais Esse projeto tem por objetivo principal animar algumas das mudanças encontradas no capítulo 5 da tese "A Systemic Functional Approach to the Analysis of Animation in Film Opening Titles" (2013), simplificando a linguagem e o conteúdo encontrados no mesmo e tornando-os acessíveis aos designers de animação iniciantes.

Objetivos Específicos Desenvolver minha prática de animação experimentando e produzindo. Disseminar o conhecimento sobre o motion design com a simplificação do capítulo 5 da tese "A Systemic Functional Approach to the Analysis of Animation in Film Opening Titles" (2013). Contribuir para a educação de designers de animação para a melhoria de sua prática.

Justificativa O projeto surgiu com a vontade de aprender mais sobre o motion design e as variadas formas que ele pode tomar. A minha vontade de me especializar e trabalhar na área também contribuiu para a realização deste TCC. Com o desenvolvimento do trabalho, pude me aprofundar na teoria do design movimento e também praticá-lo. Outro fator importante é a carência de informações relacionadas ao tema. Com o projeto posso facilitar e contribuir para que outros designers de movimento iniciantes encontrem material disponível e relevante para que se informem mais e aperfeiçoem sua prática.


A animação foi desenvolvida em inglês devido ao público alvo desejado: estudantes de design do mundo todo que estejam interessados em aprender mais sobre o motion design e as mudanças ocorridas dentro da animação. Validar o motion design como uma solução de design de informação para os dias atuais também foi levado em conta. Cerca de 80% de todo o tráfico na internet em 2019 será em vídeo, segundo o Cisco Visual Networking Index: Forecast and Methodology. A movimentação de conteúdo na internet que antes já era facilitada pelos infográficos, hoje também é mantida pela circulação de vídeos, o que me levou a decisão de manter essa animação disponível na internet para que todos possam ter acesso.


metodologia


Metodologia introdução do projeto 01 Projeto de Animação 02 Estudo de Similares 03 Definição do Projeto

Referencial Teórico 01 Chapter 5 - Animation: Definition and Structure

análise de similares 01 Estudo de Projetos com temática semelhante

conceitualização 01 Organização das categorias 02 Escolhas estéticas

storyboard 01 Criação de Roteiro e Storyboard 02 Experimentações com o roteiro estabelecido

Execução 01 Animação no After Effects

publicação na internet


Introdução do projeto


introdução do projeto

Durante minha busca em aprender mais sobre como animação e design podem caminhar juntos, sempre tive em mente a produção de uma animação para o meu projeto de conclusão de curso. Após longas conversas com a professora Gisela Leão, me interessei pela animação de infográficos e por instalações que usam projeções e mapeamento de animações como apoio. Após Gisela me apresentar sua tese, decidi que o melhor caminho seria corroborar com alguns fundamentos apresentados na tese referida e representar-lhe por meio da animação. Era uma forma de entender a teoria e praticar a mesma. Posteriormente, optei por abordar na minha animação as categorias de mudanças apresentadas no capitulo 5 da tese, de forma educativa para designers iniciantes. O próximo passo foi pesquisar em livros animações similares e conversar com a autora sobre a melhor forma de apresentar o conteúdo.


referencial Teรณrico


referencial teórico

“Chapter 5 defines animation as a concept consisting of not only movement (change of place) but also changes of luminance and form. It presents the animation/change resources system as a system of options, consisting of ‘elements and changes’, which are the structural components, or ‘lexicon’ of animation.” (Leão, Gisela, 2013 ,p.179 )

Segundo a autora, animações são feitas de elementos que podem ser verbais, figurativos e abstratos. Esses mesmos elementos realizam mudanças. A partir desses primeiros conceitos podemos levar em conta as subdivisões feitas nesse projeto. As três mudanças principais são: Mudança de Luminosidade, Mudança de Movimento e Mudança de Forma. Ao entender as diferenças, podemos dar sentidos a elas baseados em seu contexto. Entender essa forma de categorização criada por Gisela foi o primeiro passo do projeto.


MOTION GRAPHICS

“Motion graphics poderia ser descrito, portanto, como uma aplicação mista de tecnologias de computação gráfica e vídeo digital; e no plano conceitual, como um ambiente privilegiado de exercício de projeto gráfico através de imagens em movimento.” (Velho, João, 2008, p.18)

“Motion Graphics, Motion Design, Broadcasting Design and Time-based Design are associated with time-based media and animation. They are activities that develop multimodal communication. They transmit a message through different modes (sound, visual both verbal and pictorial, animation and colour).” (Leão, Gisela, 2013, p.28)

Segundo João Velho (2008), o motion design é ponto de encontro entre o gráfico e o movimento, onde os elementos gráficos se apoiam no movimento para dar completemento ao objetivo final. Por esse fator, os primeiros vestígios do motion graphics se encontram nas aplicações de design gráfico no cinema e na TV. Saul Bass foi um dos primeiros grandes designers de movimento. Suas cultuadas aberturas de cinema trouxeram uma nova perspectiva do que o design poderia trazer de contribuição no filme. Além de Saul Bass, outros grandes designers contribuiram para a história do motion design, entre eles está Maurice Binder, o criador das famosas aberturas da série 007; Pablo Ferro, criador da famosa abertura de Dr Strangelove e Terry Gilliam, responsável pela abertura de Monty Python também ajudaram a construir a história do cinema e do motion design.


Quadros da abertura de “The man with the golden arm�, Saul Bass - 1955


Mudanças de luminosidade

Quadros da abertura de “Dr Strangelove”, Pablo Ferro - 1964


anĂĄlise de similares e referĂŞncias


análise de similares

Para a produção e início da conceitualização, pesquisei alguns casos da galeria de animações do Vimeo. Eles me guiaram, um a um, até um possível resultado. Desta pesquisa, algumas animações foram selecionadas dentro do que eu esperava produzir para esse projeto.

Quadros da Animação Swissted do designer Mike Joyce que trabalha com a produção de posters de rock adaptados para o design modernista suiço. O uso de formas geométricas e limpas foi um dos pontos que deternimei para a minha animação.


Quadros da animação do logo da empresa de TI “Integrated Research Limited” pelo estúdio de design Interbrand Australia. Essa animação também apresenta como caracteristicas o uso de formas simples e geométricas.

Quadros da animação A Brief Lesson on Color Theory da designer Rhea Lelina Manglapus para a School of Visual Arts. Por se tratar de um guia de cores, essa animação me ajudou bastante na hora de selecionar e representar o meu objetivo, que era a simplicifação da tese anteriormente referida.


Quadros da animação The Illusion of Life do estúdio de design Cento Lodigiane. Trata-se de uma animação produzida para ilustrar os 12 principios da animação clássica definidos pela Disney.


Quadros da animação Mozart in the Jungle do estúdio de motion design Chips. Essa animação é um ótimo trabalho de sincrônia entre som e imagem.

Posters com referências ao design modernista suiço foram ótimas fonte de inspiração.


Quadros da animação Tiny Story do estúdio de motion design Sebas and Clim. O projeto baseia-se em ilustrar emoções a partir de formas geométricas e possui um ótimo apelo visual na demonstração de suas categorias.


conceitualização


formato Na animação, optei pelo formato de vídeo 1920 x 1080 (16:9), padrão para HDTV (bastante popular), e o frame rate de 24 fps. Fiz todo o trabalho de motion design seguindo a “safe area" de tela como guia para a movimentação.

1920x1080 (padrão HDTV) Grade de segurança 24fps .mov

A escolha do uso das cores primárias azul, vermelho e amarelo como cores principais deu-se devido a minha vontade de fazer algo que se assemelha-se ao design de cunho modernista.

Vermelho #f26347 Azul #28bfcf Amarelo #f2bf19 Quadro da animação que utiliza as cores de apoio


A principal fonte utilizada em todo o projeto foi a Open Sans nas versões light, light italic, regular e bold. A fonte Theremin é ultilizada em um momento chave da animação.

Open Sans abcdefgrijklmnopqrstuxyz abcdefgrijklmnopqrstuxyz theremin abcdefghijklmnopqrstuxyz


0rganização das categorias A partir do conteúdo encontrado no capítulo 5 da tese A Systemic Functional Approach to the Analysis of Animation in Film Opening Titles (2013) pude dividir e selecionar as partes que achei necessárias para apresentar e simplificar a tese para designers de animação. Em uma primeira versão, fiz uma organização geral do conteúdo com tudo o que achei mais importante.

Português

Palavras

Paragrafos

Créditos

Outros Idiomas

Frases

Bloco de texto

Não fazem parte dos créditos

Elementos Verbais

Não ficcionais

Vivos

Humanos

Ficcionais

Não vivos

Não Humanos

Ponto

Volume

Linha

Plano

Figurativos

Elementos Não verbais

Abstratos


organização das categorias

Mudança de Posição Sentido horário

Centralizado

Sentido anti-horário

Polarizado

Rotação

Mudança de Posição e o espaço

Área de trajetória

Pathway

Direita

Horizontal Esquerda

Retilíneo

Pontual

Diagonal

Plano

Para cima

Vertical Para baixo

Linear

Translação

Volume

Horizontal

Curvado Diagonal

Instantâneo

Tempo Gradual


organização das categorias

Instantâneo

Tempo Gradual

Mudança de Luminosidade Integral

Espaço Sequencial

Conectado

Hue

Opacity

Contrast

Colour

Kind

Bending

Blurring

Folding

Stretching

Reshape

Mudanças de Forma Decreases

Rescale Increases

Desconectado


organização das categorias

Já em uma segunda versão, enxuguei todo o conteúdo a fim de que ele contemplasse apenas o necessário para a animação principal.

Elementos

Verbais

Figurativos

Abstratos

Tempo

Gradual

Instantâneo


changes of position

Change of Position

Pathways

Clockwise

Counterclockwise

Horizontal

Vertical

Diagonal


changes of form

Change of Form

Increases

Rescale

Reshape

Decreases

Bending

Stretching

Blurring


changes of luminance

Change of Luminance

Colour

Brightness

Contrast

Hue

Saturation

Opacity


Storyboard


storyboard 01

O primeiro storyboard foi bem mais geral, mas feito com base em muita experimentação para guiar a distribuição das categorias. Foi feito o animatic (versão animada e simplificada do storyboard) dessa primeira versão.

Text

Elements

Changes of Movement General Space

Displacement

Individual Space

Movement

Pathway

Right

Right

Down

Up

Clockwise

Counter-clockwise


storyboard 01

Changes of Luminance Gradual

Instantaneous

Brithness

Hue

Shaddow

Tint

Changes of Form Saturation

Contrast

Rescale

Rescale

Rescale

Reshape

Changes of Perspective

Folding

Or you can have it all Streching

Rescale


storyboard 02

Já o segundo storyboard foi mais específico, tirei todo o excesso. As categorias estavam, a partir daí, separadas, mas eram ainda numerosas. Também fiz o animatic dessa versão do storyboard.

A Translation

Changes of Position

Motion Pathway Translation

Translation

Pathway: Diagonal Direction: Up to Down

Changes of Position

Changes of Position Trace


storyboard 02

A

Changes of Luminance

Brightness

Changes of Luminance

Saturation


roteiro


roteiro O roteiro foi feito baseado no conteúdo da tese, de forma a simplificar o entendimento do que foi estabelecido, foi levado em conta a separação final das categorias. Esse roteiro foi gravado por um ator de voz do site especializado “Voice Bunny”. Houveram alterações de áudio durante a montagem da animação.

primeira parte: o que são elementos Unlike traditional cell animation, in Motion Graphics, Animation is a change. A change that happens to an element. These elements can be either verbal, figurative or abstract. There are many changes in motion graphics animation, but they can be brought together into three main groups: change of form, change of position and change of luminance. Each of these groups are composed from other kinds of sub-changes as we will see. In motion graphics as in physics, an element can change at various speeds. The changes can be gradual or instantaneous

segunda parte: Mudanças de posição The first kind of change is Change of Position, better known as movement or kinetics. It happens when an element changes position on the screen in a period of time and in relation to the camera, like a text moving or a line rotating. The two basic kinds of physical motions are rotation and translation. When an element changes position in space, it follows a pathway. A pathway is composed by all the positions which an element passed through. The basic pathways can be horizontal, vertical, diagonal, clockwise or counterclockwise. But they can also be a mixture of these basic ones.


roteiro terceira parte: mudanรงas de luminosidade Change of luminance is the second kind of change. It involves changes on the surface of the image, but not on its structure. There are different changes of luminance such as change of color, brightness, contrast, hue and so on. For instance, an element can change its brightness. Brightness is the amount of light reflected by a particular color, it ranges from a scale of completely bright to completely dark Change of color is another change of luminance. Contrast is a human perception anomaly in which colors are affected by adjacent color Hue is the attrubute of a color, defined by its dominant wavelength and position in the visible spectrum, that distinguishes it from other colors. Saturation is the measure of the purity of a hue as determined by the amount of gray it contains Opacity relates to the way images materialize on screen.This applies to any element that appears or disappears on the screen without using motion.

quarta parte The third kind of change of form. This change happens when an element converts itself into another format or becomes different from what it was through form alteration. The two main changes of form are rescale and reshape. Rescale changes the size of an element in proportion, decreasing or increasing it. Reshaping can change the format of an element misshaping it or giving it perspective. Bending and folding occur when an element or part of it changes format from a straight form into a curved or angular one, or from a curved or angular form into a different form.


roteiro Stretching change of form occurs when an element or one of its parts is elongated as if a force is pulling part of the element, extending and distorting it. Blurring change of form happens when an element goes out of focus and smudges. So Animation is a combination of these three changes. An element can change luminance, transform and move at the same time.


execução


execução O projeto foi todo executado no after effects, software de composição da adobe, que disponibiliza uma vasta gama de ferramentas para a produção de animações. O processo foi basicamente experimental, de acordo com o roteiro anteriormente referido.


execução

Timeline do after effects concluida para renderização.


resultado


consideraçþes finais


considerações finais Produzir essa animação foi um enorme prazer, conhecer e praticar uma teoria de animação contribuiu muito para a minha formação profissional. O conteúdo da tese adaptada é bastante vasto e sou bastante grata por ter tido acesso a esse material. A área ainda é bastante carente no curso de design da UFPE em Recife e fico feliz por poder contribuir um pouco com meu projeto de conclusão de curso. Após a finalizar este ciclo, me sinto mais confiante como profissional de motion design, uma área que requer bastante persistência e interesse devido a grande quantidade de esforço que tem que ser empregado. O uso do after effects foi uma boa escolha, pois meu aprendizado foi melhorando durante a produção do artefato final. A escolha de ir experimentando no software a criação do artefato paralelamente ao roteiro foi boa nessa ocasião, mas em casos mais gerais esse formato não funcionaria bem. Neste caso específico acabou me ajudando a produzir mais livremente. É imprescindível a preparação do storyboard como guia de projeto, pois poupa bastante tempo na hora de produzir o artefato. Sem organização prévia não é possível um resultado satisfatório. Em linhas gerais, concluo com satisfação o resultado final, que atendeu a meus anseios de praticar e estudar a teoria de motion design de Gisela Leão.


referĂŞncias bibliogrĂĄficas


referências bibliográficas LEÃO, Gisela. A Systemic Functional Approach to the Analysis of Animation in Film Opening Titles, 2013. VELHO, João. Motion Graphics: linguagem e tecnologia – Anotações para uma metodologia de análise, 2008. MORIOSKA, Adams; STONE, Terry. Color Design Workbook, 2006. BLOCK, Bruce. The Visual Story: Creating Visual Structure of Film, TV, and Digital Media, 2007. MEYER, Trish; MEYER, Chris. Creating motion graphics with after effects, 2008. http://motionographer.com/inspiration/ http://vimeo.com/categories/animation http://www.artofthetitle.com/ https://www.youtube.com/watch?v=HMUKGTkiWik (acessado em 30 de junho de 2016) https://www.youtube.com/watch?v=M2ORkIrHUbg (acessado em: 2 de julho de 2016)



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.