Todo mundo adora um bom vídeo de produto. Um vídeo explicativo animado mostrando a funcionalidade de seu novo produto pode capturar a atenção e a imaginação de seus clientes com muito mais eficácia do que descrições escritas.

Mas, você pensa, Não sei fazer um vídeo explicativo animado.

Não é para se preocupar. Na verdade, é muito mais fácil do que você imagina. Usando o Adobe After Effects, darei a você o guia completo de que você precisa para criar seu próprio vídeo animado.

O produto final que criaremos com este tutorial.

O que pretendo focar:

Como reutilizar seus ativos atuais e arte para criar elementos animados para vídeos de produtos usando Adobe After Effects. Vou mostrar os conceitos básicos de animação e truques simples para dar aos seus vídeos o toque profissional de que você precisa.

O que não vou cobrir:

Como conceituar e criar um roteiro para seu vídeo ou como adicionar voz ou música. Esses elementos são obviamente importantes, mas não são o que abordaremos hoje. Foco, pessoal!

Vamos usar um produto fictício no estilo Slack (vamos chamá-lo de Quack) para este tutorial. Você pode baixar os arquivos para me seguir Aqui . Comecemos…

1. Exportando do Photoshop

Tente dobrar o tamanho de tudo e coloque cada parte que deseja animar em uma camada separada. Camadas dentro de pastas causam problemas (pelo menos para este tutorial). Certifique-se de nomear suas camadas - isso realmente ajudará mais tarde.

O tamanho do meu documento é 3840px x 2160px. Ao salvar, certifique-se de que o formato do arquivo seja PSD com a exportação de camadas ativada.

2. Importando arquivos para o After Effects

Abra o After Effects. Clique em Novo projeto Na tela de boas-vindas ou barra de menu, vá para Arquivo> Novo> Novo Projeto .

Agora vá para Arquivo> Importar> Arquivo .

Selecione seu arquivo do Photoshop e clique no botão Abrir. Certifique-se de que o botão Estilos de camada editáveis é selecionado e o Tipo de importação isto é Composição ** ( NÃO ** Vídeo ou Filmagem )

Agora você deve ver um Composição novo e uma pasta no painel do navegador do projeto (o painel esquerdo da área de trabalho do After Effects.) Toque cmd + 0 no Mac ou ctrl + 0 No Windows, para ver o painel, se você não conseguir vê-lo).

Clique duas vezes na composição recém-importada para abri-la no painel de visualização.

Você deve ver uma prévia da sua composição e, como no Photoshop, uma lista de camadas na parte inferior. Mas essas não são camadas, mas linhas do tempo.

Estamos quase prontos para a animação! Algumas últimas coisas antes de chegarmos à parte divertida.

3. Verificando suas configurações de vídeo

Escolher Composição no menu principal, e então Configurações de composição . Queremos ter certeza de que temos tempo suficiente para animar tudo, então encontre a caixa de duração e defina-a como 0: 00: 30: 00 (este é o formato de timecode normal - horas, minutos, segundos e segundos divididos).

Você também deve se certificar de que a taxa de quadros está definida para 25 e, por enquanto, a resolução está definida para Cheio (Você pode reduzi-lo mais tarde se o seu computador começar a ficar lento.)

(Um guia rápido para a linha do tempo)

Visto que isso é para iniciantes em animação e pessoas com pouco conhecimento de After Effects, aqui está o que você deve ver na linha do tempo:

• O ícone de olho à esquerda para mostrar / ocultar cada camada.
• O triângulo retângulo, que é como acessar todas as propriedades da camada e finalmente animá-las.
• A linha do tempo de cada camada onde os quadros-chave (o ponto inicial ou final de uma transição na animação) serão marcados no lado direito.
• Abaixo delas, você verá uma barra de zoom (pequena montanha e uma grande montanha). Diminua o zoom o máximo possível.

4. Quadros-chave e transformações

Agora vamos fazer com que cada elemento do nosso vídeo desapareça na tela. Vamos criar um quadro-chave para cada camada, afetando a opacidade e a transição de 0% a 100%. Podemos fazer isso camada por camada, mas queremos trabalhar rapidamente - vamos fazer cada camada juntos!

Clique na primeira camada (superior) da linha do tempo e selecione Todos ( cmd + a o Menu: Editar> Selecionar tudo ) Então, na primeira camada, clique no triângulo retângulo que mencionei anteriormente. A opção de transformação deve ser implantada. Clique no triângulo ao lado da opção de transformação.

Agora você deve ter todas as opções de transformação disponíveis.

