Logo animatsioon on protsess, mille käigus tutvustatakse liikumist või logo visuaalseid elemente muudetakse, et muuta see dünaamilisemaks ja atraktiivsemaks. Seda saab rakendada logo erinevatele osadele, nagu tekst, pildid, värvid ja kujundid, ning see võib olla erineva keerukusega, alates lihtsatest animatsioonidest, nagu teksti vilkumine või tuhmumine, kuni keeruliste animatsioonideni, mis hõlmavad liikuvaid või interaktiivseid objekte. mõjusid.

Logo animatsioon muutub üha tavalisemaks. Nutitelefonide ja internetitehnoloogia üldise arengu vahel on nüüd digitaalsetes ruumides palju enam levinud logod ja see avab ukse visuaalsetele efektidele nagu animatsioon, mida füüsiliste toodetega pole võimalik teha. Loomulikult tähendab logoanimatsiooni kasvav populaarsus, et üha rohkem kaubamärke vajab seda konkurentsis püsimiseks. Nii et logo animeerimise õppimine võib olla väärtuslik oskus, mis viib teie logo järgmisele tasemele.

Kuidas valida oma logole õiget värvi?

Samal ajal on animatsioonitarkvara muutunud üldlevinud, sujuvamaks ja intuitiivsemaks, et toetada seda kasvavat kasutajaskonda. Nii et hoolimata sellest, kui tehniline ja keeruline logoanimatsioon ka ei kõlaks, saavad isegi algajad nüüd luua lihtsaid, kuid tõhusaid animatsioone.

 

Logo animatsioon rakenduses After Effects –

1. samm. Valmistage ette oma logofail.

Фактически мы начнем наше руководство по анимации логотипа в Adobe Illustrator (или в аналогичном программном обеспечении для разработки логотипов,  ). Это необходимо для того, чтобы убедиться, что наш файл логотипа настроен для анимации.

Logo registreerimine

Хотя само программное обеспечение для анимации является растровым, исходные файлы логотипов должны быть в  векторном формате . Это позволяет изменять их без kahju для качества изображения (например, увеличение масштаба растрового логотипа приводит к пикселизации), и это будет полезно позже при работе со слоями-фигурами.

Adobe Illustratori ekraanipilt logoga logo animatsiooni sees.

Veenduge, et teie logo oleks kihtide paneeli abil jagatud.

Samuti peaks logo olema mitmekihiline, mitte grupeeritud üheks objektiks. See muudab logo üksikute osade animeerimise abil lihtsaks keerukamate animatsioonide loomise. Saate luua uusi kihte kasutades "  Lisa uus kiht" paneeli Kihid allservas ning seejärel kopeerige ja kleepige osad oma logost neisse.

Lõpuks, kuna animatsioon on oma olemuselt digitaalne, töötame ka RGB värvidega. Kui teie Illustratori failiks on seatud CMYK, saate seda muuta, valides oma logo ja navigeerides menüüsse Redigeerimine > Redigeeri värve > Teisenda RGB-vormingusse.

Когда вы будете готовы, экспортируйте свой логотип как полностью многослойный векторный файл. Поскольку типы файлов After Effects относятся к семейству программного обеспечения Adobe, я собираюсь сохранить созданный мной логотип в виде файла AI (Adobe Illustrator), но есть несколько различных  типов векторных файлов  на выбор, если вы используете другой программного обеспечения.

2. samm: importige oma logo rakendusse After Effects. Logo animatsioon

Avage After Effects. Liides võib esmapilgul tunduda keeruline, seega võtame põhitõed lahti:

Adobe After Effectsi logoanimatsioon

 

 
  1. Tööriistariba : здесь вы можете получить доступ к основным инструментам построения графики, таким как инструмент «Перо», инструмент «Текст» и т. Д.
  2. Projekti paneel : siin saate hallata ja korraldada kogu projekti meediafaile.
  3. Kompositsiooni aken : see on video eelvaate aken, kus saate vaadata praeguse kompositsiooni (mida sageli nimetatakse kompositsiooniks), mille kallal töötate, animatsiooni eelvaadet. Kompositsioonid on sisuliselt stseenid, millest igaühel on eraldi animatsiooni ajaskaala. Kompositsioone käsitleme üksikasjalikumalt järgmises osas.
  4. Ajaskaala : Siin saate luua oma animatsiooni. See koosneb nii paremal olevast sõnasõnalisest ajajoonest (kus seadistate animatsioonisündmused ajaskaalal käitamiseks) kui ka vasakul asuvast paigutusalast (kus saate oma meediumivarade atribuute üle kanda ja muuta).
  5. Töölaud : siit pääsete juurde erinevatele tugifunktsioonidele, nagu meediumiteave, lõigu- ja joondusvalikud ning After Effectsi sisseehitatud animatsiooni- ja visuaalefektide teegid.

