Transcrições
1. Apresentação: Olá. Meu nome é Hongshu, e sou um designer de movimento
baseado em Toronto, Canadá. Estou animando no Adobe After Effects há
mais de seis anos. Atualmente, estou trabalhando em uma agência de publicidade
para clientes como Adidas, PayPal, Walmart e muitos mais. Estou animado por estar aqui hoje
para hospedar uma sessão ao vivo. Hoje, vamos
trabalhar em uma
animação muito simples e divertida juntos. Tem cerca de oito segundos. Vou ensinar como trabalhar
no Adobe
After Effects, o fluxo de trabalho entre
o Adobe Illustrator
e o After Effects, algumas dicas e truques e também alguns atalhos de
teclado. Essa aula foi gravada
ao vivo, então eu consegui interagir com os alunos enquanto trabalhava neste projeto. Sem mais delongas,
vamos pular direto para ele.
2. Como preparar seu arquivo no Illustrator: Meu nome é Tiffany. Eu trabalho na equipe da
comunidade do Skillshare. Sou o anfitrião sortudo da aula ao vivo de
hoje com o
melhor professor Hung Shu Quo. Estamos super animados por ter
Hung Shu conosco hoje. Ele vai
nos orientar por alguns gráficos em movimento fáceis e divertidos. Sem mais delongas,
vamos começar. Hung Shu, estamos super animados por
tê-lo aqui hoje. Você pode nos
contar um pouco sobre quem você é e o que você faz. Olá, todos. Bem-vindo.
Meu nome é Hung Shu. Sou um Motion Designer
baseado em Toronto, Canadá. Estou animando no Adobe After Effects há
mais de seis anos. Atualmente trabalhando em
uma agência de publicidade para clientes como adidas, PayPal. Muito animado por estar aqui hoje para mostrar como fazer gráficos em movimento
divertidos. Entrei para o Skillshare há alguns anos, quando
comecei como estudante, e realmente gosto da comunidade. Aprendi muitas coisas
no Skillshare também. Comecei a ensinar no
Skillshare no ano passado, e é realmente uma grande comunidade
criativa que as pessoas são muito
encorajadoras, por isso é ótimo. Adoraríamos ouvir um
pouco mais sobre o que você está planejando
compartilhar conosco hoje? Primeiro de tudo, vou mostrar
a você como preparar este arquivo do Illustrator antes que você possa trazê-lo para o
After Effects para animação. Se você tiver o arquivo pronto, vamos abri-lo no
Adobe Illustrator. Isso é o que eu tenho aqui. Como você pode ver aqui, eu tenho todas essas
camadas separadas. maioria dos casos, quando você tem uma ilustração como essa, você terá
alguns desses elementos separados quando estiver
fazendo isso, o que é ótimo. Mas o problema é que, quando trazemos esse arquivo para o After Effects, ele não será separado. Todas essas camadas serão combinadas em uma ilustração plana que você realmente não pode fazer
nada sobre isso. O que precisamos
fazer primeiro é ir para este canto direito aqui,
clicar nesta camada. Se você não tiver Camada, você pode ir no topo desta barra de
menus aqui, vá para Janela. Então, aqui em baixo, você pode
realmente ver o painel Camada. Clique nisso e, em seguida, temos o painel Camada aberto
no lado direito, e você pode ver que tudo
está em apenas uma única camada. Se você clicar nesta seta aqui, seta
suspensa, você pode ver todos esses elementos diferentes
dentro dessa camada. Há apenas uma
coisa simples que precisamos
fazer é
clicar nesta Camada 2
e, em seguida, ir para este menu suspenso do
lado direito, este botão aqui, clicar nele e depois ir para Liberar
para Camadas Sequência. Depois de clicar nisso, você pode ver todos esses elementos. Posso alternar o
ícone do olho na frente
da camada para
torná-lo invisível e visível
na placa de arte. Todas essas camadas não
estão separadas. Em seguida, o que precisamos
fazer é selecionar todos eles. Aquele que está dentro da Camada 2, selecione todos eles e arraste-o para
fora da Camada 2. Depois de conduzirmos todos para fora, Camada 2 ficará
vazia para que possamos excluí-la. Nesse caso, temos todas as nossas camadas separadas umas
das outras, e é assim que
podemos trazê-las After Effects para animar camadas
individuais.
3. Como organizar o projeto no After Effects: Em seguida, o que podemos fazer é trazer esse arquivo
para o After Effects, organizá-lo e começar a animar. Se você tiver o
After Effects aberto, vamos para o Adobe After
Effects. Podemos criar um novo projeto. Se você tiver este painel aqui, basta clicar em Nova composição. Então podemos renomear essa
composição para Main Comp. Vamos fazer a largura
para 1920 por 1080. Taxa de quadros podemos mantê-lo
em 25 quadros por segundo
e, em seguida, a duração, podemos deixá-lo em 15
segundos, o que é bom. Acerte em “Ok”. Agora temos este painel
aqui, todos esses. Estou tentando ir para
o Windows por cima. Vocês podem ver o menu Janela na minha
tela no topo? Sim. Aí está. Sim, porque eu
também tenho meus
controles de Zoom na parte superior [SOBREPOSIÇÃO]. Sim. É confuso. [RISOS] Sim, está
bagunçando meu clique. Se você for para o Windows e depois
escolher Workspace, basta configurá-lo como Padrão. Você verá
os mesmos layouts no After Effects como
o que eu tenho agora. Se você ainda não o vir, poderá redefinir Padrão
para Layout salvo, ele será redefinido para o layout
padrão padrão. Isso é o que temos quando abrimos o Adobe After Effects
pela primeira vez. Primeiro, precisamos trazer
o arquivo do Illustrator. Vamos para o painel superior esquerdo
aqui, que diz, projeto
e, em seguida, a maneira fácil é apenas
clicar duas vezes neste painel, qualquer espaço vazio, clique duas vezes. Ele vai abrir a janela
do Finder e depois vamos navegar até nosso arquivo aqui. Sabe o quê? [RISOS] Esqueci de uma coisa, esqueci de salvar o arquivo. [RISOS]
Antes de fazer qualquer coisa, certifique-se de salvar este arquivo,
caso contrário, ele não terá
todas as camadas separadas. Apenas certifique-se de
salvar isso para que ele tenha todas as camadas aqui
e, em seguida, vamos voltar
ao After Effects. Clique duas vezes neste painel de
projeto aqui. Vamos navegar até o arquivo do
Illustrator que temos. Antes de clicar em qualquer coisa, certifique-se de importá-lo como uma Composição -
Retenha tamanhos de camada em vez de filmagens, porque
se você fizer
isso como uma gravação, ela também vai
nivelar tudo em uma única camada
que você não pode animar, então você precisa escolher esta Composição -
Reter tamanhos de camada. Em seguida, certifique-se de não
clicar nesses dois,
porque algumas pessoas, sem perceber que têm essa sequência do Illustrator aberta. Se você tiver isso verificado, será muito
difícil corrigi-lo mais tarde, então você precisa importá-lo novamente. Isso é muito importante. Em seguida, clique em “Abrir”. Agora, no painel do projeto, temos
duas coisas extras aqui, uma é uma pasta que contém todas as camadas do nosso arquivo do
Illustrator e a outra
é uma composição. Se eu clicar duas vezes
nessa composição, você pode ver que eu tenho essa arte
importada para o After Effects. Todas essas camadas estão
separadas. Isso é muito bom. Agora estou apenas mostrando como
organizar os arquivos antes de
começarmos a animar. Primeiro de tudo, vamos
criar uma pasta no painel
do projeto e
vamos chamá-la de Ativos. Bom. Então, vamos precisar outra pasta
chamada precomp. Para aqueles que são
novos no Adobe After Effects, pré-composições são como pastas
no Adobe After Effects. Ele pode ajudá-lo a
organizar coisas e , em seguida, agrupar
camadas juntas. Isso é o que chamamos de
pré-composição no After Effects. Agora, para tornar este
painel de projeto organizado, posso simplesmente soltar essa pasta
no Assets e, em seguida, isso é considerado uma pré-composição porque
você pode ver o ícone aqui. Este é um ícone de pré-composição. Podemos colocá-lo nas pré-composições. Agora temos três coisas. Essas são as três
coisas que precisamos. Vamos ter
o comp principal, que é o espaço de trabalho. Esta é a única composição em
que vamos animar. Temos uma pasta que
tem todos os ativos
e, em seguida, temos
uma pasta de pré-composição que
precisaremos mais tarde. Para começar,
podemos copiar todas as
nossas camadas do Adobe Illustrator, apenas o Comando A no
teclado e o Comando C, copiar e voltar
para a composição principal, colá-lo em nossa composição principal. Este vai ser
o comp em que
vamos animar. Agora podemos fechar este. Em seguida, eu só quero
organizar essas camadas e renomeá-las para
que fiquem fáceis e claras. Agora você pode ver o
nome do arquivo aqui que diz CC.ai, que não é o que queremos. Se eu clicar neste nome de
origem aqui, neste pequeno ícone ou nome aqui, ele pode alternar entre o nome da
fonte para o nome da camada. nome da fonte tem o
nome do arquivo de origem, que é bastante longo, não é
isso que queremos. Nós clicamos nisso, ele mostrará
o nome da nossa camada, que é a camada 3-12. Isso também não é muito útil. O que precisamos fazer é apenas ver o que eles
são e renomeá-los. Este deve ser
o plano de fundo. Só estou tentando
descobrir qual deles é qual. Primeiro de tudo, quero
obter a camada de fundo. Agora você pode ver a camada 7, camada 10 e a camada 12. Se eu alternar o ícone do olho, essas três camadas
são o plano de fundo. Precisamos agrupar essas três
camadas em uma pré-composição. O atalho para isso é Command Shift C. Você
também pode ver na minha tela aqui. Vamos chamá-lo de Fundo. Clique em “Ok”. Agora temos uma pré-composição que
diz o plano de fundo, e você pode ver
no painel do projeto que
temos uma pré-composição extra, então precisamos soltar
isso até
a pasta precomp para
torná-la organizada e limpo. Este é um pano de fundo e
então vamos ter os dois círculos aqui.
Esse é o nosso círculo. Vamos prepará-lo novamente,
Command Shift C, chame-o de Circle. Agora temos um círculo aqui. Podemos colocar este
na pré-composição. Agora temos três pré-comps
dentro da pasta precomp. Este é este edifício aqui, e então temos este edifício,
temos este edifício. As três camadas no meio são os três edifícios
de fundo. Quero clicar neste
ícone de cor aqui na frente e alterá-lo para a cor amarela para
que seja mais fácil de reconhecer. Vamos apenas renomear
este para talvez Cena 3, vamos chamar essa de Cena 1. O último eu quero
que seja o segundo, então esta será
a Cena 2. Uma, 2, 3, três cenas. Então os dois últimos serão
o trem que temos. Então este será
os arbustos. É assim que organizamos camadas
e organizamos o painel do
projeto dentro Adobe After Effects para
que tudo fique claro e organizado antes de
começarmos a animar.
4. Iniciando sua Animação: A próxima seção será sobre animação. Primeiro de tudo, quero
animar as três cenas, as cenas de fundo primeiro. Como fazemos isso, apenas
entramos nesta primeira cena aqui e podemos bater
no P no teclado. Existe uma propriedade position. A ideia principal é que
vamos ter essas três cenas indo do lado direito
para o lado esquerdo. Eles virão
da direita para
a esquerda, um por um. Da direita para a
esquerda, algo assim. Preciso adicionar um quadro-chave. A zero segundo, quero que esta primeira cena
comece por aqui. Vamos adicionar um quadro-chave aqui. Então, indo
para a frente talvez para a marca de três segundos, como você pode ver
na linha do tempo aqui, vamos arrastar esta propriedade
position todo o caminho para a esquerda para
que ela esteja se movendo. Se você clicar na barra de espaço para visualizar
a animação aqui, isso é o que temos agora. Então, se eu desligar
esses dois para ficar claro, só
poderemos ver este agora. Vamos aplicar
essa animação simples a
todas as três cenas para que
elas tenham animações semelhantes, mas depois podemos cambaleá-las
mais tarde para que elas
apareçam uma a uma para que
não se chocem umas com as outras. Este aqui
vamos ter esse movimento da
direita para a esquerda. Então vamos ter
a cena 2 aqui. Pressione P na propriedade
position. Podemos adicionar um quadro-chave aqui. Do terceiro segundo ao
provavelmente o seis segundo, podemos ter essa cena
aqui se movendo para a esquerda. Então vamos ativar a Cena 3. P no teclado para posição e, em seguida, vamos
adicionar um quadro-chave aqui. Quando
começou, eu queria começar de algum lugar
por aqui e depois avançar para
o oito segundo. Para o último, eu não quero que ele se mova todo
o caminho para a esquerda porque, no último segundo, eu ainda quero algum plano de fundo
no meu círculo em vez de se eu movê-lo todo o caminho
quando a animação terminar, não
haverá nada lá dentro. Isso não é o que queremos. Queremos que isso fique lá dentro
quando a animação terminar, então vou colocá-la
aqui no centro. Esta será
nossa animação por enquanto. Essa é a nossa animação de
cena de fundo. Depois de termos este no lugar, o que podemos fazer é animar o trem. O trem também
será a mudança de propriedade de posição, o que é muito simples. Vamos apenas apertar em
P no teclado. No início
da animação aqui, para este, quero
tentar algo diferente. Quero clicar com o botão direito do mouse na propriedade
position e, em seguida,
pressionar em dimensões separadas. Dessa forma, você pode alterar
manualmente a posição x e y individualmente em vez de todas ao mesmo tempo. Como o trem só está
se movendo horizontalmente, apenas se movendo na exposição, então só vamos mudar a
exposição no trem. A zero segundo, queremos que
o trem comece pela esquerda em algum lugar por aqui. Então diga que
a animação durará oito segundos. No último segundo, quero que o trem se mova para
algum lugar por aqui. Preste atenção na
minha linha do tempo aqui. Se eu pressionar N no teclado, você poderá ver esse intervalo de
visualização muda. Isso é chamado de intervalo de
visualização. Se meu indicador de linha do tempo
estiver em oito segundos, se eu bater N, ele vai
cortá-lo daqui. Só estou visualizando tudo entre zero segundo
a oito segundos. Vamos dar uma olhada em
nossa animação por enquanto. O problema agora é que o trem está se movendo muito devagar. Eu quero que o trem
já esteja dentro do círculo, talvez em torno de 1,5
segundo, então eu
preciso acelerar o trem um
pouco mais por aqui. Então, ele só vai avançar
lentamente. Vamos visualizar isso e
ver a diferença. O trem está se movendo um pouco
mais rápido na extremidade frontal de zero segundo a
1,5 segundo e depois está
se movendo lentamente
no meio para que
vejamos toda a ação aqui e depois
cerca de oito segundos, vai parar por aí.
5. Como criar um efeito de paralaxe: A próxima coisa que queremos
fazer é
animar os arbustos. Queremos criar
esse efeito de paralaxe. Queremos que o prédio
na parte de trás se mova devagar, o que eles já fazem. Eles estão se movendo muito
lentamente na parte de trás. Então queremos que esses arbustos
se movam muito rápido, muito rápido para criar
esse efeito de paralaxe e fazer você sentir que o
trem está se movendo rápido. Embora, como você pode ver, nosso trem esteja se movendo
muito lentamente sem qualquer contexto, mas se
adicionarmos o arbusto, isso criará uma ilusão que o trem está se movendo rapidamente. O que precisamos fazer é que
precisamos ampliar, comandar. Você pode ver o atalho
na minha tela aqui. Precisamos ampliar e então precisamos ir
para nossas camadas de arbustos. Estas são nossas camadas de arbustos. Vamos desligar o
ícone do olho no trem. Apenas esconda-o por enquanto, então estamos focando
apenas neles. Essa parte vai ser um pouco difícil de entender
, mas suportar comigo. Vamos
conseguir. Primeiro de tudo, precisamos ligar nossa régua, Comando R. Você pode ver que há
uma régua na minha tela aqui. Se eu arrastar desta parte aqui, ela vai arrastar uma régua. Eu só quero ter uma régua
na ponta deste arbusto aqui. Na ponta aqui, você pode ver que está quase tocando esta primeira
árvore aqui. Então o que eu quero fazer é duplicar dois arbustos. Vou para o Comando D, duplicar um e depois Comando D novamente,
duplicar outro. Então eu tenho três camadas. O primeiro arbusto será o centro
que temos e
depois vamos
arrastar um para a esquerda. Então o terceiro, vamos arrastar
um para a direita. Vamos
estender o comprimento desses arbustos para que, quando o movermos
da direita para a esquerda, possamos movê-lo muito rápido. Você vê essa parte, ela
tem um problema aqui. Estas árvores aqui, quero colocar o arbusto 2 sob o arbusto 1, que é o central
para cobrir essas seções como se cruzando. A próxima coisa que queremos fazer é lembrar desta linha aqui. Esta linha está tocando a
primeira árvore à esquerda. A próxima coisa que queremos fazer, queremos criar as árvores esquerda e direita
para o centro. Precisamos ir para o arbusto 3
e, em seguida, arrastar este
botão de chicote. Isso é parentalidade. Se você não está familiarizado
com a parentalidade, o que faz é que
depois que eu pai esses dois
arbustos para o meio, quando eu movo o meio, digamos que se eu bater em “P”
na propriedade position
e, em seguida, arraste, os dois se
moverão com o meio. Algo assim. Só
preciso animar o meio e não preciso animar os três ao
mesmo tempo. Isso tornará
o fluxo de trabalho mais rápido. Agora, o que preciso fazer é adicionar um quadro-chave na posição. Desculpe, acho que a posição
mudou, um segundo. Aqui, você pode
ver meu arbusto 1. Esta linha está tocando esta
árvore aqui, o que é bom. Então o que precisamos
fazer é adicionar uma propriedade de posição no
mato no centro aqui. Arraste todo o caminho
para a direita para que o arbusto
comece a animar a partir daqui e talvez
dentro de dois segundos, ele vai se mover todo
o caminho para a esquerda. Agora preciso ampliar. O que estou tentando fazer aqui, estou tentando
criar um loop aqui. Se eu desligar este arbusto 1, só
preciso ver
que meu último arbusto, o arbusto 3, esta árvore está tocando essa linha. É por isso que posso criar um loop contínuo para que, quando
eu estiver fazendo loop dessa animação, você não perceba nenhuma diferença. Ele só vai se
mover continuamente da
direita para a esquerda. Este, tudo o que eu preciso
fazer, eu apenas compenso anexo porque vamos ter essa árvore no início. Precisamos que essa árvore toque esta linha aqui
e, no final, esta árvore está quase tocando a linha para que
possamos criar um loop.
6. Como criar uma animação em loop: Tudo o que precisamos fazer é duplicar
essas três camadas. Mas antes de fazermos isso, quero criar um pré-comp, Command Shift C. Agora eu quero cortar essa camada aqui. A próxima coisa que eu
quero apenas Command D. Se eu visualizar isso, você pode ver que ele está
realmente fazendo um loop dentro do círculo lá. Mas é difícil dizer, porque ainda não
tenho máscara. A próxima coisa que preciso fazer
é criar uma máscara para
mostrar apenas a área do círculo central
em vez da coisa toda. Só preciso duplicar
esse loop aqui. Então o que preciso fazer
é criar outra composição que compõe todas essas quatro animações, um grupo maior para hospedar
todas essas quatro camadas. Comando Shift C, Bush. Agora temos essa camada. Em seguida, só preciso
arrastar uma máscara. Vá para cima aqui, vá
para a ferramenta Ellipse. Basta desenhar uma máscara nesta
camada e você pode manter pressionada a
tecla Shift para garantir que seja um círculo
perfeito e, em seguida, mantenha pressionada
a barra de espaço para mover a máscara. Estou segurando Shift e também barra de espaço para mover a máscara, para garantir que ela se
alinhe perfeitamente com o círculo. Estou tentando alinhar isso com
círculo aqui. Isso é bom. Agora, se olharmos para
esta animação aqui, podemos ver o arbusto
se movendo. Isso é bom. Então temos o plano de fundo, mas ainda não criamos uma
máscara para o plano de fundo, então você já está vendo
tudo lá fora. A próxima coisa,
o que queremos fazer, queremos fazer a mesma coisa. Basta pré-compor
as três cenas. Command Shift C.
Vamos chamá-lo de Cenas, e agora podemos simplesmente desenhar uma máscara. Certifique-se de ter a camada de
cena selecionada
e, em seguida, basta desenhar uma máscara. Mantenha pressionada a tecla Shift para
se certificar de que é um círculo perfeito
e, em seguida, você pode manter
pressionada a barra de espaço para mover a máscara que você possa alinhar
tudo perfeitamente. Isso é bom. Então vamos
diminuir o zoom e dar uma olhada. Outra coisa é que
podemos simplesmente ligar nossas camadas de trem agora. Você pode ver o trem.
7. Como adicionar um Track Matte: Para o trem, quero
apresentar outra ideia. Nós fizemos a máscara
para os arbustos e
as cenas para que você esteja vendo apenas
esta seção do meio. Mas para o trem, quero adicionar o que chamamos de esteira de mattes. Como fazemos isso é vamos
para camada, vamos para novo
e, em seguida, criamos uma camada
sólida. Acerte em OK. Então ainda precisamos desenhar um
círculo nessa camada sólida. Certifique-se de apertar
Shift e, em seguida, use a
barra de espaço para se
movimentar. Isso é bom. A próxima coisa é
que eu quero esse círculo, vamos renomear isso
para uma faixa mattes. Eu quero que este círculo seja um fosco de
pista para o trem. A única coisa que precisamos fazer é garantir que esta faixa mate
esteja no topo da camada que você deseja selecionar e , em seguida, ir no trem
e clicar aqui, há uma função matte de faixa. Certifique-se de
defini-lo como fosco alfa. Você pode ver que essa camada está
desligada automaticamente. Se você não vir a
faixa fosca aqui, você pode clicar
neste segundo ícone
no canto esquerdo aqui, e ele mostrará essa
coluna que você pode selecionar. O que acontece é que sempre que
esse círculo superior estiver visível, a camada abaixo dele ficará visível. Como podemos ver, temos
o círculo no centro. Sempre que o trem entrar, o círculo ficará visível. Quando o trem estiver
fora do círculo, será invisível. É assim que funciona um fosco de faixa. Quando o trem entra
no círculo em cima dele, ele ficará
visível assim, mas tudo
fora do círculo, você não pode vê-lo. Agora, o que eu quero
fazer é que eu quero mudar isso porque eu não quero que o trem seja cortado
da cabeça aqui. Eu só quero clicar sobre
esses pontos de ancoragem na
máscara dos mattes da pista, e depois arrastar isso
um pouco mais para que, quando o trem viaja para
fora do círculo, ele ainda esteja aparecendo. Arraste ainda mais. Se eu
movê-lo para dentro, você pode ver. Se estiver fora do
círculo, você não pode ver. Vamos nos certificar de que está
ao redor desta área aqui. Arraste todo o caminho para fora. O trem está sempre visível. Ainda consigo ver um pouco
a cabeça do trem aqui. Preciso ter certeza de que
a exposição é movida para a esquerda um pouco mais. Vamos visualizar essa
animação aqui.
8. Como adicionar outros elementos: Primeiro de tudo, quero adicionar
um pop-up no início, um ditado de transição para
revelar essa animação. Não quero que isso permaneça
na triagem o tempo todo. Do jeito que fazemos isso é, vamos até o
topo aqui e clique
nesta Ferramenta Ellipse e basta clicar duas vezes
na Ferramenta Ellipse. Está criando uma forma
oval aqui. Neste momento eu só tenho um traço
aqui, não tenho preenchimento, então preciso criar
uma cor de preenchimento. Certifique-se de clicar nisso e, em seguida, selecione a cor amarela. Já tenho essa cor
amarela aqui. Você pode usar a Ferramenta Conta-gotas para selecionar qualquer cor desejada. Vamos cancelar. Basta clicar em “Ok” Eu tenho essa cor de preenchimento e
, em seguida, posso desativar o Stroke
pressionando a opção no meu teclado. Clique com o botão esquerdo algumas vezes, ele vai desligar. Agora vamos para essa forma oval. Clique neste menu suspenso, clique neste caminho de elipse e você pode ver que há um tamanho. Vamos desvincular o
tamanho da proporção para que possamos mudar essa forma
oval em um círculo. Vamos mudá-lo para 1080 por 1080 e é assim que
obtemos um círculo perfeito. Quero tornar esse círculo um pouco menor, algo assim. A próxima coisa que queremos
fazer é
adicionar outra máscara em
cima desse círculo. Quero clicar
nesta Ferramenta Ellipse e seguida, certifique-se de
clicar nesta Ferramenta de Máscara aqui. Se você não
clicar nessa máscara na parte superior, ela desenhará outra
forma dentro dessa camada. Isso não é o que queremos,
queremos desenhar uma máscara dentro dessa camada, então
clique na Máscara. Outra coisa é quando
você está desenhando uma máscara, você pode começar
a partir do centro perfeito e, em seguida, ao desenhar
, certifique-se Shift
no teclado e , em seguida, pressionar Command
no teclado. Se você pressionar Command
no teclado, ele vai desenhar o
círculo do centro. Você vê isso, quando
eu pressiono Command
no teclado, ele está desenhando
a máscara do centro. Agora eu só preciso ir
até a máscara e animar uma das propriedades
que é a Expansão de Máscara. Se eu alternar em torno
desta Expansão de Máscara, você pode ver que minha máscara está
crescendo dentro e fora. Quero clicar neste relógio
aqui para adicionar um quadro-chave e, em seguida, arrastar esse quadro-chave
para frente um pouco e garantir que a máscara
não exista no início. Arraste todo o caminho
para menos 369. Contanto que desapareça,
eu ficaria bem. Então, se eu alternar a linha
do tempo, o círculo vai
aparecer assim. Em seguida, eu só
quero adicionar Easy Ease. Selecione os dois quadros-chave, clique com o botão direito do mouse e, em seguida, Assistente de
quadro-chave ,
Easy Ease, apenas
adicionando o Em seguida, vá para o editor de
gráficos aqui, você pode clicar neste
figo gráfico para visualizar. Apenas certifique-se de manipular esse gráfico um pouco para
que ele tenha mais energia. O círculo vai
aparecer assim. Isso é bom. Em seguida, queremos duplicar
essa máscara, o Comando D, duplicar essa máscara e, em seguida alterar esse
modo de máscara para subtrair. Este é um
truque que sempre fazemos. Alteramos a máscara
para subtrair e depois deslocamos os quadros-chave. Você pode ver o efeito que
vamos ter. máscara duplicada altera-a para subtrair e depois
deslocar os quadros-chave. Esse é o efeito que
teremos após as duas máscaras que
adicionamos ao círculo. Também podemos manipular o
tempo como quisermos. Mas agora
sinto que o círculo não
está no centro, então podemos simplesmente mover essa camada inteira para garantir que
ela esteja bem no centro. Isso funciona. Agora tudo o que
preciso fazer é atrasar a animação de todas
as camadas abaixo dela. Basta selecionar todas essas animações que fizemos antes,
exceto o plano de fundo e arrastar as camadas alguns quadros à frente para que elas não fiquem visíveis na
tela no início. Talvez arraste-o até aqui. Quero que o círculo
apareça primeiro e
depois revele a animação. Olhe para isso. Isso é bom. Então a próxima coisa que queremos
fazer é adicionar algumas trilhas de fala como
se o trem estivesse se movendo rapidamente. A maneira como fazemos isso é que precisamos ir
para cima aqui para selecionar esta Ferramenta Caneta e, em seguida, ampliar. Vamos desenhar dois pontos. Desenhe uma linha como esta
e, em seguida, vá para cima aqui, certifique-se de que
a opção Preencher desativada, mantenha pressionada no teclado. Clique em “Preencher” três vezes e depois vá para o Traçado, certifique-se de que está na cor branca. Agora temos esta linha branca aqui, mas eu ainda preciso
tornar a linha mais espessa, algo assim para mudar
o traçado da linha para nove pontos e depois mudar
o Butt Cap para um Round Cap. Agora temos uma linha aqui. Em seguida, o que
precisamos fazer é adicionar um caminho de corte. Vá para esta linha
que acabamos de desenhar, essa camada e, em seguida,
aqui está o botão Adicionar. Você pode clicar nisso,
podemos adicionar um efeito Trim Path. Ele adicionou um efeito Trim
Path aqui. Se eu alternar a porcentagem de fim e
início aqui, você pode ver que a linha está
realmente desenhando e desativada. Por aqui neste segundo, precisamos talvez apenas
cerca de meio segundo, clicar no relógio
aqui para colocar dois quadros-chave e alterar o valor final
para zero também, então 00, ambos começando
em zero e, em seguida, avance 10 quadros. Command Shift seta para a direita, então é assim que você avança 10 quadros e altera todo
o valor para 100%. Em seguida, podemos selecionar todos eles, Assistente de
quadro-chave, clique com o botão direito do mouse
e, em seguida, Easy Ease. Vá para o Editor de gráficos, a mesma coisa que fizemos antes. Basta arrastar essas curvas para
garantir que ela tenha mais energia. Em seguida, o que precisamos fazer é
apenas compensar o quadro-chave. Depois que fizermos
isso, esse é o efeito que
vamos ter. Você vê as linhas quase
como uma trilha de velocidade. No momento, ele está se movendo muito rápido, então eu preciso arrastar os
dois quadros-chave no final talvez um pouco mais para
que ele tenha mais tempo. Preciso compensar essas
duas teclas de ainda mais. Do jeito que você gosta, mas acho que agora
funciona muito bem assim. Isso é legal e agora
só precisamos adicionar mais. A maneira mais fácil é
duplicar essa camada, Comando D. Em seguida certifique-se de estar de volta
à Ferramenta Selecionar, caso contrário você continuará desenhando com sua Ferramenta Caneta. Volte para esta Ferramenta
Select e, em seguida você pode mudar a posição dela e talvez colocá-la aqui. Mas não queremos que eles
apareçam ao mesmo tempo, que possamos compensar o
quadro um pouco. Você pode clicar em U
no teclado para mostrar o quadro-chave e
, em seguida, podemos arrastar este um
pouco para frente para que eles estejam acontecendo em segundos diferentes. Isso é bom. Então podemos
duplicar outro, arrastá-lo até o topo. Mas então aqui eu quero que isso seja mais curto
em vez de tanto tempo. Preciso voltar para a Ferramenta
Caneta e, em seguida, clicar nesta extremidade
da linha e
puxá-la um pouco para que
essa linha fique mais curta. Se visualizarmos, isso é
o que vamos conseguir. Temos duas linhas longas e depois uma linhas curtas.
Algo assim. Agora, como já temos
três no lugar para tornar as coisas mais rápidas, podemos duplicar três
juntos Comando D e
arrastar todos eles para frente para que
haja repetição. Mas o que quer que você queira fazer, você pode alterá-lo para lugares
diferentes, alterar o comprimento dela já que sua animação já
está lá. Você não precisa mudar mais
nada apenas a posição e o comprimento
da linha de velocidade. Vamos diminuir o zoom e dar
uma olhada em nossa animação.
9. Como adicionar a camada de reflexo: A última coisa que queremos fazer é adicionar um Efeito de brilho ou você pode chamá-lo de
reflexão sobre o trem. Como se o trem refletindo luzes
do sol ou algo assim. A maneira de fazer isso
é antes de tudo, preciso ir para minha camada
e, em seguida, criar um novo sólido. Vamos criar uma camada sólida
e, em seguida, quero
ir para a ferramenta Caneta. Quero desenhar algumas formas aqui. Basta desenhar alguma forma que se
pareça com um reflexo. Talvez um mais grosso, e depois um mais fino. Este vai estar aqui. Esse
será o nosso reflexo. Então vamos espiar a
posição do teclado corretamente. Clique com o botão direito do mouse em “
Dimensões separadas”, então, quando o trem
se mover por aqui, quero que isso se mova
do lado direito para a esquerda. Só vou passar
pelo trem. Isso é bom. Então eu quero
duplicar outro, e modificá-lo um pouco, modo que quando o trem estiver
movendo esses dois vai passar pelo trem,
algo assim. Esse
será o nosso reflexo. Vamos apenas pré-comprá-lo. Mudança de Comando C. Isso é
chamado de efeito de brilho. A próxima coisa que queremos fazer, assim como o fosco da pista
que falamos antes, quero usar o trem como fosco
da pista para que
sempre que o trem estiver visível, esse reflexo será visível. Preciso duplicar essa camada de
trem, o Comando D, e depois colocá-la
em cima desta camada de brilho
e, em seguida, definir a faixa fosca na camada de brilho
para alfa fosco. Agora, você pode ver sempre que
esse trem estiver visível, o brilho é visível. A próxima coisa que queremos fazer, acabei de colocar essas duas camadas
em cima da nossa camada de trem. Vamos tentar definir o modo de mesclagem
diferente. Vamos configurá-lo para luz suave. Se o definirmos para o modo de
mistura de luz suave na camada de brilho, isso é o que você tem, e você ainda pode ver um
pouco de cor amarelada. Isso cabe à sua escolha. Você também pode alterá-lo
para branco, se quiser. Esse é o efeito que
vamos ter. Vamos visualizar a animação. É muito sutil,
mas é eficaz. Isso vai ajudar
com a narrativa e torná-lo mais realista. Neste momento, você ainda pode ver o
efeito de brilho fora do círculo. Outra coisa que precisamos fazer, talvez
precisemos
pré-compor este novamente,
o trem e o brilho, o trem e o brilho, Command Shift C. Pré-compor
aos efeitos de brilho
e, em seguida, mudar esse modo de
mistura de camadas para luz suave. Vamos desenhar outra
máscara em cima
desse efeito de brilho para
garantir que ela só apareça
dentro do círculo. Se escondermos a régua, essa é a nossa animação final. Você ainda pode ver
a linha de velocidade e a reflexão no trem, e então temos o
fundo se movendo, e temos os arbustos se movendo. Depois de termos esta
animação pronta, podemos exportá-la para um GIF e compartilhá-la na Internet. A maneira como fazemos isso é, vamos ao
menu de composição no topo aqui
e, em seguida, vamos adicioná-lo à fila do
Adobe Media Encoder. Para exportar um GIF, precisamos ter este Adobe Media Encoder,
outro software. Normalmente, quando exportamos para o formato
mp4 ou formato GIF, sempre
usamos isso
porque é muito rápido
e, quando está renderizando, você ainda pode continuar trabalhando em
outras coisas no After Effects. Você não precisa
parar seu trabalho. Ele está sendo
renderizado completamente fora do After Effects em um
software diferente da Adobe, que está funcionando muito bem. Não sei por que está verificando. Vamos lá. Apenas um último
passo para exportar o GIF, e isso está me falhando. As coisas sempre
parecem não correr como
costumam ir quando
as pessoas estão assistindo. Sim. Bem, isso tem sido incrível. Enquanto esperamos
que ele
exporte e acerte o passo final, talvez eu possa
passar uma ou duas perguntas? Sim, com certeza. Legal. Na verdade, há uma tonelada de
perguntas realmente incríveis chegando ao redor da vida de um
designer e animador de gráficos de movimento, como você começa, etc Imaginando se você poderia compartilhar
um pouco sobre como você começou no setor, notou quaisquer
padrões e quais conjuntos de habilidades são mais
procurados ou que as pessoas
estão procurando, quaisquer sugestões sobre como construir um portfólio ou um bobina
de demonstração sobre esse processo de
introdução? Sim, definitivamente. Quando eu estava na faculdade, minha especialização é
design gráfico, mas também tínhamos animações, mas estamos
apenas aprendendo o básico, fundamentos da animação e também alguns dos efeitos posteriores. Depois que me
formei, trabalhei como
designer gráfico por alguns anos. Ao mesmo tempo, eu
também estava aprendendo online
porque eu realmente gosto animações e estava fazendo um monte de
tutoriais online, fui ao Skillshare para aprender, há tutoriais do YouTube
em todos os lugares e também há como outro site que pode ensiná-lo a
fazer animações. Enquanto eu estava fazendo meu trabalho diurno
como design gráfico, como depois do trabalho eu sempre
volto para casa e depois comecei meu próprio projeto como
fazer coisas aqui e ali, então foi assim que eu
montei meu portfólio. Eu só imito o que outras pessoas estão fazendo em seu
tutorial porque como o bom é para
o rolo de demonstração, você não precisa mostrar a
peça completa na maioria das vezes, você só mostra alguns
segundos isso é incrível e, em seguida, com todas as
informações on-line você pode realmente
criar
algo incrível por
alguns segundos e depois passar para
o próximo projeto e depois ter um monte de peças incríveis juntas talvez como um rolo de demonstração de um minuto. Então
foi assim que comecei meu rolo de demonstração e continuo aprendendo cursos
online. Depois de três anos fazendo meu trabalho diurno fazendo design
gráfico, sinto
que estou confiante com minhas
habilidades After Effects, então eu simplesmente larguei meu emprego e saio e procuro um
movimento trabalhos gráficos, algo que é maré como designer gráfico em
movimento. Felizmente, para mim, havia
essa agência de publicidade, eles adoravam meu trabalho, nem sequer disseram
nada porque para nós designers ou artistas como às vezes diploma ou
universidade não importa, onde quer que você se forme, não
importa
desde que você tenha um bom trabalho e então
você seja amigável com as pessoas. A maioria das empresas quando
estão contratando se
preocupa com o processo
de pensamento do seu trabalho e também o quão bom você está fazendo, quão bom é o seu ofício? Minha sugestão para
quem está apenas
começando é eu acho que continue praticando
porque essas coisas, às vezes são coisas
simples como essa animação que eu
provavelmente posso se não estiver ensinando Eu posso fazer isso talvez em
20 minutos
, mas então leva tempo para praticar
para poder fazê-lo por 20 minutos, leva anos de prática e às vezes você aprende
uma técnica e então você sente como se você soubesse, mas
na próxima vez, quando você
estiver realmente precisando dele e
você precisa fazê-lo, esqueceu. Acho que a coisa mais gratificante é apenas como não apenas assistir tutoriais ou aulas,
mas realmente fazer isso e,
em seguida, talvez colocar meu próprio talento, personalizá-lo como o que
eles estão ensinando, talvez eles tenham um storyboard, você o personaliza, você faz outro conjunto de
animação que é
seu e você pode
colocá-lo em seu rolo de demonstração. Isso é o que eu acho
mais benéfico, eu perdi algum dos pontos que você disse antes? Isso foi ótimo, tão bom.
Muito obrigado. Foi muito interessante
ouvir como você
começou como estudante no Skillshare e
como fez isso acontecer. Faça esse último passo. Precisamos tentar novamente? Sim, eu estava tentando
porque acho que fechou em si mesmo, então eu já cliquei novamente, tente abri-lo. Dedos cruzados. Sim, vamos
adicioná-lo à fila novamente. Quanto tempo esse
passo geralmente leva? Normalmente, leva apenas segundos, mas parece
ter dificuldade em abrir o software em si, porque
se você o tiver aberto, deve demorar nenhum
segundo para renderizá-lo. Há outras
perguntas que você gostaria que eu respondesse? Claro. Então, um de nossos
alunos quer saber, você planeja lançar mais
aulas em vídeos explicativos como como adicionar música ou efeitos
sonoros a vídeos
explicativos? Sim, estou planejando
outro vídeo explicativo agora e deve
ser lançado como
em um mês ou dois espero, porque eu tenho
alguns projetos, como
classes diferentes acontecendo em ao mesmo tempo,
sim, definitivamente. Para efeitos especiais
, são duas áreas. Um é efeitos especiais, o outro é
motion graphics. Eles se cruzam
com certeza, mas para mim, não
me
considero um cara de efeitos especiais. É preciso um
conjunto de habilidades totalmente diferente para aprender efeitos especiais, é muito difícil, acho isso muito difícil. Mas se você gosta disso,
provavelmente pode encontrar outro professor que está ensinando
efeitos especiais na Internet, eu mesmo não sou muito
bom para ser honesto. Na maioria das vezes, concentro
minhas aulas em animações e,
especialmente,
para iniciantes começarem, então foi assim que senti quando
comecei, é
difícil encontrar aulas
que ensinem como para fazer projetos reais e como ensinar sistematicamente como
fazer o projeto do mundo real. Isso é benéfico
para mim quando
comecei a encontrar até mesmo uma única aula no Skillshare para poder trabalhar em projetos
do mundo real.
10. Considerações finais: Apenas certifique-se de compartilhar seu
projeto na Galeria de projetos abaixo, para que você possa obter feedbacks
e incentivar uns aos outros.
Hongshu Guo, Motion Designer
