O efeito de brilho perfeito no Adobe After Effects

1. Introdução: Olá, meu nome é Valerie e bem-vinda à coleção Premium Effects, uma série de cursos focados em After Effects, onde ensino os efeitos mais úteis que você precisa conhecer para elevar seus projetos e obter uma aparência premium E o que torna esses efeitos realmente especiais é que nenhuma ferramenta de IA pode replicá-los com o mesmo nível de perfeição e personalização que você obtém ao criá-los nativamente no After Eu aprendi e pratiquei cada um desses efeitos a ponto de poder ensiná-los da maneira mais simples possível Sem plugins, apenas After Effects. Este é um curso de nível intermediário. Então, para acompanhar, você precisa conhecer os fundamentos básicos do After Effects, como quadros-chave, precons, remédios de greve e Tudo bem. Portanto, neste curso, você aprenderá como criar um efeito de brilho perfeito e, para tirar o máximo proveito dele, aprenderá como configurá-lo em três cenários diferentes em camadas de formas simples para configurá-lo em três cenários diferentes em criar uma bela cena de projeção de luz brilhante em pré-coms com animação de design de interface interna para deixar a interface do usuário incrível texto fazendo com que suas três cenas pareçam verdadeiramente cinematográficas. Ao longo do caminho, você verá quais problemas poderá encontrar, como corrigi-los e como criar a configuração para evitá-los no futuro. Também abordaremos alguns tópicos importantes que você pode ter perdido em sua jornada com o After Effects. Ao final deste curso, você terá a confiança necessária para criar cenas que transformarão seus projetos do entediante ao premium, totalmente personalizável e 100% nativo do After Não são necessários plug-ins. Então, se você está pronto para aprimorar suas habilidades de movimento, participe do curso e vamos começar a tornar seu projeto brilhante. Nos vemos lá dentro. 2. Configurar a tela brilhante: Olá, bem-vindo ao curso. Primeiro, como sempre, não se esqueça baixar a pasta principal do curso. Lá dentro, você encontrará três pastas. O primeiro se chama AE. Lá dentro, salvaremos nosso projeto. Em seguida, temos a pasta Assets com todos os ativos que usaremos no curso e uma pasta chamada Finals. Lá dentro, você pode salvar suas renderizações finais. Agora, antes de começarmos, se esta é a primeira vez que você assiste a um dos meus cursos, eu só quero mencionar a pequena nota que você verá no canto inferior esquerdo dizendo: Vamos fazer isso juntos. Quando você vê isso, significa que você precisa acompanhar e começar a agir. Mas quando mudar para assistir e ouvir, pare de trabalhar e preste atenção à minha explicação. Tudo bem. E agora vamos abrir o After Effects juntos. Estou usando a versão beta para ter todos os novos recursos que você possa ter, já que você assistirá ao refrão no futuro depois que eu fizer o upload Tudo bem. E agora vamos começar verificando se estamos todos na mesma página. Primeiro, vamos ter certeza de que estamos usando o mesmo layout de painéis. Vamos para o Workspace e selecionar o layout padrão, caso ele ainda pareça diferente Basta redefinir esse layout clicando aqui. Feito isso, vamos garantir que nossas preferências de software sejam iguais. Vou analisar todas as preferências e você se certifica de combinar com a minha configuração. Especialmente no menu de memória, certifique-se de diminuir a RAM para outros aplicativos. Então, After Effects, vamos aproveitar ao máximo a RAM para um melhor fluxo de trabalho. Ok, feito isso, vamos agora clicar aqui para acessar as configurações do projeto. E aqui, verifique se a profundidade de bits está definida para 16 bits por canal. Dessa forma, os gradientes e os brilhos do projeto ficarão muito melhores. Tudo bem. E agora começaremos o curso criando essa bela animação e, ao longo do caminho, entenderemos a ideia principal por trás dessa técnica e quais são as etapas para alcançar esse lindo efeito de brilho, que você pode usar posteriormente em animações de interface ou animações de texto Começaremos com uma animação relativamente fácil para que possamos entender melhor a ideia e depois passar para outras mais avançadas nas próximas lições OK. Então, vamos começar criando nossa primeira composição. Vamos chamá-la de Lição 1. Em seguida, escolha a predefinição de cenário de mídia social para obter a resolução full HD com a taxa de quadros de 30 quadros por segundo Para a duração, você pode configurá-la para 20 segundos e, para a cor de fundo, defini-la como preta. Incrível. E agora vamos começar montando a cena. No meu caso, decidi criar algum tipo de tela de iPhone que projeta uma grande luz. Então, para começar, primeiro precisamos criar uma tela de celular. Vamos decidir se usaremos as dimensões do iPhone 17 Pmax. Para isso, vamos clicar duas vezes na ferramenta retângulo para criar uma nova camada de forma Para a cor de preenchimento, defina-a como branca e, para o traçado, desative-a. Agora, para obter as dimensões corretas de um iPhone, eu uso o Cloud. De volta ao projeto e, primeiro, vamos clicar no ícone da cadeia para desvincular as proporções de tamanho Em seguida, vamos definir a largura para 13 20 e, em seguida, a altura para 28 68. Agora temos as proporções corretas. Mas, como você pode ver, a forma é muito grande para reduzi-la adequadamente e salvar as proporções. Agora vamos vincular as dimensões e dividir uma das propriedades por duas. Dessa forma, obtemos uma forma menor com as proporções corretas. Agora, para reduzir um pouco mais, podemos usar a propriedade de escala dessa camada. Você também pode continuar alterando as dimensões do tamanho da forma. Isso realmente não importa. Eu adoro a opção de ampliar minha camada no futuro, caso eu precise usar a propriedade de escala. É um pouco mais simples. Tudo bem. E, finalmente, para dar aquela aparência de telefone moderno, vamos aumentar o arredondamento para, digamos, 90 e, em seguida, pressionar Enter e renomear a tela da camada dois Incrível. E agora vamos começar a trabalhar no efeito de brilho. Para obter melhores resultados, é melhor dar à nossa forma um pouco de cores diferentes. Em breve, você entenderá o porquê. Por enquanto, vamos pesquisar o efeito de gradiente de quatro cores nos Efeitos e Predefinições Vou pressionar Control ou Command Enter para usar o novo recurso de aplicação rápida. Ótimo. Depois que o efeito é aplicado, agora precisamos ter certeza de que os pontos do gradiente estão no lugar correto e estão seguindo nossa forma Como você pode ver, quando eu movo a forma, os pontos permanecem no lugar. Para corrigir isso, usaremos uma expressão simples nos pontos. Passe o mouse sobre 0,1, segure Alt ou Option no Mac e clique no cronômetro para abrir a caixa de expressão Em Digite dois e selecione as expressões. Em seguida, entre parênteses, digite value. Ok, agora vamos clicar fora da caixa de expressão para aplicá-la. Ótimo. E agora vamos repetir esse processo para o resto dos pontos. O que essa expressão faz? Cada camada tem seu próprio pequeno mundo de coordenadas, e a composição também tem o seu. As expressões tocomp perguntam Onde esse ponto na camada realmente aparece na tela Então, quando nossa forma se move, gira ou escala, o ponto do gradiente agora sabe que deve acompanhar em vez de ficar colado a um ponto na Em palavras simples, tocomp diz ao ponto de gradiente que siga a forma onde quer que ela apareça na tela, em vez de ficar bloqueado em Tudo bem, uma vez feito isso, vamos agora selecionar o efeito e diminuir o zoom para ver todos os pontos. Agora, vamos selecionar cada um deles e arrastá-los para o local correto. Agora, como você pode ver, não importa para onde movamos a forma, os pontos a seguirão e o gradiente sempre parecerá persistente Tudo bem. Vamos agora alinhar a forma ao centro e alterar as cores Desta vez, vou usar as cores azuis. É importante lembrar que, para obter o melhor brilho, é melhor usar cores brilhantes. Normalmente, defino a cor superior esquerda para uma brilhante e, em seguida, o canto superior direito para uma cor um pouco mais escura Na parte inferior, eu faço o inverso, escuro à esquerda e claro à direita. Ok, isso parece bom. E agora é o momento perfeito para salvar o projeto. Então, vamos pressionar Ctrl ou COMMANDS e agora entrar na pasta AE na pasta principal do curso que você baixou de mim e salvar este projeto Vamos chamá-lo de brilho perfeito. Tudo bem. E agora nossa próxima etapa na configuração do efeito de brilho é, na verdade, criar o brilho. Para fazer isso, usaremos um efeito simples chamado CC Radial Fast blur Então, encontre-o na guia Efeitos e aplique-o na camada. Como você pode ver, esse efeito também tem um ponto que decide a direção do desfoque No nosso caso, queremos que ele também siga nossa camada. Então, para fazer isso, vamos usar as expressões, mais uma vez na propriedade central desse efeito. Ótimo, vamos agora trazer o ponto para o centro da camada, e agora podemos aumentar a quantidade de desfoque, e isso nos dará esse efeito de brilho Vamos configurá-lo para 90 por enquanto. Em seguida, podemos alterar a propriedade Zoom para brilho. Isso fará com que o efeito forneça informações com base nas cores claras e escuras da camada. Isso fará com que o brilho pareça um pouco melhor. Tudo bem. Então, agora, uma vez feito isso, podemos melhorar o brilho que criamos adicionando um efeito de brilho simples à camada Como você pode ver, isso afeta a camada drasticamente, portanto, certifique-se de ajustar os valores de brilho Eu geralmente defino a intensidade para 0,5. Depois, brinco com o limite no raio para ver qual é a melhor combinação entre os dois que funcionará É importante mencionar que esses valores podem ser diferentes para nós porque você pode ter usado cores diferentes para o gradiente. Talvez você tenha escolhido cores mais claras ou mais escuras. É por isso que é importante testar diferentes variações do globo antes de decidir definir os valores exatamente como os meus. OK. Então, depois de terminar o efeito de brilho, agora você pode ajustar os pontos de gradiente para ver se consegue uma aparência um pouco melhor Estou apenas mostrando isso para que você saiba que há muita personalização que pode ser feita usando a configuração. Tudo bem Então, agora, quando estivermos bem com o brilho, precisamos criar o objeto do qual esse brilho ou luz está vindo. No nosso caso, precisamos primeiro duplicar a camada que temos aqui e excluir o efeito de brilho dela Portanto, permanecemos apenas com o gradiente. Nesse ponto, geralmente adoro mudar um pouco a aparência do gradiente em relação à camada de brilho E quando terminarmos, vamos agora definir o nome da camada superior para tela e para o brilho da tela da camada inferior. Ótimo. E agora, antes de prosseguirmos, vamos abrir as propriedades do caminho retangular da camada da tela e transformar as propriedades da camada de brilho Pare o tamanho, a posição e o arredondamento. Dessa forma, sempre que você quiser alterar sua forma principal, a camada de brilho será ajustada adequadamente. Ótimo. E agora vamos adicionar um toque final de design à configuração antes de começarmos a animar a cena, adicionando um bom efeito de varredura à configuração. Deixe-me mostrar o que quero dizer. Primeiro, vamos duplicar a camada principal e depois alterar o nome para traçado na tela Em seguida, exclua o efeito de gradiente e desative o preenchimento. Você pode passar o mouse sobre a cor de preenchimento e, mantendo pressionada a tecla Alt ou Option no Mac, clique na cor para alternar as opções de preenchimento até desativá-las Depois disso, ative o traço e defina a cor como branca. Para a largura do traçado, vamos defini-la como dez por enquanto. Agora vamos fazer com que pareça uma bela varredura ou viga, como você quiser chamá-la Para isso, precisamos primeiro adicionar o efeito de caminhos de corte a essa camada de forma Em seguida, precisamos encurtar o traçado ajustando a propriedade final Vamos configurá-lo para 15. Agora, vamos ajustar o deslocamento para colocar a viga no lado esquerdo da forma E agora, para melhorar a aparência, precisamos ajustar a propriedade de conicidade do traçado Vamos abrir o menu de traçado abaixo das propriedades da camada e, em seguida, abrir o menu de conicidade Agora, defina o comprimento inicial e final para 50%. Isso dará ao traçado uma aparência de bordas afiadas. Uma vez feito isso, vamos adicionar um efeito de brilho. Para o raio de brilho, descobri que a melhor parte é definir o raio de brilho para 20 e, em seguida, duplicar o efeito e definir o raio aqui para o efeito e definir o E agora, para suavizar o feixe, podemos adicionar um efeito de desfoque de caixa rápida e definir o raio de desfoque para Podemos configurá-lo para dois. E, finalmente, para que tudo se misture, descobri que alterar o modo de mesclagem da camada de traçado para adicionar fará com que o feixe pareça bem brilhante, que combina muito com nossa configuração brilhante Caso queira suavizar um pouco o feixe, você precisa brincar com o raio de desfoque da caixa rápida. No meu caso, vou deixar em dois. Quando terminarmos o traçado, agora podemos finalizar configurando o modo de mesclagem da camada principal como sobreposição, o que fará com que as cores de configuração pareçam mais Com isso, terminamos de configurar o efeito de brilho e, para resumir em breve, para conseguir esse efeito, a ideia principal é ter uma camada como camada de brilho e uma camada como objeto principal Repetiremos esse processo nas próximas lições sobre outros elementos. Mas, por enquanto, terminamos de configurar o design e estamos prontos para animá-lo E faremos isso na próxima lição. Vai ser incrível. Então nos vemos lá. 3. Animando a tela brilhante: Volte. Então, depois de terminarmos de configurar o design, agora estamos prontos para animar a cena A primeira coisa que precisamos fazer antes da animação é transferir o brilho da camada do traçado para a camada principal. Isso ocorre porque queremos controlar a animação somente de uma camada por motivos óbvios de conveniência. Agora, para obter esse belo ângulo de luz de três D, vamos converter todas as camadas em três camadas D. Certifique-se de usar o renderizador clássico de três D e não qualquer renderizador avançado de três D. Ótimo. E agora vamos criar uma nova câmera na cena. Usará a câmera de um nó. Caso você não saiba a diferença, a câmera de um nó é simples. Quando você o move para os lados, ele se move regularmente. Por outro lado, a câmera de dois nós tem um ponto de interesse, que é uma espécie de ponto de ancoragem para a câmera Portanto, onde quer que o ponto de interesse esteja posicionado, a câmera sempre olhará nessa direção, não importa como você a mova Tudo bem. Agora, para a lente focal, vamos usar uma lente de 35 MM. A diferença entre eles é que quanto menor o número da lente, mais ângulo extremo você obterá. As dimensões dos elementos em sua cena parecerão mais exageradas, ok Então, quando colocarmos a câmera na linha do tempo, vamos pressionar P e mover a câmera para trás Neste ponto, podemos usar a grade segura de ação. Vamos definir o eixo de posição Z da câmera para -3.500, para que todos estejamos na mesma página Ótimo. E agora vamos selecionar nossa camada principal e pressionar R para abrir a propriedade de rotação. Agora, vamos ajustar o eixo de rotação Y para que possamos obter esse ângulo agradável. Podemos configurá-lo para -45 OK. E agora vamos segurar a tecla Shift e pressionar P para adicionar a propriedade position. Vamos agora mover a tela para a esquerda em algum lugar por aqui. Tudo bem. E agora, para criar esse lindo brilho ou ilusão de luz, vamos selecionar a camada de brilho e ajustar o ponto central do efeito de desfoque radial Mova-o para a esquerda até obter aquela bela aparência clara que parece estar vindo da tela. Também parece algum tipo de porta de onde vem a luz. Tudo bem, agora vamos começar a animar a cena. Verifique se você está no início da linha do tempo e, em seguida, crie um primeiro quadro-chave para o eixo de exposição Podemos configurá-lo para 500 e criar um quadro-chave. Agora vamos passar para, digamos, o segundo quarto e mover a tela para a esquerda. Podemos configurá-lo para 200. Agora, vamos entrar na área do fluxo de trabalho aqui para ver melhor o que faremos mais tarde, quando precisarmos verificar o movimento. Mas, por enquanto, vamos selecionar a camada de brilho e animar o efeito de desfoque do rádio No início da animação, vamos aproximar o ponto da tela para obter uma luz maior. E então, no final da animação, vamos arrastá-la para a esquerda para que possamos obter uma luz menor. Como você pode ver, já começa a ficar bem legal. Para que pareça um pouco melhor, vamos também animar a quantidade de desfoque para tornar a luz mais perceptível até o final da Podemos animá-lo 90-95. Parece bom. E agora há outra coisa que podemos animar para que pareça um pouco mais interessante, e é o traço ou o feixe que criamos E podemos fazer isso animando o deslocamento dos caminhos de corte. Então, no início da animação, vamos começar o feixe pela parte inferior e, no final, vamos trazê-lo para a parte superior da tela. Como você pode ver, por causa dos modos de mesclagem, damos aquela aparência brilhante ao Ótimo. Agora, quando terminarmos a animação, podemos ajustar as cores da forma principal. Adoro fazer isso neste momento da animação, pois agora posso ver como será a cena final. E agora eu posso, com certeza, decidir as cores finais que quero que minha forma principal tenha. No meu caso, quero torná-lo um pouco mais claro. Parece ótimo, na minha opinião agora, mas acho que podemos mover a câmera um pouco para trás ainda mais Vamos definir o eixo Z para -3.800. Ótimo. Parece muito bom. E agora, para dar à cena uma sensação de três D, agora podemos animar a rotação da camada principal Vamos ao início da animação e abriremos novamente a propriedade de rotação. Agora, vamos definir o eixo Y para, digamos, -55 e depois passar para o final da animação e definir o eixo Y como, digamos, -35 Tudo bem. Então, tudo parece muito bom e, neste momento, adoro mais uma vez ter certeza de que minhas cores estão boas. Para isso, estou ajustando os gradientes da tela para cores um pouco mais brilhantes, especialmente no canto superior direito No seu caso, você não precisa fazer isso. É apenas uma preferência de cor. OK. Então, agora estou bem com a animação inicial. E antes de começar a melhorar o movimento, podemos tentar fazer com que a luz pareça um pouco mais natural animando sua opacidade Para isso, vamos selecionar a camada de brilho e pressionar T para abrir a opacidade Agora vamos criar uma nova expressão para isso. Desta vez, usaremos a expressão wiggle. Dentro dos parênteses, defina o primeiro número como dois. É a frequência, o que significa quantas vezes por segundo ela muda. Para o segundo número, defina-o como 50. É a quantidade, o que significa o quanto ela pode mudar. Assim, sua opacidade saltará aleatoriamente em torno de seu valor atual, digamos, 100%, até 50, cerca de duas vezes a cada segundo, você terá um efeito de cintilação saltando em torno de seu valor atual, digamos, 100%, em até 50, cerca de duas vezes a cada segundo, você terá um efeito de cintilação saltando entre aproximadamente 50% e 100%. Esse tipo de animação pode ser facilmente usado em um vídeo explicativo ou em um vídeo longo do YouTube e geralmente funciona perfeitamente com o texto ao lado Então, vamos terminar esta lição adicionando uma boa animação de texto aqui na cena. No meu caso, vou digitar uma luz bonita. Vamos agora reduzir o tamanho da fonte e escolher um estilo de fonte simples. No meu caso, eu vou com a Helvetica regularmente. Em seguida, verifique se o parágrafo está centralizado. Em seguida, centralize o ponto de ancoragem. Há muitas maneiras de fazer isso. E desta vez, quero te mostrar uma dica rápida que você talvez não conheça. Você pode passar o mouse sobre a ferramenta de ponto de ancoragem, segurar o Controller Command no Mac e clicar duas vezes nela Tudo bem. Então, agora vamos melhorar a aparência do texto adicionando um efeito de rampa de gradiente a Agora vamos ajustar os pontos e depois ajustar as cores do gradiente. Eu vou usar as mesmas cores azuis. Podemos reduzir um pouco esse ponto para obter mais cores brilhantes. Tudo bem. E agora vamos adicionar um efeito de brilho e ajustar os parâmetros Não quero que o brilho seja super perceptível. Eu quero criar um brilho suave. Tudo bem. Isso parece bom. E agora podemos começar a animar a camada de texto. Primeiro, vamos alinhá-lo ao centro horizontalmente. Agora, como não usamos a expressão tocomp nos pontos do gradiente, precisaremos ajustar um pouco o gradiente do texto Nesse caso, vamos pular a expressão e apenas animar o texto Como não vou movê-lo para cima ou para baixo, vou movê-lo da esquerda para a direita, e isso não mudará a aparência do gradiente Tudo bem, então, quando terminarmos de animar o texto, agora podemos fazer com que ele se misture com a cena combinando a opacidade do texto com a opacidade da camada de brilho E como a opacidade da camada de brilho tem a animação cintilante que criamos usando as expressões de oscilação, a opacidade do texto também estará E isso fará com que a cena pareça mais conectada. Ótimo. Então, agora podemos salvar o projeto e seguir para as etapas finais. A primeira é criar um plano de fundo para a cena para isso. Vamos criar um novo sólido. Podemos chamá-lo de BG. Agora vamos usar mais uma vez o efeito de gradiente e adicioná-lo ao sólido Mas desta vez, vamos usar a rampa radial e inverter as cores. Agora vamos mover a cor do ponto brilhante para o lado direito e depois a cor do ponto escuro para o lado esquerdo. Agora, para a cor mais escura, vamos escolher uma cor azul bem escura E então, para a cor mais clara, escolha uma bela cor azul Não é muito brilhante. Incrível. Então, agora que terminamos o design da cena e também terminamos a animação inicial, agora podemos abrir todos os quadros-chave e melhorar o movimento Certifique-se de que nenhuma camada esteja selecionada e clique para ver todos os quadros-chave em todas as camadas Agora, vamos facilitar todos eles e depois acessar o editor gráfico. Aqui, verifique se você está usando o gráfico de velocidade e, em seguida, selecione todos os quadros-chave no lado direito e arraste as alças para a esquerda Dessa forma, como você já deve saber, o movimento será rápido nos primeiros segundos e depois diminuirá no final da animação, fazendo com que a cena pareça agradável e elegante. Neste momento, adoro conferir a animação e ver se preciso ajustar alguma coisa, talvez mudar algumas cores, talvez ajustar alguns quadros-chave. Nesse caso, estou bem com o que criamos, mas quero mostrar como você pode melhorar um pouco mais a aparência da cena para dar a ela uma aparência bonita, cinematográfica e polida, além de fazer algumas correções de cores Estou mostrando isso em quase todos os cursos porque quero que você se acostume a fazer isso e não renderizar a cena como ela está, especialmente quando você está lidando com cenas de cores escuras com brilhos, brilhos Tudo bem, deixe-me mostrar o que quero dizer. Primeiro, vamos criar uma nova camada de ajuste acima todas as camadas e alterar o nome para filtro de cores. Agora, vamos adicionar o primeiro efeito. Começaremos adicionando o efeito HLS de ruído. Defina o matiz, a luminosidade e a saturação para 1%. Em seguida, vamos adicionar o efeito de curvas e ajustar o gráfico. Podemos pegar o gráfico daqui e puxá-lo para baixo para escurecer as áreas escuras E então, a partir daqui, puxe-o para iluminar as áreas claras Isso fará com que a cena pareça nítida e cinematográfica. Por fim, podemos adicionar o efeito de matiz e saturação. Esse efeito ajudará você a ajustar o tom da cor da sua cena. Ao ajustar a tonalidade principal, você pode decidir alterar toda a aparência da cena Nas lições a seguir, esse efeito será mais útil do que nesse caso. Então, mais tarde, você entenderá o que quero dizer. Por enquanto, vou trazê-lo de volta ao zero. Vamos agora assistir à animação algumas vezes para ver se está tudo bem. Eu acho que parece ótimo. E antes de terminar, quero mencionar e mostrar o que você precisa fazer caso ache que a cintilação é um pouco Primeiro, deixe-me ajustar o efeito das curvas bem rápido, porque acho que as áreas mais claras são muito Não queremos que a cena seja muito queimada com cores brilhantes Ok, agora, para a cintilação, primeiro, vamos selecionar a camada de brilho E agora precisamos ver a caixa de expressão que temos para a opacidade Para isso, precisamos pressionar a tecla E duas vezes. Isso mostrará todas as expressões que temos nessa camada. Agora, vamos rolar para baixo até ver a expressão de oscilação de opacidade e clicar nela Agora altere o segundo número, que representa a quantidade de opacidade, para um número menor Vamos tentar o 30. Agora, a camada não alcançará 50% de opacidade Chegará a 35% no topo, o que tornará a animação cintilante mais suave Incrível. Tudo parece ótimo. E com isso, terminamos esta lição. Agora podemos salvar o projeto e passar para o próximo , no qual aprenderemos outro exemplo em que você pode usar essa configuração bacana de brilho, mas desta vez em uma cena muito mais complexa. Vai ser incrível. Então nos vemos lá. 4. Configurar a tela brilhante da UI: Volte. Nesta lição, vamos criar esse lindo efeito de brilho que vem da tela do iPhone, fazendo com que o design da interface se destaque e pareça premium. Ele pode ser facilmente usado em explicadores do SAS ou em qualquer outro projeto quando você quiser apresentar o design da interface de usuário de uma forma glamorosa. Tudo bem. Então, para começar, vamos pressionar Catrol ou Command N para criar uma nova composição Vamos chamá-la de lição dois. Deixe o resto das configurações como estão e clique em OK. E agora vamos começar projetando a tela do nosso iPhone e preparando a configuração. Primeiro, para economizar tempo, em vez de criar o iPhone do zero, vamos usar a forma que criamos na lição anterior. Vamos até a composição da Lição 1 e copiemos a camada da tela daqui De volta ao nosso projeto. Vamos colar aqui e pressionar você para ver todos os quadros-chave para excluí-los. Também vamos convertê-la de volta uma camada de dois D e depois alinhá-la ao centro da composição Ótimo. E agora, depois de reiniciarmos a tela do iPhone, vamos adicionar o design da interface do usuário que você pode ter obtido do cliente ou criar você mesmo. No nosso caso, abra a pasta de ativos que você recebeu de mim e arraste o arquivo do Illustrator chamado PayApp para o nosso projeto Vamos importá-lo como uma composição, pois temos as camadas separadas e, para as dimensões da gravação, escolheremos o tamanho da camada Como queremos que os limites das camadas se ajustem às dimensões de design que as camadas têm, será muito mais fácil animar as camadas dessa forma Tudo bem. E agora precisamos adicionar o design à nossa tela na cena. Mas, em vez de colocar todas as camadas que temos aqui na cena principal, deixe-me mostrar a melhor abordagem para configurar cenas com elementos de design de interface envolvidos Primeiro, vamos voltar à nossa cena principal e agora pré-compor a camada de tela que temos Podemos excluir o número um e clicar em OK. Agora, vamos entrar na nova pré-composição e pressionar Ctrl ou Command K para abrir as configurações da É melhor ajustar as dimensões dessa composição para caber na tela do iPhone Se você estiver usando a versão mais recente do After Effects, você pode selecionar a camada, depois ir para a composição e clicar em Crop Comp to select Layer Bounds Isso cortará automaticamente a composição no tamanho da tela. OK. Feito isso, vamos agora acessar a composição do aplicativo e copiar todas as camadas, começando da primeira até a última É importante porque a maneira como você inicia sua seleção afetará a forma como as camadas serão coladas Por exemplo, se eu começar a selecionar da última para a primeira, quando eu colar as camadas, a última estará no topo. A ordem das camadas será oposta. Mas se eu começar a selecionar do primeiro ao último, depois de colá-los, o pedido permanecerá correto. Tudo bem. Então, agora vamos voltar para a pré-composição da tela e colar as camadas Agora, para alinhá-las completamente ao centro, vamos selecionar todas as camadas dos elementos da interface do usuário e colocá-las na camada de fundo Agora podemos selecionar a camada de fundo e alinhá-la ao centro da composição, e o restante das camadas seguirá Isso também nos permitirá dimensionar as camadas uma só vez para caber nas dimensões da tela. Vamos definir a escala para 90. Incrível. Agora podemos desativar a camada de fundo e criar cores muito mais interessantes para o plano de fundo. No meu caso, quero usar a cor azul escura do design original do plano de fundo, então vou ativá-la e experimentar essa cor apenas para ter um bom ponto de partida para o gradiente Ok, agora vamos desligar essa camada e continuar ajustando o gradiente Neste momento, estou apenas tentando criar um belo gradiente de azul escuro para o design O mais importante aqui é garantir que todo o texto no design esteja visível e legível Portanto, certifique-se de não escolher duas cores azuis brilhantes. Ótimo. E agora também não vamos esquecer de ajustar os pontos do gradiente para obter resultados um pouco melhores para o gradiente Tudo bem. Isso parece bom. E agora, antes de prosseguir, vamos selecionar todas as camadas do Illustrator e garantir que ativemos as transformações de colapso ou a chave rasterizada continuamente Isso faz com que o After Effects veja os dados originais de uma camada ou de uma pré-composição. No nosso caso, o Illustrator é um software baseado em vetores que não usa pixels e torna as camadas no Illustrator B nítidas, independentemente da escala, ao contrair as After Effects After Effects agora vê essas informações baseadas em vetores, o que torna as camadas B da mais alta qualidade, independentemente da escala aqui, também no After Effects. Isso manterá essas camadas na mais alta qualidade , caso escalemos essa pré-composição na composição principal E para que isso aconteça, também precisamos reduzir a pré-composição aqui na cena principal Incrível. Então, agora que terminarmos de preparar o design, vamos passar para a próxima etapa na configuração de nossa tela brilhante, e ela começará a trabalhar no efeito de brilho Como expliquei na lição anterior, para alcançar esse efeito, precisamos de duas camadas. Um dos desenhos originais e o segundo é para aplicar o efeito de brilho. No nosso caso, a pré-composição que temos agora é o design original da camada, e agora precisamos ter exatamente a mesma para que possamos aplicar os efeitos nela para criar o brilho Portanto, a próxima etapa que precisamos fazer é duplicar essa camada Vamos mudar o nome da camada inferior para brilho da composição da tela. E agora, como fizemos na lição anterior, vamos adicionar o efeito de desfoque rápido radial para criar o Ótimo. Agora vamos primeiro ajustar o valor. Podemos configurá-lo para 95 por enquanto. Em seguida, vamos garantir que a propriedade central siga a posição da pré-composição adicionando a expressão to Comp, como fizemos na lição Agora, antes de prosseguir, certifique-se de selecionar o efeito e posicionar o centro do efeito no centro da pré-composição Como você pode ver, esse efeito fica muito bom nas partes mais brilhantes do design Parece algum tipo de efeito de brilho premium combinado com um brilho agradável OK. E agora, antes de prosseguirmos, quero apenas mencionar por que não colocamos a propriedade Zoom brilho, como na lição anterior. Como você pode ver, essa opção não se encaixa em todos os designs. Depende das cores e dos tipos de camada que você tem na pré-composição. Tudo bem. Com isso mencionado, vou trazer tudo de volta ao normal e podemos continuar projetando nossa cena. Neste ponto, se você se lembra, na lição anterior, alteramos o modo de mesclagem da camada da tela principal, para que ela pudesse ser melhor misturada com o efeito de brilho abaixo Então, agora precisamos fazer o mesmo aqui. Mas, nesse caso, como temos o design da interface do usuário, não queremos misturá-los com o brilho, pois precisamos que eles sejam perceptíveis. Então, nesse caso, o que precisamos fazer é entrar na composição da tela e alterar o modo de mesclagem somente para a camada de fundo com o E como copiamos essa camada da lição anterior, o modo de mesclagem aqui já estava sobreposto Mas digamos que queremos testar outros modos de mesclagem. E não queremos sempre voltar à cena principal e ver como fica. Nessa situação, o que eu adoro fazer é bloquear minha composição principal e depois entrar na pré-composição da tela Agora posso arrastar o painel de pré-composição da tela para a direita do painel de visualização e criar para mim duas visualizações nas quais, no lado esquerdo, vejo a cena principal e, no lado direito, vejo a pré-composição atual E como a cena principal está bloqueada, a linha do tempo que vemos aqui é da pré-composição da tela Isso significa que agora podemos fazer ajustes aqui. E veremos como isso fica na cena principal sem entrar e sair o tempo todo. Tudo bem. Então, depois de algumas verificações, decidi usar o modo de mistura de luz suave Eu acho que parece ótimo. Incrível. E agora, com isso feito, vamos melhorar ainda mais o design adicionando uma boa camada de traçado. Deixe-me mostrar o que quero dizer. Vamos duplicar a camada da tela e alterar o nome para traçado na tela Agora, vamos desativar o efeito de gradiente nessa camada e, em seguida, desativar o preenchimento e ativar o traçado Para a cor do traçado, defina-a como branca e, para a largura, vamos defini-la como dez por enquanto. Como você pode ver na cena principal, parece muito bom. Quase fazendo o iPhone parecer em três D. Vamos tentar definir a largura 20 e ver como ficará. Sim, isso é melhor, na minha opinião. Feito isso, vamos continuar configurando nossa configuração antes de começar a animar a cena Neste ponto, vamos fechar a pré-composição prévia e depois desbloquear a visualização atual Isso pode nos levar de volta à pré-composição, então simplesmente ignore e volte para a cena principal Ótimo. E agora, como queremos criar uma boa animação em três D aqui, precisamos primeiro converter a pré-composição que temos aqui em três camadas D. Mas antes disso, não vamos esquecer de associar a pré-composição de brilho à pré-composição da tela principal para controlar a animação usando apenas Ótimo. E agora vamos converter as duas camadas em três camadas D e garantir que estamos usando o renderizador clássico regular de três D. Depois disso, vamos agora selecionar a composição da tela principal e pressionar R para encontrar um bom ângulo para o iPhone Mas, como você pode ver, a rotação não está afetando o iPhone em nada, e isso acontece porque as camadas dentro dessa pré-composição não são três camadas D. Como as pré-composições estão reduzidas, o After Effects vê os dados originais dentro da pré-composição, que significa que ele vê as camadas do ilustrador como estão, em dois estados D. Para corrigir isso, tudo o que precisamos fazer é entrar na pré-composição e garantir que todas as camadas aqui também sejam três camadas D. De volta à nossa cena principal. Agora, After Effects, veremos as três camadas D internas e poderemos animá-las em um espaço de três D aqui na cena principal Está bem? Então, quando tivermos tudo pronto, vamos terminar a configuração adicionando um efeito de brilho à pré-composição de brilho para obter esse controle extra de brilho Primeiro, vamos definir a intensidade para 0,5. Talvez eu o ajuste mais tarde. Por enquanto, vamos brincar com o limite e o raio para encontrar a melhor variação para o design que temos Se você usa cores diferentes ou design de interface de usuário diferente, esses parâmetros podem ser diferentes para você. Então, brinque com isso até encontrar algo adequado ao seu design. OK. Então, com isso, concluímos o design e a configuração e estamos prontos para começar a animar o iPhone junto com o brilho, e faremos isso na próxima lição Então nos vemos lá. Vai ser divertido. 5. Como animar a tela brilhante da interface de usuário: Oi, e bem vindo de volta. Então, agora estamos prontos para começar a animar a cena Para torná-lo um pouco mais interessante, quero que animemos os elementos da interface do usuário dentro da pré-composição Então, vamos inseri-lo e criar uma animação de introdução simples para as camadas aqui Quero que as camadas entrem na tela uma após a outra, começando com o título principal, seguido pelo resto dos elementos aqui. Para conseguir isso, primeiro sugiro que você reordene as camadas na pilha de camadas de acordo com a ideia de uma seguir a outra Dessa forma, será muito mais fácil criar o atraso entre as camadas. Deixe-me mostrar o que quero dizer. Como o título deve ser inserido primeiro, vamos garantir que essa camada seja a primeira na pilha Em seguida, quero que o ícone do sino entre em cena. Portanto, vamos garantir que seja o segundo na pilha. O próximo elemento será o cartão. Já está na posição correta na pilha. Então, vamos para o segundo título. Esse deve ser o número quatro na pilha de camadas. Depois disso, precisamos dessa camada para entrar na cena. Então, vamos encontrá-lo na pilha e trazê-lo para o número cinco na pilha de camadas Vamos fazer isso com o resto das camadas. De vez em quando, adoro selecionar as camadas e observar a pilha para ver se tudo está no lugar certo Tudo bem. Feito isso, vamos selecionar a camada de fundo que desativamos e excluí-la da pilha de camadas Não precisamos ver isso aqui. Ótimo. E agora vamos começar a animar. Vamos selecionar todas as camadas da interface do usuário e pressionar P. Vamos decidir se a animação durará 1 segundo. E como sabemos que as camadas devem estar na posição atual no final da animação, vamos para a segunda e criaremos um quadro-chave aqui Agora, vamos pressionar Shift T para adicionar a propriedade de opacidade sem fechar a posição Uma vez feito isso, vamos agora para o início da animação e derrubar as camadas. Neste ponto, vamos também definir a opacidade das camadas OK. Agora temos a animação inicial. Mas com isso, temos um pequeno problema. Veja a parte inferior da tela aqui. Podemos ver as camadas subindo da parte inferior, o que na cena principal pode parecer um pouco estranho Para corrigir esse problema, tudo o que precisamos fazer é usar a camada principal de formato de tela que temos dentro da pré-composição como uma máscara para todas as camadas da interface do usuário Para isso, usaremos a função Track Matt. Precisamos selecionar todas as camadas do Illustrator e arrastar o botão de seleção do tapete de trilha até a camada principal da forma da tela Isso fará com que a camada da forma da tela atue como uma camada Alfa para todas essas camadas, que tornará as camadas visíveis somente dentro dos limites da forma da tela. Só não se esqueça de ativar novamente a camada da tela quando terminar. Feito isso, agora corrigimos esse problema e tudo parece ótimo na cena principal. Agora podemos melhorar o movimento e pressionar F nove para aliviá-los. No Mac, você precisa pressionar a tecla Fn e a tecla F nove. Em seguida, vamos entrar no editor gráfico e ajustar o movimento para começar rápido e desacelerar até o final. Ótimo. E agora é o momento perfeito para criar o atraso entre todas as camadas. Por enquanto, vamos decidir que toda a animação terminará na terceira segunda. Então, vamos ficar aqui. E agora vamos primeiro selecionar a primeira camada na pilha. Como essa é a camada que queremos inserir primeiro, selecione a última. Agora, vamos passar o mouse sobre as camadas na linha do tempo e manter pressionado o controle e a tecla Alt ou o comando e a opção no Mac e, em seguida, arrastar as camadas para a direita Com isso, criamos um atraso perfeito. Vamos ver como isso parece. Eu acho que parece ótimo. Vamos deixar isso por enquanto e voltar à cena principal para começar a animar o iPhone Posteriormente, cronometraremos as duas animações juntas. Por enquanto, vamos nos concentrar em criar uma boa animação em três D aqui na cena principal. Para isso, primeiro, vamos criar uma nova câmera. Usaremos uma câmera de um nó com lente de 20 MM. Isso nos dará esse ângulo extremo. Em breve, você verá o que quero dizer. Agora vamos começar a trabalhar na configuração da câmera para obter esse ângulo agradável. Para começar, vamos chegar ao momento em que a animação dentro da pré-composição já está concluída Então, vamos começar a trabalhar com duas visualizações. Clique na visualização esquerda e certifique-se de configurá-la na visualização esquerda. E, em seguida, para a visualização correta, selecione-a e verifique se ela está configurada como câmera ativa. Então, podemos ver como isso fica na renderização final, certo. E agora vamos aproximar a câmera do iPhone. Podemos colocá-lo em algum lugar por aqui. Agora precisamos abrir a propriedade de rotação da câmera e usar o eixo de rotação para fazer a câmera. Podemos pressionar Shift P para adicionar a propriedade de posição e ajustar o eixo Z para abaixar um pouco a câmera. Em breve, usaremos o eixo de posição Y para animar a câmera voltando para trás, e isso criará esse movimento interessante da câmera Por enquanto, podemos definir o eixo de rotação X para -80. E então vamos abaixar a câmera um pouco mais e usar o eixo de rotação Y para mover a câmera para frente até que não vejamos o iPhone. Não se preocupe com o fato de não conseguir ver o efeito de brilho. Em breve, vamos lidar com isso. Por enquanto, basta levar a câmera para frente. Ótimo. Agora vamos criar o quadro-chave da primeira posição e colocá-lo no início da linha do tempo Agora, vamos decidir que toda essa animação levará 4 segundos, então vamos ficar no quarto segundo e usar o eixo da posição Y para trazer a câmera para trás Vamos colocá-lo em algum lugar por aqui pouco antes de vermos a parte inferior do iPhone. Agora vamos avançar 2 segundos e ajustar o eixo de posição Z para afastar a câmera do iPhone. Tudo bem, então, neste momento, também precisamos que a câmera olhe para o iPhone enquanto nos movemos para trás Para isso, precisamos criar um quadro-chave para a rotação. Além disso, nesse caso, vamos ficar na quarta posição e criar o primeiro quadro-chave para o eixo de rotação X. Agora, vá até o final da animação e defina-a como zero. Neste ponto, podemos ajustar a posição da câmera manualmente arrastando a câmera na vista esquerda Precisamos movê-lo para trás e para cima até vermos o iPhone colocado no centro da composição Então, enquanto você move a câmera, observe a visão correta com a câmera ativa. Vamos agora avançar mais 2 segundos e trazer a câmera um pouco mais para trás Ter esse movimento contínuo. Tudo bem? E agora, para trabalhar um pouco mais rápido, vamos mudar a qualidade da pré-visualização para a terceira e ver o que temos. No momento, a câmera se move de uma forma muito nítida, mas podemos consertá-la com muita facilidade. Para isso, pressione e segure a ferramenta Caneta e selecione a ferramenta Vértice Agora, clique uma vez nesse ponto para arredondar o caminho da posição da câmera. Em seguida, pressione V para voltar para a ferramenta de seleção e vamos ajustar as alças para obter um bom ponto arredondado. Também podemos mover o ponto inteiro manualmente para ajustar o caminho da posição da câmera. Tudo bem. Vejo que o caminho da posição está bom, mas a rotação começa tarde demais. Para corrigir isso, vamos trazer o primeiro quadro-chave de rotação para o início da linha do tempo E neste ponto, no segundo número quatro, vamos criar um quadro-chave com a rotação X de -30 graus. Vamos ver como isso parece agora. Ok, acho que parece melhor. Agora podemos seguir em frente. Agora podemos focar nessa área do caminho de posição da câmera e arredondá-la um pouco para obter um movimento um pouco mais suave Para isso, usaremos a ferramenta Vertex mais uma vez. Então, vamos clicar aqui uma vez e depois ajustar as alças usando a ferramenta de seleção. Tudo bem. Agora podemos assistir à animação e ver se o caminho precisa de ajustes adicionais. Neste ponto, estou vasculhando a linha do tempo enquanto foco na visão correta com a câmera ativa para ver como isso fica na Acho que podemos abaixar um pouco essa alça. Mas o problema quando eu faço isso é que a segunda alça também ajustada automaticamente, acordo com a alça esquerda. Para evitar isso, precisamos selecionar a alça direita e, ao clicar com o botão esquerdo, segurar a tecla Alt ou opção e continuar ajustando a alça Isso desvinculará as alças, permitindo ajustar a alça direita No meu caso, eu só quero que esse caminho de posição seja reto nessa área. Quero que a câmera se mova para trás em uma linha reta. Ok, ótimo. Então, agora vamos continuar assistindo à animação e ajustando o caminho, se necessário, até obtermos algo de que gostemos É muito importante observar que é importante verificar novamente toda a animação depois de ajustar o caminho Estou constantemente vasculhando a linha do tempo e observando a ativa da câmera para ver como fica Acho que podemos abaixar um pouco essa alça. Acho que a câmera começa a girar muito cedo, então vou colocar o primeiro quadro-chave de rotação nos dois segundos e ver como ficará Nesse caso, preciso levar a câmera para frente para não ver o iPhone no início da animação. Tudo bem. Agora, quando estivermos satisfeitos com a animação inicial da câmera, podemos voltar a trabalhar com uma visualização e animar o efeito de brilho Vamos ficar no quarto segundo, onde podemos ver o iPhone e trazer o efeito de desfoque para a parte inferior ajustando a propriedade central Não se esqueça de criar um quadro-chave neste momento. Podemos pressionar para ver o quadro-chave que acabamos criar na pré-composição na linha do tempo Agora vamos retroceder na linha do tempo e ajustar o desfoque neste momento para que possamos vê-lo O efeito radio fast ler não funciona corretamente porque não é um efeito de três D que se encaixa em três camadas D em três espaços D. Portanto, o efeito se comporta um pouco estranho, mas isso não é um problema pois depois de ajustar a propriedade central, podemos encontrar os valores corretos para que ela seja vista em toda a animação Vamos agora passar quase para o início da animação até o ponto em que ainda podemos ver a parte superior do iPhone e ajustar a propriedade central nesse momento para que possamos ver o efeito de brilho. Em seguida, vamos colocar esse quadro-chave no início da animação Caso você ainda não consiga ver o efeito de brilho, basta mover alguns quadros para frente e ajustar a propriedade central novamente até vê-la. Em seguida, podemos excluir o primeiro quadro-chave e colocar o novo em vez dele Tudo bem. Agora vemos o efeito de brilho no início da animação, e agora vamos passar para a segunda sexta e aumentar um pouco a propriedade central para que o efeito de brilho continue se movendo por toda a animação. Podemos colocar esse quadro-chave no final da animação. Tudo bem. Vamos agora ficar no segundo número nove e pressionar para encurtar a área do fluxo até esse momento e tornar o After Effects um pouco mais fácil de visualizar a cena Esse também é um ótimo momento para salvar o projeto, para proteger tudo o que temos até agora. OK. Depois de terminar a animação inicial da câmera e o efeito de brilho, agora podemos começar a trabalhar para melhorar o movimento. Vamos começar com a câmera primeiro. Vamos começar selecionando todos os quadros-chave da câmera e facilitando todos eles. Neste ponto, podemos definir a qualidade da pré-visualização em um quarto para fazer com que o After visualize a cena um pouco mais rápido Agora, vamos selecionar os quadros-chave de brilho e também facilitá-los Agora, como facilitamos os quadros-chave do efeito, o tempo da câmera e o efeito são um pouco diferentes agora Portanto, não vemos o efeito de brilho no início da animação. Para corrigir isso, tudo o que precisamos fazer é ficar novamente em algum lugar no início da animação e ajustar a propriedade do centro do efeito de desfoque Nesse caso, vamos ficar em segundo lugar e criar um quadro-chave adicional para o desfoque neste momento até vermos o efeito de brilho, E agora vamos assistir à animação que criamos algumas vezes para ver quais ajustes precisam ser feitos no movimento. Depois de verificar a animação, acho que é melhor fazer a câmera se mover mais rápido no início da animação, para tornar a introdução do iPhone um pouco mais interessante Para isso, vamos selecionar a posição da câmera, os quadros-chave e, usando o editor de gráfico de velocidade, tornar a introdução Então, vamos selecionar o segundo quadro-chave e arrastar a alça para a esquerda Vamos ver como isso parece. Tudo bem, a introdução parece ótima, mas há uma pausa estranha depois dela Então, vamos lidar com isso agora. Isso aconteceu porque, nesse momento, a velocidade da câmera está em zero pixels por segundo. Deixe-me explicar isso rapidamente com um exemplo simples. Seja mais preciso, na verdade não é um quadro-chave do qual estamos falando Esse quadro-chave representa o movimento de saída do primeiro quadro-chave e o movimento de entrada do terceiro quadro-chave movimento de entrada do terceiro Agora, aqui no editor de gráfico de velocidade, podemos ver a velocidade do quadro-chave ao longo do tempo No nosso caso, podemos ver que o movimento de saída do primeiro quadro-chave e o movimento de entrada do terceiro quadro-chave estão definidos como zero, o que cria essa parada Tudo o que precisamos fazer nesse caso é subir esses dois movimentos para ficar acima de zero pixels por segundo Mas em vez de movê-los um por um, tentando colocá-los na mesma velocidade, existe uma maneira de movê-los juntos, colocando-os em movimento contínuo. Deixe-me mostrar o que quero dizer. Para fazer isso, precisamos selecionar esse quadro-chave e clicar duas vezes nele para abrir o painel de velocidade do quadro-chave Aqui podemos marcar a caixa contínua, que bloqueará o movimento de saída no movimento de entrada que expliquei anteriormente Isso nos permitirá pegar uma das alças e levantá-la, e os dois movimentos estarão no mesmo nível de velocidade Como você pode ver, no nosso caso, a velocidade agora é de 91,81 pixels por segundo Isso significa que, neste momento, o movimento da câmera não parará e continuará se movendo até o próximo quadro-chave. Parece muito melhor. Agora, vamos fazer o mesmo com o próximo momento de pausa que temos aqui Nota rápida: se você não quiser que as alças se movam rapidamente, você pode desmarcar o ícone do ímã e isso permitirá que você mova as alças com Vamos ajustar um pouco mais as alças para criar um movimento agradável e estável e, em seguida, vamos verificar a animação para ver como fica Acho que a animação da posição da câmera parece boa. Mas, na minha opinião, temos um movimento de rotação um pouco extremo aqui que podemos ajustar um pouco mais. O final da animação parece bom, mas acho que há algo no começo que não parece muito bom. Então, vamos tentar ver o que é isso. E a melhor maneira de fazer isso é testar opções diferentes. Por exemplo, vamos tentar excluir o quadro-chave de rotação intermediária e ver como isso ficará. Acho que a câmera começa a girar um pouco tarde demais. Então, vamos tentar ver como a animação ficará se colocarmos o primeiro quadro-chave de rotação no início da animação. Tudo bem. Acho que está começando a ficar um pouco melhor, mas a câmera fica muito baixa no final da animação. Para corrigir isso, vamos usar as duas visualizações novamente. E usando a visão esquerda, vamos ajustar a alça do caminho de posição que temos aqui para a câmera. Estou mostrando todas essas ações para explicar que você nunca pode saber 100% de certeza como seus quadros-chave e o movimento devem ser configurados A animação é uma questão de tentativa e erro, e você não deve ter medo de testar quadros-chave diferentes e ajustar o movimento ao longo do caminho O importante é começar com alguma coisa. Comece com a animação inicial e, a partir daí, ajuste o movimento de acordo com o que parece certo para você e o que parece melhor. Tudo bem. Com isso dito, vamos dedicar alguns minutos para ajustar a animação de brilho que temos aqui. Para ser sincero, não acho que precisemos que os quadros-chave do Radio Fastler sejam fáceis, e é porque eu quero que a animação de brilho seja fluida, sem pausas durante a fluida, sem pausas durante Vamos selecionar todos eles. Segure o comando do controlador e clique em um dos quadros-chave para trazê-los de volta aos quadros-chave lineares regulares e ver como isso fica Tudo bem. Acho que parece melhor, mas, na minha opinião, no quarto segundo, podemos ajustar o quadro-chave de desfoque para que o brilho se ajuste melhor ângulo do iPhone arrastando a propriedade central um pouco mais para baixo neste momento Eu quero que o brilho seja inclinado um pouco mais para cima. Vamos agora para a segunda segunda e ajustar o quadro-chave de desfoque aqui também até que o brilho seja inclinado aqui Ótimo. E agora vamos passar para o quadro-chave no segundo e ajustar o desfoque nesse momento também Ok, agora mal podemos ver o brilho no início da animação. Então, vamos destacar um pouco mais a propriedade central no início da animação. E mais uma vez, estou mostrando esse processo para que você possa entender como a configuração funciona e quais ajustes você precisa fazer caso queira melhorar seu brilho de acordo com o movimento. Tudo bem. Agora, quando terminarmos de animar e ajustar o movimento, podemos começar a adicionar efeitos especiais, começando com a adição de uma profundidade de campo à Eu sugiro que você sempre adicione a profundidade de campo somente depois de terminar e ficar satisfeito com a animação primeiro e só então comece a aplicar esses efeitos pesados na cena. OK. Então, primeiro, vamos abrir as opções da câmera e ativar a profundidade de campo. Em seguida, vamos definir a abertura para 100 pixels. E agora começaremos a animar a distância do foco até o lado em que queremos que o foco esteja durante toda a animação Por enquanto, vamos ficar na segunda segunda e criar o primeiro quadro-chave Só para que possamos selecionar você para ver todos os quadros-chave que temos aqui Dessa forma, podemos cronometrar a animação da posição da câmera com a animação da distância do foco que criaremos agora. Tudo bem. Então, neste ponto, vamos tentar mudar a distância do foco até vermos algumas áreas focadas neste ponto da animação. Nesses tipos de situações, quando temos ângulos de câmera exclusivos e animações de perto, é melhor usar as duas visualizações e ver onde os elementos da cena estão colocados Essa linha branca representa a distância do foco. Então, como você pode ver, está muito longe do iPhone. Nosso objetivo é aproximar essa linha da pré-composição do iPhone para que possamos colocar o iPhone em foco Ótimo. Então, agora podemos voltar ao trabalho com uma visão e começar a decidir onde queremos que o foco esteja neste momento, exatamente Neste ponto, quero que o foco esteja no cartão na área superior do iPhone, então vou definir a distância do foco para 400. Tudo bem. Agora vamos voltar ao início da animação e tentar decidir a melhor posição para a distância do foco neste momento. Podemos configurá-lo para 200 e colocá-lo no início da animação e ver como ficará. Eu acho que parece ótimo. Agora vamos passar para a segunda quarta e decidir onde queremos que o foco esteja neste momento. Vamos fazer com que a área dos botões fique em foco, nesse caso. Podemos definir a distância do foco para 300. Agora vamos passar para o segundo sexto e garantir que a câmera esteja totalmente focada no iPhone. Para ver onde o iPhone está colocado em relação à distância do foco da câmera, podemos usar as duas visualizações novamente. Ótimo. Agora, vamos ajustar a distância do foco até vê-lo perfeitamente posicionado na posição do iPhone. Ótimo. Isso parece bom. Agora vamos passar para o último quadro-chave e ajustar a distância do foco neste momento Incrível. Então, agora vamos voltar ao One View e ver a animação do início ao fim para ver o que temos. Devido à profundidade de campo e ao efeito de brilho juntos, os tempos de renderização da visualização podem ser muito longos. Obviamente, isso depende da potência do seu computador. Mas, em qualquer caso, seja paciente e espere a pré-visualização terminar para conferir a animação antes de prosseguir. Tudo bem. Então, primeiro, na minha opinião, a profundidade de campo é muito exagerada Para corrigir isso, vamos pressionar a tecla A duas vezes para acessar as opções da câmera. E aqui, abaixe a abertura. Podemos configurá-lo para 50, já que a câmera está muito próxima do iPhone, muito desfoque faz com que a cena pareça estranha, na minha opinião Mas com a abertura de 50, o desfoque parece mais natural. Tudo bem. E agora também percebo que não vemos a animação que criamos dentro da composição de tela para as camadas de design da interface do usuário E provavelmente é porque a animação interna está acontecendo antes que a câmera veja o iPhone inteiro. Vamos tentar consertá-lo. Primeiro, vamos entrar na composição da tela e selecionar todas as camadas do Illustrator para as quais criamos a animação Vou escalar o painel da linha do tempo para que eu possa ver todas as camadas Tudo bem. Então, quando todos estiverem selecionados, vamos, no quadro 15, movê-los todos para começar a partir desse momento para ver se ficará melhor na cena principal. Nosso objetivo é sincronizar a animação que acontece dentro da tela com a animação da câmera na cena principal Estou tentando criar uma situação em que, durante a animação da câmera, ainda possamos ver os elementos da interface do usuário aparecendo um após o outro. Por enquanto, ainda não consigo ver isso acontecendo. Então, vou entrar na composição da tela mais uma vez e tentar iniciar toda a animação interna a partir da segunda Vamos ver como isso fica na cena principal. OK. Então, pelo que vejo agora, é tarde demais. Vou começar a animação dentro composição de tela a partir do quadro 25 Acho que será o momento perfeito. Se o seu computador estiver com dificuldades para visualizar a animação, sugiro que você primeiro reduza a qualidade da renderização da visualização para um quarto e, em seguida, abra a guia de visualização e faça com que o After Effects pule um quadro na renderização da visualização Isso acelerará significativamente o tempo de renderização da pré-visualização. Tudo bem. E agora vamos assistir à animação algumas vezes e ver se há mais alguma coisa que precisamos ajustar. Na minha opinião, tudo parece ótimo, mas notei que o efeito de brilho para de se mover antes do final da animação da câmera. Portanto, vamos abrir os primeiros quadros-chave desfocados e mover o último quadro-chave até o final da animação Ótimo. E agora vamos terminar esta lição adicionando a camada de fundo e o efeito de filtro de cores, como fizemos na lição anterior. Para economizar tempo, vamos entrar na primeira lição. E primeiro, vamos copiar a camada de fundo que temos aqui e depois voltar para nossa lição e colar a camada lá e garantir que ela esteja abaixo de todas as camadas. Ótimo. E agora, uma vez feito isso, vamos voltar para a composição da Lição 1 e copiar a camada de ajuste que temos lá De volta à nossa aula. Vamos colar aqui e garantir que esteja acima de todas as camadas. Agora podemos ajustar o filtro brincando com as curvas e vendo a aparência da cena nos diferentes momentos da animação Neste momento, estou apenas tentando criar uma aparência bonita e crocante . Também podemos tentar contornar a tonalidade principal do efeito de saturação de matiz para ver se podemos No meu caso, vou definir a tonalidade principal dez graus para obter cores azuis um pouco mais escuras Ao fazer correções de cores, é importante verificar a aparência da cena em toda a animação para ver se a correção de cores que você está usando nessa linha do tempo se ajusta a cada momento Ok, acho que agora podemos dar ao After Effects alguns minutos para renderizar e ver a animação em qualidade total antes de renderizarmos a peça final. Na minha opinião, tudo parece ótimo, mas acho que podemos aumentar um pouco mais o efeito de profundidade de campo configurando a abertura para um número maior para obter áreas de desfoque um pouco mais dominantes em toda a animação Acho que podemos configurá-lo para 80. Eu acho que isso parece ótimo. E com isso, terminamos esta lição e estamos prontos para passar para a próxima, onde aprenderemos como criar um efeito de brilho, mas desta vez em uma camada de texto, também aprenderemos alguns truques sobre como configurar adequadamente uma cena complexa em três D com sombras e luzes vivas trabalhando em conjunto com o efeito de brilho Vai ser muito interessante, então nos vemos na próxima. 6. Como configurar a cena de texto brilhante visu: E bem-vindo de volta. Nesta lição, criaremos o efeito de brilho, mas desta vez em uma camada de texto. Aprenderemos como criar a configuração certa para fazer o texto brilhar de uma forma realmente bonita, mas não só isso, também criaremos uma cena avançada em três D com luzes e sombras reais seguindo a direção da luz Eventualmente, nosso objetivo será criar ilusão de que nosso texto brilhante está iluminando a cena e afetando as sombras dos elementos na cena. Tudo bem Com isso dito, vamos agora criar uma nova composição pressionando Trill ou Command N. Vamos chamar essa composição de Lição 3 E deixe todas as configurações como nas aulas anteriores. Ótimo. E agora, como sempre, primeiro, precisamos começar a trabalhar na configuração de texto brilhante Para isso, vamos primeiro criar uma nova camada de texto e digitar um título como Brilho perfeito. Agora vamos usar a guia Propriedades do texto ou a guia de caracteres para ajustar o tamanho da fonte para, digamos, 100. Em seguida, altere o peso da fonte para negrito e certifique-se de centralizar o texto. Tudo bem E agora vamos centralizar o ponto de ancoragem passando o mouse sobre a ferramenta de ponto de ancoragem, segurando o comando do controlador no Mac e clicando duas vezes nele Ótimo. Agora vamos voltar à ferramenta de seleção e começar a trabalhar no design do texto, começando adicionando o efeito de rampa de gradiente Feito isso, vamos agora fazer com que os pontos do gradiente sigam nosso texto usando as expressões para o início e o fim das propriedades da rampa. Ok, agora vamos diminuir o zoom e ajustar os pontos novamente. Tudo bem E agora vamos trocar as cores e ajustá-las para obter um belo texto em gradiente azul Incrível. Feito isso, vamos agora criar o brilho adicionando o efeito de desfoque rápido radial. Vamos definir a quantidade para 90 e, desta vez, use o brilho no menu Zoom para obter um efeito mais brilhante Em seguida, vamos adicionar o efeito de brilho para deixar o brilho mais impressionante Neste ponto, sugiro que você brinque com as três primeiras propriedades do efeito de brilho para encontrar algo que se adapte ao seu design e às suas cores, porque você pode estar usando uma fonte diferente em um gradiente de cor diferente Ótimo. Então, agora que obtivemos nossa camada de brilho, como expliquei na primeira lição, para finalizar a configuração, agora precisamos ter a design principal da camada de brilho. No nosso caso, precisamos ter a camada de texto sem o efeito de brilho nela. Então, vamos agora duplicá-lo. Em seguida, precisamos excluir o efeito de desfoque e o efeito de brilho para eliminar o efeito de brilho nessa camada E agora, como você pode ver, a configuração não parece muito boa. Para melhorar a aparência, precisamos alterar ligeiramente as cores do gradiente da camada principal Também podemos fazer isso ajustando os pontos do gradiente. Isso já fará a diferença entre os gradientes das duas camadas de texto que temos aqui Ótimo. Agora podemos mudar um pouco as cores. Para a cor azul, vou usar um pouco mais de azul escuro e saturado para torná-las ainda mais diferentes. Também podemos brincar com o gradiente da camada de brilho Great E agora, para tornar a configuração ainda mais interessante, vamos adicionar um destaque bonito e elegante ao texto. Deixe-me mostrar o que quero dizer. Vamos clicar com o botão direito do mouse na camada de texto principal, ir para Estilos de camada e adicionar o efeito de sombra interna Agora, vamos abrir as propriedades do efeito innshadow e primeiro alterar a cor para branco, depois definir a opacidade Agora, para ver a sombra branca, precisamos alterar o modo de mesclagem do efeito para a tela Por isso, combina melhor com o nosso texto. Agora vamos ampliar o painel de visualização e começar a ajustar o resto das propriedades do efeito de sombra interna Primeiro, vamos adicionar um pouco de ruído, para que o destaque que estamos criando pareça mais natural e não muito nítido. Mas preste atenção para não aumentar muito o ruído , pois ele começará a parecer estranho No nosso caso, podemos definir o ruído para 5%. Depois disso, vamos reduzir o tamanho da sombra interna para torná-la um pouco mais elegante. Uma vez feito isso, agora podemos decidir a distância e ver o que se encaixa melhor no design. Não quero que o destaque seja grande, então diminuo a distância para, digamos, dois. Finalmente, vamos ajustar o ângulo do destaque. No meu caso, não quero que o destaque fique na parte inferior do texto. Eu quero que esteja no topo. Então, vou definir o ângulo em 90 graus. Incrível. Então, agora nossa configuração parece muito boa e estamos quase terminando. Antes de prosseguir, vamos salvar o projeto. Tudo bem E agora eu quero mencionar um pequeno problema com essa configuração. Digamos que, durante o projeto, você precise alterar o texto. Como você pode ver, se eu fizer isso agora e alterar a camada de texto principal, o efeito de brilho não será ajustado adequadamente. Existe uma solução fácil para isso. Deixe-me te mostrar como. Primeiro, vamos abrir as camadas de texto e o menu de texto para que possamos ver a propriedade do texto fonte em ambas as camadas. Agora, tudo o que você precisa fazer é unir o texto de origem da camada de brilho à camada de texto principal. Agora, sempre que você alterar seu texto principal, a camada de texto inferior será ajustada adequadamente. O nome da camada não será ajustado, mas isso realmente não importa. O que importa é que as configurações agora funcionem perfeitamente e tudo esteja sincronizado Tudo bem Então, vamos pressionar Control ou Command Z para desfazer a ação se você também alterar o texto para que possamos trazer tudo de volta ao normal E caso você desfaça muitas etapas, vamos usar o texto de origem novamente para garantir que os dois sejam sincronizados Incrível. Com isso feito, agora podemos voltar para a ferramenta de seleção. E antes de prosseguir, não esqueçamos de unir a camada de brilho à camada principal. Então, poderemos animar isso mais tarde usando apenas uma camada Ok. Agora, quando terminarmos nossa configuração, podemos salvar o projeto e passar para a próxima etapa, criando aquela bela cena em três D com luzes e sombras ao vivo. Tudo bem Então, para começar, vamos primeiro desligar nossas camadas de texto para que possamos nos concentrar na construção da cena. Agora, vamos ao painel Projeto e adicione o arquivo do Illustrator do pacote de silhuetas Você tem na pasta de ativos que você baixou para mim. Vamos arrastá-lo para o painel Projeto e importá-lo como composição com tamanho de camada. Esse arquivo do Illustrator inclui muitas silhuetas de pessoas que usaremos em breve para criar aquela bela cena cinematográfica em que vemos muitas pessoas na frente do título principal O que realmente torna essa cena especial é como as sombras reagem às luzes na cena e como temos a ilusão de que a luz vem do título Mas o que o torna mais interessante é que, mesmo sem ter um piso visível, ainda podemos ver as sombras perfeitamente alinhadas e criando a ilusão, como se tivéssemos um piso na cena É um visual interessante que faz com que a cena pareça grande algum tipo de sala enorme que não vemos onde começa ou termina. Então, vamos aprender como conseguir esse visual, começando com o design da cena do zero aqui no After Effects. Para começar, precisamos criar uma camada de piso. Para isso, vamos garantir que nenhuma camada esteja selecionada e selecionar a ferramenta retângulo Agora, clique duas vezes nele para criar uma forma com o tamanho da composição. Vamos garantir que nenhuma camada seja selecionada. Ok. E agora vamos ativar o preenchimento e escolher uma cor cinza simples. Em seguida, vamos desligar o traço. Vamos renomear essa camada para floor. Feito isso, vamos converter essa camada em uma camada de três D e, em seguida, abrir a propriedade de rotação e usar o eixo de rotação X para fazer com que pareça um piso. Para isso, defina-o para -90 graus. Em seguida, vamos abaixá-lo e colocá-lo em algum lugar por aqui na parte inferior da composição. Ótimo. Então, agora que temos nosso piso pronto, podemos começar a adicionar as silhuetas à cena E agora eu quero que você pressione bem para mudar para a ferramenta de ponto de ancoragem e trazer o ponto de ancoragem para a parte inferior da silhueta, em algum lugar ao redor da área dos tornozelos. Deixe-me explicar o porquê. Se o ponto de ancoragem permanecer no centro, ao diminuí-lo, precisaremos ajustar a posição para que a silhueta seja colocada no nível da camada do piso Mas quando o ponto de ancoragem estiver na área dos tornozelos, será muito mais fácil ajustar a escala da camada posteriormente, caso precisemos reduzi-la. Tudo bem E agora vamos converter essa camada em uma camada de três D e arrastá-la para baixo até que vejamos que ela se alinha com a camada do piso Não se preocupe se as pernas estiverem passando pelo chão, porque se elas não tocarem totalmente no chão , a sombra ficará muito estranha Então, no nosso caso, é melhor que eles toquem o chão e até entrem um pouco. Em seguida, vamos reduzir essa camada porque não precisamos que a silhueta seja tão Estamos tentando criar uma visão ampla e criar a ilusão como se estivéssemos em um espaço muito grande No nosso caso, podemos definir a escala para 50. E, finalmente, não vamos esquecer de reduzir essa camada para obtê-la com a mais alta qualidade possível. Incrível. E agora precisamos trazer o resto das silhuetas para a cena Mas, em vez de repetir o processo para cada silhueta e colocá-las manualmente no chão, podemos fazer algo Deixe-me mostrar o que quero dizer. Primeiro, vamos duplicar a camada de silhueta que temos aqui na linha do tempo e movê-la para Não. Enquanto essa camada estiver selecionada, mantenha pressionada a tecla Alt ou a tecla Option no Mac e arraste a próxima silhueta sobre ela para substituí-la. Vamos fazer isso mais uma vez. Mas desta vez, mova a nova camada para a direita e substitua-a pela próxima silhueta Vamos fazer isso mais duas vezes para o lado direito e para o lado esquerdo. Tudo bem São silhuetas suficientes na cena Agora podemos começar a trabalhar nas sombras. Para isso, primeiro, precisamos criar uma nova camada de luz pontual. Tudo bem E agora defina a cor para branco e a intensidade para 100%. E agora, para a queda, ajuste-a para suavizar. queda controla como intensidade da luz diminui com a distância da fonte de luz. E aqui está a diferença entre as três opções. Nenhuma. A luz permanece em intensidade total, não importa a distância entre a superfície e a luz. Irreal, mas previsível. Suave. A luz diminui gradualmente ao longo da distância O uso dos valores de raio e distância de queda definidos fornece controle manual sobre onde o desvanecimento começa e quão suave ele é Mais útil para design de movimento estilizado. quadrado inverso, fixo, com precisão física, cai, a intensidade diminui com o quadrado da distância, da mesma forma que a luz real Mais realista, mas mais difícil de prever. Tudo bem, de volta ao projeto, defina o resto das opções como eu fiz, e em breve vamos brincar com todas elas para entender cada uma delas muito melhor Por enquanto, vamos clicar em OK e seguir em frente. Tudo bem Então, como você pode ver, já estamos começando a ver como essa luz afeta a cena, mas ainda não conseguimos ver as sombras das silhuetas Vamos continuar trabalhando e ver por que isso acontece. Primeiro, vamos ativar a grade de ação e colocar a luz no centro da composição. Agora, vamos usar as duas vistas para ver onde a camada de luz está posicionada às silhuetas Para ver o que estamos fazendo melhor, vamos selecionar a visualização esquerda e alterá-la da esquerda para a vista superior. Agora podemos ver que a camada de luz é colocada atrás das camadas da silhueta, então vamos colocá-la na frente delas Para maior comodidade, vamos selecionar a visualização correta e ativar o modo de fundo transparente. Como você pode ver, ainda não vemos as sombras, e a principal razão para isso não é, na verdade a posição da camada de luz, mas algo relacionado à camada da silhueta Deixe-me mostrar o que quero dizer. Vamos abrir as opções de material da primeira camada de silhueta Aqui podemos ver claramente que a opção de projetar sombras está desativada. Isso significa que essa camada não projetará nenhuma sombra. Mas quando mudamos para ativado, podemos finalmente ver as sombras. Ótimo. Agora podemos mover a camada de luz e ver que ela está afetando os ângulos das sombras. Por enquanto, vamos colocá-lo no centro e voltar a trabalhar com uma visualização. Agora, precisamos ativar a opção de projetar sombras para todas as silhuetas, mas não Você não precisa fazer isso um por um. Você pode selecionar todas as camadas relevantes e ativar as sombras projetadas para uma delas, e todas as camadas selecionadas também receberão essa ação Incrível. Então, agora, como você pode ver, estamos começando a ter uma visão um pouco mais interessante da cena. Agora, podemos continuar trabalhando e adicionando mais silhuetas à cena E para tornar esse processo muito mais fácil, vamos criar uma nova câmera na cena. Trabalharemos com uma câmera de um nó com lente de 20 MM. Assim que tivermos a câmera, vamos movê-la para trás para que possamos ter mais espaço para adicionar as novas silhuetas Mas antes disso, podemos selecionar todas as camadas de silhuetas atuais e colocá-las no chão para que agora possamos mover o chão para baixo e todas as silhuetas Vamos colocá-lo aqui. Agora, vamos usar a propriedade de tamanho da camada de forma e escalar o piso para cima. Você pode adicionar o kamike no tipo dois para multiplicar os valores atuais Vamos multiplicar por mais uma vez para obter um piso ainda maior Precisaremos de todo esse espaço para espalhar o resto das silhuetas E faremos isso na próxima lição, além animar a cena quando terminarmos de projetá-la. Nos vemos na próxima. 7. Como animar a cena de texto brilhante: Estou de volta. Neste ponto, precisamos adicionar mais silhuetas e depois espalhá-las aleatoriamente pela Mas antes de fazermos isso, vamos fazer algo para ver melhor a cena. No momento, a cena está muito escura e mal consigo ver as silhuetas Corrija isso, podemos abrir as opções de material da camada do piso e desativar a opção de aceitar luzes. Dessa forma, o piso apresentará as sombras, mas não será afetado pela luz. Tudo bem. Então, com isso sendo feito, nossa próxima etapa será adicionar mais silhuetas e distribuí-las aleatoriamente pela E aqui vai uma dica rápida para distribuí-las aleatoriamente, mas ainda assim ter uma cena equilibrada Em vez de começar a colocá-las em locais aleatórios, primeiro criaremos três linhas retas de silhuetas e só então começaremos a ajustar a posição para criar a aparência Vamos começar a trabalhar e você entenderá o que quero dizer. Primeiro, vamos criar outra duplicata no lado esquerdo e direito e substituí-las por novas silhuetas Incrível. Feito isso, vamos agora selecionar todas as silhuetas e Em seguida, mova-os para cima na linha do tempo acima dos atuais. Também vamos marcá-los em cores diferentes para ter uma linha do tempo mais organizada Ótimo. E agora vamos movê-los todos para trás Agora vamos começar a substituir essas duplicatas por novas silhuetas E Tudo bem. Uma vez feito isso, vamos agora selecionar as silhuetas da primeira linha e duplicá-las Desta vez, vamos movê-los para baixo na pilha de camadas e marcá-los com cores diferentes Desta vez, vamos agora arrastá-los para frente na cena, colocando-os na frente da primeira linha. Em algum lugar por aqui. Ótimo. Agora vamos ampliar e isolar essas camadas para ver o que estamos fazendo melhor E agora vamos começar a substituí-los por novos. Incrível. Agora podemos voltar para a camada do piso e diminuir o zoom com a câmera para ver a cena inteira. Além disso, certifique-se de que a profundidade de campo esteja desligada por enquanto, para que possamos trabalhar sem problemas. Mais tarde, vamos ativá-lo. Por enquanto, vamos salvar o projeto antes de prosseguir. Neste ponto, podemos começar a randomizar a posição das silhuetas Podemos usar a visualização personalizada para isso, ou até mesmo a melhor opção, usar a vista superior. Vamos começar a lidar com a primeira linha. Tudo o que precisamos fazer é mover levemente as camadas para a esquerda ou direita e para cima ou para baixo para criar essa estrutura aleatória. Tente não colocar as camadas muito próximas umas das outras, mas também não muito longe. O objetivo é criar uma aparência aleatória, mas ainda assim ter uma cena equilibrada. Tudo bem. Então, agora terminamos a primeira etapa na randomização das camadas Agora podemos voltar à visão ativa da câmera e continuar ajustando a posição das silhuetas Por exemplo, podemos selecionar todas as silhuetas da terceira linha e movê-las Também podemos mover a linha média um pouco para trás Agora, vamos continuar ajustando a posição, para que cada silhueta tenha seu próprio Estou tentando não colidir entre silhuetas para obter R OK. Agora, com isso feito, podemos desbloquear a camada do piso e passar para a próxima etapa, adicionando o plano de fundo. Para economizar tempo, vamos copiar a camada de fundo que usamos na lição anterior. Vamos colá-lo em nossa composição e garantir que esteja abaixo de todas as camadas Agora, vamos selecionar o efeito de gradiente nessa camada sólida e ajustar o gradiente Vamos alternar entre os pontos. Quero que a área mais escura fique na parte inferior e a mais clara na parte superior. Vamos ver como isso parece. Acho que podemos trazer a cor brilhante para o centro. Será uma ideia melhor porque este é o lugar onde o título brilhante será colocado em breve E agora, para deixar o gradiente um pouco mais claro, vamos arrastar o ponto mais escuro para a esquerda Para finalizar, vamos ajustar as cores para obter um gradiente um pouco mais claro Para a cor brilhante, vamos escolher essa cor azul mais brilhante e, para a cor mais escura, vamos configurá-la para uma cor um pouco mais clara Ótimo. E agora vamos salvar o projeto antes de prosseguir. Neste ponto, vamos agora tornar o piso invisível, mas manter as sombras visíveis Vamos ver como fazer isso. Para isso, precisamos abrir as opções de material da camada do piso. E para sombras projetadas, podemos deixá-la desligada porque não queremos que o chão projete sombras em nada nessa cena Em seguida, quero falar sobre a opção de exceção das luzes. Podemos ligá-lo ou desligá-lo. Não há diferença para nós nessa propriedade. A coisa mais importante a fazer aqui é alterar a propriedade except shadows Precisamos configurá-lo para apenas. Isso fará com que a camada do piso apresente apenas as sombras sem mostrar a camada de forma que é o piso que temos na cena Ótimo. Então isso já começa a parecer mais interessante, mas como você pode ver, a cena está muito escura. Deixe-me mostrar uma solução fácil para isso. Primeiro, vamos garantir que nenhuma camada esteja selecionada e, em seguida, selecione a ferramenta Elipse. Agora, clique duas vezes na ferramenta Elipse para criar uma nova elipse e, em seguida, certifique-se de escolher Uma vez feito isso, adicione um efeito de desfoque de caixa rápida a essa elipse e defina o raio de desfoque para um número alto. Vamos tentar 150. Ótimo. Agora vamos mudar o nome dessa elipse para luz do chão e colocá-la acima da camada do piso E agora, tudo o que precisamos fazer é ajustar a posição da elipse e suas dimensões para criar a ilusão de que há uma fonte de luz apontando para Agora podemos reduzir essa camada um pouco mais. E para ver as sombras, devemos colocar essa camada abaixo da camada do piso Como você pode ver, essa solução simples fez com que a cena parecesse muito melhor. Eu queria te mostrar isso para que você entenda que às vezes uma solução simples supera uma complicada Neste exemplo, em vez de adicionar mais camadas de luz que diminuiriam os tempos de renderização, usamos um efeito simples e obtivemos ótimos resultados. Com isso dito, agora podemos passar para a próxima etapa. Mas antes disso, eu só quero mencionar que, se diminuirmos o zoom um pouco mais com a câmera, veremos que as sombras são cortadas, e é porque elas atingem o final da camada do piso No nosso caso, não quero aumentar mais a camada do piso porque quero que a câmera alcance esse ponto na animação final, não mais do que isso. Mas caso você queira ajustar suas sombras e fazer isso, tudo o que você precisa fazer é brincar com a posição da camada de luz que temos aqui na linha do tempo E para ver o que você está fazendo um pouco melhor, você pode usar a vista superior e continuar ajustando a posição da sua camada de luz Vamos colocá-lo aqui por enquanto. Acho que ficou ótimo porque eu queria alcançar uma aparência de sombras longas e dramáticas E é exatamente por isso que eu arrastei a camada de luz para longe das silhuetas Então, com isso feito, podemos usar essa oportunidade para ajustar as silhuetas uma Não quero que as sombras dessas camadas sejam centralizadas duas vezes, então vou mover algumas das silhuetas para os sejam centralizadas duas vezes, então vou mover algumas das silhuetas para os lados. Tudo bem. E agora, para manter a cena um pouco mais realista, acho que as silhuetas na linha média precisam ser um pouco menores Então, vamos selecioná-los todos e reduzi-los um pouco. Podemos definir a escala para 45. Tudo bem, acho que está tudo bem, mas se você quiser, pode ampliar e ajustar outras camadas, se quiser Por enquanto, podemos salvar o projeto e seguir em frente. Neste ponto, vamos tentar melhorar as sombras ajustando as configurações da camada de luz para Vamos clicar duas vezes na luz pontual temos aqui e ver o que acontecerá quando alterarmos as propriedades abaixo do menu suspenso. Vamos começar com o raio. Ao mudar isso, aumentaremos o raio da luz, e isso fará com que as sombras pareçam um pouco mais No nosso caso, podemos definir esse raio para 300. E agora vamos falar sobre a distância de queda. distância de queda é a distância na qual a luz diminui da intensidade total até zero, começando pela borda do raio Em palavras simples, isso faz com que a luz seja mais suave, que fará com que as sombras distantes pareçam mais No nosso caso, após algumas verificações, acho que 8.000 é a melhor opção para nós Em seguida, vem a escuridão sombria. Não há nada para explicar aqui. Isso só torna as sombras mais escuras ou mais brilhantes. É como a opacidade da sombra. Podemos configurá-lo para 90. Finalmente, vamos falar sobre a difusão das sombras. difusão da sombra controla o quão suaves ou desfocadas são as bordas da No nosso caso, podemos configurá-lo para 100. Ótimo. Então, agora que estamos bem com a aparência de nossas sombras, agora podemos brincar com a posição da luz para obter os resultados que estamos procurando No meu caso, como eu disse anteriormente, estou tentando criar sombras longas, então estou tentando mover a luz para cima ou para baixo e para trás e para frente no espaço de três D para ver qual é a melhor posição para atender aos meus objetivos Tudo bem? Então, quando estivermos bem com a posição da luz e os ângulos das sombras, vamos salvar o projeto e passar para a próxima etapa. Agora é a hora de ativarmos nossas camadas de texto brilhantes e misturá-las com a cena Para começar, vamos colocar as camadas de texto acima de todas as camadas. Agora ligue-os e converta-os em três camadas D. Nesse ponto, talvez você não veja o efeito de brilho criado para o texto, e o motivo disso está nas opções de material, as propriedades de luz e sombra estão ativadas. No nosso caso, não precisamos que esse texto seja afetado pela luz, nem projete sombras ou aceite sombras Então, vamos desativar todas essas três propriedades. Vamos fazer o mesmo com a camada de brilho também. Tudo bem. Então, uma vez feito isso, vamos agora lidar com a posição e a escala do texto no espaço de três D que temos aqui. Para ver o que estamos fazendo melhor, vamos trabalhar com duas visualizações e, usando a vista superior, podemos ver claramente onde o texto está posicionado No nosso caso, queremos que o texto seja colocado na frente das silhuetas, então vamos arrastá-lo usando o Ótimo. E agora vamos selecionar a camada de texto principal e ampliá-la. Podemos definir a escala para 200. OK. Agora podemos voltar a trabalhar com uma visualização para ver como fica. Acho que podemos escalá-lo para 300. Vamos tentar 400. Sim, isso é melhor. Feito isso, vamos agora levantar um pouco o texto, para que ele fique mais ou menos posicionado no centro da cena Ao mover o texto, notei que o efeito de brilho não acompanha a posição do texto. E isso está acontecendo porque não usamos a expressão na propriedade central do efeito pler rápido radial Então, vamos fazer isso bem rápido. Tudo bem. E agora vamos diminuir o zoom e ajustar a posição da propriedade central. Coloque-o em algum lugar no centro do texto. Por enquanto, não importa muito , porque vamos animá-lo em um minuto Por enquanto, vamos tornar o brilho um pouco mais perceptível aumentando a quantidade para 95 Ótimo. E agora, com isso sendo feito, estamos prontos para animá-lo Primeiro, vamos verificar se estamos no início da animação e agora criar um primeiro quadro-chave para a propriedade central Neste momento, vamos começar do lado esquerdo. Eu sugiro que você não o mova muito para a esquerda porque não estamos tentando criar um efeito de discoteca maluco. Estamos tentando obter um brilho agradável e elegante. OK. E agora vamos decidir que essa animação durará um segundo. Então, vamos ficar aqui e trazer a propriedade central para a direita. Vamos colocá-lo em algum lugar entre o S e o H. Ok, agora vamos voltar ao início da animação e arrastá-lo um pouco mais para a esquerda. Agora vamos definir a qualidade da pré-visualização para um quarto e ver o que temos. Tudo bem, acho que está tudo bem. Agora podemos salvar o projeto e continuar trabalhando. Mas eu sugiro que você defina a qualidade da pré-visualização para trabalhar mais rápido. Nesse ponto, podemos começar a trabalhar na ilusão de que nosso texto brilhante afeta as sombras das silhuetas E faremos isso animando a camada de luz que temos aqui Então, primeiro, vamos ter certeza de que estamos no início da animação e agora abrir a posição para a luz. Neste momento, vamos trazê-lo para a esquerda enquanto observamos a aparência das sombras Acho que as sombras ficam muito boas dessa maneira. Em seguida, vamos até o final da animação e arrastamos a luz para a direita. Vamos ver como isso parece. Ótimo. Acho que parece muito legal, e temos a ilusão funcionando perfeitamente. Tudo bem. Agora, quando terminarmos de criar a ilusão, podemos começar a trabalhar no movimento da câmera No nosso caso, eu só quero criar uma animação simples de redução de zoom. Então, primeiro, vamos ao início da linha do tempo e abriremos a posição para a câmera Vamos decidir onde queremos que a câmera seja posicionada neste momento No início da animação, quero me concentrar no título. Então, vamos aproximar a câmera dela. Agora vamos criar um quadro-chave com os valores atuais. Em seguida, vamos até o final da animação e movemos a câmera para trás Em algum lugar por aqui. Tudo bem, feito isso, vamos agora selecionar todos os quadros-chave e facilitá-los. Em seguida, no editor gráfico, para simplificar, basta arrastar todas as alças direitas do quadro-chave para a esquerda para iniciar o movimento rapidamente e desacelerar até o final Tudo bem, acho que a moção é muito boa, e podemos seguir para as etapas finais. Neste ponto, agora podemos adicionar o filtro de cores que criamos anteriormente no curso. Então, vamos para a segunda lição e copiemos a camada de ajuste que temos aqui. De volta à nossa lição, vamos colá-lo acima de todas as camadas e ajustar alguns parâmetros para que possamos fazer esse filtro se ajuste à nossa cena atual. Para começar, vou brincar com o efeito de saturação de matiz para ver se consigo obter resultados um pouco melhores Na minha opinião, nossa cena é muito azul por enquanto. Então, vamos definir a tonalidade principal para menos dez graus. Uma vez feito isso, vamos agora brincar com o efeito de curvas e suavizar a nitidez da cena Isso é melhor. Agora, eu sinto que a luz criamos para o piso é muito grande, então vamos selecionar essa camada e torná-la um pouco mais estreita Acho que fica muito melhor assim. Uma última coisa que eu quero ajustar são as sombras. Na minha opinião, as sombras parecem muito retas e não são naturais Para corrigir isso, vamos encontrar a camada de luz pontual que temos aqui e clicar duas vezes nela para abrir suas configurações. Agora, vamos ajustar a difusão da sombra para tornar o final da área de sombra mais suave Podemos configurá-lo para 150. Como você pode ver, a sombra agora parece muito mais natural. Tudo bem, então, feito isso, agora podemos terminar a aula adicionando uma sensação de profundidade agradável à cena para obter uma aparência cinematográfica extra Desta vez, aprenderemos como definir o foco para uma camada específica automaticamente. Deixe-me mostrar o que quero dizer. Primeiro, vamos abrir as duas visualizações e agora quero trazer a distância do foco profundidade de campo para a posição da camada de texto, porque quero que o texto fique em foco e o resto desfocado Então, primeiro, vamos selecionar a câmera e pressionar a tecla A duas vezes para abrir as opções da câmera. Agora vamos ativar a profundidade de campo. Em seguida, vamos ajustar a abertura e configurá-la para 100%. E agora, o que faríamos regularmente é trazer a distância do foco para a posição do texto e animar a distância do foco acordo com o movimento da câmera, que possamos sempre obter a distância do foco na área do texto Mas, em vez de fazer isso manualmente, quero mostrar uma dica rápida sobre como você pode fazer isso automaticamente. Então, vamos excluir o quadro-chave que criamos. E agora tudo o que você precisa fazer é selecionar a câmera e a camada na qual deseja que a câmera se concentre. No nosso caso, é a camada de texto. Assim, podemos selecionar o texto principal e, em seguida, você precisa clicar na câmera, abrir as opções da câmera e, aqui, selecionar a distância do foco do link à camada. Mas, como você pode ver, não está funcionando, e o After Effects nos diz o porquê. É porque estamos usando uma câmera de um nó. Para que funcione. Precisamos mudar a câmera para uma câmera de dois nós. Então, vamos clicar duas vezes na câmera. Altere o tipo para câmera de dois nós. Agora, vamos repetir o processo mais uma vez e ele deve funcionar perfeitamente. Então, agora a distância do foco será sincronizada com a posição do texto Mesmo que a câmera retroceda, a distância do foco ainda permanece na posição do texto Agora, como mudamos a câmera para uma câmera de dois nós, devemos verificar se isso não afetou o movimento da câmera. Para verificar isso rapidamente, vamos primeiro reduzir a qualidade da prévia para um quarto e agora verificar a animação. Tudo parece perfeitamente bem. Mas como agora estamos usando a câmera de dois nós, podemos tornar o movimento da câmera um pouco mais interessante. Vamos abrir os quadros-chave da câmera e ficar no primeiro quadro-chave e ficar no primeiro quadro-chave Agora vamos ajustar o eixo da posição Y para obter um ângulo de câmera um pouco mais interessante no início da animação. A câmera de dois nós tem o ponto de interesse, que faz com que a câmera olhe na direção em que o ponto de interesse está posicionado No nosso caso, ele está posicionado no centro. Então, quando ajustamos o eixo da posição Y, a câmera não se move apenas para baixo, mas meio que se move para baixo enquanto continua apontando para o título, o que torna o ângulo da câmera mais interessante. Agora você pode verificar novamente sua animação e ajustar o segundo quadro-chave da câmera para obter resultados talvez melhores No meu caso, quero que a câmera termine quando estiver posicionada na parte inferior do quadro, então vou ajustar o último quadro-chave E para o início da animação, quero que a câmera comece de um ângulo superior, então vou mover a câmera para cima neste momento. Vamos ver como isso parece. Acho que podemos aproximar um pouco a câmera no final. Nesse ponto, podemos assistir à animação e ajustar a posição das silhuetas para que todas estejam no quadro até o final da Estou mostrando esse processo para que você entenda que o design de movimento não é um fluxo de trabalho linear. Começamos projetando a cena, depois criando uma animação inicial e depois melhorando a animação e, depois disso, ajustando o design e a composição Tudo bem. Quando estou bem com o design da composição e da animação, sinto que precisamos ter um pouco mais de efeito de profundidade de campo na cena. Então, vamos abrir as opções da câmera e definir a abertura para 200 Acho que fica muito melhor dessa forma, mas observe que seus tempos de renderização serão significativamente maiores quando você usar uma abertura alta Então, agora eu basicamente terminei a animação, mas quero fazer um pequeno ajuste nas silhuetas na primeira linha Veja, essa camada está meio olhando para a esquerda e, na minha opinião, parece um pouco estranha, então vou encontrar essa silhueta na E vou girá-lo horizontalmente para que fique para a direita Vamos ver se há outras silhuetas que precisem desse ajuste . Tudo bem. Portanto, o layout das silhuetas parece ótimo, mas acho que a parte inferior da cena está chamando muita atenção. Meu objetivo é que o título chame toda a atenção. Isso está acontecendo porque a luz do piso que criamos é muito forte. Vamos encontrar essa camada na linha do tempo e mudar a cor para um azul mais escuro e ver como fica Como você pode ver, isso já começa a parecer muito mais interessante, e parece que se encaixa mais no efeito de brilho que temos no texto. Talvez também possamos abaixar um pouco essa camada e ver como ela ficará. Na minha opinião, parece muito melhor assim. Agora terminamos a animação e estamos prontos para verificá-la antes da renderização final. Para isso, vamos ficar na quarta posição e pressionar para reduzir a área do fluxo de trabalho Agora, dependendo da potência do seu computador, precisamos esperar até que a pré-visualização termine. E, às vezes, quando você cria cenas pesadas em três D com luzes, sombras e efeitos de brilho, After Effects pode mostrar alguns erros em toda a renderização da pré-visualização Ao enfrentar esses problemas, primeiro salve o projeto e depois edite e limpe toda a memória e o cache de disco Isso limpará os dados que o After Effects acumula durante o fluxo de trabalho nos bastidores e provavelmente resolverá renderização da pré-visualização. Tudo bem. Então, agora vamos ver a animação. Acho que parece muito bom, e há muitas situações em que você pode usar essa cena em seus vídeos explicativos, especialmente quando o roteiro fala sobre coisas sobre Ou grupo de pessoas. E com isso dito, terminamos esta lição. A próxima lição será nossa aula final e será muito curta. Lá, organizaremos nosso projeto e mostrarei uma maneira rápida de criar uma bela transição de raios que possa se adequar esses tipos de cenas com efeitos de luz e brilho. Então nos vemos lá. 8. Bônus: a transição de luz: Oi, e bem vindo de volta. Vamos primeiro começar a organizar nosso painel de projetos para ter um projeto limpo. É muito importante fazer isso, e eu quero que você se acostume com isso. É por isso que estou ensinando isso em cada um dos meus cursos. Primeiro, vamos criar uma nova pasta e chamá-la de assets. Agora vamos selecionar as pastas que criamos aqui com a importação dos arquivos do Illustrator e arrastá-las para a pasta de ativos Em seguida, vamos criar outra nova pasta e chamá-la de precomps Lá dentro, traremos todas as pré-composições que criamos durante o projeto, deixaremos as composições principais de fora, para que você possa acessá-las rapidamente mais tarde, se precisar Uma vez feito isso, adoro clicar aqui no tipo. Então, After Effects, reorganizaremos os arquivos que tenho aqui no painel Projeto, que fará com que o painel do projeto pareça ainda mais organizado Ótimo. E agora vamos salvar o projeto e seguir em frente. Nesta lição, quero ensinar como criar uma bela transição de luz que se encaixe em cenas com brilho, luzes ou efeitos de brilho em seu interior Você pode achar que já sabe como fazer isso, mas tenho certeza de que há um truque que você provavelmente não conhece, que fará com que essa transição pareça mais premium. Então, vamos começar a trabalhar nisso, e você entenderá muito em breve do que estou falando. Para começar, vamos primeiro criar uma nova composição principal na qual adicionaremos as três composições da lição para que adicionaremos as três composições da lição possamos criar transições Então, primeiro, vamos pressionar Ctrl ou Command N para criar uma nova composição Vamos chamá-lo de master e deixar todas as configurações como estão. Tudo bem. E agora vamos começar a adicionar as composições de aula internas. Mas antes de fazermos isso, vamos cortar as composições até o ponto em que a animação termine em cada composição, começando pela primeira lição Podemos cortar a área do fluxo de trabalho na quarta segunda. Passando para a próxima composição, podemos recortar a área do fluxo de trabalho aqui na segunda nona Agora, vamos passar para a lição três e recortar a área do fluxo de trabalho aqui na segunda quarta. Feito isso, vamos voltar para a composição principal e trazer todas as composições da aula para dentro. Agora, precisamos colocar cada lição após a outra em ordem cronológica Adoro ter a próxima composição acima da primeira, então vou trazer a lição dois até aqui e depois movê-la para a segunda quatro, onde a composição da primeira aula termina. Agora, para a competição da Lição três, vou colocá-la acima de todas as composições aqui e iniciá-la a partir da segunda 13 E agora podemos começar a trabalhar na transição. Primeiro, precisamos criar uma nova camada sólida branca. Então, vamos fazer isso bem rápido. Podemos deixar o nome como está, pois diz sólido branco, e é exatamente isso que precisamos que o nome do sólido seja. Agora vamos ampliar a linha do tempo e cortar a camada sólida no quadro 20 Depois de concluído, nossa próxima etapa é criar uma nova camada de ajuste. Precisamos colocá-lo acima do sólido branco e também recortá-lo no quadro 20. Finalmente, vamos alterar o nome dessa camada de ajuste para desfoque , porque mais tarde adicionaremos aqui o efeito de desfoque. Tudo bem. E agora podemos começar a trabalhar na transição. Primeiro, vamos nos certificar de que estamos no início da animação e agora criar uma animação para a opacidade do sólido branco No início, a opacidade será zero. Então, no quadro dez, a opacidade será 100 e, no quadro 20, a opacidade voltará a zero. Ótimo. E agora, uma vez feito isso, vamos selecionar a camada de ajuste e adicionar o efeito Fast Box Blur. Vamos desligar o sólido branco possamos ver o que estamos fazendo. Agora, vamos para o início da animação e definir o raio de desfoque para zero e criar um primeiro quadro-chave Em seguida, vamos para o quadro dez e definamos o raio de desfoque para um número alto Vamos tentar então talvez 20. Acho que 30 será melhor. Sim, isso parece ótimo. Tudo bem. E agora vamos até o final da animação e definir o raio de desfoque de volta para zero Ótimo. E agora, uma vez feito isso, vamos selecionar todos os quadros-chave para a camada de ajuste e o sólido branco e facilmente aliviá-los. Vamos agora voltar ao sólido branco e ver o que temos. Ótimo. Então, já estamos começando a conseguir alguma coisa e estamos prontos para seguir em frente. Vamos agora selecionar as duas camadas e pré-compô-las. Podemos nomear essa transição de desfoque pré-composto. Incrível. E agora vamos derrubar essa pré-composição Então, no After Effects, veremos exatamente o que está dentro dessa pré-composição e ela agirá como se as camadas estivessem aqui nesta composição principal E agora, para facilitar nossa vida no futuro, vamos ficar no quadro dez e criar um novo marcador aqui para que saibamos onde colocar essa pré-composição quando quisermos criar a transição entre as duas cenas Tudo bem. E agora, vamos usar essa pré-composição para ser a transição para as aulas um e dois Incrível. Então, agora vamos duplicar a pré-composição de transição e usá-la como uma transição para as cenas das aulas dois e três E agora, para o truque sobre o qual falei no início da aula, deixe-me mostrar o que quero dizer. Vamos inserir a transição antes da composição. E agora vamos selecionar o sólido branco e alterar seu modo de mesclagem para adicionar dessa forma Em vez de apenas ver o sólido branco aparecer, o sólido branco agora mistura com as cores das cenas abaixo dele E, como você pode ver, isso parece muito melhor do que simplesmente deixá-lo como um simples sólido branco. Incrível. E com isso, terminamos esta lição. Podemos finalizar a área do fluxo de trabalho no final da animação aqui e depois marcar as pré-composições da transição de desfoque em cores diferentes Para ter um cronograma mais organizado. E antes de assistir toda a animação que fizemos até agora, vamos ao painel Projeto e trazemos a da transição de desfoque para dentro da pasta PreComps E com isso feito, agora você pode conferir sua animação. E espero que você tenha aprendido que, para obter uma aparência premium para suas cenas, você pode usar técnicas e efeitos nativos do After sem se esforçar para lidar com plug-ins pagos. Incrível. E agora, para sua tarefa doméstica, quero que você altere as cores das cenas e crie animações diferentes Talvez você possa animar a câmera de forma diferente ou os elementos internos, ou talvez o efeito de brilho de forma diferente Meu objetivo com isso é que você experimente animações diferentes e descubra como ajustar o efeito de brilho em cada uma das cenas de acordo com as mudanças que você faz na animação Com isso dito, muito obrigado por assistir, e nos vemos na próxima.