Tipografia em movimento: como animar fontes no Adobe Fresco

1. Damos as boas-vindas ao curso!: [MÚSICA] Você quer criar texto animado para suas postagens de mídia social, site ou tutoriais on-line? Ou talvez você queira criar animações em qualquer lugar usando seu iPad ou dispositivo Windows? Em caso afirmativo, bem-vindo à aula. Ei, sou a artista e professora da área de Chicago , Tracey Capone e nesta aula, vou mostrar como criar animações de texto usando o Adobe Fresco. Eu uso produtos da Adobe há quase 20 anos para o meu trabalho de fotografia e ilustração e, mais recentemente, animação. Fresco faz parte da minha caixa de ferramentas criativas desde que foi introduzida em 2019 e rapidamente se tornou parte integrante da minha prática criativa diária. Agora, não sou um designer de movimento profissional, mas tenho usado o After Effects para criar minhas próprias animações do zero, para meu blog, mídias sociais, tutoriais do YouTube e aulas online nos últimos anos. Quando a Adobe introduziu animação e movimento no Fresco, fiquei tão animado porque isso significava que eu também poderia criar minhas animações em qualquer lugar que eu quisesse, desde que eu tivesse meu iPad comigo. Passei os últimos meses desde que a animação foi introduzida no Fresco criando uma variedade de sequências de animação de texto. Nesta aula, vou orientá-lo passo a passo sobre como você pode criar o seu próprio. Começaremos com uma visão geral das ferramentas de animação e movimento no Fresco e como elas funcionam. Em seguida, criaremos cinco animações diferentes juntos: uma manobra, o feijão de salto, luzes piscando, o efeito de gravação e máscara. Como bônus, vou mostrar como você pode animar facilmente suas texturas favoritas. Porque se você é algo parecido comigo, eu sei que você concordará que a textura [NOISE] torna tudo infinitamente melhor. Agora, se você não for um hamletter, não se preocupe, vamos usar fontes para criar nossas animações. Discutiremos quais fontes funcionam melhor para cada tipo de sequência de animação, como inserir e configurar suas fontes e como criar suas animações para que seja natural para o olho humano. Finalmente, falaremos sobre as várias maneiras pelas quais você pode exportar suas animações para carregá-las em sites como Giphy, seu blog, newsletter ou site. Agora você pode estar se perguntando com todas as animações gratuitas por aí, por que criar as suas próprias? Escrever suas próprias animações de texto não só permite que você as crie em torno de sua marca, seja uma paleta de cores específica, fonte ou conjunto de frases-chave, mas também permite que você defina o tom de qualquer mensagem que você está tentando transmitir. Além disso, ter uma coleção de suas próprias animações à mão poupa o tempo e o incômodo de ter que vasculhar toneladas de animações para encontrar a certa. A melhor parte, as técnicas de animação que você vai aprender nesta aula podem ser aplicadas a outras ilustrações que você cria no Fresco, não apenas ao texto. Só vou usar ferramentas às quais todos têm acesso, quer você esteja na versão gratuita ou premium do aplicativo. Agora esta aula é amigável para iniciantes, mas é recomendável que você tenha pelo menos alguma experiência com o Fresco. Se você é novo no aplicativo, recomendo começar com uma das ótimas aulas introdutórias por aí antes de tomar esta. Agora Fresco pode não ser o ideal para animações de texto, mas sou um grande fã de fazer as ferramentas que você tem disponíveis para você, funcionem da maneira que você precisa. Se você quiser criar suas próprias animações de texto, mas aprender software de animação mais complexo simplesmente não está nos cartões agora, esta é a classe para você. Venha se juntar a mim na aula, e vamos começar a animar. [MÚSICA] 2. Projeto do curso: [MÚSICA] O projeto para esta classe é criar suas próprias animações usando um ou mais métodos que você aprenderá em sala de aula. O movimento, o feijão pulando, as luzes piscando, o efeito de gravação, máscara e a textura animada bônus. Depois de criar suas animações, salve-as no formato GIF e você poderá compartilhá-las na seção de projetos e recursos da classe. Compartilhar seu projeto não só ajuda outras pessoas a ver o que aprenderão , mas potencialmente ajuda mais alunos a encontrarem a turma. Em seguida, mostrarei como baixar as 10 texturas gratuitas para a classe. Vejo você lá. [MÚSICA] 3. Downloads do curso: [MÚSICA] Os downloads desta classe incluem 10 arquivos de textura de alta resolução, que serão animados posteriormente na classe. Você pode baixá-los na seção de projetos e recursos, apenas não se esqueça de acessar a classe por meio um navegador e não pelo aplicativo Skillshare. Você precisará de uma senha para acessar um link, e eu colocarei isso na tela agora mesmo. [MUSIC] Em seguida, uma visão geral dos recursos de animação do Fresco. Vejo você lá. [MÚSICA] 4. Visão de animação e movimento: [MÚSICA] O recurso de animação do Fresco tem algumas vantagens distintas em relação animação em outros aplicativos. A primeira é que as sequências de animação são criadas no nível da camada, e cada camada pode conter vários quadros em vez de um quadro igual a uma camada. O Fresco não tem limites gerais de camada independentemente do tamanho da tela. Essas duas coisas juntas significam que você pode criar quantas animações quiser dentro de uma única tela, desde os objetos que você está animando separadamente sejam divididos em suas próprias camadas. O Fresco permite que você crie caminhos e animações quadro a quadro e ambos podem ser criados em um único Canvas. Finalmente, além das camadas animadas, você pode criar quantas camadas estáticas quiser dentro do mesmo Canvas e tudo será exportado juntos. Vamos ao Fresco e dar uma olhada em como a animação funciona. [MÚSICA]. Antes de começarmos a animar em nossos textos, eu queria fazer uma rápida visão geral de como animação funciona no Fresco. Mencionei no abridor que você pode criar várias animações dentro de um único Canvas, desde que você tenha suas camadas quebradas separadamente. Você também tem duas maneiras diferentes criar uma animação, animação de caminho e quadro a quadro. Agora, nesta aula, vamos nos concentrar em usar animação quadro a quadro para animar nosso texto, mas mostrarei como a animação de caminho funciona também. Eu tenho três formas diferentes aqui quebradas em duas, três camadas separadas porque quero animá-las independentemente umas das outras e usar um método diferente. Vou animar o quadrado usando animação quadro a quadro e o círculo e o oval usando animação de caminho com configurações diferentes. Vamos começar com o quadrado. Para ativar a animação, você selecionará a camada que deseja animar e selecionará o pequeno ícone aqui na parte inferior com os três círculos e o botão de reprodução. Agora, minha tela está configurada para uma pessoa canhota. Se o seu não for, seu ícone pode ser o oposto do meu. Depois de selecioná-lo, um menu contextual aparecerá na parte inferior. Vou pular a parte superior aqui. Reproduzir tudo permitirá que você reproduza sua animação ao criá-la , bem como quando terminar. Vamos pular animação de caminho por enquanto novamente, faremos isso com um círculo no oval. Quando você acessa as configurações, a primeira configuração que você pode alterar são os quadros gerais por segundo para o seu Canvas. À medida que você esfrega, ele vai ficar mais rápido e, à medida que você o derruba, ficará mais lento. Eu recomendo experimentar quadros diferentes por segundo com cada animação criada porque você pode achar que você tem uma aparência diferente dependendo do que você escolher. A próxima configuração que você pode alterar é o modo de reprodução. Você pode escolher entre Loop, Boomerang ou Play uma vez. Esses são modos de reprodução padrão para animação. Nesta aula, estaremos focando principalmente em Loop, mas há pelo menos uma animação em que usaremos o Boomerang porque ele fornece um efeito muito mais suave. Assim como nos quadros por segundo, sugiro tentar os diferentes apenas para ver o que funciona melhor com sua animação. Você também pode ativar e desativar as peles de cebola, que o ajudarão com animação posicional quando você precisar rastrear um objeto como faremos quando criarmos o efeito de manobra. Isso permitirá que você veja vários quadros antes e depois do quadro atual para que você possa acompanhar o que está criando. Você pode alterar o número de quadros que você pode ver, bem como a opacidade. Por fim, a linha do tempo do documento permitirá que você veja várias animações em um documento em uma única linha do tempo. Na verdade, não ligo isso, então você não vai me ver ativar isso ao longo desta aula, mas saiba que ele está lá. Com esta caixa, quero que ela apareça, fique mais fina, volte ao tamanho normal e depois volte para a posição original. Agora, há algumas maneiras pelas quais posso abordar isso. Posso duplicar essa forma e criá-la em uma série de quadros ou posso tocar neste sinal de mais quadros ou posso tocar neste sinal e ele vai me dar um quadro vazio, que eu possa rastrear essa caixa ou usar um dos ferramentas de forma para criar uma nova forma. Agora, na verdade, não quero fazer isso. Eu quero usar uma duplicata da minha forma. O primeiro quadro que você verá sempre será a camada que você selecionou. Você pode alterar isso à medida que você começa a criar quadros, você pode arrastar as coisas para diferentes pontos na sequência, mas inicialmente, o primeiro quadro sempre será o que você selecionou no camada. Para duplicar isso, vou tocar nesse quadro e agora tenho dois quadros da mesma forma exata. Vou selecionar minha “ferramenta Transformar”. Vai me perguntar se eu quero escolher o quadro selecionado ou a camada inteira. Agora, lembre-se, eu quero mover isso para cima e porque eu tenho dois quadros dentro dessa camada, se eu escolher a camada inteira, ela vai mover um e dois para cima. Eu só quero mover o quadro 2 para cima. Vou escolher o quadro selecionado, vou segurar meu dedo no seletor de toque aqui e apenas arrastar isso para cima. Isso vai me ajudar a restringir minha posição Y, então ela vai direto para cima. Vou clicar em “Concluído” para aceitar essa alteração. Agora posso duplicar isso novamente, escolher minha ferramenta de transformação novamente e vou torná-la mais fina. Novamente, clique em “Concluído”, vou duplicá-lo, trazê-lo de volta ao tamanho original, e depois farei mais um quadro novamente, duplicá-lo, pegar minha ferramenta de transformação e trazê-lo de volta para baixo. Quando eu clicar em “Concluído”, eu posso clicar “Reproduzir” e a animação será executada. Agora isso é muito rápido, então vamos entrar nas configurações e eu posso mover isso para baixo, então é muito mais lento e você pode ver a animação com muito mais clareza. Também posso escolher entre Boomerang ou Loop, ou posso escolher Jogar uma vez também. Agora eu quero saber, e vou pausar isso. Porque eu tenho minhas peles de cebola, você pode ver que eu tenho peles de cebola para cada quadro lá e, à medida que passo por ela, as peles de cebola estão em posições diferentes. É basicamente assim que a animação quadro a quadro funciona. Agora, novamente, eu poderia passar por aqui e eu poderia arrastar as coisas em ordem diferente. Isso vai fazer uma animação muito diferente. Você pode ver que está pulando duas vezes lá. Mas depois de criar vários quadros, você pode arrastar as coisas para que elas fiquem em locais diferentes na sequência de animação. Analisamos a animação quadro a quadro, vamos dar uma olhada na animação de caminho. Agora, a animação de caminho é, na verdade tecnicamente ainda animação quadro a quadro. A única diferença é que você não está criando os quadros sozinho, Fresco está fazendo isso nos bastidores. Para criar uma animação de caminho, você selecionará o ícone e poderá simplesmente desenhar qualquer forma. Quando terminar de desenhar, ele enviará sua forma ao longo desse caminho. Agora você pode alterar suas configurações aqui para que eu possa acelerar isso usando meus quadros do Canvas por segundo. Vou derrubar isso de volta. Mas eu tenho alguns efeitos adicionais que posso aplicar também. Vou tocar neste ícone fx. Agora, é claro que posso alterar o modo de mesclagem e a opacidade como qualquer outra camada, mas além disso, posso adicionar múltiplos da minha forma. Posso espalhar esses múltiplos, trazer isso de volta para baixo. Vou pular a facilidade e com facilidade porque vou mostrar como isso funciona com o oval aqui. Agora, além das velocidade dentro das configurações gerais do Canvas, posso realmente adicionar quadros a isso. Eu mencionei no início que esta ainda é uma animação quadro a quadro, é só que Fresco está criando os quadros. Se eu adicionar quadros, ele vai diminuir a velocidade e se eu remover quadros, ele vai acelerá-lo. Agora ainda posso mudar isso. Isso vai torná-lo ainda mais rápido, mas isso me permite um pouco mais de controle sobre a animação do caminho real também. Vamos em frente e trazer isso de volta a uma velocidade bastante normal, isso é um pouco frenético. Há mais uma coisa que eu quero mostrar com o círculo aqui. Posso excluir esse caminho e começar de novo, se quiser. Também posso adicionar vários caminhos. Posso desenhar outro caminho e ele vai adicionar outra forma. Vou adicionar quantos quiser e Fresco criará uma animação quadro a quadro nos bastidores cada vez que eu fizer isso. Isso me dá um pouco mais de controle sobre onde meus múltiplos estão do que os efeitos do caminho. Mais uma vez, posso excluir os que não gosto e volto para onde comecei. Há mais algumas configurações que eu quero mostrar com animação de caminho e é mais fácil mostrar onde a forma é uma forma oval. Vou desenhar uma linha reta e ela automaticamente enviará meu oval ao longo desse caminho em uma velocidade bastante uniforme. Agora, posso entrar em configurações e posso brincar com essas duas opções, seja de velocidade original ou uniforme. Também posso ligar ou desligar, facilitar e aliviar. O que isso vai fazer é que ele hesite no início e diminuindo lentamente e depois vai diminuir a velocidade no final. Você pode ver que está diminuindo, acelerando e depois diminuindo. Vamos dar uma olhada em mais uma configuração aqui. Vou desligar a facilidade e aliviar temporariamente. O último que eu quero mostrar é o caminho alinhado. Se eu clicar nisso, ela vai alinhar minha forma ao caminho real. Isso é útil para algo como criar um carro em uma estrada. Obviamente, você não gostaria que o carro corra dessa maneira, você quer que ele corra ao longo da estrada. Ativando uma linha, o caminho vai fazer isso. Agora vamos brincar com algo aqui. Se eu adicionar múltiplos e espalhar esses múltiplos, aleatorizo o caminho do alinhamento, eu poderia criar algo como uma escola de peixes. Essas são as várias maneiras pelas quais você pode criar animações no Adobe Fresco. Lembre-se, se você quiser animar objetos independentemente uns dos outros e se certificar de que eles estão divididos em suas próprias camadas, isso lhe dará a capacidade criar quadro a quadro ou animação de caminho e você pode definir configurações diferentes para cada uma dessas animações de caminho, se quiser. Estamos prontos para começar a criar nossa primeira animação de texto e vamos começar com o movimento básico. Vejo você lá. [MÚSICA] 5. Animação 1 | a wiggle: [MÚSICA] O movimento é criado pelas imperfeições que ocorrem quando você rastreia um objeto em uma série de quadros vazios. Veja este oi, por exemplo, rastreá-lo em uma série de seis quadros, a manobra se torna mais intensa porque estou adicionando imperfeições à medida que vou. Pelo Quadro 6, é muito mais intenso do que no Quadro 2. Quais fontes funcionam melhor com a manobra? A resposta curta. Todos eles. fontes de escrita manual de linha única As fontes de escrita manual de linha única serão mais fáceis de animar porque você está literalmente rastreando uma única linha. Mas lembre-se da animação que acabei de mostrar que você tem suas fontes de peso também funcionam. São necessários apenas alguns passos extras para criar a animação. Você precisa rastrear as letras em seus quadros vazios e preenchê-las à medida que avança. À medida que você adiciona imperfeições, assim como anteriormente, o movimento se tornará mais intenso. Vamos em frente e vamos para Fresco e dar uma olhada mais de perto. Estamos prontos para nossa primeira animação. Vamos fazer uma manobra básica. É uma animação muito comum que você verá no Instagram. Agora, mencionei no abridor do vídeo que você pode usar qualquer fonte que você gostaria para isso, no entanto, as fontes de caligrafia mais finas serão as mais fáceis e rápidas de animar porque você está apenas traçando uma única linha. Para os propósitos desta lição, vou usar uma fonte mais pesada porque é um pouco mais complexa, você precisará descrevê-las e depois preenchê-las manualmente ou usando o ferramenta de preenchimento em seus quadros vazios. Por ser mais complexo, se você puder criar esta, qualquer outra fonte será um pedaço de bolo. Vou usar uma fonte chamada Metallophile Sp8. Essa é uma fonte da Adobe que você pode baixar com uma assinatura. Agora, no geral, para esta lição, vou usar apenas as ferramentas que você tem disponíveis, se você estiver na versão gratuita ou paga do aplicativo. Para as fontes, eu queria anotar para esta lição, bem como para o resto. A fonte exata que estou usando não é importante. O importante é o tipo de fonte. Se você não tiver este disponível para você, não se preocupe com isso. Basta encontrar a fonte que funciona melhor para o que você deseja criar. Há muitas fontes internas para escolher. Desliguei a animação anterior e estou pronto para criar uma nova, então vou em frente e toque para adicionar uma nova camada vazia. Quero ter certeza de que minha ferramenta de texto está selecionada, e vou apenas tocar para adicionar uma nova linha de texto e vou digitar a manobra. Vou manter tudo na mesma camada, mas duas linhas, e eu queria estilizar esse texto. Vou selecionar as duas linhas aqui e escolher o texto de estilo. Se você não vir texto de estilo, também poderá acessá-lo aqui nas propriedades da camada. A primeira coisa que eu quero fazer é mudar minha fonte, então vou tocar em textos lá e vou digitar, na verdade, eu já tenho isso em uma busca, só estou digitando Metallo e Metallophile surgirá. Se você estiver em uma assinatura e quiser importar fontes, você pode fazer isso pressionando o sinal de mais lá. Você também pode acessar mais fontes integradas com a Adobe. Agora, essas linhas estão muito distantes, mas não vou usar as propriedades da camada para alterar isso. Vou mudar isso uma maneira diferente em um pouco. Por enquanto, vou dizer que isso está feito. Vou fechar isso. Quero fazer isso muito maior. Vou pegar minha ferramenta de transformação. Acho mais fácil usar a ferramenta de transformação para alterar o tamanho em vez das propriedades da camada. Vou bater pronto. Agora, este próximo passo é muito importante por alguns motivos. Vamos criar essa animação traçando as letras em quadros vazios. Eu tenho minha animação aqui embaixo, e com essa camada selecionada, você pode ver que isso está acinzentado. Na verdade, não consigo selecionar quadros vazios porque você não pode selecionar quadros vazios com uma camada de texto. Preciso converter isso uma camada vetorial ou em uma camada de pixel, dependendo do tipo de pincel que vou usar para rastrear minhas letras. Agora, eu sei que vou usar um pincel vetorial. Eu só prefiro usá-los. Vou selecionar minha camada, selecionar os três pontos aqui e, na parte inferior, você verá converter camada vetorial ou converter em camada de pixel. Eu vou em frente e escolho converter em camada vetorial, e agora você pode ver isso mudou para um ponto. O ponto significa o vetor aqui. Neste ponto, isso não é mais ótimo, o que significa que posso adicionar um quadro vazio se precisar dele. A outra coisa que isso me permite fazer é estilizar isso um pouco mais. Eu queria levar isso lá, vou pegar minha ferramenta de seleção e selecioná-la. Então vou usar minha ferramenta de transformação, torná-la um pouco menor e movê-la para lá. Você não precisa fazer isso. Depende totalmente de você como você quer que sua animação final fique parecida. Mas saiba que se você quiser fazer algo assim onde você altera o texto, você precisa ter certeza de que você pode inverter a camada primeiro. Vou bater na desseleção e farei tudo isso um pouco maior. Neste ponto, preparei minha fonte, preparei meu texto, ele é convertido e estou pronto para começar a criar a animação. Uma das razões pelas quais escolhi essa fonte em particular é que ela me dá uma vantagem com a imperfeição. Tem uma novidade nisso. Se a sua fonte favorita que você deseja usar para esta animação tiver muitas bordas retas e cantos perfeitos. Você pode usá-lo. Basta ter em mente que se você mantiver essa letra perfeita ou uma frase com as linhas retas e cantos perfeitos como parte da animação. Toda vez que a animação volta para esse quadro, porque é a única que será perfeita. É quase impossível rastreá-lo perfeitamente a cada vez. Vai ser muito óbvio, e vai criar um padrão que você não quer necessariamente que tire do efeito de manobra. Se essa fonte for sua favorita e você gosta da forma geral dela. O que eu recomendaria é puxá-lo da maneira que acabei de fazer aqui, adicionar um quadro vazio e rastreá-lo, e depois voltar e me livrar desse primeiro quadro perfeito. Para começar minha animação, vou adicionar uma camada vazia. Lembre-se, converti isso em uma camada vetorial, então isso significa que preciso usar meu pincel vetorial para rastreá-lo. Se eu pegar acidentalmente um pincel de pixels, o Fresco adicionará automaticamente uma camada de pixels. Você não pode usar um pincel de pixels em uma camada vetorial e vice-versa. Vou escolher apenas o pincel redondo básico. Também desliguei todas as minhas dinâmicas de afunilamento e pressão e coisas assim. Eu só quero um pincel regular, direto, quase monolina. Eu sempre posso trazer isso de volta para onde estava pressionando este botão de redefinição quando terminar. O que eu quero fazer é rastrear minhas formas e depois vou usar a ferramenta de preenchimento para preencher o resto, então não preciso fazer tudo à mão. Para usar a ferramenta de preenchimento, você precisa como fechar completamente a forma e a maneira mais fácil de se certificar que você faz isso quando estiver rastreando é começar e terminar dentro de sua carta. Isso também permite que você pare quando precisar. Vou começar por dentro aqui e começar a rastrear e não me preocupo em ser perfeito é de novo, quero essas imperfeições. Bem, irei em frente e ultrapassarei isso e depois entrarei. Se eu ampliar aqui, você pode ver que eu tenho esses pequenos pontos aqui por causa da pele de cebola, onde não está atingindo a linha original. Estou bem com isso. Vou deixar isso como está. Uma das coisas que você quer evitar com isso. Uma coisa é ter pequenas imperfeições como essa. Certifique-se de que, ao rastrear isso, você não está tornando seu traço muito maior ou muito menor do que a letra original, e fique de olho nisso aqui quadros, é por isso que é importante tem peles de cebola. Se você fizer isso, vai ter uma aparência mais como se estivesse respirando do que mexendo. Basta manter o tamanho relativamente próximo do original. Vou seguir em frente e continuar isso por aí. Vou pegar minha vantagem aqui e começar a rastrear isso. Sei que parece um processo muito tedioso e é. Eu não gosto de como isso parece. Isso saiu muito longe e isso não vai parecer certo. O que vou fazer é colocar meu dedo no meu seletor de toque, e isso vai permitir que eu use meu pincel vetorial como minha borracha, e depois traga de volta para pincel vetorial como minha borracha, que eu possa ficar no meu pincel, Não preciso ir à borracha. Vou apenas ir em frente e começar de dentro aqui e descer. Novamente, essa também é uma boa maneira de se permitir uma pausa. Se sua mão ficar cansada ou você precisar mover seu Canvas, você pode começar por dentro e começar a rastrear novamente. Vou apenas ir em frente e ultrapassar isso, e entrar. Vou acelerar isso neste momento, então te vejo do outro lado disso. [MÚSICA] Eu tenho meus contornos aqui e uma coisa que eu quero fazer é apenas ampliar antes de preenchê-los e ter certeza de que não há pequenas falhas estranhas ou lugares que são demais côncavo que pode se destacar demais, porque assim como com as linhas retas que eu estava falando anteriormente, se em um de seus quadros você tiver uma colisão ou uma queda muito óbvia ou algo assim, e é o único, ele vai se destacar e criar um padrão que você não quer. Basta verificar o que você está fazendo à medida que passa. Acho que estes estão bem. Agora vou selecionar minha ferramenta Preenchimento, e basta preenchê-las. Vou desligar minhas peles de cebola temporariamente para que você possa ver. Se eu esfregar para frente e para trás entre esses dois, você pode ver as agitação já começando. Novamente, é importante que você fique com o tamanho original da sua carta. Se estes fossem muito maiores, pareceria que está respirando e saindo, e eu só queria ter uma manobra e é isso. Agora, eu quero fazer isso ao longo de uma série de seis quadros vazios, então vou adicionar outro quadro vazio, ligar minhas peles de cebola novamente, e vou continuar rastreando isso por mais quatro quadros. Não vou fazer isso na câmera, vou ir em frente e fazer isso fora da câmera e voltar quando terminar. Não acabei com minha última moldura vazia, mas queria trazê-lo de volta porque queria te mostrar algo. Neste ponto, estou no meu sexto quadro e tenho minhas peles de cebola por seis quadros antes e depois do meu quadro atual. À medida que você se aprofunda na animação quadro a quadro, isso se torna muito mais opaco e é mais difícil ver esse primeiro quadro. Se você chegar a esse ponto e quiser apenas verificar onde você está contra o primeiro quadro que você criou, você sempre pode arrastar isso na sequência para o primeiro para que o a mais escura que você vê é, na verdade, essa primeira camada, e então você pode simplesmente voltar a rastreá-la. Novamente, isso é apenas para garantir que você esteja no caminho certo com o tamanho geral da sua carta. Você também pode recusar suas peles de cebola. A coisa sobre isso, porém, é que se você estiver fora dos trilhos e esses quadros finais não estiverem exatamente onde você quer, você não vai necessariamente conseguir isso. Para fazer uma verificação dupla, você sempre pode trazê-lo volta como o segundo quadro, para que você possa ver o primeiro. Vou apenas ir em frente e preenchê-los, e então eu posso manter isso aqui se eu quiser ou posso arrastá-lo de volta. Então, uma vez que eu fizer isso, ele vai mudá-lo de volta para o quadro 6. Vou desligar minhas peles de cebola agora. Vamos prosseguir e reproduzir essa animação. Tem uma boa manobra nisso. Vamos ver o que são os quadros por segundo. Eu tenho 12 quadros, e vamos ver como são sete ou oito. Isso pode ser um pouco lento demais. Deixe-me tentar nove. Agora, eu tenho esse conjunto para boomerang em vez de loop, e aqui está o porquê. Se eu colocá-lo em loop, isso dá uma sensação agitada, especialmente se você estiver usando apenas quatro ou cinco quadros. Quando eu uso bumerangue, o que ele está fazendo é que ele está adicionando efetivamente 12 quadros adicionais. Está subindo e depois voltando. Realmente, você tem 12 quadros em vez de seis, o que significa que você tem menos padrões. Uma última verificação que você pode fazer com isso antes de exportá-lo, é apenas um esfregaço através da animação manualmente usando a linha do tempo aqui, e tudo o que estou fazendo é apenas verificar se há qualquer coisa que pareça fora. Com este E aqui neste quadro em particular, sinto que ele esbarrou um pouco demais. Vou me certificar de que estou nesse quadro, vou me certificar de ter meu pincel vetorial selecionado e vou consertar isso um pouco. Agora, se eu esfregar, ainda pode ser um pouco óbvio demais. Não sinta que quando você cria esses quadros, você não pode voltar e alterá-los. Você também pode usar sua borracha se quiser. Mas lembre-se, no final do dia, se você tiver uma única imperfeição em vez imperfeições consistentes em sua animação, essa única imperfeição vai se destacar. É sempre uma boa ideia apenas voltar e verificar as coisas. Gosto de como isso está parecendo. Gosto do pedaço disso. Sinto que a manobra parece boa, não fui muito grande ou muito pequena onde parece estar respirando. Vou seguir em frente e chamar isso feito. [MÚSICA] O efeito de manobra é criado pelas imperfeições que ocorrem quando você rastreia um objeto em uma série de quadros vazios. Pequenas imperfeições são desejáveis, mas fique perto do tamanho do seu texto original, caso contrário, o efeito parece mais respirar do que mexendo. Ligar suas peles de cebola ajudará você a ficar no caminho certo. Então, ligue-os em Configurações para que você possa ver quadros antes e depois do atual e ficar de olho nas coisas. agitadas ou manchas que se desviaram podem ser facilmente corrigidas com seu pincel ou borracha em cada quadro individual. Pontos agitados consistentes podem adicionar algo ao efeito geral, mas os individuais serão muito óbvios em sua animação final. A fonte específica que você usa não importa. Fontes de escrita manual de linha única ou até mesmo sua própria caligrafia serão mais fáceis de recriar. Os de peso médio ou mais pesado exigirão um pouco mais de trabalho, pois você precisará rastreá-los e preenchê-los em suas camadas. Lembre-se de alterar sua fonte para uma camada de pixel ou camada vetorial, dependendo do tipo de pincel que você planeja usar. Você não pode criar camadas MD com uma camada de texto. Quando terminar, teste sua animação e ajuste seus quadros por segundo. Normalmente, dobrar o número de quadros dá uma boa taxa, mas jogue e tente configurações diferentes. Finalmente, o bumerangue tende a funcionar melhor com esse tipo de animação, pois cria um efeito mais suave do que o loop, o que pode torná-lo agitado. Em seguida, vamos dar uma olhada no feijão saltador. Vejo você lá. [MÚSICA] 6. Animação 2 | a saltar: [MÚSICA] Vamos dar uma olhada em como o jumping bean funciona. Letras individuais são movidas para cima e para baixo em quadros duplicados, à medida que a letra desce sua cor muda e a próxima letra começa a subir e cair. Isso continua para toda a palavra até que todas as letras tenham saltado e mudado de cor, então quais fontes funcionam melhor para saltar feijão? Fontes cursivas não funcionam. fontes de impressão funcionam melhor porque você pode facilmente animar cada letra individualmente e, embora o peso da fonte não importe, fontes mais pesadas mostrarão melhor a mudança de cor. Vamos ao Fresco e dê uma olhada mais de perto. [MÚSICA] Tudo bem, estamos prontos para nossa segunda animação, eu chamo isso de feijão de salto por razões óbvias, as letras vão pular pela palavra em sequência. À medida que eles saltam para cima e voltam para baixo, eles vão mudar de cor, e a próxima letra em sequência começará a subir e cair. Agora mencionei no abridor deste vídeo que essa animação em particular funciona melhor com fontes de impressão em vez de fontes cursivas que têm conectores porque você precisa selecionar individualmente e mova as letras. Então eu escrevi minhas palavras em uma nova camada. Estou usando uma fonte chamada Anton regular, que acredito que talvez seja uma das fontes incorporadas. Mas, novamente, assim como na animação anterior, a fonte específica que estou usando não importa. Já mencionei que recomendo usar uma fonte de impressão para isso para que você tenha letras separadas. Eu também recomendo usar uma fonte de peso mais pesado ou médio, porque se você fizer a mudança de cor e usar isso em um tamanho menor, você vai querer ter certeza de que você pode ver a cor mudar e se você tiver uma fonte mais fina, será mais difícil fazer isso, então vá em frente e escolha qualquer fonte que você gostaria. Agora, essa ainda é uma camada de texto, e eu deixei dessa forma porque há algumas alterações que eu quero fazer usando as ferramentas de texto antes converter a camada em uma camada vetorial. Assim como com o Wiggle, porque eu quero usar as ferramentas de transformação para mover minhas letras para cima e para baixo, preciso convertê-las de uma camada de texto porque não posso fazer isso de outra forma. Mas antes de fazer isso, quero ter texto ao vivo para poder fazer algumas alterações. Eu vou em frente e selecionarei minha “Ferramenta de texto”, e quero selecionar as duas palavras e o ponto de exclamação, e vou mover isso aqui para que você possa ver o que está acontecendo. Vou para as propriedades da minha camada, e a primeira coisa que quero fazer é dar a cada dessas letras um pouco de espaço para respirar. Quero um espaço que eu não possa apenas selecioná-los, mas para que eles tenham uma presença mais individual e não sejam esmagados ao lado da outra carta. Isso é um pouco apertado, então eu vou para o meu kerning aqui na parte inferior, e se você começar a arrastar para cima, ele vai começar a mover tudo para a direita. Eu não quero ir longe demais, só vou passar cerca de 30. Mas eu faço, no entanto, quero fazer uma mudança adicional no ponto de exclamação, vou fazer um pouco de uma oscilação no final e virar para frente e para trás e depois, como se trata de resto, é quando ele vai mudar de cor. Preciso dar um pouco de espaço para fazer isso. Vou arrastar isso para que apenas o N e o ponto de exclamação sejam selecionados, vou voltar para baixo e vou arrastar isso para cima ainda mais. Eu não preciso ir longe demais, é apenas cerca de 70 lá. Novamente, eu só quero ter espaço suficiente para que, quando eu incliná-lo 15 graus de qualquer forma, não vai atingir o N. Agora que fiz as alterações espaçamento em minhas letras, estou pronto para começar animando para que eu possa ir em frente e converter isso. Novamente, não estou convertendo isso porque preciso de quadros vazios, na verdade vamos usar duplicatas, mas vou precisar converter isso para poder usar minhas ferramentas de transformação nas letras individuais. Com minha camada selecionada, irei para os três pontos e vou escolher a camada vetorial, mas você pode escolher pixel, se quiser. A maneira que vou animar isso é ter uma letra subir até a minha linha superior que vou designar, e quando ela voltar para baixo, quando chegar ao meio do caminho, vai mudar de cor e a próxima letra na sequência vai subir para o topo, e isso continuará todo o caminho. Vou fazer o ponto de exclamação subir e cair, mas também vou fazê-lo fazer a oscilação sobre a qual falei. O que eu quero fazer é me dar alguns guias para trabalhar. Você poderia fazer isso organicamente e apenas movê-los para onde você quer, é totalmente com você, eu só acho mais fácil trabalhar com alguns guias. A primeira coisa que vou fazer é ativar minhas “Grades”, você pode encontrar isso no ícone aqui. Novamente, não se esqueça que minha tela está virada para uma pessoa canhota, então a sua pode estar do outro lado. Eu quero me dar a linha de cima, bem como esse meio ponto, então com meu pincel vetorial, vou escolher preto aqui e vou me dar uma camada vazia. Agora esta é uma camada que não será exportada com a ilustração ou animação final, só vai me dar o que eu preciso durante toda a animação. Só vou desenhar minha linha e segurá-la em linha reta, e vamos fazer isso. Na verdade, posso selecionar este, e vou duplicar isso. Vamos apenas derrubar isso para me dar um ponto de meio caminho, então bem ali, e vou duplicar isso mais uma vez, quero me dar uma linha de base. Antes de fazer isso, eu realmente quero ajustar minhas letras para tê-las realmente sentadas em uma linha em algum lugar, então eu vou pegar essa camada e vou mover isso para cima, segurar seu dedo em um slide de toque se você quiser mantê-lo reto. Já está lá, então vou pegar minha “Camada Guia” aqui e quero duplicar essa linha novamente, estou na camada errada lá. Eu quero estar nessa e vou levar isso para o fundo. Eu só queria me dar uma linha de base lá, é aí que eu sei que todas as letras vão pousar e eu vou apertar “Concluído”, e posso desligar meus guias , e vou continuar com isso. Novamente, começaremos com o J, ele chegará ao topo e o primeiro quadro de animação. Vai até cerca de meio caminho e mudará para um rosa claro e o U vai subir, e eu vou continuar isso todo o caminho. A primeira coisa que eu quero fazer, porém, é garantir que eu tenha minha camada de textos selecionada, e vou me dar cerca de cinco quadros dessa posição e cor apenas para definir uma linha de base para o animação para que você possa ver, começou como vermelho e depois termina como rosa. Vou duplicar isso cinco vezes, e depois vou duplicá-lo mais uma vez e é aqui que vamos começar a animar as letras. Tudo bem. A primeira coisa que quero fazer é selecionar meu, J, com minha ferramenta de seleção retangular. Vou desenhar uma caixa sobre o meu J, vou ficar nesse quadro e pegar minha ferramenta Transformar. Vou segurar meu dedo no “Seletor de toque”, e vou arrastar isso até o topo. Agora você pode subir mais longe, se quiser, eu só vou para lá, então está no topo da letra e eu vou clicar em “Concluído”, e esse é o primeiro quadro, desmarcar e duplique isso novamente. Agora eu quero selecioná-lo novamente, pegar minha ferramenta de transformação, e vou trazê-la até lá, clicar em “Concluído” e quero mudar a cor. Certifique-se de que está rosa, então vou em frente e selecionarei este rosa claro e desmarcarei esse e eu quero, nesse mesmo quadro que o número 7, pegar meu U aqui e eu vou arrastar isso todo o caminho até o topo. A razão pela qual eu estou fazendo isso incremental é porque fazer dessa maneira vai lhe dar uma animação muito mais suave e isso vai dar um pouco mais de ênfase no salte fazendo isso de forma incremental, então clique em “Concluído”. Tudo bem, vamos seguir em frente e duplicar esse quadro. Eu vou em frente e selecionarei o U novamente, e quero trazê-lo isso na metade do caminho, vou trazê-lo para lá. Eu também preciso trazer meu J todo o caminho para baixo e é aí que o planejamento é útil, quase esqueci de mover meu J, o que teria sido um problema, e vou trazer isso para lá. Clique em “Concluído”, também quero ter certeza de que mudei a cor do meu U, e neste quadro agora vou adicionar uma terceira letra ao mix. Eu quero selecionar meu M e porque meu U está a meio caminho, eu quero meu m todo o caminho para cima, para que você possa ver que está em rampa. Desmarque, duplique o quadro, quero que meu U chegue até o ponto de repouso e, em seguida, pegue meu M. Eu quero mudar a cor e arrastá-la até a metade para baixo e você pode determinar o que é meio caminho. Mas eu seria consistente em toda a linha. Vou desmarcar e agora quero que meu P volte a subir. Para os primeiros quadros, você está trabalhando apenas com duas letras, mas depois disso você tem três ao mesmo tempo, então é algo a ter em mente. Você quer se certificar novamente de planejá-lo para que você possa acompanhar tudo. Desmarque. Agora vou continuar isso todo o caminho através da palavra até chegar ao fim, porque novamente, vou lidar com o ponto de exclamação um pouco diferente e quero mostrar a vocês o que faço com isso, então vou acelerá-lo neste momento e voltarei quando chegar ao fim. [MÚSICA] Cheguei ao ponto em que meu N está quase no meio do caminho e mudou de cor e quero começar a trabalhar com o ponto de exclamação. Vou adicionar um quadro duplicado, pegar minha ferramenta de seleção. Na verdade, eu quero fazer backup. não vou adicionar um quadro duplicado. Quero trazer meu ponto de exclamação para o topo. Uma das coisas que eu recomendo, é que você tenha uma ordem na maneira como você faz as coisas. Você move a primeira letra, muda a cor da próxima letra e a arrasta para um ponto. Faça isso em uma ordem específica por todo o caminho, porque isso vai ajudá-lo a acompanhar o que você está fazendo. Na verdade, acabei de perder a ordem do que estava fazendo e é por isso que quase esqueci de trazer o ponto de exclamação até o topo nesse mesmo quadro. Vou desmarcar isso e agora vou adicionar uma duplicata. Vou pegar meu N e trazê-lo de volta para baixo. Se você acha que não é exatamente onde você quer, você pode usar essas pequenas setas. Não precisa ser perfeito. Essas linhas não serão exibidas quando a animação estiver concluída, mas você quer ter certeza de que está bem perto de onde estava, porque caso contrário, você realmente vai vê-la e a animação vai pular. Eu derrubei este. Eu quero trazer meu ponto de exclamação para a metade do caminho e não vou mudar a cor até que ele tenha terminado de oscilar. Vou trazê-lo no meio do caminho. Eu ainda vou fazer isso de forma incremental para que ele tenha um movimento mais fluido. Vou seguir em frente e clicar em “Duplicar”. Não preciso selecioná-lo novamente. Apenas traga isso de volta para baixo. Neste ponto, eu quero que ele oscile. Vou trazer 15 graus de um sentido e depois 15 graus para a esquerda também. Vou seguir em frente e duplicar esse quadro, pegar minha Ferramenta Transform. Vou segurar meu dedo no Seletor de Toque e isso me permitirá encaixá-lo a 15 graus. Você pode ver que está bem perto desse fim. É por isso que eu queria movê-lo um pouco. Não está batendo, então não vou me preocupar com isso, mas quero duplicar o quadro. Coloque meu dedo no seletor de toque. Você pode ver o que aconteceu. Tudo bem. O que eu deveria ter feito foi reiniciá-lo porque ele realmente pegou parte desse N. Eu vou clicar “Concluído” e vou fazer backup, desmarcar. Quero fazer uma nova seleção. Em vez disso, vou usar a Ferramenta Lasso, porque vai ser muito difícil fazer isso com a retangular por causa desse espaço muito apertado. Agora sei que não selecionei nenhum desses N. Vou acertar minha ferramenta de transformação e agora posso ir em frente e levar isso para 30 graus. Deixe-me apenas ter certeza que é perfeito. Vou clicar em “Desmarcar”. Não preciso refazer isso. Na verdade, posso usar duplicatas para isso. Vou fazer cerca de três de cada um desses. Vou duplicar esse quadro onde ele vai para a direita e depois arrastá-lo para o final. Vou para o segundo quadro onde ele está vindo para a esquerda, duplicá-lo e arrastá-lo até o final e vou fazer isso algumas vezes. Eu quero que ele oscile para frente e para trás cerca de três vezes. Vamos ver. Agora eu quero que ele chegue a um ponto reto. Vou duplicar esse quadro e, mais uma vez, usar minha Ferramenta Laço. Será muito mais fácil do que usar uma tenda para festas retangular. Selecione-o, coloque meu dedo no Seletor de Toque e coloque-o no lugar. Vou clicar em “Desmarcar”. Este é o ponto em que eu quero que ele mude para rosa, quando se trata de seu ponto de repouso. Vou pegar minha Ferramenta de preenchimento e mudá-la para rosa. Vamos seguir em frente e desligar nossos guias. Vou percorrer a animação só para verificar e garantir que tudo fique bem. Voltarei para essa camada e vou apertar “Play”. Isso parece bom. Gosto de como tudo está funcionando, tudo pousou onde era suposto. O problema é que assim que o ponto de exclamação é feito oscilando e muda de cor, ele imediatamente inicia novamente e não fica nessa cor rosa. Vou parar com isso e levá-lo até o final da animação. Estou no meu 26º quadro. Agora, Fresco não tem como criar um porão. O que quero dizer com isso é que você não pode dizer a ele para adicionar automaticamente um número definido de duplicatas desse quadro, você precisa duplicá-las você mesmo. Vou pegar este quadro final e vou duplicá-lo cerca de 20 vezes. Eu tenho 20 cópias das letras completamente cor-de-rosa, todas na parte inferior, de modo que elas vão basicamente segurar no final e depois começar novamente. Vamos passar por isso novamente. Vai balançar, segurar e depois começar de novo. Você pode fazer isso o tempo que quiser. Eu só fiquei com 20 porque acho que está tudo bem. Você também poderia adicionar mais no início se quisesse que ele se mantenha vermelho por mais tempo. Acho que cinco quadros são bons para isso. Gosto de como isso parece. Uma recomendação que eu tenho é que, antes fazer essas duplicatas no final, percorra sua animação porque se você encontrar um local que precisa consertar, precisará corrigi-lo em esse quadro e cada quadro subseqüente. Porque lembre-se, ele está se repetindo em toda a animação. Fazer isso antes de criar essas duplicatas significa que você terá que corrigir muito menos quadros. Basta ter isso em mente e percorrer sua animação antes de fazer isso e os quadros. [MÚSICA] Esta animação funciona selecionando cada letra individualmente, movendo-a para cima e de volta para o ponto original sobre uma série de quadros. Em vez de trabalhar com camadas vazias, nós as criamos usando camadas duplicadas para obter consistência em toda a animação. À medida que cada letra se resume ao seu ponto original, sua cor muda de modo que, no final da animação, a palavra inteira tenha uma cor diferente. Fontes de escrita manual ou qualquer coisa com conectores não funcionam, pois você precisa ser capaz de animar cada letra individualmente. fontes de impressão funcionam melhor, pois você pode selecionar facilmente um animate cada letra. Finalmente, o peso da fonte não importa. No entanto, fontes de peso mais pesado mostram melhor a mudança de cor. Em seguida, vamos dar uma olhada na animação das luzes piscando. Vejo você lá. 7. Animação 3 | luzes de piscar: [MÚSICA] Nesta animação, criaremos luzes piscando selecionando letras aleatoriamente e alterando brevemente sua cor uma série de quadros duplicados. Essa animação em particular funciona melhor com fontes de impressão mais pesadas, em vez fontes cursivas que possuem conectores. As letras são selecionadas aleatoriamente e sua cor é alterada brevemente antes de passar para o próximo quadro. Vamos dar uma olhada mais de perto. Agora, aqui estamos prontos para a Animação 3, que é luzes piscando. Isso é semelhante ao último jumping bean, exceto que não estamos realmente movendo os textos tanto quanto a cor. Vamos selecionar letras individualmente como fizemos da última vez. Desta vez, embora aleatoriamente e mudaremos brevemente a cor sobre uma série de quadros duplicados. Agora, assim como com a última, fontes de escrita manual ou qualquer coisa com conectores, não funcionará com essa animação, pois você quer poder selecionar letras individuais. O peso da fonte realmente não importa, porém, novamente, se você planeja usar isso em um tamanho menor, você vai querer usar uma fonte de peso médio a pesado. Porque quando ela for reduzida, mostrará melhor a animação. Eu configurei minhas letras e estou usando uma fonte chamada Poppins black. É uma fonte mais pesada, mas novamente, se dimensionada para baixo, ainda mostrará a mudança de cor com muita facilidade. Agora não vamos mover nenhum tipo real nesta animação. O movimento virá das mudanças de cores aleatórias que acontecerão entre as letras uma série de quadros duplicados. É a aleatoriedade da mudança de cor que dará à animação geral uma sensação mais natural. Então, queremos ter muito cuidado quando estamos selecionando nossas letras para que possamos evitar qualquer padrão. Agora, ao contrário do bean de salto, não vamos usar nenhuma ferramenta de seleção para isso. No entanto, usaremos a ferramenta de preenchimento para alterar a cor de letras individuais. Para fazer isso, precisamos converter nossa camada de textos em uma camada vetorial ou de pixel. Mas lembre-se quando fizermos isso, perdemos qualquer tipo de vida, que significa que qualquer coisa que você precise mudar o que a ferramenta de texto, você não será capaz de ter certeza de que você tem a fonte do seu escolha e quaisquer alterações que você precisa fazer isso com a ferramenta de texto já são feitas antes de converter sua camada. Agora eu já fiz as mudanças que eu queria fazer e elas são mudanças semelhantes, então o que eu fiz com o jumping bean. Eu uso a ferramenta de texto para alterar o kerning de por letras, então eu as espalhei um pouco. Também ajustei a iluminação entre as duas linhas. Acabei de os aproximar. Quando terminei, fui em frente e converti minha camada do texto para uma camada vetorial. O meu está pronto para começar a fazer as mudanças de cor. A maneira que eu quero que minha animação pareça é que eu quero que ela se mantenha nesse estado para os primeiros quatro ou cinco quadros. Vai mudar de cor aleatoriamente por uma série de quadros duplicados adicionais e, no final piscará entre todo vermelho e todo rosa claro até finalmente pousa em rosa claro e novamente segura para vários quadros. Uma coisa que você precisa lembrar é quando você muda suas cartas, você precisa se lembrar de mudá-las de volta. A maneira mais fácil de fazer isso é criar todas as suas duplicatas antecipadamente. Vou seguir em frente e criar 40 duplicatas dessa camada. Vou acelerar, então volto logo. [MÚSICA] Eu tenho meus 40 quadros duplicados configurados e, antes de começarmos a mudar nossas cores, eu queria explicar por que acabei de configurar isso antes do tempo. Com essa animação em um único quadro, vamos escolher duas ou três letras para mudar para uma cor diferente. Passaremos para o próximo quadro, que será um quadro duplicado e, em seguida, escolher mais dois ou três e mudar sua cor. Mas precisamos ter certeza de que os dois ou três do quadro anterior sejam alterados de volta. Deixe-me mostrar o que quero dizer. Estou no meu último quadro aqui e tenho minha ferramenta Preenchimento de cores selecionada e o rosa claro para o qual vou mudar as letras. Vou escolher aleatoriamente três. Agora, se eu duplicasse esse quadro agora, eles ainda seriam rosa e eu precisava escolher vermelho, então isso significa que preciso pegar meu seletor de cores novamente, escolher o vermelho, mudar isso de volta, volte e mude isso para rosa e, em seguida, escolha mais dois ou três. Não é que isso seja difícil, mas ao longo de uma série de cerca de 40 quadros, você está adicionando muito tempo desnecessário à criação de sua animação. A outra coisa que você faz é correr o risco de esquecer de mudar as cores de volta. A razão pela qual você quer ter certeza de que eles são deslocados para trás é para que você não veja nenhum padrão ou qualquer retenção ao longo dos quadros. Deixe-me sair disso e mostrarei por que estamos usando duplicatas. Quero levar isso de volta ao estado original. Estou de volta ao quadro 40 e tudo está vermelho. Deixe-me voltar um quadro até 39. Eu tenho meu rosa claro selecionado, e vou escolher apenas três letras aleatoriamente. Se eu for para o meu quadro duplicado que já está no lugar e já no estado original, não preciso me lembrar de mudar essas letras. Posso escolher as próximas duas ou três letras. Agora eu posso virar para frente e para trás entre esses dois. Agora, escolhi as mesmas letras neste caso, o que é algo que você quer evitar. Mas, novamente, isso é apenas uma maneira de evitar retrabalho adicional. Quando se trata dessas animações, pense em como você quer que seu resultado final pareça e pense em maneiras pelas quais você pode economizar tempo ao longo da criação da animação, bem como evitar armadilhas como esquecer de fazer alterações que você precisa. Estou de volta ao estado original em que tenho 40 duplicatas desse quadro e vou voltar ao início da minha animação. Eu quero que os primeiros cinco quadros sejam mantidos neste estado, então todos vermelhos. Vou pular bem depois das cinco, vou para seis. No final, vou usar os últimos quadros para piscar entre todo vermelho e todo rosa algumas vezes e depois colocá-lo em todo rosa e segurá-lo por mais alguns quadros lá. Vou começar no quadro 6, selecionando duas ou três letras, passando para o próximo quadro, selecionando mais duas ou três. Cabe a você quantas letras você gostaria de escolher em cada quadro. Acho que duas ou três letras aleatórias dão um efeito melhor. Mas essa é totalmente sua escolha. Só vou selecionar esses três. Agora, o truque vai ser lembrar o que você acabou de selecionar, porque lembre-se, se eu virar para este, você não o vê mais. Eu tinha L, G e S selecionados, então eu quero escolher duas ou três que não são nenhuma dessas letras, então vou com I, H e F. Eu sempre tento escolher pelo menos uma em cada linha. Eu tenho F, I e H. Vamos usar T e A desta vez. Vou continuar com isso por cerca de 30-35 quadros. Vou acelerá-lo neste momento e te vejo do outro lado. [MÚSICA] Eu fiz isso em 35 quadros e o que tentei fazer é apenas ter certeza de que não estou escolhendo uma letra a mais do que outras. É difícil novamente, você está começando de novo com cada quadro, então pode ser difícil acompanhar. Eu recomendo esfregar e apenas garantir que uma de suas letras não esteja piscando mais do que as outras, a menos que esse seja o efeito que você está buscando. Acho que o meu parece muito bom. Estou no quadro 35, o que significa que meu próximo será todo vermelho, e é assim que eu quero isso. Agora, eu realmente poderia fazer mais alguns porque eu realmente não preciso desses quadros adicionais. Acho que vou selecionar aleatoriamente apenas mais alguns quadros até chegar aos 40 lá. Agora estou no meu quadro final e já li. Mais uma vez, quero que isso pisque entre todo vermelho e todo rosa algumas vezes e, finalmente, pouse em todo rosa. Vou duplicar esse quadro e vou mudar todas as letras neste quadro para rosa. Neste ponto, não preciso continuar fazendo isso. Em vez disso, vou duplicar esse quadro, arrastá-lo até o final. Voltarei para o rosa, duplicá-lo, arrastá-lo até o final. Isso é semelhante ao que fizemos com o ponto de exclamação e o exercício anterior. É um pouco mais fácil de ver neste caso. Vou fazer isso cerca de três ou quatro vezes para cada um. Eu sei que quero que isso caia em rosa, então eu quero que seja minha última duplicata. Preciso de outro rosa e farei mais um vermelho e depois mais um rosa. Vamos mover isso para o fim e este é o estado final que eu quero. Neste ponto, vou adicionar cerca de 10-15 quadros dessa cor. Tenho um total de 60 quadros. Acabei de adicionar cerca de 10-15 deste rosa. Vamos seguir em frente e clicar em “Play” e ver como ele se parece. Começa em vermelho e pisca entre as letras. Não vejo nenhuma letra piscando mais do que as outras e parece que todas elas brilharam pelo menos duas ou três vezes e isso é outra coisa que você quer ficar de olho. Se você perdeu alguma das letras que aparecerão também. Apenas fique de olho se você precisa voltar e consertar isso. Ele segura o rosa e depois volta para o vermelho e começa tudo de novo. Agora você pode acelerar isso. Mas eu acho esse em particular se for muito rápido, especialmente quando suas cores estão na mesma família e relativamente próximas, é mais difícil ver essa mudança de cor. Parece uma luz cintilante em vez disso. Vou trazer isso de volta para cerca de cinco. Acabei de descobrir que isso funciona muito melhor. Vou fazer uma verificação final antes de fazer isso. Gosto de como isso parece. Acho que está animando em um ritmo agradável. Não tenho nenhum padrão em que não esteja escolhendo uma carta em particular ou estou escolhendo uma demais. Vou seguir em frente e chamar essa animação feita. [MÚSICA] As letras são selecionadas individualmente aleatoriamente e suas cores são alteradas brevemente ao longo de uma série de quadros duplicados. As camadas de textos precisam ser convertidas pixel ou vetor para que as letras possam ser selecionadas individualmente e preenchidas com uma cor diferente. Certifique-se de selecionar sua fonte antes pois depois de convertê-la converter, pois depois de convertê-la em pixel ou vetor, ela não é mais do tipo ativo. A aleatoriedade da mudança de cor é o que ajuda essa animação a parecer natural, então tente evitar padrões quando você estiver selecionando suas letras. Fontes de escrita manual ou qualquer coisa com conectores não funcionarão com essa animação, pois você precisa selecionar as letras individuais para animação. Finalmente, qualquer fonte de peso funcionará, no entanto, fontes mais pesadas mostrarão a mudança de cor com mais facilidade. Em seguida, vamos dar uma olhada na quarta animação, a escrita sobre efeito. Vejo você lá. 8. Animação 4 | a escrita em efeito: [MÚSICA] A escrita sobre efeito imita a caligrafia revelando gradualmente uma palavra ou uma frase e a direção natural e a velocidade na caligrafia. O efeito funciona melhor ao usar uma fonte cursiva ou manuscrita. Fontes de impressão podem ser usadas. No entanto, eles são mais desafiadores para animar naturalmente. Nesse efeito, usaremos máscaras para ocultar nossos textos de forma não destrutiva. Em seguida, descubra o texto animando uma revelação de máscara. Ao fazê-lo de forma incremental na mesma direção natural da nossa caligrafia, podemos imitar a escrita suave quando ela é reproduzida em um quadro mais alto por segundo. Vamos ao Fresco e dê uma olhada mais de perto. Estamos prontos com animação para o efeito de gravação. Agora, essa é outra animação muito comum que você verá nas redes sociais ou em sites. O que vamos fazer é imitar a caligrafia e usar o recurso de mascaramento no Fresco para fazer isso de forma não destrutiva. Agora, há algumas considerações quando se trata de escolher a fonte, e mencionei algumas delas no abridor do vídeo. Esse efeito funciona melhor com uma fonte de escrita manual, mas não precisa ser cursivo. As fontes impressas mais pesadas serão mais difíceis de animar, e elas podem não ler tão bem, e elas podem não ler tão bem menos que você esteja usando alguma fonte de marcador de classificação. Mas eu recomendo experimentar sua fonte favorita e apenas ver como ela se parece. Agora vamos criar isso novamente animando uma revelação de máscara. Para fazer isso naturalmente, queremos pensar com antecedência sobre como naturalmente escreveríamos uma palavra e revelaríamos nossa máscara na mesma direção. Agora, antes de começarmos a criar a animação, quero falar um pouco sobre como o mascaramento funciona no Fresco. Eu tenho essa forma de folha aqui que eu criei, e esta é, na verdade, uma forma vetorial que eu puxei. No entanto, quero observar que mascaramento no Fresco é baseado em pixels. Mesmo se você estiver começando com uma forma vetorial, basta observar que quando você começar a usar o recurso de mascaramento, você será forçado a usar ferramentas de pixel, então é algo a ter em mente, especialmente quando você está dimensionando seu documento. Agora, a primeira coisa que quero notar sobre mascaramento é que tudo começa dentro da própria camada. Vou tocar na minha camada de folha aqui e, em seguida, tocar novamente para obter meu menu de ação de camada. Há duas maneiras de adicionar isso. A primeira é criar uma máscara vazia, que você pode ver criada uma máscara branca lá sobre toda a camada. Agora nada aconteceu porque, novamente, é uma máscara branca e com qualquer máscara em qualquer aplicativo, revelações brancas e ocultações pretas, então, para esconder a folha, eu precisaria tocar na camada e clicar em “Inverter Máscara”. A outra maneira que posso criar a máscara é novamente tocar na camada para obter o menu de ações da camada e mascarar o conteúdo da camada. Agora a mesma coisa acontece que aconteceu com a anterior, nada está escondido porque está me dando uma máscara branca em um fundo preto. Eu precisaria tocar novamente e clicar em “Inverter Máscara”. Agora está me dando uma máscara preta na forma exata da minha folha e a folha está [inaudível] escondida. Quero chamar sua atenção para baixo aqui. Assim que você adicionar uma máscara aqui, ela lhe dará um menu contextual muito pequeno na parte inferior, mostrando revelar e ocultar. Agora, em outros aplicativos, quando você estiver usando mascaramento, você usará um pincel e use branco ou preto para revelar ou ocultar com sua máscara. No Fresco, tudo é feito aqui. Se eu tiver “Revelado” selecionado, qualquer coisa que eu faça com qualquer pincel de cor revelará minha máscara. Se eu tiver “Ocultar” selecionado, é o oposto, vou escondê-lo. Novamente, a cor real do meu pincel não importa nada. O que importa é o que você selecionou aqui. Agora, outra coisa que você notará é assim que você adicionar uma máscara, ela automaticamente escolherá o pincel de pixels. Novamente, o recurso de mascaramento no Fresco é baseado em pixels, portanto, você não pode escolher os pincéis ao vivo ou os pincéis vetoriais. No entanto, você pode escolher qualquer pincel de pixels. Não precisa ser um pincel básico, o que significa que você pode realmente revelar sua máscara usando um pincel de textura também. Além do pincel de pixels, você também pode usar algumas das ferramentas de forma e preenchimento aqui. Eu poderia pegar minha ferramenta de laço. Eu poderia usar uma das minhas formas incorporadas e posso usar minha ferramenta de preenchimento e mostrarei como isso funciona em um momento. Vamos começar com o pincel de pixels. Se você olhar para sua camada aqui, parece que a camada da folha desapareceu completamente. Mas se você virar, essa é a camada original da folha, e se eu voltar, essa é a máscara. Isso é uma coisa fundamental para lembrar porque especialmente nas próximas duas animações, vamos animar a máscara ou vamos animar a camada, e você precisa ter certeza de que você está no caminho certo para que a animação seja executada corretamente. Estou na camada de máscara e vou garantir que “Revelar” esteja selecionado. Vou em frente e selecionarei um dos pincéis de pixels. Vou começar com apenas o pincel redondo duro básico. Na revelação, se eu começar a desenhar sobre isso, então você pode ver que ele está começando a revelar a forma da folha debaixo da máscara. Posso ir em frente e clicar em “Ocultar” e o contrário é o caso. Agora, novamente, não preciso usar apenas um pincel redondo básico, posso usar qualquer um dos pincéis de textura. Se eu pegar um dos meus pincéis de textura favoritos aqui, usarei o pincel pigmentado de um dos pacotes do Kyle Webster e eu o tenho na revelação e começo a escovar isso. Você pode ver que ele está chegando um pouco mais fraco porque está fazendo isso com textura em vez de um pincel sólido, e se eu ampliar aqui, você pode ver a textura agradável desse pincel. Então, inversamente, posso ir em frente e clicar em “Ocultar”, e a mesma coisa vai acontecer. Agora mencionei anteriormente que você também pode usar algumas das ferramentas de forma e seleção. Enquanto estou na minha camada de máscara aqui, se eu pegar minha ferramenta de elipse, por exemplo, e apenas arrastar uma elipse, posso pegar minha ferramenta de preenchimento, e ela preencherá dentro dessa forma de círculo, então que se eu desmarcar, você pode ver que ele cria um oval lá. Posso fazer isso com qualquer uma das formas. Também posso pegar a ferramenta laço e desenhar uma forma que eu quero. Eu, novamente, preenchê-lo. Ele vai preenchê-lo em certos pontos porque, novamente, lembre-se, usamos um pincel de textura para revelar algumas de nossas máscaras. Algumas coisas finais que eu quero notar sobre mascaramento. Há algumas maneiras pelas quais você pode mostrar a máscara em sua ilustração. Você pode escolher a sobreposição vermelha, se quiser. Pessoalmente, acho que em camadas funciona melhor para mim. Você também pode copiar sua máscara, cortar sua máscara e colá-la, e vamos usá-la na animação bônus e eu mostrarei como fazer isso. Então, a outra coisa que eu quero chamar sua atenção é que você pode desvincular sua máscara. Se eu tiver isso ligado e pegar minha ferramenta de transformação, tudo vai se mover juntos. Se eu desvinculá-lo clicando nesse ícone. Se eu pegar minha ferramenta de transformação enquanto estou na minha camada de máscara, posso arrastar isso e você pode ver que ela está dentro da forma, mas posso movê-la livremente da própria forma. O mesmo vale para a forma. Se eu pegar minha ferramenta de seleção, posso mover isso independentemente da máscara. Novamente, isso vai ser algo que usamos em uma das próximas animações; a máscara, bem como a textura. Precisamos trabalhar de forma independente, então desvincular e vincular serão fundamentais. Em seguida, uma nota final, você também pode desligar sua máscara simplesmente tocando nesse ícone lá. É isso com o mascaramento. Vamos prosseguir e começar a mergulhar na animação real. Tenho minhas letras no lugar e estou usando uma fonte chamada curva de aprendizado, que é uma fonte cursiva conectada, mas novamente, a fonte específica que estou usando não importa. Você pode usar qualquer fonte que quiser. Mas, como mencionei anteriormente, as fontes de escrita manual, sejam cursivas ou não, funcionam melhor para esse efeito. Eu tenho duas cópias da minha camada aqui, e a razão disso é quando eu mascarar essa camada superior, ela vai desaparecer e peles de cebola não funcionarão neste caso. O que eu quero fazer é me dar um guia porque vou animar a revelação da máscara, e preciso ver a direção em que estou indo. Como mencionei anteriormente, é importante pensar com antecedência sobre como você escreveria sobre as palavras naturalmente e animaria sua máscara nessa mesma direção para fazê-la funcionar mais suavemente. Como eu escreveria isso é começar aqui à esquerda e subir. Eu completaria meu w e depois voltava e começava meu r novamente e continuar isso até eu chegar lá no t, chegar ao topo, começar meu t para completar meu pequeno gancho lá. Crie meu e minha barra transversal sobre meu t. Agora vou salvar o ponto sobre o olho até o fim. Vou escrever para o o, começar aqui e virar e para cima, para baixo, para cima e depois completá-lo e, novamente, no último quadro, adicione meu ponto. É assim que eu quero animar minha máscara. A primeira coisa que vou fazer é me dar uma máscara para esta camada superior, então eu tocarei e vou mascarar todo o conteúdo da camada, então vou criar uma máscara vazia. Novamente, está me dando uma máscara branca para começar, então eu preciso inverter isso. Agora, é claro que ainda está aparecendo porque eu tenho minha camada aqui e esta será minha camada guia, então eu não preciso que ela seja tão opaca. Vou selecioná-lo e reduzir a opacidade para cerca de 10 ou mais. Eu só preciso disso o suficiente para poder vê-lo para que eu possa animar minha máscara corretamente. Neste ponto, você quer ter certeza de que está de volta na camada de máscara para essa camada superior. Novamente, a cor do pincel não importa. A única coisa que importa é se você revelou ou se escondeu. Eu também quero ter certeza de que minha animação está ativada, então eu tenho meus quadros lá. Vamos criar isso ao longo de uma série de quadros duplicados porque , ao adicionar uma revelação, quero que isso permaneça no lugar enquanto vou para o próximo. Eu tenho o pincel redondo rígido básico selecionado, você pode escolher um pincel texturizado, se quiser. Vou animar o meu com um pincel opaco normal sem textura, e vou ampliar aqui. Agora, os primeiros quadros, eu realmente quero que ele fique completamente em branco. Vou duplicar isso algumas vezes. Vou começar a animar no meu quarto quadro. Com meu pincel selecionado e o menu contextual em revelar, e certificando-se de que estou na minha camada de máscara, não na camada de texto real , vou começar a animar isso e quero fazer isso em pequenos incrementos em vez de pedaços maiores. Fazer isso em incrementos menores em muitos quadros dará uma animação muito mais suave. Então, se eu fizer isso em pedaços maiores sobre alguns. Cada vez que eu fizer isso, quero duplicar meu quadro. Vou falar sobre isso. Vou clicar em duplicate e, novamente, basta adicionar um pouco mais. Agora, neste caso em particular, vou ficar no lado esquerdo dessa forma e depois voltar à direita. Vou derrubar meu pincel um pouco . Adicione uma duplicata. Eu apenas desenho cuidadosamente a linha lá. Essa animação não é rápida. Vai levar tempo e leva muitos quadros. Uma das coisas que vou te advertir é porque você vai acabar com muitos quadros. Você quer fazer isso devagar e apenas ficar de olho no que está fazendo para que você possa corrigir as coisas conforme você precisa. Se você acidentalmente revelar algo, digamos que eu bati em algo lá. Em vez de excluir toda a camada, eu posso clicar em Ocultar e me livrar disso. Certifique-se de que estou de volta à revelação e comece novamente. Eu acertei Duplicate. Suba até o topo. Vou continuar fazendo isso quando eu voltar para baixo. Como você precisa ajustar o tamanho do pincel. Quando eu voltar a esta parte que não tenho que me preocupar com isso, vou trazê-lo de volta porque, caso contrário, vou trazê-lo de volta porque, caso contrário, vou demorar muito mais para fazer essa animação. Novamente, estou fazendo isso em incrementos muito pequenos. Vou acelerar isso neste momento até chegar ao t. Lembre-se que vou revelar isso na direção em que escreveria a palavra. Vejo você assim que terminar. [MÚSICA] Eu animai a primeira parte da minha primeira palavra aqui e parei o t. Acho que poderia adicionar apenas um toque mais aqui para que ele chegue um pouco mais perto do próprio t, não precisa ser perfeito, porque isso vai ser executado em quadros altos por segundo. Você não vai ver pequenas coisas. Vou duplicar isso. Vou começar no topo do t agora e descer até chegar aqui, e deixar meu pincel menor. É aqui que é importante tomar seu tempo. Quero ter certeza de que não estou animando em nenhuma parte da barra transversal, então estou sendo muito cuidadoso para ficar aqui dentro. Vou descer. Vou continuar andando por aí até chegar aqui. Meu pincel é muito pequeno, então está me levando um pouco mais, mas estou em alguns pontos mais apertados aqui, então eu só quero ter cuidado, ir para o nosso maduro por lá. Vou acabar com meu t. Vou adicionar uma duplicata e começar a fazer minha barra transversal. Agora você pode fazer a barra transversal depois fazer o e, cabe a você. Não vou fazer o ponto sobre o i até o final. Agora vou duplicar e vou começar com o meu e. Quero ficar dentro do meu espaço aqui. Só vou desenhar linhas. Fui um pouco ao mar lá. Deixe-me bater em Hide. Novamente, não precisa ser perfeito, mas você pode realmente ver pontos como este. Você só quer ficar de olho enquanto está passando. Vou continuar andando por aí. Vou acelerar isso neste momento novamente até chegar ao fim. Voltarei antes de terminar o ponto sobre o i. Vejo você lá. [MÚSICA] Ambas as minhas palavras estão escritas. Uma última coisa que resta fazer é animar no ponto sobre o i. Eu adicionei um quadro duplicado. Agora, em vez de usar o pincel, vou usar a ferramenta Laço. Quero ter certeza de que estou na minha camada de máscara. Vou rastrear as bordas do ponto e depois usar minha ferramenta de preenchimento para preenchê-lo. Quando eu acertar Desmarcar, ele está no lugar e ele vai aparecer no quadro final. Alguns pontos sobre as configurações de reprodução para essa animação em particular. Por algum motivo, a animação de loop tende a ficar um pouco de buggy. Não sei se é um problema com o afresco que será corrigido ou é exatamente como funciona. Acho que quando eu jogo de volta, se eu fizer isso no Play uma vez, ele funciona perfeitamente bem. Depois de exportá-lo, parece estar bem. É apenas o modo de reprodução que fica um pouco buggy. Eu não defini para jogar uma vez meus quadros por segundo ou todo o caminho até 40. Porque os quadros mais altos por segundo farão com que isso funcione de forma mais suave , além de animá-lo de forma incremental. Vou apertar Play. Você pode ver que ele está escrevendo, coloca um ponto e então ele fica lá. Vamos em frente e pausar isso e desligar nossa camada guia para que fique completamente em branco. Vou apertar Play novamente. Está escrevendo na direção que eu teria escrito isso. Agora, vou te mostrar como parece com loop. Às vezes, ele corre bem quando está fazendo reprodução e às vezes recebe um pouco de soluço. Você pode experimentá-lo. Vejo que acabou de voltar logo e iniciou novamente. Acabei de descobrir que jogar de volta no Play uma vez funciona melhor. Eu só quero verificar e ter certeza que tudo está andando sem problemas. Uma última coisa a observar sobre essa animação é se você for exportá-la com uma animação de loop e quiser que ela mantenha nesse estado antes de começar novamente, certifique-se de que está adicionando aqueles quadros duplicados no final como temos anteriormente, em qualquer lugar de 10, 30, 40, 50, tempo que você quisesse manter, basta adicionar alguns quadros duplicados no final. Gosto de como essa animação está sendo executada. Acho que está funcionando sem problemas e os incrementos são bons. Vou seguir em frente e chamar essa animação feita. A animação imita a caligrafia escrevendo em uma palavra ou frase sobre uma série de quadros duplicados. Usando o recurso de mascaramento de afrescos, revelamos gradualmente mais da nossa fonte até que a palavra inteira esteja completa. Fazer isso em pequenos incrementos em muitos quadros, nos dará uma animação muito mais fluida que , se for feita em incrementos maiores em alguns. Essa animação funciona melhor com fontes de escrita manual, embora elas não precisem ser cursivas. Fontes de impressão pesadas serão mais desafiadoras de animar , mas experimente sua fonte favorita e veja como ela se parece. Para obter melhores resultados, pense com antecedência sobre como você naturalmente escreveria em sua palavra e a desmascararia no mesmo padrão. Finalmente, um quadro mais alto por segundo dará a essa animação uma sensação muito mais suave e natural. Em seguida, vamos dar uma olhada na animação 5; mascarar. Vejo você lá. [MÚSICA] 9. Animação 5 | mascarar no efeito: Essa animação usa o recurso de mascaramento do fresco para ocultar duas linhas de texto e revelá-las gradualmente sobre uma série de quadros duplicados. Ambas as linhas de textos são colocadas em frente onde finalmente aterrissarão e máscaras são colocadas sobre cada um deles, tornando-os invisíveis. Cada linha de texto é então movida para fora de sua massa gradualmente sobre uma série de quadros duplicados até que ambas as palavras exatamente onde queremos. Vamos dar uma olhada mais de perto. Estamos em nossa quinta animação. Este é chamado de máscara. Vamos ter uma máscara de linha primeiro e, em seguida, duas camadas de texto vão subir de baixo e cima e emergir ao mesmo tempo. Agora, o mais legal dessa animação em particular é que vamos trabalhar de forma totalmente não destrutiva. Usaremos um texto ao vivo porque não precisamos alterar a cor de preenchimento ou usar ferramentas de seleção para que possamos manter o texto ativo. Também usaremos máscaras para que possamos fazer alterações a qualquer momento. Mencionei no início do vídeo que qualquer fonte funcionará para isso de qualquer tamanho, peso ou tipo. Pessoalmente, acho que usar fontes semelhantes, se eu estiver usando duas linhas, lhes dá uma animação muito mais suave do que tentar trabalhar com duas fontes muito diferentes, mas depende completamente de você. Novamente, porque você está trabalhando de forma não destrutiva, você pode testar coisas diferentes, desde que se lembre de ajustar suas máscaras de acordo. Vamos prosseguir e começar. Ainda não configurei meu texto porque antes de fazer isso, quero mostrar duas maneiras de criar facilmente a linha da qual o texto irá emergir. Vou me dar uma camada vazia. O primeiro método é pegar a ferramenta de seleção retangular e simplesmente arrastar a forma. Ele lhe dará uma seleção que você pode usar a ferramenta de preenchimento para preencher. Agora, a desvantagem deste para mim é que a única maneira que você tem de ajustar isso antes de preencher a forma é usar as ferramentas de adicionar ou subtrair aqui. Se eu precisasse diminuir isso, eu o viraria para subtrair e arrastar alguns para longe e vice-versa. Depois de preenchê-lo, se eu pegar minha ferramenta de preenchimento e apenas tocar e adicionar um vetor ou um pixel, agora posso transformá-lo da maneira que precisar. Mas, novamente, não tenho essa flexibilidade antecipadamente. A outra abordagem que você pode adotar para criar essa linha média é ir para o fundo aqui, onde você verá essa régua. Se eu tocar e segurar, ela vai me dar a régua, mas você também verá essas formas adicionais. Se eu escolher quadrado, tenho este quadrado fraco e ligeiramente transparente aqui com uma caixa delimitadora. Posso fazer a forma que eu quero antecipadamente usando a caixa delimitadora e posso ajustá-la como eu precisar. Então, com minha ferramenta de preenchimento em uma camada vazia, vou tocar e novamente ela me perguntará se eu quero um vetor ou um pixel, vou escolher o vetor. Se eu desligar isso, tenho a linha no lugar. Se eu precisasse, eu poderia entrar e pegar essa ferramenta de transformação. Acabei de achar essa abordagem mais flexível e muito mais fácil de ajustar. Eu configurei meu texto agora e estou usando uma fonte chamada Apparat Black, que acredito ser uma das fontes internas. Mas, novamente, como já mencionei, a fonte exata, tipo de fonte e o peso da fonte não importam com essa animação em particular. Basta brincar com fontes diferentes para ver o que funciona melhor para você. Novamente, porque estamos trabalhando de forma não destrutiva, você pode ajustá-lo à medida que avançamos desde que se lembre de ajustar as máscaras. A maneira que eu quero que essa animação funcione é que essa linha rosa vai emergir dessa linha média para o topo, e vice-versa. O vermelho sairá da linha e atingirá o fundo. Estou começando oposto de onde quero ele termine e quero observar que tenho cada um deles em sua própria camada separada porque vamos animar cada um deles separadamente dando a cada um deles sua própria máscara. Desliguei temporariamente o texto, então vamos começar animando a linha primeiro. A primeira parte dessa animação é que a linha vai animar e, em seguida, as duas linhas de texto surgirão ao mesmo tempo. Nem tudo vai acontecer ao mesmo tempo, mas, no geral, queremos ter o mesmo número de quadros para cada camada. É muito importante que, à medida que estamos animando essa linha, precisemos acompanhar quantos quadros usamos porque precisamos duplicá-los, esse número de quadros antes de começarmos a animá-los. Você verá o que quero dizer em um momento. A primeira coisa que quero fazer é adicionar uma máscara a isso. O processo será o mesmo que usamos para o efeito de gravação. Selecionarei o toque de camada e escolherei o conteúdo da camada de máscara. Agora minha máscara inicial está invertida. Preciso disso para esconder a linha e, em seguida, a linha vai emergir dela. Vou tocar novamente e clicar em “Inverter máscara”. Eu não sei se isso é um bug ao ar livre ou é exatamente como é com esse tipo específico de máscara em uma forma, mas se eu aumentar o zoom, você pode ver que eu ainda tenho uma linha muito fraca aqui. A maneira mais fácil de resolver isso é desvincular a máscara, que vamos precisar fazer de qualquer maneira porque só vamos animar a máscara. Tenho uma camada selecionada e desvincularei isso. Vou pegar minha ferramenta de transformação e vou segurar o dedo no seletor de toque e trazer isso levemente até que isso desapareça. Eu não quero que ele saia demais, só queria o suficiente para que essas linhas fracas desaparecessem. Vou apertar “Concluído” e agora tudo se foi. Se você segurar o dedo no botão, ele vai fazê-lo do centro e fazê-lo uniformemente. Eu tenho minha máscara de linha agora, a máscara está desvinculada, o que significa que posso animar a máscara separada da própria linha real. Quero ter certeza de que estou nessa camada. Agora, a maneira como isso vai funcionar é sobre uma série de quadros. Vamos mover gradualmente a máscara para a direita para que ela dê a aparência da linha emergente do lado esquerdo. Deixe-me fazer isso manualmente para que você possa ver o que quero dizer. Vou pegar minha ferramenta de transformação, novamente, estou na minha camada de máscara. Quero ter certeza de que ele permaneça mesmo, então vou segurar o dedo no seletor de toque e vou começar a arrastar isso. Ao arrastar, novamente, estou restringindo minha exposição. Está fazendo com que essa linha pareça estar aparecendo da esquerda, mesmo que tecnicamente seja estacionária. Deixe-me ir em frente e mover isso de volta. Agora é muito importante que você fique no caminho certo com essa animação. A outra coisa importante é que você faça isso de forma incremental. Eu fiz tudo de uma só vez, mas para que a animação funcione sem problemas, você precisa fazê-lo em spurts mais curtos sobre uma série de quadros em vez de grandes pedaços, porque caso contrário, é vai parecer muito agitado e não ler do jeito que você quer. Deixe-me clicar em “Concluído” aqui. Tenho meu primeiro quadro no lugar e vou deixar isso completamente em branco. Quero isso porque quero que essa coisa toda volte a um estado inicial onde nada está aparecendo. Vou apenas ir em frente e clicar em “Duplicar” e este é o ponto em que quero começar a animar a linha. Vou pegar minha ferramenta de transformação. Mais uma vez, quero ter certeza de que estou apenas escolhendo o quadro selecionado. Vou colocar meu dedo no seletor de toque e vou arrastar isso até que apenas um pouco dessa linha esteja aparecendo. Vou apertar “Concluído” e vou continuar fazendo isso. Quadro selecionado novamente. Agora eu só estraguei isso porque não segurei meu dedo para baixo. Vamos voltar e vou começar de novo. Clique em “Concluído”. Vou continuar fazendo isso até que a linha inteira esteja aparecendo. [MÚSICA] Eu fiz toda a linha, movi a máscara dessa linha para que tudo está sendo exibido. Agora você pode ter visto como eu estava passando, houve algumas vezes em que eu precisava fazer backup porque acidentalmente puxei a máscara para baixo. O problema com isso é que vai expor as coisas antes de onde você quer que elas sejam expostas. Basta acompanhar o que você está fazendo e certifique-se de fazer backup, se necessário, e comece de novo. É muito importante manter o dedo no seletor de toque apenas para manter essa posição, agora tenho 12 quadros, vou seguir em frente e apertar play nisto. Quero voltar à minha camada principal para que eu possa fazer isso. Só quero ver como isso está animando. Vamos mover a aceleração. Talvez mova-o um pouco para baixo, um pouco rápido demais. O que vai acontecer é que, quando essa máscara estiver fora da tela, vamos segurá-la tempo necessário para animar nossas duas camadas de texto. Neste momento, está começando novo a cada vez e não é assim que vai acabar. Eu só quero testar isso antes do tempo para ter certeza de que não há nada que eu precise ajustar antes de passar para as outras duas camadas de texto. Nós animamos nossa linha em mais de uma série de 12 quadros. É importante notar que, mesmo que cada um desses elementos esteja em sua própria camada e, em última análise, vamos animar cada camada de forma independente. No geral, o número de quadros para cada camada precisa corresponder. Isso garantirá que a animação comece e pare quando é suposto e nenhuma camada esteja iniciando ou parando antes das outras duas camadas. A primeira coisa que quero fazer é adicionar máscaras às minhas duas camadas de texto. Agora lembre-se que o rosa vai animar e o vermelho vai animar para baixo. Quando eu tiver essa máscara no lugar, vou duplicar cada uma dessas camadas 12 vezes. Eles só vão se sentar no lugar com suas máscaras para os primeiros 12 quadros enquanto a linha entra na tela. Vamos começar com o rosa aqui. Ao contrário da máscara que criamos para a linha, na verdade vou criar essas máscaras usando a ferramenta de seleção retangular. Quero que essa linha de texto seja animada do topo da linha vermelha. Vou pegar a ferramenta de seleção retangular. Só vou me certificar de que estou nessa camada e começar a arrastar. Estou tendo um começo difícil aqui porque sempre posso ajustar isso quando a máscara estiver no lugar, mas estou tentando chegar o mais próximo possível. Tenho minha seleção no lugar. Está cobrindo tanto a linha quanto o texto porque eu não quero que o texto apareça como se estivesse chegando pela linha em si, eu quero que ele apareça do topo. Vou tocar e clicar em criar uma máscara em vez do conteúdo da camada de máscara. vez, vai me dar uma massa que eu preciso inverter. Vou inverter isso e agora ele se foi. Se eu desvinculasse essa máscara, volte para minha camada de texto, pegue minha ferramenta de transformação, eu posso trazer esse texto do topo dessa linha. Você traz isso de volta. Quero fazer a mesma coisa com meu texto vermelho. Eu poderia simplesmente selecionar esta cópia da máscara. Eu posso colar minha máscara e depois movê-la para cima dessa maneira. Pegue minha ferramenta de transformação, coloque meu dedo no seletor de toque e estou pronto. Essa é uma maneira mais fácil de fazer isso novamente quando se trata de criar essas animações, torná-lo o mais fácil possível para você, para que você não perca a noção de nada e isso não leva você muito mais tempo do que precisa. Ambas as minhas máscaras estão desvinculadas, que é exatamente o que eu quero porque eu quero que as próprias máscaras neste caso permaneçam no lugar e vamos animar o texto. Vai ser oposto do que fizemos para a linha. Eu quero que ambos apareçam ao mesmo tempo, mas lembre-se de que preciso que ambos se sentem sob suas máscaras por pelo menos 12 quadros antes de começar a animá-los. Quero selecionar minha camada aqui e vou tocar e duplicar isso 12 vezes. Ao fazer isso, você verá a linha começar a animar. Nós animamos nossa linha e, no meu caso, fiz isso em mais de 12 quadros. Criamos as máscaras para o nosso texto e, em seguida, duplicamos as duas linhas de texto para dar a cada uma dessas o mesmo número de quadros necessários para animar a linha. Agora seu número pode ser diferente do meu, depende apenas quantos quadros foram necessários para você animar sua linha na tela. Apenas certifique-se de que todos os três correspondam. Estamos prontos para começar a animar nosso texto, mas há algumas coisas que eu quero observar primeiro. A primeira coisa é que vamos animar uma linha de texto de cada vez. Queremos ter certeza de que quando animamos a segunda linha, ela é feita exatamente sobre o mesmo número de quadros. Mas, além disso, queremos ter certeza de que o animamos em aproximadamente os mesmos incrementos. Porque estamos criando a primeira linha que você verá ao atravessar os quadros, como ela está acontecendo verá ao atravessar os quadros, e você só quer ficar de olho nisso e você verá melhor o que quero dizer quando começarmos criando isso. A outra coisa que eu quero mencionar é que agora, porque não temos nenhum quadro de espera nesta linha onde duplicamos esse 12º quadro, assim como fizemos com as animações anteriores, ele vai começar de novo e passar por sua animação à medida que estamos criando nosso texto. Não se preocupe com isso, vamos corrigir isso no back-end assim que soubermos quantos quadros precisamos para o nosso texto. Porque nesse ponto, vamos duplicar esse 12º quadro sobre mesmo número para que tudo seja executado ao mesmo tempo. Vou começar com minha linha rosa de textos. Isso vai subir de baixo, emergiu da linha e pousar o topo. Eu tenho essa camada selecionada. É importante garantir que você tenha a parte do texto da camada selecionada e não a máscara porque vamos animar o texto nesse caso e vou duplicar meu quadro. Novamente, como mencionei, a linha desaparece porque está voltando para a primeira parte de sua animação, mas você a verá animada enquanto animamos nosso texto. Não se preocupe com isso agora. Vou seguir em frente e pegar minha ferramenta de transformação e escolher o quadro selecionado. Novamente, não quero fazer a camada inteira. Vou segurar meu dedo no seletor de toque e arrastar isso para cima até começar a ver o texto. Eu só quero emergir ali. Vou bater pronto. Vou duplicar meu quadro novamente. Você pode ver que quando eu fiz isso, a linha começou a animar. Agora, eventualmente, quando terminarmos toda a linha já estará ligada e permanecerá no lugar. Mas até terminarmos o texto, ainda não sabemos quantas camadas de retenção precisamos para isso. Apenas fique de olho nisso. Dupliquei minha linha, vou pegar o quadro selecionado novamente, vou segurar meu dedo para baixo e vou mover isso um pouco mais. Você também pode usar os botões incrementais aqui, basta fazê-lo muito mais devagar. Cabe a você. Vou bater pronto. Duplique meu quadro novamente, as linhas chegam um pouco mais. Quadro selecionado. Vou segurar meu dedo para baixo. Vou mover isso um pouco mais. Só vou acelerar isso neste momento. [MÚSICA] Foram cerca de cinco quadros para fazer isso. Agora acho que quero ajustar isso. Talvez eu tenha que voltar para meus quadros e mover as coisas ao redor. O que vou fazer neste momento é voltar para a minha linha, ir para o meu 12º quadro, e vou duplicar este último quadro até chegar ao 18 porque isso é exatamente número de quadros que tenho para as letras. Com essa camada selecionada, vou pressionar Duplicar até ter 18. Isso vai me dar um indicador melhor quando eu estiver fazendo o outro. Agora eu quero animar minha camada vermelha de cima para baixo e o mesmo número de quadros. Agora estou no quadro 12 aqui, e quero duplicar esse quadro e você pode ver que a camada rosa está começando a atingir o pico, então isso me dá uma boa indicação de como eu preciso animar o outro. Vou pegar minha ferramenta de transformação Quadro selecionado, segurar meu dedo para baixo e vou colocar isso até que você comece a ver o pico. Você pode ver que eu tenho aproximadamente a mesma quantidade chegando lá como eu faço lá, então eu vou apertar Done. Vou continuar. Quadro selecionado. Mantenha meu dedo para baixo, continue puxando isso para baixo. Vou acelerar isso neste momento. [MÚSICA] Eu tenho isso animado, em 18 quadros. Agora, estou descobrindo que isso é um pouco longe demais, o que não é um problema. Vou pegar minha ferramenta de transformação e quadros selecionados, e vou tocar isso de volta, esse é aproximadamente o mesmo local. Agora tenha a mesma quantidade de espaço entre este e este. Vamos apenas executar nossa animação e ver como ela está parecendo até agora. Se eu apertar Play, a linha virá primeiro. Deixe-me abrandar isso. A linha virá primeiro e depois as duas linhas de texto. Agora, obviamente , está voltando ao início porque ainda não fizemos nenhum quadro de espera. Mas realmente eu só quero ter certeza de que tudo está acontecendo ao mesmo tempo. Vou acelerar um pouco. Gosto de como está animando. Gosto de como a linha está funcionando primeiro. Neste ponto, eu só quero ter certeza que tenho o mesmo número exato de quadros, o que eu tenho. Se eu pausar isso, tenho 18 quadros para ambas as letras e minha linha. Agora, neste momento, quero ir frente e criar um quadro de espera. Então eu quero que ele se mantenha nessa posição antes que volte ao início e comece a animar novamente. Vou criar, diria que provavelmente cerca de 20 duplicatas de cada [MÚSICA]. Tenho 38 quadros para cada camada, minhas duas camadas são tributadas na minha linha. Vamos prosseguir e apertar o jogo e ver como isso está parecendo. Então, ele vai animar em espera por 20 quadros e, em seguida, ele vai começar de novo. Agora, com essa animação em particular, se você quiser, você pode entrar em configurações e alterá-la para bumerangue e, nesse caso, ele vai animar em espera por 20 quadros e, em seguida, segurar por mais 20 quadros à medida que ele volta e depois vai se animar. Agora, a única coisa sobre este é por causa da forma atual como o configuramos. Ele anima e depois volta para o lugar novamente. Se você quiser que ele fique um pouco antes de fazer isso, você realmente precisa adicionar mais alguns desses quadros vazios. Você precisa duplicar isso para cada camada, que tudo corresponda e é assim que ela vai aguentar. [MÚSICA] Só quero verificar novamente e garantir que temos a mesma quantidade de quadro, então 48, 48, e de alguma forma temos 47, então vamos voltar aqui. Vou fazer mais um, devemos ter 48 agora. Vamos apertar Play it vai animar. Espere, volte para trás, anime-se. Ele vai segurar 10 quadros e depois voltar a entrar novamente. Novamente, você pode colocá-lo no bumerangue e fazer com que ele se anime. Você só precisa ter certeza de adicionar vários quadros vazios no início. Caso contrário, ele só voltará novamente assim que se anima. Gosto de como isso está animando, acho que está correndo bem e sem problemas. Não preciso ajustar nenhum dos incrementos tudo está bem espaçado. Na verdade, gosto de como a animação do bumerangue está sendo executada. Cabe a você se você deseja que ele execute um loop ou bumerangue, apenas certifique-se de ajustar seus quadros de acordo. Mas vou seguir em frente e chamar essa animação em particular feita. [MÚSICA] Texto ao vivo pode ser usado nesta animação, portanto, não é necessário converter para um formato de pixel ou vetorial. Embora o texto ao vivo seja editável e isso significa que você pode mudar suas palavras. Lembre-se de ajustar suas máscaras de acordo, para que as palavras não sejam exibidas. Alinhar suas máscaras antecipadamente ajudará você a criar uma animação perfeita, mas como elas não são destrutivas, elas podem ser ajustadas a qualquer momento, se necessário. Qualquer fonte de qualquer peso e tamanho funcionará com essa animação, então brinque com a sua favorita e veja como ela funciona. Acompanhe quantos quadros você cria para que todas as camadas em sua animação tenham a mesma contagem. Isso é importante para manter a animação suave. Revelar seu texto em pequenos incrementos em vários quadros lhe dará uma animação mais suave do que revelar em incrementos maiores em menos. Finalmente, um quadro mais rápido por segundo tende a dar um efeito muito mais suave, mas brinque com configurações diferentes e veja o que funciona melhor. Em seguida, vamos dar uma olhada na animação bônus, animando a textura. Vejo você lá. 10. BônUS | Animação no Adobe Fresco: Nesta animação, criaremos uma máscara a partir de texto e animando a textura dentro dessa máscara uma série de quadros duplicados. Esta animação funciona com qualquer fonte, embora funcione melhor com fontes mais pesadas, sejam impressas ou cursivas. Como estaremos animando nossa textura dentro da máscara, fontes mais pesadas mostrarão esse movimento melhor se a animação for usada em um tamanho menor. Você começa com uma linha de texto e criamos uma máscara a partir do conteúdo da camada. A partir daí, a textura é criada ao ar livre ou puxada como um arquivo e aplicamos uma máscara de camada a ela. A máscara e a textura são desvinculadas e começamos a mover e virar a textura sobre uma série de quadros, criando assim a animação. Vamos seguir em frente e dar uma olhada mais de perto. Estamos em nossa animação final e essa será a mais fácil das seis animações que fizemos. Vai ser menos uma animação de texto e mais uma animação de textura. Usaremos nossa camada de texto para criar uma máscara exata da palavra ou frase da qual queremos animar nossa textura dentro. Como mencionei no abridor do vídeo, você pode manter a camada de texto como uma camada base de cor ou você pode obter a cor diretamente da textura como eu tenho aqui. Vou continuar e criar usando uma camada base de cor apenas para que você possa ver como isso é feito. Mas, novamente, se você não quiser fazer isso, apenas oculte ou descarte a camada de textos depois de criar a máscara. Vamos prosseguir e começar. Minha palavra está configurada e vou usar uma fonte chamada Poleno. Assim como nos outros exercícios, a fonte específica não importa, mas o tipo de fonte importa. Você pode usar qualquer fonte que quiser com essa animação, ela só vai depender do tamanho em que você planeja usá-la. A razão pela qual eu digo isso é se eu fosse encolher isso e usá-lo como um adesivo em uma história do Instagram, se não houver muitos imóveis dentro da carta para ver a animação de textura em um tamanho pequeno, não vai ler da maneira que você quer. Eu recomendo com essa animação em particular se você souber que vai usá-la em um tamanho muito menor, vá com a fonte média ou mais pesada. Se você vai usá-lo em um tamanho maior, a fonte realmente não importa, então escolha o que você mais gosta. Você pode adotar algumas abordagens para puxar a textura para essa animação. A primeira é que você pode adicionar uma camada vazia, pegar um ou mais dos pincéis embutidos e criar sua própria textura. Ou se você já tem uma textura favorita que deseja usar, você pode ir ao menu de lugar e puxá-la dessa maneira. Vou fazer isso, tenho algumas texturas sentadas nos meus arquivos. Você pode usar as texturas que forneci com a classe ou você pode usar sua própria textura favorita se tiver uma. Vou para Arquivos, agora sei que quero que a cor da minha animação final venha da camada base da textura, daquela cor rosa, vermelha. Não quero nenhuma cor proveniente da minha textura, então vou escolher uma das minhas pretas e brancas. Sei que quero que este seja o foco da textura, então vou segurar o dedo no seletor de toque e vou girar isso. Agora preciso que isso seja maior que a palavra. A razão para isso é que vamos mover a textura para animá-la. Se for muito pequeno e você se mover muito para a esquerda, para a direita, cima ou para baixo, então há o potencial para a camada embaixo espiar e você não quer isso. Vou falar sobre isso e trazê-lo para lá, e eu vou bater Done. Por enquanto, não preciso dessa camada de textura. Vou desativá-lo porque quero criar uma máscara a partir da minha camada de texto. Vou em frente e selecionarei, toque novamente e quero mascarar o conteúdo da camada. Quando eu faço isso, você pode ver uma máscara exata na forma exata das minhas letras é criada. Agora eu não preciso dessa máscara para a letra em si, só preciso que seja texto para criar a máscara. Vou tocar novamente, vou cortar máscara, e vou voltar para a minha camada de textura e ligá-la. Agora eu quero adicionar essa máscara de volta a essa camada, então vou tocar e apertar a máscara de lugar e vou escolher Concluído. Novamente aqui está a máscara e se eu virar, há a textura. Agora, você quer ficar de olho algo se você estiver na sua camada de máscara, e você vê esse ícone onde ele mostra que está vinculado, você quer ter certeza de que, neste momento, ele está desvinculado. A razão para isso é que se eu mantiver esse link, e eu voltar à minha textura e pegar minha ferramenta de transformação, tudo, incluindo a máscara, vai se mover juntos, e não queremos isso. Na verdade, queremos que a máscara fique onde está e queremos poder mover a textura de forma independente. Voltarei para minha máscara, clique nisso e apenas certifique-se de que a máscara de camada esteja desvinculada. Agora, se eu voltar para essa camada de textura, posso mover isso e você pode ver que a máscara está ficando exatamente onde está. Estamos no ponto em que podemos começar a animar nossa textura. Mais uma vez, eu me certifiquei de que minha máscara está desvinculada para que eu possa mover a textura independente da máscara. Minha animação já está ativada e estou nessa camada de textura porque é isso que vamos animar. Isso é bom como meu primeiro quadro, vou manter isso e quero duplicar isso. Vou em frente e tocarei e clique em Duplicar. Quero mover isso para uma posição diferente. Então, há algumas maneiras de fazer isso. Um dos maiores objetivos quando você está fazendo isso é garantir que você não está fazendo isso em um padrão, porque especialmente se você tiver um número menor de quadros, você verá um número muito distinto padrão, se você não tiver cuidado sobre como você o move. Quero pegar minha ferramenta Transform. Mais uma vez, quero escolher Quadro selecionado porque só quero mover a textura neste quadro específico. A primeira coisa que vou fazer é subir aqui até o topo e vou escolher o flip vertical. Isso vai me dar uma parte do meu movimento. Então eu vou arrastar isso aleatoriamente , talvez para a direita. Você pode ir em qualquer direção que quiser , e eu vou bater Done. Agora eu tenho meu segundo quadro e você pode ver aqueles se movendo para lá já. Vou pressionar Duplicate para isso novamente. Desta vez eu vou com flip horizontal e talvez eu o mova para a esquerda para que eu tenha algum movimento lá. Agora eu recomendo fazer pelo menos quatro ou cinco quadros, se não mais, eu costumo fazer cerca de 10-12. Vou ir em frente e fazer isso agora e vou acelerar , então te vejo quando terminar. [MÚSICA] Eu tenho meus quadros no lugar e vou clicar em Play para verificar meu movimento aqui. Vejo um bom movimento, sem padrões. Eu não tenho nenhuma letra espreitando por baixo dela onde eu a puxei longe demais, de uma forma ou de outra. Vou para Configurações, agora isso está definido como quatro já da minha camada de textura anterior. Vou apenas falar sobre isso. Você certamente poderia fazer isso obviamente que o torna muito mais rápido. Isso é ótimo para algo como se você está criando estática para uma televisão ou se estiver fazendo filmes antigos. Onde você está usando a textura de papel de jornal para criar uma grade? Essa velocidade funciona muito bem. Para os propósitos desta animação, agora vou manter isso em quatro. Eu tenho meu movimento no lugar, mas, novamente, quero que a cor da camada de texto venha por isso vou selecionar essa camada, então vou desligar minha animação. Quero ter certeza de que a camada está selecionada e vá para as propriedades da minha camada. Vou mudar meu modo de mesclagem para algo como sobreposição. Agora, se eu quisesse, também poderia mudar minha opacidade, mas eu realmente gosto dos níveis e das camadas lá. Gosto de como esse vermelho está chegando, mas em alguns dos pontos onde a textura está batendo e brincando com essa cor, está me dando essa cor PG. Vamos apertar Play novamente e eu gosto de como isso parece. Neste ponto eu poderia ir em frente e exportar isso. Se você usar esses dois, tudo o que você realmente precisa fazer é ter certeza de que essas são as duas camadas que estão sendo exibidas, e quando você exportá-las, e eu mostrarei mais sobre como exportar no próximo vídeo, essas duas camadas vão juntas. Apenas certifique-se de que tudo o que você deseja exportar esteja visível. Você também poderia agrupar isso se quisesse, mas não é necessário. [MÚSICA] Fontes mais pesadas tendem a funcionar melhor com essa animação porque permitem que sua animação de textura seja vista mesmo quando usada em um tamanho menor. O tipo é usado para criar uma máscara para colocar sobre a textura, mas não é necessário para a animação final. Dito isto, se você quiser manter sua camada original de textos não animados no lugar como uma cor base, você pode exportar tudo juntos. Lembre-se de usar todas as ferramentas e a ferramenta de transformação, incluindo flip vertical e horizontal, para criar um efeito mais aleatório e, portanto, natural. Para animar apenas a textura, se esqueça de desvincular sua máscara da camada de textura e certifique-se de que sua camada de textura esteja visível no painel de camadas. Finalmente, um quadro baixo por segundo tende a funcionar melhor com essa animação, pois quadros mais altos por segundo têm uma sensação mais frenética. Próxima parada, vamos falar sobre opções de exportação, vejo você lá [MÚSICA]. 11. Opções de exportação de movimento no Adobe Fresco: [MÚSICA] Tudo bem, então criamos nossas animações e estamos prontos para começar a explorá-las. Agora o Fresco oferece várias maneiras de exportar sua animação final como GIFs, MP4s e sequências PNG. O que você escolher dependerá de onde você planeja usar sua animação. Vamos falar sobre os vários formatos em um momento. Mas antes de fazermos isso, vamos seguir em frente e dar uma olhada em como configurar sua tela para prepará-la para exportação. A primeira coisa que você quer fazer é pensar em onde você quer usá-lo. Quero usar este como um adesivo de animação que posso enviar para o GIPHY e usar no Instagram ou mensagens, o que significa que ele precisa ter um fundo transparente e tudo o mais que eu tinha por trás disso precisa estar desligado. Pause isso por um momento. A primeira coisa que você quer fazer é garantir que a camada que o Fresco coloca no lugar automaticamente esteja desligada. Basta selecioná-lo e acertar o pequeno globo ocular. Quaisquer outras camadas opacas que você não queira aparecer estão desativadas. Agora, se você pensar na camada de textura onde tínhamos duas camadas onde criei um sólido que usei como base de cores e depois a textura em cima dele. Eu gostaria que essas duas camadas permanecessem e elas seriam exportadas juntas. Tenho minha camada pronta para ir. Está em um fundo transparente. Vamos seguir em frente e entrar na exportação e falar sobre os vários formatos que estão disponíveis para você. Quando estiver pronto para exportar sua animação, vá até o botão Compartilhar na parte superior e escolha publicar e exportar. Você verá o movimento na parte inferior e poderá alterar o nome do arquivo, bem como escolher entre os três formatos diferentes, MP4, GIF e sequência PNG. Vamos falar sobre GIFs primeiro. Eles são o formato mais amplamente aceito e comumente usado, mas também são o formato mais antigo. Um dos maiores problemas com GIFs é que eles não suportam transparências, incluindo transparências parciais, como sombras. Onde um fundo totalmente transparente é necessário, Fresco criará suavização e adicionará o que é chamado de tapete ao redor sua animação para preencher a ilustração em si e evitar que ela parecendo agitado. Se você tiver uma sombra ou uma transparência parcial, eles não terão suporte em GIFs. Se você precisar usar uma sombra com sua animação, precisará usar um plano de fundo de algum tipo ou exportá-lo como PNG, sobre o qual falaremos daqui a pouco. O último problema com GIFs é que eles também têm uma qualidade visual muito menor do que outros métodos, então eles são mais difíceis de usar em um tamanho maior. Vamos falar um pouco sobre os tapetes que acabei de mencionar. Quando escolho GIF, recebo duas opções, sem transparência e branco é transparente. Se eu não escolher transparência e gerar meus quadros, ele adicionará automaticamente um fundo branco puro nos lados da minha tela. Agora, se isso funcionar para você, tudo bem. O problema é novamente, esse é o tamanho da minha tela e há todo tipo de preenchimento aqui. Se você planeja usar algo assim, recomendo recortar mais perto de sua animação para que você possa alterar o tamanho da tela e o Fresco antes de exportá-la. Dessa forma, você não tem todo esse espaço não utilizado que está preenchendo o que você está colocando. Se eu escolher branco como transparente e gerar meus quadros, ele vai me dar aquele tapete que mencionei. Você pode ver uma linha branca muito fraca em torno de todas as minhas letras. Agora, as letras reais em si são intocadas, mas a linha branca é muito agitada por causa da suavização de serrilhamento. O Fresco está forçando a transparência onde a transparência não existe com GIFs e tudo bem, exceto por algumas coisas. A primeira é se você planeja usar isso como um adesivo de texto, um adesivo de texto animado em algo como GIPHY, esse tapete branco vai aparecer. Agora, tornou-se amplamente aceito que estes existam. Se você for no GIPHY ou sites como ele, verá uma tonelada de animações que têm aquele tapete branco ao redor dele e acabou de ser aceito, e em um tamanho muito pequeno onde você estaria usando-o em uma história ou algo assim, é muito mais difícil de ver. O outro problema, porém, é se você precisar usá-lo em um tamanho maior, partir desta gravação, Fresco não permite uma opção alterar a cor do tapete para algo diferente do branco ou desligue-o completamente. Agora, no próximo vídeo, vou mostrar como tirar uma sequência PNG do Fresco e criar um GIF muito mais limpo. Além de como você pode usar o Photoshop para desligar o tapete ou mudar a cor. Mas se você planeja exportar diretamente do Fresco, saiba que ao exportar com um GIF, você exporta com um fundo ou com este tapete branco. A próxima opção que você tem é MP4. Agora, os MP4s têm mais algumas opções para eles. Você pode realmente armazenar áudio e vídeo. Embora no Fresco, na verdade, não há como adicionar áudio a partir deste ponto. Há duas versões do mp4 no Fresco, automáticas e prontas para a web. Automático será do tamanho que você o criou, pronto para a Web reduzirá um pouco o tamanho. Não vejo muita diferença na qualidade quando você a muda. O tamanho menor de MP4s é o que os torna realmente desejáveis. Sites como Facebook e Instagram realmente exigem isso em GIFs e PNGs para postagens e outras coisas. Tenha isso em mente. O maior problema com MP4s é que eles não suportam nenhuma transparência, seja total ou parcial, porque usam o que é chamado de codificação JPEG. Você não pode fazer nenhuma transparência. Isso vai me levar à opção final, que são PNGs. Vamos seguir em frente e dar uma olhada nisso. Tudo bem, então quando você escolhe a sequência PNG, a primeira coisa que você vai notar é que na verdade não há outras opções. É isso. Você escolhe a sequência PNG e não há outras caixas suspensas. A maior desvantagem com o Fresco e essas sequências PNG que não é realmente animada. Ele não exporta um PNG animado, mas exporta o que é chamado de sequência PNG. O que é isso é um instantâneo de cada quadro que você criou como um arquivo PNG. O que você vai conseguir é um arquivo zip com uma imagem de cada quadro e, em seguida, você precisa levá-lo para outro aplicativo e animá-lo. Agora, novamente, na próxima lição, vou mostrar como levá-lo para Photoshop e animá-lo. Mas se você não tiver o Photoshop disponível para você, há vários sites gratuitos na Web que você também pode usar. A outra desvantagem dos PNGs, especificamente PNGs animados, é que a maioria dos sites não os aceita neste momento. Mesmo que eles ofereçam a exportação mais limpa e você possa usar transparências, infelizmente, enquanto a maioria dos navegadores realmente as aceita, os sites em si não. O que tudo se resume a [MÚSICA] é que você precisa pensar sobre onde planeja usar sua animação, quais outras ferramentas você tem disponíveis para você se escolher uma opção, digamos como sequência PNG, e decida o que vai funcionar melhor para sua animação. Vamos dar uma rápida olhada em nossa lição. GIFs são o formato de animação mais amplamente aceito, mas também são os mais arcaicos e têm uma qualidade visual muito menor do que qualquer outro formato. Eles não suportam transparências de nenhum tipo, portanto, tapetes necessários onde um fundo transparente é necessário. Transparências parciais não estão em voz alta , portanto, se você criou uma sombra, precisará criar um elemento de fundo ou salvá-lo como uma sequência PNG. MP4s têm um tamanho de arquivo muito menor, mas não suportam transparências porque usam codificação JPEG. O formato PNG permite transparência total ou parcial e tem uma qualidade muito maior do que GIFs. O problema é que o Fresco exporta uma sequência PNG em vez um PNG animado, então você ainda precisará animar os quadros em um programa separado. Em seguida, mostrarei como tirar uma sequência PNG do Fresco e criar um GIF muito mais limpo no Photoshop. Vejo você lá. 12. Converta uma sequência de PNG no Photoshop: [MÚSICA] Estou aqui no Photoshop e quero pegar aquela sequência PNG que acabei de exportar do Fresco, e quero convertê-la primeiro para um PNG animado e, finalmente, exportá-lo como animado GIF. Novamente, a razão pela qual estou fazendo isso aqui é porque, partir de agora, Photoshop oferece mais opções quando se trata mattes e GIFs do que Fresco, eu possa escolher branco, preto, posso escolha uma cor personalizada, se eu quiser. Antes de irmos para a animação, há algumas coisas que eu quero observar. A primeira é que estou no Photoshop para desktop. partir de agora, o Photoshop para iPad não tem recursos de animação, então você precisará usar a versão para desktop do aplicativo. A outra coisa que quero observar é que quando o Fresco exporta uma sequência PNG, ele lhe dará um arquivo ZIP. Você precisará ter certeza de que você descompacte isso antes de entrar no Photoshop. Eu fui em frente e fiz isso aqui. Vou apenas clicar duas vezes e abri-lo, e você pode ver que tenho cinco imagens PNG aqui. Mas se você pensar na minha animação, eu só criei três quadros, mas mudei a reprodução para bumerangue. Para compensar isso, quando o Fresco exportou minhas sequências PNG, ele me deu essas duas imagens PNG adicionais para fazer esse efeito bumerangue. Em essência, é um, dois, três, dois, um, mas para os propósitos da linha do tempo do vídeo, é rotulado de um a cinco. Agora, há uma maneira muito fácil de abrir isso como um arquivo de vídeo no Photoshop. A primeira coisa que você quer fazer é garantir que suas opções estejam abertas aqui. Caso contrário, basta clicar em “Opções”, clicarei no primeiro arquivo PNG, verificarei a sequência de imagens e clique em “Abrir”. Vai me perguntar qual eu quero que minha taxa de quadros seja. Agora, escolhi sete no Fresco, então vou ficar com isso aqui. Você verá que isso me dá um grupo de vídeos aqui na minha linha do tempo, bem como em minhas camadas aqui. Quero me concentrar aqui na linha do tempo. A primeira coisa que eu quero fazer é certificar de que vou até esta engrenagem e clique em Loop Playback para que ela não seja apenas percorrida e pare. Eu tenho minha resolução definida para 50% e isso é ótimo. Se você achar que o Photoshop está ficando desajeitado ou lento, você sempre pode alterar sua resolução para ajudá-lo. Vou apenas seguir em frente e clicar em “Jogar”. Agora, o que você pode descobrir é que nas primeiras vezes que ela percorre a linha do tempo, ela fica desajeitada. Você pode vê-lo parando lá, e isso não é o que eu quero, mas acho que à medida que ele passa por ele começa a aprendê-lo. Não tenho certeza se é isso que está fazendo, mas acho que isso se suaviza. Na verdade, vou parar com isso para poder te mostrar. Você pode correr pela cabeça de jogo aqui. Você também pode percorrer isso aqui. Se você acha que sua animação não está sendo executada tão rápido quanto você gostaria, você também tem a opção de mudar sua velocidade. Você pode clicar aqui neste pequeno botão de reprodução. Isso lhe dará velocidade e duração. A duração é baseada em qualquer velocidade. Digamos que eu queira colocar 125 por cento porque não sinto que isso estava funcionando tão rápido quanto eu quero. Isso mudou minha duração porque ele vai passar por esses cinco quadros muito mais rapidamente se eu clicar em Reproduzir. Na verdade, eu gosto muito mais disso do que a forma como ele estava funcionando a 100%. Está correndo a velocidade exata que eu queria. Isso é tudo a dizer que você tem a opção de acelerar ou diminuir a velocidade do jogo se quiser, novamente, apenas clicando neste pequeno botão de reprodução aqui. Neste ponto, tenho um PNG animado. Agora, não vou salvá-lo como PNG, vou exportá-lo como um GIF. Mas é assim que é fácil criar isso no Photoshop. Mas vamos dar uma olhada em como podemos exportar nosso arquivo como um GIF animado. Para exportar meu GIF, vou até Arquivo, Exportar, Salvar para Web Legacy, e isso abrirá uma caixa de diálogo para mim. Agora, meu arquivo é muito grande porque eu criei isso no Fresco em um tamanho muito maior do que eu precisava. Se você se lembra, trabalhei com vetores e não tenho textura nisso. Vou alterar o tamanho da minha imagem para 1.000 pixels apenas para manter o tamanho do meu arquivo relativamente baixo. A outra coisa que eu quero fazer é garantir que o GIF esteja marcado aqui. Se você tiver muitas cores em seu GIF, você pode ter certeza de que o número máximo de cores está sendo exibido, que é 256. Eu não mudo nada aqui, mas o que eu mudo são as opções foscas. É aqui que, nessa caixa suspensa, você terá todas as opções que não está necessariamente vendo agora no Fresco. Eu posso escolher não fosco, posso escolher a cor do conta-gotas, que eu possa usar meu conta-gotas para selecionar uma cor em algum lugar, posso usar as cores de primeiro plano ou de fundo, branco, preto, ou se eu clicar em outro, ele me permite colocar um código hexadecimal específico. É realmente com você o que você quer usar. Agora, onde você usaria um personalizado é, digamos que você tenha um site que não tenha um fundo branco puro, mas você quer ter um fosco atrás do GIF. Você pode simplesmente ir em frente e clicar em “Outros”, chave no código hexadecimal exato do seu site e está pronto. Agora, vou salvar isso de duas maneiras. A primeira coisa que quero fazer é salvá-lo sem fosco, e depois vou salvá-lo com um fosco branco para que você possa ver a diferença. Antes de fazermos isso, vou ampliar aqui. Agora, estou ampliando em 800%. Você pode ver que eu tenho um anti-aliasing aqui nos pontos onde há muitas curvas, o que neste caso particular há muito porque a fonte com que trabalhei tinha muitas curvas, onde eu tem algumas linhas retas para que você possa ver que eu não tenho essa agitação. Mas, novamente, eu tenho isso ampliado para 800%, e não é assim que eu o usaria. Se eu fosse usar isso, provavelmente seria usado em algo como o Instagram, onde seria muito menor, e você não pode ver esse aliasing. Se eu começar a clicar em “Jogar”, eu só vejo essa manobra e isso é sem um fosco nele. Como comecei com uma sequência PNG muito limpa, estou recebendo uma saída boa e limpa mesmo com um arquivo GIF. Vou em frente e parar com isso. Vamos mudá-lo para preto para que você possa vê-lo melhor. Se eu aumentar o zoom, você pode ver ele me dá aquele contorno bonito, pequeno e preto lá que protegerá as bordas do meu texto para que a suavização de suavização atinja esse contorno preto em vez do texto em si. Agora, se eu ampliar muito perto, parecerá que está em tudo porque, novamente, estou ampliando para 800%, o que não é onde eu usaria isso. Deixe-me mudar isso para branco. A primeira coisa que vou fazer é garantir que para sempre seja verificado aqui embaixo. Vou clicar em “Salvar”, você quer clicar em “Salvar” e não em “Concluído”. Vou mudar isso para em breve branco fosco, e vou salvá-lo no mesmo arquivo. Agora, eu quero voltar para minhas opções Arquivo e Exportar, porque novamente, quero salvar isso dessa vez sem um fosco para que você possa ver a diferença. Vou mudar isso para nenhum. Mais uma vez, vou mudar o tamanho da minha imagem , então estamos comparando maçãs com maçãs. Certifique-se de que para sempre está verificado. Vou clicar em “Salvar” e vou fazer em breve nenhum fosco. Vamos para as visualizações de ambos para que você possa ver a diferença. Eu tenho meus dois GIFs aqui, um com o fosco branco e outro não fosco. Vou seguir em frente e clicar na barra de espaço para nos dar uma prévia. Este é o único sem fosco. Você pode ver que, mesmo neste tamanho realmente grande, é realmente limpo. Existem imperfeições ou é anti-aliasing e os pontos de curvas, mas eu usaria algo assim para carregar no GIPHY para que eu possa usá-lo como um adesivo de texto em uma história do Instagram ou em mensagens em algum lugar, eu usaria muito pequeno. Essas imperfeições não vão realmente importar. Deixe-me rolar para baixo até aquele com o fosco. Este é o único com um fosco branco. Claro, o texto está bom, mas você pode ver a suavização e a faixa em torno dele. Agora, isso seria ótimo se eu precisasse usar meu GIF em um tamanho maior em um site e eu quisesse que meu texto parecesse intocado. Eu poderia, claro, combinar meu fosco com qualquer cor de fundo que eu tenha, e ficaria ótimo. Se eu tiver uma escolha, eu provavelmente usaria isso no Instagram do que eu faria isso, porque mesmo que isso tenha o anti-aliasing novamente em um tamanho menor, você não vai veja isso. Agora, espero que um dia eles adicionem as mesmas opções no Fresco que eles têm em um Photoshop. Eles estão constantemente adicionando ao Fresco o tempo todo, então é possível, mas, por enquanto, se você tiver acesso ao Photoshop para desktop, essa é uma opção para desligar o fosco ou definir o cor fosca para o que você quiser. Se você não tem Photoshop e ainda quiser fazer isso, existem outras opções gratuitas por aí como Easy GIF e outros sites por aí. Eles podem não funcionar tão bem, mas eles fazem um bom trabalho criar um PNG animado, que você pode converter em um GIF. [MÚSICA] Vamos dar uma rápida olhada na nossa lição. Você só precisa selecionar a primeira sequência de imagens e imagens PNG na parte inferior da caixa de diálogo aberta para abrir seu PNG animado. Para corresponder à sua velocidade, defina os quadros por segundo, o mesmo número que você escolheu no Fresco. Quando você estiver dentro do Photoshop, você verá um grupo de vídeos no painel de camadas e na linha do tempo na parte inferior, e esse é o seu PNG animado. Lembre-se, se você quiser diminuir a velocidade da animação ou acelerá-la, basta clicar na linha do tempo e alterar a velocidade. Quando você estiver exportando, escolha Salvar para legado da Web no menu Exportar no menu Arquivo e certifique-se de que o GIF esteja selecionado como sua opção. Uma vez selecionado, escolha cor do fosco que você deseja, branco, preto, primeiro plano, fundo, conta-gotas ou personalizado ou desligue-o completamente. Mas lembre-se, se você trabalhar sem fosco, haverá suavização de suavização torno das curvas em seu design, mas quando você estiver começando com uma sequência PNG, normalmente é bastante mínimo. Em seguida, vamos encerrar a aula, então te vejo lá. [MÚSICA] 13. Resumo geral: [MÚSICA] Estamos no final da aula e gostaria de agradecer por confiar em mim o seu tempo e criatividade. Espero que você esteja animado para criar suas próprias animações de texto usando o Fresco. Adoraria ver suas animações. Lembre-se, se você criar um projeto, compartilhe-o na Seção Projetos e Recursos. Você não só ajuda os futuros alunos ver o que aprenderão quando tiverem a aula, quando você compartilha um projeto e deixa um comentário, ajudará mais pessoas a encontrá-lo. Se você compartilhar uma de suas animações em uma história que você postar no Instagram, marque-me como eu adoraria compartilhá-la com meus próprios seguidores. Eu tenho muitas novas aulas em andamento, então não se esqueça de ir para o meu perfil e clique no botão “Seguir” para que você seja notificado quando eu publicar uma aula. Você também encontrará toda a minha linha de aulas de ilustração digital e fotografia. Informações sobre o meu grupo do Facebook dedicadas a todas as coisas de textura digital onde você pode compartilhar seu trabalho, fazer perguntas ou compartilhar suas próprias dicas e truques em um ambiente amigável. Você também encontrará um link para o meu canal do YouTube, onde compartilho tutoriais digitais curtos que complementam minhas aulas aqui no Skillshare. Finalmente, um link para o meu boletim informativo. Ao se inscrever, você receberá um pacote gigante de pincel e textura e brindes regulares. Se você tiver alguma dúvida sobre a aula ou uma sugestão para uma nova, publique-as na seção de discussão abaixo ou envie-me um e-mail. O link está no meu perfil. Obrigado novamente e feliz criando. [MÚSICA]