# Modelos de motion graphics: designs animados sem After Effects

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

A maioria das marcas precisa de designs animados todas as semanas e de um motion designer nunca. Aqui fica o que são modelos de motion graphics, que tipo te serve e como fazer um parecer teu e não de toda a gente.

## The short version

- Os modelos de motion graphics são designs já animados em que mudas as palavras, as cores e os conteúdos enquanto o movimento fica feito por ti.
- Os modelos para After Effects e Premiere Pro precisam desse software, enquanto as ferramentas de design no navegador oferecem modelos animados que editas como um design normal.
- Um bom modelo de movimento tem poucas partes em movimento, texto editável, tamanhos para cada plataforma e um loop que fecha sem costura.
- Os modelos parecem genéricos quando as cores, a tipografia e o fundo ficam como vieram, por isso substitui os três antes de publicar.
- Loops curtos de 5 a 15 segundos servem para a maioria das publicações animadas e dos stories.

Os **modelos de motion graphics** são designs que já vêm animados: mudas as palavras, as cores, as fotografias ou o logótipo, e o movimento fica feito por ti. Existem para software de vídeo profissional como o After Effects e o Premiere Pro, mas não precisas de nenhum dos dois. As ferramentas de design no navegador oferecem modelos animados que editas como qualquer outro design e depois exportas em vídeo ou GIF. O truque é escolher modelos com movimento simples e calmo e substituir o suficiente para que o resultado pareça a tua marca.

## Os tipos de modelos de motion graphics

“Modelo de movimento” abrange ficheiros muito diferentes. Qual queres depende do software que já usas e de quanto controlo precisas.

| Tipo | Funciona em | Bom para | Curva de aprendizagem |
| --- | --- | --- | --- |
| Projeto de After Effects | Adobe After Effects | Títulos complexos, revelações de logótipo, controlo total | Íngreme |
| MOGRT (.mogrt) | Premiere Pro, com controlos definidos no After Effects | Terços inferiores e títulos dentro de edições de vídeo | Moderada |
| Modelo do Apple Motion | Final Cut Pro e Motion | Títulos e transições para editores em Mac | Moderada |
| Animação Lottie (JSON) | Sites e apps, através de um leitor | Pequenas animações de interface e ícones | Precisa de programador |
| Modelo de design animado | Ferramentas de design no navegador | Publicações, stories, anúncios, loops para ecrãs | Suave |

Se fazes publicações, stories e anúncios simples, um modelo de design animado no navegador costuma ser tudo o que precisas.

## Motion graphics sem After Effects

O After Effects foi feito para keyframes, expressões e composição, o que é muito mais do que uma publicação animada de saldos precisa. Na maior parte do trabalho de redes sociais e marketing, três tipos de movimento fazem tudo, e as boas ferramentas de navegador oferecem os três sem um único keyframe.

- **Movimento de fundo.** O campo de cor desloca-se, flui ou respira devagar por trás de palavras paradas. Calmo, premium e fácil de pôr em loop.
- **Entradas de texto.** As palavras sobem para o lugar, saltam, varrem ou escrevem-se letra a letra, e depois ficam paradas o tempo suficiente para se ler.
- **Sequências de páginas.** Vários quadros passam à vez com uma transição entre eles, como um carrossel em movimento.

