Como animar um logo a partir de um PNG ou imagem feita com IA

Dá para animar um logo plano em PNG ou JPG?

Sim. Um PNG ou JPG é só um conjunto de pixels, mas há duas formas confiáveis de dar vida a ele.

1. Reconstrua em vetor. Vetorize o logo em formas em um editor vetorial (ou use uma ferramenta de vetorização automática e limpe o resultado) e depois separe-o em partes: o símbolo, cada letra, qualquer acento. Assim cada parte pode se mover sozinha: as letras podem cair uma a uma, o símbolo pode girar ou se desenhar na tela. Esse é o caminho clássico do motion design e funciona melhor quando o logo já é plano, com cores sólidas.

2. Mantenha os pixels e deforme-os. Recorte o logo do fundo, coloque uma malha sobre ele e vincule a malha a alguns bones. Ao mover os bones, a arte original é comprimida, esticada, inclinada e curvada. Nada é redesenhado, então o logo fica exatamente igual ao arquivo de onde você partiu.

Um jeito rápido de decidir:

• Cores sólidas, bordas limpas, o logo existe em SVG em algum lugar: vetor.
• Gradientes, brilhos, texturas, sombreamento 3D ou uma imagem gerada por IA: mantenha os pixels.
• Logo composto principalmente de texto: vetor, para que as letras fiquem nítidas e possam ser animadas individualmente.

Antes de seguir qualquer caminho, encontre a maior versão do arquivo que você tiver. A animação evidencia desfoque e artefatos de compressão que passam despercebidos em uma imagem estática.

Vetorizar o logo ou manter os pixels?

Cada abordagem tem seus pontos fortes. Esta tabela resume as vantagens e desvantagens:

Vetorizar um logo detalhado é onde a maioria dos projetos dá errado. A vetorização automática transforma um gradiente suave em dezenas de faixas de cor, e redesenhar à mão uma renderização 3D raramente fica igual ao original. Se a equipe de marca aprovou uma imagem específica, manter os pixels dela evita reabrir essa aprovação.

A deformação de malha tem seu próprio limite: ela só consegue mover o que está visível. Não dá para girar um logo e mostrar a parte de trás ou revelar um lado escondido. O movimento fica no plano da imagem: dobras, quiques, inclinações e achatamentos.

Como animar um logo gerado por IA ou em 3D?

Logos gerados por IA costumam ser imagens rasterizadas com iluminação, gradientes e sombras suaves já embutidos. Eles não vêm em camadas, e o "texto" muitas vezes são pixels pintados, não letras de verdade. Por isso, manter os pixels é o caminho natural.

1. Remova o fundo. A maioria das imagens de IA fica sobre um fundo colorido ou com textura. Recorte o logo com um canal alfa limpo, sem halo do fundo antigo nas bordas.
2. Encontre as partes móveis. Se o logo tem rosto ou olhos, localize-os para que possam piscar. Se ele tem um topo e uma base bem definidos, isso determina onde ele achata e estica.
3. Faça o rig com poucos bones. Uma coluna de dois a quatro bones (ossos) basta para pulos, inclinações e dobras. Mais bones dão controle mais fino, mas fica mais difícil manter o movimento elegante.
4. Proteja o texto. Mantenha as letras numa região rígida da malha para que se movam como um bloco, em vez de deformar e ficar ilegíveis.
5. Mantenha o sombreamento. Como os pixels são movidos e não redesenhados, os brilhos e as sombras acompanham a forma.

É assim que funciona o modo Motion do Charmotion. Logos com 3D, degradês, texto ou arte JPG gerada com IA têm o fundo removido, os olhos localizados para as piscadas e os próprios pixels da arte deformados por um rig de bones. Nada é redesenhado nem reestilizado. Os conjuntos, com Rive, WebM/MOV transparentes, MP4, GIF e um vídeo de abertura 9:16, exigem um plano pago. Se você precisa de um logo que se transforma, gira em 3D ou se desenha letra por letra, um motion designer trabalhando com arquivos vetoriais é a melhor escolha.

O que faz uma boa animação de logo?

Uma animação de logo deve deixar a marca mais clara do que antes, não só mais agitada. Checklist:

• Começa e termina no logo real. A pose de repouso deve ser a arte aprovada, sem alterações, para que um frame pausado ou o último frame sempre fique correto.
• Continua legível. Se o nome fica ilegível no meio do movimento por mais de um instante, a animação está trabalhando contra o logo.
• Tem uma única ideia. Um pulo, um quique, um desenho na tela, uma piscada. Combinar cinco efeitos vira ruído.
• Combina com o tom da marca. Um banco pode acenar com a cabeça; um estúdio de games pode quicar.
• Não pisca intensamente. O WCAG 2.3.1 limita qualquer conteúdo a três flashes em qualquer período de um segundo (W3C). Evite brilhos estroboscópicos e trocas rápidas de cor.
• Tem uma alternativa estática. Quando a pessoa prefere movimento reduzido, mostre o logo estático (MDN).

Planeje uma pequena família de movimentos em vez de um só. Uma revelação para intros, um loop idle (loop de repouso) suave para a seção hero, um quique de sucesso para confirmações e um estado de repouso calmo cobrem a maioria dos lugares onde um logo aparece.

Qual deve ser a duração de uma animação de logo?

Depende de onde o logo é exibido. A regra é a mesma em todo lugar: quanto menor a espera que ele causa, melhor.

