Logoanimation er processen med at introducere bevægelse eller ændringer i de visuelle elementer i et logo for at gøre det mere dynamisk og attraktivt. Det kan anvendes på forskellige dele af et logo, såsom tekst, billeder, farver og former, og det kan have forskellige grader af kompleksitet, lige fra simple animationer såsom tekst, der blinker eller falmer farver, til komplekse animationer, der involverer objekter, der bevæger sig eller interaktive. effekter.
Logoanimation bliver mere almindeligt. Mellem smartphones og den generelle udvikling af internetteknologi er logoer nu meget mere almindelige i digitale rum, og det åbner døren til visuelle effekter såsom animation, der ikke er mulige med fysiske produkter. Naturligvis betyder den voksende popularitet af logo-animation, at flere og flere mærker får brug for det for at forblive konkurrencedygtige. Så at lære at animere et logo kan være en værdifuld færdighed, der vil tage dit logo til næste niveau.
Samtidig er animationssoftware også blevet mere allestedsnærværende, strømlinet og intuitiv til at understøtte denne voksende brugerbase. Så uanset hvor teknisk og kompleks logo-animation kan lyde, kan selv begyndere nu skabe enkle, men effektive animationer.
Logoanimation i After Effects -
Trin 1. Forbered din logofil.
Vi starter faktisk vores tutorial om, hvordan man animerer et logo i Adobe Illustrator (eller lignende logodesignsoftware). Dette er nødvendigt for at sikre, at vores fil logo sat op til animation.
Selvom selve animationssoftwaren er raster, skal de originale logofiler være i vektorformat. Dette giver dig mulighed for at ændre dem uden skade for billedkvalitet (f.eks. fører forøgelse af skalaen af et rasterlogo til pixelering), og dette vil være nyttigt senere, når du arbejder med formlag.
Sørg for, at dit logo er adskilt i lag ved hjælp af panelet Lag.
Logoet bør også være flerlags i stedet for grupperet i ét objekt. Dette gør det nemt at skabe mere komplekse animationer ved at animere enkelte dele af logoet. Du kan oprette nye lag ved at bruge " Tilføj nyt lag" nederst i lagpanelet, og kopier og indsæt derefter dele af dit logo i dem.
Endelig, da animation er digital af natur, arbejder vi også med RGB-farver. Hvis din Illustrator-fil er indstillet til CMYK, kan du ændre dette ved at vælge dit logo og navigere til Rediger > Rediger farver > Konverter til RGB.
Når du er klar, eksporter du dit logo som en fuldt lagdelt vektorfil. Da After Effects-filtyper er en del af Adobe-softwarefamilien, vil jeg gemme det logo, jeg oprettede som en AI-fil (Adobe Illustrator), men der er flere forskellige typer vektorfiler at vælge imellem, hvis du bruger anden software.
Trin 2: Importer dit logo til After Effects. Logo animation
Åbn After Effects. Grænsefladen kan virke kompliceret ved første øjekast, så lad os nedbryde det grundlæggende:
- Toolbar : her kan du få adgang til de vigtigste grafiske værktøjersåsom penværktøjet, skriveværktøjet osv.
- Projektpanel : Det er her, du administrerer og organiserer mediefiler for hele projektet.
- Kompositionsvindue : Dette er et videoeksempelvindue, hvor du kan forhåndsvise animationen for den aktuelle komposition (ofte kaldet en komposition), du arbejder på. Kompositioner er i det væsentlige scener, hver med deres egne separate animationstidslinjer. Vi vil diskutere kompositioner mere detaljeret i næste afsnit.
- Tidslinje : Det er her, du vil oprette din animation. Den består af både en bogstavelig tidslinje til højre (hvor du konfigurerer animationsbegivenheder til at køre på tidslinjen) og et layoutområde til venstre (hvor du vil overlejre og redigere attributterne for dine medieaktiver).
- Kontrolpanel : Her kan du få adgang til forskellige understøttende funktioner såsom medieoplysninger, afsnits- og justeringsmuligheder og forudbyggede animations- og visuelle effektbiblioteker indbygget i After Effects.
Hvis du er i tvivl om et værktøj eller en knap, vil du få en beskrivelse ved at holde musen over den.
For at importere en logofil skal du blot trække den ind i projektpanelet eller vælge Fil" > " Importere" > " Fil" . I den næste dialogboks skal du vælge Importer medie som optagelser og flettede lag .
Trin 3: Indstil din komposition. Logo animation.
En komposition (komp) er en beholder, der giver dig mulighed for at komponere, redigere og anvende animation til mediefiler. En større produktion, såsom en film, vil indeholde flere spor organiseret i et projektpanel. Så du kan tænke på numrene som en enkelt scene i den film, og hvert nummer vil have sin egen separate tidslinje. I vores tilfælde kræver en logo-animation, der varer mindre end fem sekunder, meget få kompositioner.
For at tilpasse din komposition skal du trække mediefiler til venstre side af tidslinjepanelet.
Lad os starte med en simpel baggrund. Højreklik på layoutpanelet og vælg " Skab" > " Solid" . Da mit logo er hvidt, valgte jeg solidt sort farve, men du kan vælge enhver farve. I det næste vindue, navngiv det faste stof (i mit tilfælde "BG"), klik på " Lav størrelse computer" og vælg " OKAY" . Træk nu din logofil fra projektpanelet til tidslinjepanelet, og du skulle se dit logo vist i kompositionsvinduet. Hvis ikke, skal du sørge for at omarrangere lagene ved at trække den solide baggrund under logofilen.
Højreklik på logofilen i layoutpanelet, og vælg Skab" > " Konverter til en flerlagskomposition" . Dette vil forvandle din logofil til en anden sammensætning (du vil se, at ikonet er ændret). Dobbeltklik på logofilen vil nu åbne en ny fane og tage dig til denne nye komposition, der indeholder alle de individuelle lag, du har sat op i Illustrator. Nu kan du se, hvordan comps fungerer: de er grundlæggende som undermapper.
Logo animation
Hvis du ønsker det, kan du konvertere hvert af disse lag til separate kompositioner ved at højreklikke og vælge Foreløbig sammensætning" . Dette vil give dette lag sin egen animationstidslinje, indlejret i den forrige komposition. Og hvis du vil animere hele logoet på én gang, bør du bruge en tidslinje, der er knyttet til hovedkompositionen.
Med det af vejen, lad os forstå, hvordan disse tidslinjer fungerer for animation.
Trin 4: Animer logoet ved hjælp af keyframes
After Effects (og de fleste animationssoftware) fungerer ved hjælp af keyframes. Keyframes er i det væsentlige markører, som du kan indstille på tidslinjen for at bestemme, hvornår start- og sluttilstandene for din animation skal forekomme.
Lad os for eksempel starte med en meget simpel animation: fading ind. Et objekt har forskellige attributter knyttet til sig, og attributter, der ændrer sig over en given periode, er i det væsentlige animation. For at se disse attributter skal du klikke på Udvid-ikonet ved siden af logoet efterfulgt af egenskaben "Konverter" .
Opret keyframes ved at klikke på stopursikonet ud for Egenskaber i tidslinjepanelet.
For en falmende animation vil du arbejde med den egenskab, der måler synligheden af et objekt: opacitet. Opaciteten er indstillet til 100 %, fordi logoet som standard er fuldt synligt.
Klik på stopursikonet ved siden af indstillingen Opacitet, og du vil se en diamant, hvor afspilningsmarkøren er sat (den svage blå linje krydser tidslinjen). Dette er en keyframe, dybest set et øjebliksbillede af den aktuelle værdi af en specificeret attribut. Flyt keyframen ved at klikke og trække den til 2 sekunders mærket på tidslinjen. Træk skyderen tilbage til 0 sekunders mærket, opret derefter en anden keyframe og indstil opaciteten til 0 %. Tryk på mellemrumstasten for at se animationen i kompositionsvinduet.
Eftervirkninger
Du vil se, at du har skabt en jævn indtoningsanimation ved at ændre opaciteten fra 0 % til 100 % på 2 sekunder med kun to keyframes. Sådan foregår al animation i After Effects. Du kan oprette en start keyframe og en slut keyframe med forskellige intervaller langs tidslinjen, og After Effects beregner automatisk de nødvendige frame overgange for at komme fra punkt A til punkt B (traditionelt kaldet tween frames i animationsbranchen).
En simpel jævn animation oprettes ved hjælp af to keyframes til egenskaben Opacity.
Du kan se, at der er en række attributter, som du kan arbejde med i Forvandle ejendom, som vi kort vil forklare her. Du er velkommen til at eksperimentere med keyframes og modificere hver enkelt for at få en fornemmelse af deres animationsmuligheder:
- Position : Denne egenskab beskriver logoets position i X, Y-rummet på layoutskærmen og gør det muligt at animere lineær bevægelse.
- skala : Denne attribut beskriver størrelsen af logoet (som en procentdel af den fulde størrelse af den originale fil) og giver dig mulighed for at oprette zoom-ind eller shrink-out animationer.
- rotation : Denne egenskab beskriver orienteringen i grader og giver dig mulighed for at oprette rotationsanimationer.
Råd fra en professionel :
Når det kommer til at animere et logo, giver det mening at arbejde baglæns (som vi gjorde med fade-in), da animationen skal slutte på det færdige, komplette logo. Det betyder, at du skal oprette keyframes, før du ændrer noget, så du har snapshots af attributværdierne i deres standardtilstand. Du kan derefter flytte disse keyframes til det ønskede slutpunkt på tidslinjen (uanset hvor længe du vil have animationen til at vare) og oprette nye keyframes til ændringerne i begyndelsen af tidslinjen.
Trin 5. Animer logoet ved hjælp af formlag.
Lad os nu gå videre til mere interessante animationsteknikker ved hjælp af formlag. Formlag er objekter, der indeholder stiinformation såsom ankerpunkter og forbindelseslinjer (svarende til dem i vektorprogrammer), og manipulation af dem åbner døren til en lang række animationsmuligheder ud over Transformer egenskaber .
Hvordan vælger du den rigtige farve til dit logo?
Først skal vi konvertere logoet til et formlag. I panelet Layered Composition (lagene oprettet i trin 3), vælg alle dine lag, højreklik og vælg " Skab" > " Opret former fra vektorlag" . Du vil se, at hvert lag er duplikeret med en stjerne ved siden af - dette er et formlag. Indlejret under formlaget, finder du Indholdsejendom i tillæg til Forvandle ejendom . Til højre for Indholdsegenskaber du vil også se en knap " Tilføje" , som giver dig mulighed for at vælge endnu flere attributter til at animere.
Formlag indeholder en Tilføj-knap (til højre for egenskaben Indhold), som giver dig mulighed for at tilføje alle mulige animerede egenskaber, såsom fritlægningskurver.
Skalering af et objekt i Adobe Illustrator
Trim stier
Til mit logo brugte jeg en ret almindelig og nyttig animation ved hjælp af egenskaben Trim Paths. For at gøre dette tilføjede jeg "Crop Paths" ved at bruge knappen " Tilføje" til formlagene for hvert bogstav skal du indstille attributten End-keyframe til 0 % i starten af tidslinjen og 100 % efter ca. 1 sekund. Som du kan se, ser omridset af bogstaverne ud til at være tegnet af en usynlig hånd i realtid.
Brug af egenskaben Trim Paths giver dig mulighed for at animere linjer, så de tegner sig selv i realtid.
Derudover ville jeg tilføje noget accentanimation til baggrunden. Da jeg arbejder i sort og hvid, valgte jeg en looping tunnel effekt, der minder om Twilight Zone. For at gøre dette brugte jeg polygonværktøjet i panelet Værktøjer til at tegne en form i midten af min komposition, hvilket skaber et nyt formlag.
Så tilføjede jeg en gentagelsesegenskab, centrerede positionen og øgede antallet af kopier. Dette dublerer formen og skaber en tilsyneladende endeløs tunnel. Justering af skalaen øger afstanden mellem hver kopi, og ændring af rotationen orienterer kopierne i forskellige retninger af visuel interesse.
Til sidst, for at pifte det op, keyframede jeg en offset på 0 i starten af tidslinjen og satte den senere til en negativ værdi på tidslinjen.
Ved at bruge et polygonal formlag og egenskaben Repeater var jeg i stand til at skabe en animeret baggrund.
Du har sikkert gættet, at der er mange muligheder for formlag. Det er sandt: Der er komplette onlinekurser om emnet dedikeret til emnet, og du bør tage dig tid til at eksperimentere, øve og lære.
Jeg kan heller ikke fortælle dig, hvilken animationsstil der passer til din logo eller hvilke specifikke værktøjer animationer, du skal bruge for at opnå denne stil. Jeg kan dog give dig råd til, hvordan du selv kan opdage det. Se efter inspiration fra andre animerede logoer, såsom dine konkurrenter, brands, du beundrer, og/eller websteder som Pinterest eller Dribbble - ligesom du gjorde, da du oprindeligt oprettede logoet.
Du vil opdage, at når du begynder at analysere dem ved hjælp af din nye viden om, hvordan man animerer et logo, er mange af dem baseret på simple manipulationer med former og transformationer (selv dem, der er tydeligt lagdelt med avancerede stiliserede effekter). Når du har fundet et par stykker, som du kan lide, kan du arbejde baglæns i After Effects for at prøve at reverse engineering af disse animationer til praksis.
Trin 6: Indstil tiden.
Lad os tale om tid, som beskriver tempoet i animationsframes gennem hele animationen. Du kan se en visuel repræsentation af tid ved at gå til Graph Editor. For at gøre dette skal du klikke på grafikonet (mærket Graph Editor, når du holder markøren over det) øverst i tidslinjepanelet, og dette vil ændre tidslinjen til en linjegraf.
Hvis du klikker på en af keyframe-attributterne, vil du se en lige linje fra den ene keyframe til den næste. Lige nu, da vi kun keyframe start- og slutpunkterne, forlod vi After Effects for at lave timingen. Uden retning flytter After Effects hvert enkelt billede i animationen jævnt, hvilket resulterer i en helt lige linje.
Grafeditoren viser nøgleframe-timing som vist i linjegrafen.
Den målrettede ændring i tid er dog det, der giver animationen en følelse af realisme. For eksempel, i en hoppende bold-animation, bevæger bolden sig langsommere i højden af hoppet og hurtigere, når den nærmer sig jorden på grund af momentum og tyngdekraft. Han bevæger sig med andre ord ikke med samme hastighed gennem hele animationen, og hvis han gjorde det, ville han skille sig ud som en robot.
Bezier-værktøjerne, der er placeret i bunden af grafeditoren, giver dig mulighed for at justere kurvaturen af graflinjen.
Konverter Keyframes til Auto Bezier
Graph Editor giver dig mulighed for at justere timingen af din egen animation ved at bruge såkaldte Bezier-håndtag til at transformere en graflinje til en kurve. I nederste højre hjørne af grafeditoren kan du se nogle firkantede prikikoner knyttet til linjer - disse er Bezier-værktøjer.
Klik på en af keyframes og hold markøren over Bezier-værktøjerne, indtil du finder den, der er mærket " Konverter Keyframes til Auto Bezier" . Når du klikker på denne, vil du se en gul markør vises på grafen. Træk i dette håndtag vil få linjen til at bøje, og dette vil ændre timingen af din animation. Hvor kurven er mere udtalt, afspilles billederne hurtigere, og hvor kurven er jævnere, afspilles billederne langsommere.
En skarpere kurve svarer til hurtigere synkronisering, og en glattere kurve svarer til langsommere synkronisering.
For virkelig at forstå nuancerne ved at justere din egen timing kræver det animationserfaring, hvorfor det er et mere avanceret emne at justere Bezier-kurver manuelt. I denne begyndervejledning anbefaler jeg at bruge Bezier-værktøjet Nem lethed (som anvender en automatisk kurve på det keyframe, du vælger) for alle animationstidsintervaller. Du kan ansøge Nem lethed til en nøgleramme uden for diagrameditoren ved at vælge nøglerammen og højreklikke.
Trin 7: Eksporter dit logo.
Når du er klar til at eksportere dit færdige animerede logo, skal du vælge " Fil" > " Eksport" > " Tilføj Adobe Media Encoder til køen" . After Effects eksporterer som standard fil i formatet mp4, som er velegnet til video. Da vi ønsker at oprette en delbar billedfil af vores logo, eksporterer vi den som en animeret GIF. I vinduet Media Encoder skal du klikke på pilen ved siden af den fremhævede blå tekstlinje under ordet "Format" og vælge " Animeret GIF" . Du kan også indstille destinationsmappen for din færdige fil ved at klikke på den blå tekst under ordene "Outputfil".
For at eksportere en fil skal du gå til Filer > Eksporter > Tilføj til Adobe Media Encoder Queue og vælge Animeret Gif fra rullelisten i kolonnen Format.
Dobbeltklik på den fremhævede blå tekst under forudindstillingen for at åbne vinduet Eksportindstillinger. Der er et par muligheder, du vil se på for at reducere din filstørrelse: Kvalitet (jeg indstiller den til 20), billedhastighed (jeg indstiller den til 10, selvom højere billedhastigheder (fps) anbefales til video) og Varighed, som er den blå bjælke under forhåndsvisning (jeg trimmede min til 4 sekunder). Vælg OKAY, for at lukke dette vindue.
Når du er færdig, skal du vælge det grønne Play-ikon i øverste højre hjørne af Media Encoder, og din fil vil blive vist i din valgte destinationsmappe. Det var det: færdig logo-animation!
Giv dit brand liv med logo-animation.
—
Logoanimation er mere end blot en populær trend, som brands er tvunget til at følge. Der er også en ubestridelig magi til logo-animation, og det er en fantastisk måde at skabe et øjeblik af visuel nydelse for alle, der interagerer med dit brand. Og heldigvis har animationssoftware udviklet sig, så næsten alle, uanset færdigheder, kan tilføje lidt af den magi til deres eget logo.
Med det sagt, mens denne tutorial er beregnet til at få dig i gang med det grundlæggende i logo-animation, kræver det en masse forsøg og fejl, øvelse og eksperimenter for at få noget ud over grundlæggende animation. Hvis du vil have en helt speciel logo-animation, er en professionel logo-animator investeringen værd.
Efterlad en kommentar