Logotipa animācija ir process, kurā tiek ieviesta kustība vai izmaiņas logotipa vizuālajos elementos, lai padarītu to dinamiskāku un pievilcīgāku. To var izmantot dažādām logotipa daļām, piemēram, tekstam, attēliem, krāsām un formām, un tam var būt dažādas sarežģītības pakāpes, sākot no vienkāršām animācijām, piemēram, teksta mirgojošām vai izbalējošām krāsām, līdz sarežģītām animācijām, kas ietver kustīgus vai interaktīvus objektus. ietekmi.

Logotipu animācija kļūst arvien izplatītāka. Starp viedtālruņiem un vispārējo interneta tehnoloģiju attīstību logotipi tagad ir daudz izplatītāki digitālajās telpās, un tas paver durvis uz vizuāliem efektiem, piemēram, animāciju, kas nav iespējama ar fiziskiem produktiem. Protams, logo animācijas pieaugošā popularitāte nozīmē, ka arvien lielākam skaitam zīmolu tā būs nepieciešama, lai saglabātu konkurētspēju. Tātad logotipa animācijas apgūšana var būt vērtīga prasme, kas pacels jūsu logotipu uz nākamo līmeni.

Kā izvēlēties pareizo krāsu savam logotipam?

Tajā pašā laikā animācijas programmatūra ir kļuvusi visuresošāka, racionalizētāka un intuitīvāka, lai atbalstītu šo augošo lietotāju bāzi. Tāpēc neatkarīgi no tā, cik tehniski un sarežģīti izklausās logotipa animācija, pat iesācēji tagad var izveidot vienkāršas, bet efektīvas animācijas.

 

Logotipa animācija programmā After Effects —

1. darbība. Sagatavojiet logotipa failu.

Mēs faktiski sāksim savu apmācību par logotipa animēšanu programmā Adobe Illustrator (vai līdzīgā logotipa izstrādes programmatūrā). Tas ir nepieciešams, lai nodrošinātu, ka mūsu fails animācijai izveidots logotips.

Logo reģistrācija

Lai gan pati animācijas programmatūra ir rastra, oriģinālajiem logotipa failiem jābūt vektora formātā. Tas ļauj tos mainīt bez bojājumu attēla kvalitātei (piemēram, rastra logotipa mēroga palielināšana noved pie pikseļu veidošanās), un tas noderēs vēlāk, strādājot ar formas slāņiem.

Adobe Illustrator ekrānuzņēmums ar logotipu logotipa animācijas iekšpusē.

Pārliecinieties, vai jūsu logotips ir sadalīts slāņos, izmantojot slāņu paneli.

Logotipam arī jābūt daudzslāņainam, nevis grupētam vienā objektā. Tādējādi ir viegli izveidot sarežģītākas animācijas, animējot atsevišķas logotipa daļas. Jūs varat izveidot jaunus slāņus, izmantojot "  Pievienot jaunu slāni" slāņu paneļa apakšā un pēc tam kopējiet un ielīmējiet tajos sava logotipa daļas.

Visbeidzot, tā kā animācijai ir digitāls raksturs, mēs strādājam arī ar RGB krāsām. Ja jūsu Illustrator fails ir iestatīts uz CMYK, varat to mainīt, atlasot savu logotipu un pārejot uz Rediģēt > Rediģēt krāsas > Konvertēt uz RGB.

Kad esat gatavs, eksportējiet savu logotipu kā pilnībā slāņu vektora failu. Tā kā After Effects failu tipi ir daļa no Adobe programmatūras saimes, es saglabāšu izveidoto logotipu kā AI failu (Adobe Illustrator), taču ir vairāki dažādi vektorfailu veidi, no kuriem izvēlēties, ja izmantojat citu programmatūru.

2. darbība. Importējiet savu logotipu programmā After Effects. Logotipa animācija

Atveriet After Effects. Saskarne no pirmā acu uzmetiena var šķist sarežģīta, tāpēc noskaidrosim pamatus:

Adobe After Effects logotipa animācija

 

 
  1. Rīkjosla : šeit jūs varat piekļūt galvenajam grafikas rīkipiemēram, pildspalvas rīks, rakstīšanas rīks utt.
  2. Projekta panelis : šeit jūs pārvaldāt un kārtojat visa projekta multivides failus.
  3. Kompozīcijas logs : Šis ir video priekšskatījuma logs, kurā varat priekšskatīt animāciju pašreizējam skaņdarbam (ko bieži sauc par kompozīciju), ar kuru strādājat. Kompozīcijas būtībā ir ainas, katrai no tām ir atsevišķas animācijas laika skalas. Sīkāk par skaņdarbiem apspriedīsim nākamajā sadaļā.
  4. Laika skala : Šeit jūs izveidosit savu animāciju. Tas sastāv gan no burtiskas laika skalas labajā pusē (kur jūs iestatīsit animācijas notikumus, lai tie darbotos laika skalā), gan izkārtojuma apgabals kreisajā pusē (kur jūs pārklājat un rediģēsit savu multivides līdzekļu atribūtus).
  5. Vadības panelis : Šeit varat piekļūt dažādiem atbalsta līdzekļiem, piemēram, multivides informācijai, rindkopu un līdzinājuma opcijām, kā arī iepriekš iebūvētām animācijas un vizuālo efektu bibliotēkām, kas iebūvētas programmā After Effects.

Ja neesat pārliecināts par kādu rīku vai pogu, novietojot kursoru virs tā, tiks parādīts apraksts.

Lai importētu logotipa failu, vienkārši velciet to uz projektu paneli vai atlasiet  Fails "  > «  Importēt "  > «  Fails " . Nākamajā dialoglodziņā atlasiet Importēt multividi kā  kadrus un sapludinātos slāņus .

3. darbība: iestatiet kompozīciju. Logotipa animācija.

Kompozīcija (kompozīcija) ir konteiners, kas ļauj multivides failiem izveidot, rediģēt un lietot animāciju. Lielāka produkcija, piemēram, filma, ietvers vairākas dziesmas, kas sakārtotas projekta panelī. Tātad jūs varat iedomāties ierakstus kā vienu ainu šajā filmā, un katram ierakstam būs sava atsevišķa laika skala. Mūsu gadījumā logotipa animācijai, kas ilgst mazāk nekā piecas sekundes, ir nepieciešams ļoti maz kompozīciju.

After Effects ar izveidoto kompozīciju. Logotipa animācija

Lai pielāgotu kompozīciju, velciet multivides failus uz laika skalas paneļa kreiso pusi.

Sāksim ar vienkāršu fonu. Ar peles labo pogu noklikšķiniet uz izkārtojuma paneļa un atlasiet " Izveidot "  > «  Ciets" . Tā kā mans logotips ir balts, es izvēlējos solid melna krāsa, bet jūs varat izvēlēties jebkuru krāsu. Nākamajā logā nosauciet cieto elementu (manā gadījumā "BG"), noklikšķiniet uz "  Izveidojiet izmēru  dators" un izvēlieties "  LABI" . Tagad velciet savu logotipa failu no projekta paneļa uz paneli Timeline, un jums vajadzētu redzēt savu logotipu priekšskatītam kompozīcijas logā. Ja nē, noteikti pārkārtojiet slāņus, velkot cieto fonu zem logotipa faila.

Ar peles labo pogu noklikšķiniet uz logotipa faila izkārtojuma panelī un atlasiet Izveidot " > « Pārvērst par daudzslāņu kompozīciju" . Tādējādi jūsu logotipa fails tiks pārveidots par citu sastāvu (redzēsit, ka ikona ir mainījusies). Veicot dubultklikšķi uz logotipa faila, tagad tiks atvērta jauna cilne un tiks atvērta šī jaunā kompozīcija, kurā ir visi atsevišķie slāņi, ko esat iestatījis programmā Illustrator. Tagad jūs varat redzēt, kā darbojas kompozīcijas: tās būtībā ir kā apakšmapes.

