Prévia do material em texto

<p>HISTÓRIA DA ANIMAÇÃO, ARGUMENTOS E FORMATOS</p><p>Aula 1</p><p>HISTÓRIA DA ANIMAÇÃO</p><p>Nesta aula, faremos uma viagem pelo tempo para entendermos como aconteceu a</p><p>evolução da animação ao longo da história.</p><p>INTRODUÇÃO</p><p>Olá, estudante!</p><p>Nesta aula, faremos uma viagem pelo tempo para entendermos como aconteceu a evolução da animação ao</p><p>longo da história. Observando as práticas do passado e como sua evolução ocorreu, poderemos entender a</p><p>importância da animação para o desenvolvimento e crescimento da sociedade, surgindo do nosso desejo de</p><p>reproduzir os movimentos das coisas que nos cercam.</p><p>Veremos que os “brinquedos ópticos” foram de grande importância para o cinema de animação, sendo</p><p>alguns deles utilizados até hoje, como singela forma de entretenimento. Entenderemos como a história da</p><p>animação está ligada também à criação da fotografia e do cinema, pois o processo de captar animação,</p><p>inicialmente, consistia em registros fotográficos de figuras desenhadas, conhecidos por fotogramas. Criando</p><p>uma reprodução desses fotogramas com velocidades de 16 ou mais reproduções por minutos, temos as</p><p>primeiras projeções cinematográficas.</p><p>Por fim, veremos como isso foi aplicado na indústria de animação e cinema e seus efeitos na sociedade</p><p>atual.</p><p>Vamos começar?</p><p>HISTÓRIA DA ANIMAÇÃO: CONCEITO, ORIGEM E EVOLUÇÃO PELOS</p><p>BRINQUEDOS ÓPTICOS</p><p>Neste bloco, você conhecerá mais sobre a história da animação, para melhor entendimento dos métodos, das</p><p>técnicas e tecnologias de representação gráfica / visual de movimentos, realizados desde os tempos mais</p><p>remotos da humanidade.</p><p>Conceito:</p><p>Para começarmos, iremos definir e entender o que é animação. O termo, de origem latina (animare),</p><p>significa “dar vida a algo”, no sentido de atribuir “alma” (anima), um sopro vital. E como podemos dar vida</p><p>a algo inanimado? Os seres humanos criam por meio de técnicas e ferramentas a “ilusão de vida”.</p><p>Origem:</p><p>Pelos estudos da Paleontologia, que é a ciência que estuda os seres vivos que habitaram a Terra em um</p><p>passado remoto, sabe-se que o homo sapiens sapiens se expressavam por imagens, já há cerca de 40 mil</p><p>anos. Os “artistas” dessa época criavam figuras enigmáticas e impressões do próprio corpo, além de</p><p>desenhar animais em movimento, como mostrado na Figura 1. Para muitos estudiosos, a repetição de</p><p>imagens torna evidente a intenção de representar movimentos.</p><p>Figura 1 | Desenho de rinoceronte em fuga feito a carvão há cerca de 32 mil anos.</p><p>Fonte: BAHIA, Ana Beatriz; BAHIA, Sophia. História da animação. 1. ed. Curitiba: Intersaberes, 2021. E-</p><p>book.</p><p>Prosseguindo em nossa viagem histórica, podemos observar na Figura 2 “animações” em desenhos feitos em</p><p>vasos de cerâmica da Grécia Antiga (520 a.C.). Conseguimos visualizar tanto na Figura 1 quanto na 2 frames</p><p>- quadros de representação de movimentos - dispersos horizontalmente, como evidência de ação contínua e</p><p>estágios sucessivos da cena.</p><p>Figura 2 | Vaso cerâmico de cenas de luta.</p><p>Fonte: BAHIA, Ana Beatriz; BAHIA, Sophia. História da animação. 1. ed. Curitiba: Intersaberes, 2021. E-</p><p>book.</p><p>Ainda na antiguidade, na China, já se utilizava o teatro das sombras, uma técnica de espetáculo teatral no qual</p><p>a história é contada pela manipulação de bonecos, manuseados por artistas posicionados entre a fonte de luz</p><p>e uma tela translúcida, em que as silhuetas (Figura 3) são projetadas e as cenas acontecem em um anteparo,</p><p>que faz o papel de cenário. Essa técnica continua sendo usada e reinventada por grupos de artistas em escolas</p><p>e brincadeiras infantis.</p><p>Figura 3 | Bonecos-guerreiros para teatro de sombras</p><p>Fonte: Wikimedia Communs.</p><p>Animação digital e brinquedos ópticos</p><p>A animação digital, como conhecemos hoje, tem origem nas lanternas mágicas e nos brinquedos ópticos.</p><p>As lanternas mágicas foram os primeiros projetores inventados e surgiram no século XVII, a partir de várias</p><p>personalidades e nacionalidades. Elas funcionam com uma caixa escura: uma luz interna que atravessa um</p><p>vidro circular, com uma imagem pintada, projetando-a em tela. Pode-se colocar objetos em diversas</p><p>posições para a projeção dar movimento a eles, como mostra a Figura 4.</p><p>Figura 4 | Ilustração da lanterna mágica</p><p>Fonte: Wikimedia Communs.</p><p>Em meados do século XIX, surgiram os brinquedos ópticos, a partir da descoberta de fenômenos de ilusão</p><p>de movimento em imagens, que até então não haviam sido exploradas. Iremos conhecer alguns desses</p><p>brinquedos e invenções relacionadas a eles:</p><p>Taumatrópio: é um brinquedo simples de ser feito e manipulado, funciona com um disco de papel com</p><p>cordões presos a dois extremos. Cada lado deve ter uma figura que, quando sobrepostas, se complementam.</p><p>Esticando e puxando os cordões, o disco gira rapidamente e gera-se a ilusão de sobreposição. Foi</p><p>desenvolvido pelo médico e físico inglês John Ayron Paris, em 1826.</p><p>Fenacistoscópio: Foi desenvolvido e patenteado pelo inventor austríaco Simon Stampfer, em 1833, e ficou</p><p>conhecido como “disco estroboscópico”. O instrumento é composto por um disco de papel e um palito, que</p><p>o atravessa no centro. Há uma sequência de imagens e fendas entre elas, e o observador deve girar em frente</p><p>a um espelho e olhar pelas fendas para ver a ilusão de movimento (Figura 5).</p><p>Figura 5 | Fenacistoscópio</p><p>Fonte: BAHIA, Ana Beatriz; BAHIA, Sophia. História da animação. 1. ed. Curitiba: Intersaberes, 2021. E-</p><p>book.</p><p>Zootropo: Foi criado por William Horner, em 1834. Permitia que vários espectadores simultâneos vissem a</p><p>ilusão criada e de forma mais nítida. Neste brinquedo, as imagens são dispostas em tiras de papel encaixadas</p><p>nas paredes internas de um cilindro com fendas, que possibilitam a visualização das figuras em movimento.</p><p>Ao girar o cilindro, tem-se a imagem nítida e a ilusão de movimento (Figura 6).</p><p>Figura 6 | Zootropo</p><p>Fonte: BAHIA, Ana Beatriz; BAHIA, Sophia. História da animação. 1. ed. Curitiba: Intersaberes, 2021. E-</p><p>book.</p><p>Flip-book: muito utilizado até hoje, e um dos objetos óticos mais fáceis de se fazer, usa a lógica de folhear</p><p>um livreto, em que as folhas trazem desenhos em sequência que decompõem um movimento e quando</p><p>folheadas rapidamente dão a ilusão de movimentação, como mostra a Figura 7.</p><p>Figura 7 | Flipbook</p><p>Fonte: Wikimedia Communs.</p><p>HISTÓRIA DA ANIMAÇÃO: EVOLUÇÃO PELA FOTOGRAFIA E CINEMA</p><p>Neste bloco continuaremos nossa viagem pelo tempo aprendendo mais sobre o desenvolvimento da</p><p>animação e suas conexões com a fotografia e o cinema. Para isso, voltaremos aos séculos XIX e XX, onde</p><p>veremos as principais técnicas desenvolvidas e algumas utilizadas até hoje.</p><p>Fotografia:</p><p>A fotografia é uma técnica que utiliza a luminosidade como base para a reprodução de imagens. A luz é um</p><p>dos elementos principais na composição fotográfica. A primeira fotografia impressa foi realizada em 1826,</p><p>pelo inventor francês Joseph Niépce, que conseguiu gravar em uma placa de estanho, após várias tentativas,</p><p>a imagem do quintal de sua casa, em Borgonha, na França. Ele utilizou o “Betume da Judeia”, um material</p><p>que endurece em contato com a luz. O registro levou 8 horas para ficar pronto e com baixa qualidade, para</p><p>os dias atuais, mas de qualidade excepcional para a 1ª fotografia de todos os tempos. (Figura 8).</p><p>Figura 8 | A primeira fotografia impressa</p><p>Fonte: Wikimedia Communs.</p><p>Calótipo de Talbot: Em 1840, Fox Talbot conseguiu criar um mecanismo de reprodução de imagens por</p><p>mais vezes, um negativo de papel. Era muito parecido com a revelação da fotografia comum, em que</p><p>imagens eram reproduzidas em um negativo e depois positivadas (Figura 9).</p><p>Figura 9 | Exemplo de fotografia obtida por meio de calótipo</p><p>Fonte: Toda Materia.</p><p>Praxinoscópio: foi inventado por Émile Reynald, em 1882, para superar as limitações do zootropo. Em vez</p><p>de as imagens serem vistas em pequenas fendas de um cilindro</p><p>dos demais aspectos deste personagem, tanto físicos como psicológicos,</p><p>para que ele seja construído de forma correta e padronizada pela equipe, além de fazer a descrição do model</p><p>sheet.</p><p>Seguem algumas sugestões:</p><p>Características psicológicas do personagem:</p><p>Você precisa definir como será esse personagem, se vai ser mais brincalhão, mais dramático ou mais irônico</p><p>e como ele poderá superar os obstáculos. Ele(a) será herói e protagonista da história. Você pode até pensar</p><p>em frases de efeito ou características medievais para ele(a). Neste contexto, caso sua escolha seja um</p><p>personagem feminino, podemos até imaginar uma mulher, guerreira, num estilo parecido com o da</p><p>personagem principal do filme Valente (Disney, Pixar 2012), a Merida. Ela tem um estilo que se encaixa</p><p>bem nessa narrativa de época medieval.</p><p>Entidade ou Espécie:</p><p>São diferentes formas que um personagem pode assumir (humanoide, não-humanoide e híbrido). pelo que</p><p>foi descrito, ele pode ser humanoide ou híbrido, para se encaixar melhor a narrativa. As possibilidades são</p><p>vastas e podem enriquecer significativamente a narrativa. Vou citar alguns exemplos para te ajudar em sua</p><p>escolha:</p><p>Personagem Humanoide: Rei Arthur - Um lendário rei britânico que se tornou o principal personagem nas</p><p>histórias arturianas e na lenda da Távola Redonda. Sua história é marcada por nobreza, coragem e liderança.</p><p>Personagem Híbrido: Fada dos Bosques - Essa criatura mágica seria uma híbrida de uma pequena e</p><p>graciosa fada com asas translúcidas e um ser humanoide. Na mitologia medieval, essas fadas eram</p><p>conhecidas por proteger as florestas e as criaturas que nelas habitavam. Vestidas com roupas tecidas a partir</p><p>de folhas e flores, elas seriam guardiãs das plantas e animais, espalhando magia para manter o equilíbrio na</p><p>natureza. Sua varinha mágica seria poderosa, capaz de curar plantas doentes, acalmar animais selvagens e</p><p>iluminar os caminhos dos viajantes noturnos. A Fada dos Bosques seria uma figura benevolente, associada à</p><p>harmonia entre os seres humanos e a natureza, desempenhando um papel vital nas histórias mágicas e</p><p>aventuras da época medieval.</p><p>Gênero:</p><p>Pode ter características masculinas ou femininas, tanto faz, mas se for mulher ela enfrentará muitas outras</p><p>questões, pois na época medieval as mulheres eram bem mais submissas e tinham pouquíssimos direitos</p><p>perante a sociedade. Então, isso também pode ser explorado, com dramas a mais para a história e mais</p><p>desafios a serem enfrentados.</p><p>Silhueta:</p><p>A silhueta deverá ser feita de forma bem distinta, a partir das escolhas feitas até agora, com relação ao</p><p>gênero e personalidade do personagem, para que fique sempre em destaque nas cenas, tanto em relação ao</p><p>cenário e aos objetos de cena, quanto em relação a outros personagens.</p><p>Realismo e Estilo:</p><p>O estilo e o realismo ficam livre, à sua escolha, mas se atente em detalhar o nível de realismo e o estilo, para</p><p>que a equipe entenda bem como será feito.</p><p>Paleta de Cores:</p><p>A paleta de cores desempenha papel fundamental na criação de atmosfera e estética e uma animação.</p><p>Provocam emoções e podem estabelecer o tom de uma cena ou história. Cores quentes como vermelho e</p><p>amarelo podem transmitir calor e energia, enquanto cores frias, como azul e verde, podem dar a sensação de</p><p>calma e serenidade.</p><p>Segue uma paleta que pode ser usada para este personagem (Figura 4):</p><p>Figura 4 | Paleta de cores.</p><p>Fonte: Elaborada pela autora, 2023.</p><p>Vestimentas e Acessórios</p><p>Para este personagem, podemos ter uma ampla gama de acessórios e vestimentas, a depender do gênero e</p><p>personalidade escolhidos. Precisamos definir bem seu armamento: uma espada mágica, um martelo mágico,</p><p>uma besta ou algum outro ferramental medieval se encaixam muito bem nesta narrativa.</p><p>Model Sheet:</p><p>A partir de todas os aspectos e características que você escolheu para o personagem até o momento, é</p><p>possível fazer o model sheet. Você pode desenhar ou descrever de forma detalhada o que estará representado</p><p>nele. A ficha-modelo deve conter: figura inteira do personagem em várias posições, volta de 180 graus,</p><p>close-ups faciais, modelos de mãos, detalhes dos trajes e as posições que o caracterizam.</p><p>Com essas dicas e sugestões, tenho certeza de que você fará as melhores escolhas para criar o personagem</p><p>principal para esta história. Mais uma vez te desejo sucesso em sua jornada de conhecimento e aprendizado.</p><p>Até mais.</p><p>Fonte: elaborado pelo autor.</p><p>PRINCÍPIOS BÁSICOS DA ANIMAÇÃO E ANIMAÇÃO DIGITAL</p><p>Aula 1</p><p>ANIMAÇÃO NO PHOTOSHOP</p><p>Conhecer processos e técnicas de produção de uma animação digital.</p><p>INTRODUÇÃO</p><p>Olá, estudante!</p><p>Nesta aula, exploraremos 3 tópicos-chave que irão expandir suas habilidades criativas e técnicas:</p><p>Animação Quadro a Quadro: conheça fundamentos da técnica de animação quadro a quadro, assim como</p><p>transformar uma série de quadros individuais em uma narrativa visualmente cativante;</p><p>Como exportar uma animação simples no Photoshop: aprenda a exportar animações no Photoshop</p><p>usando ferramentas disponíveis no software. Escolha as configurações corretas e gere os arquivos finais para</p><p>exibir suas criações;</p><p>Introdução à timeline (linha do tempo) do Photoshop e uso da ferramenta "tween", ou interpolação: a</p><p>linha do tempo do Photoshop permite controlar a duração e o ritmo das animações. A ferramenta "tween"</p><p>automatiza transições suaves entre quadros-chave. Veremos como usar a interpolação para adicionar</p><p>naturalidade às animações.</p><p>Prepare-se para elevar suas criações estáticas a um novo nível de expressão e engajamento. Ao final desta</p><p>aula, você estará pronto para dar vida às suas ideias, compartilhar suas criações e adicionar um toque de</p><p>magia às suas narrativas visuais!</p><p>Vamos lá?</p><p>IMPORTÂNCIA DOS CONCEITOS DE ANIMAÇÃO TRADICIONAL PARA</p><p>APLICAÇÃO EM AMBIENTE DIGITAL</p><p>Neste primeiro momento, iremos explorar conceitualmente os 3 pilares fundamentais que permitem</p><p>transformar criações estáticas em narrativas visuais empolgantes. Para começar, podemos observar que a</p><p>narrativa visual é uma forma de comunicação tão antiga quanto a humanidade em si. Desde a época das</p><p>cavernas, as pessoas usavam imagens para contar histórias e registrar acontecimentos importantes.</p><p>Animação Quadro a Quadro: Transformando Imagens em Histórias Vivas</p><p>Nossa jornada começa com a animação quadro a quadro, uma técnica que dá vida às imagens por meio da</p><p>sequência minuciosa de imagens desenhadas em quadros individuais.</p><p>A animação quadro a quadro (Figura 1) é uma técnica clássica manual de criação de movimento, em que</p><p>cada quadro é desenhado individualmente e exibido em rápida sucessão, para criar a ilusão de movimento</p><p>contínuo. Essa técnica possibilita controle preciso do movimento, permitindo que os animadores criem cenas</p><p>detalhadas e expressivas. Amplamente usada em filmes de animação clássicos, como os dos estúdios de</p><p>cinema norte-americanos Disney, bem como em curtas-metragens, vinhetas e projetos artísticos que buscam</p><p>uma estética única e artesanal.</p><p>Figura 1 | Animação Quadro a Quadro.</p><p>Fonte: Wikimedia Commons.</p><p>Aplicamos o mesmo conceito de animação quadro a quadro "feita à mão" no ambiente digital usando o</p><p>Photoshop. Você mergulhará nos princípios essenciais de tempo, ritmo e transição, que são responsáveis</p><p>por criar movimento suave e fluido (Figura 2). Além disso, você descobrirá como o arranjo estratégico de</p><p>cada quadro contribui significativamente para uma história visualmente atraente. Essa técnica permite que</p><p>suas criações transmitam emoções e significados de maneira impactante, criando uma conexão mais forte</p><p>com seu público.</p><p>Figura 2 | Animação Quadro a Quadro de um personagem girando</p><p>Fonte: Pixabay.</p><p>Exportando Animações no Photoshop: Compartilhando suas Criações em Movimento</p><p>Exportar animações no Photoshop é transformá-las em arquivos finais</p><p>prontos para compartilhar e exibir.</p><p>Após criar uma animação incrível, é crucial exportá-la para levar sua criatividade em movimento para além</p><p>da tela de edição.</p><p>Ao exportar sua animação, escolha as configurações apropriadas de formato e qualidade para manter a</p><p>clareza visual e fluidez do movimento. Se você planeja exibi-la em diferentes plataformas, como redes</p><p>sociais ou sites, as configurações de exportação são ainda mais importantes para garantir a compatibilidade</p><p>com a mídia de reprodução final. O Photoshop tem várias opções de exportação, desde GIFs (Graphics</p><p>Interchange Format) até vídeos em alta definição. Escolher as configurações corretas para manter a</p><p>integridade de sua animação é fundamental para ter uma versão final interessante e apropriada para</p><p>compartilhar.</p><p>Timeline e a Magia da Ferramenta "Tween": Criando Transições Fluídas</p><p>A "timeline" (Figura 3) em animação refere-se a uma linha do tempo visual que representa a progressão do</p><p>tempo em uma animação. É uma ferramenta essencial que permite aos animadores organizar, controlar e</p><p>editar os quadros-chave e os elementos animados ao longo da duração da animação.</p><p>No contexto do Photoshop e da animação, o termo "tween" se refere à interpolação de quadros</p><p>intermediários entre dois quadros-chave na timeline. A interpolação é uma técnica que cria uma transição</p><p>suave entre diferentes estados ou posições, tornando as animações mais fluidas e naturais, além de</p><p>economizar tempo.</p><p>Figura 3 | Timeline/ Interpolação (Linha do Tempo) - Adobe Photoshop</p><p>Fonte: Reprodução do software Photoshop, elaborada pela autora, 2023</p><p>AS ETAPAS NECESSÁRIAS PARA ESTRUTURAR E EXPORTAR UMA ANIMAÇÃO</p><p>DIGITAL UTILIZANDO PHOTOSHOP</p><p>Etapas básicas para criar uma Animação Tradicional que fundamentam a Animação Digital</p><p>A animação quadro a quadro é uma técnica trabalhosa, mas valorizada no mundo da animação por permitir</p><p>que o animador tenha controle total sobre o movimento e a expressão dos personagens. Veja as etapas</p><p>básicas para a sua criação:</p><p>1. Desenvolvimento da ideia: criar um conceito ou história para a animação. Isso envolve elementos da</p><p>história e um roteiro.</p><p>2. Storyboard: série de desenhos simplificados que representam cada quadro da animação, ajuda a planejar a</p><p>sequência de eventos e a composição visual, conforme a figura 4.</p><p>Figura 4 | Exemplo de Storyboard</p><p>Fonte da imagem: Wikimedia Commons.</p><p>3. Layouts e backgrounds (fundos): layouts detalhados para os cenários (Figura 5 – Backgorund) que</p><p>serão usados na animação garantem que o estilo visual seja consistente em todos os quadros.</p><p>4. Animação dos personagens: desenho de cada quadro individualmente, alterando ligeiramente a</p><p>posição/forma dos personagens, criando a ilusão de movimento (Figura 2). Isso é feito em folhas de</p><p>celuloide* (cel), permitindo que os personagens se sobreponham aos cenários (Figura 5).</p><p>* Folhas feitas de celuloide são um material transparente e flexível revestido com uma superfície que aceita</p><p>tinta ou tinta guache.</p><p>5. Pintura: colorir à mão os personagens e os cenários nas cels.</p><p>6. Fotografia: Cada quadro é fotografado individualmente com uma câmera de animação, com sobreposição</p><p>das cels compondo a cena (Figura 5).</p><p>Figura 5 | Esquema de animação Quadro a Quadro desenhada em folhas de Celuloide.</p><p>Fonte da imagem: Wikimedia Commons.</p><p>7. Edição: os quadros são compilados em uma sequência e editados. Efeitos e trilhas sonoras também são</p><p>adicionados nesta fase.</p><p>Animação Tradicional x Animação Digital</p><p>Cada tipo de animação possui suas características. Segue Tabela 1 contendo os detalhes principais:</p><p>Tabela 1 | Animação Tradicional x Animação Digital</p><p>Quesito Tradicional Digital</p><p>Meio de criação</p><p>desenho manual em papel ou cels</p><p>transparentes, fotografia de cada quadro.</p><p>criação de quadros em software de</p><p>animação, sem necessidade de desenho</p><p>físico em papel.</p><p>Eficiência e</p><p>correções</p><p>correções demoradas, criação de novos</p><p>cels.</p><p>correção e edição mais eficientes, ajustes</p><p>diretos no software.</p><p>Custos</p><p>mais cara, devido a materiais físicos</p><p>como papel, tintas e cels.</p><p>custos iniciais baixos, não requer</p><p>materiais físicos caros.</p><p>Flexibilidade</p><p>estilo artístico único, preferido para</p><p>projetos com visual tradicional.</p><p>maior flexibilidade em estilos visuais e</p><p>efeitos especiais.</p><p>Velocidade de</p><p>produção</p><p>mais lenta, devido à necessidade de</p><p>desenho manual.</p><p>produção mais rápida, eficiência na</p><p>criação e edição.</p><p>Fonte: Elaborada pela autora, 2023.</p><p>Exportar uma animação feita no Photoshop</p><p>Versões diferentes do Photoshop podem ter algumas variações nas etapas, mas o processo geral de exportar</p><p>uma animação segue os passos gerais:</p><p>1. Crie sua animação: Use a linha do tempo do Photoshop para criar sua animação. Adicione quadros-</p><p>chave, ajuste a duração dos quadros e crie transições.</p><p>2. Verifique as configurações de exportação: Para um arquivo simplificado acesse “Arquivo > Exportar</p><p>> Salvar para a Web (Legado)" (Figura 5).</p><p>Figura 5 | Menu para Exportar animação no Adobe Photoshop.</p><p>Fonte: Reprodução do software Photoshop, elaborada pela autora, 2023.</p><p>3. Escolha o formato de exportação: No menu de exportação, escolha o formato de exportação (Figura 6).</p><p>O GIF é comumente usados para animações simples. Outros formatos, como PNG (Portable Network</p><p>Graphic) podem ser escolhidos conforme a mídia em que a animação será utilizada.</p><p>Figura 6 | Formato de Exportação no Adobe Photoshop.</p><p>Fonte: Reprodução do software Photoshop, elaborada pela autora, 2023</p><p>4. Ajuste as configurações de exportação: Após escolher o formato, ajuste as configurações específicas.</p><p>Por exemplo, para um GIF, defina o número de cores usadas na paleta, Tamanho da Imagem e se a animação</p><p>será em Looping ou repetir Uma vez ou mais (Figura 7).</p><p>Figura 7 | Configurações de Exportação formato GIF, no Adobe Photoshop.</p><p>Fonte: Reprodução do software Photoshop, elaborada pela autora, 2023.</p><p>5. Visualize a animação: Antes de exportar, visualize como sua animação ficará após exportada apertando</p><p>no botão Visualizar (Figura 7).</p><p>6. Escolha o local de destino: Clique em "Salvar" ou "Salvar para a Web" e escolha um local no seu</p><p>computador para salvar o arquivo de animação (Figura 8).</p><p>7. Exporte a animação: Após escolher o local, clique em "Salvar" na janela de exportação. O Photoshop</p><p>criará o arquivo de animação e o salvará no local especificado (Figura 8). Após a exportação, verifique se a</p><p>animação está funcionando corretamente.</p><p>Figura 8 | Salvar animação formato GIF, no Adobe Photoshop.</p><p>Fonte: Reprodução do software Photoshop, elaborada pela autora, 2023.</p><p>Timeline e Interpolação (Tween do Photoshop)</p><p>A linha do tempo controla a duração, a ordem, as camadas e os efeitos de elementos, e permite que</p><p>animadores adicionem quadros-chave. Quadros-chave são pontos significativos em que ocorre uma mudança</p><p>na linha do tempo, e a ferramenta "tween" cria automaticamente os quadros intermediários entre dois</p><p>quadros-chave definidos. Esse processo, chamado de interpolação, suaviza o movimento de um objeto ou</p><p>personagem e o torna mais realista e fluido.</p><p>COMO CRIAR E EXPORTAR UMA ANIMAÇÃO SIMPLES UTILIZANDO</p><p>PHOTOSHOP</p><p>Para aplicar o que aprendemos de forma prática, para fins de estudo utilizaremos as seguintes: etapas:</p><p>1. Crie sua Animação de personagem/objeto:</p><p>• Ative a linha do tempo (Figura 9) do Photoshop para criar sua animação.</p><p>• Selecione “Criar animação de quadros” (Figura 10) no menu suspenso e confirme.</p><p>Figura 9 | Ativando a “Linha do Tempo” no Photoshop</p><p>Fonte: Reprodução do software Adobe Photoshop elaborada pela autora, 2023.Figura 10 | Ativando a</p><p>Animação por quadros no Photoshop.</p><p>Fonte: Reprodução do software Adobe Photoshop elaborada pela autora, 2023.</p><p>Fonte: Reprodução do software Adobe Photoshop elaborada pela autora, 2023.</p><p>• Utilize cada camada do Photoshop (simulam as folhas de celuloide) como um quadro da animação, altere</p><p>ligeiramente a posição/forma do personagem criando a ilusão de movimento.</p><p>• Transforme camadas em quadros na linha do tempo acionando o menu suspenso e escolha a opção “Criar</p><p>quadros a partir de camadas” (Figura 11).</p><p>Figura 11 | Transforme camadas em quadros na linha do tempo</p><p>Fonte | Reprodução do software Adobe Photoshop elaborada pela autora, 2023.</p><p>• Ajuste a duração dos quadros. (Figura 12). Pode ser feito individualmente ou selecionando todos os</p><p>quadros e alterando o tempo.</p><p>Figura 12 | Duração de cada quadro</p><p>Fonte: Reprodução do software Adobe Photoshop elaborada pela autora, 2023.</p><p>• Crie transições que fazem interpolação entre os quadros (Figura 13), podendo habilitar até 3 parâmetros:</p><p>opacidade, posição e estilo (efeito de contorno por exemplo) e a quantidade de quadros da interpolação, o</p><p>que vai aumentar em quantidade e tamanho do arquivo, mas deixará mais suave a transição.</p><p>Observação: é importante notar que o "tween" automático tem suas limitações e pode não funcionar</p><p>perfeitamente em todos os casos. Em algumas situações, pode ser necessário ajustar manualmente os</p><p>quadros intermediários para garantir que a animação flua da maneira desejada.</p><p>Figura 13 | Janela de configuração do Tween (Transição)</p><p>Fonte: Reprodução do software Adobe Photoshop elaborada pela autora, 2023.</p><p>2. Exportação</p><p>Feita a animação, é hora de exportar para poder visualizar o resultado final e compartilhar, conforme os</p><p>seguintes passos:</p><p>• Verifique as configurações de exportação: Para um arquivo simplificado, acesse “Arquivo > Exportar</p><p>> Salvar para a Web (Legado)" (Figura 14).</p><p>• Escolha o formato de exportação: No menu de exportação, escolha o formato de exportação GIF</p><p>e Ajuste as configurações de exportação.</p><p>• Visualize a animação: Antes de exportar, visualize como sua animação ficará após exportada.</p><p>• Escolha o local de destino: Clique em "Salvar" ou "Salvar para a Web" e escolha um local no seu</p><p>computador para salvar o arquivo de animação.</p><p>• Exporte a animação: Após escolher o local, clique em "Salvar" na janela de exportação. O Photoshop</p><p>criará o arquivo de animação e o salvará no local especificado. Após a exportação, verifique se a animação</p><p>está funcionando corretamente.</p><p>Figura 14 | Janela de Exportação - Salvar para Web (Legado)</p><p>Fonte: Reprodução do software Adobe Photoshop elaborada pela autora, 2023.</p><p>Sprites utilizados em jogos 2D são montados a partir de Quadros de Animação</p><p>Na animação, "sprites" (do latim spiritus, significando "duende", "fada") são elementos gráficos 2D usados</p><p>para representar personagens, objetos ou elementos em jogos de vídeo ou animações. São imagens</p><p>compostas por gráficos bidimensionais (Figura 15), incluindo personagens, inimigos, itens, cenários e</p><p>efeitos visuais. Os animadores e desenvolvedores de jogos usam sprites para criar a ilusão de movimento em</p><p>jogos e animações 2D. Isso é feito substituindo rapidamente os sprites em sequência, em vez de criar</p><p>animações complexas quadro a quadro, para representar os diferentes estados de um objeto ou personagem</p><p>durante o movimento.</p><p>Figura 15 | Exemplo de Sprites (Spiritus)</p><p>Fonte: Free SVG .</p><p>VIDEO RESUMO</p><p>Olá, estudante, convido você a assistir ao vídeo da nossa aula de animação e movimento no Photoshop!</p><p>Nela, abordaremos 3 tópicos principais: animação quadro a quadro, que dá vida a imagens estáticas;</p><p>exportação eficaz de animações; e uso da timeline com a ferramenta "tween", para fazer transições suaves.</p><p>Aprenda a criar sequências dinâmicas, exportar suas criações e usar a timeline para um controle preciso.</p><p>Prepare-se para uma jornada emocionante na transformação de imagens em narrativas visuais cativantes.</p><p>Vamos explorar o mundo do movimento e da criatividade no Photoshop!</p><p>Saiba mais</p><p>No site oficial da Adobe, na área Aprendizado e suporte do Adobe Photoshop é possível encontrar</p><p>conteúdo do básico ao avançado, divididos em 3 categorias:</p><p>• Introdução: Faça download, encontre ajuda para a associação e conheça os conceitos básicos.</p><p>• Tutoriais: Localize tutoriais, desde o iniciante até o especialista, para ajudá-lo a expandir suas habilidades.</p><p>• Guia do usuário: Obtenha respostas rápidas e instruções passo a passo.</p><p>Destacamos 3 tutoriais interessantes para desenvolver as habilidades adquiridas nesta aula:</p><p>Crie um GIF animado no Adobe Photoshop</p><p>Veja como a designer e criadora de conteúdo Kendall Plant dá vida a um de seus esboços, transformando-o</p><p>em um GIF.</p><p>Crie um efeito stop-motion* no Adobe Photoshop</p><p>Neste breve tutorial, veja como Aaron Bernstein anima suas fotos usando máscaras e a linha de tempo no</p><p>Adobe Photoshop.</p><p>* O termo "stop-motion" se refere ao processo de criar a ilusão de movimento ao parar (stop) e mover</p><p>(motion) objetos ou personagens. Cada quadro (fotografia) captura uma cena levemente alterada em</p><p>relação à anterior, e quando essas imagens são reproduzidas rapidamente, o movimento é percebido.</p><p>Anime uma ilustração no Adobe Photoshop</p><p>Veja como a pintora digital e designer de padrões Shyama Golden torna uma ilustração divertida mais</p><p>interessante com padrões animados.</p><p>Divirta-se usando toda sua criatividade para dar vida às suas artes!</p><p>Aula 2</p><p>INTRODUÇÃO AO AFTER EFFECTS</p><p>O After Effects é amplamente utilizado no mercado digital para criar conteúdo</p><p>versátil e empolgante para várias mídias.</p><p>INTRODUÇÃO</p><p>Olá, estudante!</p><p>Nesta aula, estudaremos o software After Effects da Adobe, a partir de 3 tópicos-chave:</p><p>Introdução ao After Effects: Software para criar efeitos visuais, animações e composições em vídeos,</p><p>fundamental na produção de conteúdo digital, adicionando movimento e gráficos em projetos audiovisuais.</p><p>Timeline do After Effects: Linha do tempo no After Effects, que é a representação visual da duração de um</p><p>projeto, onde elementos de vídeo, áudio e efeitos especiais são organizados.</p><p>Aceleração e Desaceleração e Elementos Gráficos Nativos: Aceleração e desaceleração são fundamentais</p><p>para animação, pois permitem criar movimentos mais naturais. Os elementos gráficos nativos do software</p><p>simplificam a criação de animações realistas.</p><p>O After Effects é amplamente utilizado no mercado digital para criar conteúdo versátil e empolgante para</p><p>várias mídias. Nesta aula, você aprenderá os fundamentos para utilizar este software e as possibilidades de</p><p>criação que ele oferece.</p><p>Vamos lá?</p><p>FUNDAMENTOS DO AFTER EFFECTS</p><p>Introdução ao Adobe After Effects: Desbloqueando o Poder da Animação Digital</p><p>O mundo da produção de conteúdo audiovisual passou por uma evolução notável desde a animação</p><p>tradicional, feita de forma analógica, até o uso de meios digitais, proporcionando-nos acesso a ferramentas</p><p>poderosas que nos permitem criar efeitos visuais e animações envolventes com mais praticidade. Uma</p><p>dessas ferramentas é o After Effects, que é amplamente utilizado na produção cinematográfica, em</p><p>programas de televisão, publicidade e na produção de conteúdo digital.</p><p>É importante destacar que o After Effects não é apenas uma ferramenta de animação, mas uma ferramenta</p><p>de pós-produção completa, que permite ao usuário aplicar efeitos especiais, criar composições complexas e</p><p>ajustar a cor e a iluminação de suas filmagens. O After Effects é fundamental para produtores audiovisuais.</p><p>Seu poder, flexibilidade e integração com outras ferramentas da Adobe (empresa multinacional americana</p><p>de softwares com foco em multimídia e criatividade) o tornam popular para criar projetos de alta qualidade e</p><p>com grande impacto visual.</p><p>Timeline do After Effects: O mapa para suas animações e composições</p><p>A linha do tempo, representação visual do tempo em que os elementos da animação são organizados e</p><p>sincronizados, é parte crucial do After Effects (Figura 1); ela permite o controle preciso e detalhado de cada</p><p>elemento em uma cena. Com ela, também é possível criar camadas e trabalhar com várias faixas de áudio. É</p><p>uma ferramenta flexível que permite</p><p>a edição e manipulação de elementos do projeto,</p><p>como adição ou remoção de clipes de vídeo, ajuste de tempo de áudio e aplicação de efeitos, como</p><p>dissolver a tela, chuva, alteração de cores, etc. Além disso, a linha do tempo permite experimentar diferentes</p><p>opções de sequenciamento e tempo para encontrar a combinação perfeita que melhor transmite sua</p><p>mensagem, incluindo a criação de efeitos visuais, animando objetos e aplicando transições entre diferentes</p><p>cenas</p><p>Figura 1 | Timeline (Linha do Tempo) do Adobe After Effects.</p><p>Fonte: Reprodução do software Adobe After Effects, elaborada pela autora, 2023.</p><p>Aceleração e Desaceleração e Elementos Gráficos no After Effects: Moldando movimentos</p><p>significativos</p><p>A aceleração e a desaceleração no contexto do After Effects referem-se aos princípios de animação que</p><p>envolvem a variação da velocidade de um elemento ao longo do tempo para criar movimentos naturais,</p><p>fluidos e impactantes.</p><p>• Aceleração: Este conceito diz respeito ao aumento gradual da velocidade de um elemento em um ponto</p><p>específico de sua trajetória. Imagine um objeto que começa lentamente e, à medida que avança, ganha</p><p>velocidade. A aceleração é crucial para adicionar dinamismo às animações, proporcionando uma sensação</p><p>de movimento realista.</p><p>• Desaceleração: Ao contrário da aceleração, a desaceleração envolve a diminuição progressiva da</p><p>velocidade de um elemento em um ponto determinado. Por exemplo, um objeto que desacelera ao se</p><p>aproximar de seu destino final. A desaceleração é essencial para suavizar transições e garantir que os</p><p>movimentos não pareçam abruptos ou mecânicos.</p><p>• Elementos Gráficos Nativos no After Effects: referem-se a recursos incorporados diretamente no</p><p>software para simplificar e agilizar o processo de criação de animações e composições visuais. Esses</p><p>elementos são como blocos de construção que permitem aos usuários adicionar complexidade e detalhes às</p><p>suas criações sem a necessidade de criar tudo do zero. Esses elementos podem incluir gráficos vetoriais,</p><p>formas predefinidas (Figura 2), efeitos de partículas, máscaras de recorte e muito mais. Ao utilizar</p><p>elementos gráficos nativos, os animadores podem economizar tempo e esforço, concentrando-se mais na</p><p>expressão de suas ideias e menos na construção minuciosa de cada elemento visual. Isso resulta em</p><p>animações mais eficientes, detalhadas e visualmente impressionantes.</p><p>Figura 2 | Ferramentas de Formas básicas nativas do Adobe After Effects.</p><p>Fonte: Reprodução do software Adobe After Effects, elaborada pela autora, 2023.</p><p>A IMPORTÂNCIA DA INTEGRAÇÃO DOS CONCEITOS PARA CRIAR NO AFTER</p><p>EFFECTS</p><p>A relação entre os conceitos apresentados no bloco anterior é fundamental para compreender as capacidades</p><p>do After Effects e como essa ferramenta revolucionou a produção de vídeos e animações.</p><p>Introdução ao After Effects:</p><p>Aprender os conceitos básicos do software é fundamental para criar animações e efeitos visuais de</p><p>qualidade. É necessário compreender a interface e as ferramentas do software, importar recursos, criar</p><p>composições e adicionar elementos gráficos para animação. Além disso, é importante conhecer conceitos</p><p>fundamentais, como camadas, máscaras e keyframes, para criar animações complexas e interagir entre</p><p>elementos.</p><p>Seguem ferramentas e recursos considerados mais fundamentais:</p><p>1. Composições: São como "projetos", em que você combina diferentes elementos, como camadas de vídeo,</p><p>áudio e efeitos.</p><p>2. Camadas: São os blocos de construção de sua composição. Você pode ter camadas de vídeo, áudio, texto,</p><p>formas, imagens etc. A ordem das camadas afeta a aparência final da composição.</p><p>3. Ferramenta Texto: Para adicionar texto às suas composições, use essa ferramenta. Ela permite criar,</p><p>formatar e animar textos diretamente no software.</p><p>4. Máscaras: Usadas para recortar, isolar ou ocultar partes de uma camada. São fundamentais para criar</p><p>efeitos de recorte e composições complexas.</p><p>5. Ferramenta Caneta: Usada para criar formas vetoriais personalizadas e máscaras de forma precisa.</p><p>6. Keyframes: Os marcadores que você define em propriedades, como posição, escala, rotação, opacidade</p><p>etc. Eles definem os valores em momentos específicos, e o software interpola os valores entre os keyframes</p><p>para criar a animação.</p><p>Timeline do After Effects:</p><p>Com a timeline, é possível criar animações precisas e envolventes, personalizadas de acordo com as</p><p>necessidades específicas de cada projeto. Por isso, a timeline é considerada o coração do After Effects, e</p><p>uma ferramenta crucial para criar animações e narrativas visuais profissionais. Características da Timeline:</p><p>• Organização: Permite organizar elementos em camadas ou faixas, facilitando a gestão de projetos</p><p>complexos.</p><p>• Controle Temporal: A timeline fornece controle total sobre a duração e sincronização precisa dos</p><p>elementos.</p><p>• Controle Criativo: Os animadores têm controle total sobre a duração de cada elemento e como eles se</p><p>relacionam no tempo, permitindo criar efeitos dramáticos e transições suaves.</p><p>• Cronologia da Narrativa: A timeline é onde a narrativa visual toma forma, organizando e sincronizando</p><p>os elementos para contar uma história.</p><p>• Keyframes: Permitem definir transições, movimentos e alterações ao longo da linha do tempo.</p><p>• Aceleração e Desaceleração: Ajuste de velocidade dos elementos na timeline para criar movimentos</p><p>realistas.</p><p>Aceleração e Desaceleração e Elementos Gráficos Nativos:</p><p>A aceleração e a desaceleração, juntamente com elementos gráficos nativos, são a essência da criação de</p><p>animações realistas e envolventes no After Effects. Elas dão vida a objetos e personagens, tornando as</p><p>animações mais naturais e dinâmicas, permitindo a criação e implementação de características importantes</p><p>para os projetos:</p><p>• Eficiência: Elementos gráficos nativos economizam tempo e recursos, permitindo que os animadores se</p><p>concentrem na narrativa e na expressão.</p><p>• Combinando Poderes: Aceleração, desaceleração e elementos gráficos nativos combinados criam</p><p>animações realistas e profissionais.</p><p>• Movimento Natural: Aceleração e desaceleração criam movimentos naturais, como na animação de um</p><p>objeto caindo.</p><p>• Sincronização Precisa: A timeline e a capacidade de ajustar a velocidade dos elementos permitem</p><p>controlar exatamente quando e como um objeto muda de velocidade.</p><p>• Elementos Gráficos Nativos: Fáceis de usar e garantindo uma aparência coesa em todo o projeto, sem a</p><p>necessidade de plugins ou recursos externos.</p><p>COMO OS RECURSOS E AS FERRAMENTAS DO AFTER EFFECTS SÃO</p><p>UTILIZADOS EM SITUAÇÕES PRÁTICAS</p><p>Neste bloco, iremos abordar como os tópicos estudados podem ser utilizados, bem como exemplos de</p><p>situações práticas.</p><p>As ferramentas e os recursos fundamentais aplicados em uma situação prática</p><p>Imagine que você é um designer gráfico trabalhando em um comercial para uma nova marca de roupas.</p><p>Você deseja criar um vídeo que apresente a marca, mostre suas roupas de maneira dinâmica e adicione</p><p>alguns efeitos visuais para tornar o vídeo mais cativante. Neste cenário, o conhecimento da interface do</p><p>After Effects é fundamental, bem como a utilização de:</p><p>• Composições para organizar o projeto, com camadas separadas para vídeo, áudio e elementos gráficos,</p><p>garantindo um fluxo de trabalho organizado.</p><p>• Ferramenta de texto para adicionar títulos elegantes ao vídeo, destacando os produtos.</p><p>• Aplicação de máscaras para criar efeitos de recorte nas imagens das roupas, revelando-as gradualmente.</p><p>• Utilização da Timeline para sincronizar seus elementos: o logotipo da marca aparece primeiro, seguido</p><p>pelos modelos vestindo as roupas, tudo em uma sequência precisa e coerente.</p><p>• Uso de Keyframes para animar a transição de um estado para outro, como a entrada suave do logotipo e a</p><p>animação fluida dos modelos.</p><p>A importância da Timeline para apresentar um infográfico animado</p><p>Considere que você está trabalhando em uma animação de infográfico</p><p>para explicar um conceito complexo.</p><p>Você precisa garantir que as informações sejam apresentadas de maneira clara e envolvente. Neste caso, a</p><p>timeline é um foco importante, pois ela permite:</p><p>• Organizar elementos de texto, gráficos e animações em camadas separadas, garantindo que cada elemento</p><p>apareça no momento certo.</p><p>• Definir Keyframes para controlar a animação de gráficos e textos, garantindo uma transição suave entre as</p><p>informações.</p><p>• Acelerar ou desacelerar elementos, quando você deseja que estes apareçam ou desapareçam de maneira</p><p>gradual. Por exemplo, você pode usar aceleração para fazer com que um gráfico de barras cresça lentamente</p><p>à medida que a informação é explicada. A timeline permite ajustar precisamente o tempo dessas transições.</p><p>Aceleração e Desaceleração e Elementos Gráficos Nativos na Animação de Personagens</p><p>Pense em um projeto em que você esteja animando um personagem que está correndo. A aceleração e a</p><p>desaceleração são cruciais para dar realismo ao movimento. O personagem não inicia a corrida na</p><p>velocidade máxima; ele acelera gradualmente e desacelera quando vai parando, sem parar de forma brusca e</p><p>antinatural.</p><p>Além disso, você deseja que o personagem segure um elemento gráfico nativo, como uma bandeira,</p><p>enquanto corre. Elementos gráficos nativos são úteis aqui, pois são incorporados ao After Effects. Você</p><p>pode criar a bandeira diretamente no software, economizando tempo e garantindo que ela se integre</p><p>perfeitamente ao projeto.</p><p>Em resumo, a relação entre esses conceitos de ferramentas, interface e recursos é vital para criar animações</p><p>e vídeos profissionais no After Effects. A interface intuitiva e as ferramentas permitem que você dê vida às</p><p>suas ideias de maneira criativa, enquanto a timeline garante que tudo esteja sincronizado. A aceleração e a</p><p>desaceleração adicionam realismo ao movimento, e os elementos gráficos nativos facilitam a criação de</p><p>recursos integrados de alta qualidade. O resultado são animações envolventes e impactantes que contam</p><p>eficazmente sua história e atendem às necessidades do projeto.</p><p>VÍDEO RESUMO</p><p>Olá, estudante, você já embarcou em uma jornada emocionante de aprendizado sobre o Adobe After Effects,</p><p>uma ferramenta poderosa para criar animações e efeitos visuais impressionantes.</p><p>Agora, prepare-se para uma experiência de aprendizado dinâmica e envolvente. Assista ao vídeo resumo da</p><p>aula para consolidar seu entendimento e aprofundar seu conhecimento sobre o After Effects. É hora de</p><p>desvendar todo o potencial dessa ferramenta impressionante.</p><p>Vamos lá!</p><p>Saiba mais</p><p>No site oficial da Adobe, na área Aprendizado e suporte do Adobe After Effects, é possível encontrar</p><p>conteúdo do básico ao avançado, dividido em 3 categorias:</p><p>Introdução: Faça download, encontre ajuda para a assinatura e conheça os conceitos básicos.</p><p>Tutoriais: Localize tutoriais, desde o iniciante até o especialista, para ajudá-lo a expandir suas habilidades.</p><p>Guia do usuário: Obtenha respostas rápidas e instruções passo a passo.</p><p>Destacamos 3 tutoriais interessantes para desenvolver as habilidade adquiridas nesta aula:</p><p>Animate a logo (Anime um logo)</p><p>Dê vida ao logotipo com 4 dicas de animação.</p><p>Build a motion graphics package (Construa um pacote de motion graphics)</p><p>Conte uma história de marca consistente usando modelos e bibliotecas de gráficos em movimento.</p><p>Animate shape layers (Animação de camadas de formas)</p><p>Aprenda como animar objetos individuais dentro de uma camada de formas. Veja como as camadas de</p><p>formas têm vários controles: um conjunto de opções de transformação para cada objeto e outro para a</p><p>própria camada.</p><p>Aproveite esse ótimo conteúdo e muitos outros no site oficial para aprimorar suas habilidades com o After</p><p>Effects e divirta-se com suas criações.</p><p>Aula 3</p><p>ANIMAÇÃO NO AFTER EFFECTS</p><p>Nesta aula, veremos como construir um roteiro para uma animação. Veremos que,</p><p>antes de se começar a produção da animação em si, é preciso definir e desenvolver</p><p>a ideia ou visão dos produtores, dando corpo ao projeto.</p><p>INTRODUÇÃO</p><p>Nesta aula sobre Animação no After Effects, iremos explorar três tópicos fundamentais para criar animações</p><p>envolventes e visualmente impressionantes:</p><p>Importação de Elementos do Photoshop: exploraremos como importar elementos do Photoshop para</p><p>projetos de animação no After Effects. Essa integração economiza tempo e mantém a qualidade visual dos</p><p>recursos;</p><p>Interação entre os Softwares do Pacote Adobe voltados à Animação: Veremos como integrar o After</p><p>Effects com o Photoshop e o Illustrator para otimizar nosso fluxo de trabalho;</p><p>Keyframes e Manipulação das Propriedades na Timeline e Propriedades dos Elementos</p><p>Gráficos: Aprofundaremos nosso conhecimento sobre keyframes e manipulação das propriedades na</p><p>timeline.</p><p>Prepare-se para mergulhar no mundo da animação digital, explorando os recursos do After Effects e a</p><p>integração entre os softwares do pacote Adobe. Com esta aula, você adquirirá as habilidades necessárias</p><p>para criar suas próprias animações incríveis.</p><p>Vamos lá?</p><p>https://creativecloud.adobe.com/cc/learn/after-effects/web/animate-logo-tips?locale=pt-BR</p><p>https://creativecloud.adobe.com/cc/learn/after-effects/web/motion-graphics-brand-package?locale=pt-BR</p><p>https://creativecloud.adobe.com/cc/learn/after-effects/web/motion-graphics-brand-package?locale=pt-BR</p><p>https://creativecloud.adobe.com/cc/learn/after-effects/web/motion-graphics-brand-package?locale=pt-BR</p><p>https://creativecloud.adobe.com/cc/learn/after-effects/web/animate-shape-layers?locale=pt-BR</p><p>https://creativecloud.adobe.com/cc/learn/after-effects/web/animate-shape-layers?locale=pt-BR</p><p>https://creativecloud.adobe.com/cc/learn/after-effects/web/animate-shape-layers?locale=pt-BR</p><p>https://creativecloud.adobe.com/cc/learn/after-effects/web/animate-shape-layers?locale=pt-BR</p><p>O PODER DO ADOBE AFTER EFFECTS: IMPORTAÇÃO, INTERAÇÃO E</p><p>ANIMAÇÃO</p><p>A produção audiovisual e a animação são áreas em constante evolução, por isso é fundamental aproveitar as</p><p>ferramentas e técnicas utilizadas no mercado. Nesse contexto, exploraremos a seguir 3 pilares</p><p>essenciais utilizados para criar animações no After Effects.</p><p>Importação de Elementos do Adobe Photoshop: Economizando Tempo e Mantendo a Qualidade</p><p>Visual</p><p>O Photoshop é uma ferramenta amplamente utilizada por profissionais de criação para desenvolver uma</p><p>variedade de elementos visuais detalhados, desde edição de fotografias até Ilustrações, que são</p><p>frequentemente mais artísticas e personalizadas, e imagens gráficas, que são elementos visuais mais amplos</p><p>que podem variar de simples ícones a elementos mais complexos, como botões de site. Por meio dessa</p><p>poderosa ferramenta, é possível criar elementos com riqueza de detalhes, transparência e cores vibrantes.</p><p>Esses elementos podem ser facilmente incorporados em projetos do After Effects, adicionando um toque</p><p>visualmente impressionante e profissional.</p><p>Por exemplo, ao criar um vídeo de apresentação de um produto, você pode utilizar o Photoshop para criar</p><p>imagens de alta resolução do produto em diferentes ângulos. Em seguida, importar essas imagens para o</p><p>After Effects e adicionar efeitos visuais personalizados, como zooms suaves, rotações e transições elegantes.</p><p>Isso pode resultar em um vídeo de apresentação atraente que destaca todas as características do produto de</p><p>forma impressionante.</p><p>Interação entre os Softwares do Pacote Adobe voltados à Animação: Otimização do Fluxo de</p><p>Trabalho</p><p>O After Effects, o Photoshop e o Illustrator são ferramentas do mesmo fabricante (Adobe), extremamente</p><p>poderosas quando utilizadas em conjunto para otimizar o fluxo de trabalho na produção audiovisual. A</p><p>integração entre esses softwares não apenas economiza tempo, mas também eleva a qualidade do trabalho</p><p>final. Isso possibilita a criação e edição de elementos em diferentes softwares de forma harmoniosa,</p><p>eficiente e prática.</p><p>Recursos criados em aplicativos específicos, como vetores no Illustrator,</p><p>que oferece vantagens como</p><p>escalabilidade e precisão, ou ilustrações no Photoshop, aproveitando todo o potencial de pincéis e efeitos</p><p>especiais, podem ser facilmente importados diretamente para o After Effects. Essa sinergia entre os</p><p>softwares mantém a qualidade, as camadas e as propriedades originais dos elementos, permitindo que sejam</p><p>utilizados e modificados de forma flexível e criativa para a realização dos projetos.</p><p>Essa integração pode ampliar consideravelmente as possibilidades criativas e a eficiência do processo de</p><p>produção, resultando em um melhor aproveitamento do tempo e dos recursos utilizados, sendo uma das</p><p>grandes vantagens da integração entre os softwares do Pacote Adobe a sincronização automática de</p><p>atualizações. Por exemplo, quando são feitas alterações em uma imagem no Photoshop que foi importada</p><p>para um projeto no After Effects, essas alterações são refletidas automaticamente, sem a necessidade de</p><p>retrabalho manual. Isso economiza tempo e esforço, permitindo que os profissionais se concentrem em</p><p>aprimorar suas habilidades e expressar suas ideias de forma mais eficaz.</p><p>Keyframes e Manipulação das Propriedades na Timeline e Propriedades dos Elementos Gráficos</p><p>Os keyframes (quadros-chave), que representam momentos específicos em uma linha do tempo (Figura 1),</p><p>desempenham um papel fundamental no processo de animação. Ao definir as propriedades de um elemento</p><p>gráfico em cada keyframe, os animadores conseguem dar vida a objetos, personagens e elementos gráficos.</p><p>É por meio dos keyframes que é possível controlar a posição, escala, rotação, opacidade e outras</p><p>propriedades ao longo do tempo, permitindo criar animações complexas com movimentos fluidos, transições</p><p>suaves e efeitos visuais impressionantes.</p><p>Figura 1 | Keyframes na Linha do Tempo - Adobe After Effects.</p><p>Fonte: Reprodução do software Adobe After Effects, elaborada pela autora, 2023.</p><p>Em resumo, a integração entre o Photoshop, o Illustrator e o After Effects, aliada ao uso inteligente de</p><p>keyframes, é a base para a criação de animações e vídeos de alta qualidade. Essas técnicas não apenas</p><p>economizam tempo, mas também ampliam as possibilidades criativas, garantindo que a qualidade visual e a</p><p>eficiência estejam sempre presentes em seus projetos audiovisuais.</p><p>ETAPAS PARA INTEGRAÇÃO DO PACOTE ADOBE E USO DE KEYFRAMES NO</p><p>AFTER EFFECTS</p><p>Etapas para Aplicar a Integração entre os Softwares do Pacote Adobe na Animação:</p><p>A integração entre os softwares do Pacote Adobe é essencial para criar animações de alta qualidade de</p><p>forma eficiente. Siga estas etapas para aproveitar ao máximo as ferramentas e os recursos disponíveis:</p><p>1. Planejamento 1.1 Comece pelo planejamento do projeto. Decida quais elementos audiovisuais serão</p><p>usados na animação, se terá personagens, efeitos sonoros etc.</p><p>2. Criação e Edição 2.1. Use o Illustrator (Figura 2) para criar gráficos vetoriais, ícones ou personagens.</p><p>2.2. O Photoshop (Figura 3) pode ser usado tanto para editar imagens, como para retocar fotos de fundo ou</p><p>criar elementos visuais mais complexos.</p><p>Figura 2 | Interface Adobe Illustrator</p><p>Fonte: Reprodução do software Adobe Illustrator, elaborada pela autora, 2023.Figura 3 | Interface Adobe</p><p>Photoshop</p><p>Fonte: Reprodução do software Adobe Photoshop, elaborada pela autora, 2023.</p><p>3. Importação: Crie ou abra um projeto existente no After Effects e importe os elementos do Photoshop /</p><p>Illustrator diretamente para a composição.</p><p>3.1 Importar os Elementos: Vá em "Arquivo" e selecione "Importar" para escolher os arquivos do</p><p>Photoshop / Illustrator que deseja incorporar ao projeto.</p><p>3.2. Sincronização Automática: Alterações nos elementos originais no Photoshop / Illustrator serão</p><p>refletidas automaticamente no After Effects, economizando tempo e garantindo o uso das versões mais</p><p>recentes dos elementos.</p><p>4. Organização e Animação</p><p>4.1. Organização: Após a importação, organize os elementos na composição de acordo com o planejado e</p><p>edite-os conforme necessário, ajustando tamanho, posição, opacidade e aplicando efeitos visuais adicionais.</p><p>4.2. Animação: Use os elementos do Photoshop / Illustrator na animação, aplicando keyframes para criar</p><p>movimentos e transições, e ajustando suas propriedades ao longo do tempo para alcançar o efeito desejado.</p><p>5. Renderização*: Após concluir a animação, renderize o projeto para criar a animação final.</p><p>* Processo que transforma cálculos e dados brutos gerados pelos softwares (parâmetros, cálculos de</p><p>trajetória, interpolações etc.) em uma mídia final, como um vídeo.</p><p>Dominando Keyframes: Etapas para aplicação em Animações no After EffectsA utilização de</p><p>Keyframes permite aos animadores controlarem o movimento e o comportamento de elementos gráficos ao</p><p>longo do tempo (timeline). Aqui estão etapas necessárias para aplicar esse recurso:</p><p>1. Criação da Animação: Comece definindo o que você deseja animar. Pode ser um objeto, texto,</p><p>personagem ou qualquer elemento gráfico em seu projeto.</p><p>2. Posicionamento Inicial: Utilize um keyframe em um ponto da linha do tempo e defina as propriedades</p><p>(parâmetros) do elemento que está animando, como posição, escala, rotação e opacidade (Figura 4). Isso</p><p>representa o estado do elemento naquele momento da animação.</p><p>Figura 4 | Definindo parâmetros em um keyframe na Linha do Tempo</p><p>Fonte: Reprodução do software Adobe After Effects, elaborada pela autora, 2023</p><p>3. Adição de Keyframes e Manipulação das Propriedades (Figura 5): Avance na linha do tempo para o</p><p>momento em que deseja uma modificação. Nesse ponto, crie um keyframe para indicar as novas</p><p>propriedades do elemento nesse momento específico. Isso pode incluir movimento, rotação, mudanças na</p><p>escala, opacidade (transparência) etc.</p><p>Figura 5 | Definindo parâmetros em keyframes na Linha do Tempo</p><p>Fonte: Reprodução do software Adobe After Effects, elaborada pela autora, 2023.</p><p>4. Criação de Transições: Adicione keyframes intermediários entre os pontos principais para controlar a</p><p>interpolação. A interpolação entre os keyframes define como as propriedades do elemento mudam</p><p>gradualmente de um estado para outro, criando transições mais ou menos suaves.</p><p>5. Refinamento: Revise sua animação na timeline e ajuste os keyframes conforme necessário para obter o</p><p>efeito desejado. Você pode adicionar mais keyframes, alterar a velocidade da animação e fazer ajustes finos.</p><p>6. Efeitos Adicionais: Além da animação de movimento básica, como uma transição de uma posição para</p><p>outra, você pode aplicar efeitos visuais, como desfoque de movimento, efeitos de texto e muito mais, usando</p><p>as propriedades dos elementos gráficos e keyframes.</p><p>7. Renderização: Após concluir a animação, é hora de renderizar o projeto. A renderização converte sua</p><p>composição e os cálculos feitos através dos keyframes em um arquivo de vídeo ou animação, que pode ser</p><p>reproduzido e compartilhado.</p><p>POSSIBILIDADES INCRÍVEIS DE APLICAÇÃO DOS RECURSOS E ARQUIVOS</p><p>IMPORTADOS PARA ANIMAR NO AFTER EFFECTS</p><p>Agora que entendemos os conceitos e as etapas para criar animações e vídeos de alta qualidade, vamos ver</p><p>exemplos que podem acontecer no dia a dia dos profissionais.</p><p>Interação entre os Softwares do Pacote Adobe para Animação</p><p>Transições de Vídeo Personalizadas:</p><p>Para criar transições de vídeo personalizadas, você pode usar o Adobe Illustrator para criar elementos como</p><p>imagens, texturas ou padrões.</p><p>Em seguida, importe esses elementos no Adobe After Effects para criar transições animadas entre cenas ou</p><p>clipes de vídeo. Dessa forma, você pode ter transições exclusivas que combinam com o estilo do seu projeto.</p><p>Por exemplo, em uma animação de terror, crie imagens de morcegos no Illustrator e anime-os voando em</p><p>direção ao espectador, preenchendo a tela e criando a transição entre cenas.</p><p>Animação de Ilustrações Complexas:</p><p>Suponha que você tenha uma ilustração complexa criada no Adobe Photoshop que deseja animar. Importe</p><p>essa ilustração</p><p>no Adobe After Effects para adicionar movimento, efeitos de paralaxe e outros detalhes</p><p>dinâmicos. Por exemplo, você pode criar uma animação em que uma ilustração de um mapa é percorrida por</p><p>um caminho específico, destacando informações importantes ao longo desse caminho.</p><p>Criação de Personagens Animados:</p><p>Imagine que você está criando um personagem animado para um vídeo. Você pode usar o Adobe Illustrator</p><p>para desenhar os elementos do personagem, como olhos, boca, braços e pernas, em formato vetorial, cada</p><p>um em uma camada. Em seguida, importe esses elementos diretamente para o Adobe After Effects.</p><p>No After Effects, você pode adicionar rigging (processo de colocar um “esqueleto”) no personagem, ou</p><p>seja, criar controle sobre suas articulações, como um braço que pode se mover ou dobrar. Isso é feito usando</p><p>ferramentas como o “Puppet Pin Tool” (Figura 6).</p><p>Figura 6 | Puppet Pin Tool – After Effect</p><p>Fonte: Site Oficial Adobe.</p><p>Animação de Interfaces de Usuário (UI - User Interface):</p><p>Suponha que você esteja trabalhando em um projeto de animação para um aplicativo ou site. Você pode</p><p>criar os elementos de interface do usuário, como botões, ícones e caixas de diálogo, no Adobe Illustrator.</p><p>Em seguida, importe esses elementos no Adobe After Effects, onde você pode “dar vida” a esses</p><p>componentes. Por exemplo, você pode criar animações de botões que mudam de cor quando são clicados</p><p>(Figura 7), ou animar ícones que se movem na tela em resposta às ações do usuário.</p><p>Figura 7 | Dois estados de um botão de interface.</p><p>Fonte: Wikimedia Commons .</p><p>Keyframes e Manipulação das Propriedades na Timeline e Propriedades dos Elementos Gráficos:</p><p>Animação de Texto:</p><p>Usando keyframes no After Effects, você pode animar textos, alterando sua posição, tamanho e opacidade ao</p><p>longo do tempo.</p><p>Exemplo: Ao criar uma introdução animada em que o texto aparece gradualmente na tela, podendo utilizar</p><p>a manipulação do parâmetro de posição (1º keyframe fora da tela (A), 2º keyframe (B) no meio da Tela)</p><p>(Figura 8) e/ou opacidade.</p><p>.</p><p>Figura 8 | Ferramenta Texto e animação via Keyframes, no After Effects</p><p>Fonte: Wikimedia Commons .</p><p>Fonte: Reprodução do software Adobe After Effects, elaborada pela autora, 2023.</p><p>Animação de Personagens:</p><p>Ao criar personagens animados, você pode usar Puppet Pin Tool (Figura 6) (Figura 9) e keyframes para</p><p>controlar movimentos como caminhar, acenar e expressões faciais.</p><p>Figura 9 | Localização da Ferramenta Puppet Pin Tool na interface do After Effects</p><p>Fonte: Reprodução do software Adobe After Effects, elaborada pela autora, 2023</p><p>Efeitos Visuais:</p><p>Keyframes também são cruciais para efeitos visuais, como a criação de uma transição de fade-</p><p>out*(desvanecimento de saída) ou a animação de um objeto que segue um caminho específico na tela.</p><p>* Técnica utilizada em produção de áudio e vídeo na qual uma imagem (Figura 10) ou som começa</p><p>visível/audível e gradualmente se torna invisível/inaudível.</p><p>Figura 10 | Imagens demostrando efeito de Fade-out</p><p>Fonte: Wikimedia Commons .</p><p>Manipulação de Propriedades:</p><p>No After Effects, você pode ajustar várias propriedades dos elementos gráficos, como cor, posição e escala,</p><p>usando keyframes.</p><p>Exemplo: Para animar uma mudança de cor gradual em um logotipo, no qual um dos elementos é uma</p><p>esfera vermelha, e na animação ela ficará verde e voltará para a cor original. Essa animação pode ser feita</p><p>com 3 keyframes: 1º Cor original (A), 2º Cor verde (B), 3º Cor original (C) (Figura 11).</p><p>Figura 11 | Mudando a cor de um Elipse nativa utilizando keyframes, no After Effects</p><p>Fonte: Reprodução do software Adobe After Effects, elaborada pela autora, 2023.</p><p>VIDEO RESUMO</p><p>Olá, estudante, você já embarcou em uma jornada emocionante de aprendizado sobre o Adobe After Effects,</p><p>uma ferramenta poderosa para criar animações e efeitos visuais impressionantes. Assista ao vídeo resumo da</p><p>aula para consolidar seu entendimento e aprofundar seu conhecimento sobre animações no After Effects,</p><p>utilizando a integração entre os softwares do Pacote Adobe e o uso das Keyframes para criar animações</p><p>cativantes.</p><p>Saiba mais</p><p>No site oficial da Adobe, na área Aprendizado e suporte do Adobe After Effects ), é possível encontrar</p><p>conteúdo do básico ao avançado, divididos em 3 categorias:</p><p>Introdução: Faça download, encontre ajuda para a assinatura e conheça os conceitos básicos.</p><p>Tutoriais: Localize tutoriais, desde o iniciante até o especialista, para ajudá-lo a expandir suas habilidades.</p><p>Guia do usuário: Obtenha respostas rápidas e instruções passo a passo.</p><p>Destacamos 3 tutoriais interessantes para desenvolver as habilidades adquiridas nesta aula:</p><p>Criação de formas</p><p>Crie e modifique formas usando as ferramentas Caneta e Forma, e copie caminhos do Illustrator e do</p><p>Photoshop para o After Effects.</p><p>Noções básicas de animação</p><p>Sobre animação, quadros-chave e expressões.</p><p>Convert Illustrator layers into shape layers (Converter camadas do Illustrator em camadas de forma)</p><p>Aprenda como converter camadas do Illustrator em camadas de forma em uma composição.</p><p>Aproveite esse ótimo conteúdo e muitos outros no site oficial para aprimorar suas habilidades com o After</p><p>Effects e divirta-se criando suas próprias animações.</p><p>Aula 4</p><p>ANIMAÇÃO 2D E 3D</p><p>Nesta aula, aprenderemos como são criados os personagens, seus aspectos físicos e</p><p>emocionais, para dar vida à narrativa que está sendo desenvolvida para a</p><p>animação.</p><p>INTRODUÇÃO</p><p>Olá, estudante!</p><p>A animação é uma forma de arte que se desenvolveu significativamente ao longo das décadas, especialmente</p><p>com o advento da tecnologia digital. Hoje, vamos explorar três áreas cruciais que transformaram a maneira</p><p>como percebemos a animação:</p><p>Principais diferenças entre a animação tradicional e a animação digital: do 2D para o 3D. Vamos</p><p>analisar as vantagens e desvantagens de cada estilo de animação e como eles impactam no resultado final.</p><p>Animação híbrida: Nesta área, mergulharemos no mundo da animação híbrida, em que técnicas</p><p>tradicionais e digitais se entrelaçam para criar algo verdadeiramente único, misturando-se mundo real</p><p>(filmagem com atores) com elementos fantásticos</p><p>Animação em realidade aumentada: Uma área empolgante que mescla o digital com o mundo real,</p><p>oferecendo experiências imersivas que desafiam nossa percepção da realidade.</p><p>Prepare-se para uma jornada emocionante através dessas dimensões e possibilidades da animação.</p><p>Vamos começar!</p><p>TIPOS DE ANIMAÇÕES UTILIZADAS EM CRIAÇÕES AUDIOVISUAIS</p><p>https://helpx.adobe.com/br/support/photoshop.htm</p><p>https://helpx.adobe.com/br/after-effects/using/animation-basics.html#about_animation_keyframes_and_expressions</p><p>https://creativecloud.adobe.com/cc/learn/after-effects/web/convert-illustrator-layers-to-shape-layers?locale=pt-BR</p><p>Nesta aula, vamos mergulhar no vasto universo da animação, onde a combinação perfeita entre criatividade</p><p>e tecnologia nos presenteia com experiências visuais verdadeiramente incríveis. Durante o nosso estudo,</p><p>exploraremos três aspectos da animação, que certamente nos proporcionarão uma compreensão mais</p><p>profunda desse campo tão fascinante.</p><p>Principais diferenças entre a animação tradicional e a animação digital: do 2D para o 3D</p><p>A animação tradicional (Figura 1), frequentemente associada ao 2D, tem raízes profundas na história do</p><p>cinema e da arte. Envolve a criação de quadros individuais desenhados à mão, que, quando reproduzidos em</p><p>rápida sucessão, criam a ilusão de movimento. Isso inclui filmes animados clássicos como "Branca de Neve</p><p>e os Sete Anões" (1937), da Disney.</p><p>Figura 1 | Processo de animação tradicional utilizando folhas de celulóide para compor cada quadro de</p><p>animação</p><p>Fonte: Wikimedia Commons.</p><p>Já a animação digital, especialmente no contexto do 3D (Figura 2), é uma evolução técnica que aproveita a</p><p>tecnologia para criar animações</p><p>complexas e realistas. Essa evolução trouxe uma revolução ao mundo da</p><p>animação, introduzindo o terceiro elemento crucial: a profundidade.</p><p>Figura 2 | Personagem 3D em poses de animação</p><p>Fonte: Wikimedia Commons.</p><p>A animação em 3D oferece uma ampla variedade de possibilidades, permitindo a manipulação de modelos</p><p>tridimensionais, cenários e personagens virtuais com riqueza de movimentos e detalhes. Essa forma de</p><p>animação tem sido amplamente utilizada na indústria cinematográfica; um exemplo icônico é o filme "Toy</p><p>Story" (Pixar, 1995), que transformou a maneira como as animações eram produzidas.</p><p>Animação Híbrida: Misturando as Realidades</p><p>Essa forma de animação é frequentemente usada em filmes e produções que procuram combinar o mundo</p><p>real (filmagem com atores) com elementos fantásticos, como personagens de desenhos animados, criaturas</p><p>mágicas ou efeitos especiais impossíveis de serem criados apenas com filmagem convencional.</p><p>São exemplos notáveis de animação híbrida os filmes “Space Jam: O Jogo do Século“ (Warner Bros, 1996)</p><p>e "Who Framed Roger Rabbit" (“Uma cilada para Roger Rabbit, Amblin Entertainment, Touchstone</p><p>Pictures, 1988). Estes filmes são excelentes exemplos de como a animação híbrida pode ser usada de forma</p><p>eficaz para criar uma narrativa envolvente, na qual personagens de desenhos animados interagem com atores</p><p>reais no cenário do filme.</p><p>Figura 3 | Space Jam: O jogo do século</p><p>Fonte: Filmow.</p><p>Animação em Realidade Aumentada: A Fronteira da Experiência Imersiva</p><p>A animação em realidade aumentada (AR - Augmented Reality) é uma área empolgante, que mescla o</p><p>digital com o mundo real, oferecendo experiências imersivas que desafiam nossa percepção da realidade.</p><p>Por meio de dispositivos como smartphones, tablets (Figura 3) ou óculos AR, elementos animados são</p><p>sobrepostos ao ambiente real, criando experiências únicas.</p><p>Essa tecnologia está transformando a maneira como interagimos com o entretenimento e a informação.</p><p>Aplicativos de AR podem adicionar personagens animados ao seu ambiente físico, permitindo interações</p><p>como se fossem reais. Além disso, a AR é usada em educação, publicidade e jogos, proporcionando uma</p><p>experiência inovadora aos usuários.</p><p>Figura 4 | Realidade Aumentada, estudo de anatomia</p><p>Fonte: Wikimedia Commons.</p><p>Em resumo, a animação abrange diversas técnicas e estilos, e está em constante evolução. Explorando a</p><p>animação tradicional, digital e híbrida, assim como a animação em realidade aumentada, descobrimos o</p><p>poder da criatividade combinada com a tecnologia, e seu impacto no mundo visual.</p><p>DA ANIMAÇÃO TRADICIONAL À REALIDADE AUMENTADA: UM MUNDO DE</p><p>POSSIBILIDADES</p><p>Animação Tradicional versus Animação Digital: Uma Jornada do 2D para o 3D</p><p>A animação evoluiu de forma fascinante ao longo da história, passando de 2D para 3D. Vamos explorar as</p><p>principais diferenças e progressões ao longo dessa jornada.</p><p>Animação Tradicional (2D):</p><p>Plano Bidimensional: Personagens e cenários criados em um espaço bidimensional, ou seja, considerando</p><p>largura e altura de uma imagem;</p><p>Animação Quadro a Quadro: Cada mínima modificação dos elementos animados é desenhado ou</p><p>fotografado quadro a quadro manualmente, sem possibilidade de interpolação;</p><p>Estilo Artístico Distinto: Estilo artístico único, pois possibilita caracterizar os personagens livremente,</p><p>como esticar os braços e expressões exageradas sem limites técnicos;</p><p>Tempo: Criação manual de cada quadro, o que torna a animação 2D um processo demorado.</p><p>Animação 2D Digital</p><p>Economia de tempo e Flexibilidade: ajustes e correções rápidas e fáceis direto no ambiente digital,</p><p>tornando o processo de criação mais dinâmico e versátil;</p><p>Exploração de recursos digitais: efeitos especiais como adicionar partículas, usar efeitos sonoros durante a</p><p>produção, zoom (aproximação sem ter que redesenhar), acrescentar “esqueleto” (rigging) e utilizar</p><p>interpolação de movimentos.</p><p>Animação Digital (3D):</p><p>Ambiente Tridimensional: Os personagens e cenários existem em um ambiente tridimensional, permitindo</p><p>movimentos em todas as direções.</p><p>Modelagem 3D: Personagens modelados (stop motion ,por exemplo) adicionado rigging digitalmente em</p><p>um ambiente virtual, proporcionando flexibilidade na animação (Figura 5).</p><p>Figura 5 | Personagem 3D</p><p>Fonte da imagem: Wikimedia Commons.</p><p>Movimento Suave: A animação 3D permite movimentos suaves e naturais dos personagens.</p><p>Efeitos Visuais Avançados: A animação 3D é frequentemente usada em filmes com efeitos visuais</p><p>complexos, como filmes de heróis, por exemplo.</p><p>A Jornada do 2D para o 3D:</p><p>A transição da animação 2D para a 3D foi impulsionada pelo avanço tecnológico, permitindo a criação</p><p>eficiente de ambientes tridimensionais. Um dos marcos é o filme Toy Story, da Pixar (1995), que ficou</p><p>conhecido por ser o primeiro filme animado totalmente em 3D. Essa transição trouxe várias mudanças:</p><p>Realismo Aprimorado: A animação 3D permitiu um grau de realismo que a animação 2D simplesmente</p><p>não conseguia replicar.</p><p>Tempo de Produção: A animação 3D tornou o processo mais eficiente em comparação com a animação 2D</p><p>tradicional, que era demorada e exigia grandes equipes de artistas.</p><p>Novas Possibilidades Narrativas: A animação 3D abriu novas possibilidades narrativas, permitindo</p><p>histórias mais complexas e visualmente impressionantes. O filme Avatar (Lightstorm Entertainment, 2009) é</p><p>conhecido por seus efeitos visuais e ambiente fantástico incrível, possibilitado pela tecnologia 3D.</p><p>Tanto as animações 2D quanto 3D são amplamente usadas em diversas mídias audiovisuais cada tipo com</p><p>suas particularidades, por isso, nenhuma técnica substitui a outra.</p><p>A Magia da Animação Híbrida</p><p>A animação híbrida combina técnicas tradicionais e digitais com cenas filmadas ao vivo. É usada para criar</p><p>mundos imaginários onde personagens animados interagem com atores reais. Aspectos importantes desse</p><p>modelo são:</p><p>Interconexão: A integração perfeita de elementos animados com o mundo real é crucial. Isso pode ser</p><p>alcançado por meio do uso de chroma key * e por rastreamento de movimento.</p><p>* recurso que permite a substituição de uma cor sólida (no caso, o verde ou azul) por outra imagem/efeito.</p><p>Criatividade: A técnica possibilita narrativas únicas e visuais surpreendentes, unindo o imaginário ao</p><p>concreto. Alguns exemplos de aplicações:</p><p>Atores usando roupas especiais com chroma key ou captura de movimentos podem interpretar seres</p><p>fantásticos/colossais;</p><p>Personagens animados digitalmente, inclusive em formato cartoon, podem ser adicionados na pós-produção,</p><p>interagindo com atores e cenário;</p><p>Uso de marionetes controladas por profissionais vestidos com chroma key (Figura 6).</p><p>Figura 6 | Gravação utilizando um personagem marionete e técnica de Chroma Key</p><p>Fonte da imagem: Wikimedia Commons.</p><p>Animação em Realidade Aumentada:</p><p>A Realidade Aumentada (RA) é uma tecnologia revolucionária que combina o digital com o mundo real.</p><p>Surgiu na década de 1960 e progrediu a partir dos anos 90. Com avanços no hardware e software, a RA se</p><p>tornou mais acessível ao público, oferecendo experiências imersivas que desafiam nossa percepção da</p><p>realidade:</p><p>Experiências Interativas: Os usuários podem interagir com objetos virtuais em seu ambiente por meio de</p><p>dispositivos como smartphones, tornando a narrativa mais envolvente, como no jogo Pokémon GO (2016),</p><p>em que os jogadores caçam os Pokémon que são vistos no mundo real;</p><p>Aplicações: é usada em entretenimento, educação (Figura 7), decoração (Figura 8), marketing e medicina.</p><p>Figura 7 | Realidade Aumentada aplicada em um Museu</p><p>Fonte da imagem: Wikimedia Commons. Figura 8 | Utilização de Realidade Aumentada para decoração</p><p>Fonte da imagem: Wikimedia Commons.</p><p>TRANSFORMANDO A CRIATIVIDADE EM EXPERIÊNCIAS VISUAIS: ANIMAÇÃO</p><p>TRADICIONAL, HÍBRIDA E REALIDADE AUMENTADA</p><p>Considere criar uma cena de animação em 2D tradicional para um jogo. Além de desenhar cada quadro de</p><p>animação</p><p>para o personagem principal, você pode explorar diferentes expressões faciais, adicionar efeitos</p><p>visuais e criar movimentos mais fluidos e realistas ou caricatos, tendo total controle. Isso não requer apenas</p><p>habilidades artísticas, mas também um tempo significativo de dedicação para alcançar um resultado final</p><p>impressionante.</p><p>O jogo Cuphead (Studio MDH, 2017) foi lançado pela Microsoft e ficou famoso por utilizar animação</p><p>tradicional para sua arte, e o resultado ficou incrível (Figura 8).</p><p>Figura 9 | Jogo Cuphead</p><p>Fonte da imagem: IGDB.</p><p>Criar um personagem 3D para um filme de animação é um processo complexo que envolve várias etapas.</p><p>Seguem passos gerais e exemplos:</p><p>1: Conceito e Design</p><p>Definir a personalidade, a aparência, as características e o papel do personagem na história.</p><p>Por exemplo, em um filme de animação infantil, é interessante escolher um personagem amigável e</p><p>colorido, como o Sulley, de “Monstros S.A (2001)”, da Pixar.</p><p>2: Modelagem 3D</p><p>Criar um modelo 3D do personagem usando software de modelagem 3D, como Blender (Blender</p><p>Foundation,1994 – Figura 9) ou Autodesk Maya (Alias Systems Corporation, 1999).</p><p>No caso do personagem Buzz Lightyear, em "Toy Story (1995)", os artistas 3D modelaram todos os detalhes</p><p>do traje espacial e as características faciais para uma representação mais precisa de um astronauta – ainda</p><p>que de brinquedo.</p><p>Figura 10 | Blende</p><p>Fonte da imagem: Wikimedia Commons.</p><p>3: Texturização</p><p>Aplicar texturas para dar ao personagem sua aparência final, como as cores de sua roupa, textura da pele etc.</p><p>No caso de Gollum, em "O Senhor dos Anéis" (WingNut Films The Saul Zaentz Company,2001-2003), os</p><p>artistas adicionaram detalhes texturizados para a pele escamosa e os olhos brilhantes, tornando o</p><p>personagem único.</p><p>4: Rigging</p><p>Criar um esqueleto virtual dentro do modelo 3D para permitir a animação.</p><p>Como o personagem Wall-E (2008), para o qual a Pixar (1986) configurou um rigging complexo para</p><p>controlar seus movimentos oculares, braços e rodas do simpático robô.</p><p>5: Animação</p><p>Dar vida ao personagem, adicionando movimento.</p><p>Tal qual o personagem Shrek (DreamWorks Pictures, 2001), para o qual os animadores criaram diversas</p><p>animações, como se coçar toscamente, arrotar etc., para transmitir as emoções e a personalidade de um</p><p>ogro truculento, ranzinza por fora, gentil por dentro.</p><p>6: Iluminação e Renderização</p><p>Ajustar a iluminação e renderizar a cena para criar imagens finais de alta qualidade.</p><p>No filme "Frozen (2013)", a Disney investiu muito tempo na renderização de cenas de neve e gelo para criar</p><p>um ambiente mágico.</p><p>7: Pós-Produção</p><p>Adicionar efeitos especiais, corrigir imperfeições e ajustar a trilha sonora.</p><p>Exemplos são os filmes da Marvel: a pós-produção melhora as cenas de ação e adiciona efeitos visuais</p><p>espetaculares, como as magias do Doutor Estranho (Marvel Studios, 2016).</p><p>8: Integração no Filme</p><p>O personagem 3D é integrado ao filme, combinando-o com outros elementos da cena, como cenários,</p><p>ajustando a iluminação para garantir a harmonia perfeita.</p><p>Como o personagem Groot, de "Guardiões da Galáxia" (James Gunn, Marvel Studios,2014), que é um</p><p>modelado em 3D, texturizado como madeira, animado para expressar emoções e integrado perfeitamente</p><p>ao filme.</p><p>Animação em Realidade Aumentada (AR): Uma Nova Dimensão de Experiência</p><p>Utilizando a tecnologia de AR para o desenvolvendo de um aplicativo educacional para crianças em idade</p><p>escolar, com o objetivo de tornar o aprendizado mais envolvente e interativo, especialmente na área de</p><p>leitura (Figura 10), alguns passos são essenciais:</p><p>1. Planeje o projeto, definindo objetivos educacionais e a narrativa das histórias;</p><p>2. Crie modelos 3D dos personagens e objetos usando software de modelagem;</p><p>3. Faça a animação dos modelos, para dar vida aos personagens;</p><p>4. Integre a AR ao aplicativo, para ativar quando a câmera do dispositivo apontar para as páginas do livro;</p><p>5. Teste com o público-alvo e faça ajustes;</p><p>6. Lance o aplicativo e continue atualizando-o.</p><p>Figura 11 | App iSkull de Realidade Aumentada</p><p>Fonte: Wikimedia Commons.</p><p>Para concluir, a animação tradicional pode trazer, por exemplo, o charme do trabalho manual, enquanto a</p><p>animação digital, por sua vez, pode oferecer mais praticidade no desenho dos personagens e cenários em 2D</p><p>e 3D. A animação híbrida combina o real e o animado de maneiras únicas, e a animação em AR transforma</p><p>nosso mundo físico em um palco para experiências digitais.</p><p>VIDEO RESUMO</p><p>Olá, estudante!</p><p>Nesta aula, exploraremos 3 tópicos utilizados no universo da animação:</p><p>Diferenças entre animação tradicional e digital: como essas abordagens evoluíram e moldaram a forma</p><p>como experienciamos a animação;</p><p>Animação híbrida: como filmes tais quais 'Who Framed Roger Rabbit' misturam realidade e elementos</p><p>fantásticos para criar narrativas envolventes;</p><p>Animação em realidade aumentada (AR): como essa técnica está transformando a interação com a</p><p>realidade por meio de dispositivos como smartphones e óculos AR.</p><p>Vamos começar!</p><p>Um case interessante feito no software 3D Blender é o curta-metragem live-action/CGI Tears of Steel,</p><p>produzido por Ton Roosendaal e dirigido/escrito por Ian Hubert. Ele narra um encontro entre duas pessoas</p><p>recriadas do passado, numa tentativa de deter o apocalipse robótico no presente.</p><p>Confira os bastidores de algumas das cenas mais difíceis de CGI do curta, em que é possível ver a aplicação</p><p>de animações híbridas, nas quais atores interagem com robôs colocados na pós-produção, além de elementos</p><p>do cenário e dos personagens, como o braço robótico.</p><p>https://studio.blender.org/films/tears-of-steel/?asset=55</p><p>https://studio.blender.org/films/tears-of-steel/?asset=55</p><p>Aula 5</p><p>REVISÃO DA UNIDADE</p><p>UMA JORNADA NA ANIMAÇÃO DIGITAL: DOS FUNDAMENTOS À REALIDADE</p><p>AUMENTADA</p><p>Olá, estudante, nesta aula iremos revisar a unidade.</p><p>Durante as aulas, você fez uma jornada fascinante pelo mundo da animação digital, adquirindo</p><p>conhecimentos fundamentais para compreender os processos e as técnicas de produção de uma animação</p><p>digital baseada em conceitos legados da animação clássica. Agora, vamos recapitular os principais tópicos</p><p>abordados em cada aula.</p><p>Na aula de "Animação no Photoshop", você aprendeu sobre os princípios da animação quadro a quadro e</p><p>como aplicar esses conceitos usando o software Adobe Photoshop. Alguns dos principais tópicos destacados</p><p>foram:</p><p>Animação Quadro a Quadro: Aqui, você desvendou os fundamentos dessa técnica, que transforma</p><p>uma sequência de quadros individuais em animações cativantes. Esse método permite controle preciso do</p><p>movimento, resultando em cenas cheias de detalhes e expressão.</p><p>Na Figura 1 vemos um exemplo de animação quadro a quadro digital, em formato de Sprite Sheet, que</p><p>consiste em uma imagem única com os quadros colocados em sequência, muito utilizada em jogos digitais.</p><p>Figura 1 | Sprite Sheet de uma Animação Quadro a Quadro</p><p>Fonte: Pixabay.</p><p>Introdução à Timeline do Photoshop e à Ferramenta "Tween": Exploramos a linha do tempo do</p><p>Photoshop (Figura 2) e a ferramenta "tween" (transição), que permite criar transições suaves entre quadros-</p><p>chave, conferindo naturalidade às suas animações.</p><p>Figura 2 | Animação Digital Quadro a Quadro utilizando Photoshop</p><p>Fonte: Reprodução do software Adobe Photoshop elaborada pela autora, 2023.</p><p>Exportando uma Animação no Photoshop: O Photoshop possui várias opções de exportação. Aprendemos</p><p>que escolher as configurações corretas é fundamental para obter uma versão final interessante e apropriada</p><p>para compartilhar e/ou utilizar, de acordo com o projeto em que estamos trabalhando.</p><p>Nas aulas "Introdução ao After Effects" e "Animação no After Effects" exploramos o After Effects da</p><p>Adobe (Figura 3), um software poderoso para criar efeitos visuais, animações</p><p>e composições em vídeos na</p><p>produção de conteúdo digital. Essa ferramenta permite adicionar movimento e elementos gráficos em</p><p>projetos audiovisuais. Vimos os seguintes tópicos fundamentais:</p><p>Timeline do After Effects: A linha do tempo do After Effects é uma representação visual da duração de um</p><p>projeto, em que elementos de vídeo, áudio e efeitos especiais são organizados.</p><p>Importação de Elementos do Photoshop: Você descobriu como importar elementos do Photoshop para o</p><p>After Effects, economizando tempo e mantendo a qualidade visual.</p><p>Interação entre os Softwares do Pacote Adobe voltados à Animação: Explorou a integração eficaz entre</p><p>os softwares da Adobe Photoshop, Illustrator e After Effects para otimizar o fluxo de trabalho na animação e</p><p>a qualidade.</p><p>Keyframes e Manipulação das Propriedades na Timeline e Propriedades dos Elementos</p><p>Gráficos: Aprendeu a usar keyframes (quadros chave) para criar animações detalhadas e a manipular as</p><p>propriedades dos elementos gráficos, o que é fundamental para a criação de animações complexas e</p><p>conceitos de animação tradicional, como Aceleração e Desaceleração para criar movimentos naturais</p><p>Figura 3 Interface do After Effects</p><p>Fonte: Reprodução do software Adobe Photoshop elaborada pela autora, 2023.</p><p>Durante a aula de “Animação 2D e 3D”, comparamos os estilos de animação tradicionais e digitais,</p><p>compreendendo suas vantagens e desvantagens, e expandimos nosso conhecimento para diferentes estilos de</p><p>animação, incluindo:</p><p>• Animação Híbrida: Descobrimos como a animação híbrida mistura o mundo real com elementos</p><p>fantásticos, por meio de técnicas de chroma key*, captura de movimentos e pós-produção.</p><p>* recurso que permite a substituição de uma cor sólida (no caso, o verde ou azul) por outra imagem/efeitos.</p><p>• Animação em Realidade Aumentada: Exploramos essa tecnologia empolgante, que combina o digital</p><p>com o mundo real, proporcionando experiências imersivas utilizadas em vários campos, incluindo a</p><p>educação.</p><p>Agora, você possui um conhecimento sólido de animação digital, desde os princípios até as técnicas</p><p>avançadas e as tendências. Continue praticando e explorando, pois o mundo da animação está repleto de</p><p>oportunidades criativas e emocionantes.</p><p>REVISÃO DA UNIDADE</p><p>Olá, estudante!</p><p>Não perca a oportunidade de assistir à nossa videoaula exclusiva, na qual faremos uma revisão detalhada da</p><p>unidade. Nossa revisão abordará os principais conceitos e as principais práticas da animação, desde a</p><p>tradicional até a realidade aumentada, garantindo que você esteja preparado para enfrentar os desafios dessa</p><p>área emocionante e em constante evolução. Não deixe de participar e aproveitar ao máximo essa valiosa</p><p>oportunidade de aprendizado!</p><p>ESTUDO DE CASO</p><p>Para contextualizar a sua aprendizagem, imagine que você trabalha como designer em uma agência de</p><p>publicidade chamada "CriAtivação Digital". A agência se destaca por sua inovação em marketing digital e</p><p>criação de conteúdo de qualidade para clientes de várias áreas. Você terá desafios reais na produção de</p><p>animações digitais para campanhas publicitárias.</p><p>Cenário:</p><p>Sua agência fechou contrato com um cliente do setor de tecnologia para criar uma campanha publicitária</p><p>inovadora visando promover um dispositivo de realidade aumentada em lojas físicas. O objetivo é criar um</p><p>vídeo de animação digital que explique as funcionalidades do produto e seu impacto na vida dos</p><p>consumidores.</p><p>Problema:</p><p>Para enfrentar esse desafio, utilize os conhecimentos adquiridos nas aulas. Aqui estão os principais desafios:</p><p>• Escolha do Estilo de Animação: Definir qual estilo de animação (tradicional, 2D ou 3D digital, entre</p><p>outras) se adequa melhor ao produto e à mensagem que o seu cliente deseja transmitir.</p><p>• Storyboard e Roteiro: Criar um storyboard detalhado e um roteiro eficaz que transmita as mensagens-</p><p>chave do produto e mantenha o público engajado.</p><p>• Softwares de Animação e Integração: Escolher a ferramenta mais apropriada para a produção da</p><p>animação, levando em conta as vantagens e desvantagens de cada software. Para otimizar o processo de</p><p>produção, você deve explorar a integração entre os softwares do pacote Adobe voltados à animação. Isso</p><p>permitirá que a equipe de designers colabore de maneira eficiente.</p><p>• Aceleração, Desaceleração e Elementos Gráficos Nativos: É crucial garantir que a animação tenha</p><p>movimentos naturais. Você precisa aplicar adequadamente a aceleração e a desaceleração e, se necessário,</p><p>incorporar elementos gráficos nativos do After Effects para simplificar a criação de animações complexas.</p><p>Objetivos:</p><p>Seu objetivo é criar uma animação digital de alta qualidade, que destaque as funcionalidades do dispositivo</p><p>de realidade aumentada do cliente e que seja capaz de engajar o público, transmitindo uma mensagem clara</p><p>e persuasiva.</p><p>Entrega:</p><p>Você deve apresentar ao cliente uma proposta detalhada que inclua a escolha do estilo de animação, a</p><p>ferramenta de animação selecionada, o storyboard e o roteiro, além de detalhes sobre como a equipe de</p><p>designers utilizará a integração entre os softwares da Adobe, as técnicas de aceleração e desaceleração e os</p><p>elementos gráficos nativos do After Effects, se aplicáveis.</p><p>Conclusão:</p><p>Este estudo de caso proporciona a oportunidade de aplicar os conhecimentos adquiridos nas aulas. Sua</p><p>capacidade de resolver esse problema da vida real será um reflexo do desenvolvimento da competência da</p><p>Unidade. Também é importante destacar a importância das soft skills, como criatividade, trabalho em equipe</p><p>e habilidades de comunicação no mundo profissional da animação digital. Boa sorte em sua jornada de</p><p>criação de uma animação de sucesso para seu cliente!</p><p>Reflita</p><p>Olá, estudante!</p><p>É sempre importante elaborar uma pesquisa quando se irá iniciar um projeto. Para nosso estudo de caso</p><p>sugiro um artigo que aborda a animação audiovisual, que combina arte, comunicação e fins comerciais,</p><p>proporciona um aspecto onírico e lúdico às marcas, valorizando e diferenciando os produtos. Este trabalho</p><p>analisa o processo de criação de um spot publicitário animado, com base em depoimentos de cinco</p><p>profissionais experientes na área. São abordadas as etapas, contribuições e estratégias envolvidas, bem como</p><p>as técnicas e linguagens utilizadas.</p><p>FERREIRA, Judite de Jesus; CARDOSO, Paulo Ribeiro. Animação audiovisual e comunicação</p><p>publicitária: uma visão processual na perspectiva dos profissionais envolvidos.</p><p>Será um estudo valioso, que agrega ao conteúdo da unidade e à resolução do nosso estudo de caso. Bons</p><p>Estudos!</p><p>RESOLUÇÃO DO ESTUDO DE CASO</p><p>Como a animação é uma área que envolve criatividade e experimentação, a resolução a seguir é uma</p><p>sugestão de abordagem que não é limitante.</p><p>Estilo de Animação Selecionado:</p><p>Após cuidadosa análise, a decisão foi utilizar uma combinação de animação 2D e 3D para esta campanha.</p><p>Isso permite combinar elementos visuais realistas com uma abordagem mais estilizada, criando uma</p><p>narrativa envolvente que demonstra a transformação do mundo físico em um espaço de realidade</p><p>aumentada.</p><p>Ferramenta de Animação Escolhida:</p><p>Optou-se por utilizar o Adobe After Effects como a principal ferramenta para produzir a animação. Essa</p><p>escolha foi feita com base na necessidade de criar efeitos visuais de alta qualidade e na capacidade do</p><p>software de lidar de forma eficaz com animações 2D e 3D.</p><p>Storyboard e Roteiro:</p><p>Desenvolve-se um storyboard detalhado, que descreve a progressão da animação, desde a introdução do</p><p>problema até a solução oferecida pelo dispositivo de realidade aumentada do cliente. O roteiro destaca as</p><p>funcionalidades do produto e enfatiza os benefícios para os consumidores, mantendo uma narrativa clara e</p><p>envolvente.</p><p>Integração dos Softwares Adobe:</p><p>Para otimizar a colaboração entre a equipe de designers, foi utilizada a integração entre os softwares da</p><p>Adobe, como</p><p>de papel, eram visualizadas em 12 espelhos</p><p>fixados ao eixo central do dispositivo. Isso permitia que o espectador assistisse à animação com mais</p><p>facilidade, e era possível posicionar uma vela no próprio eixo central para aumentar a luminosidade e tornar</p><p>as imagens mais claras e visíveis (Figura 10).</p><p>Figura 10 | O praxinoscópio</p><p>Fonte: BAHIA, Ana Beatriz; BAHIA, Sophia. História da animação. 1. ed. Curitiba: Intersaberes, 2021. E-</p><p>book.</p><p>Cinema:</p><p>Apesar de a animação não englobar apenas produções para cinemas, o intuito de exibir publicamente</p><p>animações foi a ideia-chave para que estas conquistassem o prestígio que têm atualmente. A primeira</p><p>apresentação de cinema foi de animação, organizada pelos irmãos Lumiere, em 1895, em um café em Paris.</p><p>A separação entre cinema animado (Figura 12) e filmado (Figura 13) só surgiu no século XX. Então,</p><p>apresentaremos os precursores do cinema da animação, a partir dos três métodos básicos de animação:</p><p>animação quadro a quadro, stop motion e de recorte.</p><p>Cinetoscópio: Desenvolvido por Thomas Edison e por William Dickson em 1889, era um aparelho que</p><p>permitia que uma longa tira de filme passasse por dentro de uma caixa escura, na qual havia um orifício para</p><p>que o espectador pudesse assistir ao filme. Era algo como um cinema para um único espectador (Figura 11).</p><p>Figura 11 | Cinetoscópio</p><p>Fonte: Wikimedia Communs.Figura 12 | Imagem do primeiro filme animado – desenho de Mélies (1895)</p><p>Fonte: Super interessante.Figura 13 | Filme mudo gravado em 1920 – Filha do Amanhecer.</p><p>Fonte: Wikimedia Communs.</p><p>Animação quadro a quadro: modo mais comum de animar, também chamado de animação tradicional.</p><p>Envolve uma sequência de desenhos individuais, muitas vezes elaborados à mão, com recursos diversos, que</p><p>compõem quadros (ou frames) da produção. A principal estratégia é desmembrar o desenho em camadas</p><p>(layers), trabalhadas pelo animador separadamente e visualizadas sobrepostas pelo espectador. É possível</p><p>redesenhar apenas fragmentos (Figura 14).</p><p>Figura 14 | Animação quadro a quadro de Pinochio (1904)</p><p>Fonte: Wikimedia Communs.</p><p>Animação stop motion: é um método de animação na qual a representação de movimento é efetivada</p><p>mediante o uso de bonecos e de outros objetos concretos. Tais elementos são dispostos em espaço físico</p><p>(cenário), sutilmente manipulados pelo animador, e são fotografados. Esse processo é repetido quadro a</p><p>quadro, sendo extremamente trabalhoso e mais demorado que a animação desenhada (Figura 15).</p><p>Figura 15 | Stop motion.</p><p>Fonte: Wikimedia Communs.</p><p>Animação de recorte: é produzida por meio de manipulação de figuras planas, geralmente desenhadas e</p><p>recortadas em papel ou outro material plano, por isso também é conhecida por cut-out. A vantagem é que a</p><p>figura é feita apenas uma vez e é bidimensional. Costuma ser mais ágil que as outras técnicas (Figura 16).</p><p>Figura 16 | Recorte ou cut-out</p><p>Fonte: BAHIA, Ana Beatriz; BAHIA, Sophia. História da animação. 1. ed. Curitiba: Intersaberes, 2021. E-</p><p>book.</p><p>INDUSTRIALIZAÇÃO DA ANIMAÇÃO</p><p>Neste bloco, veremos como a animação se tornou essa indústria poderosa, tanto em produções</p><p>cinematográficas quanto nos jogos.</p><p>Os Primeiros Estúdios:</p><p>Surgiram antes da 1a Guerra Mundial (1914 – 1918), e contribuíram para a ascensão da indústria</p><p>cinematográfica americana. Estúdios como Bray Productions e Fleischer Studio tinham organização</p><p>empresarial e utilizavam novas técnicas de animação, para produzir de forma mais rápida e barata. Foram</p><p>criados por animadores autodidatas, que buscavam por profissionais cartunistas em jornais, para ensinar as</p><p>técnicas básicas de animação.</p><p>A grande preocupação era uniformizar as representações gráficas para produção em larga escala, anulando,</p><p>com isso, a parte criativa dos artistas. John Randolph Bray foi um dos principais produtores de animação do</p><p>Estúdio Bray Productions, e criou uma estratégia com base em 4 pilares: modificar a forma de produção</p><p>vigente; adotar a divisão de trabalho; proteger legalmente tais processos por meio de patentes; e aperfeiçoar</p><p>a distribuição, publicidade e o marketing das produções.</p><p>Em 1914, a técnica de desenho sobre folhas de celuloide transparente foi patenteada por Earl Hurd, diretor</p><p>pioneiro da animação de cinema norte-americano. Ela permitiu explorar cenários, objetos e personagens de</p><p>forma independente. Isso abriu portas para outros profissionais adentrarem o campo da animação, como os</p><p>cenaristas, e possibilitaram a criação do live action, que permite misturar cenários reais com animação,</p><p>como ilustra a Figura 17.</p><p>Figura 17 | Exemplo de animação com cenário real, filme Space Jam – Warner Bros, 1993.</p><p>Fonte: FREITAS, Mariana Ferreira de. Fundamentos e técnicas da animação 2D. 1. ed. Curitiba, PR:</p><p>Intersaberes, 2023. E-book.</p><p>Em 1915, a rotoscopia surgiu como uma técnica icônica para a época, sendo criada por Max e Dave</p><p>Fleischer, que eram produtores de animação em seu próprio estúdio (Fleischer Stúdio). Imagens reais eram</p><p>filmadas e projetadas sobre cada quadro por meio de um vidro, com o intuito de obter movimentos mais</p><p>realistas. Essa técnica foi adaptada e é utilizada até hoje.</p><p>Era de Ouro da Animação Americana:</p><p>Período entre o final da década de 1920 e meados de 1960, com o surgimento dos estúdios Walt Disney,</p><p>Warner Bros e MGM (Metro-Goldwyn-Mayer), que criaram técnicas inovadoras e personagens marcantes.</p><p>Algumas das técnicas desenvolvidas na época foram:</p><p>Régua de animação: barra fina de metal com pinos para fixar folhas perfuradas e fazer movimentação</p><p>rápida (flipagem). É utilizada até (Figura 18).</p><p>Figura 18 | Régua de animação</p><p>Fonte: Amazon.</p><p>Câmera de múltiplos planos: a câmera fotografa de cima um sistema com várias pinturas feitas em tela de</p><p>vidro sobrepostas a determinadas distâncias. Obtém-se, assim, um resultado mais fluido e natural (Figura</p><p>19).</p><p>Figura 19 | Câmera de múltiplos planos.</p><p>Fonte: FREITAS, Mariana Ferreira de. Fundamentos e técnicas da animação 2D. 1. ed. Curitiba, PR:</p><p>Intersaberes, 2023. E-book.</p><p>Mesa de animação: composta por bancada que reclinava e um disco de animação ao centro, com duas</p><p>réguas de animação, com prateleiras nas laterais e gavetas para guardar os materiais de animação.</p><p>OFigura 20 | Mesa de animação</p><p>Fonte: FREITAS, Mariana Ferreira de. Fundamentos e técnicas da animação 2D. 1. ed. Curitiba, PR:</p><p>Intersaberes, 2023. E-book.</p><p>Storyboard: conjunto de rascunhos das ações principais de cada cena, dispostos em quadros, organizados na</p><p>ordem em que serão apresentados na animação, com anotações para melhor compreensão do roteiro (Figura</p><p>20).</p><p>Figura 21 | Exemplo de Storyboard</p><p>Figura 21 | Exemplo de Storyboard</p><p>As produções digitais mantêm a essência da animação tradicional pela utilização da animação em 24</p><p>quadros por segundo e da divisão dos desenhos em camadas, para gerar movimentos mais realistas.</p><p>Animação 3D:</p><p>A animação 3D revolucionou a indústria da animação. Os animadores utilizam software especializado para</p><p>criar modelos tridimensionais de personagens, objetos e cenários, que podem ser movidos e animados</p><p>digitalmente. O rigging (animação de aparelhamento), que envolve a criação de um esqueleto virtual para os</p><p>personagens, permite que os animadores controlem e articulem seus movimentos de maneira realista (Figura</p><p>20).</p><p>Figura 22| Rigging</p><p>Fonte: Wikimedia Commons.</p><p>Por aqui terminamos nossa jornada pela história da animação. Agora, você consegue compreender a</p><p>evolução da animação e como ela se tornou um dos principais meios de entretenimento para os seres</p><p>humanos atualmente. Os conhecimentos adquiridos nesta aula facilitarão seu entendimento sobre fases e</p><p>etapas do processo de produção de uma animação, e as principais técnicas e ferramentas utilizadas</p><p>o Photoshop e o After Effects. Isso permitiu que os elementos gráficos criados no Photoshop</p><p>fossem facilmente importados para o After Effects, economizando tempo e mantendo a consistência visual.</p><p>Aceleração, Desaceleração e Elementos Gráficos Nativos:</p><p>Durante o processo de criação da animação, aplicou-se princípios de aceleração e desaceleração para</p><p>garantir que os movimentos fossem naturais e atraentes.</p><p>A incorporação de elementos gráficos nativos do After Effects permitiu praticidade em criar formas simples</p><p>que interagiam com o cenário, simulando a Realidade Aumentada.</p><p>Resultado:</p><p>Uma animação com a representação envolvente do produto de realidade aumentada do cliente, destacando</p><p>suas funcionalidades e o impacto na vida dos consumidores. A combinação de elementos 2D e 3D trouxe</p><p>imersão e transmitiu a funcionalidade do produto de forma eficaz.</p><p>Entrega:</p><p>Apresentação da animação finalizada ao cliente, juntamente com o storyboard e o roteiro, para revisão. Em</p><p>adicional, uma explicação detalhada sobre como as técnicas e ferramentas contribuíram para o sucesso do</p><p>projeto e a abertura para fazer ajustes com base no feedback do cliente, garantindo que a animação atenda</p><p>plenamente às suas expectativas.</p><p>Conclusão:</p><p>Esta resolução do estudo de caso demonstra a aplicação prática dos conhecimentos adquiridos nas aulas.</p><p>Este projeto ressalta a importância de escolher as técnicas e ferramentas certas para a tarefa, além de realçar</p><p>a integração eficaz entre softwares e a aplicação de princípios de animação para criar conteúdo envolvente.</p><p>A colaboração eficiente da equipe e a flexibilidade para fazer ajustes com base no feedback do cliente</p><p>também foram aspectos fundamentais para o sucesso deste projeto.</p><p>RESUMO VISUAL</p><p>Fonte: elaborado pelo autor.</p><p>.</p><p>•</p><p>Princípios e ferramentas de animação</p><p>• Aula 1 - Princípios de animação I</p><p>• Aula 2 - Princípios da animação II</p><p>• Aula 3 - Ferramentas de animação digital</p><p>• Aula 4 - Aplicação de efeitos</p><p>• Aula 5 - Revisão da unidade</p><p>• Referências</p><p>0%</p><p>T</p><p>A-AA+</p><p>PRINCÍPIOS E FERRAMENTAS DE ANIMAÇÃO</p><p>• Aula 1 - Princípios de animação I</p><p>• Aula 2 - Princípios da animação II</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U3/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U3/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U3/index.html#aula1</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U3/index.html#aula2</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U3/index.html#aula3</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U3/index.html#aula4</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U3/index.html#aula5</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U3/index.html#referencias</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U3/index.html#aula1</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U3/index.html#aula2</p><p>• Aula 3 - Ferramentas de animação digital</p><p>• Aula 4 - Aplicação de efeitos</p><p>• Aula 5 - Revisão da unidade</p><p>• Referências</p><p>Aula 1</p><p>PRINCÍPIOS DE ANIMAÇÃO I</p><p>Nesta aula, você terá acesso a ricos conhecimentos sobre seis Princípios da</p><p>Animação.</p><p>INTRODUÇÃO</p><p>Nesta aula, você terá acesso a ricos conhecimentos sobre seis Princípios da Animação, sendo: Movimento</p><p>em arcos, que tende a simular movimentos reais a partir de linhas curvas; Encenação, que está relacionada</p><p>à organização cênica e ações coordenadas com os movimentos, dispostos com os elementos da cena, sejam</p><p>eles objetos ou personagens; Sincronismo, que prevê a coordenação entre os movimentos, ações e diálogos</p><p>dos personagens a partir do ritmo da animação, garantindo que tudo se mova conforme a trilha sonora</p><p>definida; Aceleração e Desaceleração, que faz juízo às ações naturais do nosso cotidiano, como quando</p><p>jogamos algo para alguém, e esse objeto tende a ter uma velocidade gradual até encontrar sua velocidade</p><p>máxima e, então, começar sua desaceleração gradual; e o Exagero, que está vinculado à criação de cenas</p><p>mais interativas e engraçadas, exagerando ações, expressões e movimentos.</p><p>Acompanhe aqui esses assuntos.</p><p>Boa aula!</p><p>MOVIMENTO EM ARCOS</p><p>Em sua Era de Ouro, em meados do século XX, mais especificamente entre as décadas de 1920 e 1940, o</p><p>cineasta e empresário norte-americano Walt Disney, pioneiro na indústria da animação, propôs os Doze</p><p>Princípios da Animação: princípios e conteúdos riquíssimos que apresentam uma variedade de técnicas</p><p>para animação, independentemente de estar ligada à representação 3d, 2d, stop motion etc., nem mesmo a</p><p>nenhum tipo de software, mas voltada à percepção do movimento, os quais foram adotados como base para</p><p>a animação. São eles:</p><p>- Comprimir e esticar;</p><p>- Antecipação;</p><p>- Encenação;</p><p>- Animação direta e pose a pose;</p><p>- Continuação e sobreposição da ação;</p><p>- Aceleração e desaceleração;</p><p>- Movimento em arcos;</p><p>- Ação secundária;</p><p>- Temporização;</p><p>- Exagero;</p><p>- Desenho volumétrico;</p><p>- Apelo (“design atraente”).</p><p>Um dos princípios apresentado por Walt Disney é o de MOVIMENTO EM ARCOS. Para criar esse</p><p>princípio, percebeu-se que os objetos e seres vivos raramente se movem em linha reta, mas sim em</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U3/index.html#aula3</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U3/index.html#aula4</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U3/index.html#aula5</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U3/index.html#referencias</p><p>movimentos mais “naturais”, como arcos (ou parábolas); então, devemos entender que na animação essa</p><p>realidade deve ser apresentada da mesma forma. Sendo assim, a movimentação em arcos acontece a partir de</p><p>uma trajetória curva ou em arco.</p><p>Criar animações fundamentadas em situações realistas é o segredo para o sucesso. Veja que quando um</p><p>personagem ou objeto se move em arco, ele segue uma trajetória curva (figura 1), traduzindo em</p><p>movimentos naturais e suaves.</p><p>Figura 1 | Princípio do Movimento em Arcos</p><p>Fonte: WILLIAN, Richard (2016, p. 370)</p><p>Pense também, por exemplo, em um personagem caminhando: se as mãos desse personagem seguem em</p><p>linha reta, sem movimento, tudo parecerá mecânico e pouco natural. Entretanto, ao animar as mãos em</p><p>movimento em arco, essa caminhada parecerá muito mais fluida e autêntica.</p><p>Aplicação do Princípio de Movimento em Arcos</p><p>Como visto anteriormente, o princípio é essencial em diversas situações da animação, assim como corridas,</p><p>saltos, ou até mesmo em situações mais sutis, como um piscar de olhos, sendo também utilizado em animais</p><p>e objetos inanimados.</p><p>Os animadores que desenvolvem e utilizam esse princípio criam animações agradáveis e envolventes, pois</p><p>tudo se assemelha à realidade, criando a sensação convincente de que esses personagens estão “vivos”.</p><p>Variações no Movimento em Arcos</p><p>Assim como em todos os outros princípios, a aplicação não deve ser seguida de maneira rígida em todas as</p><p>situações, visto que você tem a liberdade de ajustar e adaptar o princípio de acordo com a intenção da</p><p>animação e do projeto. Por exemplo, em situações mais dramáticas, arcos mais amplos darão uma sensação</p><p>preocupante ou perigosa, enquanto arcos mais suaves criarão movimentos delicados.</p><p>Como previsto por Walt Disney, esse princípio propõe que a animação desenhada a partir de uma curva</p><p>(balanço dos braços, cabeça, tronco) atenue as sensações de rigidez, permanecendo mais suaves, tornando-as</p><p>mais realistas (figuras 2 e 3).</p><p>Figura 2 | A ação está em um arco</p><p>Fonte: WILLIAN, Richard (2016, p. 148)Figura 3 | Movimentos do pé</p><p>Fonte: WILLIAN, Richard (2016,</p><p>p. 136)</p><p>Perceba que, sem dúvida, as influências dos princípios da animação são incalculáveis. Eles continuam sendo</p><p>ensinados e utilizados em estúdios de animação em todo o mundo. Compreender a importância e a aplicação</p><p>desse princípio é crucial para desenvolver animações envolventes e realistas.</p><p>ENCENAÇÃO E SINCRONISMO</p><p>A animação fascina pessoas de todas as idades e culturas, é uma arte que diversifica criatividade, tecnologia</p><p>e talento com o objetivo principal de contar histórias envolventes. Para isso, um dos elementos importantes é</p><p>a utilização do princípio de ENCENAÇÃO E SINCRONISMO, que fará toda a diferença na criação de</p><p>animações inesquecíveis.</p><p>Princípio de Animação: encenação e sincronismo</p><p>Nesse princípio, tudo está relacionado com a forma como os personagens e objetos serão inseridos,</p><p>posicionados e movidos na cena, além de suas ações coordenadas com o tempo determinado e a música.</p><p>Esse princípio desempenha um papel essencial na comunicação do conceito, das ideias e das emoções que o</p><p>público receberá, criando uma experiência visual e auditiva consistente, mantendo o espectador entretido na</p><p>história.</p><p>A encenação é representada pela organização e disposição dos elementos na cena, sejam personagens,</p><p>objetos, câmeras ou elementos visuais, pois todos eles devem direcionar a atenção do espectador e criar um</p><p>senso de equilíbrio e harmonia, ou então, tensão e conflito, tudo conforme a necessidade da cena e da</p><p>história.</p><p>É fundamental que o espectador veja e compreenda claramente a ação que está acontecendo. Esse é o maior</p><p>objetivo desse princípio. Quando um movimento está bem claro e visível, podemos dizer que essa ação tem</p><p>um bom “staging”, ou seja, foi bem elaborada (figura 4).</p><p>Figura 04| Staging I</p><p>Fonte: BLAIR, Preston (1994, p. 178)</p><p>Para oferecer o “staging”, é preciso administrar as posturas e os ângulos do personagem ou do objeto,</p><p>buscando oferecer a melhor compreensão do que se pretende mostrar. Dica: se quiser checar se há um bom</p><p>“staging”, observe a silhueta (figura 5) do personagem e do objeto que ele traz consigo ou próximo a ele: se</p><p>a ação ficar clara apenas com a silhueta, é certo que você alcançou seu objetivo.</p><p>Figura 5 | Staging II</p><p>Fonte: BLAIR, Preston (1994, p. 179)</p><p>Leve sempre em conta que a cena deve transmitir sensações pré-determinadas, como curiosidade, medo ou</p><p>suspense, e que o posicionamento da câmera, a iluminação, a posição do personagem e a trilha sonora</p><p>desempenham um papel crucial na percepção do espectador. Quando a encenação é eficaz, o diretor de</p><p>animação consegue contar a história de maneira emocionante e eficiente.</p><p>Sincronismo na animação</p><p>Deve-se associar sincronismo à coordenação precisa de movimentos, ações e do próprio diálogo com o ritmo</p><p>da animação, garantindo que os personagens se mexam conforme a trilha sonora e que as ações caminhem</p><p>junto com a narrativa, criando fluidez e naturalidade na animação.</p><p>Podemos utilizar como exemplo filmes musicais da Disney (figura 6), quando os movimentos dos</p><p>personagens coincidem perfeitamente com a música, intensificando a experiência auditiva e visual para o</p><p>espectador.</p><p>Figura 6 | Cena do filme Encanto, 2021</p><p>Fonte: Disney/Divulgação</p><p>Portanto, a encenação e o sincronismo exercem papéis essenciais no desenvolvimento de animações</p><p>convincentes. A encenação sendo responsável pela definição de elementos que se encaixam no enredo, e o</p><p>sincronismo coordenando todos os movimentos, diálogos e músicas. Construir essa precisão é crucial para</p><p>tornar as cenas mais reais e emocionantes.</p><p>ACELERAÇÃO/DESACELERAÇÃO E EXAGERO E AÇÃO SECUNDÁRIA</p><p>Um dos princípios fundamentais da animação é o da ACELERAÇÃO E DESACELERAÇÃO, e está</p><p>totalmente ligado aos movimentos realistas e convincentes dos personagens e objetos em cena. Visto que a</p><p>animação está sempre associada a movimentos e ações que envolvam e cativem os espectadores, ter</p><p>conhecimento aprofundado desse princípio é essencial para criar animações autênticas.</p><p>Esses dois conceitos são fenômenos naturais em nosso cotidiano, podemos observar a nós mesmos como</p><p>exemplo: quando vamos correr, não alcançamos a velocidade pretendida imediatamente, mas sim iniciamos</p><p>a corrida gradualmente e, ao parar, também não o fazemos de imediato... desaceleramos aos poucos, até</p><p>parar completamente (figura 7).</p><p>Figura 7 | Aceleração e desaceleração</p><p>Fonte: WILLIAN, Richard (2016, p. 45)</p><p>Veja que esse princípio está totalmente relacionado ao início e ao fim de um movimento, evidenciando, de</p><p>maneira suave a graduação, ou seja, a variação da velocidade, buscando a realidade para criar animações</p><p>convincentes (figura 8).</p><p>Figura 8 | Aceleração e desaceleração</p><p>Fonte: BLAIR, Preston (1994, p. 101)</p><p>Acompanhe abaixo seus princípios:</p><p>Antecipação: esse princípio prepara o público para a ação que está prestes a acontecer, gerando expectativa.</p><p>Então, antes de desenvolver o movimento em si, é necessário prever sua antecipação, ou seja, é importante</p><p>que o personagem ou objeto se prepare para essa ação que irá acontecer. Isso criará movimentos mais</p><p>naturais e envolventes.</p><p>Aceleração gradual: a aceleração refere-se ao processo de iniciar os movimentos lentamente e, em seguida,</p><p>acelerar a velocidade progressivamente. Isso deve acontecer de maneira gradual, ou seja, nos primeiros</p><p>quadros da animação o personagem/objeto se moverá lentamente, até alcançar a velocidade desejada. Isso</p><p>será importante para criar movimentos suaves, dinâmicos e realistas.</p><p>Pico de velocidade: momento em que o objeto ou personagem atinge sua velocidade máxima ou a</p><p>velocidade desejada. O personagem/objeto deve mantê-la por um período de tempo; esse detalhe é</p><p>importante para criar a sensação de continuidade do movimento e da cena. Essa técnica permite destacar a</p><p>ação principal com cenas impactantes, atraindo, assim, a atenção do público.</p><p>Desaceleração gradual: ao criar a cena em que o movimento está prestes a terminar, reduzindo</p><p>progressivamente a velocidade do objeto ou personagem, você deve iniciar a desaceleração gradual, assim</p><p>como acontece na vida real, pois raramente as coisas param abruptamente. Ou seja, a velocidade segue</p><p>diminuindo até a parada total. Isso permitirá cenas atraentes, cativando o espectador com fluidez e</p><p>autenticidade (figura 9).</p><p>Seguir através: ainda na desaceleração, um movimento residual pode acontecer e é conhecido como “seguir</p><p>através. Por exemplo: um personagem para de correr, porém seus cabelos ou roupas ainda balançam por um</p><p>curto período de tempo; isso apresentará uma sensação de continuidade, transmitindo sensações do mundo</p><p>real por meio de detalhes convincentes.</p><p>Seguir as diretrizes desse princípio é essencial para criar animações realistas, pois influencia diretamente no</p><p>modo como os movimentos se assemelham à naturalidade, criando também a sensação de peso e física,</p><p>tornando-se mais convincente e envolvente para o público, já que a própria expressão facial contribui para a</p><p>autenticidade e vitalidade do personagem.</p><p>Portanto, o princípio de aceleração e desaceleração é fundamental, e entender todos os conceitos e os pontos</p><p>da velocidade é ofertar animações de qualidade, envolventes e convincentes.</p><p>VIDEO RESUMO</p><p>Você verá neste vídeo que o princípio de animação em arcos garante movimentos suaves e fluidos,</p><p>construindo trajetórias curvas para objetos e personagens. Já o princípio da encenação direciona a atenção</p><p>do espectador para ações eficazes, curiosas e engraçadas. Os princípios de aceleração e desaceleração dão</p><p>peso e realismo às cenas, e o exagero, por sua vez, amplia gestos e emoções. Já a ação</p><p>secundária complementa a ação principal. Todos eles, juntos, criam animações cativantes e inesquecíveis.</p><p>Saiba mais</p><p>Conheça dois livros importantes para estudo e produção de animação. Neles você encontrará o passo a passo</p><p>para construir personagens e movimentos que farão a diferença em seus desenhos:</p><p>WILLIAMS, Richard.</p><p>Manual de animação: manual de métodos, princípios e fórmulas para</p><p>animadores clássicos, de computador, de jogos, de stop motion e de internet. São Paulo: SENAC, 2016.</p><p>BARBOSA Junior, Alberto Lucena. Arte da animação: técnica e estética através da história. 3 ed. São</p><p>Paulo: Senac, 2017.</p><p>Aula 2</p><p>PRINCÍPIOS DA ANIMAÇÃO II</p><p>Sendo a arte da animação uma área repleta de criações impactantes, para tanto,</p><p>algumas técnicas são essenciais para criar animações de qualidade.</p><p>INTRODUÇÃO</p><p>Olá, estudante!</p><p>Sendo a arte da animação uma área repleta de criações impactantes, para tanto, algumas técnicas são</p><p>essenciais para criar animações de qualidade. Vamos começar com o princípio da animação de comprimir e</p><p>esticar, que dá vida aos objetos e personagens ao deformar suas características naturais; já o princípio</p><p>de desenho volumétrico cria sensação de tridimensionalidade em personagens e objetos, aproximando-os</p><p>da nossa realidade. A animação direta é criada a partir de desenhos produzidos quadro a quadro,</p><p>normalmente feitos à mão, conferindo um toque artesanal à animação. O princípio de continuidade mantém</p><p>a consistência visual e narrativa a partir de movimentos e elementos esperados pelo espectador, enquanto</p><p>a sobreposição da ação permite que várias ações aconteçam simultaneamente, mesmo que complexas e</p><p>dinâmicas. E, por fim, a técnica de apelo tem como objetivo criar personagens cativantes e curiosos,</p><p>despertando interesse e empatia no espectador.</p><p>Vamos lá!</p><p>COMPRIMIR/ESTICAR</p><p>Animações podem ser desenvolvidas para os mais variados segmentos, seja entretenimento, publicidade,</p><p>design, ou mesmo na educação. Ela desempenha um papel crucial ao transmitir informações, contar histórias</p><p>e criar experiências visuais. Os Princípios Básicos da Animação são técnicas que agregam realismo e vida</p><p>para as animações em geral. Abordaremos nesse bloco o princípio de COMPRIMIR E ESTICAR, que é</p><p>um os mais importantes, e também um dos mais interessantes, pois permite que o personagem/objeto tenha a</p><p>capacidade de se deformar para criar movimentos específicos, não sendo apenas uma deformação física, mas</p><p>principalmente expressiva, transmitindo emoções e personalidade.</p><p>Para aplicar esse princípio, você deve compreender as proporções dos objetos e personagens, para que então</p><p>compreenda a modificação da forma no geral, pois quando um alvo se move rapidamente, ele tende a se</p><p>comprimir, e quando ele se desacelera ou para bruscamente, tende a se esticar (figura 1). Por isso, esse</p><p>princípio da elasticidade é usado para criar cenas mais realistas e fluidas aos olhos do espectador. Dessa</p><p>forma, observe o movimento da cena e, em seguida, ajuste o desenho, esticando-o quando estiver se</p><p>movimentando rapidamente e comprimindo-o quando estiver diminuindo sua velocidade. Sem dúvida isso</p><p>fará toda a diferença na hora de transmitir a aceleração e a desaceleração de maneira natural e fluida.</p><p>Figura 1 | Cuidados com a proporção do personagem</p><p>Fonte: WILLIAN, Richard (2016, p. 250)</p><p>Perceba, na imagem abaixo (figura 2), que o boneco, ao pular, tem o seu corpo esticado, e, ao cair, seu corpo</p><p>é comprimido, visto que a energia foi transferida para a sua perna, que precisa absorver todo o peso do corpo</p><p>- como no mundo físico aconteceria com a força da gravidade. Esse ciclo de estiramento e compressão</p><p>permite que a animação seja mais dinâmica, divertida e envolvente, já que os personagens ganham vida e</p><p>emoção.</p><p>Figura 2 | Princípio de Comprimir e Esticar</p><p>Fonte: WILLIAN, Richard (2016, p. 95)</p><p>Um ponto importante é que o princípio de comprimir e esticar não se restringe, como dito anteriormente,</p><p>apenas a questões físicas do movimento, ele também auxilia na personalidade dos personagens, pois podem</p><p>conter compressões ou estiramentos engraçados para evidenciar sua sagacidade e vivacidade, como por</p><p>exemplo um vilão, que pode apresentar estiramentos para dar ênfase à sua autoridade (figura 3).</p><p>Figura 3 | Princípio de Comprimir e Esticar</p><p>Fonte: WILLIAN, Richard (2016, p. 95)</p><p>Veja, ainda, na figura 4, que as expressões físicas, particularmente no rosto, devem apresentar mudanças</p><p>faciais, com traços esticando e comprimindo, porém, sempre considerando que seu volume se mantenha</p><p>inalterado.</p><p>Figura 4 | Testes do princípio de Comprimir e Esticar</p><p>Fonte: BLAIR, Preston (2013, p. 26)</p><p>Para dominar o princípio de comprimir e esticar um personagem, é necessário administrar habilidades como</p><p>anatomia, física e o próprio software de animação, independentemente se a animação for produzida em 2D</p><p>ou 3D, com efeitos visuais ou sem eles.</p><p>Por fim, esse princípio se apresenta como peça-chave fundamental para a animação, que, muito além das</p><p>questões técnicas, influencia na narrativa, na personalidade do personagem e em expressões mais cativantes.</p><p>Compreender e dominar esse princípio é garantir o sucesso da sua animação e se destacar nessa indústria.</p><p>DESENHO VOLUMÉTRICO E ANIMAÇÃO DIRETA</p><p>Dentro das técnicas de animação, o desenho volumétrico e a animação direta apresentam métodos</p><p>diferenciados, visto que a primeira técnica se baseia na tridimensionalidade e a segunda na produção de</p><p>poses especificas e, dessa forma, se mostram de maneira muito interessante e criativa para a elaboração de</p><p>cenas e personagens ainda mais cativantes e realistas.</p><p>O Desenho Volumétrico</p><p>Na animação, o desenho volumétrico está associado à profundidade tridimensional e à perspectiva da</p><p>imagem trabalhada (figura 5), seja em papel ou em softwares de animação, como o After Effects. Aqui o</p><p>realismo pode acontecer ao respeitar as proporções do personagem, os cenários e os objetos, por exemplo.</p><p>Figura 5 | Desenho volumétrico</p><p>Fonte: William, Richard (2016, p. 333)</p><p>Animação direta</p><p>Já na animação direta, a técnica é diferente, pois os animadores dedicam-se diretamente a um desenho mais</p><p>“fluido”, simulando movimentos “reais”, produzindo poses quadro a quadro (figura 5), iniciando sempre do</p><p>ponto de partida, que são os quadros-chaves (figura 6), ou seja, poses definidas criadas para servirem de</p><p>base para a construção das poses intermediárias, até o último ponto; entre eles há os frames, que intervalam</p><p>o movimento para então construir a ilusão do movimento. Além disso, uma característica especial é que, na</p><p>animação direta, o desenho evolui livremente até o seu objetivo final.</p><p>Figura 5 | Animação quadro a quadro</p><p>Fonte: BLAIR, Preston (2013, p. 128)Figura 6 | Quadros-chave</p><p>Fonte: Material Public.</p><p>Neste caso, a animação é mais espontânea e a cena menos mecânica. Aqui, o animador não planeja</p><p>exatamente tudo, ele pode ir “inventando” cada cena à medida que a animação progride. Mas, veja, nesse</p><p>caso, é preciso ter um planejamento geral dos objetivos, como início, meio e fim da animação.</p><p>A animação direta é muito utilizada em filmes tipo stop motion (figura 7) e em animações de marionetes</p><p>(figura 8). E, embora diferente do habitual, não é menos importante ou desafiadora que as outras técnicas de</p><p>animação, visto que, na maioria das vezes, é desenhada à mão.</p><p>Figura 7 | Stop Motion: Movimentos lentos</p><p>Fonte: PixabayFigura 8 | Marionete</p><p>Fonte: Pixabay.</p><p>Originalmente, esse princípio foi pensado para animações 2D (figura 10) e com a tecnologia, adaptou-se</p><p>muito bem para animações 3D. Aqui, a precisão é essencial, tanto na posição quanto no movimento dos</p><p>objetos. Cada detalhe é extremamente importante e deve ser ajustado cuidadosamente, pois o objetivo é que</p><p>a animação seja fluida e o mais realista possível. Para isso, existem técnicas importantes que auxiliam no</p><p>processo.</p><p>a. Iluminação e sombreamento: a iluminação tem papel importante na animação direta, pois influencia a</p><p>relação personagem/objeto com o ambiente como um todo, por isso deve ser ajustada cuidadosamente para</p><p>que todos os efeitos desejados sejam alcançados (figura 9).</p><p>Figura 9 | Iluminação na animação</p><p>Fonte: Pixabay</p><p>b. Troca de cenários: a troca</p><p>de cenário é bastante comum na animação direta, além da manipulação dos</p><p>elementos, então planeje bem essa etapa! Isso porque seguir o planejamento é o que garantirá a suavidade</p><p>entre as cenas, além do conceito de continuidade visual.</p><p>c. Stop motion: essa modalidade apresenta a movimentação de pequenos detalhes nos objetos ou</p><p>personagens; a partir disso, cada quadro é fotografado para que, então, seja elaborada a animação. Aqui,</p><p>cada detalhe é importante.</p><p>Como curiosidade, é importante ressaltar a técnica da animação “pose a pose” ou também conhecida como</p><p>“quadro a quadro”, na qual o animador planeja antecipadamente a quantidade de intervalos entre os dois</p><p>extremos (início e fim), para que, assim, possa ser controlado o tempo necessário da animação. Em estúdios</p><p>de animação, o assistente normalmente fica responsável por essa tarefa, preenchendo os espaços faltantes.</p><p>Nesse tipo de animação, é possível ter mais controle e clareza do produto final.</p><p>Figura 9 | Animação pose a pose</p><p>Fonte: Pixabay</p><p>Dessa forma, é considerada animação direta aquela que é desenhada pose a pose em sequência e a partir de</p><p>quadros-chave. Após o término das poses principais, são desenhadas as poses intermediárias, a fim de criar</p><p>uma narrativa fluida e interessante.</p><p>CONTINUIDADE E SOBREPOSIÇÃO DA AÇÃO E APELO</p><p>Continuação e sobreposição da ação</p><p>Princípio que leva em consideração que nada para de uma só vez, pois os objetos possuem articulações e</p><p>“gordura corporal”, sendo considerado, então, que a flexibilidade das figuras e os movimentos em tempos</p><p>diferentes fazem toda a diferença para dar a sensação de continuidade (figura 11). Ou seja, objetos,</p><p>personagens e cenários, sempre que possível e quando desejado, devem agir de maneira coerente e</p><p>sequencial.</p><p>Figura 11 | Continuidade e sobreposição da ação</p><p>Fonte: William, Richard (2016, p. 226)</p><p>A continuidade prevê que os elementos em cena devem manter uma aparência consistente para criar</p><p>quadros sucessivos, seja para personagens, objetos ou outros elementos visuais, pois não devem sofrer</p><p>grandes mudanças de tamanho ou forma, garantindo, assim, uma transição lógica e suave, além de assegurar</p><p>que o espectador não se distraia com inconsistências e permaneça imerso na história.</p><p>Já a sobreposição da ação adiciona uma camada de profundidade física / tridimensional e complexidade às</p><p>animações, além de mais realismo e dinamismo, permitindo que várias ações aconteçam simultaneamente.</p><p>Para utilizá-lo, você deve dividir o movimento em partes e representar diferentes partes do objeto ou</p><p>personagem de maneira independente. Isso criará autenticidade ao modo como os elementos reagem entre si,</p><p>como por exemplo, quando o personagem para e algo nele continua a se movimentar (Figura 12). Ao</p><p>combinar esses princípios, é possível construir animações dinâmicas, realistas e autênticas, mantendo a</p><p>atenção do espectador com ricos detalhes.</p><p>Figura 12 | Ação sobreposta</p><p>Fonte: Rockcontent.</p><p>Apelo - design atraente</p><p>Uma aparência atraente é sempre importante. Carisma então, nem se fala! Portanto os personagens devem</p><p>ter um design interessante, sejam eles mocinhos ou vilões, para que o espectador se sinta atraído pela</p><p>imagem, para que possa gerar empatia e conexão com os personagens. Essas atrações são por imagens</p><p>simples, comunicativas e com um certo charme ou magnetismo.</p><p>Cada personagem possui uma expressão, forma de andar e agir, ou seja, sua própria personalidade, como por</p><p>exemplo um personagem carismático que conquista o coração do público e torna a animação mais</p><p>estimulante (figura 13).</p><p>Figura 13 | Apelo e Design Atraente. Filme a Branca de Neve e os sete anões, 1938</p><p>Fonte: Rockcontent.</p><p>Uma coisa é importante dizer: a atração visual da animação vai além de personagens e inclui todo o processo</p><p>de design gráfico, desde a escolha de cores, cenários, composições e elementos gráficos; tudo deve estar</p><p>apoiado na mesma identidade visual, ou seja, nos elementos visuais que se comunicam com o público,</p><p>apresentando valores, propósitos e conexão visual, sendo reconhecido em vários momentos durante a</p><p>animação. Para tanto, você deve respeitar a história e a personalidade de cada integrante da animação, assim</p><p>como o enredo e o público-alvo, fazendo pesquisas e sempre se atentando a detalhes que auxiliarão para uma</p><p>animação coesa esteticamente falando.</p><p>Concluindo, animar não é apenas desenhar e aplicar técnicas, é preciso um olhar atento, observar as pessoas,</p><p>ambientes, objetos e aplicar neles os princípios da animação.</p><p>São princípios que devem ajudar a fazer com que uma animação seja mais realista, se esse for o objetivo</p><p>desejado, mais impactante e mais envolvente.</p><p>VÍDEO RESUMO</p><p>No vídeo desta aula, você verá alguns exemplos de cenas que priorizam os princípios de animação de</p><p>comprimir e esticar, assim como os princípios de continuidade e sobreposição de ações, apelo visual e</p><p>exemplos de cenários criados a partir de estudos de design e identidade visual.</p><p>Saiba mais</p><p>Para um melhor aprofundamento, conheça o artigo, que apresenta os doze princípios da animação adaptados</p><p>para os jogos digitais de luta. Você verá que projetar animações com princípios e técnicas faz a diferença</p><p>para proporcionar experiências valiosas de forma simples e eficaz.</p><p>Bahia, S. Izolani, L. Stein, Mônica. 12 Princípios da Animação em Jogos de Luta. Artigo. Recife, 2020.</p><p>O artigo: Animação digital 2D: Simulando o fazer tradicional através da ferramenta do computador, vai</p><p>clarificar seus conhecimentos sobre tecnologias para animação.</p><p>BRETHÉ, Simon Pedro. Animação digital 2D: Simulando o fazer tradicional através da ferramenta do</p><p>computador. Dissertação (Pós-graduação em Artes) Escola de Belas Artes da Universidade Federal de</p><p>Minas Gerais. Belo Horizonte, 2010.</p><p>Aula 3</p><p>FERRAMENTAS DE ANIMAÇÃO DIGITAL</p><p>Você verá nesta aula que o After Effects apresenta grande flexibilidade para a</p><p>criação de animações e vídeos.</p><p>INTRODUÇÃO</p><p>Você verá nesta aula que o After Effects apresenta grande flexibilidade para a criação de animações e</p><p>vídeos. Com uma interface intuitiva, é possível encontrar diversos recursos e ferramentas para criar</p><p>animações de alta qualidade. Além disso, é possível encontrar vários painéis, como de composição, linha do</p><p>tempo, projeto, visualização, efeitos, presets e texto.</p><p>Você verá que a aplicação dos princípios da animação acontece de maneira simples, bastando apenas ajustar</p><p>as propriedades dos elementos, como posição, gráfico, escala, rotação, opacidade e, claro,</p><p>utilizando keyframes que auxiliarão na criação de movimentos suaves e realistas.</p><p>Por isso, a combinação de interface, ferramentas e a aplicação dos princípios da animação no After Effects</p><p>faz com que você construa animações profissionais e com efeitos visuais incríveis, possibilitando dar asas à</p><p>sua imaginação.</p><p>Vamos lá!</p><p>INTERFACE DO AFTER EFFECTS</p><p>O Adobe After Effects é um software que apresenta uma ferramenta poderosa e muito utilizada na animação</p><p>e na indústria cinematográfica, além de ser capaz de produzir vídeos com efeitos visuais, possibilita a</p><p>criação de animações, composições, entre outros. Sua interface permite que os usuários realizem tarefas com</p><p>facilidade e explorem suas principais funcionalidades, auxiliando como entender todas as suas</p><p>funcionalidades. A interface do After Effects é bastante organizada e complexa, por isso vale a pena</p><p>conhecer essas principais funções.</p><p>Painel de composição – é o espaço onde você irá criar e organizar suas composições que serão a base do</p><p>seu projeto, ou seja, a própria cena. Neste painel, é possível definir dimensões, taxas de quadros, duração da</p><p>cena, como também adicionar camadas, mídias, arrastar e soltar ativos como imagens, vídeos e efeitos.</p><p>Além disso, o painel de composição oferece o controle da ordem, do posicionamento e a transformação de</p><p>camadas (figura 1).</p><p>Figura 1 | Painel de Composição After Effects</p><p>Fonte:</p><p>Adobe.</p><p>Linha do tempo – essa ferramenta permitirá que você controle o tempo, a duração e a animação de suas</p><p>peças. Aqui você poderá definir os keyframes, além da posição, opacidade, escala e outras propriedades.</p><p>Esses keyframes permitirão que você especifique o tempo de cada movimento, mesmo que complexo.</p><p>Painel de Projeto – aqui você gerenciará seus ativos, importando imagens, vídeos e áudios. Sugiro que você</p><p>mantenha seus arquivos organizados para facilitar sua composição. Você pode criar pastas para organizar</p><p>todos os arquivos, inclusive marcá-los e importar projetos (figura 2).</p><p>Figura 2 | Painel de projetos do After Effects</p><p>Fonte: Adobe.</p><p>Visualização – essa área permitirá que você visualize toda sua composição em tempo real, a qualidade da</p><p>animação e a reprodução de composição para o melhor ajuste da cena. Poderá também ajustar o</p><p>enquadramento e a resolução, além de criar uma prévia da sua animação (figura 3).</p><p>Figura 3 | Painel de Visualização do After Effects</p><p>Fonte: Adobe.</p><p>Painel de efeitos e presets – nesse painel, é possível personalizar e aplicar muitos efeitos, fazer ajustes</p><p>predefinidos às camadas, transições e presets (combinações de quadros-chave, propriedades, efeitos e</p><p>expressões que você pode salvar e reutilizar), a fim de melhorar a qualidade da aparência e o estilo do vídeo,</p><p>incluindo efeitos de cor, imagens, filtros, máscaras, entre outros (figura 4).</p><p>Figura 4 | Painel de efeitos e presets do After Effects</p><p>Fonte: Adobe.</p><p>Painel de ferramentas – aqui você encontrará diversas ferramentas que permitirão a criação, edição e</p><p>manipulação da animação, como por exemplo ferramenta de seleção, caneta, pincel, texto, câmera 3D,</p><p>borracha, entre outras. Com elas, você poderá desenhar formas, máscaras, cortar camadas etc. (figura 5</p><p>Figura 5 | Painel de ferramentas do After Effects</p><p>Fonte: Adobe.</p><p>Funcionalidades básicas do After Effects</p><p>Visto sua interface, agora é hora de compreender as suas funcionalidades essenciais.</p><p>- Animação de Keyframes – são marcadores que especificam como o objeto está em determinado ponto no</p><p>tempo. Podem ser utilizados para produzir animações suaves e complexas.</p><p>- Expressões – baseadas em linguagens de programação, permitem intervir nos movimentos e nas</p><p>animações, além de construir comportamentos em suas camadas.</p><p>- Efeitos especiais – oferecem uma grande variedade de efeitos especiais que você poderá aplicar nas</p><p>camadas de suas animações, resultando em efeitos impressionantes.</p><p>- Rastreamento de movimento – permite o rastreio de objetos e movimentos do vídeo, além da aplicação</p><p>de movimentos.</p><p>- Câmera 3D – permite a criação de efeitos com profundidade e movimentos complexos em suas</p><p>animações.</p><p>Como visto, o Adobe After Effects é bastante versátil e poderoso na criação de animações e efeitos visuais</p><p>para vídeos e animações. Além de todas essas ferramentas e funcionalidades, você também encontrará</p><p>outros recursos como painel de áudio, de renderização e de informação, tudo isso para aprimorar ainda mais</p><p>sua animação.</p><p>A FERRAMENTA DE TEXTO DO AFTER EFFECTS</p><p>A ferramenta de texto do Adobe After Effects é uma das características mais marcantes do software, pois</p><p>desempenha um papel essencial no processo de criação de efeitos visuais e permite que os seus usuários</p><p>editem, adicionem ou animem os textos compostos em seus vídeos, independentemente se estão como</p><p>títulos, legendas, créditos ou mesmo em outras aplicações. A ferramenta de texto apresenta controle e</p><p>flexibilidade admirável nesse contexto.</p><p>Conheça agora suas ferramentas:</p><p>1. Criação de texto: para produzir um texto, vá até o menu “layer” e escolha “New” e então, “Text”. Isso</p><p>possibilitará a criação de uma nova camada de texto para a sua composição (figura 6).</p><p>Figura 6 | Painel de animação de texto do After Effects</p><p>Fonte: Tech Tudo.</p><p>Estilização de Texto: existem muitas opções de estilo para a criação de um texto. Além das convencionais</p><p>personalizações de cor, fonte, tamanho e espaçamento das letras ou das linhas, a janela “character” permitirá</p><p>o controle detalhado das características e aparências do texto em geral.</p><p>Animação do texto: a ferramenta de animação de texto é impressionante, nela você poderá criar animações</p><p>tanto de entrada quanto de saída, além de criar animação das letras individualmente (figura 7).</p><p>Figura 7 | Painel de animação de texto do After Effects</p><p>Fonte: Adobe.</p><p>4. Máscaras de texto: assim como o Adobe Photoshop, o After Effects também permitirá que você produza</p><p>efeitos de recorte, assim como o preenchimento deles. Isso poderá acontecer em uma camada ou uma forma</p><p>específica, desde que estejam em uma máscara (figura 8).</p><p>Figura 8 | Painel de animação de texto do After Effects</p><p>Fonte: Adobe.</p><p>5. Rastreamento do texto: é possível, aqui, criar o rastreamento do seu texto conforme o movimento de</p><p>um objeto, vinculando o texto ao ponto de interesse do rastreamento para que ele siga o movimento do</p><p>objeto selecionado, de maneira suave e natural.</p><p>6. Opções de posicionamento e alinhamento: existem várias opções detalhadas para o posicionamento e</p><p>alinhamento do texto, entre as mais comuns estão centralizar, alinhar à esquerda ou à direita, ou mesmo</p><p>justificar o texto, além de ajustar a posição com facilidade e exatidão.</p><p>7. Efeitos e transição de texto: existe uma ampla gama de efeitos e transições de texto no After Effects,</p><p>com que você poderá criar sombras, contornos e transições suaves com efeitos visuais incríveis (figura 9).</p><p>Figura 9 | Efeitos e transição de texto do After Effects</p><p>Fonte: Adobe.</p><p>Contudo, além da ferramenta de texto do Adobe After Effects ser essencial, ela também é uma poderosa</p><p>aliada à criação de objetos e elementos visuais marcantes. Para dar um toque profissional e criativo ao seu</p><p>projeto, você poderá personalizar seu texto de maneira prática para contracenar com suas composições.</p><p>Aprender, vivenciar e explorar essa ferramenta será fundamental para criar efeitos envolventes, além de</p><p>criações visuais cativantes, investindo em infinitas ideias e ocasiões criativas.</p><p>APLICAÇÃO DOS PRINCÍPIOS DA ANIMAÇÃO NAS PROPRIEDADES DOS</p><p>ELEMENTOS GRÁFICOS</p><p>Uma das grandes expectativas é criar uma animação no Adobe After Effects, que além de movimentar os</p><p>elementos da tela, explora as propriedades dos elementos visuais e consegue inserir os princípios da</p><p>animação criando animações suaves, performance e realistas, os elementos gráficos produzidos por você</p><p>com as ferramentas disponíveis no software. Para isso, você verá agora algumas aplicações que lhe ajudarão</p><p>a desenvolver projetos ainda mais profissionais baseados nos princípios da animação:</p><p>Antecipação: tem como objetivo preparar o público para uma ação futura, ou seja, que está prestes a</p><p>acontecer, como por exemplo, um movimento repentino. No Adobe After Effects, isso pode ser aplicado</p><p>configurando uma propriedade para mudar gradualmente antes da ação principal. Você poderá criar a</p><p>antecipação definindo keyframes iniciais que indicam o início de uma ação antes da ação principal. Por</p><p>exemplo, para animar um objeto saltando, você pode criar um keyframe de escala diminuída antes do salto</p><p>principal, indicando a preparação para o movimento. Ou, ainda, se um objeto ou personagem vai pular, ele</p><p>pode se encolher antes de se lançar para cima.</p><p>Figura 10 | Cena antecipação de um movimento</p><p>Fonte: WILLIAN, Richard (2016 , p. 169)</p><p>Ação contínua e sobreposição da ação: tem como objetivo garantir que os movimentos sejam, naturais,</p><p>fluidos e não interrompidos. Para isso, use interpolação entre os keyframes, mas tenha cuidado e evite</p><p>transições bruscas entre eles para que a animação não se torne pesada. Você pode permitir que o software</p><p>crie transições suaves automaticamente. Isso pode ser aplicado ajustando as posições, rotações e escala dos</p><p>elementos gráficos.</p><p>Figura 11| Sobreposição da ação</p><p>Fonte: WILLIAN, Richard (2016 , p. 226)</p><p>Exagero: Ao</p><p>aumentar o exagero dos personagens ou objetos, e também dos movimentos, você cria</p><p>animações mais expressivas e significativas. No After Effects, é possível ampliar a escala, a rotação, a</p><p>opacidade ou a posição para dar ênfase, sendo uma grande possibilidade de chamar a atenção. Por exemplo,</p><p>ao animar um personagem, exagere as expressões faciais e gestos para torná-los mais envolventes e</p><p>expressivos, incluindo distorções. Como um animal surpreso, os olhos podem abrir amplamente, para</p><p>enfatizar a expressão de surpresa.</p><p>Figura 12 | Cena exagerada e distorcida de um homem jogando basquete</p><p>Fonte: WILLIAN, Richard (2016 , p. 134)</p><p>Tempo e Ritmo: Ter controle do tempo entre as ações é o segredo para criar ritmos mais agradáveis. Para</p><p>isso, você precisa configurar a distribuição e os ajustes dos keyframes e pela linha do tempo, isso permitirá</p><p>criar ritmos agradáveis e garantir que as ações ocorram no momento certo.</p><p>Aceleração e desaceleração: os movimentos ou as ações não começam ou terminam instantaneamente, elas</p><p>devem acelerar e desacelerar gradualmente. Neste caso, você deve criar curvas de interpolação para dar essa</p><p>sensação gradual dos movimentos, evitando que os objetos parem abruptamente, tornando as animações</p><p>mais realistas.</p><p>Figura 13 | Conceito de aceleração e desaceleração</p><p>Fonte: WILLIAN, Richard (2016 , p. 37)</p><p>Encenação: aqui os elementos devem ser dispostos de maneira clara, para que o telespectador compreenda a</p><p>história ou a mensagem da animação. Você pode fazer isso no After Effects ajustando as propriedades de</p><p>posição e escala para destacar elementos importantes.</p><p>Figura 14 | Encenação de rostos</p><p>Fonte: WILLIAN, Richard (2016 , p. 246)</p><p>Sendo assim, a aplicação dos princípios de animação no After Effects é essencial para criar animações de</p><p>alta qualidade, para que cativem o público de forma eficaz. Além disso, esses princípios devem ser</p><p>considerados como valiosas diretrizes para dominar a arte da animação.</p><p>VIDEO RESUMO</p><p>Você verá no vídeo resumo que o After Effects apresenta interface e soluções intuitivas, com painéis</p><p>essenciais para criação de objetos, personagens, elementos visuais, cenas, textos e efeitos visuais</p><p>surpreendentes. Você verá também que os usos dos princípios de animação acontecem de maneira prática,</p><p>interferindo nas propriedades dos elementos a fim de enriquecer seus projetos.</p><p>Saiba mais</p><p>Conheça o livro especializado no Abobe After Effects, que oferece várias instruções sobre como apresentar</p><p>a utilizar o software, incluindo caminhos e animações desde a etapa zero.</p><p>AFFONSO, Alex. Adobe After Effects: o essencial em motion graphics e vfx. São Paulo. Ed. Senac,</p><p>2021.</p><p>Leia essa dissertação de mestrado que aborda os princípios da animação de maneira simples e prática,</p><p>descrevendo a importância da técnica para a concepção de histórias conectadas a outras histórias e</p><p>aventuras.</p><p>SATO, Letícia Midori. 12 Princípios da Animação: da adesão a sua subversão. Mestrado. Curso de</p><p>Comunicação e Semiótica PUC-SP. São Paulo, 2015.</p><p>Aula 4</p><p>APLICAÇÃO DE EFEITOS</p><p>Você verá nesta aula que as ferramentas de Chroma-key e Tracking são essenciais</p><p>para a pós-produção de vídeos, oferecendo diversos recursos que transformam</p><p>simples imagens em produções profissionais.</p><p>INTRODUÇÃO</p><p>Olá, estudante!</p><p>Você verá nesta aula que as ferramentas de Chroma-key e Tracking são essenciais para a pós-produção de</p><p>vídeos, oferecendo diversos recursos que transformam simples imagens em produções profissionais. O</p><p>Chroma-key é uma técnica bastante conhecida que permite isolar um objeto ou sujeito em um vídeo,</p><p>substituindo seu fundo por outra imagem ou mesmo por uma cena. Já o Tracking permite que você siga o</p><p>movimento de elementos dentro do próprio vídeo, garantindo o ajuste perfeito dos efeitos aplicados.</p><p>Os painéis de controle e de efeitos oferecem o controle determinando para a aplicação de efeitos e ajustes</p><p>em camadas, sendo possível também encontrar a ferramenta de amostragem de cor, que o auxiliará a</p><p>combinar cores e, por fim, o visualizador, que permitirá que você acompanhe em tempo real suas alterações.</p><p>As máscaras e a rotoscopia permitirão recortar áreas especificas, e o controle de rastreamento lhe permitirá</p><p>seguir movimentos de objetos.</p><p>INTERFACES DAS FERRAMENTAS CHROMA-KEY E TRACKING</p><p>O Adobe After Effects é, sem dúvida, uma ferramenta bastante poderosa e versátil, utilizada por muitos</p><p>profissionais de produção de vídeo em todo o mundo, o qual apresenta ferramentas complexas, como o</p><p>Chroma-key e a Tracking, duas peças indispensáveis para a pós-produção de vídeos.</p><p>A ferramenta Chroma-key (figura 1) é uma técnica largamente usada na indústria cinematográfica e de</p><p>televisão, que tem como objetivo substituir um fundo sólido por uma imagem ou até mesmo por um vídeo.</p><p>A interface dessa ferramenta no After Effects é organizada para tornar o processo ainda mais eficiente e</p><p>preciso. Veja abaixo alguns comandos essenciais:</p><p>Figura 1 | Inserção de Chroma-key no After Effects</p><p>Fonte: Adobe.</p><p>1. Painel de Efeitos: essa ferramenta é o coração de todas as operações para uma bela composição. Para</p><p>aplicar o Chroma-key, você deve selecionar o clipe de vídeo que deseja alterar e, em seguida, adicionar o</p><p>efeito de "Keylight" ou "Ultra Key" a partir do painel de efeitos (figura 2).</p><p>Figura 2 | Painel de efeitos no After Effects</p><p>Fonte: Adobe.</p><p>2. Painel de Controles: Depois de aplicar o efeito Chroma-key , você poderá ajustar cor-chave, suavização</p><p>de bordas e transparência do fundo.</p><p>3. Amostragem de Cor: é possível também utilizar a ferramenta conta-gotas para selecionar uma cor</p><p>específica, tanto para alterá-la quanto para deixá-la transparente (figura 3). Essa ferramenta é essencial para</p><p>garantir que apenas o fundo desejado seja removido.</p><p>Figura 3 | Ajuste de amostragem de cor no After Effects</p><p>Fonte: Adobe</p><p>4. Visualização em Tempo Real: você pode visualizar os resultados do seu vídeo em tempo real, o que</p><p>auxiliará o ajuste e a configuração do Chroma-key com precisão.</p><p>5. Máscaras e Rotoscopia: uma ferramenta avançada é a aplicação de máscaras e rotoscopia (figura 4), que</p><p>permite que você crie seleções precisas ao redor de elementos mais difíceis, como cabelos, por exemplo.</p><p>Figura 4 | Painel de controle de máscaras e rotoscopia</p><p>Fonte: Adobe</p><p>Interface da Ferramenta de Rastreamento: Tracking</p><p>O After Effects apresenta uma ferramenta bastante poderosa de rastreamento, permitindo seguir o</p><p>movimento de objetos em clipes de vídeos e integrando elementos gráficos e/ou efeitos especiais em cada</p><p>cena de movimento. Conheça abaixo os principais comandos dessa ferramenta (figura 5):</p><p>Figura 5 | Interface do Tracking no After Effects</p><p>Fonte: Wondershare.</p><p>1. Painel de Controles de Rastreamento: é possível acessar esse painel após escolher o clipe de vídeo que</p><p>deseja rastrear.</p><p>2. Pontos de Rastreamento: você pode definir os pontos de rastreamento no vídeo, por exemplo, para</p><p>seguir os movimentos de um determinado objeto, tanto para os métodos de rastreamento, quanto de posição,</p><p>rotação e escala.</p><p>3. Visualização do Rastreamento: assim como no Chroma-key , é possível visualizar o rastreamento em</p><p>tempo real, o que permitirá que você ajuste todos os pontos conforme sua necessidade.</p><p>4. Aplicação de Efeitos: após a inserção de rastreamento, você poderá aplicar diversos efeitos, além de</p><p>gráficos e textos no objeto rastreado, proporcionando belas composições visuais.</p><p>5. Correção de Desvios: caso o objeto saia do quadro ou tenha sido obstruído, você poderá corrigir os</p><p>desvios manualmente, assegurando o resultado esperado.</p><p>Sendo assim, é imprescindível que você tenha um projeto alinhado com suas necessidades, para que você</p><p>possa criar efeitos fantásticos alinhados ao seu objetivo.</p><p>PRINCÍPIOS DE ANIMAÇÃO EM AFTER EFFECTS: CHROMA-KEY</p><p>O Chroma-key, é conhecido como a tela verde ou azul que fica ao fundo de uma imagem, vídeo ou</p><p>animação,</p><p>e é uma técnica que envolve a produção da imagem em frente de um fundo uniformemente</p><p>colorido (figura 6). Esse fundo, no processo de pós-produção, é removido e substituído por outra imagem ou</p><p>mesmo um vídeo, criando assim uma composição visual ímpar.</p><p>Figura 6 | Chroma-key no After Effects</p><p>Fonte: Tech Tudo.</p><p>Princípios de Animação em Chroma-key:</p><p>1. Planejamento e Preparação: é crucial planejar e preparar o objeto na animação para iniciar o trabalho</p><p>com o Chroma-key no After Effetcs, e escolher o fundo adequado, a iluminação e posicionamento do sujeito</p><p>é essencial. A falta de conhecimento ou mesmo de organização do projeto pode resultar em animações de</p><p>baixa qualidade.</p><p>2. Captura de Vídeo de Alta Qualidade: para uma boa animação, é essencial que a qualidade da captura</p><p>do vídeo seja perfeita; para isso, certifique-se de que a câmera está em alta resolução e que a quantidade de</p><p>quadros esteja correta, pois só assim será possível capturar detalhes com precisão.</p><p>3. Uso de Fundo Uniforme: tenha em mente que o fundo Chroma-key deve ser estar uniforme e consistente</p><p>durante toda a cena. Qualquer deformação, como sombras, rugas ou mesmo variações na cor, pode dificultar</p><p>a remoção do Chroma-key. Por isso, utilize materiais de qualidade e estique-os da forma correta, para obter</p><p>um melhor resultado.</p><p>4. Iluminação Adequada: a iluminação é a chave para o uso do Chroma-key , por isso, certifique-se de que</p><p>todo o fundo esteja iluminado uniformemente, além claro, do sujeito (figura 7). Evite sombras indesejadas</p><p>para que não haja dificuldade de separá-las do fundo durante o processo de pós-produção.</p><p>Figura 7 | Iluminação para o Chroma-key no After Effects</p><p>Fonte: Canal Videomaker.</p><p>5. Uso de Keying no After Effects: O Keying são ferramentas utilizadas para facilitar a remoção do</p><p>Chroma-key, e permitem ajustar os parâmetros com a cor de fundo escolhida, assim como a suavização das</p><p>bordas para a melhor composição.</p><p>6. Refinamento e Ajustes: é possível, após aplicar a ferramenta KeYing, fazer refinamentos e ajustes a fim</p><p>de garantir composições naturais. Isso pode acontecer a partir da correção de cores, adição de efeitos com o</p><p>objetivo de integrar o sujeito da animação com o fundo.</p><p>O Chroma-key na animação, além da remoção de fundos, pode ser utilizada para a criação de cenários</p><p>virtuais, efeitos visuais e composições de vídeo; sendo assim, é imprescindível que você, aluno, se dedique a</p><p>essa ferramenta.</p><p>PRINCÍPIOS DE ANIMAÇÃO EM AFTER EFFECTS: TRACKING</p><p>A animação apresenta-se como uma forma criativa e artística de contar histórias, e permite experiências</p><p>visuais fascinantes, além de ser um agente de transmissão de informação. Por essa importância, o Adobe</p><p>After Effects proporciona a produção de animação de alta qualidade; para tanto, é importante que se tenha</p><p>um conhecimento sólido dessa poderosa ferramenta, por isso, seguem abaixo alguns pontos importantes:</p><p>1. Keyframes: pontos-chave importantes para definir a linha do tempo de qualquer animação, pois é aqui</p><p>que serão configuradas posição, rotação, escala e opacidade da imagem como um todo (figura 8). Dessa</p><p>forma, a ilusão do movimento se dá a partir da transição suave entre os pontos.</p><p>Figura 8 | Pontos chave do Keyframe no After Effects</p><p>Fonte: Adobe.</p><p>2. Easing: transições suavizadas entre os keyframes que podem ser adequadas quando se necessita de</p><p>movimentos fluídos ou abruptos, sempre dependendo da necessidade do projeto.</p><p>3. Camadas: assim como no Photoshop, é possível criar camadas para organizar os pontos-chave, como</p><p>linha do tempo, elementos gráficos, imagens, vídeos, textos e até mesmo os efeitos especiais.</p><p>4. Máscaras: controle de visibilidade através de camadas para recortes precisos e efeitos de máscaras.</p><p>Ferramenta Tracking em After Effects</p><p>O tracking é uma técnica na qual se integram os elementos animados a cenas do mundo real, como rastrear</p><p>um objeto ou aplicar uma animação a um elemento específico em uma cena. Para isso, existem várias</p><p>formas:</p><p>a. Posição: método mais básico e comum a partir de um ponto de referência, seja via marcador de um vídeo</p><p>ou um objeto. Nesse caso, o software irá rastrear o movimento e aplicará a transformação do objeto.</p><p>b. Máscara: utilizado para aplicar um efeito ou animação a uma área específica da filmagem. Se trata de</p><p>rastrear o movimento a partir de uma máscara ao redor da região desejada, garantindo que qualquer</p><p>elemento animado se ajuste perfeitamente à cena.</p><p>c. Texto: utilizado para adicionar legendas, informações ou gráficos animados a uma cena. Permite que o</p><p>texto siga o movimento da câmera, mantendo-o sempre legível e integrado à cena (figura 9).</p><p>Figura 9 | Tracking de texto no After Effects</p><p>Fonte: Adobe.</p><p>d. Câmera 3D: para produções visuais complexas e efeitos visuais de alto nível, essa ferramenta se faz</p><p>necessária, pois permite que os objetos 3D sejam distribuídos na cena filmada e interajam com o ambiente</p><p>de forma realista e natural, considerando sempre o movimento tridimensional da câmera.</p><p>Dicas para um Tracking eficiente e de qualidade:</p><p>- escolha pontos de referência sólidos e visíveis, como marcadores, contrastes e bordas;</p><p>- Sempre acompanhe os resultados e os ajustes, pois o modo automático nem sempre oferece o melhor</p><p>resultado;</p><p>- busque compreender a geometria da cena, pois é essencial para posicionar os objetos para resultados</p><p>realistas;</p><p>- pratique muito, só assim você construirá experiência e habilidade para diversas técnicas de tracking.</p><p>O Tracking no After Effects lhe ofertará uma rica habilidade, possibilitando a criação de efeitos visuais e</p><p>animações impressionantes e envolventes. Com essa habilidade, você poderá desenvolver sua carreira na</p><p>indústria da animação.</p><p>VIDEO RESUMO</p><p>Neste vídeo você verá não só o resumo desta aula, como também alguns exemplos essenciais sobre o uso do</p><p>Chroma-key e do Tracking, além de acompanhar o uso dessas ferramentas no software After Effects.</p><p>Espero você!</p><p>Saiba mais</p><p>Conheça o site que apresenta o passo a passo de como utilizar a ferramenta de Chroma-key no Adobe After</p><p>Effects.</p><p>Indico o acesso ao passo a passo do uso da ferramenta Tracking no Adobe After Effects. Tenho certeza de</p><p>que esse conhecimento fará toda a diferença no seu repertório educacional e profissional.</p><p>Aula 5</p><p>REVISÃO DA UNIDADE</p><p>DESIGN DE PERSONAGEM 3D</p><p>Olá, estudante!</p><p>Nesta revisão sobre princípios da animação e ferramentas de Chromakey e Tracking no Affer Effects, é</p><p>preciso, primeiramente, entender que a animação se faz presente em nossos dias e tem grande importância</p><p>no entretenimento e na comunicação; sendo assim, conhecer seus princípios é essencial para desenvolver</p><p>personagens persuasivos e que farão a diferença em sua animação.</p><p>Veja abaixo os principais:</p><p>- Movimento em arcos: Refere-se a objetos em movimentos ou trajetórias suaves e curvilíneas, em que os</p><p>arcos dão sensação de naturalidade, sendo fundamentais para criar animações convincentes (figura 1).</p><p>Figura 1 | Movimento em arcos</p><p>Fonte: Pixabay.</p><p>- Encenação e sincronismo: Encenação envolve a composição de personagens e cores de tal maneira que</p><p>conte uma história clara e eficaz. Já o sincronismo refere-se à coordenação dos elementos na cena, como</p><p>movimentos labiais, por exemplo.</p><p>- Aceleração e desaceleração: Esse princípio é fundamental para criar a sensação de peso nos objetos</p><p>animados. Ao acelerar ou desacelerar gradualmente, é adicionado realismo à cena, pois apresentam-se</p><p>sujeitos correspondentes às leis da física (figura 2).</p><p>Figura 2 | A preparação do movimento</p><p>Fonte: Rockcontent.</p><p>- Ação secundária: São movimentos adicionais que complementam a ação principal da animação. Aqui,</p><p>podem ser adicionados profundidade e interesse à cena, como por exemplo a cauda de um personagem</p><p>balançando (figura 3).</p><p>Figura 3 | Ação secundária</p><p>Fonte: Loja arena games.</p><p>- Comprimir e esticar: Princípio que prioriza a deformação</p><p>dos personagens e objetos durante o</p><p>movimento, a fim de criar elasticidade e flexibilidade, tornando a animação mais dinâmica e expressiva.</p><p>- Desenho volumétrico: É o que dá a sensação de tridimensionalidade aos personagens e objetos, mesmo</p><p>que em superfície bidimensional, por meio de texturas, sombreamentos e iluminação (figura 4).</p><p>Figura 4 | Uso da profundidade para criar sensação de volume</p><p>Fonte: Pix Studios.</p><p>- Animação direta: Técnica de desenhar a animação quadro por quadro, manualmente. É uma técnica</p><p>trabalhosa e que resulta em animações belas e imponentes.</p><p>- Continuidade e sobreposição da ação: refere-se à consistência dos movimentos, além da combinação de</p><p>diferentes elementos de uma ação, criando profundidade e realismo (figura 5).</p><p>Figura 5 | Personagem paralisado enquanto existe um pequeno movimento</p><p>Fonte: Rockcontent.</p><p>- Apelo visual: é o design dos personagens, assim como sua personalidade, as expressões faciais, os</p><p>movimentos e estilos que o tornam atraente e memorável, como Mickey Mouse por exemplo.</p><p>Contudo, todas as técnicas apresentadas podem ser construídas e desenvolvidas com o auxílio do software</p><p>Adobe After Effects que, inclusive, é uma ferramenta robusta e multifuncional que o auxiliará nas produções</p><p>de suas animações. Com uma interface organizada, é possível utilizar sua área de trabalho de maneira prática</p><p>e rápida (figura 6).</p><p>Figura 6 | Interface After Effects</p><p>Fonte: Rockcontent.</p><p>No After Effects, encontramos duas ferramentas poderosas, o Chromakey e Tracking, peças-chaves na pós-</p><p>produção de vídeo. O Chromakey (figuras 7 e 8) é uma técnica muito utilizada na indústria cinematográfica</p><p>e televisiva, possibilitando a substituição de um fundo sólido, como por exemplo o verde, por uma imagem</p><p>ou até mesmo um vídeo.</p><p>Figura 7 | Foto em Chromakey</p><p>Fonte: Adobe.Figura 8 | Substituição do fundo</p><p>Fonte: Adobe.</p><p>Já o tracking é uma ferramenta de rastreamento de objetos em movimento, resultando em elementos que se</p><p>movem em sincronia com o vídeo original (figura 9).</p><p>Figura 9 | Rastreamento e produção de movimento</p><p>Fonte: Provídeo coalition.</p><p>Além dessas ferramentas, você encontrará o Painel de Efeitos, de Controle, a Amostragem de cor, a Máscara</p><p>e rotoscopia, entre tantas outras.</p><p>Portanto, a animação é uma arte importante e complexa, e que utiliza vários princípios e técnicas a fim de</p><p>criar movimentos e histórias convincentes. Cada elemento na animação propicia magia, e dominar cada</p><p>técnica é essencial para criar animações cativantes e impressionantes.</p><p>REVISÃO DA UNIDADE</p><p>No vídeo desta revisão, você encontrará informações sobre os princípios da animação, suas principais</p><p>abordagens, exemplos de animações, animadores e as últimas novidades da área. Além disso, verá alguns</p><p>cases produzidos e finalizados no After Effects. Encontrará também o passo a passo para utilizar as</p><p>ferramentas Chromakey e Tracking, além da ferramenta de controle de efeitos.</p><p>ESTUDO DE CASO</p><p>Olá, estudante!</p><p>Imagine que você está estagiando em um escritório de animação, em um novo projeto, e foi convidado para</p><p>participar da produção de alguns personagens. Para tanto, é preciso que você faça os primeiros estudos de</p><p>um personagem do sexo masculino, de meia idade, cuja pele é parda, os cabelos grisalhos, que faz parte da</p><p>classe média, apresenta bons estudos e sempre está com uma xícara verde de café na mão; esse personagem</p><p>deve expressar a alternância entre a calma e a perplexidade, utilizando os princípios da animação: encenação</p><p>e comprimir e esticar Além disso, pediram-lhe também que, após a modelação manual do personagem, você</p><p>o animasse no Adobe After Effects, utilizando o Painel de Efeitos, de Controle e as Máscaras.</p><p>O objetivo desse projeto é te preparar para a produção de cenas mais complexas e, por isso, você deve</p><p>preparar esse trabalho em 15 dias, entregando os desenhos, a animação no After Effects e também um</p><p>memorial descritivo apresentando os momentos em que você aplicou os princípios. Este projeto deverá ser</p><p>entregue por meios digitais e precisa conter referências bibliográficas sobre os princípios e os conceitos</p><p>encontrados. Não esqueça de incluir também o arquivo do After Effects com a aplicação dos efeitos.</p><p>Você se sente empolgado e lisonjeado, pois seu objetivo é trabalhar diretamente com a produção de</p><p>animações, e isso ajudará você a desenvolver ainda mais suas habilidades.</p><p>Agora, você deve organizar as solicitações e pensar em quais serão as etapas de construção do seu</p><p>personagem, assim como suas movimentações.</p><p>Boa sorte!</p><p>Reflita</p><p>Que tal investir um tempo na leitura do livro Manual de animação: manual de métodos, princípios e</p><p>fórmulas para animadores clássicos, de 41 computador, de jogos, de stop motion e de internet, do autor</p><p>Richard Willian? Sem dúvida você encontrará muitas dicas para planejar e construir seu personagem,</p><p>apoiado nos princípios da animação.</p><p>WILLIAM, Richard. Tradução por Leandro de Mello Guimarães Pinto. Manual de animação: manual de</p><p>métodos, princípios e fórmulas para animadores clássicos, de 41 computador, de jogos, de stop motion</p><p>e de internet. São Paulo: Editora Senac São Paulo, 2016.</p><p>RESOLUÇÃO DO ESTUDO DE CASO</p><p>Separe um tempo para focar na sua entrega e também nas etapas que você precisa estipular para preparar a</p><p>sua apresentação. Liste todos os itens solicitados e organize-os de maneira hierárquica, usando, por exemplo,</p><p>um organograma (figura 10).</p><p>Figura 10 | Elaboração de organograma.</p><p>Fonte: Pixabay.</p><p>Após ter organizado as etapas do projeto, pegue um caderno de desenho e comece a desenhar o personagem</p><p>em várias posições: de frente, do lado direito, do lado esquerdo e de costas; depois, aplique as especificações</p><p>visuais que lhe foram solicitadas.</p><p>Agora dedique-se ao rosto do personagem, visto que ele deve apresentar os princípios da animação de</p><p>encenação e comprimir e esticar; para isso, propicie estudos distintos das suas feições e expressões, variando</p><p>entre a expressão de calma até a de perplexidade.</p><p>Após ter encontrado seu melhor resultado, aplique o princípio de comprimir e esticar para criar uma</p><p>expressão mais realista e cativante, prevalecendo sempre a proporção entre seu rosto e corpo. Você pode</p><p>escolher entre fazer as aplicações de comprimir e esticar com o personagem de frente ou virado de lado.</p><p>Ah! Você poderá colorir seu personagem à mão ou então diretamente no software, ok?</p><p>Depois de pronto, acesse o software Adobe After Effects, escaneie ou tire fotos do seu personagem e</p><p>importe para a área de trabalho do software. Abrindo o Controle de efeitos, você poderá animar o</p><p>movimento do personagem, automatizando o movimento solicitado a você.</p><p>Agora é hora de organizar todo o seu material, os estudos de manuais, as aplicações dos princípios</p><p>solicitados, o arquivo digital da animação e enviar no dia estabelecido a você.</p><p>Boa sorte!</p><p>RESUMO VISUAL</p><p>Fonte: elaborado pelo autor.</p><p>•</p><p>Motion Graphics, sincronização e finalização</p><p>• Aula 1 - Motion graphics</p><p>• Aula 2 - Composição</p><p>• Aula 3 - Sincronização de áudio</p><p>• Aula 4 - Renderização</p><p>• Aula 5 - Revisão da unidade</p><p>• Referências</p><p>0%</p><p>T</p><p>A-AA+</p><p>MOTION GRAPHICS, SINCRONIZAÇÃO E FINALIZAÇÃO</p><p>• Aula 1 - Motion graphics</p><p>• Aula 2 - Composição</p><p>• Aula 3 - Sincronização de áudio</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U4/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U4/index.html#aula0</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U4/index.html#aula1</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U4/index.html#aula2</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U4/index.html#aula3</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U4/index.html#aula4</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U4/index.html#aula5</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U4/index.html#referencias</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U4/index.html#aula1</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U4/index.html#aula2</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U4/index.html#aula3</p><p>• Aula 4 - Renderização</p><p>• Aula 5 - Revisão da unidade</p><p>• Referências</p><p>Aula 1</p><p>MOTION GRAPHICS</p><p>Nesta aula, iremos abordar o conceito de Motion Graphics a partir do design de</p><p>animação, que nada mais é que uma combinação da prática do design gráfico e de</p><p>técnicas de animação.</p><p>INTRODUÇÃO</p><p>Olá, estudante!</p><p>Nesta aula, iremos abordar o conceito de Motion Graphics a partir do design de animação, que nada mais é</p><p>que uma combinação da prática do design gráfico e de técnicas de animação. Este método abrange um</p><p>amplo campo de design e produção audiovisual, cuja prática profissional inclui a adaptação temporal de</p><p>imagens, tipografia e gráficos para vídeo, filme e mídia digital, por meio de diferentes veículos – comerciais</p><p>e não comerciais – incluindo: vídeo para a internet, efeitos visuais, inserções gráficas,</p><p>subtítulos e aberturas de filmes ou programas de televisão, como design de transmissão;</p><p>animação infografia; croquis animados de logotipos corporativos; anúncio; videoclipes, apresentações</p><p>multimídia e introduções aos videogames. Você conhecerá como o Motion Design cresceu</p><p>exponencialmente desde a década de 1990, impulsionado por uma série de fatores do contexto pós-moderno,</p><p>como o progresso tecnológico, que permitiu que a cultura e a economia mundial se entrelaçassem numa rede</p><p>globalizada e digital, praticamente livre de barreiras espaço-temporais, onde, atualmente, o Motion</p><p>Design encontra um alto volume de demandas e uma boa valorização por parte do mercado.</p><p>Vamos começar?</p><p>MOTION DESIGN</p><p>Até meados da década de 1970, as incursões mais significativas do design gráfico no cinema e na televisão</p><p>foram feitas em filme, utilizando técnicas convencionais de animação. Segundo Velho (2008), a “imagem</p><p>visual” típica dos projetos de animação / de motion design era marcada pela combinação de elementos</p><p>gráficos animados bidimensionais, incluindo tipografia, e imagens reais em movimento, como você pode</p><p>observar na figura 1. Os elementos utilizados são elementos tipográficos e uma fotografia, que, animados,</p><p>foram utilizados no filme “Ghost Before Breakfast” (Fastasma após o café da manhã), de Hans Hicther. O</p><p>resultado foram colagens e fotomontagens, técnicas muito difundidas na arte gráfica do século XX.</p><p>Figura 1 | “Ghost Before Breakfast”</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U4/index.html#aula4</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U4/index.html#aula5</p><p>https://conteudo.colaboraread.com.br/202401/WHITE_LABEL/ANIMACAO_DIGITAL/LIVRO/U4/index.html#referencias</p><p>Fonte: VELHO, 2008.</p><p>Principalmente na década de 1980, os investimentos em áreas tecnológicas, como a computação gráfica e</p><p>ferramentas de modelagem e animação 3D, trouxeram novas tendências para o design visual. Uma grande</p><p>tendência entre os jovens nesta época eram os clipes e as vinhetas que apresentavam justamente essa</p><p>tecnologia, no canal denominado MTV. Observe como a própria vinheta do canal já era diferenciada na</p><p>figura 2.</p><p>Figura 2 | Vinheta canal “MTV”</p><p>Fonte: Wikimedia Communs.</p><p>As redes de transmissão, o computador e consequentemente as primeiras redes de internet foram as</p><p>primeiras a adotar esse estilo, utilizando animações de logotipos, marcas e objetos tridimensionais. Ao</p><p>mesmo tempo, surgiram os primeiros sistemas computacionais para criação e manipulação de filmes.</p><p>Segundo Woolman (2004), "permitia combinar e animar livremente camadas de imagens de todo tipo como:</p><p>vídeo, elementos gráficos, tipografia e animação”. São essas ferramentas que incentivaram o universo digital</p><p>a retornar às colagens dinâmicas de imagens bidimensionais. Para conceituar todos os produtos nascidos</p><p>dessas técnicas, surgiu o termo motion graphics, que, do ponto de vista técnico, pode ser descrito como uma</p><p>aplicação mista de computação gráfica e tecnologias de vídeo digital; e, conceitualmente, como um</p><p>ambiente privilegiado para se exercitar o design gráfico através da imagem em movimento, como no filme</p><p>“SEVEN” (Os sete pecados capitais), na figura 3, que contempla a técnica do motion graphics com colagens</p><p>dinâmicas de imagens bidimensionais e a animação utilizando a tecnologia do vídeo digital em suas</p><p>imagens.</p><p>Figura 3 | Filme “SEVEN” (Os sete pecados capitais)</p><p>Fonte: VELHO, 2008.</p><p>Dentro desse contexto, a criação de elementos gráficos para motion design é uma disciplina artística e</p><p>técnica, que desempenha um papel central na produção de animações e vídeos que trazem movimento. Ela</p><p>envolve o design, manipulação e animação de elementos visuais, como texto, imagens, ícones, ilustrações e</p><p>gráficos, com o objetivo de contar histórias, transmitir informações, criar uma estética visual atraente e</p><p>envolvente ao público de forma eficaz. Esses elementos gráficos desempenham um papel crucial na</p><p>comunicação visual, na identidade de marca, no marketing e no entretenimento, como na figura 4, que faz</p><p>uso de uma referência ao filme “MIB- Homens de preto”, ao apresentar quanto o novo carro da marca</p><p>Volkswagen é grande e espaçoso.</p><p>Figura 4 | Anúncio do carro - Spacefox</p><p>Fonte: Mercado atualizado.</p><p>A partir dos elementos gráficos, é construída uma linguagem visual, que permite aos criadores comunicarem</p><p>mensagens de maneira clara e impactante. Elementos gráficos são usados para criar narrativas visuais,</p><p>estabelecer cenários, personagens e atmosfera, além de transmitir informações de forma visualmente</p><p>atraente. São ferramentas poderosas para contar histórias e cativar o público. Podem também constituir um</p><p>papel fundamental na criação e na manutenção da identidade de uma marca. Isso inclui logotipos, paletas de</p><p>cores, tipografia e outros elementos visuais que tornam uma marca reconhecível e memorável.</p><p>Uma manipulação cuidadosa de elementos gráficos também desempenha um papel importante na</p><p>acessibilidade e na inclusão. Você, como designer, pode considerar técnicas como legendas, áudio descritivo</p><p>e contraste de cores para tornar a informação visualmente acessível a todos os públicos, incluindo aqueles</p><p>com deficiências visuais ou auditivas, ainda mais com os avanços tecnológicos, em que a criação de</p><p>elementos gráficos continua a evoluir. A introdução da realidade aumentada (AR), realidade virtual (VR) e</p><p>inteligência artificial (IA) oferece novas oportunidades para criar experiências de motion design mais</p><p>imersivas e interativas, como os totens interativos instalados em pontos de ônibus para garantir a segurança,</p><p>principalmente das mulheres, no período da noite. Anúncios de produtos e serviços ficam sendo</p><p>transmitidos, e quando a mulher está sozinha ela pode acionar o totem para que uma atendente fique</p><p>conversando com ela até seu ônibus chegar, garantindo, assim, sua segurança, como você pode observar na</p><p>figura 5.</p><p>Figura 5 | Totem interativo em ponto de ônibus</p><p>Fonte: O globo.</p><p>A criação de elementos gráficos para motion design é uma área multifacetada, que combina criatividade,</p><p>técnica e comunicação visual, desempenhando um papel fundamental na criação de narrativas visuais</p><p>envolventes, na construção de identidades de marca, na comunicação eficaz e no envolvimento do público.</p><p>DO MOTION DESIGN PARA O MOTION GRAPHICS</p><p>A história da criação de elementos gráficos para motion design está intrinsecamente ligada ao</p><p>desenvolvimento da animação e do design gráfico ao longo do tempo. As origens dos gráficos em</p><p>movimento são encontradas na aplicação do design gráfico no cinema e na TV, assim como na experiência</p><p>plástica de algum tipo de filme de animação</p><p>que é menos focado em imitar uma narrativa real e linear.</p><p>As décadas de 1910 a 1930 trazem os primórdios da animação, em que o motion design cria suas raízes na</p><p>animação tradicional. Inicialmente, os elementos gráficos eram desenhados à mão em celuloides, criando</p><p>animações em quadros individuais. Este processo incluiu elementos gráficos simples, como personagens</p><p>desenhados à mão e transições básicas.</p><p>Foram os artistas modernos os primeiros a apresentar propostas de animação que se aproximavam do design</p><p>híbrido de gráficos em movimento. Observe na figura 6: uma das obras mais famosas deste período pioneiro</p><p>são os balés Mecânicos (1923), interpretados por Fernand Léger (1881-1955), artista francês associado ao</p><p>movimento cubista. O filme é uma montagem caótica de imagens capturadas. Algumas delas são tratadas</p><p>quase como fotografias de elementos recortados sobre um fundo neutro, enquanto outras são refratadas por</p><p>prismas em múltiplos aspectos. Objetos gráficos, tipografia, números e até uma espécie de boneco cubista,</p><p>cujos membros são colados e animados na técnica de stop motion, com resultado semelhante ao motion</p><p>graphics moderno.</p><p>Figura 6 | “Ballet Mechanic”, de Fernand Leger</p><p>Fonte: Velho, 2008.</p><p>Nas décadas de 1930 a 1950 ocorreu a introdução de personagens e narrativas nesse tipo de</p><p>representação/expressão gráfica. Nesse período, a animação começou a evoluir para incluir personagens</p><p>mais elaborados e narrativas mais complexas. Isso exigiu a criação de elementos gráficos mais detalhados,</p><p>como cenários, objetos e efeitos visuais.</p><p>Já entre 1950 e 1970, surgem as transições e os efeitos visuais. Os aplicativos de design gráfico para cinema</p><p>e TV são ferramentas essenciais para o desenvolvimento de gráficos em movimento. Isso se deve</p><p>principalmente a uma necessidade interna de incorporar a tipografia escrita nos projetos, interagindo com as</p><p>imagens, como você pode ver na figura 7. Desde o filme mudo, informações textuais aparecem na imagem</p><p>cronometrada, como você pode observar na figura 8, não apenas nos créditos iniciais e finais, mas também</p><p>como legendas e textos narrativos que os acompanham.</p><p>Figura 8 | Filme “Psicose” de Alfred Hitchcock</p><p>Fonte: Wikimedia Commons.</p><p>E com o advento da televisão, a presença disso também aumenta, por exemplo, devido ao aumento do</p><p>volume de anúncios. A partir da década de 1950, com as aclamadas estreias de filmes, o designer norte-</p><p>americano Saul Bass desenvolve a relação entre texto e imagem temporalizada, tornando-a mais sofisticada</p><p>e marcando a genealogia do motion graphics. Veja na figura 9 como Bass faz uso do texto integrado à</p><p>imagem. No cartaz do filme “Anatomy of a Murder” (Anatomia de um assassino), a imagem de um corpo é</p><p>a base para a tipografia do texto.</p><p>Figura 9 | Imagem da abertura feita por Saul Bass para o filme: “Anatomy of a Murder”</p><p>Fonte: Velho, 2008.</p><p>De 1980 a 1990, a introdução da computação gráfica revolucionou a criação de elementos gráficos para</p><p>motion design. A computação gráfica permitiu a criação de elementos digitais mais complexos e a</p><p>manipulação de imagens de forma muito mais flexível. Um exemplo desta tecnologia é visto com muita</p><p>clareza quando assistimos filmes de Steven Spilberg (figura 10), que modificou o conceito de como utilizar</p><p>as imagens. Isso marcou o início da transição do design analógico para o digital. Somente a partir daí é que</p><p>podemos efetivamente falar em motion graphics tal como ele é entendido atualmente.</p><p>Figura 10 | Filme “E.T - O Extraterrestre”</p><p>Fonte: Wikimedia Communs.</p><p>Como você observou, a história da criação de elementos gráficos para motion design é uma jornada que</p><p>evoluiu desde as animações manuais simples até os designs digitais altamente complexos que vemos hoje. A</p><p>tecnologia desempenhou um papel significativo nessa evolução, permitindo que os designers criassem</p><p>elementos gráficos cada vez mais impressionantes e sofisticados. Com o avanço contínuo da tecnologia, é</p><p>emocionante imaginar como o futuro do motion design continuará a se desenvolver e inovar, e você fará</p><p>parte deste contexto.</p><p>MANIPULAÇÃO DOS ELEMENTOS GRÁFICOS</p><p>A importância da manipulação dos elementos gráficos para o Motion Design é fundamental e profunda, pois</p><p>esses elementos desempenham um papel central na criação de narrativas visuais envolventes e eficazes em</p><p>animações e vídeos em movimento. A manipulação habilidosa de elementos gráficos não apenas aprimora a</p><p>estética de uma animação, como também transmite mensagens, envolve o público e ajuda a contar histórias</p><p>de maneira impactante.</p><p>Os elementos gráficos são veículos poderosos de comunicação visual. Eles podem transmitir informações,</p><p>ideias e conceitos de forma rápida e eficaz. Quando manipulados adequadamente, esses elementos podem</p><p>simplificar mensagens complexas, tornando-as acessíveis a um público amplo, principalmente quando a</p><p>manipulação dos elementos gráficos desempenha um papel crucial na criação de narrativas visuais, fazendo</p><p>uso de elementos como texto, imagens, ilustrações e gráficos para contar histórias e criar uma atmosfera,</p><p>além de estabelecer o tom de uma animação. A maneira como esses elementos são manipulados afeta</p><p>diretamente a narrativa e a experiência do público.</p><p>A manipulação de elementos gráficos é uma parte essencial do processo de motion design, e isto envolve</p><p>além da criação, edição e animação de elementos visuais, como texto, imagens, ícones e ilustrações, para</p><p>que você possa criar uma narrativa visual dinâmica e envolvente em uma animação ou um vídeo em</p><p>movimento. É possível utilizar algumas técnicas e considerações ao manipular elementos gráficos no motion</p><p>design para que seu projeto obtenha o sucesso almejado.</p><p>Procure utilizar softwares de design gráfico e animação especializados de acordo com a sua proposta. O</p><p>mercado atualmente oferece softwares especializados como: Adobe After Effects, Adobe Premiere Pro</p><p>Cinema 4D, Adobe Illustrator e Adobe Photoshop, entre muitos outros –pagos e até mesmos gratuitos! - para</p><p>criar e manipular elementos gráficos. Essas ferramentas oferecem uma ampla gama de recursos e</p><p>funcionalidades para criar e animar elementos de maneira eficaz, nas quais será possível fazer uso das</p><p>camadas (método de edição usado por softwares de computação gráfica) para organizar e controlar</p><p>diferentes partes da composição. Caso você precise escurecer apenas uma parte da sua imagem, por</p><p>exemplo, não é necessário modificar toda a figura, e sim apenas a camada da parte que você deseja que seja</p><p>escurecida. Veja o exemplo da figura 11, em que a casa está com uma sombra, e a luz foi aplicada na</p><p>camada da casa, trazendo luz à imagem. Camadas permitem que você empilhe elementos e aplique efeitos</p><p>de forma seletiva.</p><p>Figura 11 | Uso de camadas em imagens</p><p>Fonte: Photopro.</p><p>Além disso, softwares de animação possibilitam diferentes posições e movimentos dos elementos gráficos</p><p>com rotações e escalas ao longo do tempo. Para isso, utilize quadros-chave (keyframes) para criar transições</p><p>suaves e movimentos dinâmicos. Isso faz com que transições se tornem suaves e os efeitos de transição para</p><p>criar mudanças fluam entre elementos gráficos. Isso pode incluir fades, dissoluções, deslizamentos e muito</p><p>mais, como os da figura 12.</p><p>Figura 12 | Desenhos de quadros chave de uma ação</p><p>Fonte: VELHO, 2008.</p><p>Caso seja necessário fazer uso do texto no motion design, ele deverá ser usado para transmitir informações</p><p>ou contar uma história. Anime o texto para torná-lo mais atraente e significativo. Isso pode incluir</p><p>animações de entrada, saída e estilização, incluindo escolhas de fonte, cores e animações, e afetando</p><p>diretamente a clareza e a legibilidade da mensagem. É crucial que o público possa entender facilmente o que</p><p>está sendo comunicado.</p><p>Sem dúvida, a manipulação de elementos gráficos desempenha um papel central na criação de motion</p><p>design atraente e eficaz. É uma combinação de criatividade,</p><p>em sua</p><p>criação, que veremos na próxima aula.</p><p>VIDEO RESUMO</p><p>Olá, estudante!</p><p>Nesta videoaula, revisaremos os principais pontos da história da animação, destacando algumas técnicas</p><p>desenvolvidas desde as primeiras representações de imagens em movimento até a atualidade. Revisitaremos</p><p>brevemente o desenvolvimento dos brinquedos ópticos, assim como a história da fotografia e do cinema, e</p><p>suas contribuições para o desenvolvimento da animação que conhecemos hoje. Acompanhe-me nesta</p><p>maravilhosa jornada de aprendizado!</p><p>Saiba mais</p><p>A animação como produto visual é bastante conhecida por todos, porém os fenômenos e as técnicas</p><p>responsáveis por sua existência não são de conhecimento geral, por fatores como a passividade dos</p><p>espectadores e por explicações errôneas sobre o assunto.</p><p>Observando as práticas do passado para buscar entender como proporcionar a compreensão dos fenômenos</p><p>intrínsecos à animação quadro a quadro e das suas técnicas, o presente trabalho propõe o desenvolvimento</p><p>de um brinquedo ótico como ferramenta lúdica de ensino.</p><p>Por isso, é importante o aprofundamento de conhecimento na história da animação, e você pode acessar o</p><p>artigo de Bastos (2019), que traz um excelente material de pesquisa e complementação a esta aula.</p><p>Você pode acessar pelo link abaixo. Bons estudos!</p><p>BASTOS, S. M. M. Brinquedo óptico: um meio para a compreensão da animação quadro a</p><p>quadro. 2019. 175 f. Monografia (Graduação em Design) – Centro de Tecnologia, Universidade Federal do</p><p>Ceará, Fortaleza, 2019.</p><p>Aula 2</p><p>A ANIMAÇÃO TRADICIONAL</p><p>Nesta aula, aprofundaremos nossos conhecimentos na animação tradicional,</p><p>entendendo como se dá o processo de produção e a importância de cada etapa</p><p>deste processo, além de vermos como as diversas técnicas de animação</p><p>tradicionais podem ser utilizadas pelos profissionais que desenvolvem a animação.</p><p>INTRODUÇÃO</p><p>Nesta aula, aprofundaremos nossos conhecimentos na animação tradicional, entendendo como se dá o</p><p>processo de produção e a importância de cada etapa deste processo, além de vermos como as diversas</p><p>técnicas de animação tradicionais podem ser utilizadas pelos profissionais que desenvolvem a animação.</p><p>Será apresentada uma visão mais ampla da animação tradicional ou clássica, sua importância histórica e sua</p><p>popularidade desde o início do século XX até hoje, e sua contribuição para a animação digital.</p><p>Ao final desta aula, você será capaz de compreender o processo de desenvolvimento da animação</p><p>tradicional, analisar as diferentes técnicas utilizadas e entender suas aplicações no mercado cinematográfico,</p><p>dos quadrinhos e dos jogos digitais. Venha comigo nesta maravilhosa jornada de aprendizado da animação</p><p>tradicional.</p><p>Bons estudos!</p><p>ANIMAÇÃO TRADICIONAL E SUA ORGANIZAÇÃO NO PROCESSO DE CRIAÇÃO</p><p>A animação tradicional, também conhecida como animação clássica, ganhou diversos termos e</p><p>denominações ao longo de seu desenvolvimento, sendo também chamada de animação por célula,</p><p>ou animação desenhada à mão. É considerada a animação mais antiga e a mais popular de todas. Por isso,</p><p>ao longo de seu desenvolvimento, foram sendo criadas metodologias de produção da animação para que os</p><p>projetos conseguissem bons resultados, sem atrasos e com a qualidade almejada.</p><p>Em projetos de animação, há uma necessidade de se estabelecer um método para a criação da história, para a</p><p>concepção dos personagens e o planejamento da animação propriamente dita, para que se priorize qualidade</p><p>e tempo. Também precisamos levar em consideração o destino final da animação – cinema, televisão,</p><p>internet ou jogos – e a técnica a ser adotada, assim como o orçamento disponível.</p><p>Diferentes autores propõem diferentes metodologias de produção, que tem similaridade e diferenças, sendo</p><p>que nenhuma é completamente fechada. Sempre será necessário ajustar procedimentos de acordo com</p><p>orçamento, prazo e tipo de produção. Cada estúdio tem um método próprio, mas, geralmente, podemos</p><p>dividir esse processo em 3 fases: pré-produção, produção e pós-produção.</p><p>Pré-produção da animação:</p><p>Consiste na contextualização e no delineamento prévio de ações que serão desempenhadas Na animação</p><p>por meio de desenvolvimento do roteiro, do planejamento e gerenciamento do projeto, da produção</p><p>do storyboard e da definição de características visuais da cena e do personagem. É o momento em que se</p><p>unificam os procedimentos para fundamentar a visão ampla e sistêmica do projeto. Após a aprovação da arte</p><p>e do roteiro, uma série de ações interligadas serão determinantes para o sucesso do projeto.</p><p>A principais etapas dessa fase do processo são: a definição da direção de arte, a criação</p><p>do storyboard (esboço visual da sequência de desenhos quadro a quadro com o esboço de diversas cenas da</p><p>animação), a gravação do som-guia, o desenvolvimento do animatic (versão completa do storyboard com</p><p>áudio, vozes e música temporária) e a determinação dos diálogos definitivos. A Figura 1 mostra um</p><p>fluxograma com todas as etapas da pré-produção de uma animação.</p><p>Figura 1 | Fase de pré-produção da animação</p><p>Fonte: FREITAS, Mariana Ferreira de. Fundamentos e técnicas da animação 2D. 1. ed. Curitiba, PR:</p><p>Intersaberes, 2023. E-book.</p><p>Produção da animação:</p><p>A produção compreende a modelagem e a animação dos personagens e dos ambientes, além da posterior</p><p>renderização do resultado. Essa fase pode se sobrepor à fase de pré-produção, dependendo do tipo de</p><p>projeto. Após a aprovação do animatic de uma sequência ou episódio, a fase de pré-produção é considerada</p><p>concluída. Então são realizadas reuniões semanais ou diárias para a supervisão do andamento do projeto. A</p><p>cada sequência aprovada, uma nova versão do animatic é gerada e a produção segue para um nível</p><p>operacional. Os diretores acompanham para que o projeto seja realizado no cronograma estipulado. A Figura</p><p>2 mostra um fluxograma com todas as etapas da produção de uma animação (obs.: As diversas etapas deste</p><p>fluxograma, são exploradas em detalhes nas leituras indicadas na seção “Saiba mais” desta aula).</p><p>Figura 2 | Fase de produção da animação</p><p>Fonte: FREITAS, Mariana Ferreira de. Fundamentos e técnicas da animação 2D. 1. ed. Curitiba, PR:</p><p>Intersaberes, 2023. E-book.</p><p>Pós-produção da animação:</p><p>Por fim, a pós-produção corresponde à finalização da animação por meio de edição das cenas. Ou seja, todas</p><p>as cenas já foram conferidas, compostas digitalmente e aprovadas pelos diretores. A montagem recebe os</p><p>ajustes finos, a trilha e os efeitos sonoros na versão final. Em seguida, é realizada a mixagem final de</p><p>imagem e áudio da animação. O projeto é trancado (locking picture), não recebe mais nenhum tipo de ajuste</p><p>de edição ou revisão.</p><p>Em resumo, a pós-produção envolve a edição do filme, desenho animado ou jogo, a sincronia de imagem e</p><p>áudio e a aplicação de efeitos especiais. A Figura 3 mostra um fluxograma com todas as etapas da pós-</p><p>produção de uma animação (obs.: As diversas etapas deste fluxograma, são exploradas em detalhes nas</p><p>leituras indicadas na seção “Saiba mais” desta aula).</p><p>Figura 3 | Fase de pós-produção da animação</p><p>Fonte: FREITAS, Mariana Ferreira de. Fundamentos e técnicas da animação 2D. 1. ed. Curitiba, PR:</p><p>Intersaberes, 2023. E-book.</p><p>ETAPAS DOS PROCESSOS DE PRODUÇÃO DA ANIMAÇÃO</p><p>Neste bloco, veremos de forma mais aprofundada as principais etapas de cada uma das fases do processo de</p><p>produção da animação. Assim, poderemos compreender e relacionar de forma sistemática todas as técnicas</p><p>mais importantes envolvidas na produção de uma animação.</p><p>Etapas da Pré-produção</p><p>1. Definições realizadas pela direção de arte:</p><p>A direção de arte desenvolve a ideia inicial (Figura 4), definindo o estilo visual, um esboço gráfico e textual</p><p>a ser incluído no roteiro final. Estabelece-se a iluminação, adaptando os desenhos e definindo a paleta de</p><p>cores (key colors) que será utilizada. É desenvolvido um guia de estilo visual</p><p>habilidades técnicas e atenção aos detalhes, que</p><p>permite a você criar animações impactantes e visualmente cativantes, trazendo ao seu cliente um diferencial</p><p>em qualquer seguimento no qual você opte por atuar como designer.</p><p>VIDEO RESUMO</p><p>Olá, estudante!</p><p>Neste vídeo será apresentado a você os conceitos do motion design, desde a história da animação tradicional</p><p>até a animação digital, e de que maneira se constitui o motion graphics na animação nos diferentes</p><p>segmentos profissionais. Além de como a manipulação dos elementos gráficos no motion design modificam</p><p>os resultados na apresentação de um projeto de animação para o cinema, a TV ou mesmo para o marketing.</p><p>Saiba mais</p><p>Estudante, acreditando que o conhecimento deve ocorrer em continuidade, fazemos aqui algumas sugestões</p><p>de leitura que podem complementar o conteúdo apresentado nesta aula.</p><p>- Motion Graphics e seu papel na Interface do Usuário: Neste artigo, serão discutidos conceitos,</p><p>objetivos e a importância da interação entre usuário e interface digital. Demonstramos como tem sido</p><p>apontada a relação entre pessoas e dispositivos que utilizam interfaces digitais. O sucesso dessa interação</p><p>pode depender da forma como a interface foi projetada e das ferramentas nela presentes.</p><p>- Recomendações sobre design informacional aplicado em motion graphics: O motion graphics</p><p>caracteriza-se por apostar numa área de criação que permite a combinação e manipulação de ilustrações,</p><p>elementos gráficos, fotografia e vídeos, num determinado espaço-tempo, com música e efeitos sonoros. A</p><p>pesquisa teve como objetivo identificar se, para o público jovem, os gráficos em movimento transmitem</p><p>informações de forma mais eficaz do que o material estático.</p><p>- A evolução do motion graphics: da narrativa do cinema para a autonomia audiovisual: O modo como</p><p>consumimos informações visuais é alterado dia a dia pela hibridização de conceitos e formas de</p><p>comunicação. Hoje, praticamente todos os dispositivos audiovisuais trabalham com animações rápidas</p><p>carregadas de informações e um critério estético. Essas animações são conhecidas como motion graphics.</p><p>Objetivando traçar as raízes do motion graphics e seu atual contexto de utilização, formulamos nosso objeto</p><p>de pesquisa e</p><p>identificamos que sua origem parte do hibridismo entre diversos pressupostos teóricos nos campos d</p><p>o cinema, em que citamos Machado (2010) e Rancière (2014); no design, utilizando autores como</p><p>Frascara (2004) e Krasner (2008); e da comunicação visual, com Chomsky (1960) e Dondis (1997). Com</p><p>isso, criamos um panorama no qual analisamos os principais processos que tornaram possível a transposição</p><p>do motion graphics do cinema para a atual linguagem visual.</p><p>Aula 2</p><p>COMPOSIÇÃO</p><p>Nesta aula, será apresentado o universo do Motion Graphics, e como a composição</p><p>é um relevante alicerce para que a magia visual ganhe vida através de vídeos ou</p><p>animações.</p><p>http://www.unoeste.br/site/enepe/2016/suplementos/area/Humanarum/Artes/MOTION%20GRAPHICS%20E%20SEU%20PAPEL%20NA%20INTERFACE%20DO%20USU%C3%81RIO.pdf</p><p>https://pdfs.semanticscholar.org/0c98/eb1df57743e55a10871c8353a2250473f892.pdf</p><p>https://pdfs.semanticscholar.org/0c98/eb1df57743e55a10871c8353a2250473f892.pdf</p><p>https://dialogo.espm.br/revistadcec-rj/article/view/211/pdf</p><p>https://dialogo.espm.br/revistadcec-rj/article/view/211/pdf</p><p>INTRODUÇÃO</p><p>Olá, estudante!</p><p>Nesta aula, será apresentado o universo do Motion Graphics, e como a composição é um relevante alicerce</p><p>para que a magia visual ganhe vida através de vídeos ou animações. Essa etapa criativa é o momento em que</p><p>elementos gráficos e efeitos visuais são habilmente entrelaçados para contar uma história ou transmitir uma</p><p>mensagem. A composição não é apenas sobre dispor elementos na tela, mas também sobre considerar outros</p><p>temas, como equilíbrio, simetria e harmonia visual.</p><p>Dentro desse processo, as camadas de ajuste emergem como ferramentas indispensáveis. Elas permitem a</p><p>aplicação de efeitos e correções de forma não destrutiva, afetando todas as camadas abaixo delas.</p><p>Finalmente, quando o projeto está pronto, é necessário exportar; para isso, o software After Effects, da</p><p>Adobe, vem auxiliar nessa etapa crucial, pois determina como sua criação será compartilhada com o público.</p><p>A escolha dos formatos de arquivo desempenha um papel vital, influenciando a qualidade e a</p><p>compatibilidade do vídeo. Portanto, ao iniciar um projeto, se lembre o quanto é importante estar atento a</p><p>todos os detalhes para criar produções visuais impactantes e cativantes.</p><p>Vamos começar?</p><p>ELEMENTOS NA COMPOSIÇÃO NO MOTION GRAPHICS</p><p>A composição desempenha um papel fundamental no processo de produção para motion graphics, uma</p><p>forma de arte visual dinâmica que combina design gráfico, animação e elementos audiovisuais para criar</p><p>conteúdo cativante e envolvente. Neste bloco, exploraremos a importância da composição nesse processo,</p><p>abordando conceitos-chave, técnicas e considerações criativas.</p><p>Quando nos referimos à composição no motion graphics, é sobre a maneira como os elementos visuais são</p><p>organizados em um espaço tridimensional, como a tela de um vídeo ou uma animação. Em motion</p><p>graphics, a composição é crucial para transmitir eficazmente a mensagem, criar uma narrativa visual coesa e</p><p>manter o público envolvido. Observe, na figura 1, como os elementos que compõem a cena integram todo o</p><p>espaço da tela, fazendo com que o observador busque por diferentes detalhes para maior compreensão da</p><p>narrativa na animação.</p><p>Figura 1 | Composição/Organização dos Elementos Visuais</p><p>Fonte: Eu desenho.</p><p>Alguns elementos-chave da composição em motion graphics partem da Hierarquia Visual. Essa hierarquia</p><p>ajuda a guiar o olhar do espectador, destacando elementos importantes. Elementos maiores, mais brilhantes</p><p>ou mais centralizados geralmente têm mais peso visual e atraem a atenção primeiro. Isso é especialmente</p><p>útil para direcionar o foco do espectador para informações cruciais, como na figura 2, em que a personagem</p><p>“lagarta” é mais brilhante que todos os elementos do seu entorno, fazendo com que o observador fixe seu</p><p>olhar apenas em suas ações. De acordo com Block (2008), todos os principais elementos da linguagem</p><p>visual podem ser remetidos ao “Princípio de Contraste e Afinidade”, no qual “Contraste” significa diferença,</p><p>e “Afinidade” manifesta semelhança. Sendo assim, quanto maior é a afinidade de um componente, menor</p><p>será a sua dinâmica e intensidade visual: “Contraste= Maior Intensidade Visual; Afinidade = Menor</p><p>Intensidade Visual.” (Block, 2008, p. 11).</p><p>Figura 2 | Animação: “Sweet Cocoon (Doce Casulo): um empurrãozinho para a mudança”</p><p>Fonte: Eu desenho.</p><p>O fluxo de movimento no motion graphics envolve animação, e a maneira como os elementos se movem na</p><p>tela é essencial para levar ao observador um bom fluxo de movimento. A composição do movimento deve</p><p>ser “suave e lógica”, seguindo trajetórias naturais ou intencionais. Estes movimentos devem apoiar a</p><p>narrativa e a mensagem, evitando distrações ou confusões, já que isso dificultaria o entendimento da</p><p>narrativa.</p><p>A utilização do espaço negativo é um elemento poderoso na composição. Trata-se do espaço vazio ao redor</p><p>dos elementos principais. Esse espaço desempenha um papel importante na criação de contraste e no</p><p>destaque dos elementos-chave. Ele contribui para uma sensação de equilíbrio, como na figura 3.</p><p>Figura 3 | Espaço Negativo</p><p>Fonte: Eu desenho.</p><p>O equilíbrio entre os elementos visuais é vital para alcançar uma harmonia estética. Isso pode ser</p><p>conquistado por meio da simetria, em que os elementos são organizados de forma idêntica (ou quase) em</p><p>ambos os lados da imagem, proporcionando uma sensação de estabilidade e ordem.</p><p>Para trazer vida à composição com uma sensação de profundidade, em uma cena bidimensional, a</p><p>perspectiva, a sobreposição de elementos e as sombras são técnicas que podem ser empregadas para alcançar</p><p>esse efeito, como</p><p>na figura 4, em que é utilizada, além da perspectiva, a sobreposição de planos e a paleta de</p><p>tons de verde na composição da paisagem. Isso a torna mais imersiva e atrativa. A escolha de cores também</p><p>é uma decisão significativa na composição. Estas podem ser usadas para criar contrastes impactantes,</p><p>transmitir emoções e estabelecer a identidade visual de uma peça de motion graphics. Uma paleta de cores</p><p>coesa e bem escolhida é essencial para comunicar a mensagem de forma eficaz.</p><p>Figura 4 | Animação com uso perspectiva e paleta de cores</p><p>Fonte: Eu desenho.</p><p>Por fim, a composição não é uma etapa única, mas um processo contínuo de experimentação e refinamento.</p><p>Você, como designer, irá realizar testes e revisões constantes para garantir que a composição atenda aos</p><p>objetivos estabelecidos. Essa interação é fundamental para criar motion graphics eficazes e impactantes.</p><p>TRABALHANDO COM CAMADAS DE AJUSTE</p><p>As camadas de ajuste - ou Adjustment Layers, em inglês - são uma ferramenta essencial no mundo</p><p>do motion graphics e da edição de vídeo. Elas desempenham um papel fundamental na criação e no</p><p>aprimoramento de efeitos visuais, na correção de cores e no controle da estética geral de uma composição.</p><p>As camadas de ajuste são elementos especiais adicionados a uma composição de vídeo que afetam todas as</p><p>camadas abaixo delas. Em vez de aplicar efeitos diretamente a cada camada, individualmente, você pode</p><p>criar uma camada de ajuste e aplicar nela os efeitos, que depois poderá ser replicada para todas as imagens /</p><p>quadros / camadas submetidas a ela, economizando tempo e permitindo um controle mais preciso.</p><p>Um dos usos mais comuns das camadas de ajuste é a correção de cores. Por exemplo, se você deseja corrigir</p><p>o equilíbrio de cores de uma cena, como na figura 5, pode criar uma camada de ajuste de correção de cor e</p><p>fazer ajustes sem afetar as camadas de vídeo originais. Isso é especialmente útil quando se trabalha com</p><p>múltiplos clipes em uma composição, garantindo uma consistência visual em toda a peça.</p><p>Figura 5 | Imagem utilizando as camadas para realce de cor e detalhes</p><p>Fonte: Adobe.</p><p>Além da correção de cores, as camadas de ajuste também são usadas para criar efeitos visuais</p><p>impressionantes. Você pode adicionar efeitos como desfoque, brilho, contraste e muito mais às camadas de</p><p>ajuste para obter resultados específicos. Por exemplo, se você deseja criar um efeito de "vintage”, ou seja,</p><p>uma aparência clássica de imagem das décadas entre 1920 e 1960 em sua animação, basta você adicionar</p><p>uma camada de ajuste de "grão de filme" para dar à composição uma sensação de película antiga. Outra</p><p>possibilidade das camadas de ajuste é a capacidade de animar seus efeitos ao longo do tempo. Isso significa</p><p>que você pode criar transições suaves entre diferentes estados visuais em sua composição, quadro a quadro</p><p>em uma timeline, como na figura 6, por exemplo.</p><p>Figura 6 | Criação de uma animação em camadas na linha do tempo</p><p>Fonte: Adobe.</p><p>As camadas de ajuste desempenham um papel crucial na criação de composições complexas em motion</p><p>graphics. Por exemplo, você pode usar uma camada de ajuste para criar uma máscara que controla quais</p><p>partes da composição são visíveis. Isso é útil quando se deseja mostrar apenas uma parte específica de uma</p><p>imagem ou aplicar um efeito a uma área específica.</p><p>No entanto, é importante mencionar que as camadas de ajuste não se limitam apenas a efeitos visuais. Elas</p><p>também podem ser usadas para controlar aspectos como o volume de áudio, aplicar transições de áudio e</p><p>muito mais.</p><p>EXPORTAÇÃO DE ARQUIVOS NO AFTER EFFECTS</p><p>A exportação no After Effects é uma etapa crítica no processo de criação de motion graphics, pois determina</p><p>como sua composição será finalizada e compartilhada com o público-alvo. Este processo envolve a escolha</p><p>dos formatos de arquivo corretos e a realização de uma pré-visualização para garantir que o resultado final</p><p>atenda aos seus objetivos.</p><p>A exportação de uma composição no After Effects é o estágio final do processo de produção. Autores como</p><p>Chris Jackson, no livro "After Effects and Cinema 4D Lite,” enfatizam que a exportação adequada é crucial</p><p>para garantir que sua criação seja exibida conforme planejado. O autor ainda complementa que a exportação</p><p>no After Effects, apesar de ser um processo relativamente simples, requer atenção aos detalhes e às etapas</p><p>que você pode seguir para exportar seu projeto, como veremos a seguir:</p><p>- Seleção da Composição: Primeiro, você deverá selecionar a composição que deseja exportar, como na</p><p>figura 7. Tenha certeza de que todas as camadas e elementos estejam exatamente como você deseja que</p><p>apareçam no resultado.</p><p>Figura 7 | Seleção dos arquivos que deseja exportar</p><p>Fonte: Adobe.</p><p>- Configurações de Exportação: Depois, clique em "Composição", na barra de menu e, em seguida,</p><p>escolha "Adicionar à fila de renderização"; isso abrirá a janela de configurações de exportação.</p><p>- Formato e Configurações: Na janela de configurações de exportação, você pode escolher o formato de</p><p>arquivo desejado. Os formatos mais comuns incluem MP4, MOV, AVI e GIF, como exemplificado na figura</p><p>8. Cada formato tem suas próprias configurações específicas, que podem ser ajustadas, como resolução, taxa</p><p>de quadros, taxa de compressão, entre outros.</p><p>Figura 8 | Formatos e Configurações</p><p>Fonte: Adobe.</p><p>- Local de Destino: Defina o local ou pasta onde deseja salvar o arquivo exportado. Certifique-se de</p><p>selecionar um local acessível e de fácil localização.</p><p>- Nome do Arquivo: Sempre dê um nome ao seu arquivo exportado para identificá-lo facilmente.</p><p>Certifique-se de escolher um nome descritivo que reflita o conteúdo da sua composição.</p><p>No momento de realizar a exportação, é essencial selecionar o formato de arquivo apropriado. No contexto</p><p>do motion graphics, os formatos de arquivo mais comuns incluem o MP4, o MOV e o GIF. Escolher um</p><p>formato de arquivo compatível com a plataforma de destino e as configurações de qualidade, como por</p><p>exemplo o MP4, que é amplamente aceito na maioria das plataformas e é adequado para vídeos de alta</p><p>qualidade, favorecem que seu projeto tenha melhores resultados. Cada formato de arquivo vai ao encontro</p><p>de diferentes plataformas e propostas, como veremos:</p><p>- MP4: É amplamente aceito e oferece uma boa qualidade de vídeo com tamanhos de arquivo relativamente</p><p>menores, tornando-o ideal para compartilhamento online.</p><p>- MOV: Oferece alta qualidade e é preferido para projetos que requerem a máxima qualidade visual. É</p><p>frequentemente usado em produções profissionais.</p><p>- GIF: É usado para pequenas animações e gráficos em loop. Possui qualidade limitada, mas é amplamente</p><p>suportado em várias plataformas.</p><p>- AVI: Oferece alta qualidade, mas os arquivos tendem a ser grandes. É usado quando a qualidade é a</p><p>prioridade e o tamanho do arquivo não é um problema.</p><p>Uma dica valiosa é sempre realizar a pré-visualização, que desempenha um papel crítico na exportação</p><p>de motion graphics. Antes de exportar seu projeto, é essencial visualizá-lo para verificar se tudo está correto.</p><p>Você pode usar a visualização em tempo real dentro do After Effects para fazer ajustes em tempo real,</p><p>garantindo que a animação, as cores e os efeitos estejam como planejados. Além disso, fazer uma pré-</p><p>visualização rápida do seu projeto exportado em um formato de arquivo leve, como MP4, permite identificar</p><p>erros ou áreas que precisam de ajustes antes de exportar o arquivo final de alta qualidade.</p><p>VÍDEO RESUMO</p><p>Olá, estudante!</p><p>Neste vídeo será apresentado como você pode utilizar diferentes elementos visuais na composição de seu</p><p>projeto, trazendo mais interesse ao observador a partir de elementos simples e bem trabalhados. A utilização</p><p>das camadas, para além dos elementos visuais, também pode trazer efeitos diferenciados ou realce a imagens</p><p>que você está utilizando. Finalmente, veremos a escolha do melhor tipo de arquivo e sua exportação</p><p>no After</p><p>Effects.</p><p>Saiba mais</p><p>Estudante, acreditando que o conhecimento deve ocorrer em continuidade, fazemos aqui algumas sugestões</p><p>de leitura que podem complementar o conteúdo apresentado nesta aula.</p><p>- Gestalt Aplicada Ao Motion Graphics: um estudo da linguagem visual e produção de conteúdos</p><p>digitais: Tendo em mente a importância de conhecer a forma como as pessoas veem, para que se possa</p><p>transmitir a mensagem pretendida da melhor forma possível, este artigo apresentará os princípios básicos da</p><p>Gestalt, que obteve os melhores resultados nessa área. Posteriormente, será analisado como esses princípios</p><p>se comportam sobre o motion graphics, uma forma de design carente de estudos. Uma mensagem visual que</p><p>tem total capacidade de transmitir aquilo que é pretendido é algo que vai muito além de conhecer as</p><p>ferramentas e o perfil do público receptor. É preciso saber como ele vê, qual a íntima relação entre a sua</p><p>visão e aquilo que está sendo visto, ou seja, a relação sujeito-objeto.</p><p>- Motion graphics e seu papel na interface do usuário: Neste artigo, serão discutidos conceitos, objetivos</p><p>e a importância da interação entre usuário e interface digital; além de como a animação se faz presente, e</p><p>qual a sua real importância e intenção nessa relação, com o objetivo final de evidenciar seu valor positivo na</p><p>experiência do usuário. Para realizar tal estudo demonstramos como vem sendo apontada a relação entre</p><p>pessoas e dispositivos que se valem de interfaces digitais - também conceituadas e explicadas ao decorrer do</p><p>texto - evidenciando como o sucesso de tal interação pode depender da forma como a interface foi projetada</p><p>e de ferramentas presentes nesta, que venham a auxiliar na usabilidade do produto, como, por exemplo, o</p><p>principal objeto de estudo desta pesquisa: as animações – ou, como retratadas para os fins deste artigo</p><p>Motion Graphics -, ou seja, imagens em movimento que devem acrescentar algo de positivo à interface</p><p>digital, e por consequência à experiência do usuário.</p><p>Aula 3</p><p>SINCRONIZAÇÃO DE ÁUDIO</p><p>Nesta aula apresentaremos a você como a produção audiovisual moderna é um</p><p>mundo complexo e interconectado, no qual várias ferramentas e técnicas se</p><p>entrelaçam para criar experiências impactantes.</p><p>INTRODUÇÃO</p><p>Nesta aula apresentaremos a você como a produção audiovisual moderna é um mundo complexo e</p><p>interconectado, no qual várias ferramentas e técnicas se entrelaçam para criar experiências impactantes. Três</p><p>aspectos fundamentais desse processo serão apresentados como conteúdo desta aula: a exportação no Adobe</p><p>Premiere e os formatos de arquivo, a interação entre os softwares Premiere e After Effects e a importância</p><p>do som na animação. As ferramentas apresentadas colaboram perfeitamente entre si, permitindo a criação de</p><p>animações, efeitos visuais e edições de vídeo avançadas. A integração dos softwares é crucial para a</p><p>produção de projetos visualmente impactantes. Já o som na animação é um componente essencial para a</p><p>narrativa e a experiência do espectador. A sincronização de áudio é uma habilidade que permite que o som e</p><p>a imagem trabalhem juntos, de maneira harmoniosa, aprimorando a qualidade do conteúdo audiovisual.</p><p>EXPORTAÇÃO E FORMATO DE ARQUIVO NO PREMIERE</p><p>A sincronização de áudio desempenha um papel crucial no mundo do motion graphics, em que apresentar a</p><p>união perfeita entre som e imagem é essencial para criar uma experiência visual envolvente ao expectador.</p><p>A exportação de áudio e a escolha dos formatos de arquivo desempenham um papel central nesse processo,</p><p>pois determinam a qualidade e a compatibilidade do áudio com a animação gráfica em movimento.</p><p>Em projetos de motion graphics, a exportação de áudio é frequentemente uma etapa delicada, pois exige a</p><p>máxima fidelidade sonora para complementar os elementos visuais de forma eficaz. A escolha do formato de</p><p>arquivo é uma decisão estratégica que depende da natureza do projeto e das plataformas de exibição.</p><p>Um dos formatos mais comuns para áudio em motion graphics é o WAV (Waveform Audio File Format,</p><p>traduzindo: Formato de arquivo em ondas). O WAV é um formato de áudio que mantém a qualidade original</p><p>do som, sem perdas, tornando-o ideal para projetos que buscam a máxima qualidade. Ele é amplamente</p><p>suportado por softwares de edição de vídeo e animação. Além do WAV, você também pode utilizar o</p><p>formato AIFF (Audio Interchange File Format, traduzindo: Formato de arquivo de intercâmbio de áudio),</p><p>que é outra opção sem perdas, que oferece alta qualidade sonora e é compatível com muitos softwares de</p><p>animação e edição. Ambos os formatos são ideais quando a qualidade do áudio é uma prioridade, como em</p><p>vídeos promocionais, anúncios e vinhetas de alta definição.</p><p>No entanto, em casos em que o tamanho do arquivo é uma preocupação, os formatos de compressão, como</p><p>o MP3 e o AAC (Advanced Audio Coding, traduzindo: Codificação de áudio avançada), podem ser</p><p>escolhas viáveis. Embora esses formatos sacrifiquem um pouco a qualidade do som para reduzir o tamanho</p><p>do arquivo, eles são ideais para projetos em que o espaço de armazenamento ou a largura de banda são</p><p>limitados, como em animações para web e mídias sociais.</p><p>A taxa de amostragem e a profundidade de bits também desempenham um papel importante na exportação</p><p>de áudio para motion graphics. A taxa de amostragem determina a quantidade de amostras de áudio por</p><p>segundo e pode afetar a fidelidade do som. Se aumentarmos a taxa de amostragem, mais dados sobre a</p><p>forma de onda do áudio são capturados, o que pode resultar em uma reprodução mais fiel do som original.</p><p>Por outro lado, uma taxa de amostragem muito baixa pode levar a uma representação imprecisa do áudio,</p><p>resultando em perda de detalhes e qualidade.</p><p>A profundidade de bits, por sua vez, indica a quantidade de informações digitais atribuídas a cada amostra.</p><p>Aumentar a profundidade de bits permite uma representação mais precisa dos níveis de volume e das</p><p>nuances tonais, proporcionando uma reprodução de áudio mais rica e detalhada.</p><p>Portanto, ao ajustar cuidadosamente tanto a taxa de amostragem quanto a profundidade de bits durante a</p><p>exportação de áudio para motion graphics, é possível garantir uma qualidade sonora superior e uma</p><p>experiência auditiva mais envolvente para o público.</p><p>Para a maioria dos projetos de motion graphics, uma taxa de amostragem de 44,1 kHz ou 48 kHz é</p><p>adequada, proporcionando alta qualidade de áudio.</p><p>É fundamental, ainda, que você tenha compreensão de que a profundidade de bits determina a resolução das</p><p>amostras de áudio e afeta a faixa dinâmica e a qualidade do som. Geralmente, uma profundidade de bits de</p><p>16 ou 24 bits é adequada para a maioria dos projetos de motion graphics, garantindo uma excelente</p><p>qualidade de áudio.</p><p>A sua decisão deve ser orientada pela qualidade desejada, de acordo com a proposta de seu projeto, os</p><p>requisitos de armazenamento e a compatibilidade com o software utilizado. Com a escolha certa de formato</p><p>e configurações, você pode garantir que o áudio e a animação gráfica se complementem perfeitamente,</p><p>proporcionando uma experiência visual e auditiva cativante para o público.</p><p>INTERAÇÃO ENTRE OS SOFTWARES: PREMIERE E AFTER EFFECTS</p><p>Os softwares Adobe Premiere e Adobe After Effects, quando interagem, desempenham um papel</p><p>fundamental no mundo do motion graphics, permitindo que os designers e editores criem experiências</p><p>visuais impressionantes e dinâmicas. Essas duas ferramentas da Adobe trabalham em conjunto de maneira</p><p>eficaz, possibilitando a sincronização perfeita entre áudio e vídeo, além de permitir uma ampla gama de</p><p>efeitos visuais e animações personalizadas, como na figura 1.</p><p>Figura 1 | Imagem do Adode After Effects com som e movimento do Adobe Premiere</p><p>Fonte: Adobe.</p><p>O Adobe Premiere é amplamente reconhecido como uma das principais ferramentas de edição de vídeo no</p><p>mercado. É o lugar onde a maior parte do trabalho de edição e montagem de vídeos</p><p>é realizada. No entanto,</p><p>quando se trata de motion graphics, muitas vezes o Premiere por si só não é suficiente para criar elementos</p><p>visuais altamente complexos. É aí que o Adobe After Effects entra no processo de produção.</p><p>O Adobe After Effects é um software dedicado à criação de animações, efeitos visuais e motion graphics.</p><p>Ele permite que os designers desenvolvam animações avançadas, adicionem efeitos especiais e combinem</p><p>elementos visuais com precisão cirúrgica. A interação entre o Premiere e o After Effects é uma combinação</p><p>poderosa para a produção de motion graphics de alta qualidade.</p><p>Uma das formas mais comuns de interação entre esses dois programas é o uso de composições dinâmicas,</p><p>como na (figura 2), na qual os morcegos se movem na animação, trazendo dinamismo à cena. No Premiere,</p><p>você pode criar uma sequência de vídeo e, em seguida, adicionar uma composição do After Effects à</p><p>sequência. Isso permite que você importe elementos animados ou efeitos visuais personalizados diretamente</p><p>no seu projeto Premiere.</p><p>Figura 2 | Animação de Halloween</p><p>Fonte: Adobe.</p><p>A sincronização entre Premiere e After Effects é perfeita, o que significa que você pode fazer alterações na</p><p>composição do After Effects e vê-las refletidas instantaneamente na sequência do Premiere. Isso é</p><p>particularmente útil quando se trabalha com motion graphics, pois permite que você ajuste animações e</p><p>efeitos de forma precisa, sincronizando-os com a trilha de áudio do seu vídeo.</p><p>Existe ainda a possibilidade do Adobe Dynamic Link, que é uma característica que simplifica a colaboração</p><p>entre o Premiere e o After Effects. Você pode criar uma composição no After Effects e, em seguida, vinculá-</p><p>la dinamicamente ao seu projeto Premiere. Isso significa que, se você fizer alterações na composição do</p><p>After Effects, elas serão automaticamente atualizadas no Premiere, economizando tempo e eliminando a</p><p>necessidade de exportar e importar arquivos.</p><p>No contexto do motion graphics, o After Effects oferece uma ampla variedade de recursos que tornam</p><p>possível criar animações complexas, transições suaves e efeitos visuais personalizados. Você pode usar</p><p>ferramentas de animação avançadas, como keyframes e expressões, para controlar movimentos e</p><p>comportamentos de objetos em suas composições.</p><p>Suponha que você tenha um gráfico de barras animado representando dados financeiros. A animação fluída</p><p>das barras pode ser alcançada a partir do controle cuidadoso dos keyframes, enquanto as expressões podem</p><p>ser usadas para vincular o movimento das barras a dados em tempo real, proporcionando uma experiência</p><p>visual dinâmica e informativa para o seu público. Outro aspecto importante é a capacidade de trabalhar com</p><p>camadas e máscaras no After Effects, permitindo a você criar animações em camadas, com elementos se</p><p>sobrepondo e interagindo de maneira fluida. Isso é particularmente útil para criar infográficos animados,</p><p>gráficos em movimento e títulos dinâmicos como na figura 3.</p><p>Imagine que você precise mostrar o crescimento de uma cidade ao longo do tempo. Usando camadas para</p><p>representar diferentes elementos, como edifícios, árvores e estradas, e aplicando máscaras para revelar</p><p>gradualmente esses elementos à medida que a cidade se expande, você pode criar uma animação cativante</p><p>que ilustra visualmente o desenvolvimento urbano ao longo dos anos. A capacidade de sobrepor e interagir</p><p>camadas e máscaras permite que você conte histórias visualmente de maneira envolvente e impactante em</p><p>suas apresentações de motion graphics.</p><p>Figura 3 | Animação de uma cidade</p><p>Fonte: Matilde Filmes.</p><p>O Premiere é o ambiente de edição principal, enquanto o After Effects é usado para criar animações, efeitos</p><p>visuais e elementos visuais personalizados. A capacidade de importar composições do After Effects</p><p>diretamente no Premiere, juntamente com recursos como o Adobe Dynamic Link, torna o fluxo de trabalho</p><p>entre essas duas ferramentas incrivelmente eficiente. Isso permite que você realize projetos criativos e</p><p>envolventes que cativem o público com sua riqueza visual e impacto emocional.</p><p>O SOM NA ANIMAÇÃO E SINCRONIZAÇÃO DE ÁUDIO</p><p>Na animação e na criação de projetos de motion graphics, o som se torna um elemento essencial, pois ele</p><p>acrescenta uma dimensão sensorial importante à experiência visual. A sincronização de áudio nessas</p><p>criações é uma habilidade crucial que permite que o som e a imagem trabalhem de maneira harmoniosa,</p><p>aprimorando a narrativa e o impacto emocional. Você poderá utilizar o áudio de várias maneiras para criar</p><p>diferentes efeitos e atmosferas, tanto em animações como em motion graphics.</p><p>Um bom exemplo são projetos que contêm diálogos ou narrações que explicam conceitos ou contam uma</p><p>história. A sincronização precisa desses elementos de áudio com as animações é fundamental para garantir</p><p>que a mensagem seja clara e compreensível. Você deve ajustar cuidadosamente o timing das animações para</p><p>corresponder às falas, para que não fique em descompasso a ação (movimentos, expressões faciais) com o</p><p>som.</p><p>Uma trilha sonora apropriada também pode definir o tom e a atmosfera de uma animação. Ela pode</p><p>variar de música animada para promover um produto a uma trilha sonora mais suave e emotiva para uma</p><p>história comovente. A sincronização da trilha sonora com os eventos visuais é crucial para criar a sensação</p><p>desejada, e despertar no observador sentimentos, emoções ou desejos. Isso também se aplica para dar vida a</p><p>um ambiente ou cena: sons de fundo, como ruídos de rua, pássaros cantando ou vento, podem ser</p><p>adicionados. A sincronização desses sons com a animação ajuda a criar um ambiente mais envolvente</p><p>A sincronização de áudio envolve uma relação precisa entre o áudio e os elementos visuais. Abaixo estão</p><p>algumas dicas para que você alcance essa sincronização eficaz:</p><p>- Antes de começar a animação, é essencial criar um storyboard detalhado, que inclua notas sobre quando e</p><p>como o áudio será usado. Isso ajuda a estabelecer um plano claro para a sincronização.</p><p>- Utilize um registro (marcador de tempo) no software de animação para marcar os pontos nos quais os</p><p>eventos sonoros devem ocorrer; dessa forma será possível manter a precisão durante o processo de</p><p>animação.</p><p>- Reproduza várias e várias vezes a animação com o áudio para verificar a sincronização. Faça ajustes</p><p>conforme necessário para garantir que tudo esteja alinhado corretamente.</p><p>- Às vezes, é necessário fazer edições no áudio para que ele se ajuste melhor à animação, o que pode</p><p>envolver, ajustar o tempo, cortar ou até mesmo regravar trechos.</p><p>Uma equipe que atua em colaboração, ou seja, designers de som e animadores é essencial para comunicar</p><p>claramente as intenções sonoras e visuais, o que ajuda a garantir uma sincronização eficaz.</p><p>A sincronização de áudio é uma habilidade que vai requerer de você habilidade e atenção. Quando</p><p>executada com maestria, a interação entre o som e a imagem pode elevar significativamente a qualidade e o</p><p>impacto de uma animação. O som não é apenas um complemento, mas uma parte fundamental da narrativa</p><p>visual, proporcionando uma experiência completa e envolvente para o público.</p><p>VIDEO RESUMO</p><p>Olá, estudante!</p><p>Neste vídeo abordaremos pontos importantes da utilização de som e áudio em projetos de motion graphics e</p><p>animação, maneiras de realizar a exportação e seus formatos, além de como, após realizar uma animação no</p><p>software After Effects, inserir diálogos, ou mesmo uma trilha sonora, utilizando o Adobe Premiere.</p><p>Apresentaremos como a sincronização entre elementos visuais e sonoros deve ocorrer de forma harmoniosa</p><p>para que o expectador se sinta envolvido em projetos que fazem uso dessa proposta.</p><p>Saiba mais</p><p>Olá, estudante!</p><p>Acreditando que o conhecimento deve ocorrer em continuidade, fazemos aqui algumas sugestões de leitura</p><p>que podem complementar o conteúdo apresentado nesta aula.</p><p>- Os modelos multimidiáticos nos portais piauienses: estudo</p><p>comparado dos portais Meio Norte, 180</p><p>graus e Portal da Clube: Este artigo se propõe a analisar o uso dos multimeios nos portais do Piauí, a partir</p><p>de um estudo comparado dos portais Meio Norte, 180 graus e Portal da Clube. Por meio da observação do</p><p>espaço cedido aos elementos de multimídias na primeira página dos portais, procurando entender como o</p><p>portal os utiliza e a dinamicidade promovida por esse uso, como também, a relação com a hipertextualidade.</p><p>Dessa forma, se busca compreender como a linguagem multimidiática atribui sentido ao texto. Para isso, a</p><p>pesquisa contou com salvamento do conteúdo midiático e a análise dos dados.</p><p>- O universo sonoro cinematográfico: um estudo comparativo entre as obras fílmicas de animação</p><p>Wall-E e O Menino e o Mundo. A questão da produção de conteúdos sonoros dentro da indústria</p><p>audiovisual é um terreno ainda pouco explorado no universo acadêmico brasileiro. Nesse sentido, definimos</p><p>nosso objeto de estudo no amplo escopo do universo sonoro cinematográfico – linguagem, desenho sonoro,</p><p>sua concepção e as suas aplicações –, voltando-nos para a problemática da importância destas dimensões no</p><p>trabalho com o produto audiovisual. Metodologicamente, em relação à abordagem do tema, a presente</p><p>pesquisa é de natureza qualitativa. Esta escolha se dá pela demasiada abstração do tema escolhido, sendo</p><p>dificultada a sua abordagem se não a partir da reflexão sobre um produto já consolidado. Assim, quanto aos</p><p>objetivos, e para evitar ambiguidades ou inferências inconclusivas, analisamos comparativamente o universo</p><p>sonoro de dois filmes de animação: Wall-E e o O Menino e o Mundo. Este estudo busca trazer à luz diversas</p><p>formas de análise sonora e conceitos relacionados aos estudos de áudio que podem motivar pesquisas</p><p>posteriores.</p><p>- Proposta para análise do design de som em animações educacionais: A animação gráfica tem sido</p><p>estudada por diversas áreas, sendo comuns artigos sobre sua composição visual, seu conteúdo e discurso. No</p><p>entanto, quando se fala de animações educacionais, esses estudos se tornam mais escassos, principalmente</p><p>quando abordam o uso do som. No design da informação, o som se constitui como canal de equivalente</p><p>importância para a formação da imagem mental do aprendiz e para o entendimento do conteúdo. Este artigo</p><p>analisa a aplicação do som em animações e tem como questão de pesquisa esclarecer como o canal sonoro é</p><p>utilizado em animações educacionais, e como objetivo apresentar um panorama do uso do som em</p><p>animações educacionais.</p><p>Aula 4</p><p>RENDERIZAÇÃO</p><p>Nesta aula será apresentada a vanguarda da criação visual, onde a animação</p><p>digital não é apenas uma arte, mas também uma ciência complexa, na qual a</p><p>criatividade e a tecnologia se entrelaçam para dar vida a mundos imaginários.</p><p>INTRODUÇÃO</p><p>Olá, estudante!</p><p>Nesta aula será apresentada a vanguarda da criação visual, onde a animação digital não é apenas uma arte,</p><p>mas também uma ciência complexa, na qual a criatividade e a tecnologia se entrelaçam para dar vida a</p><p>mundos imaginários.</p><p>Você verá que as opções de renderização são diretrizes que guiam essa jornada, oferecendo escolhas cruciais</p><p>para os artistas digitais. Entre elas, os algoritmos de renderização surgem como a espinha dorsal,</p><p>transformando modelos tridimensionais em imagens envolventes, com luzes que dançam e sombras que</p><p>contam histórias.</p><p>Os recursos de renderização e finalização, por sua vez, são as ferramentas que refinam essa magia digital.</p><p>Da escolha cuidadosa de texturas ao ajuste da iluminação, cada detalhe é aprimorado, cada pixel é polido.</p><p>Esses recursos vão além da simples estética; eles moldam mundos de filmes, jogos e animações interativas,</p><p>criando experiências que cativam a imaginação e emocionam o espectador.</p><p>Vamos começar?</p><p>O MUNDO EM MOVIMENTO</p><p>No amplo universo da animação digital, a tecnologia está sempre em constante evolução, moldando e</p><p>refinando a maneira como percebemos e interagimos com o mundo virtual. Uma peça fundamental nesse</p><p>processo é a renderização, um procedimento complexo que transforma dados digitais brutos em imagens</p><p>visuais incrivelmente detalhadas e envolventes. A busca incessante pela qualidade visual e pelo realismo na</p><p>animação digital levou os criadores a explorar várias opções de renderização, cada uma com suas</p><p>características únicas e vantagens específicas.</p><p>Em sua essência, a renderização é a arte de transformar modelos bidimensionais em imagens</p><p>tridimensionais, tornando possível visualizar movimentos fluidos, texturas realistas e iluminação dinâmica.</p><p>Entre as diversas opções disponíveis, duas se destacam: a renderização em tempo real e a renderização</p><p>offline. A renderização em tempo real é especialmente popular em jogos e simulações interativas, em que a</p><p>velocidade é essencial para criar uma experiência imersiva. Por outro lado, a renderização offline, também</p><p>conhecida como renderização de alta qualidade, é amplamente utilizada em produções cinematográficas e de</p><p>animação, em que a qualidade visual é priorizada sobre o tempo de renderização.</p><p>Para compreender melhor essas opções, podemos recorrer ao autor Alan Watt, que em seu livro "3D</p><p>Computer Graphics" (1993), explora detalhadamente os princípios por trás da renderização digital. Watt</p><p>destaca como a renderização em tempo real revolucionou a indústria de jogos, permitindo aos</p><p>desenvolvedores criar mundos virtuais incrivelmente complexos que respondem em tempo real às interações</p><p>dos jogadores, como na figura 1: “Overwatch”, jogo eletrônico desenvolvido pela empresa americana</p><p>Blizzard Entertainment em 2016. Essa técnica é baseada em algoritmos eficientes que equilibram qualidade</p><p>visual e desempenho, proporcionando uma experiência imersiva e envolvente.</p><p>Figura 1 | Cenário do jogo “Overwatch”</p><p>Fonte: Freepik.</p><p>No entanto, a renderização offline, como discutida por Watt, é uma abordagem meticulosa que permite aos</p><p>artistas alcançarem níveis de realismo inigualáveis. Observe a figura 2: ao utilizar algoritmos avançados de</p><p>iluminação global e simulação de materiais, é posssível criar imagens que se aproximam cada vez mais da</p><p>realidade. No entanto, essa qualidade exige um tempo significativo de renderização, às vezes horas ou até</p><p>dias para cada quadro de animação. Apesar do alto custo computacional, a renderização offline é</p><p>amplamente empregada em produções de alta qualidade, como filmes de animação e efeitos visuais em</p><p>Hollywood.</p><p>Figura 2 | Imagem renderizada offline</p><p>Fonte: Freepik.</p><p>À medida que a tecnologia continua a avançar, a linha entre renderização em tempo real e offline começa a</p><p>se dissipar. Novas técnicas, como “Ray tracing” (ou traçado de raios, em português), é uma técnica</p><p>avançada de renderização que simula o comportamento real da luz para criar imagens altamente realistas em</p><p>ambientes virtuais. Em vez de simplificar a trajetória da luz, o ray tracing calcula cada raio de luz</p><p>individualmente, considerando como ele interage com objetos e superfícies no ambiente em tempo real. Esse</p><p>avanço contínuo não apenas eleva o padrão visual da animação digital, mas também desafia os limites da</p><p>criatividade, oferecendo a você, futuro desenvolvedor de animações, um vasto campo para explorar e inovar.</p><p>As opções de renderização na animação digital são vastas e diversificadas, cada uma oferecendo um</p><p>conjunto único de benefícios e desafios. Por trás de cada imagem deslumbrante que vemos na tela, há uma</p><p>ciência complexa e fascinante que impulsiona o mundo em movimento, moldando o futuro da narrativa</p><p>visual de maneiras emocionantes e inimagináveis.</p><p>EXPLORANDO A MAGIA DOS ALGORITMOS</p><p>Na base da criação de grafismos animados, reside uma intricada dança entre criatividade e tecnologia, em</p><p>que algoritmos de renderização desempenham um papel vital. Esses algoritmos são como pinceis digitais,</p><p>transformando ideias abstratas em imagens visuais deslumbrantes, nos softwares de animação digital. Para</p><p>entender</p><p>esse processo complexo e fascinante, recorremos a Donald Knuth, nascido em Wisconsin/EUA, em</p><p>1938, e professor emérito da Universidade de Stanford: um pioneiro da ciência da computação, cujas ideias</p><p>sobre algoritmos oferecem insights valiosos.</p><p>Os algoritmos de renderização funcionam calculando cada detalhe de uma cena para transformá-la em</p><p>imagens visuais. Estes algoritmos determinam como a luz interage com objetos, criando sombras, reflexões</p><p>e refracções, replicando, assim, os fenômenos naturais no mundo virtual. Em sua obra seminal, "The Art of</p><p>Computer Programming", Knuth (1997) explora os fundamentos matemáticos dos algoritmos. Ele</p><p>argumenta que, ao entender profundamente os algoritmos, os artistas digitais podem criar grafismos</p><p>animados que transcendem as fronteiras da imaginação. É através da aplicação criativa desses algoritmos</p><p>que cenas ousadas e inovadoras ganham vida, deixando uma impressão duradoura na audiência.</p><p>No entanto, a jornada da criação de grafismos animados não termina com a renderização. A pós-produção é</p><p>uma etapa igualmente vital, na qual os elementos individuais da animação são unidos e refinados para criar</p><p>uma narrativa coesa e envolvente. É aqui que os editores de vídeo e especialistas em efeitos visuais</p><p>desempenham um papel fundamental. Inspirados pelo trabalho visionário de George Lucas na saga "Star</p><p>Wars”, que tem seu início em 1977, com o seu primeiro filme “Uma Nova Esperança”, produzido pelos</p><p>estúdio vanguardista Industrial Light & Magic (ILM), deixou evidente a relevância dos profissionais de pós-</p><p>produção utilizarem técnicas avançadas para aprimorar a qualidade visual e emocional das animações, daí a</p><p>saga tão popular de “Star Wars” (figura 3).</p><p>Figura 3 | Imagem futurista do filme “Star Wars”</p><p>Fonte: Freepik.</p><p>No mundo de hoje, a pós-produção é tanto uma arte quanto uma ciência. A tecnologia digital permite que os</p><p>editores de vídeo manipulem a luz, a cor e a composição de uma cena com precisão cirúrgica. Ferramentas</p><p>avançadas de edição, como o Adobe After Effects e o Autodesk Flame, tornam possível criar efeitos visuais</p><p>impressionantes, desde explosões épicas até sutis ajustes de cor que afetam a atmosfera geral de uma cena.</p><p>Este processo é guiado pela visão criativa dos editores, que moldam a narrativa visual, aprimorando</p><p>emoções e garantindo uma experiência imersiva para o público.</p><p>Além disso, a pós-produção não se limita apenas à parte visual. O som desempenha um papel igualmente</p><p>essencial na criação de uma experiência cinematográfica impactante. Os engenheiros de som trabalham</p><p>incansavelmente para criar trilhas sonoras envolventes e efeitos sonoros que elevam a animação a novos</p><p>patamares emocionais. A combinação harmoniosa de som e imagem é o que transforma uma simples</p><p>sequência animada em uma obra de arte que ressoa profundamente com o espectador.</p><p>Os algoritmos de renderização e o processo de pós-produção são os pilares sobre os quais repousa a magia</p><p>dos grafismos animados. Inspirados por mentes visionárias como Donald Knuth e George Lucas, os artistas</p><p>digitais e os especialistas em pós-produção continuam a empurrar os limites da criatividade e da tecnologia,</p><p>criando obras que encantam, emocionam e inspiram.</p><p>A TRANSFORMA��ÃO ATRAVÉS DO DIGITAL</p><p>Através da tecnologia digital, a animação evoluiu para um momento em que a criatividade encontra a</p><p>tecnologia, e os recursos de renderização e finalização emergem como os elementos cruciais nessa trajetória</p><p>fascinante. A aplicação eficaz de recursos de renderização e finalização se tornou um diferencial</p><p>fundamental, moldando não apenas o entretenimento, mas também campos como publicidade (figura 4);</p><p>educação (figura 5); arquitetura (figura 6); e design (figura 7). Nesse contexto dinâmico, a habilidade de</p><p>utilizar esses recursos é uma competência essencial para profissionais que buscam se destacar em suas</p><p>carreiras.</p><p>Figura 4 | Renderização na Publicidade</p><p>Fonte: Freepik.Figura 5 | Renderização na Educação</p><p>Fonte: Freepik.Figura 6 | Renderização na arquitetura</p><p>Fonte: Freepik.Figura 7 | Renderização no Design</p><p>Fonte: Freepik.</p><p>Na indústria do entretenimento, de produções cinematográficas a séries de televisão e videogames, os</p><p>recursos de renderização e finalização são empregados para criar universos visuais ricos e envolventes. A</p><p>magia do cinema e da animação digital é, em grande parte, um produto da capacidade de transformar</p><p>conceitos abstratos em imagens vívidas e emocionantes. Profissionais especializados utilizam ferramentas</p><p>avançadas para ajustar a iluminação, as sombras, os efeitos especiais e as trilhas sonoras, criando</p><p>experiências que cativam o público e contam histórias de maneiras inovadoras e impactantes.</p><p>Além do entretenimento, a animação digital tem encontrado aplicações significativas em setores como</p><p>publicidade e marketing, como no banner da figura 8. Anúncios publicitários agora apresentam animações</p><p>incrivelmente detalhadas, em que produtos e serviços são apresentados de maneiras dinâmicas e</p><p>memoráveis. A capacidade de criar vídeos publicitários visualmente impressionantes aumenta</p><p>significativamente o impacto das campanhas de marketing, atraindo a atenção do público e deixando uma</p><p>marca duradoura na mente dos consumidores.</p><p>Figura 8 | Banner renderizado de campanha de marketing</p><p>Fonte: Freepik.</p><p>No campo da arquitetura e do design, a visualização tridimensional se tornou uma ferramenta essencial.</p><p>Arquitetos e designers utilizam recursos de renderização para transformar plantas e projetos em</p><p>representações visuais realistas e imersivas, nas quais o possível comprador visita e passeia por dentro da</p><p>casa, como na figura 9. Isso não apenas auxilia na apresentação de ideias aos clientes, mas também permite</p><p>a exploração de espaços antes mesmo de serem construídos. A capacidade de finalizar essas visualizações</p><p>com detalhes precisos, desde texturas de materiais até a iluminação ambiente, ajuda na tomada de decisões</p><p>informadas e na criação de espaços que são esteticamente agradáveis e funcionalmente eficientes.</p><p>Figura 9 | Projetos arquitetônicos imersivos renderizados</p><p>Fonte: Freepik.</p><p>Na educação, a animação digital e os recursos de renderização estão sendo cada vez mais incorporados para</p><p>criar ambientes de aprendizagem interativos e atraentes, tornando o processo de Ensino aprendizagem mais</p><p>significativo para uma geração que já nasce com a tecnologia em suas mãos. Aulas e conteúdos educacionais</p><p>são enriquecidos com animações que tornam conceitos complexos mais acessíveis e envolventes para os</p><p>alunos por meio de lousas digitais e softwares de animação, como na figura 10. Além disso, a finalização</p><p>cuidadosa dessas animações contribui para a clareza e compreensão, facilitando a absorção do conhecimento</p><p>de forma eficaz.</p><p>Figura 10 | Sala de aula com lousa digital</p><p>Fonte: Freepik.</p><p>É fundamental que você perceba que os recursos de renderização e finalização na animação digital não são</p><p>apenas ferramentas técnicas, mas sim habilidades transformadoras que moldam o panorama do trabalho</p><p>moderno. Profissionais que dominam essas técnicas têm a capacidade não apenas de criar visualizações</p><p>impressionantes, mas também de comunicar ideias complexas de maneira eficaz, estimular a criatividade e</p><p>contar histórias de formas inovadoras. À medida que a tecnologia continua a avançar, a habilidade de aplicar</p><p>esses recursos se torna uma vantagem competitiva valiosa, capacitando você a prosperar em um mundo onde</p><p>a criatividade, a inovação e a comunicação visual são essenciais.</p><p>VIDEO RESUMO</p><p>Olá, estudante!</p><p>Neste vídeo iremos apresentar os diferentes tipos de renderização e suas aplicações práticas, tanto para</p><p>animações, como para campanhas publicitárias e outros campos do mundo do trabalho. Atualmente, a</p><p>renderização é utilizada por diferentes campos que estão em plana expansão, como os jogos digitais. Desta</p><p>forma, iremos demonstrar a relevância</p><p>desse conhecimento para sua vida profissional.</p><p>Saiba mais</p><p>Olá, estudante!</p><p>Acreditando que o conhecimento deve ocorrer em continuidade, fazemos aqui algumas sugestões de leitura</p><p>que podem complementar o conteúdo apresentado nesta aula.</p><p>- - Uma nova realidade: renderização cinematográfica para reconstruções tridimensionais da parede</p><p>torácica: A tomografia computadorizada com os múltiplos detectores e o avanço dos processadores</p><p>melhoraram as imagens renderizadas e as reconstruções tridimensionais na prática clínica. Os cortes axiais</p><p>tradicionais formam imagens não intuitivas, pois são vistas em apenas um plano. Já as reconstruções</p><p>tridimensionais podem exibir detalhes anatômicos em diferentes perspectivas das estruturas e de doenças</p><p>com anatomia complexa. A renderização cinematográfica é uma técnica de reconstrução tridimensional</p><p>recentemente introduzida, já aprovada para uso clínico, que pode produzir imagens realistas a partir de</p><p>dados tradicionais da tomografia computadorizada.</p><p>- Renderização Baseada em Imagens: O trabalho apresentado nesta pesquisa pertence, em parte, à área da</p><p>computação gráfica denominada de renderização baseada em imagens. Esta área tem como objetivo</p><p>representar um cenário completo ou objetos que façam parte dele a partir de imagens, ao invés de elementos</p><p>geométricos.</p><p>- Renderização em tempo real e interatividade no sistema videográfico: A conexão arte e tecnologia</p><p>permite a criação de narrativas audiovisuais interativas associadas a imagens em movimento e interfaces</p><p>midiáticas. Ressaltamos aqui experiências em vídeo nas quais o artista concede ao interator a possibilidade</p><p>de influenciar e provocar modificações na obra e para tanto, utilizam a renderização de vídeo em tempo real,</p><p>que proporcionam maior independência ao interator para este fazer escolhas capazes de criar uma narrativa</p><p>diferente, resultante da não linearidade e da multiplicidade de ações e reações do interator, cuja experiência</p><p>videográfica, programada para interatuar em tempo real, é provocada pela complexidade do sistema vídeo na</p><p>cultura digital.</p><p>Aula 5</p><p>REVISÃO DA UNIDADE</p><p>CRIAÇÃO EM MOTION GRAPHICS</p><p>Olá, estudante!</p><p>Nesta unidade procuramos apresentar que, na base da criação em Motion Design (Design do Movimento),</p><p>repousa a habilidade de desenvolver elementos gráficos cativantes. Isso engloba a compreensão profunda de</p><p>softwares como Adobe Illustrator, Photoshop, After Effects entre outros, permitindo a manipulação criativa</p><p>de formas, cores e texturas. A destreza na criação de ilustrações vetoriais é crucial, pois elas garantem a</p><p>flexibilidade necessária para as animações. Sem dúvida, Motion Design é uma disciplina que combina</p><p>design gráfico e animação para criar conteúdo visual dinâmico. Ele é amplamente utilizado em filmes,</p><p>publicidade, vídeos explicativos e até mesmo em interfaces de usuário interativas. No âmbito do Motion</p><p>Graphics (Gráficos em Movimento), é vital entender como elementos gráficos podem ser animados para</p><p>contar histórias de forma envolvente, enquanto atendem aos objetivos de comunicação visual do projeto.</p><p>Essa manipulação a qual nos referimos envolve não apenas a animação fluida de elementos, mas também a</p><p>aplicação de efeitos visuais que agregam profundidade e realismo. Conhecimento de técnicas</p><p>como keyframing (enquadramento chave), easing (facilitador) de câmera são cruciais. Além disso, a</p><p>habilidade de aplicar máscaras e transições suaves é essencial para criar animações coesas e atraentes para o</p><p>espectador, trazendo-o para a realidade criada pelos efeitos visuais em jogos digitais ou mesmo em</p><p>campanhas publicitárias. Para isso, a composição se torna uma arte de organizar elementos em uma cena de</p><p>forma visualmente atraente. Isso inclui a compreensão da hierarquia visual, equilíbrio, escala e profundidade</p><p>de campo. O uso eficaz de tipografia e ícones que também desempenha um papel fundamental na</p><p>composição, pois eles comunicam mensagens de maneira clara e estilizada.</p><p>Quando utilizamos as camadas de ajuste, estas permitem a aplicação de efeitos a várias camadas sem a</p><p>necessidade de afetar cada camada individualmente. Isso economiza tempo e proporciona uma maior</p><p>flexibilidade criativa. Quanto à exportação, o After Effects oferece uma variedade de opções, desde</p><p>formatos comuns como MP4 e MOV (A extensão de arquivo MP4 representa o formato MPEG-4 parte 14,</p><p>que é como padrão internacional de compressão de vídeo e áudio. Já a extensão de arquivo MOV é uma</p><p>extensão de arquivo usada para identificar arquivos de vídeo em formato QuickTime) até configurações</p><p>personalizadas para atender às exigências específicas de qualidade e tamanho do arquivo. A escolha do</p><p>formato de arquivo é crucial para garantir a qualidade da animação. Formatos como GIF (Graphics</p><p>Interchange Format ou Formato de Intercâmbio de Gráficos), são ideais para animações simples, enquanto o</p><p>formato MOV preserva a qualidade em animações mais complexas. Além disso, a sincronização precisa de</p><p>áudio é fundamental para criar uma experiência envolvente com o espectador. Isso inclui a habilidade de</p><p>ajustar o tempo das animações para coincidir perfeitamente com os elementos sonoros.</p><p>Para finalizar uma produção ou projeto, as opções de renderização no After Effects oferecem controle sobre</p><p>aspectos como qualidade, resolução e profundidade de cor. Compreender algoritmos de renderização é</p><p>crucial para otimizar o desempenho do sistema, especialmente em projetos complexos. Recursos de</p><p>renderização, como o uso eficaz da GPU (Graphics Processing Unit ou Unidade de Processamento Gráfico),</p><p>aceleram o processo, permitindo a visualização rápida das alterações feitas. Dominar esses fundamentos é</p><p>essencial para qualquer aspirante a profissional de Motion Design. À medida que a demanda por conteúdo</p><p>visual dinâmico continua a crescer, a expertise nessas áreas não só permite criar animações impressionantes,</p><p>mas também abre portas para uma variedade de oportunidades criativas e profissionais. Com dedicação e</p><p>prática contínua, você poderá desenvolver habilidades excepcionais em Motion Design, se tornando um</p><p>mestre na arte de contar histórias visualmente impactantes.</p><p>REVISÃO DA UNIDADE</p><p>Neste vídeo será apresentado a você os principais tópicos desenvolvidos em toda a unidade, de que maneira</p><p>você poderá aplicar os conhecimentos adquiridos em sua trajetória profissional, bem como exemplos de</p><p>projetos e aplicações do uso de softwares, tanto no motion graphics, no motion design e na renderização de</p><p>projetos.</p><p>ESTUDO DE CASO</p><p>O mercado está sempre em busca de profissionais competentes, talentosos, e você se enquadra perfeitamente</p><p>nestas características, sendo um entusiasta do mundo do design, que mergulhou nos fundamentos do Motion</p><p>Design, absorvendo os conhecimentos essenciais sobre criação de elementos gráficos cativantes e</p><p>habilidades em softwares como Adobe Illustrator, Photoshop e After Effects. Recentemente formado, você</p><p>adentrou no competitivo mercado de Motion Design, ansioso para aplicar suas habilidades recém-adquiridas,</p><p>e foi contratado pela “Design Animation” (nome fictício) para desenvolver um novo projeto.</p><p>Nesse projeto desafiador, você enfrentou uma situação em que precisava criar uma animação envolvente</p><p>para uma campanha publicitária interativa. O cliente em questão buscava algo mais do que simples</p><p>animações; ele queria uma experiência visual que contasse uma história de forma criativa e atraente. De</p><p>imediato, você recorreu aos seus aprendizados sobre a manipulação de imagens e como tornar a animação</p><p>que o cliente buscava uma experiencia visual atraente ao espectador. Não poderia se esquecer do áudio e da</p><p>finalização do projeto de animação, questões primordiais em um trabalho de qualidade em Motion Graphics.</p><p>Só faltava agora dar o início ao processo.</p><p>Reflita</p><p>Você acredita que, nesse cenário desafiador do mercado de trabalho, aplicando os fundamentos do Motion</p><p>Design que aprendeu, e demonstrando criatividade e habilidade técnica, conseguirá se destacar como um</p><p>profissional competente no seu futuro campo de trabalho?</p><p>RESOLUÇÃO DO ESTUDO DE CASO</p><p>Seu primeiro passo foi utilizar a manipulação fluida de elementos, começando a animar os gráficos,</p><p>aplicando técnicas avançadas como keyframing e easing. Posteriormente, utilizou máscaras e transições</p><p>suaves para criar uma narrativa visual coesa, integrando elementos gráficos e texto de maneira harmoniosa.</p><p>No momento de inserir os desafios de áudio, você queria demonstrar sua habilidade ao sincronizar</p><p>perfeitamente o tempo das animações com os elementos sonoros, criando uma experiência envolvente para o</p><p>espectador. Também fez questão de aplicar camadas de ajuste de forma inteligente, economizando tempo e</p><p>proporcionando maior flexibilidade criativa, afinal era seu primeiro projeto, era necessário mostrar todo seu</p><p>conhecimento adquirido.</p><p>Quando chegou a hora de exportar o projeto, você escolheu cuidadosamente o formato de arquivo adequado,</p><p>garantindo a qualidade da animação. Lembrou da importância de sincronizar áudio e vídeo, proporcionando</p><p>uma experiência audiovisual imersiva para o espectador, focando em apresentar isso ao cliente no momento</p><p>da apresentação do projeto.</p><p>Finalmente chegou à parte final: a renderização. Utilizando seus conhecimentos sobre algoritmos de</p><p>renderização e recursos de renderização para otimizar o desempenho do sistema, garantiu uma visualização</p><p>rápida das alterações feitas. Finalizou o projeto com maestria, entregando uma animação visualmente</p><p>impactante que não só atendeu, mas também superou as expectativas do cliente.</p><p>Seu empregador, satisfeito com o resultado apresentado por você, lhe deu parabéns por sua dedicação</p><p>contínua e domínio das técnicas essenciais, que não apenas garantiram seu sucesso neste projeto, mas</p><p>também abriram portas para uma carreira promissora, mostrando que com paixão, prática e conhecimento, é</p><p>possível enfrentar qualquer desafio no dinâmico mundo do Motion Design.</p><p>RESUMO VISUAL</p><p>Fonte: elaborado pelo autor.</p><p>(visual style guide), para</p><p>auxiliar os artistas de desenvolvimento, composto por: desenhos-modelos (model-sheets) de personagens,</p><p>cenários e objetos e o rigging (divisão de personagem em partes) para cada personagem que pode ser</p><p>proposto.</p><p>2. Criação do Storyboard:</p><p>É a representação do roteiro descritivo, dos quadros individuais desenhados, como uma história em</p><p>quadrinhos, e organizados na sequência da progressão da história. Possibilita a compreensão das principais</p><p>ações dos personagens, composição de cenários e objetos. Inicia-se por esboços miniaturas (thumbnails). Por</p><p>meio de reuniões de brainstorms e storyboard pitch, melhora-se o roteiro, as ações dos personagens, sendo</p><p>refeitos os esboços até se chegar na aprovação do storyboard final (Figura 5).</p><p>Figura 4 | Exemplo de storyboard</p><p>Fonte: Wikimedia Communs.</p><p>3. Gravação do som guia:</p><p>Diretores, artistas e animadores realizam as som-guias preliminares para estabelecer melhor ritmo e</p><p>montagem de pré-visualização do projeto. Isso permite revisar o texto e melhorá-lo antes das gravações</p><p>finais, que são feitas em estúdio e com atores profissionais.</p><p>4. Desenvolvimento do Animatic:</p><p>É uma versão completa do storyboard, com vozes e música temporária, e permite visualizar todos os</p><p>elementos tomando forma. O editor consegue estabelecer um ritmo de narrativa, tendo uma animação</p><p>preliminar que guiará a produção original (Figura 6).</p><p>Figura 5 | Exemplo de Animatic</p><p>Fonte: Wikimedia Communs.</p><p>5. Determinação dos diálogos definitivos:</p><p>Atores são selecionados pelos produtores para interpretar e dar voz aos personagens. São realizados ensaios,</p><p>ajustando-se o tom e o ritmo da história. Recebem roteiro e descritivo de ações para interpretarem. A</p><p>construção psicológica de cada personagem é realizada (Figura 7).</p><p>Etapas da Produção da Animação</p><p>1. Modelagem:</p><p>Compreende a elaboração do livro de trabalho (workbook) – livro técnico que define ângulos das cenas,</p><p>enquadramento, composição, iluminação e efeitos de transição; é a etapa de diagramação do projeto (layout)</p><p>– proporção de personagens, efeitos visuais e detalhes de cenários são feitos.</p><p>2. Animação:</p><p>É a essência do ato de animar e costuma ser dividida em 3 partes:</p><p>• animação de personagens: feita utilizando as fichas-modelo, ou model sheets, que possuem informações</p><p>sobre características visuais e psicológicas dos personagens. Veremos mais detalhes na aula de design de</p><p>personagens;</p><p>• animação assistente: a animação assistente é desenvolvida por animadores especializados que se</p><p>concentram em criar movimentos secundários, como cabelos ao vento, capas balançando ou folhas caindo.</p><p>Cada movimento é desenhado meticulosamente, garantindo que a animação seja fluida e natural.</p><p>• animação de efeitos especiais: são um verdadeiro espetáculo artístico - da chuva caindo ao fogo</p><p>crepitante, esses efeitos são criados desenhando cada elemento individualmente, quadro por quadro.</p><p>As equipes de desenvolvimento trabalham em cooperação para obterem os melhores resultados para a</p><p>animação (Figura 8).</p><p>Figura 6 | Exemplo de produção de animação</p><p>Fonte:Wikimedia Communs.</p><p>3. Efeitos especiais:</p><p>São aplicados às cenas em um departamento específico, que anima tudo, e que não se refere aos</p><p>personagens, mas às cenas e objetos, trazendo mais realismo.</p><p>4. Pintura:</p><p>Por meio de processos de estilização da cor, marcação de pintura e tintura, cada imagem da cena é realizada.</p><p>Etapas de Pós-produção da Animação:</p><p>1. Edição do filme:</p><p>Inicia-se a transferência das cenas digitais para a película de filme. A montagem recebe ajustes finos, a trilha</p><p>e os efeitos sonoros finais. O projeto é trancado (Locking Picture), não recebe mais nenhum tipo de edição</p><p>(Figura 9).</p><p>Figura 7 | Curta-metragem chamado “Cosmos Laudromat”, na etapa de Locking Picture</p><p>Fonte: Wikimedia Communs</p><p>2. Mixagem final:</p><p>Adicionam-se os últimos efeitos especiais e o produtor providencia a produção dos créditos, a abertura e o</p><p>fechamento para a mixagem final.</p><p>PRINCIPAIS TÉCNICAS EMPREGADAS E MERCADO DA ANIMAÇÃO</p><p>TRADICIONAL</p><p>Neste bloco, veremos as principais técnicas empregadas na Animação Tradicional e como elas são utilizadas</p><p>no mercado profissional.</p><p>Célula:</p><p>É uma técnica em que se desenham as partes de uma cena em folhas de acetato diferentes, ou seja, o plano</p><p>de fundo, os objetos e personagens são desenhados em folhas diferentes que depois são sobrepostas para</p><p>formar uma cena (Figura 10).</p><p>Figura 8 | Earl Hurd (EUA, 1914), inventor da técnica de animação por célula, e um exemplo de como ela</p><p>era utilizada para fazer os desenhos animados</p><p>Fonte: RIBEIRO, Marcelo. Animação Tradicional (2D): Acetato e multiplano. 4 de mar. 2010.</p><p>Fotografando em pares:</p><p>Os movimentos são fotografados em pares, com um desenho sendo apresentado a cada 2 quadros, ou seja,</p><p>normalmente temos 24 quadros por segundo e com esta técnica se reduz para 12 por segundo. A taxa de</p><p>atualização é reduzida, mas a fluidez é satisfatória. Geralmente esta técnica é utilizada para reduzir custos de</p><p>produção. São muito utilizadas para produções de TV com baixo orçamento e em animes japoneses.</p><p>Animação em ciclos:</p><p>Nesta técnica, muito utilizada em jogos 2D, é feita animação por quadros em posições diferentes do objeto</p><p>ou personagem, que se repetem em ciclo ou loop para dar a sensação de movimento contínuo. Essa técnica</p><p>pode ser usada para realizar o caminhar dos personagens ou até o balançar das árvores, no cenário (Figura</p><p>11).</p><p>Figura 9 | Exemplo de animação em ciclo ou “loop” para ser utilizada no andar do personagem</p><p>Fonte: WEEBLY.</p><p>Câmera multiplano:</p><p>É utilizada para dar um efeito de profundidade em cenas nos seriados e filmes 2D. O desenho é colocado em</p><p>vidro e a câmera é movimentada, no eixo vertical, se afastando da arte, dando a impressão de se mover</p><p>através de várias camadas no espaço 3D (Figura 12).</p><p>Figura 11 | Câmera de múltiplos planos</p><p>Fonte: FREITAS, Mariana Ferreira de. Fundamentos e técnicas da animação 2D. 1. ed. Curitiba, PR:</p><p>Intersaberes, 2023. E-book.</p><p>Xerografia:</p><p>Nesta técnica, os desenhos repetidos nas cenas são fotocopiados em cima das células, reduzindo bastante o</p><p>processo de pintura, tornando a elaboração dos desenhos mais rápida, reduzindo tempo e custo da animação.</p><p>Ela foi evoluindo com o passar dos anos.</p><p>Processo APT:</p><p>APT significa Animation Photo Transfer ou transferência da arte em células. É bem parecida com a</p><p>Xerografia, mas o trabalho dos artistas é fotografado em fotolito de alto contraste (fotolito é uma folha</p><p>transparente e resistente à luz, feita de poliéster com alta diferença entre áreas escuras e áreas claras do</p><p>desenho, por isso diz-se que possui alto contraste), podendo ser transferido para outras cenas através de uma</p><p>imagem negativa dele.</p><p>Animação Digital</p><p>A animação foi evoluindo junto com as novas tecnologias que surgiram a partir do computador. Atualmente</p><p>é possível utilizar mesas digitalizadoras (Figura 13) e outros dispositivos similares, nos quais são realizadas</p><p>as artes de forma muito semelhante à feita em papel. Elimina-se, assim, a necessidade de fotografar.</p><p>Figura 10 | Mesa Digitalizadora</p><p>Fonte: ABC Acessórios.</p><p>Quando se misturam técnicas de animação tradicional com recursos digitais, nós temos o que o executivo do</p><p>estúdio norte-americano DreamWorks, Jeffrey Katzenberg, chamou de "animação tradigital". Muitos filmes</p><p>utilizam essa técnica para trazer o melhor dos dois mundos para a animação. Podemos citar um exemplo</p><p>disso a partir do filme “Spirit: o corcel indomável” produzido em 2002 pela DreamsWorks. Muitos jogos de</p><p>videogame, tais como Viewtiful Joe, The Legend of Zelda (Figura 13) misturam técnicas de animação 3D</p><p>com as técnicas mais tradicionais, como as citadas nesta aula.</p><p>Figura 11 | Vigeogame The Legend of Zelda</p><p>Fonte: Wikimedia Communs.</p><p>VÍDEO RESUMO</p><p>Nesta videoaula, iremos rever as três fases do processo de produção da animação</p><p>tradicional e suas</p><p>principais etapas e técnicas. Entenderemos técnicas como: storyboard, animatic, modelagem, gravação e</p><p>edição de áudio, animação e a mixagem final, que são superimportantes e seguem uma ordem específica</p><p>para garantir a qualidade e o cronograma de um projeto de animação. Veremos também as principais</p><p>técnicas de animação aplicadas ao mercado profissional. Venha comigo para aprofundar ainda mais seus</p><p>conhecimentos na Animação Tradicional.</p><p>Saiba mais</p><p>Olá, estudante!</p><p>Para complementação do assunto abordado nesta aula, é interessante que você realize a leitura da dissertação</p><p>de Mestrado de Nelson Caramico, “Design de Produção na Animação Tradicional e na Realidade Virtual</p><p>360” (UAM, 2020). Ela vai te ajudar a ter outras perspectivas sobre a importância da animação digital em</p><p>sua vida profissional.</p><p>Para entender e complementar seu conhecimento sobre as diversas etapas das 3 fases do processo de</p><p>produção, recomendo a leitura do livro intitulado “Fundamentos e técnicas da animação 2D”, escrito por</p><p>Mariana Ferreira de Freitas. Este livro encontra-se disponível em nossa Biblioteca Virtual.</p><p>Aula 3</p><p>ROTEIRO PARA ANIMAÇÃO</p><p>Nesta aula, veremos como construir um roteiro para uma animação. Veremos que,</p><p>antes de se começar a produção da animação em si, é preciso definir e desenvolver</p><p>a ideia ou visão dos produtores, dando corpo ao projeto.</p><p>INTRODUÇÃO</p><p>Olá, estudante!</p><p>Nesta aula, veremos como construir um roteiro para uma animação. Veremos que, antes de se começar a</p><p>produção da animação em si, é preciso definir e desenvolver a ideia ou visão dos produtores, dando corpo ao</p><p>projeto. Por meio de materiais visuais e escritos a serem desenvolvidos, é possível solidificar o projeto, fazer</p><p>o roteiro e o planejamento, para então seguir para as fases de produção da animação. Essa fase inicial é</p><p>conhecida como Desenvolvimento da Ideia, e servirá de insumo para o processo de produção da animação.</p><p>Então, conheceremos a fase de Desenvolvimento da Ideia, que culmina na criação do roteiro, entendendo</p><p>sua conexão direta com a criação do storyboard (representação visual do roteiro) e do animatic (versão</p><p>prévia da animação). Aprofundaremos nossos conhecimentos nessas etapas tão importantes do</p><p>desenvolvimento da animação.</p><p>Vamos começar!</p><p>DESENVOLVIMENTO DA IDEIA</p><p>Neste bloco, conheceremos a fase inicial de um projeto de animação, conhecida como Desenvolvimento da</p><p>Ideia. Nela, surgem os primeiros registros escritos, visuais e o roteiro, que irão auxiliar no processo de</p><p>produção da animação.</p><p>Nesta fase, tem-se apenas uma ideia ou visão de um projeto de animação. É onde se transforma a ideia em</p><p>algo executável, construindo uma narrativa, para poder, então, produzir a animação. As tarefas executadas</p><p>aqui são muito importantes para o planejamento da produção, a definição de público-alvo, o método de</p><p>produção, os softwares utilizados, a linguagem narrativa e o perfil dos personagens. Além disso, cria-se o</p><p>roteiro que norteará todas as fases do processo de produção. Ela é dividida em 3 etapas: demanda</p><p>projetual, desenvolvimento criativo e complexidade do projeto.</p><p>Demanda Projetual</p><p>É a etapa de realização do planejamento do projeto, em que são definidas a finalidade da animação (internet,</p><p>TV, jogos etc.), o público-alvo e a faixa-etária, o orçamento, o cronograma da animação, a duração, o</p><p>número de personagens, os cenários, os prazos e as técnicas (2d, 3d, stop-motion etc.).</p><p>Desenvolvimento Criativo</p><p>Marca o início da elaboração dos materiais do projeto, desenvolvendo-se a narrativa e as primeiras</p><p>representações visuais. A narrativa da animação se inicia com a premissa, que consiste na criação de alguns</p><p>parágrafos que vão resumir a história principal, com os personagens, o conflito base, e como o embate é</p><p>resolvido.</p><p>Depois disso, desenvolve-se o argumento, dando forma à história. Ele é mais detalhado, mais dramático e</p><p>deve inspirar os sentimentos, as emoções e as reviravoltas do roteiro. Neste momento, todos os personagens</p><p>e acontecimentos mais importantes são explanados para o enredo. Deve ser escrito em prosa, discurso direto</p><p>e no tempo presente. Deve ter leitura simples e agradável.</p><p>Com o argumento escrito, é preciso estruturar a escaleta, que é o “esqueleto” do roteiro, um resumo de cada</p><p>cena para descrever como a história irá se desenvolver. Ajuda a montar a ordem das cenas no projeto,</p><p>acertando seu ritmo. Não existe padrão, mas é comum incluir cabeçalho com título da cena, uma rápida</p><p>descrição da situação e a ação que o personagem irá fazer. Auxilia na construção do arco dramático (jornada</p><p>emocional do personagem, desde sua introdução até a transformação, passando por desafios e aprendizados)</p><p>e subtramas (narrativas secundárias que se entrelaçam com a história principal).</p><p>Após essas atividades, pode-se criar o roteiro, no qual são colocados os detalhes da história, ligando uma</p><p>cena à outra e incluindo direcionamentos para outros departamentos. Cada página deve corresponder a um</p><p>momento específico.</p><p>Existem softwares e diversos manuais que ajudam na formatação e padronização de roteiros. O mais usado</p><p>por roteiristas profissionais é o Final Draft (desenvolvido pela Final Draft, Inc). Mas é possível usar</p><p>softwares mais simples como: Celtx (criado pela Celtx Inc.) ou Story Writer (desenvolvido pela Amazon),</p><p>que são gratuitos.</p><p>Em paralelo à produção da narrativa/roteiro, é feito o desenvolvimento visual da obra, em que se define o</p><p>estilo de traço e o movimento da animação. Define-se também a criação de personagem e cenário.</p><p>Análise de Complexidade do projeto</p><p>Nesta etapa, verifica-se e analisa-se a viabilidade do projeto. São levantadas todas as etapas e custos e, se</p><p>necessário, são feitas adequações no planejamento do projeto. São feitos nesta etapa o planejamento das</p><p>fases de produção, a definição de profissionais, os ajustes no orçamento e no cronograma do projeto.</p><p>Exemplo Prático: O Rei Leão</p><p>Vamos aplicar as etapas de Desenvolvimento da Ideia em uma animação icônica, O Rei Leão.</p><p>Demanda Projetual:</p><p>A Disney definiu a finalidade - para cinema, estabelecendo um orçamento substancial. O público-alvo:</p><p>crianças e suas famílias. O projeto envolvia um grande número de personagens e cenários, além de exigir</p><p>técnicas avançadas de animação 2D.</p><p>Premissa:</p><p>No mundo africano dos animais, Simba, um jovem leão, enfrenta desafios após a morte de seu pai, Mufasa.</p><p>Ele precisa superar a culpa e encontrar seu lugar como rei, aprendendo sobre responsabilidade e identidade.</p><p>Argumento:</p><p>O argumento desenvolve a história com mais detalhes. Simba é banido por seu tio Scar, que usurpa o trono.</p><p>No exílio, Simba faz amigos e descobre seu destino como rei. Ele retorna, enfrenta Scar e restaura a paz à</p><p>Terra dos Leões.</p><p>Escaleta:</p><p>Cada cena é estruturada na escaleta: Simba foge, encontra Timão e Pumba, aceita seu destino como rei,</p><p>confronta Scar. Cada momento é planejado para manter o ritmo da narrativa.</p><p>Roteiro (Resumido):</p><p>A jornada de Simba, desde a infância até a maturidade, é detalhada, com diálogos e direcionamentos para</p><p>animadores e artistas de storyboard.</p><p>Análise de Complexidade:</p><p>A equipe avalia a viabilidade técnica e financeira. Com as etapas definidas, o projeto é ajustado para garantir</p><p>um fluxo de trabalho eficiente e dentro do orçamento.</p><p>Espero que este exemplo prático ajude você a visualizar como essas fases se aplicam em uma animação</p><p>real.</p><p>ROTEIRO E STORYBOARD</p><p>Você aprendeu no bloco anterior sobre a fase inicial de desenvolvimento de um projeto de animação, que</p><p>consiste no Desenvolvimento da Ideia, fase em que teremos como produto principal o roteiro da animação.</p><p>Ele servirá de base para o storyboard, na fase de Pré-produção.</p><p>Durante a fase de Pré-produção, temos a junção de todos os materiais escritos e visuais produzidos até então,</p><p>para a criação de novos materiais que serão essenciais para a fase de Produção. Os principais produtos</p><p>desta</p><p>etapa são: storyboard e animatic. Neste bloco, aprofundaremos nosso aprendizado sobre o roteiro e</p><p>o storyboard, e a estreita relação existente entre eles. No próximo bloco focaremos nossa atenção</p><p>no animatic. Então, vamos lá!</p><p>Roteiro:</p><p>Como vimos anteriormente, a criação do roteiro ocorre na fase de Desenvolvimento da Ideia, após os</p><p>produtores terem escrito a premissa, o argumento e a escaleta. Com esses elementos, conseguimos montar</p><p>nosso roteiro.</p><p>O argumento traz detalhes da história, com sentimentos, emoções e reviravoltas, também apresenta os</p><p>personagens envolvidos no enredo. É um esboço para fazer o roteiro. Já a escaleta será o esqueleto do</p><p>roteiro, é uma ferramenta superimportante para auxiliar o roteirista a montar a ordem das cenas do filme,</p><p>dando ritmo à animação.</p><p>A partir do argumento e da escaleta, o roteirista consegue fazer os diálogos e montar o roteiro. Neste</p><p>momento, tem-se a oportunidade de adicionar as descrições e os detalhes da história, conectando uma cena à</p><p>outra e fazendo recomendações para os diversos departamentos que farão a animação.</p><p>Há diversos padrões de formatação para a escrita do roteiro profissional, sendo importante segui-los para ter</p><p>maior credibilidade no mercado. O mais comumente utilizado, principalmente para filmes, é</p><p>chamado Master Scenes (cenas mestras), que permite que cada minuto da animação seja representado em</p><p>uma página, fazendo o roteirista ter uma melhor noção do tempo.</p><p>Atualmente, temos diversos manuais que explicam como criar e padronizar os roteiros e existem softwares</p><p>que fazem isso automaticamente. Um dos mais usados por roteiristas profissionais é o Final Draft, mas para</p><p>profissionais que estão começando é indicado utilizar softwares mais simples e gratuitos, como o CeltX e o</p><p>Story Writer.</p><p>Storyboard</p><p>O storyboard é a representação visual do roteiro. Trata-se de uma ferramenta feita para programação</p><p>ordenada do plano de filmagem quadro a quadro ou tomada a tomada. Observa-se a disposição de elementos</p><p>representando uma narrativa no tempo, com diversas características de formatação das histórias em</p><p>quadrinhos.</p><p>Deve ser iniciado por desenhos em miniaturas que mostram a distribuição dos personagens e os elementos</p><p>em cena (chamados de thumbnails - miniaturas). Tais desenhos não trazem muitos detalhes, são mais</p><p>genéricos e parecem um esboço (Figura 1).</p><p>Conforme se avança na Pré-produção, vão sendo adicionados mais detalhes em cada quadro, como</p><p>expressões faciais, indicação de efeitos de iluminação ou efeitos de cena, para dar clareza maior na leitura da</p><p>ação do personagem, fazendo com que o animador saiba o que deve ser feito. Ele permite que cineastas e</p><p>animadores tomem decisões criativas sobre o visual da animação, sobre a fluidez da narrativa e efeitos</p><p>visuais.</p><p>Figura 1| Exemplo de thumbnails</p><p>Fonte: VIEIRA, Otávio Esser et al. PRODUÇÃO INDEPENDENTE DE ANIMAÇÃO 2D: utilizando</p><p>recursos para otimização de produção. 2018.</p><p>ANIMATIC</p><p>Neste bloco, estudaremos a etapa de criação do animatic. Sabendo que já foi feito e aprovado o storyboard,</p><p>e que foram feitas gravações prévias de som de personagens e sons ambientes, é possível fazer o animatic.</p><p>O animatic faz parte ainda da fase de Pré-produção, mas dará suporte para a fase de Produção. É</p><p>desenvolvido a partir do storyboard, sendo considerada uma versão prévia da animação, em que se utilizam</p><p>as imagens do storyboard para criar uma sequência em movimento, adicionando-se áudio com diálogos,</p><p>música e efeitos sonoros feitos de forma improvisada, apenas para se entender a dinâmica de cada cena.</p><p>É uma ferramenta crucial para analisar a distribuição dos tempos da animação, entender como a narrativa</p><p>fluirá, e como está indo o projeto em fase inicial. Pode incluir efeitos de câmera, movimentos de</p><p>personagens, elementos visuais e sonoros, que são decisivos para colocar em prática e ter noção se o</p><p>planejamento está sendo cumprido até aqui.</p><p>O diretor de arte terá a oportunidade de entender o tempo e o ritmo da narrativa, e fazer ajustes, se houver</p><p>necessidade. Cada cena pode ser enumerada, servindo de apoio para separação de sequências nas próximas</p><p>etapas do processo de produção. Se o storyboard não estiver compatível, ele pode ser excluído e novos</p><p>quadros e cenas podem ser adicionados, se for necessário.</p><p>Outra característica importante do animatic é a temporização aproximada para cada quadro, indicando a</p><p>duração das cenas e o ritmo da narrativa. Além disso, pode ser revisado e ajustado várias vezes para que a</p><p>história fique clara e coesa. Pode proporcionar economia de recursos por permitir ter uma prévia da</p><p>animação e ver o que precisa ser modificado para se atingir os objetivos.</p><p>Com a produção final do animatic (Figura 2), começa a escolha do elenco principal de vozes que serão</p><p>utilizadas na mixagem final do projeto. Finalizado o animatic, é possível ter um panorama geral das</p><p>necessidades que a produção da animação terá, sabendo que nele estão ilustradas a quantidade exata de</p><p>personagens, a complexidade de cada movimento, a quantidade de props (que explicaremos melhor a seguir)</p><p>e cenários, e também os efeitos visuais que serão utilizados no projeto (VIEIRA, 2018).</p><p>Figura 2 | Exemplo de animatic</p><p>Fonte: VIEIRA, Otávio Esser et al. PRODUÇÃO INDEPENDENTE DE ANIMAÇÃO 2D: utilizando</p><p>recursos para otimização de produção. 2018.</p><p>Vamos entender melhor o que são props. O termo vem de uma abreviação de “propriedades”, ou objetos de</p><p>cena. São elementos físicos usados pelos personagens e fazem parte do cenário. Exemplo: em uma cena</p><p>ambientada em uma cozinha, os props podem incluir utensílios de cozinha, como: pratos, copos, talheres e</p><p>alimentos.</p><p>Em resumo, o animatic é uma representação visual e sonora da narrativa, que serve como uma etapa crucial</p><p>de planejamento na pré-produção de animações e filmes. Ele ajuda a equipe a entender como a história se</p><p>desenrolará na tela e permite fazer ajustes e melhorias antes de entrar na fase de produção completa.</p><p>VIDEO RESUMO</p><p>Nesta videoaula, veremos toda a fase inicial do projeto de animação, conhecida como Desenvolvimento da</p><p>Ideia, as suas principais etapas e sua importâncias para as demais fases do processo de produção da</p><p>animação. Veremos mais detalhadamente como é criado o roteiro, o storyboard e o animatic. Venha comigo</p><p>e aprenda ainda mais sobre os principais aspectos de desenvolvimento de um projeto de animação.</p><p>Saiba mais</p><p>Para que você entenda todo o processo de produção de uma animação, indico que faça a leitura o artigo</p><p>intitulado “É o surf: relato de produção de uma animação 2D independente.” Neste material, você irá</p><p>acompanhar todas as fases de produção de uma animação e entenderá como foram feitos o roteiro,</p><p>o storyboard e o animatic para o projeto.</p><p>Recursos de Roteiro ao Seu Alcance</p><p>Para começar sua jornada de designer roteirista, você pode encontrar o Final Draft, uma escolha popular,</p><p>desenvolvido pela Final Draft, Inc.</p><p>Além disso, o Celtx, uma opção gratuita e robusta, que foi criado pela Celtx Inc. Uma alternativa acessível é</p><p>o Story Writer, desenvolvido pela Amazon.</p><p>Essas ferramentas ajudarão você a dar vida às suas ideias com facilidade!</p><p>Desejo-lhe bons estudos!</p><p>Aula 4</p><p>DESIGN DE PERSONAGENS PARA ANIMAÇÃO</p><p>Nesta aula, aprenderemos como são criados os personagens, seus aspectos físicos e</p><p>emocionais, para dar vida à narrativa que está sendo desenvolvida para a</p><p>animação.</p><p>INTRODUÇÃO</p><p>Nesta aula, aprenderemos como são criados os personagens, seus aspectos físicos e emocionais, para dar</p><p>vida à narrativa que está sendo desenvolvida para a animação. Você conhecerá como se define as</p><p>personalidades dos personagens por meio dos arquétipos, como se constrói as principais características</p><p>psicológicas que irão fazer o público torcer pelo personagem principal e se encantar com a narrativa como</p><p>um todo.</p><p>Você verá como os aspectos visuais dos personagens, suas representações</p><p>gráficas, padrões e definições</p><p>ajudam a fazer a modelagem e a animação da narrativa. Conhecerá e entenderá as características principais</p><p>que darão embasamento à atuação de cada personagem e sua importância para o enredo da história.</p><p>Por fim, verá como são feitos e desenvolvidos os model sheets de cada personagem, sua importância na</p><p>criação da animação e seu resultado.</p><p>Vamos começar!</p><p>DESENVOLVIMENTO DE PERSONAGENS E SUAS PERSONALIDADES</p><p>Neste bloco, conheceremos o conceito de personagem, como é criado, sua personalidade e os tipos de</p><p>arquétipos que podemos utilizar. Entenderemos também sua importância para um projeto de animação.</p><p>Vamos lá?</p><p>Conceito:</p><p>O termo personagem surgiu do grego “persona”, e quer dizer máscara, ou forma como um indivíduo se</p><p>apresenta para a sociedade. Dentro de uma narrativa, é a personificação da ação, sendo responsável pelos</p><p>eventos e incidentes. É com o personagem, sua história e suas atitudes que o público da animação irá se</p><p>identificar.</p><p>1. Design de Personagens:</p><p>Ato de criar algo ou alguém, que desempenha, em algum ambiente ou contexto, crenças, reações ou</p><p>expectativas no público. Todo personagem é um indivíduo que se comporta, sente, age e pensa dentro do</p><p>universo da história da animação. Assim como no mundo real, em que todos temos nossa personalidade - um</p><p>pouco de vilão, tolo, santo, palhaço e rude - a representação dela pode ser impressa a partir de um ou mais</p><p>arquétipos, como veremos a seguir.</p><p>2. Arquétipo:</p><p>É um dos principais modelos utilizados para a construção psicológica dos personagens e suas</p><p>personalidades, que se baseia na psicologia arquetípica desenvolvida por Carl Jung. Carl Jung (1875-1961)</p><p>foi um renomado psicólogo suíço que desenvolveu a teoria dos arquétipos na psicologia analítica. Ele</p><p>acreditava que certos padrões de comportamento e personalidade são inerentes à humanidade, presentes em</p><p>nosso inconsciente coletivo. Esses arquétipos, como o herói, a sombra e o mentor, são reflexos universais de</p><p>emoções e experiências humanas compartilhadas.</p><p>Na criação de personagens para animação, compreender os arquétipos de Jung permite que os criadores</p><p>explorem a complexidade humana de maneiras autênticas e profundas. Iremos conhecer alguns desses</p><p>arquétipos básicos mais utilizados na construção de uma narrativa.</p><p>3. Herói: geralmente é o protagonista apresentado no início da narrativa, cuja principal característica é o</p><p>sacrifício pelo bem maior. Tende a possuir aspectos bem humanos e comuns, próximos aos do público. Será</p><p>“chamado para a aventura”, ou seja, normalmente ele (ou ela) passa por um evento que o “convoca” para a</p><p>aventura, como a perda de um ente querido, que transformará a sua vida; ou ser “escolhido” por algo ou</p><p>alguém, levando-o a passar por desafios ao longo de sua trajetória e se transformar, transcendendo os limites</p><p>impostos a ele e tornando seu mundo um lugar melhor. Ex.: Quando Peter Parker é picado pela aranha –</p><p>ganhando seus poderes - e perde o seu Tio Ben, morto por bandidos, percebe que “com grandes poderes,</p><p>vêm grandes responsabilidades”.</p><p>4. Mentor (ou sábio): personagem que ensina e protege o herói, dando-lhe conhecimentos e dons.</p><p>Representa a divindade que há em cada um de nós, ajudando o herói a ter as mais elevadas aspirações,</p><p>motivando-o em sua jornada de transformação.</p><p>5. Guardião: não é o principal vilão, mas colocará provas para o herói, testando suas capacidades de</p><p>enfrentar desafios. Pode ser capataz ou mercenário. Traz à história os obstáculos mais profundos que todos</p><p>enfrentamos em nossas vidas, tais como: medos, limitações e demônios internos que o herói precisa superar.</p><p>6. Aliado: auxilia o protagonista a seguir em frente e finalizar as tarefas mais difíceis de realizar sozinho.</p><p>Geralmente é do sexo oposto ao personagem principal. Sua característica principal é a mudança, pois o herói</p><p>tem dúvida de sua lealdade.</p><p>7. Arauto: representa mudanças e tem função de motivar o protagonista. Pode ser um personagem ou</p><p>apenas um acontecimento que aparecerá, geralmente, no início da jornada, lançando um desafio para o herói.</p><p>Anuncia a aventura que será vivida por ele.</p><p>8. Sombra: conhecido por ser o vilão, antagonista ou inimigo, representa o lado obscuro, o medo e todas as</p><p>características que não queremos demonstrar. Como vilão ou inimigo, se dedica a destruir o herói, por meio</p><p>de desafios e problemas. Como antagonista, pode ter os mesmos objetivos do herói, mas não concorda</p><p>plenamente ou disputa com ele.</p><p>9. Pícaro: palhaço ou figura cômica, traz o desejo de mudar o mundo de forma divertida, podendo colocar à</p><p>tona questões de hipocrisia e alertando os graves problemas que se passam por comuns na sociedade em que</p><p>é construída a narrativa.</p><p>Em resumo, a criação de personagens é um processo complexo que envolve diversos aspectos, como: os</p><p>arquétipos, a história de fundo e suas principais características que auxiliarão na fase de modelagem e</p><p>animação, e a manter a história cativante e envolvente para seu público. Concluindo, e voltando ao exemplo</p><p>do “Homem Aranha”, você consegue identificar exemplos para todos os 7 arquétipos vistos nessa aula?</p><p>DESIGN DE PERSONAGENS: ASPECTOS VISUAIS</p><p>Neste bloco, exploraremos os aspectos visuais dos personagens, suas representações gráficas, padrões e</p><p>definições que ajudam a fazer a modelagem e a animação da narrativa. A seguir veremos cada um desses</p><p>aspectos e como são escolhidos e desenvolvidos ao longo do processo de produção da animação.</p><p>Entidade ou Espécie:</p><p>São as diferentes formas que os personagens podem assumir. Existem diversos modelos de personagens,</p><p>criados sob o aspecto de criaturas mitológicas, monstros, robôs, animais ou até mesmo objetos. Quanto à</p><p>forma física, há uma classificação:</p><p>Humanoide: parece ou é igual ao ser humano (Figura 1);</p><p>Figura 1 | Exemplo de humanoide em animação</p><p>Fonte: Freepik.</p><p>Não-humanoide: outra configuração, como: animais, máquinas, monstros etc. (Figura 2);</p><p>Figura 2 | Exemplo de não-humanoide robô</p><p>Fonte: Freepik.</p><p>Híbridos: possuem características de duas categorias, como: centauros, sereias, androides etc. (Figura 3)</p><p>Figura 3 | Exemplo de híbrido centauro</p><p>Fonte: Freepik.</p><p>Gênero:</p><p>Independente do gênero, essa característica se refletirá em diversos aspectos na construção do personagem,</p><p>como: comportamento, aparência e relações com outros personagens. Os padrões de comportamento</p><p>também facilitam o relacionamento e a empatia com o público.</p><p>Silhueta:</p><p>É a forma básica e distintiva de personagens e objetos. Numa narrativa de animação, cada personagem</p><p>precisa ter uma silhueta bem definida, para que sua forma se diferencie dos outros personagens e também se</p><p>destaque do cenário e de outros objetos das cenas. Além de ajudar a definir sua pose e linguagem corporal,</p><p>peso, altura e até movimentos.</p><p>É necessário procurar referências e criar um repertório com variedade étnica e física, alterando as</p><p>características de cada personagem a ser criado. Uma silhueta memorável pode fazer com que o personagem</p><p>ou objeto se fixe na memória do espectador, e mesmo fora do contexto da história ele possa ser reconhecido</p><p>pelo público. Personagens memoráveis costumam ter silhuetas distintas e marcantes (Figura 4).</p><p>Figura 4 | Silhueta de personagem grávida</p><p>Fonte: Freepik.</p><p>Hipersexualismo:</p><p>Apesar de ser um tema polêmico, é importante abordarmos um pouco sobre isso, pois é usado de diferentes</p><p>formas na indústria da animação dos jogos. Essa característica ocorre mais em animação de jogos e</p><p>animações voltadas para adultos, em que se ressalta, nos aspectos físicos, características que os deixem</p><p>sensuais. É comum personagens masculinos apresentarem ombros largos, músculos bem desenvolvidos e</p><p>queixos proeminentes. Já as personagens femininas costumam ter seios avantajados, cintura fina e quadril</p><p>largo. A utilização desse aspecto influenciará na silhueta, na linguagem corporal e na vestimenta dos</p><p>personagens (Figura 5).</p><p>Figura 5 | Exemplo de hipersexualismo em animação de sereia.</p><p>Fonte: Freepik.</p><p>Realismo e Estilo:</p><p>O estilo de desenho simplificado, conhecido como cartonagem, apresenta a ideia mais geral dos</p><p>personagens, enquanto a representação realista é mais limitada a indivíduos específicos. Há uma liberdade</p><p>criativa para designers e artistas, mas que devem atender aos requisitos da produção da animação, bem como</p><p>as ferramentas que devem ser utilizadas em seu desenvolvimento.</p><p>Um exemplo notável de animação que ilustra a distinção entre realismo e estilo, especialmente usando a</p><p>técnica de cartonagem, é a série animada "Adventure Time". Nesta, os personagens principais, como Finn, o</p><p>garoto humano, e Jake, o cão mágico, são representados de forma simplificada, com formas geométricas e</p><p>características exageradas. Esse estilo de cartonagem possibilita maior flexibilidade criativa, permitindo que</p><p>os personagens assumam formas extravagantes e expressem emoções de maneiras únicas (Figura 6).</p><p>Figura 6 | Desenho animado Hora da Aventura (Aventure Time)</p><p>Fonte: Flickr.</p><p>Paleta de Cores:</p><p>Tanto no design gráfico como no industrial, a paleta de cores desempenha papel fundamental na criação de</p><p>atmosfera e estética de uma animação. Provocam emoções e podem estabelecer o tom de uma cena ou</p><p>história. Por exemplo: cores quentes, como vermelho e amarelo, podem transmitir calor e energia, enquanto</p><p>cores frias, como azul e verde, podem dar a sensação de calma e serenidade.</p><p>Uma paleta de cores bem planejada auxilia na manutenção da consistência visual em toda a animação.</p><p>Permite que os elementos visuais se encaixem e se harmonizem em cada cena. Mudança nas cores pode</p><p>simbolizar passagem de tempo e mudanças de emoções ou, até mesmo, transição entre cenários.</p><p>Figura 7 | Exemplo de mudança de cores para simbolizar passagem de tempo</p><p>Fonte: Freepik.</p><p>Vestimentas e Acessórios:</p><p>São elementos importantes para a caracterização dos personagens, pois identificará a sua personalidade,</p><p>idade, ocupação, status social e estilo de vida. Ajuda a diferenciar de outros personagens da mesma história</p><p>e pode refletir o desenvolvimento e o crescimento de um mesmo personagem.</p><p>DESIGN DE PERSONAGENS: MODEL SHEET</p><p>Neste bloco, veremos como é desenvolvido o model sheet dos personagens, uma ferramenta essencial para</p><p>produções de animações, especialmente em desenhos animados tradicionais, animações 2D e até animações</p><p>3D. São muito úteis para todo o processo de produção da animação, mantendo a padronização e</p><p>uniformidade dos personagens em cena. Entender como é feito garante bons resultados na animação final.</p><p>Vamos lá!</p><p>Conceito:</p><p>O model sheet (ou ficha modelo) é um documento que contém uma série de ilustrações detalhadas que</p><p>definem a aparência e as características visuais dos personagens, objetos ou cenário de uma animação; ou</p><p>seja, não se aplica apenas aos personagens. Os personagens são desenhados em vários ângulos e colocados</p><p>em folhas de papel (model sheet), nas quais são representadas suas mãos, expressões faciais e atitudes,</p><p>modelos dos fonemas, códigos das cores, além de outros aspectos gerais que serão usados pelos desenhistas /</p><p>animadores.</p><p>Principais elementos:</p><p>Os model sheets são considerados os equivalentes às “plantas arquitetônicas” nos projetos de animação.</p><p>Essas fichas-modelos devem conter: figura inteira do personagem em várias posições, volta de 180 graus</p><p>(turn around), close-ups faciais, modelos de mãos, notas de como o corpo deve ser construído, roupas e</p><p>acessórios dos personagens, detalhes dos trajes, posições que o caracterizam. Deve trazer tendências da</p><p>linguagem corporal, expressões faciais e padrões de fala, como mostra a Figura 2.</p><p>Figura 2 | Exemplo de Model-sheet</p><p>Fonte: Wikipedia Commons.</p><p>Sua importância na Animação:</p><p>A importância do model sheet na animação é significativa e inclui os seguintes aspectos:</p><p>Consistência Visual: serve como guia visual para garantir uniformidade em todas as cenas da animação.</p><p>Isso é crucial para evitar discrepâncias que possam distrair o espectador;</p><p>Padronização: estabelece proporções, ângulos, poses e expressões faciais especificas a cada personagem,</p><p>mantendo uniformidade para as poses e os movimentos;</p><p>Economia de Tempo e Esforço: os animadores não precisam desenhar a partir do zero em cada cena;</p><p>Garantia de Identificação: auxilia na identificação e distinção entre os personagens de forma rápida e fácil;</p><p>Personalização dos Personagens: o model sheet traz outras informações da personalidade de cada</p><p>personagem, como expressões e características únicas, que ajuda os animadores a transmitirem sua essência</p><p>em todas as cenas;</p><p>Colaboração: permite que toda a equipe de produção trabalhe em conjunto e harmonia, em relação ao</p><p>visual dos elementos da animação;</p><p>Referência Futura: pode servir como uma referência para futuras produções, sequências ou adaptações de</p><p>personagens, mantendo a fidelidade visual deles;</p><p>Cenários e Objetos: os model sheets também podem ser criados para cenários, veículos, objetos ou</p><p>quaisquer outros elementos de uma animação. Garantindo a consistência visual de todos os ambientes da</p><p>história.</p><p>Em resumo, o model sheet é uma peça fundamental na produção de animações, pois auxilia toda a produção</p><p>de personagens, cenários, cenas, iluminação e melhora a comunicação dos membros da equipe de produção.</p><p>Além de garantir animações visualmente coesas e atraentes.</p><p>VIDEO RESUMO</p><p>Nesta videoaula, veremos como é feito o desenvolvimento dos personagens, desde a definição de suas</p><p>personalidades a partir dos arquétipos, como são criados os aspectos visuais, até a criação do model sheet de</p><p>cada um. Também serão abordados os principais elementos que devem conter no model sheet e sua</p><p>importância para a produção da animação final. Venha comigo nesta jornada, e aprenda ainda mais sobre o</p><p>design de personagens!</p><p>Saiba mais</p><p>O design de personagens é algo muito importante para a criação de uma animação. Por isso, é importante</p><p>você se aprofundar e saber mais detalhes de como isso é feito. O livro “Construção de Personagens” é um</p><p>Ebook disponível na Biblioteca Virtual e aborda o tema da aula com mais detalhes e com exemplos bem</p><p>pertinentes à área de design. Então, eu super indico e desejo uma ótima leitura a você!</p><p>Outra dica de leitura é do trabalho intitulado “A jornada do herói em Star Wars: Uma nova Esperança”,</p><p>trabalho feito por Rafael Bona e Leonardo Antônio, publicado no Congresso Brasileiro de Ciências e</p><p>Comunicação em 2009. Esse trabalho aborda a estrutura narrativa e a construção de personagens dos filmes</p><p>Star Wars, conhecidos como Guerra nas Estrelas, no Brasil, que são fortemente calcadas em histórias</p><p>mitológicas.</p><p>Assim sendo, o universo ficcional da saga foi incorporado naturalmente na cultura pop mundial, se tornando</p><p>uma espécie de mitologia do final do século XX e início do século XXI. Parte das informações também</p><p>foram consultadas em Vogler (2006), visto que o autor se fundamenta na teoria de Campbell.</p><p>Aula 5</p><p>REVISÃO DA UNIDADE</p><p>ANIMAÇÃO CLÁSSICA: PROCESSOS E TÉCNICAS DE PRODUÇÃO</p><p>Olá, estudante!</p><p>Ao longo desta unidade, vimos diversos aspectos importantes da animação clássica: seu surgimento e</p><p>desenvolvimento ao longo da história, suas etapas e processos de produção, suas principais técnicas e a</p><p>criação de design de personagens. Nesta aula, iremos revisar os principais conceitos e técnicas apresentados,</p><p>que se fazem presentes na maioria das produções de animação utilizadas atualmente. Então, vamos lá!</p><p>Ao longo da evolução da sociedade humana, tem-se observado a tentativa de “dar vida” e movimento a</p><p>coisas inanimadas, surgindo, assim, a animação. Isso começou com pinturas rupestres em cavernas (há mais</p><p>40 mil anos), depois passou a estar em quadros e objetos, no teatro – como no teatro de sombras (Figura 1) e</p><p>como meio de divertimento e arte. A animação digital iniciou-se</p><p>com a criação dos brinquedos ópticos,</p><p>fotografia e cinema, e seu desenvolvimento foi acelerado pela criação de diversas técnicas de animação.</p><p>Figura 1 | Teatro de sombras</p><p>Fonte: Pexels.</p><p>A partir do início do século XX, surgiram as primeiras grandes indústrias da animação que inovaram e</p><p>deixaram um legado enorme e incrível, com as principais técnicas e ferramentas utilizadas nas atuais</p><p>produções de animação. Nesta época, também foram definidas as fases de processo de produção (pré-</p><p>produção, produção e pós-produção), que trouxeram mais organização e otimização ao resultado final</p><p>desses projetos.</p><p>Antes mesmo de se começar a produção, é necessário se desenvolver o roteiro da história, no qual a</p><p>narrativa é dividida em cenas que são bem detalhadas, com descrição de cenários, ações, diálogos e</p><p>emoções dos personagens. Para a criação do roteiro, deve-se seguir um padrão, que pode ser obtido</p><p>atualmente por meio de softwares como Final Draft (profissional), CeltX e Story Writer, sendo estes dois</p><p>últimos para iniciantes e em versões gratuitas.</p><p>Com o roteiro pronto, já na fase de pré-produção, é possível fazer as primeiras representações visuais de</p><p>cada cena, com storyboard. O storyboard é composto por rascunhos das cenas, que detalham a</p><p>iluminação, os personagens, objetos e ambientes (Figura 2). Sua versão final fará parte do animatic, que é</p><p>uma representação prévia da animação final, que une as imagens do storyboard com as gravações de</p><p>áudio e músicas, para definir o ritmo e a duração da animação.</p><p>Figura 2 | Exemplo de storyboard</p><p>Fonte: VIEIRA, Otávio Esser et al. PRODUÇÃO INDEPENDENTE DE ANIMAÇÃO 2D: utilizando</p><p>recursos para otimização de produção. 2018.</p><p>Uma das partes mais importantes e desafiadoras da animação clássica é o desenvolvimento do design de</p><p>personagens, pois estes precisam ter seus aspectos físicos e psicológicos bem definidos para dar vida à</p><p>narrativa que está sendo criada na animação. Antes mesmo de se fazer as representações gráficas e</p><p>visuais dos personagens, deve ser feita a construção psicológica e a definição dos arquétipos de cada um</p><p>deles. Os principais arquétipos são: herói, mentor, guardião, aliado, arauto, sombra e pícaro.</p><p>Após a definição dos arquétipos, passa-se a estabelecer seus aspectos visuais, tais como: qual espécie ou</p><p>entidade (humanóide, não-humanóide ou híbridos), qual gênero, sua silhueta, se terá hipersexualismo,</p><p>qual será o nível de realismo e o estilo de desenho, a paleta de cores, assim como as vestimentas e os</p><p>acessórios de cada personagem.</p><p>Após a definição dos aspectos psicológicos e visuais dos personagens, são criados os model sheets, ou</p><p>fichas-modelos de cada um deles, que devem conter: figura inteira do personagem em várias posições,</p><p>volta de 180 graus, close-ups faciais, modelos de mãos, detalhes dos trajes e as posições que os</p><p>caracterizam (Figura 3).</p><p>Figura 3 | Exemplo de Model Sheet</p><p>Fonte: Wikimedia Communs.</p><p>Com todas essas etapas e técnicas estudadas nesta unidade, pode-se compreender todo o processo de</p><p>desenvolvimento e criação de uma animação tradicional ou clássica, assim como a importância de cada</p><p>etapa para se obter um bom resultado no projeto final.</p><p>REVISÃO DA UNIDADE</p><p>Olá, Estudante!</p><p>Nesta videoaula, iremos rever os principais conceitos e técnicas aplicados no processo de produção de uma</p><p>animação clássica. Veremos ferramentas e técnicas como: roteiro, storyboard, animatic e model sheet e sua</p><p>importância para o projeto da animação. Veremos também exemplos práticos de cada uma delas. Então,</p><p>venha comigo nesta revisão maravilhosa sobre a animação tradicional!</p><p>ESTUDO DE CASO</p><p>Olá, estudante!</p><p>Suponha que você seja convidado para participar como estagiário em um projeto de animação clássica, de</p><p>uma grande produtora de animação brasileira, para fazer parte da equipe que desenvolverá o design dos</p><p>personagens. Você será o designer estagiário em um departamento composto por artistas, ilustradores,</p><p>animadores e programadores que desenvolverão os personagens desta produção.</p><p>O chefe do seu departamento passou para todos da equipe as especificações iniciais desta animação:</p><p>• Será uma animação de fantasia medieval, com criaturas mágicas e cidades medievais clássicas;</p><p>• Público-alvo: crianças, jovens e adultos, para diversão em família e com classificação livre;</p><p>• O personagem principal deve ser guerreiro(a), com uma personalidade complexa, apresentando defeitos e</p><p>qualidades de modo a trazer profundidade à história e para despertar o interesse e a afinidade do público.</p><p>Além disso, sua forma física deve ser memorável e se destacar no cenário da animação. Suas habilidades</p><p>principais necessárias serão força e agilidade, o que exigirá um design cuidadoso para garantir que sua</p><p>aparência e características estejam alinhadas com essas características da animação. É importante também</p><p>considerar como sua personalidade, a história de fundo e as habilidades se complementam para criar uma</p><p>personagem única e cativante para os espectadores.</p><p>• O objetivo do(a) personagem será derrotar magos poderosos que tiraram toda a felicidade do mundo, e</p><p>para isso ele precisará ter uma arma poderosa. Esse equipamento precisa ser criado junto com a personagem.</p><p>A partir dessa reunião, você foi encarregado de organizar o processo de desenvolvimento da personagem</p><p>principal, apresentando sugestões para as demais características psicológicas e visuais do personagem, para</p><p>que toda a equipe trabalhe esses aspectos de forma coesa e correta, tais como demais características</p><p>psicológicas, espécie, gênero, silhueta, nível de realismo, vestimentas e acessórios, especificando também</p><p>qual será a arma poderosa que usará, assim como detalhes dela.</p><p>Além disso, você deve fazer uma descrição detalhada de como será o model sheet do personagem e também</p><p>construir a ficha modelo, caso queira incrementar e deixar mais completa sua resolução deste estudo de caso.</p><p>Deve ser entregue em formato de slide para a apresentação que você fará para toda a equipe, na qual irão</p><p>decidir e ajustar suas sugestões para este personagem. Entenda a importância de fazer uma ótima</p><p>apresentação, trazendo slides organizados e ideias bem fundamentadas nas técnicas e ferramentas</p><p>aprendidas.</p><p>Com o conhecimento adquirido ao longo desta unidade, tenho certeza de que você está pronto para esta</p><p>tarefa e para treinar suas habilidades de designer de personagens. Lembre-se de realizá-la da melhor forma</p><p>possível, com riqueza de detalhes, para que você impressione sua equipe de trabalho e consiga se destacar</p><p>nesta empresa.</p><p>Desejo muito sucesso em sua jornada!</p><p>Reflita</p><p>Olá, estudante!</p><p>É importante você relembrar os principais conceitos dos aspectos psicológicos e visuais dos personagens</p><p>vistos nesta unidade, para defini-los da melhor maneira no estudo de caso. Vou te ajudar indicando o</p><p>trabalho de conclusão de curso de Gustavo de Souza, intitulado: Metodologia de projeto gráfico aplicada</p><p>ao design de personagens para animação. Este trabalho foi feito em 2014, e aborda muito bem estes</p><p>aspectos que você precisa para criar seu personagem.</p><p>Bons estudos!</p><p>RESOLUÇÃO DO ESTUDO DE CASO</p><p>Ao desenvolver o personagem principal desta animação, é importante se atentar às características iniciais,</p><p>sobre a história ser uma fantasia medieval, com criaturas mágicas e cidades medievais clássicas. O público-</p><p>alvo são crianças e famílias em geral, tendo classificação livre, ou seja, temos que ter cuidado para não usar</p><p>o hipersexualismo, temos que limitar o linguajar e o comportamento dos personagens, principalmente do(a)</p><p>personagem principal.</p><p>Sobre este, foi dito que será guerreiro(a), personalidade complexa com defeitos e qualidades. Suas</p><p>habilidades principais são força e agilidade e ele precisa cativar o público. O objetivo do(a) personagem será</p><p>derrotar magos poderosos, e foi dito que ele terá uma arma superpoderosa para essa missão.</p><p>Você precisa apresentar sugestões</p>