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.
Steg 1: Ställ in Canvas
- Klicka på canvas size dropdown
- Välj YouTube Thumbnail (1280x720) för ett 16:9-aspektförhållande
Steg 2: Skapa bakgrund
- Scenfliken → Bakgrundsläge: Solid Color*
- 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:
- För varje hörn, skapa två linjer möte i rätt vinkel
- Fastigheter:
- Stroke Color: *#334155 (subtil skiffer)
- Strokebredd: 1.5********
- Stroke Cap: round*
- Position fästen 40px från varje kant, med 80px armlängd
- 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
- Skapa en vertikal linje längs vänsterkanten
- Fastigheter:
- From: (40, 200) to (40, 520)
- Stroke Color: #3b82f6 (blå accent)
- Strokebredd: 2*****
- Keyframes:
- 0s-0,4: Dold (opacitet 0)
- 0,9: Opacity 0,6 - Lättnad: Lätta ut
Steg 5: Lägg till titel
- Tryck på T
- Skriv din presentation titel (t.ex. “Q4 Business Review”)
- Fastigheter:
- Font Storlek: 72****************************************************
- Font Color: #f8fafc (nära vita)
- 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
- Skapa en tunn rektangel mellan titel och undertext
- Fastigheter:
- Bredd: 300*, höjd: 3*
- Färg: #3b82f6 (blå accent)
- Keyframes:
- 0s-0,5: Dold (opacitet 0)
- 1.0: Opacity 1 - Lättnad: Lätta ut
Steg 7: Lägg till undertext
- Tryck på T
- Skriv din undertext (t.ex. “Årlig prestations- och tillväxtstrategi”)
- Fastigheter:
- Font Storlek: 28*********************************
- Font Color: #94a3b8 (muterad grå)
- 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:
- Tryck på T för varje kula
- Använd pil prefix: “→ Intäkter ökade 34% år över år”
- Fastigheter:
- Font Storlek: 22*************************************
- Font Color: ************************************************************************************************************************************************************************************************************************************************************
- Inriktning: ** Vänster**
- 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
- Tryck på Space förhandsgranskning
- Kontrollera sekvensen: hörnen visas → titelbilder i → divider bleknar → subtitle stiger → kulor stagger
- 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