Logotipa animācija

Ja vēlaties, varat pārvērst katru no šiem slāņiem atsevišķās kompozīcijās, ar peles labo pogu noklikšķinot un atlasot  Sākotnējais sastāvs" . Tas šim slānim piešķirs savu animācijas laika skalu, kas ir ligzdots iepriekšējā kompozīcijā. Un, ja vēlaties animēt visu logotipu uzreiz, jums vajadzētu izmantot laika skalu, kas saistīta ar galveno kompozīciju.

Ņemot to vērā, sapratīsim, kā šie laika grafiki darbojas animācijā.

4. darbība: animējiet logotipu, izmantojot atslēgas kadrus

After Effects (un lielākā daļa animācijas programmatūras) darbojas, izmantojot atslēgas kadrus. Atslēgkadri būtībā ir marķieri, kurus varat iestatīt laika skalā, lai noteiktu, kad jāiestājas jūsu animācijas sākuma un beigu stāvokļiem.

Piemēram, sāksim ar ļoti vienkāršu animāciju: izbalēšanu. Objektam ir pievienoti dažādi atribūti, un atribūti, kas mainās noteiktā laika periodā, būtībā ir animācija. Lai skatītu šos atribūtus, blakus logotipam noklikšķiniet uz ikonas Izvērst, pēc tam noklikšķiniet uz rekvizīts "Konvertēt" .

Adobe After Effects laika skalas paneļu logotipa animācija

Izveidojiet atslēgkadrus, laika skalas panelī noklikšķinot uz hronometra ikonas blakus Rekvizīti.

Izbalējošai animācijai vēlaties strādāt ar atribūtu, kas mēra objekta redzamību: necaurredzamība. Necaurredzamība ir iestatīta uz 100%, jo pēc noklusējuma logotips ir pilnībā redzams.

Noklikšķiniet uz hronometra ikonas blakus opcijai Necaurredzamība, un jūs redzēsit rombiņu, kur ir iestatīts atskaņošanas galviņas marķieris (blāvi zila līnija, kas šķērso laika skalu). Šis ir atslēgas kadrs, kas būtībā ir noteikta atribūta pašreizējās vērtības momentuzņēmums. Pārvietojiet atslēgas kadru, noklikšķinot un velkot to līdz 2 sekunžu atzīmei laika skalā. Velciet slīdni atpakaļ līdz 0 sekundes atzīmei, pēc tam izveidojiet citu atslēgas kadru un iestatiet necaurredzamību uz 0%. Nospiediet atstarpes taustiņu, lai skatītu animāciju kompozīcijas logā.

After Effects

Jūs redzēsit, ka esat izveidojis vienmērīgu izgaismojošu animāciju, mainot necaurredzamību no 0% uz 100% 2 sekundēs tikai ar diviem atslēgas kadriem. Šādi tiek veikta visa animācija programmā After Effects. Varat izveidot sākuma atslēgkadru un beigu atslēgkadru ar dažādiem intervāliem gar laika skalu, un After Effects automātiski aprēķina nepieciešamās kadru pārejas, lai nokļūtu no punkta A uz punktu B (animācijas biznesā tos tradicionāli sauc par starpkadriem).

Animēts gif ar populāru animāciju programmā After Effects

Vienkārša vienmērīga animācija tiek izveidota, izmantojot divus atslēgas kadrus rekvizītam Opacity.

Varat redzēt, ka ir vairāki atribūti, ar kuriem varat strādāt Pārveidot īpašumu, ko mēs šeit īsi paskaidrosim. Droši eksperimentējiet ar atslēgkadriem un modificējiet katru, lai izjustu to animācijas iespējas:

  • Pozīcija : šis atribūts apraksta logotipa atrašanās vietu X, Y izkārtojuma ekrānā un ļauj animēt lineāru kustību.
  • Tuvināt : Šis atribūts apraksta logotipa izmēru (procentos no oriģinālā faila pilna izmēra) un ļauj izveidot tuvināšanas vai samazināšanas animācijas.
  • Rotācija : šis atribūts apraksta orientāciju grādos un ļauj izveidot rotācijas animācijas.