Kui te pole tööriista või nupu osas kindel, kuvatakse kirjeldus, kui hõljute kursorit selle kohal.

Logofaili importimiseks lohistage see lihtsalt projektipaneelile või valige  Fail "  > «  Import "  > «  Fail " . Järgmises dialoogiboksis valige Impordi meedium kui  kaadrid ja liidetud kihid .

3. samm: seadistage kompositsioon. Logo animatsioon.

Kompositsioon (comp) on konteiner, mis võimaldab koostada, redigeerida ja rakendada meediumifailidele animatsioone. Suurem lavastus, näiteks film, sisaldab projektipaneelil mitut rada. Nii et saate kujutada lugusid selle filmi ühe stseenina ja igal rajal on oma eraldi ajaskaala. Meie puhul nõuab alla viie sekundi kestev logoanimatsioon väga vähe kompositsioone.

Loodud kompositsiooniga After Effects. Logo animatsioon

Kompositsiooni kohandamiseks lohistage meediafailid ajaskaala paneeli vasakusse serva.

Alustame lihtsa taustaga. Paremklõpsake paigutuspaneelil ja valige " Loo "  > «  kindel" . Поскольку мой логотип белый, я выбрал сплошной must värv, но вы можете выбрать любой цвет. В следующем окне назовите твердое тело (в моем случае «BG»), нажмите кнопку «  Tee suurus  arvuti" ja valige "  OKEI" . Nüüd lohistage oma logofail projektipaneelilt ajaskaala paneelile ja peaksite nägema oma logo eelvaadet kompositsiooniaknas. Kui ei, siis korraldage kindlasti kihid ümber, lohistades logofaili all olevat ühtlast tausta.

Paremklõpsake paigutuspaneelil logofaili ja valige Loo " > « Teisenda mitmekihiliseks kompositsiooniks" . See muudab teie logofaili teistsuguseks (näete, et ikoon on muutunud). Topeltklõps logofailil avab nüüd uue vahekaardi ja viib teid selle uue kompositsiooni juurde, mis sisaldab kõiki Illustratoris seadistatud üksikuid kihte. Nüüd näete, kuidas kompid töötavad: need on sisuliselt nagu alamkaustad.

Logo animatsioon

Soovi korral saate kõik need kihid teisendada eraldi kompositsioonideks, paremklõpsates ja valides  Esialgne koosseis" . See annab sellele kihile oma animatsiooni ajaskaala, mis on paigutatud eelmisesse kompositsiooni. Ja kui soovite animeerida kogu logo korraga, peaksite kasutama põhikompositsiooniga seotud ajaskaala.

Kui see on kõrvale jäänud, mõistame, kuidas need ajaskaalad animatsiooni puhul töötavad.

4. samm: animeerige logo võtmekaadrite abil

After Effects (ja enamik animatsioonitarkvarasid) töötab võtmekaadrite abil. Võtmekaadrid on põhiliselt markerid, mille saate ajaskaalal määrata, et määrata, millal teie animatsiooni algus- ja lõppolekud peaksid esinema.

Näiteks alustame väga lihtsa animatsiooniga: sisse tuhmumine. Objektiga on seotud erinevad atribuudid ja atribuudid, mis teatud aja jooksul muutuvad, on sisuliselt animatsioon. Nende atribuutide nägemiseks klõpsake logo kõrval ikooni Laienda ja seejärel omadus "Teisenda" .

Adobe After Effectsi ajaskaala paneelide logoanimatsioon

Looge võtmekaadreid, klõpsates ajaskaala paneeli Atribuudid kõrval oleval stopperi ikoonil.

