Fluxo de trabalho do projeto de design de movimento: do script à animação final

1. Apresentação: Olá a todos. Sou Tamer. Sou designer de movimento e ator comercial baseado no Reino Unido. Trabalho como designer de movimento há cinco anos. Eu me formei em animação por computador e artes de comunicação. Ser ator comercial há seis anos e trabalhar com diferentes diretores e produtores me ensinaram que planejar, planejar e planejar é fundamental para um projeto bem elaborado. Isso me ajudou a adquirir muitas técnicas e perspectivas criativas que posso aplicar ao meu trabalho como designer de movimento. Nesta aula, você aprenderá a lidar com a explicação do seu projeto de vídeo. Em resumo, vídeos animados explicativos são usados para mostrar como um produto, serviço ou empresa funciona. Você começará visualizando sua animação usando um roteiro visual David. Você estará aprendendo a construir uma base sólida para o seu trabalho, colocando em storyboard sua ideia e criando um animado. Você realmente cria placas de design para mostrar ao cliente como será a peça final. Finalmente, você adicionará a reprodução da animação. Vou guiá-lo passo a passo desde o momento em que levarmos o roteiro do cliente até a animação final. Eu recomendo que você tenha uma boa base em animação e design e policial, usaremos o Illustrator, Photoshop e o After Effects. No final desta aula, você terá uma peça animada bem elaborada pronta para o seu portfólio. Vamos começar. 2. Projeto de classe: Nesta lição, vou falar sobre o projeto da classe. Para ser contratado para trabalhar em projeto de design de movimento, você precisa de um cliente em primeiro lugar, e foi isso que eu criei para você. Um cliente hipotético chamado HunterGoes. É um aplicativo de entrega que pode fornecer qualquer coisa que você possa pensar. O objetivo do cliente é levar as pessoas a baixarem o aplicativo. Eles precisam de um 22º vídeo explicativo para mostrar às pessoas seu serviço. O vídeo ficará em toda a web, e o projeto e os recursos nos quais você pode encontrar a diretriz de marca do cliente junto com um script no qual estaremos trabalhando. Nas próximas lições, mostrarei como lido com o processo de produção passo a passo até chegarmos à animação final. De como transformamos o roteiro em um roteiro visual, esboçando storyboard e fazendo animatic, criando barcos de design, fazendo uma sequência temática de tabuleiro e, finalmente, adicionando uma animação lúdica. Também mostrarei como usar plataformas para inspiração, como o Pinterest. Na descrição do projeto, fiz um roteiro para você para que você possa seguir e postar seu trabalho em andamento enquanto estiver assistindo às lições. Estarei guiando você em todos os desafios que você possa enfrentar. Você não precisa imitar todas as decisões criativas que eu tomo. Você pode ter suas próprias ideias, design e animação. Você pode usar minha arte se não quiser projetar o seu próprio, você pode encontrar todos os ativos na seção de recursos. No final desta classe, você terá uma base sólida sobre como lidar com um projeto de design de movimento a partir do zero. Você pode aplicar esse fluxo de trabalho a qualquer escala de projeto de design de movimento. 3. Script visual: Nesta lição, darei o primeiro passo para dissecar o roteiro e a diretriz da marca foi recusada. Certo, aqui tenho uma Diretriz da marca HunterGoes. Você pode baixá-lo no painel de recursos. Vamos abrir o arquivo. Aqui tenho a diretriz da marca, o arquivo de ilustração do logotipo e a narração. Vamos abrir o PDF. Ok, aqui tenho o logotipo principal da marca. Consiste em duas partes, a marca da palavra e a marca da marca. Eles não podem ser separados de qualquer forma. Certo. Aqui eu tenho as variações do logotipo. Não consigo usar o logotipo em um plano de fundo, diferente dessas três opções de cores. Aqui eu tenho a paleta de cores, as cores primárias e as cores secundárias e a fonte Arial Rounded. Aqui eu tenho esse roteiro. Este script que estaremos trabalhando neste projeto, HunterGoes é a mais nova e mais legal plataforma de entrega online. Podemos escolher e deixar qualquer coisa para você de alimentos, eletrônicos, mantimentos, livros e muito mais. Tudo o que você precisar, sempre que precisar, baixe o aplicativo agora e aproveite o pedido. HunterGoes, nós pegamos você. Ok, depois de verificar a diretriz da marca e o roteiro, nosso desafio aqui é transformar esse script em um storyboard e depois disso, fazer a animação. Mas antes disso, devemos dar alguns passos para construir uma base sólida para o nosso trabalho. Começaremos fazendo um script visual rápido. script visual nos ajuda a tirar as ideias da nossa cabeça e como estamos visualizando todas as frases do roteiro. Ok, aqui tenho uma tabela que fiz no aplicativo de páginas. À esquerda, tenho o voice-over e à direita tenho o visual. O que vou fazer agora é copiar e colar o script na seção de narração. Vamos selecionar todo o script, comando C e comando V para colar. Certo, aqui tenho o roteiro. Vou tornar o texto menor. Vamos ter alguma distância entre essas duas frases. Novamente, o que vou fazer agora é visualizar todas as frases neste roteiro. Não preciso me preocupar com os detalhes. É apenas uma maneira de tirar as ideias da minha cabeça. Certo, vamos começar. A HunterGoes é a mais nova e mais legal plataforma de entrega online. O que estou visualizando aqui é uma vista lateral, uma cena de rua e um carro de entrega passando, então um smartphone sobe por trás do veículo. Digamos que uma vista lateral de um carro de entrega, passando pela estrada. Em seguida, um smartphone sobe por trás do veículo. Certo. Podemos escolher e deixar qualquer coisa para você. Aqui posso mostrar algumas caixas de entrega caindo no topo do carro. Digamos que as caixas comecem a cair no topo do carro com a câmera fechada fechada. De alimentos, eletrônicos, mantimentos, livros e muito mais. Ok, aqui posso ter ícones representando esses serviços aparecendo ao redor das caixas. Ícones aparecem ao redor das caixas. Tudo o que você precisar, sempre que precisar. Aqui eu posso animar essas duas linhas de forma lúdica. Ok, digamos que o texto animado de uma forma lúdica. Faça o download do aplicativo agora e aproveite o pedido. Aqui posso fazer a transição para o smartphone, mostrando o aplicativo com o download, o texto do aplicativo ao lado. Digamos que um smartphone mostrando o aplicativo apareça no lado esquerdo com o texto “Baixe o aplicativo à direita” Ok, HunterGoes. Nós pegamos você. Deslize a transição para o logotipo da marca com o slogan embaixo dele. Terminamos. Lembre-se de que você pode criar seus próprios visuais. Tente não complicar isso. Você pode se concentrar no fluxo de trabalho e aproveitar o processo. Certifique-se de publicar seu trabalho no painel do projeto. Vejo você na próxima lição. 4. Inspire-se: Nesta lição, vou mostrar como usar o Pinterest para fins de design. É uma ótima plataforma para reunir e organizar inspiração. Se você já usa o Pinterest e está familiarizado com este tópico, sinta-se à vontade para pular esta lição. Abrimos o site do Pinterest e obtemos este formulário de inscrição. Vamos nos inscrever em uma conta. Escreva um endereço de e-mail, crie uma senha e sua idade. Pressione “Continuar”. Agora temos alguns passos que precisamos seguir em seguida. Aqui podemos escolher cinco tópicos nos quais você está interessado. Vou escolher tópicos relacionados ao design e clicar em “Concluído”. Aqui você pode digitalizar o código do seu telefone para baixar o aplicativo. Não preciso dele no momento. Agora, o Pinterest está construindo uma página para todos os tópicos que escolhi. Agora vamos dizer que eu gosto desse design e preciso salvá-lo. Tudo o que preciso fazer é passar por cima dele e clicar em “Salvar”. Agora eu tenho isso no meu perfil. Vamos verificar. Esta é a imagem que eu salvei. Todas as minhas coisas salvas vão aqui. Para tornar as coisas mais organizadas, podemos criar quadros. Você pode clicar neste sinal de mais e clicar em “Quadro”. Vou nomear as ilustrações do quadro. Você pode verificar esta marca aqui se quiser que seu quadro seja secreto. Clique em “Criar”. Agora recebo algumas sugestões que posso salvar. Gosto deste. Feito. Vamos voltar ao meu perfil. Agora você pode ver meu quadro de ilustrações. Vamos ver como podemos salvar mais imagens neste quadro. Pressione este ícone do Pinterest para ir para a página inicial. Vou procurar ilustração estilizada de carro. Gosto deste. Vou clicar nesta seta e seguro para o quadro de ilustração. Agora temos a imagem salva no meu quadro de ilustrações. Agora, e se eu quiser salvar uma imagem fora do ecossistema do Pinterest. Mostrarei como se você estiver usando o Chrome, abra uma nova guia, acesse apps Web Store e procurarei pelo Pinterest. Clique no botão Salvar do Pinterest, adicione à extensão de adição do Chrome. Clique neste ícone de extensão e ative o botão pin. Agora digamos que eu goste dessa imagem na Shutterstock e preciso salvá-la no meu quadro de ilustrações. O que eu criei no Pinterest, tudo o que preciso fazer é passar por cima da imagem e salvar no quadro de ilustração. Se eu voltar aqui, podemos encontrar o carro salvo no meu quadro de ilustrações. Basicamente, isso é tudo o que você precisa saber sobre o Pinterest. É uma ótima ferramenta para reunir e organizar inspiração. Vejo você na próxima lição. 5. Moodboard e tratamento: Agora que juntei meus pensamentos para esse local usando roteiro visual, nesta lição, vou reunir alguma inspiração para minha peça. Os clientes não nos mostraram nada além do roteiro, então é nosso trabalho agora visualizar seus pensamentos e os nossos. É quando o moodboard é útil. Ao gastar algum tempo reunindo referências e inspiração, você poderá ver seus objetivos e, finalmente, seu design final. Aqui estão meus pinos reunidos para o moodboard. É um design baseado em ilustração. Eu gosto aqui da vista lateral do barramento com o plano de fundo mínimo em termos de design e valor de cor. Veja como é elegante a fonte aqui e o bom contraste nas cores. Vamos ver. Acho que este é um carro de entrega estilizado legal. É assim que estou visualizando os ícones aqui que aparecerão ao redor do ônibus. Isso é, em geral, minhas referências para esta peça. Vou mostrar agora como vou criar meu moodboard usando esses pinos no Photoshop. Agora estou no Photoshop. Como você pode ver aqui, criei um monte de caixas para facilitar minha vida quando começo a intrigar minhas referências. Vou te mostrar como daqui a pouco. Você pode ajustá-lo como quiser ou criar seu próprio design de moodboard. Eu carreguei este modelo de moodboard para você. Você pode encontrá-lo no painel Recursos. Aqui está a paleta de cores da marca. Acho que posso usar alguns deles neste moodboard. Começarei a receber algumas dessas imagens do Pinterest. Eu tenho todas as imagens, agora. Vou começar a reorganizá-los e ver como eles se encaixam. Primeiro, vou converter cada imagem em objeto inteligente para que você possa redimensionar a imagem o quanto quiser sem causar degradação ou perda de qualidade. Vou usar a máscara de recorte para posicionar essas imagens dentro das caixas. Esta é a Camada 02. Vou arrastar esta imagem e colocá-la acima da Camada 02. Posso pressionar “Comando” e clicar para criar máscara de recorte ou clicar com o botão direito do mouse, máscara de recorte. O que a máscara de recorte faz aqui é que a caixa define ou controla os limites visíveis da imagem. Vou aplicar o mesmo método ao resto das imagens. Vou inserir algumas cores da marca no moodboard para que ele se sinta mais relacionado ao tipo da HunterGo. Vou adicionar uma camada de forma acima de todas as imagens. Eu vou multiplicar e farei a opacidade 15%. Esta é apenas uma maneira de fazer com que o conselho se reúna e se torne mais relacionado à identidade da marca. Agora que terminamos a elaboração do moodboard, vamos passar para o próximo passo e escrever o tratamento. O tratamento é o tipo de documento que fornece um esboço básico de uma ideia. Geralmente é curto e permite que o cliente ou o leitor entendam do que será o vídeo. Vou começar a escrever o tratamento agora. A cena começa com um carro de entrega passando pela estrada. Um smartphone mostrando o aplicativo aparece por trás do veículo. O smartphone desce e a câmera aumenta o zoom para o topo do carro e, em seguida, as caixas de entrega começam a cair nele. Ícones aparecem em torno das caixas em forma semicircular. O carro sai do quadro e, em seguida, o texto animado aparece, o que você precisar, sempre que precisar, de forma lúdica. O texto desce e sai do quadro. O smartphone aparece e o texto, baixe o aplicativo, entra no quadro do lado direito. Deslize a transição para o logotipo de um HunterGo com o slogan que colocamos você por baixo dele. Tenho meu moodboard e escrevi meu tratamento. Agora podemos passar para a próxima lição. 6. Como desenhar um storyboard: Eu acabei com meu conceito. Nesta lição, subirei a escada onde mostrarei meu cliente o que estou pensando visualmente para esta peça usando animatic. O que é animatic Animatic é um storyboard animado, ou em outras palavras, é uma apresentação de slides de imagens que retratam movimentos. Para criar um animático, primeiro precisamos fazer um storyboard. Essas imagens de storyboard são então cortadas juntas para fazer uma animação de rascunho áspero. Esse método dá ao criador uma ideia de como será a animação final. Não preciso que você aqui se preocupe com suas habilidades de desenho. Eu, pessoalmente, não sou um artista de desenho, é apenas uma maneira de ver como a história fluirá. Tenho aqui meu modelo de storyboard. Você pode baixá-lo no painel Recursos, se quiser. Você pode digitalizá-lo e usá-lo para esboçar. Eu acabei de esboçar o storyboard. O que preciso fazer agora é digitalizar meus papéis de storyboard e importá-los para o Photoshop, para que eu possa cortar as imagens separadamente. Você pode usar o aplicativo CamScanner. Este aplicativo permite digitalizar documentos e compartilhar as imagens como JPEG ou PDF. Ou você pode usar seu smartphone para capturar seus papéis de storyboard, o que funcionar para você. Agora tenho as imagens digitalizadas no Photoshop. Preciso começar a cortar e separar cada caixa em seus próprios quadros. Começarei a cortar a primeira imagem. Clique com o botão direito do mouse, Rasterize, para convertê-lo em pixels para que eu possa começar a cortar. Escolherei a ferramenta poligonal ou pressionarei L no teclado. Faça a seleção. Comando C para copiar e Shift comando V para colá-lo no mesmo local. Você também pode usar a ferramenta retangular ou M no teclado para fazer sua seleção. Vou avançar rapidamente esse processo , pois é um trabalho simples. Eu terminei de cortar cada quadro do storyboard, agora preciso encaixar todas as imagens à composição. Mas antes disso, preciso converter, novamente as imagens para Smart Object para manter sua qualidade ao ampliá-las. Você pode refazer suas imagens digitalizadas se achar que elas não estão claras e precisa de algum retoque para parecer mais arrumada. Eu retraçaria algumas das imagens agora. Certifique-se de rasterizar suas imagens para poder desenhar sobre elas. Você pode usar a ferramenta Girar visualização ou Adicionar no teclado. Para girar a visualização para que você possa se sentir mais confortável rastreando suas imagens. Usarei a ferramenta Pincel ou pressionarei B no teclado. Certifique-se de que depois de terminar todas as imagens para convertê-la novamente em Objeto Inteligente. Acho que não gosto das nuvens aqui, então as removerei da cena. Mais uma coisa a fazer, preciso mudar o texto e torná-lo mais legível e arrumado. Vou usar a ferramenta Tipo ou pressionar T no teclado para criar um texto. Vou mudar o logotipo também. Estes são alguns ajustes que estou fazendo para tornar o animatic mais decente ao enviá-lo para o cliente. Já acabei com os quadros, na próxima lição vou fazer o animatic. 7. Como cortar o Animatic 01: Quando se trata de edição de vídeo, Adobe Premiere Pro é a melhor ferramenta que podemos usar. É um software fácil, especialmente para iniciantes, então não se preocupe se você não o usou antes. Nesta lição, vou mostrar como cortar um animatic e ver o V0 fornecido com o visual usando este software de edição. Aqui eu tenho os quadros separados. Agora preciso exportá-los para poder usá-los para edição. Exportar. Escolhemos o local e aqui estão eles. Abrimos o Adobe Premiere Pro. Clique em “Novo projeto”. Nomeie o projeto, ele fica animático. Escolha o local e pressione “Ok”. Depois de abrir o Premiere Pro, você verá esse espaço de trabalho de edição. Caso contrário, você pode ir para Windows, Workspace, edição. Aqui está o painel do projeto onde teremos todos os nossos ativos nos quais estaremos trabalhando. Clique duas vezes para importar minhas imagens. Arraste e pressione “Importar”. Agora tenho todas as imagens no painel do meu projeto. Criarei uma nova pasta para que eu possa ter todos os quadros em uma pasta. Agora vou selecionar todos os meus quadros e arrastá-los para a linha do tempo. Agora eu tenho todos os meus quadros em ordem. Vou verificar a taxa de quadros. Vou deixá-lo em 25 quadros por segundo. Usando a ferramenta de seleção ou V no teclado, posso clicar e arrastar os quadros. Ao ativar a ferramenta Snap, depois a linha do tempo ou S no teclado, você pode fazer dois quadros se encaixarem. Você pode ampliar e a linha do tempo arrastando esta barra deslizante ou pressionando a tecla menos ou mais no teclado. Posso arrastar isso para cima e para baixo para ampliar a linha do tempo do vídeo para que eu possa ver as miniaturas. Aqui temos a faixa de áudio e a faixa de vídeo. Os arquivos de áudio só podem ir para a faixa de áudio e os arquivos de vídeo vão para faixas de vídeo. Agora vou importar os ativos de áudio, o voice-over e a faixa de música. Clique duas vezes no arquivo para que eu possa ver a fonte no painel acima. Clique duas vezes nos links para fechar toda a minha plataforma de entrega. Podemos pegar e deixar qualquer coisa para você de alimentos, eletrônicos, mantimentos, livros e muito mais, o que você precisar, sempre que precisar. Faça o download do aplicativo agora e aproveite o pedido. Country Gross, pegamos você. Vou cortar as áreas que não preciso da narração. Vou arrastar este cursor na linha do tempo aqui e clicar em “Marcar” ou eu teclado e vou aqui e clique em “Marcar out” ou O no teclado. Agora eu pressiono este ícone, Sobrescrever, e tenho o voice-over na faixa de áudio. Vou arrastar e soltar a música também. Como eu disse antes, você pode arrastar e mover os ativos usando a ferramenta de seleção. Às vezes, acho mais eficiente usar a ferramenta Rolling Edit. Esta ferramenta permite que você pegue os pontos de edição entre dois clipes para que você possa clicar e arrastar para onde quiser. Agora vou começar a sincronizar minha voz com as imagens que tenho. Primeiro, vou silenciar a faixa musical pressionando esta letra M. Acho que tenho alguns problemas nos primeiros três quadros. Vou embaralhar eles. [inaudível] É a mais nova e mais legal plataforma de entrega online. Podemos escolher e deixar qualquer coisa para você. Da plataforma de alimentos, podemos pegar. Uma coisa que esqueci de fazer no início é selecionar todos os meus quadros quando os importei para importei a sequência e escalá-los para o tamanho do quadro. Para que eu possa selecionar todos os meus quadros, clicar com o botão direito, dimensionar para o tamanho do quadro. Mas acho que tenho alguns problemas com meus quadros. Se você puder ver esse traço preto ao redor dos quadros, acho que isso é da coisa de corte no Photoshop. Mas isso não é um problema, posso corrigi-lo mais tarde manualmente. 8. Como cortar o Animatic 02: Podemos escolher e deixar qualquer coisa para você de alimentos, eletrônicos, mantimentos, livros e muito mais. Tudo o que você precisar sempre que precisar. Baixe o aplicativo agora e aproveite o pedido. Hunter Goes, nós pegamos você. Agora, que acabei de sincronizar meus visuais ou meus quadros com o voice-over, agora vou fazer alguma mixagem entre a narração e a faixa de música que temos. Primeiro, vou dessilenciar a faixa musical. Eu vou para o áudio e usar esse mixer, eu acho. Cada camada tem o volume específico, digamos, neste mixer. Digamos que meu voice-over esteja no A2, para que possamos brincar com A2 no mixer. Agora é coisa de tentativa e erro. Vou testar e repetir várias vezes para obter o melhor resultado para o meu áudio. Hunter Goes é a mais nova e mais legal plataforma de entrega online. Podemos escolher e deixar qualquer coisa para você de alimentos, eletrônicos, mantimentos, livros e muito mais. Tudo o que você precisar, sempre que precisar. Baixe o aplicativo agora e aproveite o pedido. Hunter Goes, nós pegamos você. [MÚSICA] [RUÍDO] Acho que devo baixar um pouco o volume para a música. Hunter Goes é a mais nova e mais legal plataforma de entrega online. Podemos escolher e deixar qualquer coisa para você de alimentos, eletrônicos, mantimentos, livros e muito mais. Tudo o que você precisar sempre que precisar. Baixe o aplicativo agora e aproveite o pedido. Hunter Goes, nós pegamos você. Meu principal objetivo aqui é que eu quero que a narração seja clara o suficiente. Hunter Goes é a mais nova e mais legal plataforma de entrega online. Podemos escolher e deixar qualquer coisa para você de alimentos, eletrônicos, mantimentos, livros e muito mais. Tudo o que você precisar sempre que precisar. Baixe o aplicativo agora e aproveite o pedido. Hunter Goes, nós pegamos você. [MÚSICA] Aqui eu quero estender esse quadro um pouco. Nós pegamos você. Hunter Goes é a mais nova e mais legal plataforma de entrega online. Podemos escolher e soltar [inaudível]. Aqui posso selecionar ferramenta de barbear ou C no teclado para cortar minha faixa de música. Agora, o que vou fazer é fazer minha música desaparecer no final. Vou aumentar isso, pressionar esta tecla e ir para o volume Track Frames. Eu crio essa chave e outra no final. Agora minha faixa de música desaparece muito mais suave. Hunter Goes é a mais nova e mais legal plataforma de entrega online. Podemos escolher e deixar qualquer coisa para você de alimentos, eletrônicos, mantimentos, livros e muito mais. Tudo o que você precisar sempre que precisar. Baixe o aplicativo agora e aproveite o pedido. Hunter Goes, nós pegamos você. [RUÍDO] Agora vou corrigir o dimensionamento dos quadros. Posso corrigi-lo clicando no quadro ou nas imagens que eu quero dimensioná-lo para ajustar o tamanho da composição e ir para os controles de efeito de edição. Posso brincar com a escala para que ela possa caber na composição. Vou aplicar o mesmo método ao resto dos quadros. Eu terminei com a edição minha animática. Agora, vou exportar. Vamos para Mídia de exportação de arquivos. Vou escolher o formato H264 com alta taxa de bits, escolher o local e clicar em Exportar. Hunter Goes é a mais nova e mais legal online minha plataforma de entrega. Podemos pegar e deixar qualquer coisa para você de alimentos, eletrônicos, mantimentos, livros e muito mais. Tudo o que você precisar sempre que precisar. Baixe o aplicativo agora e aproveite o pedido. Hunter Goes, nós pegamos você. Esta é minha representação aproximada dos visuais animados. Ele destina-se a dar uma sensação de tempo e ritmo do vídeo para que o cliente possa ter uma visão clara de onde esta peça está indo antes de começarmos a projetar e animar. 9. Quadros de design 01: Nesta lição, vou entrar no Illustrator e começar a projetar os quadros que fiz nas lições anteriores e isso mostra a direção que eu quero seguir. Agora estou no Illustrator, vou entrar na diretriz das marcas e pegar alguns ativos de lá. Vou pegar a paleta de cores porque vou usá-la quando estiver projetando. Vou pegar o logotipo da marca. Vou ter as poucas variações, então tenho as três opções. Copie e cole. Esta é uma obra de arte que recebi da Shutterstock. Vou usar alguns outros projetos dentro deles nas minhas placas de design. Vou abrir este, e vou usar o plano de fundo, esse edifício, então vou usá-lo em minhas placas de design. Vou copiar e colar, dimensioná-lo e mudar sua cor para amarelo talvez. Vou mudar a opacidade para 50%. Acho que 50% é bom. Agora vou criar um plano de fundo usando a ferramenta retangular. Vamos alterá-lo para essa cor e clique com o botão direito do mouse em organizar e enviá-lo para trás. Acho que vou deixar os edifícios muito mais baixos, então vou usar a ferramenta direta, ou podemos pressionar A no teclado e selecionar todos os vértices desta obra de arte. Acho que devo bloquear o fundo primeiro. Clicarei no plano de fundo e vou para a seleção de bloqueio de objetos. Agora eu tenho o plano de fundo bloqueado, agora posso usar a ferramenta direta e selecionar todos os vértices para esta arte e vou diminuí-la. Agora vou criar esse pavimento simples usando a ferramenta retangular ou você pode pressionar M no teclado. Vou mudar a cor para isso. Agora vou mudar a opacidade também, 80%. Agora vou criar linhas de pista na estrada usando a ferramenta retangular também. Vou mudar a cor como cinza. Vou mudar a opacidade para digamos que 80%. Acho que vou deixar 100 por cento para a opacidade e vou deixá-lo um pouco mais escuro. Acho que vou diminuir um pouco a opacidade. Cinquenta por cento está indo bem. Talvez. Acho que é bom. Vou usar a ferramenta direta, torná-la um pouco mais curta. Agora, vou duplicar pressionando “Option” e segure. Vou pegar a árvore da de arte que recebi da Shutterstock. Vou bloquear todas as camadas para poder trabalhar na árvore sem qualquer interrupção ou clicar em qualquer coisa do plano de fundo. Mas acho que vou excluir isso, não preciso disso. Acho que isso é muito melhor porque preciso que a árvore pareça plana como todas as minhas obras de arte, então vou mudar a cor para verde. Vou mudar a cor do tronco, talvez usando a cor laranja e torná-lo mais marrom. Agora vou agrupar a árvore inteira selecionando o tronco e a parte acima e pressionando “Control G.” Agora vou duplicar a árvore também e fazer algumas variações na escala. Vou desbloquear todos os objetos nesta prancheta e vou duplicar toda a prancheta usando a ferramenta de placa de arte ou pressionando “Shift O” no teclado. Pressiono “Option” e mantenho pressionado e arraste a prancheta. Agora, estou criando novas pranchetas para o resto das cenas. 10. Quadros de design 02: Agora vou bloquear todas as seleções e vou adicionar o carro agora. Vou abrir, não este carro. Vou abrir outra obra de arte da Shutterstock. Abra este. Vou desagrupar todo o trabalho artístico pressionando “Command Control G”. Vou selecionar todo o carro, copiar e colar. Eu o posicionaria dentro da minha cena. Vou excluir o design. Eu não preciso disso. Vou apagar essa coisa atrás das volantes também. Vou mudar a cor do corpo. Agora vou criar um rack de tejadilho na parte superior do carro usando a ferramenta retangular. Agora vou marcá-lo adicionando o logotipo nele. Agora, vou pular para o 13 adicionando o smartphone acima do veículo. Vou selecionar os objetos e a seleção de bloqueio, ou pressionando “Comando D” no teclado. Agora vou abrir a arte do telefone que recebi da Shutterstock e ajustá-la para caber na minha direção de design. Agora vou aplicar algumas mudanças nas cores e formas. Estou sempre usando a paleta de cores para colorir minha arte. Agora vou adicionar texto usando a Ferramenta de texto, mantenha pressionado o botão. Alinhe isso. Vou usar a fonte dos clientes, Arial aterrado. Vou alinhá-lo novamente. Acho que quero mudar a cor do texto para um pouco mais clara. Sim. Deixe-me tentar este. Acho que acabei com o telefone agora. Uma coisa aqui, quero mudá-lo é o fundo ou a cor do céu e a estrada. Acho que eles parecem iguais. Quero tornar a cor da estrada diferente da cor do céu. Tenho a estrada separada do céu. Faça-o mais escuro. Agora há uma diferença entre a estrada e a cor do céu. Acho que isso está bom. Vou aplicar a mesma coisa para o resto das placas de arte. 11. Quadros de design 03: Antes de continuar, vou reposicionar o suporte do tejadilho. Basta movê-lo um pouco mais baixo e para a esquerda. Agora, mudando para a 4ª cena, vou duplicar o carro. Nesta cena, eu só preciso da parte superior do carro, então vou cortá-lo criando um retângulo acima do veículo. Selecione os dois. Em seguida, vá para objeto, máscara de recorte. Máscara. Vamos duplicar esse plano de fundo sólido. Vamos duplicar essa prancheta. Agora vou criar as caixas de entrega usando formas básicas. Copie para criar outra foto. Agora vamos criar os ícones. Aplique cores usando o conta-gotas ou pressione I no teclado para selecionar cores da paleta acima. Vou agrupá-los. Controle G. Agora vou receber os estoques de ícones que recebi da Shutterstock. Você muda as cores para branco. Legal. Agora vou duplicar para ter os quatro tiros consecutivos. Adicione texto usando a ferramenta de texto. Altere a fonte para Arial-Rounded. Vou duplicar a fonte poder usá-la neste quadro. Adicione texto. Agora, o final. Vou pegar o logotipo. Centralize isso. Adicione o slogan. Eu acabei. Agora é hora de exportar minhas placas de design. Vou para Arquivo, Exportar, Exportar Como, escolher o local. Certifique-se de que o formato seja PNG. Verifique as pranchetas e verifique tudo. Agora clique em “Exportar”. Todas as configurações estão boas. Pressione “Ok”. Aqui eu tenho minhas placas de design. Então, acabei de projetar toda a sequência para esta peça. Na próxima lição, vou fazer a biodinâmica. 12. Boardimatic: Boardimatic não é mostrar ao cliente os quadros finais de design, o tempo e o ritmo do vídeo, mas também nos economiza muito trabalho se o cliente tiver alguma edição no design. Depois de olharmos a fase de design, poderemos saltar para fazer a animação. Vá para Arquivo, Salvar Como, e vou nomeá-lo de HunterGoes board em vez de animatic. Clique em “Salvar”. Agora vou importar minhas placas de design. Arraste para a sequência e selecione todos os quadros e direita “Dimensionar até o tamanho do quadro”. Usando a ferramenta de edição rolante, começarei a alinhar minhas placas de design com a narração. Como você pode ver aqui, estou usando esses esboços abaixo como referência. [MÚSICA] HunterGoes é a mais nova e mais legal plataforma de entrega online. Podemos pegar e deixar qualquer coisa para você de alimentos, eletrônicos, mantimentos, livros e muito mais. Tudo o que você precisar, sempre que precisar. Baixe o aplicativo agora e aproveite o pedido. HunterGoes, nós pegamos você. [MÚSICA] Agora preciso exportar o arquivo. Exportar, mídia. Escolha o local e salve. [MÚSICA] HunterGoes é a mais nova e mais legal plataforma de entrega online. Podemos escolher e deixar qualquer coisa para você de alimentos, eletrônicos, mantimentos, livros e muito mais. Tudo o que você precisar, sempre que precisar. Baixe o aplicativo agora e aproveite o pedido. HunterGoes, nós pegamos você. [MÚSICA] Eu acabei com o boardimatic e pronto para passar para a próxima lição. Certifique-se de seguir o roteiro que coloquei na descrição do projeto e publique seu trabalho em andamento para que você possa obter feedback e inspirar outros alunos. 13. Organizar: Estou a poucos passos de abrir o After Effects e começar a animar. Mas antes de fazer isso, tenho que fazer alguma estruturação de pastas para organizar todas as coisas que fiz até agora. É um bom hábito organizar todos os projetos em que você está trabalhando para que você tenha todos os seus ativos nomeados e arquivados em um local específico para que você não perca nada que possa usar mais tarde ou especialmente se você entregar o projeto a outro animador ou editor de vídeo. Normalmente usarei as duas ferramentas de gosto para organizar meus projetos. É uma ferramenta gratuita de gerenciamento de projetos que permite configurar modelos de pasta para seu projeto. Vamos verificar isso. Aqui eu tenho as duas ferramentas de gerenciamento de gosto. Começarei a nomear meu modelo de projeto. Projeto número 1. Cliente HunterGoes, nome do projeto, vídeo explicativo. Coloque a data e o nome do criador. Agora posso ir para modelos para criar meu próprio modelo. Vou escolher o modelo de animações. Vou excluir tudo isso e vou criá-lo do zero. Vou criar uma nova pasta, vou chamá-la de ativos. Vou criar uma nova subpasta dentro de ativos e nomeá-la, Animatic. Uma nova subpasta. Mais temático e um novo áudio e outro para imagens stock. Deixe-me criar uma nova subpasta dentro do Animatic e chamá-la Gravação. Outro, PSD. Outro Frames. Agora, dentro do áudio, vou criar o VoiceOver e o Music. Agora, dentro do quadro, vou criar uma subpasta chamada arquivo de ilustração ou AI. Subpasta de estrutura de design. Agora vou criar uma nova pasta chamada Marca. Dentro de Brand, nomeie esta diretriz e a subpasta de script. Uma nova pasta é o nome de Concept. Inside Concept, tenho Moodboard & Treatment. Outra subpasta para script visual. Para os quatro arquivos de projeto. Dentro dele, vou colocar os arquivos e a subpasta do After Effects para arquivos de estréia. Agora eu tenho todas as pastas que preciso. Agora posso criar um projeto. Escolha um local para salvá-lo. Aqui vamos nós. É isso basicamente para a estruturação e organização da pasta . Vejo você na próxima lição. 14. Prepare sua arte: Tenho meus ativos organizados, agora vou entrar no Illustrator e adquirir a arte que vou usar dentro do After Effects. Agora, o que vou fazer é colocar toda a arte que vou usar dentro do After Effects em uma prancheta poder importá-las para o After Effects. Na Artboard 3, tenho o carro, o telefone e os ativos de fundo. Vou importar essa prancheta. Na prancheta 11, tenho as caixas e os quatro ícones. Vou importar essa prancheta também. Não preciso me preocupar com o texto, pois posso criá-lo dentro do After Effects. Vou para Arquivo, Salvar como nosso limite 03 já que é a Prancheta 3, vamos verificar. Salve cada arquivo separado da prancheta e escolha Intervalo 3. Agora vou para Salvar Como, nomeie este 11, então é Artboard 11. Salve cada prancheta em um arquivo separado e Intervalo 11. Agora eu tenho as duas pranchetas. Começarei criando uma nova camada e tenho o smartphone em uma camada separada. Nova camada para o carro. Greg e drop. Agora eu quero expandir a prancheta da rua para poder ter espaço suficiente para mover fundo enquanto o anima dentro do After Effects. Se estiver confundindo você agora, você saberá o que quero dizer quando entrarmos no After Effects. Vou reorganizar os elementos de acordo. Vou nomear esta camada de rua. Agora vamos abrir a segunda prancheta. Vou começar a colocar cada elemento separadamente. Exclua o carro que não preciso dele nesta prancheta. Legal. Agora tenho todos os meus elementos em camadas separadas. Vou renomear a IA. Se você usou seu próprio storyboard, você pode usar o mesmo processo que eu. Na próxima lição, vou importar a arte para o After Effects e começar a animar. 15. Anime a primeira cena: Finalmente, chegamos à fase em que entraremos After Effects e começaremos enquadrar e animar. Vamos começar. Estou no After Effects, finalmente. Pouco antes de prosseguir, como você pode ver agora eu mudei para o Windows, pois tive alguns problemas com meu Mac enquanto gravava a classe. Começarei importando minha obra de arte. Certifique-se de que o tipo de importação seja composição e a dimensão de gravação seja o tamanho da camada e não o tamanho do documento. importarei a paleta de cores e as imagens temáticas amplas para referência. Agora vou fazer alguma organização, fazer uma nova pasta AI para colocar todas as AIs que tenho dentro dela. Outro para composições e outro para filmagens. Agora vou para a composição, novas dimensões de composição 1920 1080 e taxa de quadros 30. Vou nomear o comp main. Vou arrastar e soltar a temática do quadro para a linha do tempo e aparar a composição para a área de trabalho. Agora, vamos arrastar e soltar esse fundo da rua. Desligue a camada temática da borda. Agora, clicando no fundo da rua e pressionando P, consegui a posição. Ao arrastar a posição X, posso mover a rua para a esquerda e para a direita. Agora vou pegar a IA do carro e certificar de ativar a transformação do colapso. Em resumo, a transformação do colapso mantém a qualidade da arte da IA, ampliando-a. Começarei adicionando um movimento sutil ao carro, como um pouco saltando como se estivesse realmente se movendo pela estrada. Vou pré-compor a camada do carro e nomeá-lo de carro. Vamos expandir a dimensão um pouco. Agora vou dividir o carro em duas partes, a parte superior do corpo e a parte das rodas mascarando-o usando a ferramenta caneta. Vou chamá-lo de corpo. Duplique a camada e inverta a máscara e eu vou nomeá-la de rodas. Agora vamos adicionar alguns saltos na parte superior do corpo. Crie uma chave, mova a linha do tempo e arraste o corpo um pouco para baixo. Mantenha a chave inicial e arraste a linha do tempo e cole e off-line para facilitar a facilidade. Vamos torná-lo um pouco rápido. Ao selecionar todas as teclas, vamos Option e segure e arraste as teclas para mais perto. Agora vou fazer um loop desse movimento. Vá até o relógio aqui, pressione e segure a tecla Option e clique e vou digitar este loop de expressão simples. Agora vamos colocar o plano de fundo em movimento. Faça uma chave no início. Mova a linha do tempo e arraste a camada para a esquerda. Agora vou tirar o carro do quadro, fazer uma chave e movê-lo para a direita. Arraste o carro para fora do quadro e a nova chave foi criada automaticamente. Vou tornar a facilidade mais suave indo ao editor de gráficos e usar o gráfico de velocidade. Vamos ativar a temática do quadro para ver quando o telefone aparecerá. Aqui vou adicionar uma marca. Vou arrastar e soltar o telefone dentro do comp do carro. Vamos expandir um pouco a altura da dimensão. Crie uma tecla de posição e mova-a para a direita. Arraste o telefone para baixo atrás do carro e fácil facilidade. Vou tornar a facilidade mais suave. Agora vou esconder o telefone usando máscara. Vamos criar uma camada de forma. Nomeie a máscara e aplique fosco invertido alfa à camada padrão. Tenho um problema aqui. É do mascaramento, eu acho. Vamos verificar nossa próxima transição. Vou adicionar outro marcador aqui. O telefone desce aqui, cria uma tecla e arraste a linha do tempo e mova o telefone para baixo. Agora, vou facilitar o mais suave. A animação de estrada não deve parar por aqui, então vou estendê-la um pouco. Vou fazê-lo cair mais cedo. 16. Como animar caixas de outono: Agora vou fazer o zoom-in na parte superior do carro. Vamos para Layer, New, Null object e eu farei o pai nulo para essas duas camadas, o carro e a estrada, usando a largura da escolha pai. Vamos fazer duas teclas, uma na balança e a outra na posição. Mova a linha do tempo para a direita e escale-a e ajuste a posição do carro para o centro. Vamos torná-lo mais lento. Agora vou me livrar dos edifícios, vou para a posição, vou para a posição, clique com o botão direito do mouse em “ Dimensões separadas”, então tenho mais controle sobre a posição X e Y. Certo, vou fazer a chave de posição aqui. Mova a linha do tempo e arraste os edifícios para baixo e alinhe-a com as teclas acima. Agora posso dividir a camada, não preciso mais dela e vou fazer uma nova camada sólida e escolher a mesma cor dessa camada usando o colírio. [RUÍDO] Eu poderia ter feito os edifícios em camadas separadas no Illustrator, mas tudo bem por enquanto. Vamos ver o próximo movimento. Vou adicionar um marcador. Vamos entrar no comp do carro, e eu vou importar as caixas. Vamos reposicioná-los. Acho que o tamanho está bom agora. Agora preciso mudar o ponto de ancoragem e colocá-lo na parte inferior para cada caixa, pois preciso aplicar movimento de abóbora e alongamento. Agora eu seleciono as três camadas e as ligo à camada do corpo para que as caixas possam seguir o movimento de salto do carro. Vamos criar uma posição-chave, movê-los para a direita e arrastar a caixa para cima. Vamos aplicar agora algum efeito de abóbora e alongamento. Agora copie e cole as teclas de escala para o resto das camadas, você pode pressionar “U” para revelar todas as teclas que você tem na camada. [RUÍDO] Tenho uma lacuna estranha entre essas duas caixas, vamos consertá-lo. 17. Animação de ícones: Vamos ver quando os ícones começarão a aparecer. Vou adicionar um novo marcador aqui. Agora receberei as moedas do painel do projeto. Vamos reposicioná-los. Selecione todos eles e clique com o botão direito pré-composição e eu vou nomear ícones. Selecione todas as camadas e pressione “S”. Crie uma chave e mova-a para a direita e agora diminuímos o zoom. Agora, vamos mover a linha do tempo para a direita e fazer outra chave. Agora eu seleciono essas teclas e as escalo para fazer overshoot. Overshoot é ultrapassar a escala. Destina-se a passar e depois puxa para trás. Selecione todas as camadas e ys, ys. Agora vamos criar uma animação secundária para os ícones. Vá para a ferramenta Caneta e faça-a traçar e arraste o ponto de ancoragem para a parte inferior. Agora vou para o ponto de ancoragem em Transformar e arraste a posição ypara cima. Agora vamos adicionar um caminho de corte. Animar a linha usando as teclas final e inicial. Agora duplique a camada e altere a rotação para 90 e duplique com rotação 180, outra com rotação 270. Legal. Vamos selecionar todas as camadas e fazer pré-composição e nomear efeito. Agora vou posicionar o efeito no centro de cada ícone e mudar sua cor de acordo com a cor do ícone. Vá para Effect e escolha “Preencher”. Use conta-gotas para selecionar a cor do ícone. Vou aplicar essa mesma coisa ao resto dos ícones. Agora vou fazer os ícones aparecerem consecutivamente. Vamos verificar o bodymatic para referência e adicionar alguns marcadores. 18. Animação de texto: Agora, passando para a próxima cena, vamos ver. Aqui, o texto deve aparecer. Agora, vamos tirar os ícones e a parte superior do carro do quadro. Vou fazer com que os ícones comp uma criança para o nulo. Faça uma composição e arraste o nulo para a esquerda. Vou torná-lo mais fácil e mais suave. Agora vou criar um texto usando a ferramenta Tipo, o que você precisar. Vou me certificar de que a fonte seja Arial Rounded. Duplicar: “Sempre que precisar”. Vamos pegar a paleta de cores e mudar a cor da segunda. Agora vamos pré-comp o primeiro tipo. Agora tenho duas abordagens que posso tomar para animar essas três palavras. Posso usar o texto decompor, é um plugin pago que recebi do AE Script e é super eficiente. Você pode decompor o texto por palavras ou linhas de caracteres com um clique. Ao selecionar minha camada de tipo, posso escolher caracteres e clicar em “Decompor”. As três palavras agora são decompostas em caracteres separados. Agora, tenho controle sobre cada letra. Vou mostrar a outra abordagem ao trabalhar com a próxima cor. É uma maneira um pouco demorada, mas alternativa se você não adquirir o plugin de texto decomposto. Certo. Vamos selecionar todas as letras e criar uma posição-chave e movê-las para a direita, arrastar um pouco a posição Y. Vou criar chaves entre os dois para overshoot. Vamos selecionar tudo e é fácil. Tudo bem, legal. Agora vamos ser pré-comp o próximo tipo e agora vou decompor manualmente. Primeiro, conto quantas letras tenho nesta frase. Eu tenho 15. Vou duplicar a camada 15 vezes. Eu pego todas as letras de cada camada, então, eventualmente, tenho todas as letras ligadas separadamente. É um pouco agitado, mas é o caminho se você não tiver o plugin de texto decomposto. Tudo bem. Vamos desfazer e usar o plugin que tenho e imitar as etapas que fiz para o slide anterior. Tudo bem, legal. Vamos selecionar as pré-composições do texto e separar suas dimensões de posição. Vou fazer uma tecla de posição Y, mover a linha do tempo para a direita e fazer uma antecipação antes de cair. 19. Transição após texto: Vamos pegar o telefone agora, e aplicar uma animação de escala, ele está fora usando o gráfico de velocidade. Agora vou adicionar o texto, “baixar o aplicativo”. Aplique animação de posição sobre ela, e alguns aliviam um terço. 20. Logotipo e tagline: Vamos entrar na cena final. Crie uma nova camada sólida, conta-gotas para escolher a cor que eu quero da paleta. Pré-compor a camada, e vou pegar o logotipo e soltá-lo na camada sólida. Ajuste a balança. Agora vou para o comp principal e faço uma chave de posição e movo para a direita. Em seguida, arraste a camada para fora do quadro. Vamos adicionar o slogan que temos para você. Tudo bem, legal. 21. Adicione alguns temperos: Eu acabei com minha animação. Agora eu quero adicionar alguns caminhos extras ou polimento que podem reunir toda a peça. Começarei adicionando uma vinheta. Vinheta é uma maneira simples de dar à peça uma sensação de profundidade e focar a atenção do espectador. Vou criar uma nova camada de ajuste. Vinheta de nome. Vá para Efeitos e predefinições e procure Exposição. Agora posso brincar com o nível de intensidade de exposição. Agora eu adiciono máscara. Verifique invertido e incremente o número da pena da máscara até termos uma borda suave. Agora vou adicionar algum ruído e grão. Vamos adicionar efeito de ruído à camada de ajuste e fazer com que a quantidade de ruído seja como cinco. O efeito de ruído é uma forma de tornar a renderização menos perfeita e digital. Um pouco de grão pode dar um toque agradável a toda a peça. Agora eu tenho a peça inteira totalmente animada. Vou exportar e importar o vídeo para Premier Pro para poder adicionar a música e a narração. Agora estou no Premier Pro, já importei a sequência de animação. Posso ter o voice-over e a música sincronizados com minha animação. 22. É um contorno: Bem, e é isso para esta aula. Certifique-se de terminar seu projeto e publicá-lo na galeria do projeto. Estarei disponível para qualquer feedback que você possa ter. Espero que essa aula tenha sido valiosa, e você tenha aprendido coisas novas com ela. Quero agradecer muito por tomar o tempo para caminhar nesta jornada. Você pode me seguir no Skillshare para receber atualizações para minhas futuras aulas. Boa sorte.