Padoms no profesionāļa :

Kad runa ir par logotipa animēšanu, ir lietderīgi strādāt atpakaļgaitā (kā mēs to darījām ar izgaismošanu), jo animācijai jābeidzas uz pabeigta, pilnīga logotipa. Tas nozīmē, ka jums ir jāizveido atslēgas kadri, pirms kaut ko maināt, lai jums būtu atribūtu vērtību momentuzņēmumi to noklusējuma stāvoklī. Pēc tam varat pārvietot šos atslēgkadrus uz vēlamo beigu punktu laika skalā (neatkarīgi no tā, cik ilgi vēlaties, lai animācija ilgst) un izveidot jaunus atslēgkadrus laika skalas sākumā veiktajām izmaiņām.

5. darbība. Animējiet logotipu, izmantojot formas slāņus.

Tagad pāriesim pie interesantākām animācijas metodēm, izmantojot formas slāņus. Formu slāņi ir objekti, kas satur ceļa informāciju, piemēram, enkura punktus un savienotāju līnijas (līdzīgi kā vektoru programmās), un, manipulējot ar tiem, tiek atvērtas dažādas animācijas iespējas. Pārveidot īpašības .

Kā izvēlēties pareizo krāsu savam logotipam?

Vispirms mēs pārveidosim logotipu formas slānī. Slāņu kompozīcijas panelī (3. darbībā izveidotie slāņi) atlasiet visus savus slāņus, ar peles labo pogu noklikšķiniet un atlasiet "  Izveidot "  > «  Izveidojiet formas no vektora slāņa" . Jūs redzēsiet, ka katrs slānis ir dublēts ar zvaigznīti blakus - tas ir formas slānis. Sagultas zem formas slāņa, jūs atradīsiet Satura īpašums Papildus Pārveidot īpašumu . Pa labi no Satura īpašības jūs redzēsit arī pogu " Pievienot " , kas ļaus atlasīt vēl vairāk animējamo atribūtu.

Adobe After Effects laika skalas paneļi

Formu slāņos ir poga Pievienot (rekvizīta Saturs labajā pusē), kas ļauj pievienot visu veidu animācijas rekvizītus, piemēram, apgriešanas ceļus.

Objekta mērogošana programmā Adobe Illustrator

Apgriezt ceļus

Savam logotipam es izmantoju diezgan izplatītu un noderīgu animāciju, izmantojot īpašumu Trim Paths. Lai to izdarītu, es pievienoju "Apgriešanas ceļi", izmantojot pogu " Pievienot " katra burta formas slāņiem laika skalas sākumā iestatiet atribūta beigu atslēgkadru uz 0% un aptuveni pēc 100 sekundes — 1%. Kā redzat, burtu kontūras, šķiet, ir zīmētas ar neredzamu roku reāllaikā.

Trim Paths ļauj animēt līnijas. Logotipa animācija

Izmantojot rekvizītu Trim Paths, varat animēt līnijas, lai tās zīmētu sevi reāllaikā.

Turklāt es gribēju pievienot fona animāciju ar akcentu. Tā kā es strādāju melnā un baltā krāsā, es izvēlējos cilpas tuneļa efektu, kas atgādina Krēslas zonu. Lai to izdarītu, es izmantoju daudzstūra rīku panelī Rīki, lai uzzīmētu formu manas kompozīcijas centrā, izveidojot jaunu formas slāni.

Pēc tam es pievienoju rekvizītu Repeater, centrēju pozīciju un palielināju kopiju skaitu. Tas dublē formu, radot šķietami nebeidzamu tuneli. Mēroga pielāgošana palielina atstarpi starp katru kopiju, un, mainot rotāciju, kopijas tiek orientētas dažādos virzienos vizuālas intereses nodrošināšanai.

Visbeidzot, lai to paspilgtinātu, es laika skalas sākumā nobīdīju 0 un vēlāk iestatīju to uz negatīvu vērtību laika skalā.