Loops em páginas web exigem atenção extra. Pelo WCAG 2.2 SC 2.2.2, um movimento que começa automaticamente, dura mais de cinco segundos e aparece junto com outro conteúdo precisa de uma forma de pausar, parar ou ocultar. Um logo na seção hero que faz alguns loops e depois para evita o problema e mantém a atenção no seu título.

Para aberturas de apps especificamente, veja o guia de animação de abertura e splash screen.

De quais formatos você precisa para web, apps e vídeo?

Nenhum arquivo sozinho cobre todos os canais. Um kit completo de animação de logo costuma incluir:

O Safari reproduz WebM, mas descarta o canal alfa do VP9, então um WebM com fundo transparente aparece com fundo opaco nele (Can I use). Por isso você precisa dos dois arquivos transparentes; veja o guia de logo animado com fundo transparente.

GIF é um formato final ruim para logos: suporta no máximo 256 cores e só transparência total ou nenhuma, então os gradientes ficam com faixas e as bordas serrilhadas (MDN). Vídeo também é bem menor; no exemplo do web.dev, um GIF de 3,7 MB virou um MP4 de 551 KB (web.dev). Saiba mais em GIF vs WebM vs MP4 vs Rive.

Como adicionar um logo animado à seção hero do meu site?

Para um loop de logo com fundo transparente, use um vídeo inline, sem som, com duas fontes. O HEVC precisa vir primeiro, porque o Safari reproduz VP9, mas não o canal alfa dele (Jake Archibald):

<video autoplay muted loop playsinline
       poster="/img/logo-still.png" width="480" height="480">
  <source src="/img/logo.mov"
          type='video/quicktime; codecs="hvc1.1.6.H120.b0"'>
  <source src="/img/logo.webm"
          type='video/webm; codecs="vp09.00.41.08"'>
</video>

Observações sobre esse código:

• muted e playsinline são o que permitem a reprodução automática, inclusive no iPhone. Se play() for rejeitado, o pôster continua visível (MDN).
• O pôster deve ser a pose de repouso do logo, para que a seção hero pareça pronta antes de o vídeo carregar.
• Defina width e height para evitar mudanças de layout.
• Com prefers-reduced-motion: reduce, troque o vídeo pela imagem estática.

Se o logo precisa reagir, por exemplo quicando ao passar o mouse ou comemorando após um cadastro, use um arquivo Rive e troque os estados pelo código. Veja vídeo com fundo transparente em um site e Rive em React e Next.js.

Como animar um logo a partir de um PNG

1. Consiga o melhor arquivo original. Encontre o maior PNG ou JPG do logo, ou o SVG original, se existir.
2. Escolha entre vetor ou pixels. Vetorize logos planos e divida-os em partes; mantenha os pixels originais para logos 3D, com gradiente ou gerados por IA.
3. Remova o fundo. Recorte o logo com um canal alfa limpo, sem halo do fundo antigo.
4. Faça o rig e anime. Anime as partes vetoriais diretamente ou vincule uma malha a alguns bones para achatar, inclinar e fazer quicar uma arte raster. Mantenha o texto em uma região rígida.
5. Termine na pose de repouso. Faça cada animação começar e terminar no logo aprovado e adicione uma versão estática para movimento reduzido.
6. Exporte para cada canal. Exporte Rive para uso interativo na web, MOV HEVC e WebM VP9 com alfa para loops com fundo transparente, e MP4 para redes sociais e vídeo.

Perguntas frequentes

Dá para animar um logo sem o arquivo vetorial original?

Sim. Você pode vetorizar o PNG ou manter os pixels e deformá-los com uma malha e bones. Manter os pixels costuma ser melhor para logos detalhados, porque a vetorização perde degradês e sombreamento. Use o arquivo com a maior resolução que você tiver.

Como animar um logo gerado por IA?

Remova o fundo e anime os pixels originais com um rig de malha e bones, em vez de redesenhar o logo. Assim você preserva a iluminação e o sombreamento que a IA gerou. Mantenha qualquer texto em uma parte rígida da malha para que ele continue legível enquanto o resto se curva.

Qual é o melhor formato para um logo animado em um site?

Para um loop com fundo transparente, use vídeo com duas fontes: MOV HEVC com alfa para o Safari e, depois, WebM VP9 com alfa para os outros navegadores. Para um logo que reage a hover ou cliques, use um arquivo Rive. Evite GIF, que cria faixas nos degradês e deixa as bordas serrilhadas.

Por que meu logo em WebM transparente aparece com fundo preto no Safari?

O Safari reproduz WebM, mas descarta o canal alfa do VP9, então a transparência se perde. Adicione um MOV HEVC com alfa como primeira fonte no seu elemento de vídeo; o Safari vai escolhê-lo, e Chrome, Edge e Firefox vão usar o WebM como alternativa.

Respostas rápidas deste guia

• A IA consegue animar meu logo sem mudar o design?
• Posso transformar meu logo em um personagem animado?
• Posso animar um logo gerado por IA?
• Qual formato usar para um logo animado em um site?

Fontes

• Video with alpha transparency on the web, Jake Archibald
• WebM video format, Can I use
• Image file type and format guide, MDN Web Docs
• Replace animated GIFs with video for faster page loads, web.dev
• Splash screens, Android Developers
• Understanding SC 2.3.1: Three Flashes or Below Threshold, W3C WAI
• prefers-reduced-motion, MDN Web Docs
• Autoplay guide for media and Web Audio APIs, MDN Web Docs