# Templates de motion graphics: designs em movimento sem After Effects

[Canonical HTML page](https://gradiently.design/pt-br/guide/motion-graphics-templates)

A maioria das marcas precisa de designs em movimento toda semana e de um motion designer nunca. Veja o que são templates de motion graphics, qual tipo combina com você e como fazer um deles ter a sua cara, e não a de todo mundo.

## The short version

- Templates de motion graphics são designs já animados em que você troca as palavras, as cores e as mídias, e o movimento já vem pronto.
- Templates para After Effects e Premiere Pro precisam desses programas, enquanto ferramentas de design no navegador oferecem templates animados que você edita como um design comum.
- Um bom template de movimento tem poucas partes móveis, texto editável, tamanhos para cada plataforma e um loop que emenda de forma limpa.
- Templates parecem genéricos quando as cores, a fonte e o fundo continuam como vieram, então troque os três antes de publicar.
- Loops curtos, de 5 a 15 segundos, combinam com a maioria dos posts e stories animados.

**Templates de motion graphics** são designs que já vêm animados: você troca as palavras, as cores, as fotos ou o logo, e o movimento já está pronto. Existem para programas profissionais de vídeo, como After Effects e Premiere Pro, mas você não precisa de nenhum deles. Ferramentas de design no navegador oferecem templates animados que você edita como qualquer outro design e depois exporta como vídeo ou GIF. O segredo é escolher templates com movimento simples e calmo e trocar o suficiente deles para que o resultado pareça a sua marca.

## Os tipos de templates de motion graphics

“Template de movimento” cobre arquivos muito diferentes. O que você quer depende do programa que já usa e de quanto controle precisa.

| Tipo | Funciona em | Bom para | Curva de aprendizado |
| --- | --- | --- | --- |
| Projeto do After Effects | Adobe After Effects | Títulos complexos, revelações de logo, controle total | Íngreme |
| MOGRT (.mogrt) | Premiere Pro, com controles criados no After Effects | Terços inferiores e títulos dentro de edições de vídeo | Moderada |
| Template do Apple Motion | Final Cut Pro e Motion | Títulos e transições para editores no Mac | Moderada |
| Animação Lottie (JSON) | Sites e apps, por meio de um player | Pequenas animações de interface e ícones | Exige desenvolvedor |
| Template de design animado | Ferramentas de design no navegador | Posts, stories, anúncios, loops de sinalização | Suave |

Se você faz posts, stories e anúncios simples, um template de design animado no navegador costuma ser tudo de que precisa.

## Motion graphics sem After Effects

O After Effects é feito para keyframes, expressões e composição, que é muito mais do que um post de promoção animado exige. Na maior parte do trabalho de redes sociais e marketing, três tipos de movimento fazem todo o serviço, e boas ferramentas no navegador oferecem os três sem um único keyframe.

- **Movimento de fundo.** O campo de cor flutua, flui ou respira devagar atrás de palavras paradas. Calmo, premium e fácil de repetir em loop.
- **Entradas de texto.** As palavras sobem até o lugar, surgem com um pop, entram em wipe ou são digitadas letra por letra, e depois ficam paradas o bastante para serem lidas.
- **Sequências de páginas.** Vários quadros passam em ordem, com uma transição entre eles, como um carrossel em movimento.

A regra que mantém os três com cara profissional: mova uma coisa por vez e deixe as palavras assentarem antes de qualquer outra coisa acontecer. [Princípios de motion design](https://gradiently.design/pt-br/guide/motion-design-principles) e [easing](https://gradiently.design/pt-br/guide/easing) explicam por que o movimento calmo parece qualidade.

## O que faz um bom template animado

### Descarte

- Tudo se move ao mesmo tempo
- O texto sai animado antes de você conseguir ler
- Preso a um só tamanho
- Um salto onde o loop recomeça
- Efeitos que só funcionam com a foto de demonstração

### Escolha

- Uma ou duas partes móveis, o resto parado
- As palavras chegam e depois ficam por dois segundos ou mais
- Versões para story, post e quadrado
- Um loop que emenda sem costura visível
- Fica bom com as suas palavras, não só com o exemplo

Teste um template com o seu título real mais longo antes de se comprometer. Muitos templates ficam lindos com um exemplo de três palavras e desmoronam com o seu.

## Templates que vale a pena deixar prontos

Um pequeno conjunto de templates animados cobre quase tudo o que um negócio publica. Faça cada um uma vez na sua marca, salve, e toda versão futura é uma edição de dois minutos.

Story vertical animado de contagem regressiva com o texto Faltam 3 dias para uma feira de primavera, sobre um degradê em movimento

Um story de contagem regressiva: o número muda a cada dia, o fundo e o layout nunca.

Post vertical de feed com o texto Liquidação de verão, só neste fim de semana, com o fundo em degradê flutuando devagar

Um post de promoção em que as palavras sobem sobre um fundo à deriva e depois ficam.

- **Anúncio:** produto novo, horário novo, contratação nova. Veja [post de anúncio](https://gradiently.design/pt-br/guide/announcement-post-design).
- **Contagem regressiva:** lançamentos, eventos, prazos. Veja [post de contagem regressiva](https://gradiently.design/pt-br/guide/countdown-post-design).
- **Citação ou depoimento:** as palavras de um cliente, digitadas linha por linha.
- **Promoção ou oferta:** o título e as datas, nada mais.
- **Dica ou passo a passo:** uma sequência curta de páginas, um passo por página.
- **Evento:** data, local, uma linha sobre o porquê.

## Como fazer um template ter a cara da sua marca

O jeito mais rápido de reconhecer um template é que ele ainda veste as cores do template. Troque estas, nesta ordem, e ele passa a ser seu.

1. **Troque o fundo** O fundo ocupa a maior parte do quadro, então faz a maior parte do trabalho de marca. Use o seu próprio campo de cor ou degradê, não o do template.
2. **Troque a fonte** Defina os títulos na fonte de título da sua marca e o texto pequeno na fonte de corpo.
3. **Corte o que não precisa** Apague formas decorativas, adesivos e caixas de texto extras. Menos elementos, movendo-se menos, parecem mais caros.
4. **Desacelere o movimento** Se o template oferece um ritmo, escolha o mais lento. Loops rápidos parecem baratos quando se repetem.
5. **Faça todos os tamanhos a partir de um design** Crie as versões de story, feed e quadrado a partir do mesmo arquivo para que fiquem idênticas no visual.

- Rosa para um lançamento: `radial-gradient(circle at 20% 20%, #fb7185 0%, #be123c 40%, #2a0612 85%)`
- Mar profundo para tecnologia: `linear-gradient(200deg, #0f172a 0%, #0e7490 60%, #67e8f9 100%)`
- Creme quente para comida: `radial-gradient(circle at 75% 75%, #fcd34d 0%, #fef3c7 45%, #fffbeb 90%)`

Três fundos de partida. Qualquer que você escolha, use o mesmo em todos os templates para que o conjunto pareça uma só marca.

## Exportando templates animados

Exporte em MP4 para Instagram, TikTok, LinkedIn e qualquer lugar que reproduza vídeo; use GIF só onde o vídeo não toca, como em alguns clientes de e-mail. Mantenha os loops entre 5 e 15 segundos para posts e stories e confira se o último quadro flui de volta ao primeiro. [GIF vs MP4](https://gradiently.design/pt-br/guide/gif-vs-mp4) explica as diferenças, e [posts animados no Instagram](https://gradiently.design/pt-br/guide/animated-social-posts) trata da publicação.

## Templates animados na Gradiently

Os templates da Gradiently (posts, stories, cartazes, cardápios, cartões e papéis de parede) usam o seu Mark como fundo, então a parte que se move é um degradê ou material vivo que é só seu depois de reservado, e o template de mais ninguém fica igual. As palavras podem subir, surgir, entrar em wipe ou ser digitadas, o Mark pode flutuar, fluir, respirar ou girar e, com o Pro, você exporta loops contínuos de 5 a 30 segundos em MP4, WebM ou GIF, com todos os tamanhos feitos a partir de um design. A biblioteca completa de templates faz parte do Pro.

## FAQ

### O que são templates de motion graphics?

Designs já animados em que você troca as palavras, as cores e as mídias, com a animação pronta. Existem para After Effects, Premiere Pro, Final Cut Pro e ferramentas de design no navegador.

### Posso fazer motion graphics sem After Effects?

Pode. Ferramentas de design no navegador oferecem templates animados com movimento de fundo, entradas de texto e transições de página, exportados em MP4 ou GIF, sem keyframes para aprender.

### O que é um arquivo MOGRT?

Um arquivo de Motion Graphics Template para o Adobe Premiere Pro. Costuma ser criado no After Effects e expõe controles simples, como texto e cor, para edição dentro do Premiere.

### Quanto tempo deve durar um post animado para redes sociais?

De cinco a quinze segundos combinam com a maioria dos posts e stories. Deixe as palavras paradas por pelo menos dois segundos para que as pessoas possam lê-las.

### Como evitar que um template de movimento pareça genérico?

Troque o fundo, as fontes e as cores pelos seus, apague os extras decorativos e desacelere o movimento.