Adobe After Effect ekrānuzņēmums

Izmantojot daudzstūra formas slāni un rekvizītu Repeater, es varēju izveidot animētu fonu.

Jūs droši vien uzminējāt, ka formu slāņiem ir daudz iespēju. Tā ir taisnība: ir pieejami pilni tiešsaistes kursi par šo tēmu, un jums vajadzētu veltīt laiku eksperimentiem, praksei un mācībām.

Es arī nevaru pateikt, kurš animācijas stils jums būs piemērots logo vai kādi konkrēti rīki animācijas, kas jums būs nepieciešamas, lai sasniegtu šo stilu. Tomēr varu sniegt padomu, kā to atklāt pašam. Meklējiet iedvesmu no citiem animētiem logotipiem, piemēram, saviem konkurentiem, zīmoliem, kurus jūs apbrīnojat, un/vai vietnēs, piemēram, Pinterest vai Dribbble — tāpat kā to darījāt, kad sākotnēji izveidojāt logotipu.

Jūs atklāsiet, ka, tiklīdz sākat tos analizēt, izmantojot savas jaunās zināšanas par logotipa animēšanu, daudzi no tiem ir balstīti uz vienkāršu manipulācijas ar formām un pārveidojumiem (pat tiem, kas ir skaidri noslāņoti ar uzlabotiem stilizētiem efektiem). Kad esat atradis dažas, kas jums patīk, varat strādāt atpakaļ programmā After Effects, lai mēģinātu šīs animācijas reversā inženierijā izmantot praksē.

6. darbība: iestatiet laiku.

Parunāsim par laiku, kas raksturo animācijas kadru tempu visā animācijas laikā. Jūs varat redzēt vizuālu laika attēlojumu, atverot grafiku redaktoru. Lai to izdarītu, laika skalas paneļa augšdaļā noklikšķiniet uz diagrammas ikonas (norādīta Graph Editor, kad virzāt virs tās), un tas mainīs laika skalu uz līniju diagrammu.

Ja noklikšķināsit uz kāda no atslēgkadru atribūtiem, jūs redzēsit taisnu līniju no viena atslēgkadra uz nākamo. Šobrīd, tā kā mēs veidojām tikai sākuma un beigu punktu atslēgkadrus, mēs atstājām After Effects, lai noteiktu laiku. Bez virziena After Effects vienmērīgi pārvieto katru animācijas kadru, tādējādi iegūstot perfekti taisnu līniju.

Grafiku redaktors. Logotipa animācija

Diagrammas redaktors parāda atslēgas kadru laiku, kā parādīts līniju diagrammā.

Tomēr mērķtiecīga laika maiņa ir tā, kas animācijai piešķir reālisma sajūtu. Piemēram, atlecošās bumbas animācijā bumba kustas lēnāk atlēciena augstumā un ātrāk, tuvojoties zemei, pateicoties impulsam un gravitācijai. Citiem vārdiem sakot, viņš nepārvietojas ar tādu pašu ātrumu visas animācijas laikā, un, ja viņš to darītu, viņš izceltos kā robots.

Bezier Tools logotipa animācija

Bezier rīki, kas atrodas diagrammas redaktora apakšā, ļauj pielāgot grafikas līnijas izliekumu.

Pārvērtiet atslēgkadrus uz Auto Bezier

Grafiku redaktors ļauj pielāgot savas animācijas laiku, izmantojot tā sauktos Bezjē rokturus, lai diagrammas līniju pārveidotu par līkni. Diagrammu redaktora apakšējā labajā stūrī redzēsit līnijām pievienotas kvadrātveida punktu ikonas — tie ir Bezjē rīki.

Noklikšķiniet uz viena no atslēgas kadriem un virziet kursoru virs Bezier rīkiem, līdz atrodat to ar nosaukumu "  Pārvērst atslēgkadrus uz Auto Bezier . Noklikšķinot uz tā, diagrammā parādīsies dzeltens marķieris. Velkot šo rokturi, līnija salieksies, un tas mainīs animācijas laiku. Ja līkne ir izteiktāka, kadri tiks atskaņoti ātrāk, bet tur, kur līkne ir vienmērīgāka, kadri tiks atskaņoti lēnāk.

