ANIMACAO DIGITAL (1)

Prévia do material em texto

<p>Imprimir</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 alguns</p><p>deles utilizados até hoje, como singela forma de entretenimento. Entenderemos como a história da animação</p><p>está ligada também à criação da fotogra�a e do cinema, pois o processo de captar animação, inicialmente,</p><p>consistia em registros fotográ�cos de �guras desenhadas, conhecidos por fotogramas. Criando uma</p><p>reprodução desses fotogramas com velocidades de 16 ou mais reproduções por minutos, temos as primeiras</p><p>projeções cinematográ�cas.</p><p>Por �m, veremos como isso foi aplicado na indústria de animação e cinema e seus efeitos na sociedade atual.</p><p>Vamos começar?</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 evolução da</p><p>animação ao longo da história.</p><p>HISTÓRIA DA ANIMAÇÃO, ARGUMENTOS E FORMATOS</p><p> Aula 1 - História da animação</p><p> Aula 2 - A animação tradicional</p><p> Aula 3 - Roteiro para animação</p><p> Aula 4 - Design de personagens para animação</p><p> Aula 5 - Revisão da unidade</p><p> Referências</p><p>HISTÓRIA DA ANIMAÇÃO: CONCEITO, ORIGEM E EVOLUÇÃO PELOS 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á�ca / visual de movimentos, realizados desde os tempos mais</p><p>remotos da humanidade.</p><p>Conceito:</p><p>Para começarmos, iremos de�nir e entender o que é animação. O termo, de origem latina (animare), signi�ca</p><p>“dar vida a algo”, no sentido de atribuir “alma” (anima), um sopro vital. E como podemos dar vida a algo</p><p>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 �guras enigmáticas e impressões do próprio corpo, além de desenhar</p><p>animais em movimento, como mostrado na Figura 1. Para muitos estudiosos, a repetição de imagens torna</p><p>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-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-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</p><p>escolas 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 posições</p><p>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 de</p><p>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 �gura 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 �cou</p><p>conhecido como “disco estroboscópico”. O instrumento é composto por um disco de papel e um palito, que o</p><p>atravessa no centro. Há uma sequência de imagens e fendas entre elas, e o observador deve girar em frente a</p><p>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-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 �guras 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-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 um</p><p>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 fotogra�a 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>Fotogra�a:</p><p>A fotogra�a é 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á�ca. A primeira fotogra�a 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, a</p><p>imagem do quintal de sua casa, em Borgonha, na França. Ele utilizou o “Betume da Judeia”, um material que</p><p>endurece em contato com a luz. O registro levou 8 horas para �car pronto e com baixa qualidade, para os dias</p><p>atuais, mas de qualidade excepcional para a 1ª fotogra�a de todos os tempos. (Figura 8).</p><p>Figura 8 | A primeira fotogra�a 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 mais</p><p>vezes, um negativo de papel. Era muito parecido com a revelação da fotogra�a comum, em que imagens eram</p><p>reproduzidas em um negativo e depois positivadas (Figura 9).</p><p>Figura 9 | Exemplo de fotogra�a 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 de</p><p>as imagens serem vistas em pequenas fendas de um cilindro de papel, eram visualizadas em 12 espelhos</p><p>�xados ao eixo central</p><p>Híbrido: Fada dos Bosques - Essa criatura mágica seria uma híbrida de uma pequena e graciosa</p><p>fada com asas translúcidas e um ser humanoide. Na mitologia medieval, essas fadas eram conhecidas por</p><p>proteger as �orestas e as criaturas que nelas habitavam. Vestidas com roupas tecidas a partir de folhas e</p><p>�ores, elas seriam guardiãs das plantas e animais, espalhando magia para manter o equilíbrio na natureza.</p><p>Sua varinha mágica seria poderosa, capaz de curar plantas doentes, acalmar animais selvagens e iluminar os</p><p>caminhos dos viajantes noturnos. A Fada dos Bosques seria uma �gura benevolente, associada à harmonia</p><p>entre os seres humanos e a natureza, desempenhando um papel vital nas histórias mágicas e aventuras da</p><p>é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>desa�os 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 gênero</p><p>e personalidade do personagem, para que �que sempre em destaque nas cenas, tanto em relação ao cenário</p><p>e aos objetos de cena, quanto em relação a outros personagens.</p><p>Realismo e Estilo:</p><p>O estilo e o realismo �cam 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 de�nir 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á</p><p>representado nele. A �cha-modelo deve conter: �gura inteira do personagem em várias posições, volta de 180</p><p>graus, 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>RESUMO VISUAL</p><p>Fonte: elaborado pelo autor.</p><p>Aula 1</p><p>BAHIA, Ana Beatriz; BAHIA, Sophia. História da animação. 1. ed. Curitiba: Intersaberes, 2021. E-book.</p><p>Disponível em: https://plataforma.bvirtual.com.br. Acesso em: 18 ago. 2023.</p><p>FREITAS, Mariana Ferreira de. Fundamentos e técnicas da animação 2D. 1. ed. Curitiba, PR: Intersaberes,</p><p>2023. E-book. Disponível em: https://plataforma.bvirtual.com.br. Acesso em: 19 ago. 2023.</p><p>SANTANA, Ester. História da Fotogra�a. TodaMatéria. Disponível em:</p><p>https://www.todamateria.com.br/historia-da-fotogra�a/ Acesso em: 20 de ago. 2023.</p><p>REFERÊNCIAS</p><p>https://www.todamateria.com.br/historia-da-fotografia/</p><p>SANTANA, Ana Lucia. História da Animação. Infoescola. Disponível em:</p><p>https://www.infoescola.com/desenho/historia-da-animacao/ Acesso em: 18 ago. 2023.</p><p>BASTOS, S. M. M. Brinquedo óptico: um meio para a compreensão da animação quadro a quadro. 2019. 175 f.</p><p>Monogra�a (Graduação em Design) – Centro de Tecnologia, Universidade Federal do Ceará, Fortaleza, 2019.</p><p>TAVARES, Ingrid. Uma breve história do Cinema. Super interessante. Disponível em:</p><p>https://super.abril.com.br/cultura/a-historia-do-cinema/?</p><p>utm_source=google&utm_medium=cpc&utm_campaign=eda_super_audiencia_institucional&gclid=Cj0KCQjw7J</p><p>OpBhCfARIsAL3bobeykPfGYONFP-gXlvMYThe-ugpRKj_hltQt73cf6lAJ-d9NPVBb_AEaAiEWEALw_wcB Acesso em:</p><p>18 ago. 2023.</p><p>Aula 2</p><p>FREITAS, Mariana Ferreira de. Fundamentos e técnicas da animação 2D. 1. ed. Curitiba, PR: Intersaberes,</p><p>2023. E-book. Disponível em: https://plataforma.bvirtual.com.br. Acesso em: 19 ago. 2023.</p><p>Wikipedia. Animação Tradicional. WIKIPEDIA. Disponível em:</p><p>https://pt.wikipedia.org/wiki/Animação_tradicional Acesso em: 27 ago. 2023.</p><p>VENTURIN, Marilindi Leal. Animação tradicional para o ensino fundamental: benefícios para a sala de</p><p>aula. Trabalho de Conclusão de Curso. Brasil. 2021. Disponível em:</p><p>https://repository.ufrpe.br/handle/123456789/3593. Acesso em: 11 nov. 2023.</p><p>CARAMICO, Nelson. Design de Produção na Animação Tradicional e na Realidade Virtual 360. Dissertação</p><p>de Mestrado. Universidade Anhembi Morumbi. São Paulo. 2020. Disponível em:</p><p>https://www.academia.edu/45217439/Design_de_Produ%C3%A7%C3%A3o_na_Anima%C3%A7%C3%A3o_Tradi</p><p>cional_e_na_Realidade_Virtual_360_S_%C3%83O_PAULO_2020_UNIVERSIDADE_ANHEMBI_MORUMBI_Disserta%</p><p>C3%A7%C3%A3o_de_Mestrado_PROGRAMA_DE_P%C3%93S_GRADUA%C3%87%C3%83O_STRIC. Acesso em: 11</p><p>nov. 2023.</p><p>Aula 3</p><p>RIBEIRO, Gabriel Santos Junqueira et al. É o surf: relato de produção de uma animação 2D independente.</p><p>TCC (graduação) - Universidade Federal de Santa Catarina. Centro de Comunicação e Expressão. Design. 2019.</p><p>Disponível em:https://repositorio.ufsc.br/handle/123456789/202757 . Acesso em: 24 nov. 2023.</p><p>THEBAS, Isabella. Como fazer um roteiro de cinema. Instituto de Cinema. Disponível</p><p>em:https://www.institutodecinema.com.br/mais/conteudo/como-fazer-um-roteiro-de-cinema. Acesso em: 3</p><p>set. 2023.</p><p>VIEIRA, Otávio Esser et al. PRODUÇÃO INDEPENDENTE DE ANIMAÇÃO 2D: utilizando recursos para otimização</p><p>de produção. 2018. Disponível em:https://repositorio.ufsc.br/handle/123456789/187517 . Acesso em: 24 nov.</p><p>2023.</p><p>https://www.infoescola.com/desenho/historia-da-animacao/</p><p>https://super.abril.com.br/cultura/a-historia-do-cinema/?utm_source=google&utm_medium=cpc&utm_campaign=eda_super_audiencia_institucional&gclid=Cj0KCQjw7JOpBhCfARIsAL3bobeykPfGYONFP-gXlvMYThe-ugpRKj_hltQt73cf6lAJ-d9NPVBb_AEaAiEWEALw_wcB</p><p>https://super.abril.com.br/cultura/a-historia-do-cinema/?utm_source=google&utm_medium=cpc&utm_campaign=eda_super_audiencia_institucional&gclid=Cj0KCQjw7JOpBhCfARIsAL3bobeykPfGYONFP-gXlvMYThe-ugpRKj_hltQt73cf6lAJ-d9NPVBb_AEaAiEWEALw_wcB</p><p>https://super.abril.com.br/cultura/a-historia-do-cinema/?utm_source=google&utm_medium=cpc&utm_campaign=eda_super_audiencia_institucional&gclid=Cj0KCQjw7JOpBhCfARIsAL3bobeykPfGYONFP-gXlvMYThe-ugpRKj_hltQt73cf6lAJ-d9NPVBb_AEaAiEWEALw_wcB</p><p>https://repository.ufrpe.br/handle/123456789/3593</p><p>https://www.academia.edu/45217439/Design_de_Produ%C3%A7%C3%A3o_na_Anima%C3%A7%C3%A3o_Tradicional_e_na_Realidade_Virtual_360_S_%C3%83O_PAULO_2020_UNIVERSIDADE_ANHEMBI_MORUMBI_Disserta%C3%A7%C3%A3o_de_Mestrado_PROGRAMA_DE_P%C3%93S_GRADUA%C3%87%C3%83O_STRICTO_SENSU</p><p>https://www.academia.edu/45217439/Design_de_Produ%C3%A7%C3%A3o_na_Anima%C3%A7%C3%A3o_Tradicional_e_na_Realidade_Virtual_360_S_%C3%83O_PAULO_2020_UNIVERSIDADE_ANHEMBI_MORUMBI_Disserta%C3%A7%C3%A3o_de_Mestrado_PROGRAMA_DE_P%C3%93S_GRADUA%C3%87%C3%83O_STRICTO_SENSU</p><p>https://www.academia.edu/45217439/Design_de_Produ%C3%A7%C3%A3o_na_Anima%C3%A7%C3%A3o_Tradicional_e_na_Realidade_Virtual_360_S_%C3%83O_PAULO_2020_UNIVERSIDADE_ANHEMBI_MORUMBI_Disserta%C3%A7%C3%A3o_de_Mestrado_PROGRAMA_DE_P%C3%93S_GRADUA%C3%87%C3%83O_STRICTO_SENSU</p><p>https://repositorio.ufsc.br/handle/123456789/202757</p><p>https://www.institutodecinema.com.br/mais/conteudo/como-fazer-um-roteiro-de-cinema</p><p>https://repositorio.ufsc.br/handle/123456789/187517</p><p>Aula 4</p><p>CAMPOS, Josiane Vieira; WOLF, Paulo Henrique; VIEIRA, Milton Luiz Horn. Desenvolvimento de Personagens:</p><p>a</p><p>psicologia arquetípica como ferramenta de criação e concepção de personagens para uma série animada.</p><p>Projetica, v. 5, n. 1, p. 09-24, 2014.</p><p>SOUZA, Gustavo Udson Paixão de Lira; CASTRO, Luis Felipe Thofehrn. Metodologia de projeto grá�co</p><p>aplicada ao design de personagens para animação. 2014. Trabalho de Conclusão de Curso. Universidade</p><p>Tecnológica Federal do Paraná. Disponível: Utfpr.edu.br. Acesso em 24 nov 2023.</p><p>TAVARES, Lucia Maria. Design de personagens. 1. ed. Curitiba: Intersaberes, 2022. E-book. Disponível em:</p><p>https://plataforma.bvirtual.com.br. Acesso em: 10 set. 2023.</p><p>PERTUZZATTI, Leonardo Antonio; BONA, Rafael Jose. A jornada do herói em Star Wars: uma nova esperança.</p><p>In: XXXII Congresso Brasileiro de Ciências da Comunicação. Curitiba/PR. 2009. Disponível em:</p><p>https://d1wqtxts1xzle7.cloudfront.net/65320884/Jornada_do_Heroi_em_Star_Wars-libre.pdf?</p><p>1609606236=&response-content-</p><p>disposition=inline%3B+�lename%3DA_Jornada_do_Heroi_em_Star_Wars_Uma_Nova.pdf&Expires=1698161457</p><p>&Signature=EZL7Ruy5gNi8raolSgQj6-4jgg~H6XaqFfrkdD-Ke6x7APcsIUoJU8FPYKELokDbvvnzTWs~oxJtAc8H3e-</p><p>shswAeuwy3Y5M~FzpO-bMGnVHd3Ba2WtCP3DQ-</p><p>ZkCMvDQiQ0q9vawYQ5usEpy17w17KRKBBjAdPDLlYY~L50xfIrwwz08bnP609M-</p><p>43AkhjR5Fegbp2O7UgP1I~cRTjQDYzYQY3CO-</p><p>DE4i9MnSeY2RVXS4Il4oHQ0LcLYDOKN2shXELFcxmDUyvcGAD6ardEyKXJ1kcuEngAEokqq0wDpD9rZsA9-</p><p>HaN~ZN7nx1eAQuy~qRDayvJrfUW69wSzfjaymQ__&Key-Pair-Id=APKAJLOHF5GGSLRBV4ZA . Acesso em: 11 nov.</p><p>2023.</p><p>Aula 5</p><p>BAHIA, Ana Beatriz; BAHIA, Sophia. História da animação. 1. ed. Curitiba: Intersaberes, 2021. E-book.</p><p>Disponível em: https://plataforma.bvirtual.com.br. Acesso em: 18 ago. 2023.</p><p>BASTOS, S. M. M. Brinquedo óptico: um meio para a compreensão da animação quadro a quadro. 2019.</p><p>175 f. Monogra�a (Graduação em Design) – Centro de Tecnologia, Universidade Federal do Ceará, Fortaleza,</p><p>2019. Disponível em: https://repositorio.ufc.br/handle/riufc/46555 . Acesso em: 24 nov. 2023.</p><p>CAMPOS, Josiane Vieira; WOLF, Paulo Henrique; VIEIRA, Milton Luiz Horn. Desenvolvimento de Personagens: a</p><p>psicologia arquetípica como ferramenta de criação e concepção de personagens para uma série animada.</p><p>Projetica, v. 5, n. 1, p. 09-24, 2014.</p><p>CARAMICO, N. Design de Produção na Animação Tradicional e na Realidade Virtual 360° SÃO PAULO</p><p>-2020 UNIVERSIDADE ANHEMBI MORUMBI Dissertação de Mestrado PROGRAMA DE PÓS-GRADUAÇÃO</p><p>STRICTO SENSU. Design de Produção na Animação Tradicional e na Realidade Virtual 360°, 1 jan. 2020.</p><p>FREITAS, Mariana Ferreira de. Fundamentos e técnicas da animação 2D. 1. ed. Curitiba, PR: Intersaberes,</p><p>2023. E-book. Disponível em: https://plataforma.bvirtual.com.br. Acesso em: 19 ago. 2023.</p><p>https://d1wqtxts1xzle7.cloudfront.net/65320884/Jornada_do_Heroi_em_Star_Wars-libre.pdf?1609606236=&response-content-disposition=inline%3B+filename%3DA_Jornada_do_Heroi_em_Star_Wars_Uma_Nova.pdf&Expires=1698161457&Signature=EZL7Ruy5gNi8raolSgQj6-4jgg~H6XaqFfrkdD-Ke6x7APcsIUoJU8FPYKELokDbvvnzTWs~oxJtAc8H3e-shswAeuwy3Y5M~FzpO-bMGnVHd3Ba2WtCP3DQ-ZkCMvDQiQ0q9vawYQ5usEpy17w17KRKBBjAdPDLlYY~L50xfIrwwz08bnP609M-43AkhjR5Fegbp2O7UgP1I~cRTjQDYzYQY3CO-DE4i9MnSeY2RVXS4Il4oHQ0LcLYDOKN2shXELFcxmDUyvcGAD6ardEyKXJ1kcuEngAEokqq0wDpD9rZsA9-HaN~ZN7nx1eAQuy~qRDayvJrfUW69wSzfjaymQ__&Key-Pair-Id=APKAJLOHF5GGSLRBV4ZA</p><p>https://d1wqtxts1xzle7.cloudfront.net/65320884/Jornada_do_Heroi_em_Star_Wars-libre.pdf?1609606236=&response-content-disposition=inline%3B+filename%3DA_Jornada_do_Heroi_em_Star_Wars_Uma_Nova.pdf&Expires=1698161457&Signature=EZL7Ruy5gNi8raolSgQj6-4jgg~H6XaqFfrkdD-Ke6x7APcsIUoJU8FPYKELokDbvvnzTWs~oxJtAc8H3e-shswAeuwy3Y5M~FzpO-bMGnVHd3Ba2WtCP3DQ-ZkCMvDQiQ0q9vawYQ5usEpy17w17KRKBBjAdPDLlYY~L50xfIrwwz08bnP609M-43AkhjR5Fegbp2O7UgP1I~cRTjQDYzYQY3CO-DE4i9MnSeY2RVXS4Il4oHQ0LcLYDOKN2shXELFcxmDUyvcGAD6ardEyKXJ1kcuEngAEokqq0wDpD9rZsA9-HaN~ZN7nx1eAQuy~qRDayvJrfUW69wSzfjaymQ__&Key-Pair-Id=APKAJLOHF5GGSLRBV4ZA</p><p>https://d1wqtxts1xzle7.cloudfront.net/65320884/Jornada_do_Heroi_em_Star_Wars-libre.pdf?1609606236=&response-content-disposition=inline%3B+filename%3DA_Jornada_do_Heroi_em_Star_Wars_Uma_Nova.pdf&Expires=1698161457&Signature=EZL7Ruy5gNi8raolSgQj6-4jgg~H6XaqFfrkdD-Ke6x7APcsIUoJU8FPYKELokDbvvnzTWs~oxJtAc8H3e-shswAeuwy3Y5M~FzpO-bMGnVHd3Ba2WtCP3DQ-ZkCMvDQiQ0q9vawYQ5usEpy17w17KRKBBjAdPDLlYY~L50xfIrwwz08bnP609M-43AkhjR5Fegbp2O7UgP1I~cRTjQDYzYQY3CO-DE4i9MnSeY2RVXS4Il4oHQ0LcLYDOKN2shXELFcxmDUyvcGAD6ardEyKXJ1kcuEngAEokqq0wDpD9rZsA9-HaN~ZN7nx1eAQuy~qRDayvJrfUW69wSzfjaymQ__&Key-Pair-Id=APKAJLOHF5GGSLRBV4ZA</p><p>https://d1wqtxts1xzle7.cloudfront.net/65320884/Jornada_do_Heroi_em_Star_Wars-libre.pdf?1609606236=&response-content-disposition=inline%3B+filename%3DA_Jornada_do_Heroi_em_Star_Wars_Uma_Nova.pdf&Expires=1698161457&Signature=EZL7Ruy5gNi8raolSgQj6-4jgg~H6XaqFfrkdD-Ke6x7APcsIUoJU8FPYKELokDbvvnzTWs~oxJtAc8H3e-shswAeuwy3Y5M~FzpO-bMGnVHd3Ba2WtCP3DQ-ZkCMvDQiQ0q9vawYQ5usEpy17w17KRKBBjAdPDLlYY~L50xfIrwwz08bnP609M-43AkhjR5Fegbp2O7UgP1I~cRTjQDYzYQY3CO-DE4i9MnSeY2RVXS4Il4oHQ0LcLYDOKN2shXELFcxmDUyvcGAD6ardEyKXJ1kcuEngAEokqq0wDpD9rZsA9-HaN~ZN7nx1eAQuy~qRDayvJrfUW69wSzfjaymQ__&Key-Pair-Id=APKAJLOHF5GGSLRBV4ZA</p><p>https://d1wqtxts1xzle7.cloudfront.net/65320884/Jornada_do_Heroi_em_Star_Wars-libre.pdf?1609606236=&response-content-disposition=inline%3B+filename%3DA_Jornada_do_Heroi_em_Star_Wars_Uma_Nova.pdf&Expires=1698161457&Signature=EZL7Ruy5gNi8raolSgQj6-4jgg~H6XaqFfrkdD-Ke6x7APcsIUoJU8FPYKELokDbvvnzTWs~oxJtAc8H3e-shswAeuwy3Y5M~FzpO-bMGnVHd3Ba2WtCP3DQ-ZkCMvDQiQ0q9vawYQ5usEpy17w17KRKBBjAdPDLlYY~L50xfIrwwz08bnP609M-43AkhjR5Fegbp2O7UgP1I~cRTjQDYzYQY3CO-DE4i9MnSeY2RVXS4Il4oHQ0LcLYDOKN2shXELFcxmDUyvcGAD6ardEyKXJ1kcuEngAEokqq0wDpD9rZsA9-HaN~ZN7nx1eAQuy~qRDayvJrfUW69wSzfjaymQ__&Key-Pair-Id=APKAJLOHF5GGSLRBV4ZA</p><p>https://d1wqtxts1xzle7.cloudfront.net/65320884/Jornada_do_Heroi_em_Star_Wars-libre.pdf?1609606236=&response-content-disposition=inline%3B+filename%3DA_Jornada_do_Heroi_em_Star_Wars_Uma_Nova.pdf&Expires=1698161457&Signature=EZL7Ruy5gNi8raolSgQj6-4jgg~H6XaqFfrkdD-Ke6x7APcsIUoJU8FPYKELokDbvvnzTWs~oxJtAc8H3e-shswAeuwy3Y5M~FzpO-bMGnVHd3Ba2WtCP3DQ-ZkCMvDQiQ0q9vawYQ5usEpy17w17KRKBBjAdPDLlYY~L50xfIrwwz08bnP609M-43AkhjR5Fegbp2O7UgP1I~cRTjQDYzYQY3CO-DE4i9MnSeY2RVXS4Il4oHQ0LcLYDOKN2shXELFcxmDUyvcGAD6ardEyKXJ1kcuEngAEokqq0wDpD9rZsA9-HaN~ZN7nx1eAQuy~qRDayvJrfUW69wSzfjaymQ__&Key-Pair-Id=APKAJLOHF5GGSLRBV4ZA</p><p>https://d1wqtxts1xzle7.cloudfront.net/65320884/Jornada_do_Heroi_em_Star_Wars-libre.pdf?1609606236=&response-content-disposition=inline%3B+filename%3DA_Jornada_do_Heroi_em_Star_Wars_Uma_Nova.pdf&Expires=1698161457&Signature=EZL7Ruy5gNi8raolSgQj6-4jgg~H6XaqFfrkdD-Ke6x7APcsIUoJU8FPYKELokDbvvnzTWs~oxJtAc8H3e-shswAeuwy3Y5M~FzpO-bMGnVHd3Ba2WtCP3DQ-ZkCMvDQiQ0q9vawYQ5usEpy17w17KRKBBjAdPDLlYY~L50xfIrwwz08bnP609M-43AkhjR5Fegbp2O7UgP1I~cRTjQDYzYQY3CO-DE4i9MnSeY2RVXS4Il4oHQ0LcLYDOKN2shXELFcxmDUyvcGAD6ardEyKXJ1kcuEngAEokqq0wDpD9rZsA9-HaN~ZN7nx1eAQuy~qRDayvJrfUW69wSzfjaymQ__&Key-Pair-Id=APKAJLOHF5GGSLRBV4ZA</p><p>https://d1wqtxts1xzle7.cloudfront.net/65320884/Jornada_do_Heroi_em_Star_Wars-libre.pdf?1609606236=&response-content-disposition=inline%3B+filename%3DA_Jornada_do_Heroi_em_Star_Wars_Uma_Nova.pdf&Expires=1698161457&Signature=EZL7Ruy5gNi8raolSgQj6-4jgg~H6XaqFfrkdD-Ke6x7APcsIUoJU8FPYKELokDbvvnzTWs~oxJtAc8H3e-shswAeuwy3Y5M~FzpO-bMGnVHd3Ba2WtCP3DQ-ZkCMvDQiQ0q9vawYQ5usEpy17w17KRKBBjAdPDLlYY~L50xfIrwwz08bnP609M-43AkhjR5Fegbp2O7UgP1I~cRTjQDYzYQY3CO-DE4i9MnSeY2RVXS4Il4oHQ0LcLYDOKN2shXELFcxmDUyvcGAD6ardEyKXJ1kcuEngAEokqq0wDpD9rZsA9-HaN~ZN7nx1eAQuy~qRDayvJrfUW69wSzfjaymQ__&Key-Pair-Id=APKAJLOHF5GGSLRBV4ZA</p><p>https://d1wqtxts1xzle7.cloudfront.net/65320884/Jornada_do_Heroi_em_Star_Wars-libre.pdf?1609606236=&response-content-disposition=inline%3B+filename%3DA_Jornada_do_Heroi_em_Star_Wars_Uma_Nova.pdf&Expires=1698161457&Signature=EZL7Ruy5gNi8raolSgQj6-4jgg~H6XaqFfrkdD-Ke6x7APcsIUoJU8FPYKELokDbvvnzTWs~oxJtAc8H3e-shswAeuwy3Y5M~FzpO-bMGnVHd3Ba2WtCP3DQ-ZkCMvDQiQ0q9vawYQ5usEpy17w17KRKBBjAdPDLlYY~L50xfIrwwz08bnP609M-43AkhjR5Fegbp2O7UgP1I~cRTjQDYzYQY3CO-DE4i9MnSeY2RVXS4Il4oHQ0LcLYDOKN2shXELFcxmDUyvcGAD6ardEyKXJ1kcuEngAEokqq0wDpD9rZsA9-HaN~ZN7nx1eAQuy~qRDayvJrfUW69wSzfjaymQ__&Key-Pair-Id=APKAJLOHF5GGSLRBV4ZA</p><p>https://repositorio.ufc.br/handle/riufc/46555</p><p>Imagem de capa: Storyset e ShutterStock.</p><p>JUNQUEIRA, R., Gabriel Santos. É o surf: relato de produção de uma animação 2D independente. 25 nov. 2019.</p><p>Disponível em: https://repositorio.ufsc.br/handle/123456789/202757 . Acesso em: 23 nov. 2023.</p><p>SANTANA, Ester. História da Fotogra�a. TodaMatéria. Disponível em:</p><p>https://www.todamateria.com.br/historia-da-fotogra�a/ Acesso em: 20 ago. 2023.</p><p>SOUZA, Gustavo Udson Paixão de Lira; CASTRO, Luis Felipe Thofehrn. Metodologia de projeto grá�co</p><p>aplicada ao design de personagens para animação. 2014. Trabalho de Conclusão de Curso. Universidade</p><p>Tecnológica Federal do Paraná. Disponível em: https://repositorio.utfpr.edu.br/jspui/handle/1/13732  Acesso</p><p>em: 23 nov. 2023.</p><p>TAVARES, Lucia Maria. Design de personagens. 1. ed. Curitiba: Intersaberes, 2022. E-book. Disponível em:</p><p>https://plataforma.bvirtual.com.br. Acesso em: 10 set. 2023.</p><p>THEBAS, Isabella. Como fazer um roteiro de cinema. Instituto de Cinema. Disponível em:</p><p>https://www.institutodecinema.com.br/mais/conteudo/como-fazer-um-roteiro-de-cinema Acesso em: 3 set.</p><p>2023.</p><p>VENTURIN, Marilindi Leal. Animação tradicional para o ensino fundamental: benefícios para à sala de</p><p>aula. 2021. Trabalho de Conclusão de Curso. Brasil. Disponível em:</p><p>https://repository.ufrpe.br/handle/123456789/3593. Acesso em: 24 nov. 2023.</p><p>VIEIRA, Otávio Esser et al. PRODUÇÃO INDEPENDENTE DE ANIMAÇÃO 2D: utilizando recursos para</p><p>otimização de produção. 2018. Disponível em: https://repositorio.ufsc.br/handle/123456789/187517 . Acesso</p><p>em: 23 nov. 2023.</p><p>WIKIPEDIA. Animação Tradicional. WIKIPEDIA. Disponível em:</p><p>https://pt.wikipedia.org/wiki/Animação_tradicional Acesso em: 27 ago. 2023.</p><p>https://storyset.com/</p><p>https://www.shutterstock.com/pt/</p><p>https://repositorio.ufsc.br/handle/123456789/202757</p><p>https://www.todamateria.com.br/historia-da-fotografia/</p><p>https://repositorio.utfpr.edu.br/jspui/handle/1/13732</p><p>https://www.institutodecinema.com.br/mais/conteudo/como-fazer-um-roteiro-de-cinema</p><p>https://repository.ufrpe.br/handle/123456789/3593</p><p>https://repositorio.ufsc.br/handle/123456789/187517</p><p>Imprimir</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 con�gurações corretas e gere os arquivos �nais 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>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>PRINCÍPIOS BÁSICOS DA ANIMAÇÃO E ANIMAÇÃO DIGITAL</p><p> Aula 1 - Animação no Photoshop</p><p> Aula 2 - Introdução ao After E�ects</p><p> Aula 3 - Animação no After E�ects</p><p> Aula 4 - Animação 2D e 3D</p><p> Aula 5 - Revisão da unidade</p><p> Referências</p><p>Prepare-se para elevar suas criações estáticas a um novo nível de expressão e engajamento. Ao �nal 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 APLICAÇÃO EM AMBIENTE</p><p>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 cada</p><p>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 �lmes 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 �uido (Figura 2). Além disso, você descobrirá como o arranjo estratégico de cada</p><p>quadro contribui signi�cativamente para uma história visualmente atraente. Essa técnica permite que suas</p><p>criações transmitam emoções e signi�cados de maneira impactante, criando uma conexão mais forte com seu</p><p>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 �nais 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 da</p><p>tela de edição.</p><p>Ao exportar sua animação, escolha as con�gurações apropriadas de formato e qualidade para manter a</p><p>clareza visual e �uidez do movimento. Se você planeja exibi-la em diferentes plataformas, como redes sociais</p><p>ou sites, as con�gurações de exportação são ainda mais importantes para garantir a compatibilidade com a</p><p>mídia de reprodução �nal. O Photoshop tem várias opções de exportação, desde GIFs (Graphics Interchange</p><p>Format) até vídeos em alta de�nição. Escolher as con�gurações corretas para manter a integridade de sua</p><p>animação é fundamental para ter uma versão �nal interessante e apropriada para 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 �uidas 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 DIGITAL UTILIZANDO</p><p>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 simpli�cados que representam cada quadro da animação, ajuda a planejar</p><p>a sequência de eventos e a composição visual, conforme a �gura 4.</p><p>Figura 4 | Exemplo</p><p>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 serão</p><p>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 celuloide*</p><p>(cel), permitindo que os personagens se sobreponham aos cenários (Figura 5).</p><p>* Folhas feitas de celuloide são um material transparente e �exí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. Fotogra�a: 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, fotogra�a de cada</p><p>quadro.</p><p>criação de quadros em software de</p><p>animação, sem necessidade de</p><p>desenho físico em papel.</p><p>E�ciência e correções</p><p>correções demoradas, criação de</p><p>novos cels.</p><p>correção e edição mais e�cientes,</p><p>ajustes 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 �exibilidade em estilos visuais e</p><p>efeitos especiais.</p><p>Velocidade de produção</p><p>mais lenta, devido à necessidade de</p><p>desenho manual.</p><p>produção mais rápida, e�ciê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-chave,</p><p>ajuste a duração dos quadros e crie transições.</p><p>2. Veri�que as con�gurações de exportação: Para um arquivo simpli�cado 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). O</p><p>GIF é comumente usados para animações simples. Outros formatos, como PNG (Portable Network Graphic)</p><p>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 con�gurações de exportação: Após escolher o formato, ajuste as con�gurações especí�cas. Por</p><p>exemplo, para um GIF, de�na o número de cores usadas na paleta, Tamanho da Imagem e se a animação será</p><p>em Looping ou repetir Uma vez ou mais (Figura 7).</p><p>Figura 7 | Con�guraçõ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 �cará após exportada apertando no</p><p>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 criará</p><p>o arquivo de animação e o salvará no local especi�cado (Figura 8). Após a exportação, veri�que se a animação</p><p>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 signi�cativos 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 de�nidos. Esse processo, chamado de interpolação, suaviza o movimento de um objeto ou</p><p>personagem e o torna mais realista e �uido.</p><p>COMO CRIAR E EXPORTAR UMA ANIMAÇÃO SIMPLES UTILIZANDO PHOTOSHOP</p><p>Para aplicar o que aprendemos de forma prática, para �ns 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 con�rme.</p><p>Figura 9 | Ativando a “Linha do Tempo” no Photoshop</p><p>Fonte: Reprodução do software Adobe Photoshop elaborada pela autora, 2023.</p><p>Figura 10 | Ativando a 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 quadros</p><p>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 �ua da maneira desejada.</p><p>Figura 13 | Janela de con�guraçã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 �nal e compartilhar, conforme os</p><p>seguintes passos:</p><p>• Veri�que as con�gurações de exportação: Para um arquivo simpli�cado, 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 e Ajuste</p><p>as con�gurações de exportação.</p><p>• Visualize a animação: Antes de exportar, visualize como sua animação �cará 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 criará</p><p>o arquivo de animação e o salvará no local especi�cado. Após a exportação, veri�que se a animação está</p><p>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, signi�cando "duende", "fada") são elementos</p><p>grá�cos 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á�cos bidimensionais (Figura 15), incluindo personagens, inimigos, itens, cenários e efeitos</p><p>visuais. Os animadores e desenvolvedores de jogos usam sprites para criar a ilusão de movimento em jogos e</p><p>animações 2D. Isso é feito substituindo rapidamente os sprites em sequência, em vez de criar animações</p><p>complexas quadro a quadro, para representar os diferentes estados de um objeto ou personagem durante o</p><p>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! Nela,</p><p>abordaremos 3 tópicos principais: animação quadro a quadro, que dá vida a imagens estáticas; exportação</p><p>e�caz de animações; e uso da timeline com a ferramenta "tween", para fazer transições suaves. Aprenda a</p><p>criar sequências dinâmicas, exportar suas criações e usar a timeline para um controle preciso. Prepare-se para</p><p>uma jornada emocionante na transformação de imagens em narrativas visuais cativantes. Vamos explorar o</p><p>mundo do movimento e da criatividade no Photoshop!</p><p> Saiba mais</p><p>No site o�cial 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</p><p>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,</p><p>transformando-o 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</p><p>no 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 (fotogra�a) 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>INTRODUÇÃO</p><p>Olá, estudante!</p><p>Nesta aula, estudaremos o software After E�ects da Adobe, a partir de 3 tópicos-chave:</p><p>Introdução ao After E�ects: 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á�cos em projetos audiovisuais.</p><p>Timeline do After E�ects: Linha do tempo no After E�ects, 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á�cos Nativos: Aceleração e desaceleração são fundamentais</p><p>para animação, pois permitem criar movimentos mais naturais. Os elementos grá�cos nativos do software</p><p>simpli�cam a criação de animações realistas.</p><p>O After E�ects é 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>Aula 2</p><p>INTRODUÇÃO AO AFTER EFFECTS</p><p>O After E�ects é amplamente utilizado no mercado digital para criar conteúdo versátil e empolgante para</p><p>várias mídias.</p><p>FUNDAMENTOS DO AFTER EFFECTS</p><p>Introdução ao Adobe After E�ects: 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 dessas</p><p>ferramentas é o After E�ects, que é amplamente utilizado na produção cinematográ�ca, em programas de</p><p>televisão, publicidade e na produção de conteúdo digital.</p><p>É importante destacar que o After E�ects 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 �lmagens. O After E�ects é fundamental para produtores audiovisuais.</p><p>Seu poder, �exibilidade e integração com outras ferramentas da Adobe (empresa multinacional americana de</p><p>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 E�ects: 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 E�ects (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 �exível que permite a edição e manipulação de elementos do projeto, como adição ou</p><p>remoção de clipes de vídeo, ajuste de tempo de áudio e aplicação de efeitos, como dissolver a tela, chuva,</p><p>alteração de cores, etc. Além disso, a linha do tempo permite experimentar diferentes opções de</p><p>sequenciamento e tempo para encontrar a combinação perfeita que melhor transmite sua mensagem,</p><p>incluindo a criação de efeitos visuais, animando objetos e aplicando transições entre diferentes cenas</p><p>Figura 1 | Timeline (Linha do Tempo) do Adobe After E�ects.</p><p>Fonte: Reprodução do software Adobe After E�ects, elaborada pela autora, 2023.</p><p>Aceleração e Desaceleração e Elementos Grá�cos no After E�ects: Moldando movimentos signi�cativos</p><p>A aceleração e a desaceleração no contexto do After E�ects 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>�uidos e impactantes.</p><p>• Aceleração: Este conceito diz respeito ao aumento gradual da velocidade de um elemento em um ponto</p><p>especí�co 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 de</p><p>movimento realista.</p><p>• Desaceleração: Ao contrário da aceleração, a desaceleração envolve a diminuição progressiva da velocidade</p><p>de um elemento em um ponto determinado. Por exemplo, um objeto que desacelera ao se aproximar de seu</p><p>destino �nal. A desaceleração é essencial para suavizar transições e garantir que os movimentos não pareçam</p><p>abruptos ou mecânicos.</p><p>• Elementos Grá�cos Nativos no After E�ects: referem-se a recursos incorporados diretamente no software</p><p>para simpli�car e agilizar o processo de criação de animações e composições visuais. Esses elementos são</p><p>como blocos de construção que permitem aos usuários adicionar complexidade e detalhes às suas criações</p><p>sem a necessidade de criar tudo do zero. Esses elementos podem incluir grá�cos vetoriais, formas</p><p>prede�nidas (Figura 2), efeitos de partículas, máscaras de recorte e muito mais. Ao utilizar elementos grá�cos</p><p>nativos, os animadores podem economizar tempo e esforço, concentrando-se mais na expressão de suas</p><p>ideias e menos na construção minuciosa de cada elemento visual. Isso resulta em animações mais e�cientes,</p><p>detalhadas e visualmente impressionantes.</p><p>Figura 2 | Ferramentas de Formas básicas nativas do Adobe After E�ects.</p><p>Fonte: Reprodução do software Adobe After E�ects, elaborada pela autora, 2023.</p><p>A IMPORTÂNCIA DA INTEGRAÇÃO DOS CONCEITOS PARA CRIAR NO AFTER EFFECTS</p><p>A relação entre os conceitos apresentados no bloco anterior é fundamental para</p><p>compreender as capacidades</p><p>do After E�ects e como essa ferramenta revolucionou a produção de vídeos e animações.</p><p>Introdução ao After E�ects:</p><p>Aprender os conceitos básicos do software é fundamental para criar animações e efeitos visuais de qualidade.</p><p>É necessário compreender a interface e as ferramentas do software, importar recursos, criar composições e</p><p>adicionar elementos grá�cos para animação. Além disso, é importante conhecer conceitos fundamentais,</p><p>como camadas, máscaras e keyframes, para criar animações complexas e interagir entre 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 �nal 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ê de�ne em propriedades, como posição, escala, rotação, opacidade</p><p>etc. Eles de�nem os valores em momentos especí�cos, e o software interpola os valores entre os keyframes</p><p>para criar a animação.</p><p>Timeline do After E�ects:</p><p>Com a timeline, é possível criar animações precisas e envolventes, personalizadas de acordo com as</p><p>necessidades especí�cas de cada projeto. Por isso, a timeline é considerada o coração do After E�ects, e uma</p><p>ferramenta crucial para criar animações e narrativas visuais pro�ssionais. 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 os</p><p>elementos para contar uma história.</p><p>• Keyframes: Permitem de�nir 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á�cos Nativos:</p><p>A aceleração e a desaceleração, juntamente com elementos grá�cos nativos, são a essência da criação de</p><p>animações realistas e envolventes no After E�ects. 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>• E�ciência: Elementos grá�cos 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á�cos nativos combinados criam</p><p>animações realistas e pro�ssionais.</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 controlar</p><p>exatamente quando e como um objeto muda de velocidade.</p><p>• Elementos Grá�cos 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 UTILIZADOS EM SITUAÇÕES</p><p>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á�co trabalhando em um comercial para uma nova marca de roupas. Você</p><p>deseja criar um vídeo que apresente a marca, mostre suas roupas de maneira dinâmica e adicione alguns</p><p>efeitos visuais para tornar o vídeo mais cativante. Neste cenário, o conhecimento da interface do After E�ects</p><p>é 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á�cos,</p><p>garantindo um �uxo 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 pelos</p><p>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 �uida dos modelos.</p><p>A importância da Timeline para apresentar um infográ�co animado</p><p>Considere que você está trabalhando em uma animação de infográ�co 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á�cos e animações em camadas separadas, garantindo que cada elemento</p><p>apareça no momento certo.</p><p>• De�nir Keyframes para controlar a animação de grá�cos 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á�co 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á�cos 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 velocidade</p><p>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á�co nativo, como uma bandeira, enquanto</p><p>corre. Elementos grá�cos nativos são úteis aqui, pois são incorporados ao After E�ects. Você pode criar a</p><p>bandeira diretamente no software, economizando tempo e garantindo que ela se integre perfeitamente ao</p><p>projeto.</p><p>Em resumo, a relação entre esses conceitos de ferramentas, interface e recursos é vital para criar animações e</p><p>vídeos pro�ssionais no After E�ects. A interface intuitiva e as ferramentas permitem que você dê vida às suas</p><p>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á�cos 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>e�cazmente 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 E�ects,</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 E�ects. É hora de</p><p>desvendar todo o potencial dessa ferramenta impressionante.</p><p>Vamos lá!</p><p> Saiba mais</p><p>No site o�cial da Adobe, na área Aprendizado e suporte do Adobe After E�ects, é 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,</p><p>desde o iniciante até o especialista, para ajudá-lo a expandir suas</p><p>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á�cos 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 o�cial para aprimorar suas habilidades com o</p><p>After E�ects e divirta-se com suas criações.</p><p>INTRODUÇÃO</p><p>Nesta aula sobre Animação no After E�ects, 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 E�ects. 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>E�ects com o Photoshop e o Illustrator para otimizar nosso �uxo de trabalho;</p><p>Keyframes e Manipulação das Propriedades na Timeline e Propriedades dos Elementos Grá�cos:</p><p>Aprofundaremos nosso conhecimento sobre keyframes e manipulação das propriedades na timeline.</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, antes de se começar</p><p>a produção da animação em si, é preciso de�nir e desenvolver a ideia ou visão dos produtores, dando</p><p>corpo ao projeto.</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>Prepare-se para mergulhar no mundo da animação digital, explorando os recursos do After E�ects e a</p><p>integração entre os softwares do pacote Adobe. Com esta aula, você adquirirá as habilidades necessárias para</p><p>criar suas próprias animações incríveis.</p><p>Vamos lá?</p><p>O PODER DO ADOBE AFTER EFFECTS: IMPORTAÇÃO, INTERAÇÃO E 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 essenciais</p><p>utilizados para criar animações no After E�ects.</p><p>Importação de Elementos do Adobe Photoshop: Economizando Tempo e Mantendo a Qualidade Visual</p><p>O Photoshop é uma ferramenta amplamente utilizada por pro�ssionais de criação para desenvolver uma</p><p>variedade de elementos visuais detalhados, desde edição de fotogra�as até Ilustrações, que são</p><p>frequentemente mais artísticas e personalizadas, e imagens grá�cas, 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 E�ects, adicionando um toque</p><p>visualmente impressionante e pro�ssional.</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 E�ects 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 Trabalho</p><p>O After E�ects, o Photoshop e o Illustrator são ferramentas do mesmo fabricante (Adobe), extremamente</p><p>poderosas quando utilizadas em conjunto para otimizar o �uxo 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>�nal. Isso possibilita a criação e edição de elementos em diferentes softwares de forma harmoniosa, e�ciente</p><p>e prática.</p><p>Recursos criados em aplicativos especí�cos, como vetores no Illustrator, 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 E�ects. Essa sinergia entre os softwares</p><p>mantém a qualidade, as camadas e as propriedades originais dos elementos, permitindo que sejam utilizados</p><p>e modi�cados de forma �exível e criativa para a realização dos projetos.</p><p>Essa integração pode ampliar consideravelmente as possibilidades criativas e a e�ciê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 E�ects, essas alterações são re�etidas automaticamente, sem a necessidade de</p><p>retrabalho manual. Isso economiza tempo e esforço, permitindo que os pro�ssionais se concentrem em</p><p>aprimorar suas habilidades e expressar suas ideias de forma mais e�caz.</p><p>Keyframes e Manipulação das Propriedades na Timeline e Propriedades dos Elementos Grá�cos</p><p>Os keyframes (quadros-chave), que representam momentos especí�cos em uma linha do tempo (Figura 1),</p><p>desempenham um papel fundamental no processo de animação. Ao de�nir as propriedades de um elemento</p><p>grá�co em cada keyframe, os animadores conseguem dar vida a objetos, personagens e elementos grá�cos. É</p><p>por meio dos keyframes que é possível controlar a posição, escala, rotação, opacidade e outras propriedades</p><p>ao longo do tempo, permitindo criar animações complexas com movimentos �uidos, transições suaves e</p><p>efeitos visuais impressionantes.</p><p>Figura 1 | Keyframes na Linha do Tempo - Adobe After E�ects.</p><p>Fonte: Reprodução do software Adobe After E�ects, elaborada pela autora, 2023.</p><p>Em resumo, a integração entre o Photoshop, o Illustrator e o After E�ects, 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>e�ciência estejam sempre presentes em seus projetos audiovisuais.</p><p>ETAPAS PARA INTEGRAÇÃO DO PACOTE ADOBE E USO DE KEYFRAMES NO 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 forma</p><p>e�ciente. 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á�cos vetoriais, ícones ou personagens.</p><p>2.2. O Photoshop (Figura 3) pode ser usado tanto para editar imagens, como para</p><p>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.</p><p>Figura 3 | Interface Adobe 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 E�ects 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 Photoshop</p><p>/ Illustrator que deseja incorporar ao projeto.</p><p>3.2. Sincronização Automática: Alterações nos elementos originais no Photoshop / Illustrator serão re�etidas</p><p>automaticamente no After E�ects, economizando tempo e garantindo o uso das versões mais recentes dos</p><p>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 �nal.</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 �nal, como um vídeo.</p><p>Dominando Keyframes: Etapas para aplicação em Animações no After E�ectsA utilização de Keyframes</p><p>permite aos animadores controlarem o movimento e o comportamento de elementos grá�cos ao longo do</p><p>tempo (timeline). Aqui estão etapas necessárias para aplicar esse recurso:</p><p>1.  Criação da Animação: Comece de�nindo o que você deseja animar. Pode ser um objeto, texto,</p><p>personagem ou qualquer elemento grá�co em seu projeto.</p><p>2.  Posicionamento Inicial: Utilize um keyframe em um ponto da linha do tempo e de�na 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 | De�nindo parâmetros em um keyframe na Linha do Tempo</p><p>Fonte: Reprodução do software Adobe After E�ects, 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 modi�cação. Nesse ponto, crie um keyframe para indicar as novas</p><p>propriedades do elemento nesse momento especí�co. Isso pode incluir movimento, rotação, mudanças na</p><p>escala, opacidade (transparência) etc.</p><p>Figura 5 | De�nindo parâmetros em keyframes na Linha do Tempo</p><p>Fonte: Reprodução do software Adobe After E�ects, 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 de�ne como as propriedades do elemento mudam</p><p>gradualmente de um estado para outro, criando transições mais ou menos suaves.</p><p>5. Re�namento: 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 �nos.</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á�cos 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 IMPORTADOS PARA</p><p>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 pro�ssionais.</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 E�ects 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 no Adobe After E�ects 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í�co, 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 E�ects.</p><p>No After E�ects, você pode adicionar rigging (processo de colocar um “esqueleto”) no personagem, ou seja,</p><p>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 E�ect</p><p>Fonte: Site O�cial 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 criar</p><p>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 E�ects, onde você pode “dar vida” a esses componentes.</p><p>Por exemplo, você pode criar animações de botões que mudam de cor quando são clicados (Figura 7), ou</p><p>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á�cos:</p><p>Animação de Texto:</p><p>Usando keyframes no After E�ects, 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 a</p><p>manipulação do parâmetro de posição (1º keyframe fora da tela (A), 2º keyframe (B) no meio da Tela) (Figura 8)</p><p>e/ou opacidade.</p><p>Figura 8 | Ferramenta Texto e animação via Keyframes, no After E�ects.</p><p>Fonte: Wikimedia Commons .</p><p>Fonte: Reprodução do software Adobe After E�ects, 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 E�ects</p><p>Fonte: Reprodução do software Adobe After E�ects, 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-out*</p><p>(desvanecimento de saída) ou a animação de um objeto que segue um caminho especí�co 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 E�ects, você pode ajustar várias propriedades dos elementos grá�cos, como</p><p>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 esfera</p><p>vermelha, e na animação ela �cará verde e voltará para a cor original. Essa animação pode ser feita com 3</p><p>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 E�ects</p><p>Fonte: Reprodução do software Adobe After E�ects, 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 E�ects,</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 E�ects,</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 o�cial da Adobe, na área Aprendizado e suporte do Adobe After E�ects ), é 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</p><p>habilidades.</p><p>https://helpx.adobe.com/br/support/photoshop.htm</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 modi�que formas usando as ferramentas Caneta e Forma, e copie caminhos do Illustrator e do</p><p>Photoshop para o After E�ects.</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 o�cial para aprimorar suas habilidades com o</p><p>After E�ects e divirta-se criando suas próprias animações.</p><p>INTRODUÇÃO</p><p>Olá, estudante!</p><p>A animação é uma forma de arte que se desenvolveu signi�cativamente 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 analisar</p><p>as vantagens e desvantagens de cada estilo de animação e como eles impactam no resultado �nal.</p><p>Animação híbrida: Nesta área, mergulharemos no mundo da animação híbrida, em que técnicas tradicionais</p><p>e digitais se entrelaçam para criar algo verdadeiramente único, misturando-se mundo real (�lmagem com</p><p>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 desa�am nossa percepção da realidade.</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 emocionais, para</p><p>dar vida à narrativa que está sendo desenvolvida para a animação.</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>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>Nesta aula, vamos mergulhar no vasto universo da animação, onde a combinação perfeita entre criatividade e</p><p>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 �lmes animados clássicos como "Branca de Neve e</p><p>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 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 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á�ca; um exemplo icônico é o �lme "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 �lmes e produções que procuram combinar o mundo</p><p>real (�lmagem 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 �lmagem convencional.</p><p>São exemplos notáveis de animação híbrida os �lmes “Space Jam: O Jogo do Século“ (Warner Bros, 1996) e</p><p>"Who Framed Roger Rabbit" (“Uma cilada para Roger Rabbit, Amblin Entertainment, Touchstone Pictures,</p><p>1988). Estes �lmes são excelentes exemplos de como a animação híbrida pode ser usada de forma e�caz para</p><p>criar uma narrativa envolvente, na qual personagens de desenhos animados interagem com atores reais no</p><p>cenário do �lme.</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 digital</p><p>com o mundo real, oferecendo experiências imersivas que desa�am nossa percepção da realidade. Por meio</p><p>de dispositivos como smartphones, tablets (Figura 3) ou óculos AR, elementos animados são sobrepostos ao</p><p>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 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 modi�caçã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, como</p><p>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, tornando</p><p>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 um</p><p>ambiente virtual, proporcionando �exibilidade 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 �lmes com efeitos visuais</p><p>complexos, como �lmes 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>e�ciente de ambientes tridimensionais. Um dos marcos é o �lme Toy Story, da Pixar (1995), que �cou</p><p>conhecido por ser o primeiro �lme 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 não</p><p>conseguia replicar.</p><p>Tempo de Produção: A animação 3D tornou o processo mais e�ciente 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 histórias</p><p>mais complexas e visualmente impressionantes. O �lme Avatar (Lightstorm Entertainment, 2009) é conhecido</p><p>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 �lmadas 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 pro�ssionais 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. Surgiu</p><p>na década de 1960 e progrediu a partir dos anos 90. Com avanços no hardware e software, a RA se tornou</p><p>mais acessível ao público, oferecendo experiências imersivas que desa�am nossa percepção da 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), em</p><p>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.</p><p>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 TRADICIONAL,</p><p>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 para o personagem principal, você pode explorar diferentes expressões faciais, adicionar efeitos</p><p>visuais e criar movimentos mais �uidos e realistas ou caricatos, tendo total controle. Isso não requer apenas</p><p>habilidades artísticas, mas também um tempo signi�cativo de dedicação para alcançar um resultado �nal</p><p>impressionante.</p><p>O jogo Cuphead (Studio MDH, 2017) foi lançado pela Microsoft e �cou famoso por utilizar animação</p><p>tradicional para sua arte, e o resultado �cou incrível (Figura 8).</p><p>Figura 9 | Jogo Cuphead</p><p>Fonte da imagem: IGDB.</p><p>Criar um personagem 3D para um �lme 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>De�nir a personalidade, a aparência, as características e o papel do personagem na história.</p><p>Por exemplo, em um �lme de animação infantil, é interessante escolher um personagem amigável e colorido,</p><p>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 do</p><p>traje espacial e as características faciais para uma representação mais precisa de um astronauta – ainda que</p><p>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 �nal, 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 artistas</p><p>adicionaram detalhes texturizados para a pele escamosa e os olhos brilhantes, tornando o 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) con�gurou um rigging complexo para controlar</p><p>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 ogro</p><p>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 �nais de alta qualidade.</p><p>No �lme "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 �lmes 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 �lme, 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 ao</p><p>�lme.</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 leitura</p><p>(Figura</p><p>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-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. A</p><p>separação entre cinema animado (Figura 12) e �lmado (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 �lme passasse por dentro de uma caixa escura, na qual havia um orifício para</p><p>que o espectador pudesse assistir ao �lme. Era algo como um cinema para um único espectador (Figura 11).</p><p>Figura 11 | Cinetoscópio</p><p>Fonte: Wikimedia Communs.</p><p>Figura 12 | Imagem do primeiro �lme animado – desenho de Mélies (1895)</p><p>Fonte: Super interessante.</p><p>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 �guras 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>�gura é 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-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á�cas quanto nos jogos.</p><p>Os Primeiros Estúdios:</p><p>Surgiram antes da 1 Guerra Mundial (1914 – 1918), e contribuíram para a ascensão da indústria</p><p>cinematográ�ca 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 pro�ssionais 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á�cas 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: modi�car 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 pro�ssionais 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, como</p><p>ilustra a Figura 17.</p><p>Figura 17 | Exemplo de animação com cenário real, �lme Space Jam – Warner Bros, 1993.</p><p>a</p><p>Fonte: FREITAS, Mariana Ferreira de. Fundamentos e técnicas da animação 2D. 1. ed. Curitiba, PR: 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 Fleischer,</p><p>que eram produtores de animação em seu próprio estúdio (Fleischer Stúdio). Imagens reais eram �lmadas e</p><p>projetadas sobre cada quadro por meio de um vidro, com o intuito de obter movimentos mais realistas. Essa</p><p>técnica foi adaptada e é utilizada até hoje.</p><p>Era de Ouro da Animação Americana:</p><p>Período entre o �nal 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 �na de metal com pinos para �xar folhas perfuradas e fazer movimentação rápida</p><p>(�ipagem). É 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 �uido e natural (Figura 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: 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>Figura 20 | Mesa de animação</p><p>Fonte: FREITAS, Mariana Ferreira de. Fundamentos e técnicas da animação 2D. 1. ed. Curitiba, PR: 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 quadros</p><p>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 evolução</p><p>da animação e como ela se tornou um dos principais meios de entretenimento para os seres humanos</p><p>atualmente. Os conhecimentos adquiridos nesta aula facilitarão seu entendimento sobre fases e etapas do</p><p>processo de produção de uma animação, e as principais técnicas e ferramentas utilizadas em sua criação, que</p><p>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 fotogra�a e do cinema,</p><p>10), alguns passos são essenciais:</p><p>1. Planeje o projeto, de�nindo 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 �lmes 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> Saiba mais</p><p>Artigos:</p><p>Cuphead: linguagem híbrida entre Videogame, Desenho Animado e Jazz</p><p>Este artigo é um estudo de caso do videogame Cuphead, com o objetivo de explorar a relação entre</p><p>técnicas de animação e videogames, e sua importância como referência estética na produção de jogos.</p><p>AMÉRICO NETO, José; AMÉRICO, Marcos . Cuphead: linguagem híbrida entre Videogame, Desenho</p><p>Animado e Jazz.</p><p>Realidade aumentada e o seu impacto na educação.</p><p>Este artigo aborda a realidade aumentada na educação, apresentando suas possibilidades e impacto</p><p>para professores, alunos e estudiosos.</p><p>LEITE, Aquilla Silva; SANTOS, Elissandro; JÚNIOR, Valdick B. de Sales. REALIDADE AUMENTADA E O SEU</p><p>IMPACTO NA EDUCAÇÃO.</p><p>Vídeo:</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</p><p>pessoas recriadas do passado, numa tentativa de deter o apocalipse robótico no presente.</p><p>Con�ra os bastidores de algumas das cenas mais difíceis de CGI do curta, em que é possível ver a</p><p>aplicação de animações híbridas, nas quais atores interagem com robôs colocados na pós-produção,</p><p>além de elementos do cenário e dos personagens, como o braço robótico.</p><p>UMA JORNADA NA ANIMAÇÃO DIGITAL: DOS FUNDAMENTOS À REALIDADE 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 uma</p><p>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>Aula 5</p><p>REVISÃO DA UNIDADE</p><p>https://periodicos.ufpb.br/index.php/tematica/article/view/53759/30794</p><p>https://periodicos.ufpb.br/index.php/tematica/article/view/53759/30794</p><p>https://periodicos.ufpb.br/index.php/tematica/article/view/53759/30794</p><p>chrome-extension://hmigninkgibhdckiaphhmbgcghochdjc/pdfjs/web/viewer.html?file=https://www.facima.edu.br/instituto/revista/arquivos/ano3/revista_facima_ano_3_realidade_aumentada.pdf</p><p>chrome-extension://hmigninkgibhdckiaphhmbgcghochdjc/pdfjs/web/viewer.html?file=https://www.facima.edu.br/instituto/revista/arquivos/ano3/revista_facima_ano_3_realidade_aumentada.pdf</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>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 Photoshop</p><p>(Figura 2) e a ferramenta "tween" (transição), que permite criar transições suaves entre quadros-chave,</p><p>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 con�gurações corretas é fundamental para obter uma versão �nal 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 E�ects" e "Animação no After E�ects" exploramos o After E�ects da Adobe</p><p>(Figura 3), um software poderoso para criar efeitos visuais, animações e composições em vídeos na produção</p><p>de conteúdo digital. Essa ferramenta permite adicionar movimento e elementos grá�cos em projetos</p><p>audiovisuais. Vimos os seguintes tópicos fundamentais:</p><p>Timeline do After E�ects: A linha do tempo do After E�ects é 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 E�ects, economizando tempo e mantendo a qualidade visual.</p><p>Interação entre os Softwares do Pacote Adobe voltados à Animação: Explorou a integração e�caz entre os</p><p>softwares da Adobe Photoshop, Illustrator e After E�ects para otimizar o �uxo de trabalho na animação e a</p><p>qualidade.</p><p>Keyframes e Manipulação das Propriedades na Timeline e Propriedades dos Elementos Grá�cos:</p><p>Aprendeu a usar keyframes (quadros chave) para criar animações detalhadas e a manipular as propriedades</p><p>dos elementos grá�cos, o que é fundamental para a criação de animações complexas e conceitos de</p><p>animação tradicional, como Aceleração e Desaceleração para criar movimentos naturais</p><p>Figura 3 Interface do After E�ects</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</p><p>de 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 com</p><p>o mundo real, proporcionando experiências imersivas utilizadas em vários campos, incluindo a 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</p><p>que você esteja preparado para enfrentar os desa�os 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á desa�os 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 desa�o, utilize os conhecimentos adquiridos nas aulas. Aqui estão os principais desa�os:</p><p>• Escolha do Estilo de Animação: De�nir qual estilo de animação (tradicional, 2D ou 3D digital, entre outras)</p><p>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 e�caz 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 e�ciente.</p><p>• Aceleração, Desaceleração e Elementos Grá�cos 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á�cos nativos do After E�ects para simpli�car 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 de</p><p>realidade aumentada do cliente e que seja capaz de engajar o público, transmitindo uma mensagem clara e</p><p>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á�cos nativos do After E�ects, 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 re�exo 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 pro�ssional 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> Re�ita</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 �ns comerciais,</p><p>proporciona um aspecto onírico e lúdico às marcas, valorizando e diferenciando os produtos. Este</p><p>trabalho analisa o processo de criação de um spot publicitário animado, com base em depoimentos de</p><p>cinco pro�ssionais experientes na área. São abordadas as etapas, contribuições e estratégias envolvidas,</p><p>bem como as técnicas e linguagens utilizadas.</p><p>FERREIRA, Judite de Jesus; CARDOSO, Paulo Ribeiro. Animação audiovisual e comunicação publicitária:</p><p>uma visão processual na perspectiva dos pro�ssionais envolvidos.</p><p>Será um estudo valioso, que agrega ao conteúdo da unidade e à resolução do nosso estudo de caso.</p><p>Bons 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. Isso</p><p>permite combinar elementos visuais realistas com uma abordagem mais estilizada, criando uma narrativa</p><p>envolvente que demonstra a transformação do mundo físico em um espaço de realidade aumentada.</p><p>Ferramenta de Animação Escolhida:</p><p>Optou-se por utilizar o Adobe After E�ects 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 e�caz 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 o Photoshop e o After E�ects. Isso permitiu que os elementos grá�cos criados no Photoshop</p><p>fossem facilmente importados para o After E�ects, economizando tempo e mantendo a consistência visual.</p><p>Aceleração, Desaceleração e Elementos Grá�cos Nativos:</p><p>Durante o processo de criação da animação, aplicou-se princípios de aceleração e desaceleração para garantir</p><p>que os movimentos fossem naturais e atraentes.</p><p>A incorporação de elementos grá�cos nativos do After E�ects 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 e�caz.</p><p>Entrega:</p><p>Apresentação da animação �nalizada 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. Este</p><p>projeto ressalta a importância de escolher as técnicas e ferramentas certas para a tarefa, além de realçar a</p><p>integração e�caz entre softwares e a aplicação de princípios de animação para criar conteúdo envolvente. A</p><p>colaboração e�ciente da equipe e a �exibilidade para fazer ajustes com base no feedback do cliente também</p><p>foram aspectos fundamentais para o sucesso deste projeto.</p><p>RESUMO VISUAL</p><p>Fonte: elaborado pelo autor.</p><p>Aula 1</p><p>ADOBE. Criar animações de linha do tempo . 2023. Disponível em:</p><p>https://helpx.adobe.com/br/photoshop/using/creating-timeline-animations.html Acesso em: 16 ago. 2023.</p><p>ADOBE. Criar quadros de animação . 2023. Disponível em:</p><p>https://helpx.adobe.com/br/photoshop/using/creating-frame-animations.html Acesso em: 16 ago. 2023.</p><p>ADOBE. Editar camadas de animação e de vídeo . 2023. Disponível em:</p><p>https://helpx.adobe.com/br/photoshop/using/editing-video-animation-layers-photoshop.html Acesso em: 16</p><p>ago. 2023.</p><p>REFERÊNCIAS</p><p>https://helpx.adobe.com/br/photoshop/using/creating-timeline-animations.html</p><p>https://helpx.adobe.com/br/photoshop/using/creating-frame-animations.html</p><p>https://helpx.adobe.com/br/photoshop/using/editing-video-animation-layers-photoshop.html</p><p>Aula 2</p><p>FREITAS, Mariana Ferreira de. Fundamentos e técnicas da animação 2D. 1. ed. Curitiba, PR: Intersaberes,</p><p>2023. E-book. Disponível em: https://plataforma.bvirtual.com.br.</p><p>Acesso em: 19 ago. 2023.</p><p>Wikipedia. Animação Tradicional. WIKIPEDIA. Disponível em:</p><p>https://pt.wikipedia.org/wiki/Animação_tradicional Acesso em: 27 ago. 2023.</p><p>VENTURIN, Marilindi Leal. Animação tradicional para o ensino fundamental: benefícios para a sala de</p><p>aula. Trabalho de Conclusão de Curso. Brasil. 2021. Disponível em:</p><p>https://repository.ufrpe.br/handle/123456789/3593. Acesso em: 11 nov. 2023.</p><p>CARAMICO, Nelson. Design de Produção na Animação Tradicional e na Realidade Virtual 360. Dissertação</p><p>de Mestrado. Universidade Anhembi Morumbi. São Paulo. 2020. Disponível em:</p><p>https://www.academia.edu/45217439/Design_de_Produ%C3%A7%C3%A3o_na_Anima%C3%A7%C3%A3o_Tradi</p><p>cional_e_na_Realidade_Virtual_360_S_%C3%83O_PAULO_2020_UNIVERSIDADE_ANHEMBI_MORUMBI_Disserta%</p><p>C3%A7%C3%A3o_de_Mestrado_PROGRAMA_DE_P%C3%93S_GRADUA%C3%87%C3%83O_STRIC. Acesso em: 11</p><p>nov. 2023.</p><p>Aula 3</p><p>ADOBE. Animação com ferramentas Marionete . Disponível em: https://helpx.adobe.com/br/after-</p><p>e�ects/using/animating-puppet-tools.html. Acesso em: 28 out. 2023.</p><p>ADOBE. Efeitos de transição . Disponível em: https://helpx.adobe.com/br/after-e�ects/using/transition-</p><p>e�ects.html. Acesso em: 25 out. 2023.</p><p>ADOBE. Interpolação do quadro-chave . Disponível em:</p><p>https://helpx.adobe.com/br/after-e�ects/using/keyframe-interpolation.html. Acesso em: 25 out. 2023.</p><p>ADOBE. Trabalhar com o After E�ects e outros aplicativos. 2023. Disponível em:</p><p>https://helpx.adobe.com/br/after-e�ects/using/e�ects-applications.html. Acesso em: 25 out. 2023.</p><p>Aula 4</p><p>GOMES, Luiz Fernando Santos; SILVA, Maria Cristina Pereira da; SILVA, Richard Barbosa dos Santos. Animação</p><p>computadorizada: uma re�exão sobre a animação nos séculos XX e XXI . 2022 . Disponível em:</p><p>https://fatecpg.edu.br/revista/index.php/ps/article/view/239/156 . Acesso em: 30 set. 2023.</p><p>FERREIRA, Joana Rita Santos. Realidade Aumentada - Conceito, Tecnologia e Aplicações Estudo</p><p>Exploratório. Disponível em: chrome-</p><p>extension://hmigninkgibhdckiaphhmbgcghochdjc/pdfjs/web/viewer.html?</p><p>�le=https://ubibliorum.ubi.pt/bitstream/10400.6/5907/1/3930_7645.pdf Acesso em: 30 set. 2023.</p><p>https://repository.ufrpe.br/handle/123456789/3593</p><p>https://www.academia.edu/45217439/Design_de_Produ%C3%A7%C3%A3o_na_Anima%C3%A7%C3%A3o_Tradicional_e_na_Realidade_Virtual_360_S_%C3%83O_PAULO_2020_UNIVERSIDADE_ANHEMBI_MORUMBI_Disserta%C3%A7%C3%A3o_de_Mestrado_PROGRAMA_DE_P%C3%93S_GRADUA%C3%87%C3%83O_STRICTO_SENSU</p><p>https://www.academia.edu/45217439/Design_de_Produ%C3%A7%C3%A3o_na_Anima%C3%A7%C3%A3o_Tradicional_e_na_Realidade_Virtual_360_S_%C3%83O_PAULO_2020_UNIVERSIDADE_ANHEMBI_MORUMBI_Disserta%C3%A7%C3%A3o_de_Mestrado_PROGRAMA_DE_P%C3%93S_GRADUA%C3%87%C3%83O_STRICTO_SENSU</p><p>https://www.academia.edu/45217439/Design_de_Produ%C3%A7%C3%A3o_na_Anima%C3%A7%C3%A3o_Tradicional_e_na_Realidade_Virtual_360_S_%C3%83O_PAULO_2020_UNIVERSIDADE_ANHEMBI_MORUMBI_Disserta%C3%A7%C3%A3o_de_Mestrado_PROGRAMA_DE_P%C3%93S_GRADUA%C3%87%C3%83O_STRICTO_SENSU</p><p>https://helpx.adobe.com/br/after-effects/using/animating-puppet-tools.html</p><p>https://helpx.adobe.com/br/after-effects/using/animating-puppet-tools.html</p><p>https://helpx.adobe.com/br/after-effects/using/transition-effects.html</p><p>https://helpx.adobe.com/br/after-effects/using/transition-effects.html</p><p>https://helpx.adobe.com/br/after-effects/using/keyframe-interpolation.html</p><p>https://helpx.adobe.com/br/after-effects/using/effects-applications.html</p><p>https://fatecpg.edu.br/revista/index.php/ps/article/view/239/156</p><p>https://ubibliorum.ubi.pt/bitstream/10400.6/5907/1/3930_7645.pdf</p><p>https://ubibliorum.ubi.pt/bitstream/10400.6/5907/1/3930_7645.pdf</p><p>https://ubibliorum.ubi.pt/bitstream/10400.6/5907/1/3930_7645.pdf</p><p>Aula 5</p><p>CARVALHO, Anna Letícia Pereira de. Modelagem e técnicas para animação 3D. São Paulo: Platos Soluções</p><p>Educacionais S.A., 2021.</p><p>MARTINELLI, Felipe Orsini. Princípios da animação 2D. São Paulo: Platos Soluções Educacionais S.A., 2021.</p><p>QUEIROZ, Carlos Wagner de; RODRIGUES, Amanda Guimarães; CARVALHO, Anna L. P. de et al. Animação</p><p>Digital 2D. Porto Alegre: SAGAH, 2021.</p><p>Bibliogra�a complementar</p><p>ADOBE. Animação com ferramentas Marionete. Disponível em: https://helpx.adobe.com/br/after-</p><p>e�ects/using/animating-puppet-tools.html. Acesso em: 28 out. 2023.</p><p>ADOBE. Criar animações de linha do tempo . 2023. Disponível em:</p><p>https://helpx.adobe.com/br/photoshop/using/creating-timeline-animations.html. Acesso em: 16 ago. 2023.</p><p>ADOBE. Criar quadros de animação . 2023. Disponível em:</p><p>https://helpx.adobe.com/br/photoshop/using/creating-frame-animations.html. Acesso em: 16 ago. 2023.</p><p>ADOBE. Editar camadas de animação e de vídeo . 2023. Disponível em:</p><p>https://helpx.adobe.com/br/photoshop/using/editing-video-animation-layers-photoshop.html. Acesso em: 16</p><p>ago. 2023.</p><p>ADOBE. Efeitos de transição . Disponível em: https://helpx.adobe.com/br/after-e�ects/using/transition-</p><p>e�ects.html. Acesso em: 25 out. 2023.</p><p>ADOBE. Esticamento de tempo e remapeamento de tempo. 2023. Disponível em:</p><p>https://helpx.adobe.com/br/after-e�ects/using/time-stretching-time-remapping.html. Acesso em: 10 set. 2023.</p><p>ADOBE. Interpolação do quadro-chave . Disponível em:</p><p>https://helpx.adobe.com/br/after-e�ects/using/keyframe-interpolation.html. Acesso em: 25 out. 2023.</p><p>ADOBE. Itens gerais da interface do usuário . 2023. Disponível em:</p><p>https://helpx.adobe.com/br/photoshop/using/creating-frame-animations.html. Acesso em: 10 set. 2023.</p><p>ADOBE. Noções básicas de composição do After E�ects | Adobe . 2023. Disponível em:</p><p>https://helpx.adobe.com/br/after-e�ects/using/composition-basics.html#timeline_panel Acesso em: 10 set.</p><p>2023.</p><p>ADOBE. Projetos . 2023. Disponível em: https://helpx.adobe.com/br/after-e�ects/using/projects.html. Acesso</p><p>em: 10 set. 2023.</p><p>ADOBE. Salvar e exportar vídeo e animações . 2023. Disponível em:</p><p>https://helpx.adobe.com/br/photoshop/using/saving-exporting-video-animations.html. Acesso em: 16 ago.</p><p>2023.</p><p>https://helpx.adobe.com/br/after-effects/using/animating-puppet-tools.html</p><p>https://helpx.adobe.com/br/after-effects/using/animating-puppet-tools.html</p><p>https://helpx.adobe.com/br/photoshop/using/creating-timeline-animations.html</p><p>https://helpx.adobe.com/br/photoshop/using/creating-frame-animations.html</p><p>https://helpx.adobe.com/br/photoshop/using/editing-video-animation-layers-photoshop.html</p><p>https://helpx.adobe.com/br/after-effects/using/transition-effects.html</p><p>https://helpx.adobe.com/br/after-effects/using/transition-effects.html</p><p>https://helpx.adobe.com/br/after-effects/using/time-stretching-time-remapping.html</p><p>https://helpx.adobe.com/br/after-effects/using/keyframe-interpolation.html</p><p>https://helpx.adobe.com/br/photoshop/using/creating-frame-animations.html</p><p>https://helpx.adobe.com/br/after-effects/using/composition-basics.html#timeline_panel</p><p>https://helpx.adobe.com/br/after-effects/using/projects.html</p><p>https://helpx.adobe.com/br/photoshop/using/saving-exporting-video-animations.html</p><p>Imagem de capa: Storyset e ShutterStock.</p><p>ADOBE. Seleção e organização de camadas . 2023. Disponível em: https://helpx.adobe.com/br/after-</p><p>e�ects/using/selecting-arranging-layers.html. Acesso em: 10 set. 2023.</p><p>ADOBE. Trabalhar com o After E�ects e outros aplicativos. 2023. Disponível em:</p><p>https://helpx.adobe.com/br/after-e�ects/using/e�ects-applications.html. Acesso em: 25 out. 2023.</p><p>ADOBE. Velocidade. 2023. Disponível em: https://helpx.adobe.com/br/after-e�ects/using/speed.html. Acesso</p><p>em: 10 set. 2023.</p><p>CHONG, Andrew. Animação Digital. Porto Alegre: Grupo A, 2014.</p><p>FERREIRA, Joana Rita Santos . Realidade Aumentada - Conceito, Tecnologia e Aplicações Estudo Exploratório.</p><p>Disponível em: chrome-extension://hmigninkgibhdckiaphhmbgcghochdjc/pdfjs/web/viewer.html?</p><p>�le=https://ubibliorum.ubi.pt/bitstream/10400.6/5907/1/3930_7645.pdf Acesso em: 30 set. 2023.</p><p>GOMES, Luiz Fernando Santos; SILVA, Maria Cristina Pereira da; SILVA, Richard Barbosa dos Santos .</p><p>Animação computadorizada: uma re�exão sobre a animação nos séculos XX e XXI . 2022. Disponível em:</p><p>https://fatecpg.edu.br/revista/index.php/ps/article/view/239/156 . Acesso em: 30 set. 2023.</p><p>PURVES, Barry. Stop-motion. (Animação básica). Porto Alegre: Bookman, 2011.</p><p>WELLS, Paul; QUINN, Joanna; MILLS, Les. Desenho de Animação. Porto Alegre: Grupo A, 2012.</p><p>https://storyset.com/</p><p>https://www.shutterstock.com/pt/</p><p>https://helpx.adobe.com/br/after-effects/using/selecting-arranging-layers.html</p><p>https://helpx.adobe.com/br/after-effects/using/selecting-arranging-layers.html</p><p>https://helpx.adobe.com/br/after-effects/using/effects-applications.html</p><p>https://helpx.adobe.com/br/after-effects/using/speed.html</p><p>https://ubibliorum.ubi.pt/bitstream/10400.6/5907/1/3930_7645.pdf</p><p>https://ubibliorum.ubi.pt/bitstream/10400.6/5907/1/3930_7645.pdf</p><p>https://fatecpg.edu.br/revista/index.php/ps/article/view/239/156</p><p>Imprimir</p><p>INTRODUÇÃO</p><p>Nesta aula, você terá acesso a ricos conhecimentos sobre seis Princípios da Animação, sendo: Movimento em</p><p>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>de�nida; 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>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 Animação.</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>MOVIMENTO EM ARCOS</p><p>Em sua Era de Ouro, em meados do século XX, mais especi�camente 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 para</p><p>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 princípio,</p><p>percebeu-se que os objetos e seres vivos raramente se movem em linha reta, mas sim em movimentos mais</p><p>“naturais”, como arcos (ou parábolas); então, devemos entender que na animação essa realidade deve ser</p><p>apresentada da mesma forma. Sendo assim, a movimentação em arcos acontece a partir de uma trajetória</p><p>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 (�gura 1), traduzindo em movimentos</p><p>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 �uida 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 (�guras 2 e 3).</p><p>Figura 2 | A ação está em um arco</p><p>Fonte: WILLIAN, Richard (2016, p. 148)</p><p>Figura 3 | Movimentos do pé</p><p>Fonte: WILLIAN, Richard (2016, p. 136)</p><p>Perceba que, sem dúvida, as in�uê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 diversi�ca criatividade, tecnologia e</p><p>talento com o objetivo principal de contar histórias envolventes. Para isso, um dos elementos importantes é a</p><p>utilização do princípio de ENCENAÇÃO E SINCRONISMO, que fará toda a diferença na criação de animações</p><p>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 con�ito, 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 (�gura 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 (�gura 5) do personagem e do objeto que ele traz consigo ou próximo a ele: se a</p><p>ação �car 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 é e�caz, o diretor de</p><p>animação consegue contar a história de maneira emocionante e e�ciente.</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</p><p>com a narrativa, criando �uidez e naturalidade na animação.</p><p>Podemos utilizar como exemplo �lmes musicais da Disney (�gura 6), quando os movimentos dos personagens</p><p>coincidem perfeitamente com a música, intensi�cando a experiência auditiva e visual para o espectador.</p><p>Figura 6 | Cena do �lme 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 de�niçã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á totalmente</p><p>ligado aos movimentos realistas e convincentes dos personagens e objetos em cena. Visto que a animação</p><p>está sempre associada a movimentos e ações que envolvam e cativem os espectadores, ter conhecimento</p><p>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 a</p><p>corrida gradualmente e, ao parar, também não o fazemos de imediato... desaceleramos aos poucos, até parar</p><p>completamente (�gura 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 �m 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 (�gura 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 �uidez e</p><p>autenticidade (�gura 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 in�uencia 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 �uidos,</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 e�cazes, 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 secundária</p><p>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</p><p>passo para construir personagens e movimentos que farão a diferença em seus desenhos:</p><p>WILLIAMS, Richard. 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,</p><p>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>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 de</p><p>desenho volumétrico cria sensação de tridimensionalidade em personagens e objetos, aproximando-os da</p><p>nossa realidade. A animação direta é criada a partir de desenhos produzidos quadro a quadro, normalmente</p><p>feitos à mão, conferindo um toque artesanal à animação. O princípio de continuidade mantém a consistência</p><p>visual e narrativa a partir de movimentos e elementos esperados pelo espectador, enquanto a sobreposição</p><p>da ação permite que várias ações aconteçam simultaneamente, mesmo que complexas e dinâmicas. E, por</p><p>�m, a técnica de apelo tem como objetivo criar personagens cativantes e curiosos, despertando interesse e</p><p>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 para</p><p>as animações em geral. Abordaremos nesse bloco o princípio de COMPRIMIR E ESTICAR, que é um os mais</p><p>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í�cos, 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 modi�caçã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 (�gura 1). Por isso, esse</p><p>princípio da elasticidade é usado para criar cenas mais realistas e �uidas aos olhos do espectador. Dessa</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, algumas técnicas são</p><p>essenciais para criar animações de qualidade.</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 �uida.</p><p>Figura 1 | Cuidados com a proporção do personagem</p><p>Fonte: WILLIAN, Richard (2016,</p><p>p. 250)</p><p>Perceba, na imagem abaixo (�gura 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 permite</p><p>que a animação seja mais dinâmica, divertida e envolvente, já que os personagens ganham vida e 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 (�gura 3).</p><p>Figura 3 | Princípio de Comprimir e Esticar</p><p>Fonte: WILLIAN, Richard (2016, p. 95)</p><p>Veja, ainda, na �gura 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 �m, 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, in�uencia 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 especi�cas 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 (�gura 5), seja em papel ou em softwares de animação, como o After E�ects. 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>“�uido”, simulando movimentos “reais”, produzindo poses quadro a quadro (�gura 5), iniciando sempre do</p><p>ponto de partida, que são os quadros-chaves (�gura 6), ou seja, poses de�nidas 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 �nal.</p><p>Figura 5 | Animação quadro a quadro</p><p>Fonte: BLAIR, Preston (2013, p. 128)</p><p>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 �m da animação.</p><p>A animação direta é muito utilizada em �lmes tipo stop motion (�gura 7) e em animações de marionetes</p><p>(�gura 8). E, embora diferente do habitual, não é menos importante ou desa�adora 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: Pixabay</p><p>Figura 8 | Marionete</p><p>Fonte: Pixabay.</p><p>Originalmente, esse princípio foi pensado para animações 2D (�gura 10) e com a tecnologia, adaptou-se muito</p><p>bem para animações 3D. Aqui, a precisão é essencial, tanto na posição quanto no movimento dos objetos.</p><p>Cada detalhe é extremamente importante e deve ser ajustado cuidadosamente, pois o objetivo é que a</p><p>animação seja �uida 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 in�uencia 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 (�gura 9).</p><p>Figura 9 | Iluminação na animação</p><p>Fonte: Pixabay</p><p>b.  Troca de cenários: a troca 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 �m), para que, assim, possa ser controlado o tempo necessário da animação. Em estúdios</p><p>de animação, o assistente normalmente �ca 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 �nal.</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 �m de criar</p><p>uma narrativa �uida 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 �exibilidade das �guras e os movimentos em tempos</p><p>diferentes fazem toda a diferença para dar a sensação de continuidade (�gura 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</p><p>si, 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,</p><p>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 (�gura 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á�co, desde a escolha de cores, cenários, composições e elementos grá�cos; 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</p><p>uma 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</p><p>adaptados para os jogos digitais de luta. Você verá que projetar animações com princípios e técnicas faz</p><p>a diferença para proporcionar experiências valiosas de forma simples e e�caz.</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>clari�car 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>INTRODUÇÃO</p><p>Você verá nesta aula que o After E�ects apresenta grande �exibilidade para a criação de animações e vídeos.</p><p>Com uma interface intuitiva, é possível encontrar diversos recursos e ferramentas para criar animações de</p><p>alta qualidade. Além disso, é possível encontrar vários painéis, como de composição, linha do tempo, projeto,</p><p>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á�co, escala, rotação, opacidade e, claro, utilizando</p><p>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 E�ects faz</p><p>com que você construa animações pro�ssionais e com efeitos visuais incríveis, possibilitando dar asas à sua</p><p>imaginação.</p><p>Vamos lá!</p><p>INTERFACE DO AFTER EFFECTS</p><p>Aula 3</p><p>FERRAMENTAS DE ANIMAÇÃO DIGITAL</p><p>Você verá nesta aula que o After E�ects apresenta grande �exibilidade para a criação de animações e</p><p>vídeos.</p><p>O Adobe After E�ects é um software que apresenta uma ferramenta poderosa e muito utilizada na animação</p><p>e na indústria cinematográ�ca, além de ser capaz de produzir vídeos com efeitos visuais, possibilita a criação</p><p>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 E�ects é bastante organizada e complexa, por isso vale a pena conhecer</p><p>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 seu</p><p>projeto, ou seja, a própria cena. Neste painel, é possível de�nir 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. Além</p><p>disso, o painel de composição oferece o controle da ordem, do posicionamento e a transformação de</p><p>camadas (�gura 1).</p><p>Figura 1 | Painel de Composição After E�ects</p><p>Fonte: 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á de�nir os keyframes, além da posição, opacidade, escala e outras propriedades.</p><p>Esses keyframes permitirão que você especi�que 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 (�gura 2).</p><p>Figura 2 | Painel de projetos do After E�ects</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 (�gura 3).</p><p>Figura 3 | Painel de Visualização do After E�ects</p><p>Fonte: Adobe.</p><p>Painel de efeitos e presets – nesse painel, é possível personalizar e aplicar muitos efeitos, fazer ajustes</p><p>prede�nidos à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 �m de melhorar a qualidade da aparência e o estilo do vídeo,</p><p>incluindo efeitos de cor, imagens, �ltros, máscaras, entre outros (�gura 4).</p><p>Figura 4 | Painel de efeitos e presets do After E�ects</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. (�gura 5</p><p>Figura 5 | Painel de ferramentas do After E�ects</p><p>Fonte: Adobe.</p><p>Funcionalidades básicas do After E�ects</p><p>Visto sua interface, agora é hora de compreender as suas funcionalidades essenciais.</p><p>- Animação de Keyframes – são marcadores que especi�cam 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 de</p><p>movimentos.</p><p>- Câmera 3D – permite a criação de efeitos com profundidade e movimentos complexos em suas animações.</p><p>Como visto, o Adobe After E�ects é 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 E�ects é 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</p><p>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>�exibilidade 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 (�gura 6).</p><p>Figura 6 | Painel de animação de texto do After E�ects</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 (�gura 7).</p><p>Figura 7 | Painel de animação de texto do After E�ects</p><p>Fonte: Adobe.</p><p>4.  Máscaras de texto: assim como o Adobe Photoshop, o After E�ects 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í�ca, desde que estejam em uma máscara (�gura 8).</p><p>Figura 8 | Painel de animação de texto do After E�ects</p><p>Fonte: Adobe.</p><p>5.  Rastreamento do texto: é possível, aqui, criar o rastreamento do seu texto conforme o movimento de um</p><p>objeto, vinculando o texto ao ponto de interesse do rastreamento para que ele siga o movimento do objeto</p><p>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>justi�car 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 E�ects, com</p><p>que você poderá criar sombras, contornos e transições suaves com efeitos visuais incríveis (�gura 9).</p><p>Figura 9 | Efeitos e transição de texto do After E�ects</p><p>Fonte: Adobe.</p><p>Contudo, além da ferramenta de texto do Adobe After E�ects ser essencial, ela também é uma poderosa</p><p>aliada à criação de objetos e elementos visuais marcantes. Para dar um toque pro�ssional 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 in�nitas ideias e ocasiões criativas.</p><p>APLICAÇÃO DOS PRINCÍPIOS DA ANIMAÇÃO NAS PROPRIEDADES DOS ELEMENTOS GRÁFICOS</p><p>Uma das grandes expectativas é criar uma animação no Adobe After E�ects, 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á�cos produzidos por você com</p><p>as ferramentas disponíveis no software. Para isso, você verá agora algumas aplicações que lhe ajudarão a</p><p>desenvolver projetos ainda mais pro�ssionais 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 E�ects, isso pode ser aplicado</p><p>con�gurando uma propriedade para mudar gradualmente antes da ação principal. Você poderá criar a</p><p>antecipação de�nindo 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>�uidos 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á�cos.</p><p>Figura 11| Sobreposição da ação</p><p>Fonte: WILLIAN, Richard (2016 , p. 226)</p><p>Exagero: Ao aumentar o exagero dos personagens ou objetos, e também dos movimentos, você cria</p><p>animações mais expressivas e signi�cativas. No After E�ects, é 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 con�gurar 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</p><p>a história ou a mensagem da animação. Você pode fazer isso no After E�ects 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 E�ects é essencial para criar animações de alta</p><p>qualidade, para que cativem o público de forma e�caz. Além disso, esses princípios devem ser considerados</p><p>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 E�ects 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 �m de enriquecer seus projetos.</p><p> Saiba mais</p><p>Conheça o livro especializado no Abobe After E�ects, que oferece várias instruções sobre como</p><p>apresentar a utilizar o software, incluindo caminhos e animações desde a etapa zero.</p><p>AFFONSO, Alex. Adobe After E�ects: o essencial em motion graphics e vfx. São Paulo. Ed. Senac, 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>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 pro�ssionais. 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</p><p>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 em</p><p>camadas, sendo possível também encontrar a ferramenta de amostragem de cor, que o auxiliará a combinar</p><p>cores e, por �m, 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 especi�cas, 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 E�ects é, sem dúvida, uma ferramenta bastante poderosa e versátil, utilizada por muitos</p><p>pro�ssionais 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 (�gura 1) é uma técnica largamente usada na indústria cinematográ�ca 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. A</p><p>interface dessa ferramenta no After E�ects é organizada para tornar o processo ainda mais e�ciente e preciso.</p><p>Veja abaixo alguns comandos essenciais:</p><p>Figura 1 | Inserção de Chroma-key no After E�ects</p><p>Você verá nesta aula que as ferramentas de Chroma-key e Tracking são essenciais para a pós-produção</p><p>de vídeos, oferecendo diversos recursos que transformam simples imagens em produções pro�ssionais.</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 (�gura 2).</p><p>Figura 2 | Painel de efeitos no After E�ects</p><p>Fonte: Adobe.</p><p>2. Painel de Controles: Depois de aplicar o efeito Chroma-key , você poderá ajustar cor-chave, suavização de</p><p>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í�ca, tanto para alterá-la quanto para deixá-la transparente (�gura 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 E�ects</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 con�guraçã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 (�gura 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 E�ects apresenta uma ferramenta bastante poderosa de rastreamento, permitindo seguir o</p><p>movimento de objetos em clipes de vídeos e integrando elementos grá�cos e/ou efeitos especiais em cada</p><p>cena de movimento. Conheça abaixo os principais comandos dessa ferramenta (�gura 5):</p><p>Figura 5 | Interface do Tracking no After E�ects</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 de�nir os pontos de rastreamento no vídeo, por exemplo, para seguir</p><p>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á�cos 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 �ca ao fundo de uma imagem, vídeo ou animação,</p><p>e é uma técnica que envolve a produção da imagem em frente de um fundo uniformemente colorido (�gura</p><p>6). Esse fundo, no processo de pós-produção, é removido e substituído por outra imagem ou mesmo um</p><p>vídeo, criando assim uma composição visual ímpar.</p><p>Figura 6 | Chroma-key no After E�ects</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 E�etcs, 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 baixa</p><p>qualidade.</p><p>2. Captura de Vídeo de Alta Qualidade: para uma boa animação, é essencial que a qualidade da captura do</p><p>vídeo seja perfeita; para isso, certi�que-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 di�cultar</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, certi�que-se de que</p><p>todo o fundo esteja iluminado uniformemente, além claro, do sujeito (�gura 7). Evite sombras indesejadas</p><p>para que não haja di�culdade 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 E�ects</p><p>Fonte: Canal Videomaker.</p><p>5. Uso de Keying no After E�ects: O Keying são ferramentas utilizadas para facilitar a remoção do Chroma-</p><p>key, e permitem ajustar os parâmetros com a cor de fundo escolhida, assim como a suavização das bordas</p><p>para a melhor composição.</p><p>6. Re�namento e Ajustes: é possível, após aplicar a ferramenta KeYing, fazer re�namentos e ajustes a �m de</p><p>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 E�ects 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 de�nir a linha do tempo de qualquer animação, pois é aqui que</p><p>serão con�guradas posição, rotação, escala e opacidade da imagem como um todo (�gura 8). Dessa forma, a</p><p>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 E�ects</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 �uí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 linha</p><p>do tempo, elementos grá�cos, imagens, vídeos, textos e até mesmo</p><p>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 E�ects</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í�co em uma cena. Para isso, existem várias 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í�ca da �lmagem. 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á�cos animados a uma cena. Permite que o</p><p>texto siga o movimento da câmera, mantendo-o sempre legível e integrado à cena (�gura 9).</p><p>Figura 9 | Tracking de texto no After E�ects</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 �lmada e interajam com o ambiente de</p><p>forma realista e natural, considerando sempre o movimento tridimensional da câmera.</p><p>Dicas para um Tracking e�ciente 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 E�ects 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 E�ects.</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</p><p>After E�ects.</p><p>Indico o acesso ao passo a passo do uso da ferramenta Tracking no Adobe After E�ects. Tenho certeza</p><p>de que esse conhecimento fará toda a diferença no seu repertório educacional e pro�ssional.</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 A�er E�ects, é</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 (�gura 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 e�caz. 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 (�gura 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 (�gura 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 dos personagens e objetos durante o movimento,</p><p>a �m de criar elasticidade e �exibilidade, 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 (�gura 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 (�gura 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 E�ects 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 (�gura 6).</p><p>Figura 6 | Interface After E�ects</p><p>Fonte: Rockcontent.</p><p>No After E�ects, encontramos duas ferramentas poderosas, o Chromakey e Tracking, peças-chaves na pós-</p><p>produção de vídeo. O Chromakey (�guras 7 e 8) é uma técnica muito utilizada na indústria cinematográ�ca e</p><p>televisiva, possibilitando a substituição de um fundo sólido, como por exemplo o verde, por uma imagem ou</p><p>até mesmo um vídeo.</p><p>Figura 7 | Foto em Chromakey</p><p>Fonte: Adobe.</p><p>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 (�gura 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 e</p><p>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 �m 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 �nalizados no After E�ects. 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ê o</p><p>animasse no Adobe After E�ects, 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</p><p>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</p><p>fenômenos intrínsecos à animação quadro a quadro e das suas técnicas, o presente trabalho propõe o</p><p>desenvolvimento 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</p><p>o 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 quadro.</p><p>2019. 175 f. Monogra�a (Graduação em Design) – Centro de Tecnologia, Universidade Federal do Ceará,</p><p>Fortaleza, 2019.</p><p>Aula 2</p><p>A ANIMAÇÃO TRADICIONAL</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 pro�ssionais 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 pro�ssionais 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 �nal desta aula, você será capaz de compreender o processo de desenvolvimento da animação tradicional,</p><p>analisar as diferentes técnicas utilizadas e entender suas aplicações no mercado cinematográ�co, dos</p><p>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, ou</p><p>animação desenhada à mão. É considerada a animação mais antiga e a mais popular de todas. Por isso, ao</p><p>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 �nal da animação – cinema, televisão, internet</p><p>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 do</p><p>storyboard e da de�nição de características visuais da cena e do personagem. É o momento em que se</p><p>uni�cam 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 de�nição da direção de arte, a criação do storyboard</p><p>(esboço visual da sequência de desenhos quadro a quadro com o esboço de diversas cenas da animação), a</p><p>gravação do som-guia, o desenvolvimento do animatic (versão completa do storyboard com áudio, vozes e</p><p>música temporária) e a determinação dos diálogos de�nitivos. A Figura 1 mostra um �uxograma com todas as</p><p>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: 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 �uxograma com todas as etapas da produção de uma animação (obs.: As diversas etapas deste</p><p>�uxograma, 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: Intersaberes, 2023. E-book.</p><p>Pós-produção da animação:</p><p>Por �m, a pós-produção corresponde à �nalizaçã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 �nos, a trilha e os efeitos sonoros na versão �nal. Em seguida, é realizada a mixagem �nal de imagem</p><p>e áudio da animação. O projeto é trancado (locking picture), não recebe mais nenhum tipo de ajuste de edição</p><p>ou revisão.</p><p>Em resumo, a pós-produção envolve a edição do �lme, desenho animado ou jogo, a sincronia de imagem e</p><p>áudio e a aplicação de efeitos especiais. A Figura 3 mostra um �uxograma com todas as etapas da pós-</p><p>produção de uma animação (obs.: As diversas etapas deste �uxograma, 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: 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. De�nições realizadas pela direção de arte:</p><p>A direção de arte desenvolve a ideia inicial (Figura 4), de�nindo o estilo visual, um esboço grá�co e textual a</p><p>ser incluído no roteiro �nal. Estabelece-se a iluminação, adaptando os desenhos e de�nindo a paleta de cores</p><p>(key colors) que será utilizada. É desenvolvido um guia de estilo visual (visual style guide), para auxiliar os</p><p>artistas de desenvolvimento, composto por: desenhos-modelos (model-sheets) de personagens, cenários e</p><p>objetos e o rigging (divisão de personagem em partes) para cada personagem que pode ser 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).</p><p>e, por isso, você deve</p><p>preparar esse trabalho em 15 dias, entregando os desenhos, a animação no After E�ects 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á�cas sobre os princípios e os conceitos</p><p>encontrados. Não esqueça de incluir também o arquivo do After E�ects 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> Re�ita</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</p><p>autor Richard Willian? Sem dúvida você encontrará muitas dicas para planejar e construir seu</p><p>personagem, 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</p><p>motion 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 (�gura 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 especi�caçõ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 E�ects, escaneie ou tire fotos do seu personagem e importe</p><p>para a área de trabalho do software. Abrindo o Controle de efeitos, você poderá animar o movimento do</p><p>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>Aula 1</p><p>BLAIR, Preston. Cartoon animation. Califórnia: Walter Foster, 2013.</p><p>FOSSATI, Carolina. CINEMA DE ANIMAÇÃO: Uma trajetória marcada por inovações. Disponível em:</p><p>https://docplayer.com.br/16347644-Cinema-de-animacao-uma-trajetoria-marcada-por-inovacoes.html. Acesso</p><p>em 2 out. 2023.</p><p>BARBOSA Junior, Alberto Lucena. Arte da animação: Técnica e estética através da história. São Paulo:</p><p>Senac, 2011.</p><p>RUSSETT, Robert; STARR, Cecile. Experimental animation: Origins of a new art. New York: Da Capo</p><p>Paperback, 1988.</p><p>WILLIAMS 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>Aula 2</p><p>BAHIA, S. IZOLANI, L. STEIN, MÔNICA. 12 Princípios da Animação em Jogos de Luta. Artigo. Recife, 2020.</p><p>Disponível em: https://www.sbgames.org/proceedings2020/ArtesDesignFull/209727.pdf. Acesso em 26 nov.</p><p>2023.</p><p>REFERÊNCIAS</p><p>https://docplayer.com.br/16347644-Cinema-de-animacao-uma-trajetoria-marcada-por-inovacoes.html</p><p>BLAIR, Preston. Cartoon animation. Califórnia: Walter Foster, 2013.</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 Minas</p><p>Gerais. Belo Horizonte, 2010.</p><p>DONDIS, Donis A. Sintaxe da linguagem visual. São Paulo, Martins Fontes, 1997.</p><p>RUSSETT, Robert; STARR, Cecile. Experimental animation: Origins of a new art. New York: Da Capo</p><p>Paperback, 1988.</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>Aula 3</p><p>AFFONSO, Alex. Adobe After E�ects: o essencial em motion graphics e vfx. São Paulo. Ed. Senac, 2021.</p><p>BORGES, Deise Miranda. (Et al). Comportamento de personagens em jogos de computador. Curso de</p><p>Sistema da Informação, ULBRA. 2021</p><p>FOSSATI, Carolina. CINEMA DE ANIMAÇÃO: Uma trajetória marcada por inovações. Disponível em:</p><p>https://docplayer.com.br/16347644-Cinema-de-animacao-uma-trajetoria-marcada-por-inovacoes.html. Acesso</p><p>em: 2 out. 2022.</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>Williams, Richard. Manual de animação: manual de métodos, princípios e fórmulas para animadores</p><p>clássicos, de computador, de jogos, de stop motion e de internet. Londres: Faber & Faber Limited, 2009.</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>Aula 4</p><p>ADOBE. Adicione o rastreamento de um movimento a qualquer vídeo. Disponível em:</p><p>https://www.adobe.com/br/products/aftere�ects/motion-</p><p>tracking.html#:~:text=Come%C3%A7ar%3A,no%20texto%20ou%20no%20gr%C3%A1�co. Acesso em: 29 out.</p><p>2023.</p><p>AFFONSO, Alex. Adobe After E�ects: o essencial em motion graphics e vfx. São Paulo. Ed. Senac, 2021.</p><p>https://docplayer.com.br/16347644-Cinema-de-animacao-uma-trajetoria-marcada-por-inovacoes.html</p><p>https://www.adobe.com/br/products/aftereffects/motion-tracking.html#:~:text=Come%C3%A7ar%3A,no%20texto%20ou%20no%20gr%C3%A1fico</p><p>https://www.adobe.com/br/products/aftereffects/motion-tracking.html#:~:text=Come%C3%A7ar%3A,no%20texto%20ou%20no%20gr%C3%A1fico</p><p>Imagem de capa: Storyset e ShutterStock.</p><p>VIEIRA, Marcos. After E�ects: Uso do Chroma Key com a ferramenta Keylight. ENG, 2021. Disponível em:</p><p>https://www.eng.com.br/artigo.cfm?id=7497&post=after-e�ects:-uso-do-chroma-key-com-a-ferramenta-</p><p>keylight. Acesso em: 29 out. 2023.</p><p>Aula 5</p><p>LIMA, Alessandro Peixoto de. Projeto de Personagens Tridimensionais e Virtuais: Validação e Adaptação</p><p>de Metodologias - Porto Alegre, 2010</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>WONG, W. Princípios de forma e desenho. 2. ed. São Paulo: Martins Fontes, 2010.</p><p>https://storyset.com/</p><p>https://www.shutterstock.com/pt/</p><p>https://www.eng.com.br/artigo.cfm?id=7497&post=after-effects:-uso-do-chroma-key-com-a-ferramenta-keylight</p><p>https://www.eng.com.br/artigo.cfm?id=7497&post=after-effects:-uso-do-chroma-key-com-a-ferramenta-keylight</p><p>Imprimir</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á�co e de técnicas de animação. Este método abrange um amplo</p><p>campo de design</p><p>e produção audiovisual, cuja prática pro�ssional inclui a adaptação temporal de imagens,</p><p>tipogra�a e grá�cos para vídeo, �lme e mídia digital, por meio de diferentes veículos – comerciais e não</p><p>comerciais – incluindo: vídeo para a internet, efeitos visuais, inserções grá�cas, subtítulos e aberturas</p><p>de �lmes ou programas de televisão, como design de transmissão; animação infogra�a; croquis</p><p>animados de logotipos corporativos; anúncio; videoclipes, apresentações multimídia e introduções aos</p><p>videogames. Você conhecerá como o Motion Design cresceu exponencialmente desde a década de 1990,</p><p>impulsionado por uma série de fatores do contexto pós-moderno, como o progresso tecnológico, que</p><p>permitiu que a cultura e a economia mundial se entrelaçassem numa rede globalizada e digital, praticamente</p><p>livre de barreiras espaço-temporais, onde, atualmente, o Motion Design encontra um alto volume de</p><p>demandas e uma boa valorização por parte do mercado.</p><p>Aula 1</p><p>MOTION GRAPHICS</p><p>Nesta aula, iremos abordar o conceito de Motion Graphics a partir do design de animação, que nada</p><p>mais é que uma combinação da prática do design grá�co e de técnicas de animação.</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>Vamos começar?</p><p>MOTION DESIGN</p><p>Até meados da década de 1970, as incursões mais signi�cativas do design grá�co no cinema e na televisão</p><p>foram feitas em �lme, 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á�cos animados bidimensionais, incluindo tipogra�a, e imagens reais em movimento, como você pode</p><p>observar na �gura 1. Os elementos utilizados são elementos tipográ�cos e uma fotogra�a, que, animados,</p><p>foram utilizados no �lme “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á�ca do século XX.</p><p>Figura 1 | “Ghost Before Breakfast”</p><p>Fonte: VELHO, 2008.</p><p>Principalmente na década de 1980, os investimentos em áreas tecnológicas, como a computação grá�ca 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 �gura</p><p>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 �lmes.</p><p>Segundo Woolman (2004), "permitia combinar e animar livremente camadas de imagens de todo tipo como:</p><p>vídeo, elementos grá�cos, tipogra�a e animação”. São essas ferramentas que incentivaram o universo digital a</p><p>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á�ca e tecnologias de vídeo digital; e, conceitualmente, como um ambiente</p><p>privilegiado para se exercitar o design grá�co através da imagem em movimento, como no �lme “SEVEN” (Os</p><p>sete pecados capitais), na �gura 3, que contempla a técnica do motion graphics com colagens dinâmicas de</p><p>imagens bidimensionais e a animação utilizando a tecnologia do vídeo digital em suas 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á�cos para motion design é uma disciplina artística e técnica,</p><p>que desempenha um papel central na produção de animações e vídeos que trazem movimento. Ela envolve o</p><p>design, manipulação e animação de elementos visuais, como texto, imagens, ícones, ilustrações e grá�cos,</p><p>com o objetivo de contar histórias, transmitir informações, criar uma estética visual atraente e envolvente ao</p><p>público de forma e�caz. Esses elementos grá�cos desempenham um papel crucial na comunicação visual, na</p><p>identidade de marca, no marketing e no entretenimento, como na �gura 4, que faz uso de uma referência ao</p><p>�lme “MIB- Homens de preto”, ao apresentar quanto o novo carro da marca 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á�cos, é construída uma linguagem visual, que permite aos criadores comunicarem</p><p>mensagens de maneira clara e impactante. Elementos grá�cos 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, tipogra�a e outros elementos visuais que tornam uma marca reconhecível e memorável.</p><p>Uma manipulação cuidadosa de elementos grá�cos 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 e</p><p>contraste de cores para tornar a informação visualmente acessível a todos os públicos, incluindo aqueles com</p><p>de�ciências visuais ou auditivas, ainda mais com os avanços tecnológicos, em que a criação de elementos</p><p>grá�cos continua a evoluir. A introdução da realidade aumentada (AR), realidade virtual (VR) e inteligência</p><p>arti�cial (IA) oferece novas oportunidades para criar experiências de motion design mais imersivas e</p><p>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 �cam sendo transmitidos,</p><p>e quando a mulher está sozinha ela pode acionar o totem para que uma atendente �que conversando com</p><p>ela até seu ônibus chegar, garantindo, assim, sua segurança, como você pode observar na �gura 5.</p><p>Figura 5 | Totem interativo em ponto de ônibus</p><p>Fonte: O globo.</p><p>A criação de elementos grá�cos 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 e�caz 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á�cos para motion design está intrinsecamente ligada ao</p><p>desenvolvimento da animação e do design grá�co ao longo do tempo. As origens dos grá�cos em movimento</p><p>são encontradas na aplicação do design grá�co no cinema e na TV, assim como na experiência plástica de</p><p>algum tipo de �lme de animação 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á�cos eram desenhados à mão em celuloides, criando</p><p>animações em quadros individuais. Este processo incluiu elementos grá�cos 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á�cos em movimento. Observe na �gura 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 �lme é uma montagem caótica de imagens capturadas. Algumas delas são tratadas</p><p>quase como fotogra�as de elementos recortados sobre um fundo neutro, enquanto outras são refratadas por</p><p>prismas em múltiplos aspectos. Objetos grá�cos, tipogra�a,</p><p>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á�ca. Nesse período, a animação começou a evoluir para incluir personagens mais</p><p>elaborados e narrativas mais complexas. Isso exigiu a criação de elementos grá�cos mais detalhados, como</p><p>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á�co para cinema e</p><p>TV são ferramentas essenciais para o desenvolvimento de grá�cos em movimento. Isso se deve</p><p>principalmente a uma necessidade interna de incorporar a tipogra�a escrita nos projetos, interagindo com as</p><p>imagens, como você pode ver na �gura 7. Desde o �lme mudo, informações textuais aparecem na imagem</p><p>cronometrada, como você pode observar na �gura 8, não apenas nos créditos iniciais e �nais, 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 �lmes, o designer norte-</p><p>americano Saul Bass desenvolve a relação entre texto e imagem temporalizada, tornando-a mais so�sticada e</p><p>marcando a genealogia do motion graphics. Veja na �gura 9 como Bass faz uso do texto integrado à imagem.</p><p>No cartaz do �lme “Anatomy of a Murder” (Anatomia de um assassino), a imagem de um corpo é a base para a</p><p>tipogra�a do texto.</p><p>Figura 9 | Imagem da abertura feita por Saul Bass para o �lme: “Anatomy of a Murder”</p><p>Fonte: Velho, 2008.</p><p>De 1980 a 1990, a introdução da computação grá�ca revolucionou a criação de elementos grá�cos para</p><p>motion design. A computação grá�ca permitiu a criação de elementos digitais mais complexos e a</p><p>manipulação de imagens de forma muito mais �exível. Um exemplo desta tecnologia é visto com muita</p><p>clareza quando assistimos �lmes de Steven Spilberg (�gura 10), que modi�cou o conceito de como utilizar as</p><p>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á�cos 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 signi�cativo nessa evolução, permitindo que os designers criassem</p><p>elementos grá�cos cada vez mais impressionantes e so�sticados. 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á�cos para o Motion Design é fundamental e profunda, pois</p><p>esses elementos desempenham um papel central na criação de narrativas visuais envolventes e e�cazes em</p><p>animações e vídeos em movimento. A manipulação habilidosa de elementos grá�cos 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á�cos são veículos poderosos de comunicação visual. Eles podem transmitir informações,</p><p>ideias e conceitos de forma rápida e e�caz. Quando manipulados adequadamente, esses elementos podem</p><p>simpli�car mensagens complexas, tornando-as acessíveis a um público amplo, principalmente quando a</p><p>manipulação dos elementos grá�cos desempenha um papel crucial na criação de narrativas visuais, fazendo</p><p>uso de elementos como texto, imagens, ilustrações e grá�cos 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á�cos é 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 que</p><p>você possa criar uma narrativa visual dinâmica e envolvente em uma animação ou um vídeo em movimento. É</p><p>possível utilizar algumas técnicas e considerações ao manipular elementos grá�cos no motion design para</p><p>que seu projeto obtenha o sucesso almejado.</p><p>Procure utilizar softwares de design grá�co e animação especializados de acordo com a sua proposta. O</p><p>mercado atualmente oferece softwares especializados como: Adobe After E�ects, Adobe Premiere Pro Cinema</p><p>4D, Adobe Illustrator e Adobe Photoshop, entre muitos outros –pagos e até mesmos gratuitos! - para criar e</p><p>manipular elementos grá�cos. Essas ferramentas oferecem uma ampla gama de recursos e funcionalidades</p><p>para criar e animar elementos de maneira e�caz, nas quais será possível fazer uso das camadas (método de</p><p>edição usado por softwares de computação grá�ca) para organizar e controlar diferentes partes da</p><p>composição. Caso você precise escurecer apenas uma parte da sua imagem, por exemplo, não é necessário</p><p>modi�car toda a �gura, e sim apenas a camada da parte que você deseja que seja escurecida. Veja o exemplo</p><p>da �gura 11, em que a casa está com uma sombra, e a luz foi aplicada na camada da casa, trazendo luz à</p><p>imagem. Camadas permitem que você empilhe elementos e aplique efeitos 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á�cos</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 �uam entre elementos grá�cos. Isso pode incluir fades, dissoluções, deslizamentos e muito</p><p>mais, como os da �gura 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 signi�cativo. Isso pode incluir animações</p><p>de entrada, saída e estilização, incluindo escolhas de fonte, cores e animações, e afetando diretamente a</p><p>clareza e a legibilidade da mensagem. É crucial que o público possa entender facilmente o que está sendo</p><p>comunicado.</p><p>Sem dúvida, a manipulação de elementos grá�cos desempenha um papel central na criação de motion design</p><p>atraente e e�caz. É uma combinação de criatividade, habilidades técnicas e atenção aos detalhes, que permite</p><p>a você criar animações impactantes e visualmente cativantes, trazendo ao seu cliente um diferencial em</p><p>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 pro�ssionais. Além de como a manipulação dos elementos grá�cos no motion design modi�cam</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</p><p>sugestões 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.</p><p>O sucesso dessa</p><p>interação 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</p><p>ilustrações, elementos grá�cos, fotogra�a e vídeos, num determinado espaço-tempo, com música e</p><p>efeitos sonoros. A pesquisa teve como objetivo identi�car se, para o público jovem, os grá�cos em</p><p>movimento transmitem informações de forma mais e�caz 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</p><p>graphics. Objetivando traçar as raízes do motion graphics e seu atual contexto de utilização, formulamos</p><p>nosso objeto de pesquisa e identi�camos  que  sua  origem  parte  do  hibridismo  entre  diversos</p><p>pressupostos  teóricos  nos  campos  do  cinema,  em que citamos  Machado  (2010) e Rancière (2014); no</p><p>design, utilizando autores como Frascara (2004) e Krasner (2008); e da comunicação visual, com Chomsky</p><p>(1960) e Dondis (1997). Com isso, criamos um panorama no qual analisamos os principais processos que</p><p>tornaram possível a transposição do motion graphics do cinema para a atual linguagem visual.</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á�cos 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</p><p>outros 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 E�ects, da Adobe,</p><p>vem auxiliar nessa etapa crucial, pois determina como sua criação será compartilhada com o público. A</p><p>escolha dos formatos de arquivo desempenha um papel vital, in�uenciando a qualidade e a compatibilidade</p><p>do vídeo. Portanto, ao iniciar um projeto, se lembre o quanto é importante estar atento a todos os detalhes</p><p>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á�co, 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 graphics, a</p><p>composição é crucial para transmitir e�cazmente a mensagem, criar uma narrativa visual coesa e manter o</p><p>público envolvido. Observe, na �gura 1, como os elementos que compõem a cena integram todo o espaço da</p><p>tela, fazendo com que o observador busque por diferentes detalhes para maior compreensão da narrativa na</p><p>animação.</p><p>Aula 2</p><p>COMPOSIÇÃO</p><p>Nesta aula, será apresentado o universo do Motion Graphics, e como a composição é um relevante</p><p>alicerce para que a magia visual ganhe vida através de vídeos ou animações.</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 útil</p><p>para direcionar o foco do espectador para informações cruciais, como na �gura 2, em que a personagem</p><p>“lagarta” é mais brilhante que todos os elementos do seu entorno, fazendo com que o observador �xe seu</p><p>olhar apenas em suas ações. De acordo com Block (2008), todos os principais elementos da linguagem visual</p><p>podem ser remetidos ao “Princípio de Contraste e A�nidade”, no qual “Contraste” signi�ca diferença, e</p><p>“A�nidade” manifesta semelhança. Sendo assim, quanto maior é a a�nidade de um componente, menor será</p><p>a sua dinâmica e intensidade visual: “Contraste= Maior Intensidade Visual; A�nidade = Menor Intensidade</p><p>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 �uxo 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 �uxo de movimento. A composição do movimento deve ser</p><p>“suave e lógica”, seguindo trajetórias naturais ou intencionais. Estes movimentos devem apoiar a narrativa e</p><p>a mensagem, evitando distrações ou confusões, já que isso di�cultaria o entendimento da 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 �gura 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</p><p>alcançar esse efeito, como na �gura 4, em que é utilizada, além da perspectiva, a sobreposição de planos e a</p><p>paleta de tons de verde na composição da paisagem. Isso a torna mais imersiva e atrativa. A escolha de cores</p><p>também é uma decisão signi�cativa na composição. Estas podem ser usadas para criar contrastes</p><p>impactantes, transmitir emoções e estabelecer a identidade visual de uma peça de motion graphics. Uma</p><p>paleta de cores coesa e bem escolhida é essencial para comunicar a mensagem de forma e�caz.</p><p>Figura 4 | Animação com uso perspectiva e paleta de cores</p><p>Fonte: Eu desenho.</p><p>Por �m, a composição não é uma etapa única, mas um processo contínuo de experimentação e re�namento.</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 e�cazes 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 do</p><p>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</p><p>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 criar</p><p>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 �gura 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í�cos. 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 �lme" 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 signi�ca</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 �gura 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í�ca de uma</p><p>imagem ou aplicar um efeito a uma área especí�ca.</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 E�ects é uma etapa crítica no processo de criação de motion graphics, pois determina</p><p>como sua composição será �nalizada 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 �nal</p><p>atenda aos seus objetivos.</p><p>A exportação de uma composição no After E�ects é o estágio �nal do processo de produção. Autores como</p><p>Chris Jackson, no livro "After E�ects and Cinema 4D Lite,” enfatizam que a exportação adequada é crucial para</p><p>garantir que sua criação seja exibida conforme planejado. O autor ainda complementa que a exportação no</p><p>After E�ects, apesar de ser um processo relativamente simples, requer atenção aos detalhes e às etapas que</p><p>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>�gura 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>- Con�gurações de Exportação: Depois, clique em "Composição", na barra de menu e, em seguida, escolha</p><p>"Adicionar à �la de renderização"; isso abrirá a janela de con�gurações de exportação.</p><p>- Formato e Con�gurações:  Na janela de con�guraçõ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 exempli�cado na �gura 8.</p><p>Cada formato tem suas próprias con�gurações especí�cas, que podem ser ajustadas, como resolução, taxa de</p><p>quadros, taxa de compressão, entre outros.</p><p>Figura 8 | Formatos e Con�gurações</p><p>Fonte: Adobe.</p><p>- Local de Destino: De�na o local ou pasta onde deseja salvar o arquivo exportado. Certi�que-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 identi�cá-lo facilmente. Certi�que-</p><p>se de escolher um nome descritivo que re�ita 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 formato</p><p>de arquivo compatível com a plataforma de destino e as con�gurações de qualidade, como por exemplo o</p><p>MP4, que é amplamente aceito na maioria das plataformas e é adequado para vídeos de alta qualidade,</p><p>favorecem que seu projeto tenha melhores resultados. Cada formato de arquivo vai ao encontro de diferentes</p><p>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 pro�ssionais.</p><p>- GIF: É usado para pequenas animações e grá�cos 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 de</p><p>motion graphics. Antes de exportar seu projeto, é essencial visualizá-lo para veri�car se tudo está correto.</p><p>Você pode usar a visualização em tempo real dentro do After E�ects 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 identi�car</p><p>erros ou áreas que precisam de ajustes antes de exportar o arquivo �nal 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 no After</p><p>E�ects.</p><p> Saiba mais</p><p>Estudante, acreditando que o conhecimento deve ocorrer em continuidade, fazemos aqui algumas</p><p>sugestões 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</p><p>básicos da Gestalt, que obteve os melhores resultados nessa área. Posteriormente, será analisado como</p><p>esses princípios se comportam sobre o motion graphics, uma forma de design carente de estudos. Uma</p><p>mensagem visual que tem total capacidade de transmitir aquilo que é pretendido é algo que vai muito</p><p>além de conhecer as ferramentas e o per�l do público receptor. É preciso saber como ele vê, qual a</p><p>íntima relação entre a sua 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,</p><p>objetivos e a importância da interação entre usuário e interface digital; além de como a animação se faz</p><p>presente, e qual a sua real importância e intenção nessa relação, com o objetivo �nal de evidenciar seu</p><p>valor positivo na experiência do usuário. Para realizar tal estudo demonstramos como vem sendo</p><p>apontada a</p><p>relação entre pessoas e dispositivos que se valem de interfaces digitais - também</p><p>conceituadas e explicadas ao decorrer do texto - evidenciando como o sucesso de tal interação pode</p><p>depender da forma como a interface foi projetada e de ferramentas presentes nesta, que venham a</p><p>auxiliar na usabilidade do produto, como, por exemplo, o principal objeto de estudo desta pesquisa: as</p><p>animações – ou, como retratadas para os �ns deste artigo Motion Graphics -, ou seja, imagens em</p><p>movimento que devem acrescentar algo de positivo à interface digital, e por consequência à experiência</p><p>do usuário.</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</p><p>Adobe Premiere e os formatos de arquivo, a interação entre os softwares Premiere e After E�ects e a</p><p>importância do som na animação. As ferramentas apresentadas colaboram perfeitamente entre si, permitindo</p><p>a criação de animações, efeitos visuais e edições de vídeo avançadas. A integração dos softwares é crucial</p><p>para a produção de projetos visualmente impactantes. Já o som na animação é um componente essencial</p><p>para a narrativa e a experiência do espectador. A sincronização de áudio é uma habilidade que permite que o</p><p>som e a imagem trabalhem juntos, de maneira harmoniosa, aprimorando a qualidade do conteúdo</p><p>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. A</p><p>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á�ca 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 �delidade sonora para complementar os elementos visuais de forma e�caz. 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 formato</p><p>Aula 3</p><p>SINCRONIZAÇÃO DE ÁUDIO</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.</p><p>AIFF (Audio Interchange File Format, traduzindo: Formato de arquivo de intercâmbio de áudio), que é outra</p><p>opção sem perdas, que oferece alta qualidade sonora e é compatível com muitos softwares de animação e</p><p>edição. Ambos os formatos são ideais quando a qualidade do áudio é uma prioridade, como em vídeos</p><p>promocionais, anúncios e vinhetas de alta de�niçã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: Codi�cação de áudio avançada), podem ser escolhas</p><p>viáveis. Embora esses formatos sacri�quem um pouco a qualidade do som para reduzir o tamanho do</p><p>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 �delidade 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 �el 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 é adequada,</p><p>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 e</p><p>con�gurações, você pode garantir que o áudio e a animação grá�ca 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 E�ects, 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>e�caz, 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 �gura 1.</p><p>Figura 1 | Imagem do Adode After E�ects 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 é realizada. No entanto,</p><p>quando se trata de motion graphics, muitas vezes o Premiere por si só não é su�ciente para criar elementos</p><p>visuais altamente complexos. É aí que o Adobe After E�ects entra no processo de produção.</p><p>O Adobe After E�ects é um software dedicado à criação de animações, efeitos visuais e motion graphics. Ele</p><p>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 E�ects é 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 (�gura 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 E�ects à</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 E�ects é perfeita, o que signi�ca que você pode fazer alterações na</p><p>composição do After E�ects e vê-las re�etidas 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</p><p>é uma característica que simpli�ca a colaboração</p><p>entre o Premiere e o After E�ects. Você pode criar uma composição no After E�ects e, em seguida, vinculá-la</p><p>dinamicamente ao seu projeto Premiere. Isso signi�ca que, se você �zer alterações na composição do After</p><p>E�ects, 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 E�ects 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á�co de barras animado representando dados �nanceiros. A animação �uí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 E�ects, permitindo a você criar animações em camadas, com elementos se</p><p>sobrepondo e interagindo de maneira �uida. Isso é particularmente útil para criar infográ�cos animados,</p><p>grá�cos em movimento e títulos dinâmicos como na �gura 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 E�ects é usado para criar animações, efeitos</p><p>visuais e elementos visuais personalizados. A capacidade de importar composições do After E�ects</p><p>diretamente no Premiere, juntamente com recursos como o Adobe Dynamic Link, torna o �uxo de trabalho</p><p>entre essas duas ferramentas incrivelmente e�ciente. 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 criações</p><p>é uma habilidade crucial que permite que o som e a imagem trabalhem de maneira harmoniosa, aprimorando</p><p>a narrativa e o impacto emocional. Você poderá utilizar o áudio de várias maneiras para criar diferentes</p><p>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 �que em descompasso a ação (movimentos, expressões faciais) com o</p><p>som.</p><p>Uma trilha sonora apropriada também pode de�nir 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 e�caz:</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 veri�car 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 e�caz.</p><p>A sincronização de áudio é uma habilidade que vai requerer de você habilidade e atenção. Quando executada</p><p>com maestria, a interação entre o som e a imagem pode elevar signi�cativamente a qualidade e o impacto de</p><p>uma animação. O som não é apenas um complemento, mas uma parte fundamental da narrativa visual,</p><p>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 E�ects, 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</p><p>leitura que podem complementar o conteúdo apresentado nesta aula.</p><p>- Os modelos multimidiáticos nos portais piauienses: estudo comparado dos portais Meio Norte,</p><p>180 graus e Portal da Clube: Este artigo se propõe a analisar o uso dos multimeios nos portais do Piauí,</p><p>a partir de um estudo comparado dos portais Meio Norte, 180 graus e Portal da Clube. Por meio da</p><p>observação do espaço cedido aos elementos de multimídias na primeira página dos portais, procurando</p><p>entender como o portal os utiliza e a dinamicidade promovida por esse uso, como também, a relação</p><p>com a hipertextualidade. Dessa forma, se busca compreender como a linguagem multimidiática atribui</p><p>sentido ao texto. Para isso, a pesquisa contou com salvamento do conteúdo midiático e a análise dos</p><p>dados.</p><p>- O universo sonoro cinematográ�co: 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,</p><p>de�nimos nosso objeto de estudo no amplo escopo do universo sonoro cinematográ�co – linguagem,</p><p>desenho sonoro, sua concepção e as suas aplicações –, voltando-nos para a problemática da importância</p><p>destas dimensões no trabalho com o produto audiovisual. Metodologicamente, em relação à abordagem</p><p>do tema, a presente pesquisa é de natureza qualitativa. Esta escolha se dá pela demasiada abstração do</p><p>tema escolhido, sendo di�cultada a sua abordagem se não a partir da re�exão sobre um produto já</p><p>consolidado. Assim, quanto aos objetivos, e para evitar ambiguidades ou inferências inconclusivas,</p><p>analisamos comparativamente o universo sonoro de dois �lmes de animação: Wall-E e o O Menino e o</p><p>Mundo. Este estudo busca trazer</p><p>à luz diversas formas de análise sonora e conceitos relacionados aos</p><p>estudos de áudio que podem motivar pesquisas posteriores.</p><p>- Proposta para análise do design de som em animações educacionais: A animação grá�ca tem sido</p><p>estudada por diversas áreas, sendo comuns artigos sobre sua composição visual, seu conteúdo e</p><p>discurso. No entanto, quando se fala de animações educacionais, esses estudos se tornam mais</p><p>escassos, principalmente quando abordam o uso do   som. No design da informação, o som se constitui</p><p>como canal de equivalente importância para a formação da imagem mental do aprendiz e para o</p><p>entendimento do conteúdo. Este artigo analisa a aplicação do som em animações e tem como questão</p><p>de pesquisa esclarecer como o canal sonoro é utilizado em animações educacionais, e como objetivo</p><p>apresentar um panorama do uso do som em 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 digital não é apenas uma</p><p>arte, mas também uma ciência complexa, na qual a criatividade e a tecnologia se entrelaçam para dar</p><p>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 �nalização, por sua vez, são as ferramentas que re�nam essa magia digital. Da</p><p>escolha cuidadosa de texturas ao ajuste da iluminação, cada detalhe é aprimorado, cada pixel é polido. Esses</p><p>recursos vão além da simples estética; eles moldam mundos de �lmes, jogos e animações interativas, criando</p><p>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>re�nando 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í�cas.</p><p>Em sua essência, a renderização é a arte de transformar modelos bidimensionais em imagens tridimensionais,</p><p>tornando possível visualizar movimentos �uidos, texturas realistas e iluminação dinâmica. Entre as diversas</p><p>opções disponíveis, duas se destacam: a renderização em tempo real e a renderização o�ine. A renderização</p><p>em tempo real é especialmente popular em jogos e simulações interativas, em que a velocidade é essencial</p><p>para criar uma experiência imersiva. Por outro lado, a renderização o�ine, também conhecida como</p><p>renderização de alta qualidade, é amplamente utilizada em produções cinematográ�cas e de animação, em</p><p>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 �gura 1: “Overwatch”, jogo eletrônico desenvolvido pela empresa americana Blizzard</p><p>Entertainment em 2016. Essa técnica é baseada em algoritmos e�cientes que equilibram qualidade visual e</p><p>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 o�ine, como discutida por Watt, é uma abordagem meticulosa que permite aos</p><p>artistas alcançarem níveis de realismo inigualáveis. Observe a �gura 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 signi�cativo 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 o�ine é amplamente</p><p>empregada em produções de alta qualidade, como �lmes de animação e efeitos visuais em Hollywood.</p><p>Figura 2 | Imagem renderizada o�ine</p><p>Fonte: Freepik.</p><p>À medida que a tecnologia continua a avançar, a linha entre renderização em tempo real e o�ine começa a se</p><p>dissipar. Novas técnicas, como “Ray tracing” (ou traçado de raios, em português), é uma técnica avançada de</p><p>renderização que simula o comportamento real da luz para criar imagens altamente realistas em ambientes</p><p>virtuais. Em vez de simpli�car a trajetória da luz, o ray tracing calcula cada raio de luz individualmente,</p><p>considerando como ele interage com objetos e superfícies no ambiente em tempo real. Esse avanço contínuo</p><p>não apenas eleva o padrão visual da animação digital, mas também desa�a os limites da criatividade,</p><p>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 diversi�cadas, cada uma oferecendo um conjunto</p><p>único de benefícios e desa�os. Por trás de cada imagem deslumbrante que vemos na tela, há uma ciência</p><p>complexa e fascinante que impulsiona o mundo em movimento, moldando o futuro da narrativa visual de</p><p>maneiras emocionantes e inimagináveis.</p><p>EXPLORANDO A MAGIA DOS ALGORITMOS</p><p>Na base da criação de gra�smos animados, reside uma intricada dança entre criatividade e tecnologia, em que</p><p>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 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, re�exões e</p><p>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 argumenta</p><p>que, ao entender profundamente os algoritmos, os artistas digitais podem criar gra�smos animados que</p><p>transcendem as fronteiras da imaginação. É através da aplicação criativa desses algoritmos que cenas</p><p>ousadas e inovadoras ganham vida, deixando uma impressão duradoura na audiência.</p><p>No entanto, a jornada da criação de gra�smos 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 re�nados 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 �lme “Uma Nova Esperança”, produzido pelos estúdio</p><p>vanguardista Industrial Light & Magic (ILM), deixou evidente a relevância dos pro�ssionais de pós-produção</p><p>utilizarem técnicas avançadas para aprimorar a qualidade visual e emocional das animações, daí a saga tão</p><p>popular de “Star Wars” (�gura 3).</p><p>Figura 3 | Imagem futurista do �lme “Star Wars”</p><p>Fonte: Freepik.</p><p>No mundo de</p><p>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 E�ects 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 emoções</p><p>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á�ca 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 gra�smos 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 �nalização emergem como os elementos cruciais nessa trajetória</p><p>fascinante. A aplicação e�caz de recursos de renderização e �nalização se tornou um diferencial fundamental,</p><p>moldando não apenas o entretenimento, mas também campos como publicidade (�gura 4); educação (�gura</p><p>5); arquitetura (�gura 6); e design (�gura 7). Nesse contexto dinâmico, a habilidade de utilizar esses recursos é</p><p>uma competência essencial para pro�ssionais que buscam se destacar em suas carreiras.</p><p>Figura 4 | Renderização na Publicidade</p><p>Fonte: Freepik.</p><p>Figura 5 | Renderização na Educação</p><p>Fonte: Freepik.</p><p>Figura 6 | Renderização na arquitetura</p><p>Fonte: Freepik.</p><p>Figura 7 | Renderização no Design</p><p>Fonte: Freepik.</p><p>Na indústria do entretenimento, de produções cinematográ�cas a séries de televisão e videogames, os</p><p>recursos de renderização e �nalizaçã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. Pro�ssionais 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 signi�cativas em setores como</p><p>publicidade e marketing, como no banner da �gura 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>signi�cativamente 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 �gura 9. Isso não apenas auxilia na apresentação de ideias aos clientes, mas também permite a</p><p>exploração de espaços antes mesmo de serem construídos. A capacidade de �nalizar essas visualizações com</p><p>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 e�cientes.</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>signi�cativo 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 �gura 10. Além disso, a �nalização</p><p>cuidadosa dessas animações contribui para a clareza e compreensão, facilitando a absorção do conhecimento</p><p>de forma e�caz.</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 �nalizaçã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. Pro�ssionais 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 e�caz, 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 desse conhecimento para sua vida pro�ssional.</p><p> Saiba mais</p><p>Olá, estudante!</p><p>Acreditando que o conhecimento deve ocorrer em continuidade, fazemos aqui algumas sugestões de</p><p>leitura que podem complementar o conteúdo apresentado nesta aula.</p><p>- - Uma nova realidade: renderização cinematográ�ca para reconstruções tridimensionais da</p><p>parede torácica: A tomogra�a computadorizada com os múltiplos detectores e o avanço dos</p><p>processadores melhoraram as imagens renderizadas e as reconstruções tridimensionais na prática</p><p>clínica. Os cortes axiais tradicionais formam imagens não intuitivas, pois são vistas em apenas um plano.</p><p>Já as reconstruções tridimensionais podem exibir detalhes anatômicos em diferentes perspectivas das</p><p>estruturas e de doenças com anatomia complexa. A renderização cinematográ�ca é uma técnica de</p><p>reconstrução tridimensional recentemente introduzida, já aprovada para uso clínico, que pode produzir</p><p>imagens realistas a partir de dados tradicionais da tomogra�a computadorizada.</p><p>- Renderização Baseada em Imagens: O trabalho apresentado nesta pesquisa pertence, em parte, à</p><p>área da computação grá�ca denominada de renderização baseada em imagens. Esta área tem como</p><p>objetivo representar um cenário completo ou objetos que façam parte dele a partir de imagens, ao invés</p><p>de elementos geométricos.</p><p>- Renderização em tempo real e interatividade no sistema videográ�co: 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</p><p>possibilidade de in�uenciar e provocar modi�cações na obra e para tanto, utilizam a renderização de</p><p>vídeo em tempo real, que proporcionam maior independência ao interator para este fazer escolhas</p><p>capazes de criar uma narrativa diferente, resultante da não linearidade e da multiplicidade de ações e</p><p>reações</p><p>do interator, cuja experiência videográ�ca, programada para interatuar em tempo real, é</p><p>provocada pela complexidade do sistema vídeo na cultura digital.</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á�cos cativantes. Isso engloba a compreensão profunda de</p><p>softwares como Adobe Illustrator, Photoshop, After E�ects entre outros, permitindo a manipulação criativa de</p><p>formas, cores e texturas. A destreza na criação de ilustrações vetoriais é crucial, pois elas garantem a</p><p>Aula 5</p><p>REVISÃO DA UNIDADE</p><p>�exibilidade necessária para as animações.  Sem dúvida, Motion Design é uma disciplina que combina design</p><p>grá�co e animação para criar conteúdo visual dinâmico. Ele é amplamente utilizado em �lmes, publicidade,</p><p>vídeos explicativos e até mesmo em interfaces de usuário interativas. No âmbito do Motion Graphics (Grá�cos</p><p>em Movimento), é vital entender como elementos grá�cos podem ser animados para contar histórias de</p><p>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 �uida de elementos, mas também a</p><p>aplicação de efeitos visuais que agregam profundidade e realismo. Conhecimento de técnicas como</p><p>keyframing (enquadramento chave), easing (facilitador) de câmera são cruciais. Além disso, a habilidade de</p><p>aplicar máscaras e transições suaves é essencial para criar animações coesas e atraentes para o espectador,</p><p>trazendo-o para a realidade criada pelos efeitos visuais em jogos digitais ou mesmo em campanhas</p><p>publicitárias. Para isso, a composição se torna uma arte de organizar elementos em uma cena de forma</p><p>visualmente atraente. Isso inclui a compreensão da hierarquia visual, equilíbrio, escala e profundidade de</p><p>campo. O uso e�caz de tipogra�a e ícones que também desempenha um papel fundamental na composição,</p><p>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>�exibilidade criativa. Quanto à exportação, o After E�ects oferece uma variedade de opções, desde formatos</p><p>comuns como MP4 e MOV (A extensão de arquivo MP4 representa o formato MPEG-4 parte 14, que é como</p><p>padrão internacional de compressão de vídeo e áudio. Já a extensão de arquivo MOV é uma extensão de</p><p>arquivo usada para identi�car arquivos de vídeo em formato QuickTime) até con�gurações personalizadas</p><p>para atender às exigências especí�cas de qualidade e tamanho do arquivo. A escolha do formato de arquivo é</p><p>crucial para garantir a qualidade da animação. Formatos como GIF (Graphics Interchange Format ou Formato</p><p>de Intercâmbio de Grá�cos), são ideais para animações simples, enquanto o formato MOV preserva a</p><p>qualidade em animações mais complexas. Além disso, a sincronização precisa de áudio é fundamental para</p><p>criar uma experiência envolvente com o espectador. Isso inclui a habilidade de ajustar o tempo das animações</p><p>para coincidir perfeitamente com os elementos sonoros.</p><p>Para �nalizar uma produção ou projeto, as opções de renderização no After E�ects 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 e�caz da GPU (Graphics Processing Unit ou Unidade de Processamento Grá�co),</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 pro�ssional 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 pro�ssionais. 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 pro�ssional, 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 pro�ssionais competentes, talentosos, e você se enquadra</p><p>perfeitamente nestas características, sendo um entusiasta do mundo do design, que mergulhou nos</p><p>fundamentos do Motion Design, absorvendo os conhecimentos essenciais sobre criação de elementos</p><p>grá�cos cativantes e habilidades em softwares como Adobe Illustrator, Photoshop e After E�ects.</p><p>Recentemente formado, você adentrou no competitivo mercado de Motion Design, ansioso para aplicar suas</p><p>habilidades recém-adquiridas, e foi contratado pela “Design Animation” (nome �ctício) para desenvolver um</p><p>novo projeto.</p><p>Nesse projeto desa�ador, 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>�nalizaçã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> Re�ita</p><p>Você acredita que, nesse cenário desa�ador do mercado de trabalho, aplicando os fundamentos do</p><p>Motion Design que aprendeu, e demonstrando criatividade e habilidade técnica, conseguirá se destacar</p><p>como um pro�ssional 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 �uida de elementos, começando a animar os grá�cos, aplicando</p><p>técnicas avançadas como keyframing e easing. Posteriormente, utilizou máscaras e transições suaves para</p><p>criar uma narrativa visual coesa, integrando elementos grá�cos e texto de maneira harmoniosa. No momento</p><p>de inserir os desa�os de áudio, você queria demonstrar sua habilidade ao sincronizar perfeitamente o tempo</p><p>das animações com os elementos sonoros, criando uma experiência envolvente para o espectador. Também</p><p>fez questão de aplicar camadas de ajuste de forma inteligente, economizando tempo e proporcionando maior</p><p>�exibilidade criativa, a�nal era seu primeiro projeto, era necessário mostrar todo seu conhecimento</p><p>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 �nal: 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 desa�o no dinâmico mundo do Motion Design.</p><p>RESUMO VISUAL</p><p>Fonte:</p><p>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 �nal (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 �nais,</p><p>que são feitas em estúdio e com atores pro�ssionais.</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 de�nitivos:</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 de�ne â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 �chas-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 �uida 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í�co, 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 �lme:</p><p>Inicia-se a transferência das cenas digitais para a película de �lme. A montagem recebe ajustes �nos, a trilha e</p><p>os efeitos sonoros �nais. 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 �nal:</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 �nal.</p><p>PRINCIPAIS TÉCNICAS EMPREGADAS E MERCADO DA ANIMAÇÃO 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 pro�ssional.</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 era utilizada para fazer os</p><p>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 �uidez é 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 ou</p><p>personagem, que se repetem em ciclo ou loop para dar a sensação de movimento contínuo. Essa técnica pode</p><p>ser usada para realizar o caminhar dos personagens ou até o balançar das árvores, no cenário (Figura 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 �lmes 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: Intersaberes, 2023. E-book.</p><p>Xerogra�a:</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</p><p>animação. Ela foi evoluindo com o passar dos anos.</p><p>Processo APT:</p><p>APT signi�ca Animation Photo Transfer ou transferência da arte em células. É bem parecida com a Xerogra�a,</p><p>mas o trabalho dos artistas é fotografado em fotolito de alto contraste (fotolito é uma folha transparente e</p><p>resistente à luz, feita de poliéster com alta diferença entre áreas escuras e áreas claras do desenho, por isso</p><p>diz-se que possui alto contraste), podendo ser transferido para outras cenas através de uma imagem negativa</p><p>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 as</p><p>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, Je�rey Katzenberg, chamou de "animação tradigital". Muitos �lmes</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 �lme “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 com</p><p>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 tradicional e suas principais</p><p>etapas e técnicas. Entenderemos técnicas como: storyboard, animatic, modelagem, gravação e edição de</p><p>áudio, animação e a mixagem �nal, que são superimportantes e seguem uma ordem especí�ca para garantir a</p><p>qualidade e o cronograma de um projeto de animação. Veremos também as principais técnicas de animação</p><p>aplicadas ao mercado pro�ssional. Venha comigo para aprofundar ainda mais seus conhecimentos na</p><p>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</p><p>dissertação de Mestrado de Nelson Caramico, “Design de Produção na Animação Tradicional e na</p><p>Realidade Virtual 360” (UAM, 2020). Ela vai te ajudar a ter</p><p>elaborado pelo autor.</p><p>Aula 1</p><p>AUMONT, Jaques. A Imagem. Campinas: Papirus, 1993.</p><p>DONDIS, D. Sintaxe da Linguagem Visual. São Paulo: Martins Fontes, 1997.</p><p>KRASNER, Jon. Motion Graphic Design and Fine Art Animation: Principles and Practice.</p><p>MACHADO, Arlindo. A Arte do Video. São Paulo: Brasiliense, 1988.</p><p>_________, Arte e Midia. Rio de Janeiro: Jorge Zahar, 2007.</p><p>MUNARI, B. Das coisas Nascem Coisas. São Paulo: Martins Fontes, 1998.</p><p>RESNICK, E. Design for Communication: Conceptual Graphic Design Basics.</p><p>Hoboken: Wiley & Sons, 2003.</p><p>SANTAELLA, L. O Que é Semiótica. São Paulo: Editora Brasiliense, 1983.</p><p>SANTAELLA, L. e NÖTH, W. Imagem: Cognição, Semiótica, Midia. São Paulo:</p><p>Iluminuras, 1998.</p><p>TOULET, E. O Cinema, a Invenção do Século. São Paulo: Objetiva, 1988.</p><p>VELHO, J. Motion Graphics Design: Linguagem e Tecnologia. São Paulo: Martins Fontes, 2008</p><p>WOOLMAN, M. Motion Design: Moving Graphics for Television, Music Video, Cinema, and Digital</p><p>Interfaces. Brigton: Rotovision, 2004.</p><p>Aula 2</p><p>AUMONT, Jaques. A Imagem. Campinas: Papirus, 1993.</p><p>BLOCK, Bruce. The Visual Story: Creating the Visual Structure of Film, TV and Digital Media. 2. ed. Oxford:</p><p>Elsevier Inc., 2008.</p><p>DONDIS, D. Sintaxe da Linguagem Visual. São Paulo: Martins Fontes, 1997.</p><p>JACKSON, C. After E�ects And Cinema 4D Lite. eBook. 3d Motion Graphics And Visual E�ects Using Cineware.</p><p>Editor: TAYLOR AND FRANCIS, Set. 2014.</p><p>REFERÊNCIAS</p><p>KRASNER, J. Motion Graphic Design and Fine Art Animation: Principles and Practice.</p><p>MACHADO, A. A Arte do Video. São Paulo: Brasiliense, 1988.</p><p>_________, Arte e Midia. Rio de Janeiro: Jorge Zahar, 2007.</p><p>MUNARI, B. Das coisas Nascem Coisas. São Paulo: Martins Fontes, 1998.</p><p>RESNICK, E. Design for Communication: Conceptual Graphic Design Basics.</p><p>Hoboken: Wiley & Sons, 2003.</p><p>SANTAELLA, L. O Que é Semiótica. São Paulo: Editora Brasiliense, 1983.</p><p>SANTAELLA, L. e NÖTH, W. Imagem: Cognição, Semiótica, Midia. São Paulo:</p><p>Iluminuras, 1998.</p><p>TOULET, E. O Cinema, a Invenção do Século. São Paulo: Objetiva, 1988.</p><p>VELHO, J. Motion Graphics Design: Linguagem e Tecnologia. São Paulo: Martins Fontes, 2008</p><p>WOOLMAN, M. Motion Design: Moving Graphics for Television, Music Video, Cinema, and Digital</p><p>Interfaces. Brigton: Rotovision, 2004.</p><p>Aula 3</p><p>EISENSTEIN, S. A Forma do Filme. Rio de Janeiro, Jorge Zahar Editor, 2002.</p><p>HALAS, J. & M, R. A Técnica da Animação Cinematográ�ca. Rio de Janeiro,Editora Civilizacao Brasileira, 1979.</p><p>LAYBOURNE, K. The Animation Book. New York, Three Rivers Press, 1998.</p><p>LUCENA Jr, A. Arte da Animação – Técnica e Estética Através da História. São Paulo, Editora SENAC, 2002.</p><p>WILLIAMS, R. The Animator’s Survival Kit. New York, Faber and Faber, 2001.</p><p>WOOLMAN, M. Motion Design: Moving Graphics for Television, Music Video, Cinema, and Digital</p><p>Interfaces. Brigton: Rotovision, 2004.</p><p>Aula 4</p><p>AKENINE M. T., HAINES, E. e HOFFMAN, N. Real-Time Rendering, third ed. A. K. Peters, Ltd., Natick, MA, USA,</p><p>2008.</p><p>DOS SANTOS, M. C. e PEDRINI, H. Renderização de Cenas Tridimensionais Interativas em Computadores</p><p>de Baixo Desempenho. In Anais do V Workshop de Realidade Virtual e Aumentada (WRVA’2008) (Bauru, SP,</p><p>2008), pp. 108.</p><p>HALAS, J. & M, R. A Técnica da Animação Cinematográ�ca. Rio de Janeiro,Editora Civilizacao Brasileira, 1979.</p><p>Imagem de capa: Storyset e ShutterStock.</p><p>KNUTH, D. The Art of Computer Programming. Vol 1, Fundamental Algorithms, New Millennium, 1997.</p><p>LAYBOURNE, K. The Animation Book. New York, Three Rivers Press, 1998.</p><p>LUCENA Jr, A. Arte da Animação – Técnica e Estética Através da História. Sao Paulo,Editora SENAC, 2002.</p><p>VELHO, J. Motion Graphics Design: Linguagem e Tecnologia. São Paulo: Martins Fontes, 2008. Escola</p><p>Superior de Desenho Industrial, Universidade Estadual do Rio de Janeiro, Rio de Janeiro, 2008.</p><p>WATT, A. 3D computer graphics. Addison-Wesley Pub. Co edition, 1993.</p><p>Aula 5</p><p>AUMONT, Jaques. A Imagem. Campinas: Papirus, 1993.</p><p>DONDIS, D. Sintaxe da Linguagem Visual. São Paulo: Martins Fontes, 1997.</p><p>KRASNER, Jon. Motion Graphic Design and Fine Art Animation: Principles and Practice.</p><p>MACHADO, Arlindo. A Arte do Video. São Paulo: Brasiliense, 1988.</p><p>_________, Arte e Midia. Rio de Janeiro: Jorge Zahar, 2007.</p><p>MUNARI, B. Das coisas Nascem Coisas. São Paulo: Martins Fontes, 1998.</p><p>RESNICK, E. Design for Communication: Conceptual Graphic Design Basics.</p><p>Hoboken: Wiley & Sons, 2003.</p><p>SANTAELLA, L. O Que é Semiótica. São Paulo: Editora Brasiliense, 1983.</p><p>SANTAELLA, L. e NÖTH, W. Imagem: Cognição, Semiótica, Midia. São Paulo:</p><p>Iluminuras, 1998.</p><p>TOULET, E. O Cinema, a Invenção do Século. São Paulo: Objetiva, 1988.</p><p>VELHO, J. Motion Graphics Design: Linguagem e Tecnologia. São Paulo: Martins Fontes, 2008.</p><p>WOOLMAN, M. Motion Design: Moving Graphics for Television, Music Video, Cinema, and Digital</p><p>Interfaces. Brigton: Rotovision, 2004.</p><p>https://storyset.com/</p><p>https://www.shutterstock.com/pt/</p><p>outras perspectivas sobre a importância da</p><p>animação digital em sua vida pro�ssional.</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</p><p>por Mariana Ferreira de Freitas. Este livro encontra-se disponível em nossa Biblioteca Virtual.</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 de�nir 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 solidi�car o projeto, fazer o</p><p>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 prévia</p><p>da animação). Aprofundaremos nossos conhecimentos nessas etapas tão importantes do desenvolvimento da</p><p>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 de�nição de público-alvo, o método de</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, antes de se começar</p><p>a produção da animação em si, é preciso de�nir e desenvolver a ideia ou visão dos produtores, dando</p><p>corpo ao projeto.</p><p>produção, os softwares utilizados, a linguagem narrativa e o per�l 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 projetual,</p><p>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 de�nidas a �nalidade 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 número</p><p>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 con�ito 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 desa�os 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í�co.</p><p>Existem softwares e diversos manuais que ajudam na formatação e padronização de roteiros. O mais usado</p><p>por roteiristas pro�ssionais é o Final Draft (desenvolvido pela Final Draft, Inc). Mas é possível usar softwares</p><p>mais simples como: Celtx (criado pela Celtx Inc.) ou Story Writer (desenvolvido pela Amazon), que são</p><p>gratuitos.</p><p>Em paralelo à produção da narrativa/roteiro, é feito o desenvolvimento visual da obra, em que se de�ne o</p><p>estilo de traço e o movimento da animação. De�ne-se também a criação de personagem e cenário.</p><p>Análise de Complexidade do projeto</p><p>Nesta etapa, veri�ca-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 de�nição de pro�ssionais, 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 de�niu a �nalidade - para cinema, estabelecendo um orçamento substancial. O público-alvo: crianças</p><p>e suas famílias. O projeto envolvia um grande número de personagens e cenários, além de exigir técnicas</p><p>avançadas de animação 2D.</p><p>Premissa:</p><p>No mundo africano dos animais, Simba, um jovem leão, enfrenta desa�os 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 �nanceira. Com as etapas de�nidas, o projeto é ajustado para garantir</p><p>um �uxo de trabalho e�ciente 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 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 desta</p><p>etapa são: storyboard e animatic. Neste bloco, aprofundaremos nosso aprendizado sobre o roteiro e o</p><p>storyboard, e a estreita relação existente entre eles. No próximo bloco focaremos nossa atenção no animatic.</p><p>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 roteiro,</p><p>é uma ferramenta superimportante para auxiliar o roteirista a montar a ordem das cenas do �lme, dando</p><p>ritmo à animação.</p><p>A partir do argumento e da escaleta, o roteirista consegue fazer os diálogos</p><p>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 pro�ssional, sendo importante segui-los para ter</p><p>maior credibilidade no mercado. O mais comumente utilizado, principalmente para �lmes, é chamado Master</p><p>Scenes (cenas mestras), que permite que cada minuto da animação seja representado em uma página,</p><p>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 pro�ssionais é o Final Draft, mas para</p><p>pro�ssionais 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 �lmagem 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 �uidez 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 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, e</p><p>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>�uirá, e como está indo o projeto em fase inicial. Pode incluir efeitos de câmera, movimentos de personagens,</p><p>elementos visuais e sonoros, que são decisivos para colocar em prática e ter noção se o planejamento está</p><p>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 �que 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 modi�cado para se atingir os objetivos.</p><p>Com a produção �nal do animatic (Figura 2), começa a escolha do elenco principal de vozes que serão</p><p>utilizadas na mixagem �nal 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 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 �lmes. 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 e</p><p>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, o</p><p>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</p><p>popular, 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>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 de�ne 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 um</p><p>todo.</p><p>Você verá como os aspectos visuais dos personagens, suas representações grá�cas, padrões e de�niçõ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 �m, 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>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 emocionais, para</p><p>dar vida à narrativa que está sendo desenvolvida para a animação.</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 personi�caçã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>identi�car.</p><p>1. Design</p><p>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 personalidades,</p><p>que se baseia na psicologia arquetípica desenvolvida por Carl Jung. Carl Jung (1875-1961) foi um renomado</p><p>psicólogo suíço que desenvolveu a teoria dos arquétipos na psicologia analítica. Ele acreditava que certos</p><p>padrões de comportamento e personalidade são inerentes à humanidade, presentes em nosso inconsciente</p><p>coletivo. Esses arquétipos, como o herói, a sombra e o mentor, são re�exos universais de emoções e</p><p>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 desa�os 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 desa�os. 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 �nalizar 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 desa�o 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 desa�os 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 �gura 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</p><p>que é 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 identi�car 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á�cas, padrões e</p><p>de�niçõ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 classi�caçã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 con�guraçã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 re�etirá 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 de�nida, 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 de�nir 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 �xe 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 �na e quadril</p><p>largo. A utilização desse aspecto in�uenciará 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 simpli�cado, conhecido como cartonagem, apresenta a ideia mais geral dos personagens,</p><p>enquanto a representação realista é mais limitada a indivíduos especí�cos. Há uma liberdade criativa para</p><p>designers e artistas, mas que devem atender aos requisitos da produção da animação, bem como as</p><p>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 simpli�cada, com formas geométricas e</p><p>características exageradas. Esse estilo de cartonagem possibilita maior �exibilidade criativa, permitindo que os</p><p>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</p><p>design grá�co 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 identi�cará a sua personalidade,</p><p>idade, ocupação, status social e estilo de vida. Ajuda a diferenciar de outros personagens da mesma história e</p><p>pode re�etir 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 �nal.</p><p>Vamos lá!</p><p>Conceito:</p><p>O model sheet (ou �cha modelo) é um documento que contém uma série de ilustrações detalhadas que</p><p>de�nem 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 �chas-modelos devem conter: �gura inteira do personagem em várias posições, volta de 180 graus (turn</p><p>around), close-ups faciais, modelos de mãos, notas de como o corpo deve ser construído, roupas e acessórios</p><p>dos personagens, detalhes dos trajes, posições que o caracterizam. Deve trazer tendências da linguagem</p><p>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 é signi�cativa e inclui os seguintes aspectos:</p><p>Consistência Visual: serve como guia visual para garantir uniformidade em todas as cenas da animação. Isso</p><p>é crucial para evitar discrepâncias que possam distrair o espectador;</p><p>Padronização: estabelece proporções, ângulos, poses e expressões faciais especi�cas 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 Identi�cação: auxilia na identi�caçã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 visual</p><p>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 �delidade 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 de�niçã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 �nal. 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, é</p><p>importante você se aprofundar e saber mais detalhes de como isso é feito. O livro “Construção de</p><p>Personagens” é um Ebook disponível na Biblioteca Virtual e aborda o tema da aula com mais detalhes e</p><p>com exemplos bem pertinentes à área de design. Então, eu super indico e desejo uma ótima leitura a</p><p>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</p><p>�lmes Star Wars, conhecidos como Guerra nas Estrelas, no Brasil, que são fortemente calcadas em</p><p>histórias mitológicas.</p><p>Assim sendo, o universo �ccional da saga foi incorporado naturalmente na cultura pop mundial, se</p><p>tornando uma espécie de mitologia do �nal do século XX e início do século XXI. Parte das informações</p><p>também foram consultadas em Vogler (2006), visto que o autor se fundamenta na teoria de Campbell.</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 coisas</p><p>inanimadas, surgindo, assim, a animação. Isso começou com pinturas rupestres em cavernas (há mais 40 mil</p><p>anos), depois passou a estar em quadros e objetos, no teatro – como no teatro de sombras (Figura 1) e como</p><p>meio de divertimento e arte. A animação digital iniciou-se com a criação dos brinquedos ópticos, fotogra�a e</p><p>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 de�nidas as fases de processo de produção (pré-</p><p>Aula 5</p><p>REVISÃO DA UNIDADE</p><p>produção, produção e pós-produção), que trouxeram mais organização e otimização ao resultado �nal</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 (pro�ssional), 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 cada</p><p>cena, com storyboard. O storyboard é composto por rascunhos das cenas, que detalham</p><p>a iluminação,</p><p>os personagens, objetos e ambientes (Figura 2). Sua versão �nal fará parte do animatic, que é uma</p><p>representação prévia da animação �nal, que une as imagens do storyboard com as gravações de áudio</p><p>e músicas, para de�nir 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 recursos para otimização de produção. 2018.</p><p>Uma das partes mais importantes e desa�adoras 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 de�nidos para dar vida à</p><p>narrativa que está sendo criada na animação. Antes mesmo de se fazer as representações grá�cas e</p><p>visuais dos personagens, deve ser feita a construção psicológica e a de�niçã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 de�niçã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 de�nição dos aspectos psicológicos e visuais dos personagens, são criados os model sheets, ou �chas-</p><p>modelos de cada um deles, que devem conter: �gura inteira do personagem em várias posições, volta de</p><p>180 graus, close-ups faciais, modelos de mãos, detalhes dos trajes e as posições que os caracterizam</p><p>(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 etapa</p><p>para se obter um bom resultado no projeto �nal.</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 especi�caçõ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 classi�caçã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 a�nidade 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 para</p><p>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, especi�cando 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 �cha 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> Re�ita</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 de�ni-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á�co</p><p>aplicada ao design de personagens para animação. Este trabalho foi feito em 2014, e aborda muito</p><p>bem estes 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 classi�cação livre, ou seja, temos que ter cuidado para não usar o</p><p>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 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 de�nir como será esse personagem, se vai ser mais brincalhão, mais dramático ou mais irônico e</p><p>como ele poderá superar os obstáculos. Ele(a) será herói e protagonista da história. Você pode até pensar em</p><p>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 �lme Valente (Disney, Pixar 2012), a Merida. Ela tem um estilo que se encaixa bem</p><p>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 foi</p><p>descrito, ele pode ser humanoide ou híbrido, para se encaixar melhor a narrativa. As possibilidades são vastas</p><p>e podem enriquecer signi�cativamente a narrativa. Vou citar alguns exemplos para te ajudar em sua 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</p>