Pideva animatsiooni puhul soovite töötada atribuudiga, mis mõõdab objekti nähtavust: läbipaistmatus. Läbipaistmatus on seatud 100%, kuna vaikimisi on logo täielikult nähtav.

Klõpsake suvandi Läbipaistmatus kõrval olevat stopperi ikooni ja näete teemanti, kuhu on seatud esituspea marker (nõrk sinine joon, mis ületab ajaskaala). See on võtmekaader, põhiliselt hetktõmmis määratud atribuudi praegusest väärtusest. Liigutage võtmekaadrit, klõpsates ja lohistades seda ajaskaalal 2 sekundi märgini. Lohistage liugur tagasi 0-sekundilise märgini, seejärel looge uus võtmekaader ja määrake läbipaistmatuseks 0%. Animatsiooni kuvamiseks kompositsiooniaknas vajutage tühikuklahvi.

Pärast efekte

Näete, et olete loonud sujuva kaduva animatsiooni, muutes läbipaistmatuse 0%-lt 100%-le 2 sekundi jooksul vaid kahe võtmekaadriga. Nii tehakse kogu animatsiooni After Effectsis. Saate luua ajaskaalal erinevate intervallidega algus- ja lõpuvõtmekaadri ning After Effects arvutab automaatselt välja vajalikud kaadrite üleminekud, et jõuda punktist A punkti B (animatsiooniäris nimetatakse seda traditsiooniliselt kahekaadriteks).

Animeeritud GIF kasvavast animatsioonist rakenduses After Effects

Lihtne sujuv animatsioon luuakse atribuudi Opacity kahe võtmekaadri abil.

Näete, et on mitmeid atribuute, millega saate töötada vara ümber, mida me siin lühidalt selgitame. Katsetage julgelt võtmekaadreid ja muutke neid, et mõista nende animatsioonivõimalusi.

  • Asukoht : see atribuut kirjeldab logo asukohta X- ja Y-ruumis paigutusekraanil ja võimaldab animeerida lineaarset liikumist.
  • Skaala : see atribuut kirjeldab logo suurust (protsendina originaalfaili täissuurusest) ja võimaldab luua sisse- või kahandavaid animatsioone.
  • Pööramine : see atribuut kirjeldab orientatsiooni kraadides ja võimaldab luua pööramisanimatsioone.

Nõuanded professionaalilt :

Logo animeerimisel on mõttekas töötada tagurpidi (nagu me tegime sissepimendamise puhul), kuna animatsioon peaks lõppema valmis, terviklikul logol. See tähendab, et enne millegi muutmist peate looma võtmekaadreid, et teil oleks atribuutide väärtuste hetktõmmised nende vaikeolekus. Seejärel saate need võtmekaadrid ajaskaalal soovitud lõpp-punkti liigutada (olenevalt sellest, kui kaua soovite animatsiooni kesta) ja luua ajaskaala alguses tehtavate muudatuste jaoks uued võtmekaadrid.

5. samm. Animeerige logo kujukihtide abil.

Nüüd liigume edasi huvitavamate animatsioonitehnikate juurde, kasutades kujundikihte. Kujukihid on objektid, mis sisaldavad teeteavet, nagu ankurpunktid ja ühendusjooned (sarnaselt vektorprogrammide omadega), ning nendega manipuleerimine avab ukse tervele hulgale animatsioonivõimalustele väljaspool. Teisenda omadused .

Kuidas valida oma logole õiget värvi?

Esmalt teisendame logo kujukihiks. Valige paneelil Kihiline kompositsioon (3. sammus loodud kihid) kõik oma kihid, paremklõpsake ja valige "  Loo "  > «  Looge kujundeid vektorkihist" . Näete, et iga kiht on dubleeritud ja selle kõrval on tärn – see on kujundikiht. Kujukihi alla pesatuna leiad Sisu omadus lisaks Muutke vara . Paremale poole Sisu omadused näete ka nuppu " Lisama" , mis võimaldab valida animeerimiseks veelgi rohkem atribuute.

Adobe After Effectsi ajaskaala paneelid

Kujundikihid sisaldavad nuppu Lisa (atribuudist Contents paremal), mis võimaldab lisada igasuguseid animeeritud omadusi, näiteks lõiketeid.

Objekti skaleerimine Adobe Illustratoris

Trimiteed

