# Mallar för rörlig grafik: rörliga designer utan After Effects

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

De flesta varumärken behöver rörliga designer varje vecka och en motion designer aldrig. Här är vad mallar för rörlig grafik är, vilken sort som passar dig och hur du får en att se ut som din i stället för allas.

## The short version

- Mallar för rörlig grafik är färdiganimerade designer där du ändrar ord, färger och media medan rörelsen redan är gjord åt dig.
- Mallar för After Effects och Premiere Pro kräver den programvaran, medan webbläsarbaserade designverktyg erbjuder animerade mallar som du redigerar som en vanlig design.
- En bra rörelsemall har få rörliga delar, redigerbar text, storlekar för varje plattform och en loop som sluter sig rent.
- Mallar ser generiska ut när färger, typografi och bakgrund förblir som de var, så byt alla tre innan du postar.
- Korta loopar på 5 till 15 sekunder passar de flesta animerade inlägg och stories i sociala medier.

**Mallar för rörlig grafik** är designer som redan är animerade: du ändrar orden, färgerna, fotona eller logotypen, och rörelsen är redan gjord åt dig. De finns för professionell videoprogramvara som After Effects och Premiere Pro, men du behöver ingen av dem. Webbläsarbaserade designverktyg erbjuder animerade mallar som du redigerar som vilken design som helst och sedan exporterar som video eller GIF. Knepet är att välja mallar med enkel, lugn rörelse och byta ut så mycket av dem att resultatet ser ut som ditt varumärke.

## Sorter av mallar för rörlig grafik

”Rörelsemall” täcker mycket olika filer. Vilken du vill ha beror på vilken programvara du redan använder och hur mycket kontroll du behöver.

| Sort | Fungerar i | Bra för | Inlärningskurva |
| --- | --- | --- | --- |
| After Effects-projekt | Adobe After Effects | Komplexa titlar, logotypavslöjanden, full kontroll | Brant |
| MOGRT (.mogrt) | Premiere Pro, med kontroller uppsatta i After Effects | Namnskyltar och titlar i videoklipp | Måttlig |
| Apple Motion-mall | Final Cut Pro och Motion | Titlar och övergångar för Mac-redigerare | Måttlig |
| Lottie-animation (JSON) | Webbplatser och appar, via en spelare | Små gränssnittsanimationer och ikoner | Utvecklare behövs |
| Animerad designmall | Webbläsarbaserade designverktyg | Inlägg, stories, annonser, skyltloopar | Mild |

Gör du inlägg, stories och enkla annonser räcker oftast en animerad designmall i webbläsaren.

## Rörlig grafik utan After Effects

After Effects är byggt för nyckelbilder, uttryck och sammansättning, vilket är långt mer än ett animerat reainlägg behöver. För det mesta av arbetet i sociala medier och marknadsföring gör tre slags rörelse hela jobbet, och bra webbläsarverktyg erbjuder alla tre utan en enda nyckelbild.

- **Bakgrundsrörelse.** Färgfältet driver, flödar eller andas långsamt bakom stillastående ord. Lugnt, exklusivt och lätt att loopa.
- **Textentréer.** Ord stiger på plats, poppar, sveps in eller skrivs ut bokstav för bokstav, och står sedan stilla länge nog för att läsas.
- **Sidsekvenser.** Flera bilder spelas upp i tur och ordning med en övergång mellan dem, som en rörlig karusell.

