Tutorial: Skapa en presentationsskjorta

Designa en animerad bild för presentationer eller videointros med hörndekorationer, staggered kulpunkter och smidig text avslöjar.

*Tid: 10 minuter Svårighet: Intermediate

Vad du skapar

En professionell titelbild med hörnfäste dekorationer, animerad titel avslöjar och staggered innehåll animationer.

Animated presentationsbild med hörndekorationer och staggered bullet points

Steg 1: Ställ in Canvas

  1. Klicka på canvas size dropdown
  2. Välj YouTube Thumbnail (1280x720) för ett 16:9-aspektförhållande

Steg 2: Skapa bakgrund

  1. Scenfliken → Bakgrundsläge: Solid Color*
  2. Ställ färg: #0f172a (djup flotta)

En ren mörk bakgrund håller fokus på innehållet och låter dekorativa element sticka ut.

Steg 3: Lägg till Corner Bracket Decorations

Skapa L-formade fästen vid varje hörn av duken med hjälp av linjer:

  1. För varje hörn, skapa två linjer möte i rätt vinkel
  2. Fastigheter:
    • Stroke Color: *#334155 (subtil skiffer)
    • Strokebredd: 1.5********
    • Stroke Cap: round*
  3. Position fästen 40px från varje kant, med 80px armlängd
  4. Stagger varje hörn utseende med 0,08 sekunder för en sekventiell avslöjande

Dessa hörnfästen bildar bilden och lägger till ett polerat, professionellt utseende.

Steg 4: Lägg till vänster Edge Accent

  1. Skapa en vertikal linje längs vänsterkanten
  2. Fastigheter:
    • From: (40, 200) to (40, 520)
    • Stroke Color: #3b82f6 (blå accent)
    • Strokebredd: 2*****
  3. Keyframes:
    • 0s-0,4: Dold (opacitet 0)
    • 0,9: Opacity 0,6 - Lättnad: Lätta ut

Steg 5: Lägg till titel

  1. Tryck på T
  2. Skriv din presentation titel (t.ex. “Q4 Business Review”)
  3. Fastigheter:
    • Font Storlek: 72****************************************************
    • Font Color: #f8fafc (nära vita)
  4. Keyframes - glida in från vänster:
    • 0s: Opacity 0, X offset -60px från mitten
    • 0,7: Opacity 1, X i mitten - Lättnad: Lätta ut

Steg 6: Lägg till Divider Line

  1. Skapa en tunn rektangel mellan titel och undertext
  2. Fastigheter:
    • Bredd: 300*, höjd: 3*
    • Färg: #3b82f6 (blå accent)
  3. Keyframes:
    • 0s-0,5: Dold (opacitet 0)
    • 1.0: Opacity 1 - Lättnad: Lätta ut

Steg 7: Lägg till undertext

  1. Tryck på T
  2. Skriv din undertext (t.ex. “Årlig prestations- och tillväxtstrategi”)
  3. Fastigheter:
    • Font Storlek: 28*********************************
    • Font Color: #94a3b8 (muterad grå)
  4. Keyframes:
    • 0s-0,8: Dold (opacitet 0, Y +20px offset)
    • 1.4s: Opacity 1, Y vid slutpositionen - Easing: Ease Out

Steg 8: Lägg till Bullet Points

Skapa 3 textobjekt för dina nyckeltal eller prata poäng:

  1. Tryck på T för varje kula
  2. Använd pil prefix: “→ Intäkter ökade 34% år över år”
  3. Fastigheter:
    • Font Storlek: 22*************************************
    • Font Color: ************************************************************************************************************************************************************************************************************************************************************
    • Inriktning: ** Vänster**
  4. Stagger varje kula utseende med 0,2 sekunder:
    • Bullet 1: visas på 1.2s-1.6s
    • Bullet 2: visas på 1.4s-1.8s*
    • Bullet 3: visas på 1.6s-2.0s*

Varje kula glider något från vänster (x offset -20px) medan bleknar i.

Steg 9: Förhandsgranskning och export

  1. Tryck på Space förhandsgranskning
  2. Kontrollera sekvensen: hörnen visas → titelbilder i → divider bleknar → subtitle stiger → kulor stagger
  3. Exportera som MP4 eller WebM (5 sekunder, 30 fps)

Design Variationer

Minimal Corporate

  • Vit bakgrund
  • Svart text med enkel fade-in
  • Inga hörndekorationer

Tech/Modern

  • Mörk bakgrund med hörnfästen
  • Blå accentfärger och slide-in avslöjar
  • Subtila geometriska accenter

Creative/Bold

  • Sunburst bakgrundsgenerator
  • Stor, djärv text med studs animation
  • Flera accentformer

Tips

Presentation Slide Tips:**

  • Håll text läsbar - stora teckensnitt, hög kontrast
  • Hörnfästen bildar bilden utan distraktion
  • Stagger kula poäng 0,2s isär för ett naturligt flöde
  • Använd en vänsterkant accent linje för att styra ögat
  • Animation bör förbättras, inte distrahera

Nästa steg

  • [Lär dig Keyframes] (/features/keyframes) - Mer animationskontroll
  • [Exportalternativ] (/exporting/overview) - Välj rätt format