Animação de logotipo é o processo de introdução de movimento ou alterações nos elementos visuais de um logotipo para torná-lo mais dinâmico e atraente. Pode ser aplicado a diferentes partes de um logotipo, como texto, imagens, cores e formas, e pode ter vários graus de complexidade, desde animações simples, como texto piscando ou desbotando cores, até animações complexas envolvendo objetos em movimento ou interativos. efeitos.
A animação de logotipos está se tornando mais comum. Entre os smartphones e o desenvolvimento geral da tecnologia da Internet, os logotipos são agora muito mais comuns em espaços digitais, e isso abre a porta para efeitos visuais como a animação que não são possíveis com produtos físicos. É claro que a crescente popularidade da animação de logotipos significa que cada vez mais marcas precisarão dela para permanecerem competitivas. Portanto, aprender como animar um logotipo pode ser uma habilidade valiosa que levará seu logotipo para o próximo nível.
Ao mesmo tempo, o software de animação também se tornou mais onipresente, simplificado e intuitivo para dar suporte a essa crescente base de usuários. Portanto, não importa o quão técnica e complexa possa parecer uma animação de logotipo, até mesmo os iniciantes podem agora criar animações simples, mas eficazes.
Animação de logotipo no After Effects -
Passo 1. Prepare seu arquivo de logotipo.
Na verdade, começaremos nosso tutorial sobre como animar um logotipo no Adobe Illustrator (ou software de design de logotipo semelhante). Isso é necessário para garantir que nosso arquivo logotipo configurado para animação.
Embora o software de animação em si seja raster, os arquivos originais do logotipo devem estar em formato vetorial. Isto permite que você os altere sem danificar para qualidade de imagem (por exemplo, aumentar o zoom em um logotipo raster resulta em pixelização), e isso será útil posteriormente ao trabalhar com camadas de forma.
Certifique-se de que seu logotipo esteja separado em camadas usando o painel Camadas.
O logotipo também deve ter várias camadas, em vez de agrupado em um único objeto. Isso facilita a criação de animações mais complexas, animando partes individuais do logotipo. Você pode criar novas camadas usando o " Adicionar nova camada" na parte inferior do painel Camadas e copie e cole partes do seu logotipo nelas.
Por fim, como a animação é de natureza digital, também trabalhamos com cores RGB. Se o seu arquivo do Illustrator estiver definido como CMYK, você pode alterar isso selecionando seu logotipo e navegando até Editar > Editar cores > Converter para RGB.
Quando estiver pronto, exporte seu logotipo como um arquivo vetorial completo em camadas. Como os tipos de arquivo do After Effects fazem parte da família de software Adobe, salvarei o logotipo que criei como um arquivo AI (Adobe Illustrator), mas existem vários tipos diferentes de arquivos vetoriais para você escolher se você estiver usando outro software.
Passo 2: Importe seu logotipo para o After Effects. Animação de logotipo
Abra o After Effects. A interface pode parecer complicada à primeira vista, então vamos detalhar o básico:
- Barra de ferramentas : aqui você pode acessar o principal ferramentas gráficascomo a ferramenta Caneta, a ferramenta Tipo, etc.
- Painel do projeto : é aqui que você gerencia e organiza os arquivos de mídia de todo o projeto.
- Janela de composição : esta é uma janela de visualização de vídeo onde você pode visualizar a animação da composição atual (geralmente chamada de composição) na qual você está trabalhando. As composições são essencialmente cenas, cada uma com seus próprios cronogramas de animação separados. Discutiremos as composições com mais detalhes na próxima seção.
- Linha do tempo : É aqui que você criará sua animação. Ele consiste em uma linha do tempo literal à direita (onde você configurará eventos de animação para serem executados na linha do tempo) e uma área de layout à esquerda (onde você sobreporá e editará os atributos de seus ativos de mídia).
- Painel de controle : aqui você pode acessar vários recursos de suporte, como informações de mídia, opções de parágrafo e alinhamento e bibliotecas pré-construídas de animação e efeitos visuais integradas ao After Effects.
Se não tiver certeza sobre uma ferramenta ou botão, passar o mouse sobre ele fornecerá uma descrição.
Para importar um arquivo de logotipo, basta arrastá-lo para o painel Projeto ou selecionar Arquivo" > " Importar" > " Arquivo" . Na próxima caixa de diálogo, selecione Importar mídia como filmagens e camadas mescladas .
Etapa 3: configure sua composição. Animação de logotipo.
Uma composição (comp) é um contêiner que permite compor, editar e aplicar animação a arquivos de mídia. Uma produção maior, como um filme, conterá diversas faixas organizadas em um painel de projeto. Então você pode pensar nas trilhas como uma única cena naquele filme, e cada trilha terá sua própria linha do tempo separada. No nosso caso, uma animação de logotipo que dura menos de cinco segundos requer pouquíssimas composições.
Para personalizar sua composição, arraste os arquivos de mídia para o lado esquerdo do painel da linha do tempo.
Vamos começar com um plano de fundo simples. Clique com o botão direito no painel de layout e selecione " Crio" > " Sólido" . Como meu logotipo é branco, escolhi sólido cor preta, mas você pode escolher qualquer cor. Na próxima janela, nomeie o sólido (no meu caso “BG”), clique no botão “ Faça o tamanho computador" e selecione " OK" . Agora arraste seu arquivo de logotipo do painel Projeto para o painel Linha do tempo e você deverá ver seu logotipo visualizado na janela de composição. Caso contrário, reorganize as camadas arrastando o fundo sólido abaixo do arquivo do logotipo.
Clique com o botão direito no arquivo do logotipo no painel de layout e selecione Crio" > " Converter para uma composição multicamadas" . Isso transformará seu arquivo de logotipo em uma composição diferente (você verá que o ícone mudou). Clicar duas vezes no arquivo do logotipo abrirá uma nova guia e levará você a esta nova composição contendo todas as camadas individuais que você configurou no Illustrator. Agora você pode ver como as composições funcionam: elas são essencialmente como subpastas.
Animação de logotipo
Se desejar, você pode converter cada uma dessas camadas em composições separadas clicando com o botão direito e selecionando Composição preliminar" . Isso dará a esta camada sua própria linha de tempo de animação, aninhada na composição anterior. E se quiser animar todo o logotipo de uma vez, você deve usar uma linha do tempo associada à composição principal.
Com isso resolvido, vamos entender como essas linhas do tempo funcionam para a animação.
Etapa 4: anime o logotipo usando quadros-chave
O After Effects (e a maioria dos softwares de animação) funciona usando quadros-chave. Os quadros-chave são essencialmente marcadores que você pode definir na linha do tempo para determinar quando os estados inicial e final da sua animação devem ocorrer.
Por exemplo, vamos começar com uma animação muito simples: fade in. Um objeto possui diferentes atributos anexados a ele, e os atributos que mudam durante um determinado período de tempo são essencialmente animação. Para ver esses atributos, clique no ícone Expandir próximo ao logotipo seguido por propriedade "Converter" .
Crie quadros-chave clicando no ícone do cronômetro próximo a Propriedades no painel Linha do tempo.
Para uma animação esmaecida, você deseja trabalhar com o atributo que mede a visibilidade de um objeto: a opacidade. A opacidade está definida como 100% porque por padrão o logotipo fica totalmente visível.
Clique no ícone do cronômetro próximo à opção Opacidade e você verá um diamante onde o marcador do playhead está definido (a linha azul fraca cruzando a linha do tempo). Este é um quadro-chave, basicamente um instantâneo do valor atual de um atributo especificado. Mova o quadro-chave clicando e arrastando-o até a marca de 2 segundos na linha do tempo. Arraste o controle deslizante de volta para a marca de 0 segundos, crie outro quadro-chave e defina a opacidade para 0%. Pressione a barra de espaço para visualizar a animação na janela de composição.
After Effects
Você verá que criou uma animação de fade-in suave alterando a opacidade de 0% para 100% em 2 segundos com apenas dois quadros-chave. É assim que toda animação é feita no After Effects. Você pode criar um quadro-chave inicial e um quadro-chave final em intervalos diferentes ao longo da linha do tempo, e o After Effects calcula automaticamente as transições de quadro necessárias para ir do ponto A ao ponto B (tradicionalmente chamados de quadros interpolados no ramo de animação).
Uma animação simples e suave é criada usando dois quadros-chave para a propriedade Opacity.
Você pode ver que há vários atributos com os quais você pode trabalhar em Transformar propriedade, que explicaremos brevemente aqui. Sinta-se à vontade para experimentar quadros-chave e modificar cada um deles para ter uma ideia de seus recursos de animação:
- Posição : Este atributo descreve a posição do logotipo no espaço X, Y na tela de layout e permite que o movimento linear seja animado.
- Escala : este atributo descreve o tamanho do logotipo (como uma porcentagem do tamanho total do arquivo original) e permite criar animações de aumento ou redução.
- Rotação : este atributo descreve a orientação em graus e permite criar animações de rotação.
Conselho de um profissional :
Quando se trata de animar um logotipo, faz sentido trabalhar de trás para frente (como fizemos com o fade-in), já que a animação deve terminar no logotipo finalizado e completo. Isso significa que você precisa criar quadros-chave antes de alterar qualquer coisa para ter instantâneos dos valores dos atributos em seu estado padrão. Você pode então mover esses quadros-chave para o ponto final desejado na linha do tempo (por quanto tempo você deseja que a animação dure) e criar novos quadros-chave para as alterações no início da linha do tempo.
Passo 5. Anime o logotipo usando camadas de formas.
Agora vamos passar para técnicas de animação mais interessantes usando camadas de formas. Camadas de forma são objetos que contêm informações de caminho, como pontos de ancoragem e linhas de conexão (semelhantes aos de programas vetoriais), e manipulá-los abre a porta para uma ampla gama de possibilidades de animação além Propriedades de transformação .
Como escolher a cor certa para o seu logotipo?
Primeiro vamos converter o logotipo em uma camada de forma. No painel Composição em camadas (as camadas criadas na etapa 3), selecione todas as suas camadas, clique com o botão direito e selecione " Crio" > " Crie formas a partir da camada vetorial" . Você verá que cada camada é duplicada com uma estrela próxima a ela - esta é uma camada de forma. Aninhado sob a camada de forma, você encontrará Propriedade de conteúdo além de Propriedade de transformação . Para a direita de Propriedades de conteúdo você também verá um botão " Adicionar" , o que permitirá selecionar ainda mais atributos para animar.
As camadas de forma contêm um botão Adicionar (à direita da propriedade Conteúdo) que permite adicionar todos os tipos de propriedades animadas, como caminhos de recorte.
Dimensionando um objeto no Adobe Illustrator
Trimagem
Para meu logotipo, usei uma animação bastante comum e útil usando a propriedade Trim Paths. Para fazer isso adicionei "Caminhos de Corte" usando o botão " Adicionar" às camadas de forma de cada letra, defina o quadro-chave do atributo End como 0% no início da linha do tempo e 100% após cerca de 1 segundo. Como você pode ver, o contorno das letras parece desenhado por uma mão invisível em tempo real.
Usar a propriedade Trim Paths permite animar linhas para que elas se desenhem em tempo real.
Além disso, eu queria adicionar alguma animação de destaque ao fundo. Como trabalho em preto e branco, escolhi um efeito de túnel em loop que lembra Twilight Zone. Para fazer isso, usei a ferramenta polígono no painel Ferramentas para desenhar uma forma no centro da minha composição, criando uma nova camada de forma.
Depois adicionei uma propriedade Repeater, centralizei a posição e aumentei o número de cópias. Isso duplica a forma, criando um túnel aparentemente interminável. Ajustar a escala aumenta o espaço entre cada cópia e alterar a rotação orienta as cópias em direções diferentes para maior interesse visual.
Finalmente, para apimentar tudo, criei um quadro-chave com um deslocamento de 0 no início da linha do tempo e depois configurei-o para um valor negativo na linha do tempo.
Usando uma camada de forma poligonal e a propriedade Repeater, consegui criar um fundo animado.
Você provavelmente já adivinhou que existem muitas opções para camadas de formas. É verdade: existem cursos online completos sobre o assunto na Internet e você deve reservar um tempo para experimentar, praticar e aprender.
Também não posso dizer qual estilo de animação combina com seu logotipo ou quais ferramentas específicas animações que você precisará para alcançar esse estilo. No entanto, posso lhe dar conselhos sobre como descobrir por si mesmo. Procure inspiração em outros logotipos animados, como seus concorrentes, marcas que você admira e/ou sites como Pinterest ou Dribbble - assim como você fez quando criou o logotipo originalmente.
Você descobrirá que quando começar a analisá-los usando seu novo conhecimento sobre como animar um logotipo, muitos deles serão baseados em simples manipulações com formas e transformações (mesmo aquelas que são claramente sobrepostas com efeitos estilizados avançados). Depois de encontrar alguns que você gosta, você pode trabalhar de trás para frente no After Effects para tentar fazer a engenharia reversa dessas animações para praticar.
Etapa 6: defina a hora.
Vamos falar sobre o tempo, que descreve o ritmo dos quadros da animação ao longo da animação. Você pode ver uma representação visual do tempo acessando o Editor de gráfico. Para fazer isso, clique no ícone do gráfico (denominado Editor de Gráfico quando você passa o mouse sobre ele) na parte superior do painel da linha do tempo e isso mudará a linha do tempo para um gráfico de linha.
Se você clicar em um dos atributos do quadro-chave, verá uma linha reta de um quadro-chave para o seguinte. No momento, como estávamos apenas enquadrando os pontos inicial e final, deixamos o After Effects para fazer o tempo. Sem direção, o After Effects move cada quadro da animação uniformemente, resultando em uma linha perfeitamente reta.
O editor gráfico mostra a temporização do quadro-chave conforme mostrado no gráfico de linhas.
No entanto, a mudança proposital no tempo é o que dá à animação uma sensação de realismo. Por exemplo, em uma animação de bola quicando, a bola se move mais lentamente no auge do salto e mais rápido à medida que se aproxima do solo devido ao impulso e à gravidade. Em outras palavras, ele não se move na mesma velocidade durante toda a animação e, se o fizesse, se destacaria como um robô.
As ferramentas Bezier, localizadas na parte inferior do editor gráfico, permitem ajustar a curvatura da linha do gráfico.
Converter quadros-chave em Bezier automático
O Editor de Gráfico permite ajustar o tempo de sua própria animação usando as chamadas alças de Bezier para transformar uma linha do gráfico em uma curva. No canto inferior direito do editor gráfico, você verá alguns ícones de pontos quadrados anexados a linhas – essas são ferramentas de Bezier.
Clique em um dos quadros-chave e passe o mouse sobre as ferramentas Bezier até encontrar aquele rotulado " Converter quadros-chave em Bezier automático" . Ao clicar aqui, você verá um marcador amarelo aparecer no gráfico. Arrastar esta alça fará com que a linha dobre e isso alterará o tempo da sua animação. Onde a curva for mais pronunciada, os quadros serão reproduzidos mais rapidamente, e onde a curva for mais suave, os quadros serão reproduzidos mais lentamente.
Uma curva mais nítida corresponde a uma sincronização mais rápida e uma curva mais suave corresponde a uma sincronização mais lenta.
Para realmente entender as nuances do ajuste do seu próprio tempo, é necessária experiência em animação, e é por isso que o ajuste manual das curvas de Bézier é um tópico mais avançado. Neste guia para iniciantes, recomendo usar a ferramenta Bezier Facilidade Fácil (que aplica uma curva automática ao quadro-chave selecionado) para todos os intervalos de tempo de animação. Você pode se inscrever Facilidade Fácil para um quadro-chave fora do editor de diagrama selecionando o quadro-chave e clicando com o botão direito.
Etapa 7: exporte seu logotipo.
Quando estiver pronto para exportar seu logotipo animado finalizado, selecione " Arquivo" > " Exportar" > " Adicione o Adobe Media Encoder à fila" . Exportações do After Effects por padrão arquivo no formato mp4, que é adequado para vídeo. Como queremos criar um arquivo de imagem compartilhável do nosso logotipo, iremos exportá-lo como um GIF animado. Na janela do Media Encoder, clique na seta ao lado da linha de texto azul destacada sob a palavra "Formato" e selecione " Gif Animado" . Você também pode definir a pasta de destino para o arquivo finalizado clicando no texto azul abaixo das palavras “Arquivo de saída”.
Para exportar um arquivo, vá para Arquivo > Exportar > Adicionar à fila do Adobe Media Encoder e selecione Gif animado na lista suspensa na coluna Formato.
Clique duas vezes no texto azul destacado abaixo da predefinição para abrir a janela Opções de exportação. Existem algumas opções que você deseja observar para reduzir o tamanho do arquivo: Qualidade (configuro para 20), Taxa de quadros (configuro para 10, embora taxas de quadros mais altas (fps) sejam recomendadas para vídeo) e Duração, que é a barra azul na visualização (cortei a minha para 4 segundos). Selecione Ok para fechar esta janela.
Quando terminar, selecione o ícone verde Play no canto superior direito do Media Encoder e seu arquivo será exibido na pasta de destino escolhida. É isso aí: animação do logotipo finalizada!
Dê vida à sua marca com animação de logotipo.
-
A animação de logotipos é mais do que apenas uma tendência popular que as marcas são forçadas a seguir. Há também uma magia inegável na animação de logotipos e é uma ótima maneira de criar um momento de prazer visual para todos que interagem com sua marca. E, felizmente, o software de animação evoluiu para que quase qualquer pessoa, independentemente da habilidade, possa adicionar um pouco dessa magia ao seu próprio logotipo.
Dito isso, embora este tutorial tenha como objetivo apresentar os fundamentos da animação de logotipo, são necessárias muitas tentativas e erros, prática e experimentação para obter algo além da animação básica. Se você deseja uma animação de logotipo verdadeiramente especial, vale a pena investir em um animador de logotipo profissional.
Deixe um comentário