Logoanimasjon er prosessen med å introdusere bevegelse eller endringer i de visuelle elementene i en logo for å gjøre den mer dynamisk og attraktiv. Den kan brukes på forskjellige deler av en logo, for eksempel tekst, bilder, farger og former, og den kan ha varierende grad av kompleksitet, alt fra enkle animasjoner som tekst som blinker eller falmer farger, til komplekse animasjoner som involverer objekter som beveger seg eller interaktive. effekter.
Logoanimasjon blir mer vanlig. Mellom smarttelefoner og den generelle utviklingen av internettteknologi er logoer nå mye mer vanlig i digitale rom, og dette åpner for visuelle effekter som animasjon som ikke er mulig med fysiske produkter. Selvfølgelig betyr den økende populariteten til logo-animasjon at flere og flere merker vil trenge det for å forbli konkurransedyktige. Så å lære å animere en logo kan være en verdifull ferdighet som vil ta logoen din til neste nivå.
Samtidig har animasjonsprogramvare også blitt mer allestedsnærværende, strømlinjeformet og intuitiv for å støtte denne voksende brukerbasen. Så uansett hvor teknisk og kompleks logoanimasjon kan høres ut, kan til og med nybegynnere nå lage enkle, men effektive animasjoner.
Logoanimasjon i After Effects -
Trinn 1. Klargjør logofilen.
Vi starter faktisk opplæringen vår om hvordan du animerer en logo i Adobe Illustrator (eller lignende logodesignprogramvare). Dette er nødvendig for å sikre at filen vår logo satt opp for animasjon.
Selv om selve animasjonsprogramvaren er raster, må de originale logofilene være i vektorformat. Dette lar deg endre dem uten skader for bildekvalitet (for eksempel zooming inn på en rasterlogo resulterer i pikselering), og dette vil være nyttig senere når du arbeider med formlag.
Sørg for at logoen din er delt inn i lag ved hjelp av lagpanelet.
Logoen bør også være flerlags i stedet for gruppert i ett objekt. Dette gjør det enkelt å lage mer komplekse animasjoner ved å animere individuelle deler av logoen. Du kan opprette nye lag ved å bruke " Legg til nytt lag" nederst i lagpanelet, og kopier og lim deretter inn deler av logoen din i dem.
Til slutt, siden animasjon er digital i naturen, jobber vi også med RGB-farger. Hvis Illustrator-filen er satt til CMYK, kan du endre dette ved å velge logoen din og navigere til Rediger > Rediger farger > Konverter til RGB.
Når du er klar, eksporterer du logoen din som en fullt lagdelt vektorfil. Siden After Effects-filtyper er en del av Adobe-programvarefamilien, skal jeg lagre logoen jeg opprettet som en AI-fil (Adobe Illustrator), men det er flere forskjellige typer vektorfiler å velge mellom hvis du bruker annen programvare.
Trinn 2: Importer logoen din til After Effects. Logo animasjon
Åpne After Effects. Grensesnittet kan virke komplisert ved første øyekast, så la oss bryte ned det grunnleggende:
- Verktøylinje : her kan du få tilgang til hovedsiden grafiske verktøyfor eksempel pennverktøyet, skriveverktøyet osv.
- Prosjektpanel : Det er her du administrerer og organiserer mediefiler for hele prosjektet.
- Komposisjonsvindu : Dette er et videoforhåndsvisningsvindu der du kan forhåndsvise animasjonen for gjeldende komposisjon (ofte kalt en komposisjon) du jobber med. Komposisjoner er i hovedsak scener, hver med sine egne separate animasjonstidslinjer. Vi vil diskutere komposisjoner mer detaljert i neste avsnitt.
- Tidslinje : Det er her du skal lage animasjonen din. Den består av både en bokstavelig tidslinje til høyre (hvor du skal sette opp animasjonshendelser som skal kjøres på tidslinjen) og et layoutområde til venstre (hvor du legger over og redigerer attributtene til mediemidlene).
- Kontrollpanelet : Her kan du få tilgang til ulike støttefunksjoner som medieinformasjon, paragraf- og justeringsalternativer, og forhåndsbygde animasjons- og visuelle effektbiblioteker innebygd i After Effects.
Hvis du er usikker på et verktøy eller en knapp, vil du få en beskrivelse ved å holde musen over den.
For å importere en logofil, dra den inn i prosjektpanelet eller velg Fil" > " Import" > " Fil" . I den neste dialogboksen velger du Importer media som opptak og sammenslåtte lag .
Trinn 3: Sett opp komposisjonen din. Logo animasjon.
En komposisjon (komp) er en beholder som lar deg komponere, redigere og bruke animasjon på mediefiler. En større produksjon, for eksempel en film, vil inneholde flere spor organisert i et prosjektpanel. Så du kan tenke på sporene som en enkelt scene i den filmen, og hvert spor vil ha sin egen separate tidslinje. I vårt tilfelle krever en logoanimasjon som varer mindre enn fem sekunder svært få komposisjoner.
For å tilpasse komposisjonen din, dra mediefiler til venstre side av tidslinjepanelet.
La oss starte med en enkel bakgrunn. Høyreklikk på layoutpanelet og velg " Skape" > " Fast" . Siden logoen min er hvit, valgte jeg solid svart farge, men du kan velge hvilken som helst farge. I det neste vinduet, navngi det faste (i mitt tilfelle "BG"), klikk på " Lag størrelse datamaskin" og velg " OK " . Dra nå logofilen fra prosjektpanelet til tidslinjepanelet, og du skal se logoen forhåndsvist i komposisjonsvinduet. Hvis ikke, sørg for å omorganisere lagene ved å dra den solide bakgrunnen under logofilen.
Høyreklikk på logofilen i layoutpanelet og velg Skape" > " Konverter til en flerlags komposisjon" . Dette vil gjøre logofilen om til en annen sammensetning (du vil se at ikonet har endret seg). Dobbeltklikk på logofilen vil nå åpne en ny fane og ta deg til denne nye komposisjonen som inneholder alle de individuelle lagene du har satt opp i Illustrator. Nå kan du se hvordan comps fungerer: de er egentlig som undermapper.
Logo animasjon
Hvis du ønsker det, kan du konvertere hvert av disse lagene til separate komposisjoner ved å høyreklikke og velge Foreløpig sammensetning" . Dette vil gi dette laget sin egen animasjonstidslinje, nestet i den forrige komposisjonen. Og hvis du vil animere hele logoen på en gang, bør du bruke en tidslinje knyttet til hovedkomposisjonen.
Med det ute av veien, la oss forstå hvordan disse tidslinjene fungerer for animasjon.
Trinn 4: Animer logoen ved hjelp av nøkkelbilder
After Effects (og det meste av animasjonsprogramvare) fungerer med nøkkelbilder. Nøkkelbilder er i hovedsak markører som du kan sette på tidslinjen for å bestemme når start- og slutttilstander for animasjonen din skal inntreffe.
La oss for eksempel starte med en veldig enkel animasjon: fading inn. Et objekt har forskjellige attributter knyttet til seg, og attributter som endres over en gitt tidsperiode er i hovedsak animasjon. For å se disse attributtene, klikk på Utvid-ikonet ved siden av logoen etterfulgt av egenskapen "Konverter" .
Opprett nøkkelbilder ved å klikke på stoppeklokkeikonet ved siden av Egenskaper i tidslinjepanelet.
For en falmende animasjon vil du jobbe med attributtet som måler synligheten til et objekt: opasitet. Opasiteten er satt til 100 % fordi logoen som standard er helt synlig.
Klikk på stoppeklokkeikonet ved siden av Opacity-alternativet, og du vil se en diamant der spillehodemarkøren er satt (den svake blå linjen som krysser tidslinjen). Dette er en nøkkelramme, i utgangspunktet et øyeblikksbilde av gjeldende verdi av et spesifisert attributt. Flytt nøkkelbildet ved å klikke og dra det til 2-sekundersmerket på tidslinjen. Dra glidebryteren tilbake til 0-sekundersmerket, lag deretter en annen nøkkelramme og sett opasiteten til 0 %. Trykk mellomromstasten for å se animasjonen i komposisjonsvinduet.
Etter effekter
Du vil se at du har laget en jevn inntoningsanimasjon ved å endre opasiteten fra 0 % til 100 % på 2 sekunder med bare to nøkkelbilder. Slik gjøres all animasjon i After Effects. Du kan lage en start-nøkkelramme og en sluttnøkkelramme med forskjellige intervaller langs tidslinjen, og After Effects beregner automatisk de nødvendige rammeovergangene for å komme fra punkt A til punkt B (tradisjonelt kalt tween-rammer i animasjonsbransjen).
En enkel jevn animasjon lages ved å bruke to nøkkelbilder for Opacity-egenskapen.
Du kan se at det er en rekke attributter du kan jobbe med i Forvandle eiendom, som vi kort skal forklare her. Eksperimenter gjerne med nøkkelbilder og modifiser hver enkelt for å få en følelse av animasjonsevnene deres:
- Stilling : Dette attributtet beskriver posisjonen til logoen i X-, Y-rom på layoutskjermen og lar lineære bevegelser animeres.
- Skala : Dette attributtet beskriver størrelsen på logoen (som en prosentandel av den fulle størrelsen på originalfilen) og lar deg lage zoom-inn- eller krympe-animasjoner.
- Rotasjon : Dette attributtet beskriver orienteringen i grader og lar deg lage rotasjonsanimasjoner.
Råd fra en profesjonell :
Når det gjelder å animere en logo, er det fornuftig å jobbe bakover (som vi gjorde med fade-in) siden animasjonen skal ende på den ferdige, komplette logoen. Dette betyr at du må lage nøkkelbilder før du endrer noe slik at du har øyeblikksbilder av attributtverdiene i standardtilstanden. Du kan deretter flytte disse nøkkelbildene til ønsket sluttpunkt på tidslinjen (uansett hvor lenge du vil at animasjonen skal vare) og lage nye nøkkelbilder for endringene i begynnelsen av tidslinjen.
Trinn 5. Animer logoen ved hjelp av formlag.
La oss nå gå videre til mer interessante animasjonsteknikker ved å bruke formlag. Formlag er objekter som inneholder baneinformasjon som ankerpunkter og koblingslinjer (ligner de i vektorprogrammer), og manipulering av dem åpner døren til en hel rekke animasjonsmuligheter utover Forvandle egenskaper .
Hvordan velge riktig farge for logoen din?
Først skal vi konvertere logoen til et formlag. I Layered Composition-panelet (lagene opprettet i trinn 3), velg alle lagene dine, høyreklikk og velg " Skape" > " Lag former fra vektorlag" . Du vil se at hvert lag er duplisert med en stjerne ved siden av - dette er et formlag. Nestet under formlaget finner du Innholdseiendom i tillegg til Forvandle eiendom . Til høyre for Innholdsegenskaper du vil også se en knapp " Legge til" , som lar deg velge enda flere attributter å animere.
Formlag inneholder en Legg til-knapp (til høyre for innholdsegenskapen) som lar deg legge til alle slags animerte egenskaper, for eksempel klippebaner.
Skalere et objekt i Adobe Illustrator
Trim baner
For logoen min brukte jeg en ganske vanlig og nyttig animasjon ved å bruke Trim Paths-egenskapen. For å gjøre dette la jeg til "Crop Paths" ved å bruke knappen " Legge til" til formlagene for hver bokstav, sett End-attributt nøkkelbilde til 0 % ved starten av tidslinjen og 100 % etter omtrent 1 sekund. Som du kan se, ser omrisset av bokstavene ut til å være tegnet av en usynlig hånd i sanntid.
Ved å bruke egenskapen Trim Paths kan du animere linjer slik at de tegner seg selv i sanntid.
I tillegg ønsket jeg å legge til litt aksentanimasjon i bakgrunnen. Siden jeg jobber i svart-hvitt, valgte jeg en sløyfe-tunneleffekt som minner om Twilight Zone. For å gjøre dette brukte jeg polygonverktøyet i Verktøy-panelet for å tegne en form i midten av komposisjonen min, og skape et nytt formlag.
Deretter la jeg til en Repeater-egenskap, sentrerte posisjonen og økte antall kopier. Dette dupliserer formen, og skaper en tilsynelatende endeløs tunnel. Justering av skalaen øker avstanden mellom hver kopi, og endring av rotasjonen orienterer kopiene i forskjellige retninger for visuell interesse.
Til slutt, for å krydre det, satte jeg en forskyvning på 0 i begynnelsen av tidslinjen og satte den senere til en negativ verdi på tidslinjen.
Ved å bruke et polygonal formlag og Repeater-egenskapen, var jeg i stand til å lage en animert bakgrunn.
Du har sikkert gjettet at det er mange alternativer for formlag. Det er sant: det finnes komplette nettkurs om emnet dedikert til emnet, og du bør ta deg tid til å eksperimentere, øve og lære.
Jeg kan heller ikke fortelle deg hvilken animasjonsstil som passer for deg logo eller hvilke spesifikke verktøy animasjoner du trenger for å oppnå denne stilen. Jeg kan imidlertid gi deg råd om hvordan du kan oppdage det selv. Se etter inspirasjon fra andre animerte logoer, som konkurrentene dine, merker du beundrer og/eller nettsteder som Pinterest eller Dribbble – akkurat som du gjorde da du opprinnelig opprettet logoen.
Du vil oppdage at når du begynner å analysere dem ved å bruke din nye kunnskap om hvordan du animerer en logo, er mange av dem basert på enkle manipulasjoner med former og transformasjoner (selv de som er tydelig lagdelt med avanserte stiliserte effekter). Når du har funnet noen du liker, kan du jobbe bakover i After Effects for å prøve å reversere disse animasjonene for å øve.
Trinn 6: Still inn tiden.
La oss snakke om tid, som beskriver tempoet til animasjonsrammer gjennom hele animasjonen. Du kan se en visuell representasjon av tid ved å gå til Graph Editor. For å gjøre dette, klikk på grafikonet (merket Graph Editor når du holder musepekeren over det) øverst i tidslinjepanelet, og dette vil endre tidslinjen til en linjegraf.
Hvis du klikker på en av keyframe-attributtene, vil du se en rett linje fra en keyframe til den neste. Akkurat nå, siden vi bare keyframe start- og sluttpunktene, forlot vi After Effects for å gjøre timingen. Uten retning flytter After Effects hvert bilde av animasjonen jevnt, noe som resulterer i en perfekt rett linje.
Grafeditoren viser timing for nøkkelbilder som vist i linjegrafen.
Den målrettede endringen i tid er imidlertid det som gir animasjonen en følelse av realisme. For eksempel, i en sprettball-animasjon, beveger ballen seg langsommere i høyden av sprett og raskere når den nærmer seg bakken på grunn av momentum og tyngdekraft. Han beveger seg med andre ord ikke i samme hastighet gjennom hele animasjonen, og hvis han gjorde det, ville han stått frem som en robot.
Bezier-verktøyene, som ligger nederst i grafeditoren, lar deg justere kurvaturen til graflinjen.
Konverter nøkkelbilder til Auto Bezier
Graph Editor lar deg justere timingen for din egen animasjon ved å bruke såkalte Bezier-håndtak for å transformere en graflinje til en kurve. I nedre høyre hjørne av grafredigeringsprogrammet vil du se noen firkantede prikkikoner festet til linjer – disse er Bezier-verktøy.
Klikk på en av nøkkelbildene og hold musepekeren over Bezier-verktøyene til du finner den merket " Konverter nøkkelbilder til Auto Bezier" . Når du klikker på denne vil du se en gul markør vises på grafen. Hvis du drar dette håndtaket, vil linjen bøye seg, og dette vil endre tidspunktet for animasjonen. Der kurven er mer uttalt, spilles bildene av raskere, og der kurven er jevnere, spilles bildene av langsommere.
En skarpere kurve tilsvarer raskere synkronisering, og en jevnere kurve tilsvarer langsommere synkronisering.
For å virkelig forstå nyansene ved å justere din egen timing krever animasjonserfaring, og det er derfor det er et mer avansert tema å justere Bezier-kurver manuelt. I denne nybegynnerveiledningen anbefaler jeg å bruke Bezier-verktøyet Enkel letthet (som bruker en automatisk kurve på nøkkelbildet du velger) for alle animasjonstidsintervaller. Du kan søke Enkel letthet til en nøkkelramme utenfor diagramredigeringsprogrammet ved å velge nøkkelrammen og høyreklikke.
Trinn 7: Eksporter logoen din.
Når du er klar til å eksportere den ferdige animerte logoen, velger du " Fil" > " Eksport" > " Legg til Adobe Media Encoder i køen" . After Effects eksporterer som standard fil i formatet mp4, som er egnet for video. Siden vi ønsker å lage en delbar bildefil av logoen vår, eksporterer vi den som en animert GIF. I Media Encoder-vinduet klikker du på pilen ved siden av den uthevede blå tekstlinjen under ordet "Format" og velger " Animert GIF" . Du kan også angi målmappen for den ferdige filen ved å klikke på den blå teksten under ordene "Output File".
For å eksportere en fil, gå til Fil > Eksporter > Legg til i Adobe Media Encoder Queue og velg Animated Gif fra rullegardinlisten i Format-kolonnen.
Dobbeltklikk på den uthevede blå teksten under forhåndsinnstillingen for å åpne vinduet Eksportalternativer. Det er noen få alternativer du bør se på for å redusere filstørrelsen: Kvalitet (jeg setter den til 20), bildefrekvens (jeg setter den til 10, selv om høyere bildefrekvenser (fps) anbefales for video), og Varighet, som er den blå linjen under forhåndsvisning (jeg trimmet min til 4 sekunder). Plukke ut OK, for å lukke dette vinduet.
Når du er ferdig, velg det grønne Spill-ikonet i øverste høyre hjørne av Media Encoder og filen din vil vises i den valgte destinasjonsmappen. Det var det: ferdig logoanimasjon!
Gjør merkevaren din til live med logo-animasjon.
-
Logoanimasjon er mer enn bare en populær trend som merkevarer blir tvunget til å følge. Det er også en ubestridelig magi til logo-animasjon, og det er en fin måte å skape et øyeblikk med visuell nytelse for alle som samhandler med merkevaren din. Og heldigvis har animasjonsprogramvare utviklet seg slik at nesten alle, uavhengig av ferdigheter, kan legge til litt av den magien til sin egen logo.
Med det sagt, mens denne opplæringen er ment å komme i gang med det grunnleggende om logo-animasjon, krever det mye prøving og feiling, øvelse og eksperimentering for å få noe utover grunnleggende animasjon. Hvis du vil ha en virkelig spesiell logo-animasjon, er en profesjonell logo-animator verdt investeringen.
Оставить комментарий