Oma logo jaoks kasutasin üsna levinud ja kasulikku animatsiooni, kasutades atribuuti Trim Paths. Selleks lisasin "Kärpimisteed", kasutades nuppu " Lisama" iga tähe kujukihtidele määrake atribuudi End võtmekaader ajaskaala alguses väärtusele 0% ja umbes 100 sekundi pärast 1%. Nagu näete, näib tähtede piirjooned olevat nähtamatu käega reaalajas joonistatud.

Teede kärpimine võimaldab teil jooni animeerida. Logo animatsioon

Atribuudi Trim Paths kasutamine võimaldab animeerida jooni nii, et need joonistavad end reaalajas.

Lisaks tahtsin taustale lisada aktsentanimatsiooni. Kuna töötan mustvalgena, valisin Twilight Zone’i meenutava looping tunneli efekti. Selleks kasutasin paneeli Tööriistad hulknurga tööriista, et joonistada oma kompositsiooni keskele kujund, luues uue kujundikihi.

Seejärel lisasin repiiteri atribuudi, tsentreerisin positsiooni ja suurendasin koopiate arvu. See dubleerib kuju, luues näiliselt lõputu tunneli. Skaala reguleerimine suurendab iga koopia vahelist ruumi ja pööramise muutmine suunab koopiad visuaalse huvi huvides erinevatesse suundadesse.

Lõpuks, et seda vürtsitada, määrasin ajaskaala alguses nihke 0 ja hiljem määrasin selle ajaskaalal negatiivseks.

Adobe After Effecti ekraanipilt

Kasutades hulknurkse kujundi kihti ja repiiteri omadust, sain luua animeeritud tausta.

Olete ilmselt arvanud, et kujukihtide jaoks on palju võimalusi. See on tõsi: Internetis on sellel teemal täielikud veebikursused ja peaksite leidma aega katsetamiseks, harjutamiseks ja õppimiseks.

Я также не могу сказать вам, какой стиль анимации подойдет для вашего логотипа или какие конкретные инструменты анимации вам понадобятся для достижения этого стиля. Тем не менее, я могу дать вам совет, как открыть это для себя. Поищите вдохновение у других анимированных логотипов, таких как ваши конкуренты, бренды, которыми вы восхищаетесь, и / или на таких сайтах, как Pinterest или Dribbble — точно так же, как вы это делали, когда изначально создавали логотип.

Вы обнаружите, что как только вы начнете анализировать их, используя свои новые знания о том, как анимировать логотип, многие из них основаны на простых manipulatsioonid с формами и преобразованиями (даже те, которые явно наложены на продвинутые стилизованные эффекты). Как только вы найдете несколько из них, которые вам понравятся, вы можете работать в After Effects в обратном направлении, чтобы попытаться реконструировать эти анимации для практики.

6. samm: määrake kellaaeg.

Räägime ajast, mis kirjeldab animatsioonikaadrite tempot kogu animatsiooni jooksul. Graafikuredaktorisse minnes näete aja visuaalset esitust. Selleks klõpsake ajaskaala paneeli ülaosas graafiku ikooni (tähisega Graafiredaktor, kui hõljutate selle kohal) ja see muudab ajaskaala joongraafikuks.

Kui klõpsate ühel võtmekaadri atribuudil, näete sirget joont ühest võtmekaadrist teise. Praegu, kuna tegime ainult algus- ja lõpp-punkti võtmekaadreid, jätsime After Effectsi ajastuse määramiseks. Ilma suunata liigutab After Effects animatsiooni iga kaadrit ühtlaselt, mille tulemuseks on täiesti sirge joon.

Graafikuredaktor. Logo animatsioon

Graafikuredaktor näitab võtmekaadri ajastust, nagu on näidatud joondiagrammil.

Eesmärgipärane ajamuutus annab aga animatsioonile realismi tunde. Näiteks põrkava palli animatsioonis liigub pall põrke kõrgusel aeglasemalt ja maapinnale lähenedes kiiremini, hoo ja raskusjõu mõjul. Teisisõnu, ta ei liigu kogu animatsiooni vältel sama kiirusega ja kui liiguks, paistaks ta robotina silma.

Bezier Toolsi logoanimatsioon

Graafikuredaktori allosas asuvad Bezier' tööriistad võimaldavad reguleerida graafiku joone kõverust.