Com o indicador de reprodução (a seta azul maior para baixo, você pode arrastar da esquerda para a direita através dos segundos marcadores como em um vídeo) em zero, clique no cronômetro à esquerda de Opacidade e defina o valor para 0% digitando OU clicando e arrastando o marcador até chegar a zero.

A reprodução pode ser arrastada da esquerda para a direita

Mova a reprodução para um segundo e, em seguida, defina a opacidade de volta para 100%. Um quadro-chave será adicionado automaticamente.

Agora você pode visualizar o fade arrastando o playhead de volta ao início da linha do tempo e pressionando a barra de espaço.

Agora queremos compensar um pouco para que desapareçam separadamente.

Primeiro temos que verificar se todas as camadas preenchem a linha do tempo. Com todas as camadas selecionadas e totalmente ampliadas na linha do tempo, passe o mouse sobre o lado direito da barra de cores. Você deve obter uma alça de redimensionamento. Clique e arraste totalmente para a direita da linha do tempo. Cada camada deve durar 30 segundos.

Agora, para compensar os esmaecimentos, você pode arrastar manualmente cada camada um pouco (certificando-se de ter apenas uma camada selecionada por vez).

Ou você pode usar um pequeno truque (isso pressupõe que sua composição seja configurada como a minha). Selecione a camada inferior, mantenha pressionada a tecla Shift e selecione a camada superior (a ordem de seleção realmente importa aqui).

Em seguida, no menu, selecione Animação> Assistente de quadro-chave> Camadas de sequência .

Marque a caixa que diz Sobreposição e digite 00: 00: 29: 20. Isso deslocará cada camada em cinco quadros. (Trinta segundos de animação a 25 quadros por segundo menos 29 segundos e vinte quadros).

Se tudo correr bem, pressione ** 0 ** no teclado numérico (ou arraste o playhead de volta para o início da linha do tempo e pressione a barra de espaço) para assistir à compilação do vídeo.

5. Pontos de ancoragem e escada

Nesta etapa, vamos importar um cursor do mouse na forma de um PNG transparente e movê-lo pela tela.

Usando ** cursor.png ** dos arquivos de origem que você baixou na parte superior, importe o arquivo da mesma maneira que importou o arquivo do Photoshop. Em seguida, arraste e solte do painel do projeto para a janela de visualização (ou para a linha do tempo, se desejar).

Temos que colocar esse recurso um pouco para que pareça um pouco mais, hum ... confiável. Deve ser menor, então deixe-me mostrar a propriedade de escala e, mais importante, o ponto de ancoragem.

The Anchor Point

Caso você não saiba, um ponto de ancoragem é a posição onde todas as transformações de um elemento se originam. Parece uma cruz no centro da caixa delimitadora do elemento.

Para o ponto de ancoragem, você tem duas opções - a ferramenta Pós-panela (atalho de teclado Y ) ou a propriedade do ponto de ancoragem.

A ferramenta traseira (atalho Y) .

Certifique-se de que a camada do cursor esteja selecionada e arraste a cruz para o canto superior esquerdo do item. Isso é.

Propriedades

Este método é mais preciso se você souber exatamente onde deseja que o ponto de ancoragem esteja. Queremos isso no canto superior esquerdo, então clique na lista suspensa Transform (a pequena seta que usamos anteriormente) na camada do cursor no painel da linha do tempo. Na propriedade Ponto de ancoragem , altere ambos os valores para zero (representam as coordenadas xey da camada). Escala

você tem duas opções aqui também. Você pode usar as alças de transformação - segure a rolagem, clique e arraste o canto inferior direito da caixa delimitadora para uma escala que pareça correta. A segunda opção é usar a propriedade Escala no rollout Transformation da linha do tempo e defina o valor em cerca de 25%. (Os valores de largura e altura estão vinculados.) Clique no pequeno ícone de elo de corrente à esquerda se quiser definir os valores separadamente.

6. Movendo coisas!

Arraste o elemento do cursor para fora dos limites da composição (para que possamos movê-lo mais tarde).

Defina a reprodução na linha do tempo para cinco segundos e clique no ícone do cronômetro ao lado de Posição na camada do cursor Transform Unfold. Mova a reprodução para seis segundos e arraste a camada do cursor para a posição desejada - vamos para a grande caixa de texto branca na parte inferior. Um novo quadro-chave será feito.

Enquanto você estiver aqui, pressione o cronômetro ao lado de Escala , mova alguns quadros na linha do tempo e reduza em 5%. Em seguida, avance mais alguns quadros e coloque a escala de volta ao que era.