Bezier rīku ekrānuzņēmums programmā Adobe After Effects

Asāka līkne atbilst ātrākai sinhronizācijai, un vienmērīgāka līkne atbilst lēnākai sinhronizācijai.

Lai patiesi izprastu sava laika pielāgošanas nianses, ir nepieciešama animācijas pieredze, tāpēc Bezjē līkņu manuāla pielāgošana ir sarežģītāka tēma. Šajā rokasgrāmatā iesācējiem es iesaku izmantot Bezier rīku Viegli Vieglums (kas piemēro automātisku līkni jūsu atlasītajam atslēgas kadram) visiem animācijas laika intervāliem. Var pieteikties  Viegli Vieglums  uz atslēgkadru ārpus diagrammas redaktora, atlasot atslēgas kadru un ar peles labo pogu noklikšķinot.

7. darbība. Eksportējiet savu logotipu.

Kad esat gatavs eksportēt gatavo animēto logotipu, atlasiet " Fails " > «  Eksportēt"  > «  Pievienot rindai Adobe Media Encoder" . After Effects eksportē pēc noklusējuma failu formātā mp4, kas ir piemērots video. Tā kā mēs vēlamies izveidot koplietojamu sava logotipa attēla failu, mēs to eksportēsim kā animētu GIF. Multivides kodētāja logā noklikšķiniet uz bultiņas blakus izceltajai zilajai teksta rindiņai zem vārda "Format" un atlasiet "  Animēts GIF" . Varat arī iestatīt galamērķa mapi gatavajam failam, noklikšķinot uz zilā teksta zem vārdiem "Izvades fails".

Adobe Media kodētājs

Lai eksportētu failu, dodieties uz Fails > Eksportēt > Pievienot Adobe Media Encoder rindai un kolonnas Formāts nolaižamajā sarakstā atlasiet Animated Gif.

Veiciet dubultklikšķi uz iezīmētā zilā teksta zem sākotnējā iestatījuma, lai atvērtu logu Eksportēšanas opcijas. Ir dažas iespējas, kuras vēlaties apskatīt, lai samazinātu faila lielumu: kvalitāte (es iestatīju to uz 20), kadru nomaiņas ātrumu (es iestatīju to uz 10, lai gan videoklipiem ir ieteicams lielāks kadru ātrums (fps)) un Ilgums, kas ir zilā josla priekšskatījumā (es saīsināju savu līdz 4 sekundēm). Izvēlieties  LABI,  lai aizvērtu šo logu.

Kad esat pabeidzis, programmas Media Encoder augšējā labajā stūrī atlasiet zaļo atskaņošanas ikonu, un jūsu fails tiks parādīts jūsu izvēlētajā mērķa mapē. Tas arī viss: pabeigta logotipa animācija!

Atdzīviniet savu zīmolu ar logotipa animāciju.
Sākot no

Logotipa animācija ir vairāk nekā tikai populāra tendence, kurai zīmoli ir spiesti sekot. Logotipu animācijai ir arī nenoliedzama burvība, un tas ir lielisks veids, kā radīt vizuālas baudas mirkli ikvienam, kas mijiedarbojas ar jūsu zīmolu. Un par laimi, animācijas programmatūra ir attīstījusies tā, ka gandrīz ikviens, neatkarīgi no prasmēm, var pievienot nedaudz šīs burvības savam logotipam.

Tomēr, lai gan šī apmācība ir paredzēta, lai jūs varētu sākt ar logotipa animācijas pamatiem, ir nepieciešams daudz izmēģinājumu un kļūdu, prakses un eksperimentu, lai iegūtu kaut ko, kas nav pamata animācija. Ja vēlaties patiešām īpašu logotipa animāciju, profesionāls logotipa animators ir ieguldījuma vērts.

 АЗБУКА

 

Web dizaina definīcijas un termini