Logotipo animacija – tai procesas, kai logotipe įvedami judesiai arba keičiami vizualiniai elementai, kad logotipas būtų dinamiškesnis ir patrauklesnis. Jis gali būti pritaikytas skirtingoms logotipo dalims, pvz., tekstui, vaizdams, spalvoms ir formoms, ir gali būti įvairaus sudėtingumo – nuo paprastų animacijų, tokių kaip tekstas mirksi ar blunka spalvos, iki sudėtingos animacijos, apimančios judančius ar interaktyvius objektus. efektai.
Logotipo animacija tampa vis labiau paplitusi. Tarp išmaniųjų telefonų ir bendros interneto technologijų plėtros logotipai dabar yra daug labiau paplitę skaitmeninėse erdvėse, o tai atveria duris vizualiniams efektams, tokiems kaip animacija, kurie neįmanomi naudojant fizinius produktus. Žinoma, didėjantis logotipų animacijos populiarumas reiškia, kad jos prireiks vis daugiau prekių ženklų, kad jie išliktų konkurencingi. Taigi išmokti animuoti logotipą gali būti vertingas įgūdis, kuris pakels jūsų logotipą į kitą lygį.
Tuo pačiu metu animacijos programinė įranga tapo vis labiau paplitusi, supaprastinta ir intuityvesnė, kad palaikytų šią augančią vartotojų bazę. Taigi, kad ir kaip techniškai ir sudėtingai skambėtų logotipo animacija, net pradedantieji dabar gali sukurti paprastas, bet efektyvias animacijas.
Logotipo animacija „After Effects“ –
1 veiksmas. Paruoškite logotipo failą.
Iš tikrųjų pradėsime savo mokymo programą, kaip animuoti logotipą „Adobe Illustrator“ (ar panašioje logotipų kūrimo programinėje įrangoje). Tai būtina siekiant užtikrinti, kad mūsų failas logotipas sukurtas animacijai.
Nors pati animacijos programinė įranga yra rastrinė, originalūs logotipo failai turi būti vektorinio formato. Tai leidžia juos pakeisti be žalą vaizdo kokybei (pavyzdžiui, priartinus rastrinį logotipą atsiranda pikselių), ir tai bus naudinga vėliau dirbant su formos sluoksniais.
Įsitikinkite, kad logotipas yra padalintas į sluoksnius, naudodami skydelį Sluoksniai.
Logotipas taip pat turėtų būti daugiasluoksnis, o ne sugrupuotas į vieną objektą. Tai leidžia lengvai sukurti sudėtingesnes animacijas, animuojant atskiras logotipo dalis. Galite sukurti naujus sluoksnius naudodami " Pridėti naują sluoksnį" Sluoksnių skydelio apačioje, tada nukopijuokite ir įklijuokite dalis savo logotipo į juos.
Galiausiai, kadangi animacija yra skaitmeninio pobūdžio, mes taip pat dirbame su RGB spalvomis. Jei jūsų „Illustrator“ failas nustatytas kaip CMYK, galite tai pakeisti pasirinkę savo logotipą ir eidami į Redaguoti > Redaguoti spalvas > Konvertuoti į RGB.
Kai būsite pasiruošę, eksportuokite savo logotipą kaip visiškai sluoksniuotą vektorinį failą. Kadangi After Effects failų tipai yra „Adobe“ programinės įrangos šeimos dalis, sukurtą logotipą išsaugosiu kaip AI failą ("Adobe Illustrator"), tačiau jei naudojate kitą programinę įrangą, galite pasirinkti iš kelių skirtingų tipų vektorinių failų.
2 veiksmas: importuokite savo logotipą į After Effects. Logotipo animacija
Atidarykite After Effects. Sąsaja iš pirmo žvilgsnio gali atrodyti sudėtinga, todėl išskaidykime pagrindus:
- Įrankių juosta : čia galite pasiekti pagrindinį grafikos įrankiaipvz., rašiklio įrankis, rašymo įrankis ir kt.
- Projekto skydelis : čia galite valdyti ir tvarkyti viso projekto medijos failus.
- Kompozicijos langas : Tai vaizdo peržiūros langas, kuriame galite peržiūrėti dabartinės kompozicijos (dažnai vadinamos kompozicija), su kuria dirbate, animaciją. Kompozicijos iš esmės yra scenos, kurių kiekviena turi savo atskiras animacijos laiko juostas. Kompozicijas išsamiau aptarsime kitame skyriuje.
- Laiko juosta : Čia kursite savo animaciją. Jį sudaro ir pažodinė laiko juosta dešinėje (kur nustatysite animacijos įvykius, kad jie būtų rodomi laiko juostoje), ir išdėstymo sritis kairėje (kur galėsite perdengti ir redaguoti medijos išteklių atributus).
- Valdymo skydelis : Čia galite pasiekti įvairias pagalbines funkcijas, pvz., medijos informaciją, pastraipų ir lygiavimo parinktis bei iš anksto sukurtas animacijos ir vaizdo efektų bibliotekas, integruotas į After Effects.
Jei nesate tikri dėl įrankio ar mygtuko, užvedę pelės žymeklį ant jo gausite aprašymą.
Norėdami importuoti logotipo failą, tiesiog vilkite jį į projekto skydelį arba pasirinkite Failas " > « Importuoti " > « Failas " . Kitame dialogo lange pasirinkite Importuoti laikmeną kaip filmuotą medžiagą ir sujungtus sluoksnius .
3 veiksmas: nustatykite kompoziciją. Logotipo animacija.
Kompozicija (komponavimas) yra konteineris, leidžiantis kurti, redaguoti ir pritaikyti animaciją medijos failams. Didesnėje produkcijoje, pavyzdžiui, filme, bus keli takeliai, suskirstyti į projekto skydelį. Taigi galite galvoti apie takelius kaip apie vieną to filmo sceną, ir kiekvienas takelis turės savo atskirą laiko juostą. Mūsų atveju logotipo animacijai, kuri trunka mažiau nei penkias sekundes, reikia labai nedaug kompozicijų.
Norėdami tinkinti kompoziciją, vilkite medijos failus į kairę laiko juostos skydelio pusę.
Pradėkime nuo paprasto fono. Dešiniuoju pelės mygtuku spustelėkite išdėstymo skydelį ir pasirinkite " Sukurti " > « kietas" . Kadangi mano logotipas yra baltas, pasirinkau solidų juoda spalva, bet galite pasirinkti bet kokią spalvą. Kitame lange pavadinkite kietąją medžiagą (mano atveju "BG"), spustelėkite " Padaryti dydį kompiuteris“ ir pasirinkite „ GERAI" . Dabar vilkite savo logotipo failą iš projekto skydelio į skydelį Laiko juosta ir turėtumėte pamatyti savo logotipą, peržiūrėtą kompozicijos lange. Jei ne, būtinai pertvarkykite sluoksnius vilkdami vientisą foną po logotipo failu.
Dešiniuoju pelės mygtuku spustelėkite logotipo failą išdėstymo skydelyje ir pasirinkite Sukurti " > « Konvertuoti į daugiasluoksnę kompoziciją . Tai pavers jūsų logotipo failą kitokia kompozicija (matysite, kad piktograma pasikeitė). Dukart spustelėjus logotipo failą atsidarys naujas skirtukas ir pateksite į šią naują kompoziciją, kurioje yra visi atskiri sluoksniai, kuriuos nustatėte „Illustrator“. Dabar galite pamatyti, kaip veikia kompai: jie iš esmės yra kaip poaplankiai.
Logotipo animacija
Jei norite, galite konvertuoti kiekvieną iš šių sluoksnių į atskiras kompozicijas, dešiniuoju pelės mygtuku spustelėdami ir pasirinkdami Preliminari sudėtis" . Tai suteiks šiam sluoksniui savo animacijos laiko juostą, įdėtą į ankstesnę kompoziciją. Ir jei norite animuoti visą logotipą vienu metu, turėtumėte naudoti laiko juostą, susietą su pagrindine kompozicija.
To nepadarius, supraskime, kaip šios animacijos laiko juostos veikia.
4 veiksmas: animuokite logotipą naudodami raktinius kadrus
After Effects (ir dauguma animacijos programinės įrangos) veikia naudojant pagrindinius kadrus. Pagrindiniai kadrai iš esmės yra žymekliai, kuriuos galite nustatyti laiko juostoje, kad nustatytumėte, kada turėtų atsirasti jūsų animacijos pradžios ir pabaigos būsenos.
Pavyzdžiui, pradėkime nuo labai paprastos animacijos: išnykimo. Objektas turi skirtingus atributus, o atributai, kurie keičiasi per tam tikrą laikotarpį, iš esmės yra animacija. Norėdami pamatyti šiuos atributus, spustelėkite šalia logotipo esančią piktogramą Išskleisti nuosavybė "Konvertuoti" .
Kurkite pagrindinius kadrus spustelėdami chronometro piktogramą, esančią šalia Ypatybės skydelyje Laiko juosta.
Išblukusios animacijos atveju norite dirbti su atributu, kuris matuoja objekto matomumą: neskaidrumą. Nepermatomumas nustatytas į 100%, nes pagal numatytuosius nustatymus logotipas yra visiškai matomas.
Spustelėkite chronometro piktogramą, esančią šalia parinkties Nepermatomumas, ir pamatysite deimantą, kur nustatytas grojamosios galvutės žymeklis (blyški mėlyna linija, kertanti laiko juostą). Tai yra pagrindinis kadras, iš esmės dabartinės nurodyto atributo reikšmės momentinė nuotrauka. Perkelkite pagrindinį kadrą spustelėdami ir vilkdami jį iki 2 sekundžių žymos laiko juostoje. Vilkite slankiklį atgal iki 0 sekundžių žymos, tada sukurkite kitą pagrindinį kadrą ir nustatykite neskaidrumą į 0%. Paspauskite tarpo klavišą, kad peržiūrėtumėte animaciją kompozicijos lange.
Po efektų
Pamatysite, kad sukūrėte sklandžiai išnykstančią animaciją, pakeisdami neskaidrumą nuo 0% iki 100% per 2 sekundes naudodami tik du pagrindinius kadrus. Taip visa animacija atliekama naudojant After Effects. Galite sukurti pradžios ir pabaigos pagrindinius kadrus skirtingais laiko juostos intervalais, o After Effects automatiškai apskaičiuoja reikiamus kadrų perėjimus, kad patektumėte iš taško A į tašką B (animacijos versle tradiciškai vadinami tarpiniais kadrais).
Paprasta sklandi animacija sukuriama naudojant du pagrindinius ypatybės Opacity kadrus.
Matote, kad yra daug atributų, su kuriais galite dirbti Pakeisti turtą, kurį čia trumpai paaiškinsime. Nesivaržykite eksperimentuoti su pagrindiniais kadrais ir modifikuoti kiekvieną, kad pajustumėte jų animacijos galimybes:
- Pozicija : Šis atributas apibūdina logotipo padėtį X, Y erdvėse maketavimo ekrane ir leidžia animuoti linijinį judėjimą.
- Skalė : Šis atributas apibūdina logotipo dydį (procentais nuo viso pradinio failo dydžio) ir leidžia kurti priartinimo arba sumažinimo animacijas.
- Rotacija : Šis atributas apibūdina orientaciją laipsniais ir leidžia kurti sukimosi animacijas.
Profesionalo patarimas :
Kalbant apie logotipo animavimą, prasminga dirbti atgal (kaip mes padarėme su išblukimu), nes animacija turėtų baigtis ant baigto, užbaigto logotipo. Tai reiškia, kad prieš ką nors keisdami turite sukurti pagrindinius kadrus, kad turėtumėte numatytosios būsenos atributų verčių momentines nuotraukas. Tada galite perkelti šiuos pagrindinius kadrus į norimą pabaigos tašką laiko juostoje (kad ir kiek norite, kad animacija tęstųsi) ir sukurti naujus pagrindinius kadrus, skirtus pakeitimams laiko juostos pradžioje.
5 veiksmas. Animuokite logotipą naudodami formos sluoksnius.
Dabar pereikime prie įdomesnių animacijos metodų naudojant formos sluoksnius. Formos sluoksniai yra objektai, kuriuose yra kelio informacijos, pvz., tvirtinimo taškai ir jungčių linijos (panašiai kaip ir vektorinėse programose), o manipuliavimas jais atveria duris į daugybę animacijos galimybių. Transformuoti savybes .
Kaip pasirinkti tinkamą logotipo spalvą?
Pirmiausia logotipą paversime formos sluoksniu. Skydelyje Sluoksniuota kompozicija (sluoksniai, sukurti 3 veiksme), pasirinkite visus sluoksnius, dešiniuoju pelės mygtuku spustelėkite ir pasirinkite " Sukurti " > « Sukurkite figūras iš vektorinio sluoksnio" . Pamatysite, kad kiekvienas sluoksnis yra dubliuojamas su žvaigždute šalia jo – tai formos sluoksnis. Įdėtas po formos sluoksniu, rasite Turinio nuosavybė be to Pakeisti turtą . Į dešinę Turinio savybės taip pat pamatysite mygtuką " Papildyti" , kuri leis pasirinkti dar daugiau animuotinų atributų.
Formos sluoksniuose yra mygtukas Pridėti (turinys nuosavybės dešinėje), leidžiantis pridėti visų rūšių animacinių savybių, pvz., kirpimo takus.
Objekto mastelio keitimas naudojant „Adobe Illustrator“.
Apkirpti kelius
Savo logotipui naudojau gana įprastą ir naudingą animaciją, naudodama savybę Trim Paths. Norėdami tai padaryti, pridėjau "Apkarpymo kelius" naudodami mygtuką " Papildyti" prie kiekvienos raidės formos sluoksnių, nustatykite atributo Pabaiga pagrindinį kadrą į 0 % laiko juostos pradžioje ir 100 % po maždaug 1 sekundės. Kaip matote, raidžių kontūrai atrodo nubrėžti nematoma ranka realiuoju laiku.
Naudodami ypatybę Trim Paths galite animuoti linijas, kad jos nubrėžtų save realiuoju laiku.
Be to, fone norėjau pridėti šiek tiek akcentinės animacijos. Kadangi dirbu nespalvotai, pasirinkau kilpinio tunelio efektą, primenantį Twilight Zone. Norėdami tai padaryti, įrankių skydelyje naudojau daugiakampio įrankį, kad nubrėžčiau figūrą savo kompozicijos centre ir sukurčiau naują formos sluoksnį.
Tada pridėjau ypatybę Repeater, sutelkiau padėtį ir padidinau kopijų skaičių. Tai dubliuoja formą ir sukuria iš pažiūros nesibaigiantį tunelį. Reguliuojant mastelį padidėja tarpas tarp kiekvienos kopijos, o pakeitus pasukimą kopijos nukreipiamos skirtingomis kryptimis, kad būtų įdomu pamatyti.
Galiausiai, norėdamas jį paįvairinti, laiko juostos pradžioje įvedžiau 0 poslinkį ir vėliau laiko juostoje nustatiau neigiamą reikšmę.
Naudodamas daugiakampio formos sluoksnį ir savybę Repeater, galėjau sukurti animuotą foną.
Tikriausiai atspėjote, kad yra daug formų sluoksnių variantų. Tiesa: šia tema yra pilni internetiniai kursai, todėl turėtumėte skirti laiko eksperimentuoti, praktikuotis ir mokytis.
Taip pat negaliu pasakyti, koks animacijos stilius jums tiks logotipas ar kokios konkrečios priemonės animacijos, kurių jums prireiks norint pasiekti šį stilių. Tačiau galiu patarti, kaip tai atrasti pačiam. Ieškokite įkvėpimo iš kitų animuotų logotipų, pvz., konkurentų, prekių ženklų, kuriais žavitės, ir (arba) svetainių, pvz., „Pinterest“ ar „Dribbble“, kaip ir kurdami logotipą.
Pamatysite, kad pradėję juos analizuoti naudodami naujas žinias, kaip animuoti logotipą, daugelis iš jų yra pagrįsti paprastais manipuliacijos su formomis ir transformacijomis (net ir tomis, kurios aiškiai dedamos su pažangiais stilizuotais efektais). Suradę keletą jums patinkančių animacijų, galite dirbti atgal naudodami „After Effects“ ir pabandyti pritaikyti šias animacijas praktikos tikslais.
6 veiksmas: nustatykite laiką.
Pakalbėkime apie laiką, kuris apibūdina animacijos kadrų tempą visos animacijos metu. Galite pamatyti vaizdinį laiko vaizdą apsilankę grafikų rengyklėje. Norėdami tai padaryti, laiko juostos skydelio viršuje spustelėkite diagramos piktogramą (pažymėtą Grafikų rengyklė, kai užveskite pelės žymeklį virš jos), ir tai pakeis laiko juostą į linijinę diagramą.
Jei spustelėsite vieną iš pagrindinių kadrų atributų, pamatysite tiesią liniją nuo vieno pagrindinio kadro iki kito. Šiuo metu, kadangi kūrėme tik pradžios ir pabaigos taškus, palikome After Effects laikui nustatyti. Be krypties, After Effects tolygiai perkelia kiekvieną animacijos kadrą, todėl gaunama visiškai tiesi linija.
Diagramos rengyklė rodo raktų kadrų laiką, kaip parodyta linijinėje diagramoje.
Tačiau tikslingas laiko keitimas yra tai, kas animacijai suteikia tikroviškumo. Pavyzdžiui, atšokančio kamuolio animacijoje kamuolys juda lėčiau atšokimo aukštyje ir greičiau artėdamas prie žemės dėl impulso ir gravitacijos. Kitaip tariant, jis nejuda tuo pačiu greičiu per visą animaciją, o jei taip, jis išsiskirtų kaip robotas.
Grafiko rengyklės apačioje esantys Bezier įrankiai leidžia reguliuoti grafiko linijos kreivumą.
Konvertuokite pagrindinius kadrus į „Auto Bezier“.
Grafikų rengyklė leidžia reguliuoti savo animacijos laiką, naudojant vadinamąsias Bezier rankenas, kad paverstumėte grafiko liniją į kreivę. Apatiniame dešiniajame grafiko rengyklės kampe matysite prie linijų pridėtas kvadratinių taškų piktogramas – tai Bezier įrankiai.
Spustelėkite vieną iš pagrindinių kadrų ir užveskite pelės žymeklį ant Bezier įrankių, kol rasite kadrą, pažymėtą " Konvertuoti pagrindinius kadrus į „Auto Bezier“ . Kai paspausite tai, grafike pamatysite geltoną žymeklį. Vilkdami šią rankenėlę linija sulinks ir pasikeis animacijos laikas. Kur kreivė ryškesnė, kadrai bus atkuriami greičiau, o kur kreivė sklandesnė – lėčiau.
Ryškesnė kreivė atitinka greitesnį sinchronizavimą, o sklandesnė kreivė – lėtesnį sinchronizavimą.
Norint iš tikrųjų suprasti savo laiko koregavimo niuansus, reikia animacijos patirties, todėl Bezier kreivių koregavimas rankiniu būdu yra sudėtingesnė tema. Šiame pradedančiųjų vadove rekomenduoju naudoti Bezier įrankį Lengvas Lengvumas (kuris pasirinktam pagrindiniam kadrui taiko automatinę kreivę) visiems animacijos laiko intervalams. Galite kreiptis Lengvas Lengvumas į pagrindinį kadrą, esantį už diagramos rengyklės ribų, pasirinkdami pagrindinį kadrą ir spustelėdami dešinįjį pelės klavišą.
7 veiksmas: eksportuokite savo logotipą.
Kai būsite pasirengę eksportuoti baigtą animuotą logotipą, pasirinkite " Failas " > « Eksportuoti" > « Pridėti „Adobe Media Encoder“ į eilę“ . After Effects eksportuoja pagal numatytuosius nustatymus failą formatu mp4, kuris tinka vaizdo įrašams. Kadangi norime sukurti bendrinamą logotipo vaizdo failą, eksportuosime jį kaip animuotą GIF. „Media Encoder“ lange spustelėkite rodyklę šalia paryškintos mėlynos teksto eilutės po žodžiu „Formatas“ ir pasirinkite „ Animuotas GIF“ . Taip pat galite nustatyti baigto failo paskirties aplanką spustelėdami mėlyną tekstą po žodžiais „Išvesties failas“.
Norėdami eksportuoti failą, eikite į Failas > Eksportuoti > Įtraukti į „Adobe Media Encoder Queue“ ir stulpelio Formatas išskleidžiamajame sąraše pasirinkite Animated Gif.
Dukart spustelėkite paryškintą mėlyną tekstą po išankstiniu nustatymu, kad atidarytumėte langą Eksportavimo parinktys. Yra keletas parinkčių, kurias norėsite peržiūrėti, kad sumažintumėte failo dydį: kokybė (nustačiau jį į 20), kadrų dažnis (nustatau 10, nors vaizdo įrašams rekomenduojamas didesnis kadrų dažnis (fps) ir Trukmė, kuri yra peržiūros mėlyna juosta (savo sutrumpinau iki 4 sekundžių). Pasirinkite GERAI, norėdami uždaryti šį langą.
Kai baigsite, viršutiniame dešiniajame Media Encoder kampe pasirinkite žalią paleidimo piktogramą ir failas bus rodomas pasirinktame paskirties aplanke. Štai viskas: baigta logotipo animacija!
Atgaivinkite savo prekės ženklą naudodami logotipo animaciją.
-
Logotipo animacija yra daugiau nei tik populiari tendencija, kuria prekiniai ženklai yra priversti sekti. Logotipo animacija taip pat turi neabejotiną magiją ir yra puikus būdas sukurti vizualinio malonumo akimirką visiems, kurie bendrauja su jūsų prekės ženklu. Laimei, animacijos programinė įranga išsivystė taip, kad beveik kiekvienas, nepaisant įgūdžių, gali pridėti šiek tiek magijos prie savo logotipo.
Nepaisant to, nors ši pamoka skirta jums pradėti nuo logotipų animacijos pagrindų, reikia daug bandymų ir klaidų, praktikos ir eksperimentų, kad gautumėte ką nors, išskyrus paprastą animaciją. Jei norite tikrai ypatingos logotipo animacijos, verta investuoti į profesionalų logotipo animatorių.
Оставить комментарий