Teisendage võtmekaadrid automaatseks Bezieriks

Graafiredaktor võimaldab teil kohandada oma animatsiooni ajastust, kasutades nn Bezier' käepidemeid, et muuta graafiku joon kõveraks. Graafikuredaktori paremas alanurgas näete joonte külge kinnitatud ruudukujulisi punktiikoone – need on Bezier' tööriistad.

Klõpsake ühte võtmekaadritest ja hõljutage kursorit Bezier' tööriistade kohal, kuni leiate kaadri nimega "  Teisenda võtmekaadrid automaatseks Bezieriks" . Kui klõpsate sellel, näete graafikule kollast markerit. Selle käepideme lohistamine põhjustab joone paindumist ja see muudab teie animatsiooni ajastust. Kui kõver on rohkem väljendunud, taasesitatakse kaadreid kiiremini ja kus kõver on sujuvam, taasesitatakse kaadreid aeglasemalt.

Ekraanipilt Bezieri tööriistadest Adobe After Effectsis

Teravam kõver vastab kiiremale sünkroonimisele ja sujuvam kõver aeglasemale sünkroonimisele.

Enda ajastuse kohandamise nüansside tõeliseks mõistmiseks on vaja animatsioonikogemust, mistõttu on Bezier' kõverate käsitsi reguleerimine keerukam teema. Selles algaja juhendis soovitan kasutada Bezieri tööriista Lihtne Lihtsus (mis rakendab teie valitud võtmekaadrile automaatset kõverat) kõigi animatsiooni ajavahemike jaoks. Saate kandideerida  Lihtne Lihtsus  Võtmekaadrile väljaspool diagrammiredaktorit, valides võtmekaadri ja paremklõpsates.

7. samm: eksportige oma logo.

Kui olete valmis animeeritud logo eksportima, valige " Fail " > «  Ekspordi"  > «  Lisa Adobe Media Encoder järjekorda" . After Effects по умолчанию экспортирует faili vormingus mp4, что подходит для видео. Поскольку мы хотим создать файл изображения нашего логотипа, которым можно поделиться, мы будем экспортировать его как анимированный GIF. В окне Media Encoder щелкните стрелку рядом с выделенной синей строкой текста под словом «Формат» и выберите «  Animeeritud GIF" . Samuti saate määrata valmis faili sihtkausta, klõpsates sinist teksti sõnade "Väljundfail" all.

Adobe Media Encoder

Faili eksportimiseks valige Fail > Ekspordi > Lisa Adobe Media Encoderi järjekorda ja valige veeru Vorming ripploendist Animated Gif.

Ekspordisuvandite akna avamiseks topeltklõpsake eelseade all esiletõstetud sinist teksti. Faili suuruse vähendamiseks on mõned valikud: kvaliteet (määrasin selle väärtusele 20), kaadrisagedus (määrasin selle 10-le, kuigi video puhul on soovitatav suurem kaadrisagedus (fps)) ja Kestus, mis on eelvaate all olev sinine riba (ma kärpisin enda oma 4 sekundiks). Valige  OKEI,  selle akna sulgemiseks.

Kui olete lõpetanud, valige Media Encoderi paremas ülanurgas roheline esitusikoon ja teie fail kuvatakse teie valitud sihtkaustas. See on kõik: valmis logoanimatsioon!

Muutke oma bränd ellu logoanimatsiooniga.
-

Logo animatsioon on midagi enamat kui lihtsalt populaarne trend, mida kaubamärgid on sunnitud järgima. Logoanimatsioonis on ka vaieldamatu võlu ja see on suurepärane viis visuaalse naudingu hetke loomiseks kõigile, kes teie kaubamärgiga suhtlevad. Ja õnneks on animatsioonitarkvara arenenud nii, et peaaegu igaüks, olenemata oskustest, saab seda maagiat oma logole lisada.

Kuigi see õpetus on mõeldud teile logoanimatsiooni põhitõdedega alustamiseks, on vaja palju katse-eksitusi, harjutamist ja katsetamist, et saada midagi peale põhianimatsiooni. Kui soovite tõeliselt erilist logoanimatsiooni, on professionaalne logoanimaator seda investeeringut väärt.

 АЗБУКА

 

Veebikujunduse määratlused ja terminid