Regeln som håller alla tre professionella: låt en sak röra sig i taget och låt orden sätta sig innan något annat händer. [Principer för rörelsedesign](https://gradiently.design/sv/guide/motion-design-principles) och [easing](https://gradiently.design/sv/guide/easing) förklarar varför lugn rörelse läses som kvalitet.

## Vad som gör en bra animerad mall

### Hoppa över den

- Allt rör sig på en gång
- Texten animeras bort innan du hinner läsa
- Låst till en storlek
- Ett hopp där loopen startar om
- Effekter som bara fungerar med demofotot

### Välj den

- En eller två rörliga delar, resten stilla
- Orden kommer in och står sedan kvar i två sekunder eller mer
- Versioner för story, inlägg och kvadrat
- En loop som sluter sig utan synlig söm
- Ser bra ut med dina ord, inte bara exemplet

Testa en mall med din verkliga, längsta rubrik innan du bestämmer dig. Många mallar ser fina ut med en exempelrad på tre ord och faller isär med din.

## Mallar värda att ha redo

En liten uppsättning animerade mallar täcker det mesta ett företag postar. Gör var och en en gång i ditt varumärke, spara den, och varje framtida version är en redigering på två minuter.

En stående animerad nedräkningsstory med texten 3 dagar kvar till en vårmarknad, på en rörlig gradient

En nedräkningsstory: siffran ändras varje dag, bakgrunden och layouten aldrig.

Ett stående flödesinlägg med texten Sommarrea, bara den här helgen, med gradientbakgrunden långsamt drivande

Ett reainlägg där orden stiger in över en drivande bakgrund och sedan står kvar.

- **Tillkännagivande:** ny produkt, nya öppettider, ny medarbetare. Se [tillkännagivandeinlägg](https://gradiently.design/sv/guide/announcement-post-design).
- **Nedräkning:** lanseringar, event, deadlines. Se [nedräkningsinlägg](https://gradiently.design/sv/guide/countdown-post-design).
- **Citat eller omdöme:** en kunds ord, utskrivna rad för rad.
- **Rea eller erbjudande:** rubriken och datumen, inget annat.
- **Tips eller guide:** en kort sidsekvens, ett steg per sida.
- **Event:** datum, plats, en rad om varför.

## Så får du en mall att se ut som ditt varumärke

Det snabbaste sättet att se att något är en mall är att den fortfarande har mallens färger. Byt dessa, i den här ordningen, så blir den din.

1. **Byt bakgrunden** Bakgrunden fyller det mesta av bilden, så den gör det mesta av varumärkesjobbet. Använd ditt eget färgfält eller din egen gradient, inte mallens.
2. **Byt typografin** Sätt rubriker i varumärkets rubriktypsnitt och den lilla texten i dess brödtypsnitt.
3. **Ta bort det du inte behöver** Radera dekorativa former, klistermärken och extra textrutor. Färre element, som rör sig mindre, ser dyrare ut.
4. **Sänk tempot** Om mallen erbjuder ett tempo, välj det långsammare. Snabba loopar känns billiga i repris.
5. **Gör alla storlekar av en design** Bygg story-, flödes- och kvadratversionerna av samma fil så att de förblir identiska i utseende.

- Ros för en lansering: `radial-gradient(circle at 20% 20%, #fb7185 0%, #be123c 40%, #2a0612 85%)`
- Djuphav för tech: `linear-gradient(200deg, #0f172a 0%, #0e7490 60%, #67e8f9 100%)`
- Varm kräm för mat: `radial-gradient(circle at 75% 75%, #fcd34d 0%, #fef3c7 45%, #fffbeb 90%)`

Tre bottnar att utgå från. Vilken du än väljer, använd samma i varje mall så att uppsättningen läses som ett varumärke.

## Att exportera animerade mallar

Exportera MP4 för Instagram, TikTok, LinkedIn och överallt där video spelas; använd GIF bara där video inte spelas, som i vissa e-postprogram. Håll loopar mellan 5 och 15 sekunder för inlägg och stories och kontrollera att sista bilden flyter tillbaka in i den första. [GIF eller MP4](https://gradiently.design/sv/guide/gif-vs-mp4) förklarar avvägningarna, och [animerade Instagram-inlägg](https://gradiently.design/sv/guide/animated-social-posts) tar upp publiceringen.

## Animerade mallar i Gradiently

Gradiently-mallar (inlägg, stories, affischer, menyer, kort och bakgrundsbilder) tar din Mark som bakgrund, så den rörliga delen är en levande gradient eller ett material som är bara ditt när du har säkrat det, och ingen annans mall ser likadan ut. Ord kan stiga, poppa, svepas eller skrivas in, Marken kan driva, flöda, andas eller virvla, och med Pro exporterar du sömlösa loopar på 5 till 30 sekunder som MP4, WebM eller GIF, med alla storlekar gjorda av en design. Hela mallbiblioteket ingår i Pro.

## FAQ

### Vad är mallar för rörlig grafik?

Färdiganimerade designer där du ändrar orden, färgerna och mediet medan animationen redan är byggd. De finns för After Effects, Premiere Pro, Final Cut Pro och webbläsarbaserade designverktyg.

### Kan jag göra rörlig grafik utan After Effects?

Ja. Webbläsarbaserade designverktyg erbjuder animerade mallar med bakgrundsrörelse, textentréer och sidövergångar, exporterade som MP4 eller GIF, utan nyckelbilder att lära sig.

### Vad är en MOGRT-fil?

En Motion Graphics Template-fil för Adobe Premiere Pro. Den byggs oftast i After Effects och visar enkla kontroller, som text och färg, för redigering inne i Premiere.

### Hur långt ska ett animerat inlägg i sociala medier vara?

Fem till femton sekunder passar de flesta inlägg och stories. Låt orden stå stilla i minst två sekunder så att folk hinner läsa dem.

### Hur hindrar jag en rörelsemall från att se generisk ut?

Byt ut dess bakgrund, typsnitt och färger mot dina egna, radera dekorativa extrasaker och sänk tempot.