Enquanto estiver neste quadro da animação, clique no diamante à esquerda de Posição . Isso criará um novo quadro-chave da posição exatamente onde está. Avance cerca de um segundo e arraste o cursor para fora da composição.

Quando você vir o que tem, deve ser parecido com isto:

7. Texto e predefinições

Vamos adicionar algum texto a isso - texto animado, obviamente.

Selecione a ferramenta Tipo na barra de ferramentas superior e adicione algum texto na caixa branca que acabamos de apontar. Adicionar texto funciona da mesma maneira que no Photoshop.

Se o painel não estiver aberto (provavelmente não está, se estiver nas configurações padrão do espaço de trabalho), vá para Menu Principal> Janela> Efeitos e Predefinições . Então selecione Predefinições de animação> Texto> Animar em> Máquina de escrever .

Com a camada de texto selecionada, clique duas vezes na predefinição da máquina de escrever ou arraste e solte a predefinição da máquina de escrever na camada.

Visualize a animação. Você deve ver o texto escrito lentamente na tela.

Agora vamos acelerar um pouco. Expanda as opções da camada (usando o triângulo lateral), e uma nova opção deve aparecer - Texto . Expanda isso e depois expanda Animador 1 e finalmente, Seletor de alcance 1 . Agora você pode arrastar os quadros-chave inicial e final da animação de texto para a duração desejada.

8. Composições de aninhamento

Agora vamos ver as composições de aninhamento. No menu principal, clique em Composição> Nova Composição . Use as seguintes configurações:

Clique OK. Agora você deve ter uma composição em branco de trinta segundos em um tamanho razoável.

Arraste e solte a composição da janela de bate-papo em sua nova composição em branco. Enquanto estamos nisso, pressione comando + opção + F (ou ctrl + alt + F ) para ajustar sua animação ao novo tamanho. Visualize o que você tem. Deve ter a mesma aparência de antes, apenas reduzida.

Brinque com keyframing de tamanho e posição. Você pode ampliar os diferentes elementos, a caixa de texto, etc. Por que tornamos o PSD tão grande?

Agora você pode copiar e colar suas camadas no painel da linha do tempo e dimensionar cada camada para uma nova posição para exibir várias janelas. (Dica profissional: use J e K no teclado para pular para frente e para trás entre os quadros-chave em uma camada.)

9. Transições

Neste caso, você deve ter uma ideia de como lidar com frames-chave, então não pare e faça seus elementos desaparecerem da janela de chat (com configurações de opacidade, escala - definida como 0% - ou por composição de fora da tela posicionamento) e vamos colocar nosso logotipo da mesa final.

Importa o logo.psd como você aprendeu a fazer antes, e colocou na nossa composição. Arraste a tela e crie um quadro-chave de posição em algum lugar na linha do tempo após os outros elementos terem saído da tela. Avance meio segundo e mova o logotipo para o centro da tela (cmd + opção + F).

Visualize sua animação para ver a transição do logotipo.

O Editor Gráfico

Agora vamos fazer as coisas fluírem um pouco melhor usando o editor gráfico, que permite ajustar as transições entre os quadros-chave.

Selecione os quadros-chave de duas posições no logotipo e pressione o botão que se parece com um gráfico (veja o botão azul destacado abaixo):

Para as posições, precisamos dividir os valores de X e Y. Pressione o botão Dimensões separadas (canto inferior direito da imagem acima).

Selecione o último quadro-chave vermelho (X) e arraste a alça Bezier (amarela) até obter um bom pico.

Visualize sua animação. Você deve ter um bom salto agora.

10. Pressionando tudo

Agora você tem uma seção funcional (embora um pouco insossa) de vídeo animado e os blocos de construção para criar vários tipos de animação. Neste ponto, eu aconselharia gastar um pouco de tempo olhando para trás em nosso layout simples, brincando com o editor de gráfico em quadros-chave e apertando os tempos e posições.

Você pode adicionar cores de fundo, animar texto para explicar cada cena, etc.

11. Renderizando

Por último, certifique-se de selecionar a composição selecionada corretamente e vá para Menu principal> Composição> Adicionar à fila de renderização .

A fila de processamento deve aparecer. Brinque um pouco com as configurações, se quiser, mas as configurações padrão devem servir por enquanto. Em seguida, clique no texto azul ao lado de Sair para: e selecione onde salvar sua animação. Finalmente pressione o botão Renderizar no canto superior direito do painel.

Isso é! Você acabou de criar seu primeiro vídeo explicativo animado no After Effects. Só vai ficar mais fácil de agora em diante.