A regra que mantém os três com aspeto profissional: move uma coisa de cada vez e deixa as palavras assentar antes de acontecer mais alguma coisa. Os [princípios de motion design](https://gradiently.design/pt-pt/guide/motion-design-principles) e a [suavização](https://gradiently.design/pt-pt/guide/easing) explicam porque é que o movimento calmo transmite qualidade.

## O que faz um bom modelo animado

### Descarta

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

### Escolhe

- Uma ou duas partes em movimento, o resto parado
- As palavras chegam e depois ficam dois segundos ou mais
- Versões para story, publicação e quadrado
- Um loop que fecha sem costura visível
- Fica bem com as tuas palavras, não só com o exemplo

Testa um modelo com o teu título real mais comprido antes de te decidires. Muitos modelos ficam lindos com uma frase de exemplo de três palavras e desfazem-se com a tua.

## Modelos que vale a pena ter prontos

Um pequeno conjunto de modelos animados cobre quase tudo o que uma empresa publica. Faz cada um uma vez na tua marca, guarda-o, e cada versão futura é uma edição de dois minutos.

Um story vertical animado de contagem decrescente com o texto Faltam 3 dias para um mercado de primavera, sobre um gradiente em movimento

Um story de contagem decrescente: o número muda todos os dias, o fundo e o layout nunca.

Uma publicação vertical de feed com o texto Saldos de verão, só este fim de semana, com o fundo de gradiente a deslocar-se devagar

Uma publicação de saldos em que as palavras sobem sobre um fundo à deriva e depois ficam.

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

## Como fazer um modelo parecer a tua marca

A forma mais rápida de reconhecer um modelo é que ainda veste as cores do modelo. Substitui estes elementos, por esta ordem, e passa a ser teu.

1. **Troca o fundo** O fundo enche a maior parte do quadro, por isso faz a maior parte do trabalho de marca. Usa o teu próprio campo de cor ou gradiente, não o do modelo.
2. **Troca a tipografia** Compõe os títulos na fonte de título da tua marca e o texto pequeno na fonte de texto.
3. **Corta o que não precisas** Apaga formas decorativas, autocolantes e caixas de texto extra. Menos elementos, a mover-se menos, parecem mais caros.
4. **Abranda o movimento** Se o modelo oferecer um ritmo, escolhe o mais lento. Os loops rápidos parecem baratos quando se repetem.
5. **Faz todos os tamanhos a partir de um design** Cria as versões de story, feed e quadrado a partir do mesmo ficheiro para que mantenham um visual idêntico.

- 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 para começar. Escolhas o que escolheres, usa o mesmo em todos os modelos para que o conjunto se leia como uma só marca.

## Exportar modelos animados

Exporta MP4 para Instagram, TikTok, LinkedIn e qualquer lugar que reproduza vídeo; usa GIF só onde o vídeo não reproduz, como em alguns clientes de email. Mantém os loops entre 5 e 15 segundos para publicações e stories e confirma que o último quadro volta ao primeiro. O [GIF vs MP4](https://gradiently.design/pt-pt/guide/gif-vs-mp4) explica os prós e contras, e as [publicações animadas no Instagram](https://gradiently.design/pt-pt/guide/animated-social-posts) tratam da publicação.

## Modelos animados no Gradiently

Os modelos do Gradiently (publicações, stories, cartazes, ementas, cartões e fundos de ecrã) usam o teu Mark como fundo, por isso a parte em movimento é um gradiente ou material vivo que, depois de reservado, é só teu, e o modelo de mais ninguém fica igual. As palavras podem subir, saltar, varrer ou escrever-se, o Mark pode deslocar-se, fluir, respirar ou rodopiar, e com o Pro exportas 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 modelos faz parte do Pro.

## FAQ

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

Designs já animados em que mudas as palavras, as cores e os conteúdos enquanto a animação já está feita. Existem para After Effects, Premiere Pro, Final Cut Pro e ferramentas de design no navegador.

### Posso fazer motion graphics sem After Effects?

Sim. As ferramentas de design no navegador oferecem modelos 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 ficheiro MOGRT?

Um ficheiro de Motion Graphics Template para o Adobe Premiere Pro. Costuma ser criado no After Effects e expõe controlos simples, como texto e cor, para editar dentro do Premiere.

### Quanto tempo deve durar uma publicação animada?

De cinco a quinze segundos servem para a maioria das publicações e stories. Deixa as palavras paradas pelo menos dois segundos para que as pessoas as consigam ler.

### Como evito que um modelo de movimento pareça genérico?

Substitui o fundo, as fontes e as cores pelos teus, apaga os extras decorativos e abranda o movimento.