Animacija logotipa

Animacija logotipa je proces uvođenja pokreta ili promjena vizualnih elemenata u logotipu kako bi ga učinili dinamičnijim i privlačnijim. Može se primijeniti na različite dijelove logotipa, kao što su tekst, slike, boje i oblici, i može imati različite stupnjeve složenosti, u rasponu od jednostavnih animacija kao što je treptanje teksta ili blijeđenje boja, do složenih animacija koje uključuju pokretne ili interaktivne objekte učinci.

Animacija logotipa postaje sve češća. Između pametnih telefona i općeg razvoja internetske tehnologije, logotipi su sada puno češći u digitalnim prostorima, a to otvara vrata vizualnim efektima poput animacije koji nisu mogući s fizičkim proizvodima. Naravno, rastuća popularnost animacije logotipa znači da će je trebati sve više i više brendova kako bi ostali konkurentni. Stoga učenje animiranja logotipa može biti vrijedna vještina koja će vaš logotip podići na višu razinu.

Kako odabrati pravu boju za svoj logo?

U isto vrijeme, softver za animaciju također je postao sveprisutniji, moderniji i intuitivniji kako bi podržao ovu rastuću bazu korisnika. Dakle, koliko god animacija logotipa zvučala tehnički i složeno, sada čak i početnici mogu stvoriti jednostavne, ali učinkovite animacije.

 

Animacija logotipa u After Effects -

Korak 1. Pripremite datoteku logotipa.

Zapravo ćemo započeti naš vodič o tome kako animirati logotip u Adobe Illustratoru (ili sličnom softveru za dizajn logotipa). Ovo je neophodno kako bismo osigurali da naša datoteka logotip postavljen za animaciju.

Registracija logotipa

Iako je sam softver za animaciju rasterski, izvorne datoteke logotipa moraju biti u vektorskom formatu. To vam omogućuje da ih promijenite bez šteta za kvalitetu slike (na primjer, zumiranje rasterskog logotipa rezultira pikselizacijom), a to će biti korisno kasnije pri radu sa slojevima oblika.

Logo bi također trebao biti višeslojan, a ne grupiran u jedan objekt. To olakšava stvaranje složenijih animacija animiranjem pojedinačnih dijelova logotipa. Možete stvoriti nove slojeve pomoću "  Dodaj novi sloj" na dnu ploče Slojevi, a zatim kopirajte i zalijepite dijelove svog logotipa u njih.

Konačno, budući da je animacija digitalne prirode, radimo i s RGB bojama. Ako je vaša Illustrator datoteka postavljena na CMYK, to možete promijeniti tako da odaberete svoj logotip i odete na Uredi > Uredi boje > Pretvori u RGB.

Kada budete spremni, izvezite svoj logotip kao potpuno slojevitu vektorsku datoteku. Budući da su vrste datoteka After Effects dio Adobe obitelji softvera, spremit ću logotip koji sam izradio kao AI datoteku (Adobe Illustrator), ali postoji nekoliko različitih vrsta vektorskih datoteka koje možete izabrati ako koristite drugi softver.

Korak 2: Uvezite svoj logotip u After Effects. Animacija logotipa

Otvorite After Effects. Sučelje se na prvi pogled može činiti kompliciranim, pa ćemo razložiti osnove:

 

1. alatna traka : ovdje možete pristupiti glavnom grafički alatikao što je alat Pen, alat Type itd.
2. Projektna ploča : Ovdje upravljate i organizirate medijske datoteke za cijeli projekt.
3. Prozor za kompoziciju : Ovo je prozor za pregled videa u kojem možete pregledati animaciju za trenutnu kompoziciju (koja se često naziva i kompozicija) na kojoj radite. Kompozicije su u biti scene, svaka sa svojim zasebnim vremenskim crtama animacije. O skladbama ćemo detaljnije govoriti u sljedećem odjeljku.
4. Vremenska Crta : Ovdje ćete stvoriti svoju animaciju. Sastoji se od doslovne vremenske trake s desne strane (gdje ćete postaviti događaje animacije za pokretanje na vremenskoj traci) i područja izgleda s lijeve strane (gdje ćete preklapati i uređivati ​​atribute svojih medijskih sredstava).
5. Kontrolna ploča : Ovdje možete pristupiti raznim pratećim značajkama kao što su informacije o medijima, opcije odlomaka i poravnanja te unaprijed izgrađene biblioteke animacija i vizualnih efekata ugrađene u After Effects.

Ako niste sigurni u vezi s alatom ili gumbom, prijelaskom miša iznad njega dobit ćete opis.

Da biste uvezli datoteku logotipa, jednostavno je povucite na ploču Projekt ili odaberite  Datoteka"  > «  Uvoz"  > «  Datoteka" . U sljedećem dijaloškom okviru odaberite Uvezi medije kao  snimke i spojene slojeve .

Korak 3: Postavite svoju kompoziciju. Animacija logotipa.

Kompozicija (comp) je spremnik koji vam omogućuje sastavljanje, uređivanje i primjenu animacije na medijske datoteke. Veća produkcija, kao što je film, sadržavat će više zapisa organiziranih u ploči projekta. Dakle, možete zamisliti pjesme kao jednu scenu u tom filmu, a svaka pjesma će imati svoju zasebnu vremensku traku. U našem slučaju, animacija logotipa koja traje manje od pet sekundi zahtijeva vrlo malo kompozicija.

Počnimo s jednostavnom pozadinom. Desnom tipkom miša kliknite na ploču izgleda i odaberite " Stvoriti"  > «  solidno" . Budući da je moj logo bijeli, odabrao sam jednobojni crna boja, ali možete odabrati bilo koju boju. U sljedećem prozoru dajte naziv čvrstoj tvari (u mom slučaju "BG"), kliknite "  Napravite veličinu  računalo" i odaberite "  U REDU" . Sada povucite datoteku vašeg logotipa s ploče Projekt na ploču Vremenska traka i trebali biste vidjeti svoj logotip pregledan u prozoru za kompoziciju. Ako nije, svakako promijenite raspored slojeva povlačenjem čvrste pozadine ispod datoteke logotipa.

Desnom tipkom miša kliknite datoteku logotipa na ploči izgleda i odaberite Stvoriti" > « Pretvori u višeslojnu kompoziciju" . Ovo će vašu datoteku logotipa pretvoriti u drugačiji sastav (vidjet ćete da se ikona promijenila). Dvostruki klik na datoteku logotipa sada će otvoriti novu karticu i odvesti vas do ove nove kompozicije koja sadrži sve pojedinačne slojeve koje ste postavili u Illustratoru. Sada možete vidjeti kako kompovi rade: oni su u biti poput podmapa.

Animacija logotipa

Ako želite, svaki od ovih slojeva možete pretvoriti u zasebne kompozicije desnim klikom i odabirom  Preliminarni sastav" . Ovo će ovom sloju dati vlastitu vremensku crtu animacije, ugniježđenu unutar prethodne kompozicije. A ako želite animirati cijeli logotip odjednom, trebali biste koristiti vremensku traku povezanu s glavnim sastavom.

Uklonivši to s puta, shvatimo kako ti vremenski okviri funkcioniraju za animaciju.

Korak 4: Animirajte logotip pomoću ključnih okvira

After Effects (i većina softvera za animaciju) radi pomoću ključnih sličica. Ključni okviri su u biti markeri koje možete postaviti na vremenskoj traci kako biste odredili kada bi se trebala pojaviti početna i završna stanja vaše animacije.

Na primjer, počnimo s vrlo jednostavnom animacijom: nestajanje. Objekt ima različite atribute pridružene sebi, a atributi koji se mijenjaju tijekom određenog vremenskog razdoblja u biti su animacija. Da biste vidjeli te atribute, kliknite ikonu Proširi pored logotipa i zatim svojstvo "Pretvori" .

Za blijedu animaciju, želite raditi s atributom koji mjeri vidljivost objekta: neprozirnost. Neprozirnost je postavljena na 100% jer je prema zadanim postavkama logotip potpuno vidljiv.

Kliknite ikonu štoperice pokraj opcije Opacity i vidjet ćete romb na mjestu gdje je postavljen marker za reprodukciju (slaba plava linija koja siječe vremensku traku). Ovo je ključni okvir, u osnovi snimka trenutne vrijednosti određenog atributa. Pomaknite ključnu sličicu klikom i povlačenjem do oznake 2 sekunde na vremenskoj traci. Povucite klizač natrag do oznake 0 sekundi, zatim izradite još jedan ključni okvir i postavite neprozirnost na 0%. Pritisnite razmaknicu za prikaz animacije u prozoru kompozicije.

After Effects

Vidjet ćete da ste stvorili glatku animaciju koja se postepeno pojavljuje promjenom neprozirnosti s 0% na 100% u 2 sekunde sa samo dva ključna kadra. Ovako se rade sve animacije u After Effectsu. Možete stvoriti početni ključni okvir i završni ključni okvir u različitim intervalima duž vremenske crte, a After Effects automatski izračunava potrebne prijelaze okvira za prelazak od točke A do točke B (koje se u poslu animacije tradicionalno nazivaju između okvira).

Možete vidjeti da postoji niz atributa s kojima možete raditi Transformacija imovine, što ćemo ovdje ukratko objasniti. Slobodno eksperimentirajte s ključnim okvirima i modificirajte svaki kako biste stekli osjećaj za njihove mogućnosti animacije:

• Položaj : Ovaj atribut opisuje položaj logotipa u prostoru X, Y na zaslonu izgleda i omogućuje animiranje linearnog kretanja.
• ljestvica : Ovaj atribut opisuje veličinu logotipa (kao postotak pune veličine izvorne datoteke) i omogućuje vam stvaranje animacija za povećavanje ili smanjivanje.
• rotacija : Ovaj atribut opisuje orijentaciju u stupnjevima i omogućuje vam stvaranje rotacijskih animacija.

Savjet od profesionalca :

Kada je u pitanju animiranje logotipa, ima smisla raditi unatrag (kao što smo učinili s fade-in) budući da bi animacija trebala završiti na gotovom, kompletnom logotipu. To znači da trebate stvoriti ključne okvire prije nego što bilo što promijenite tako da imate snimke vrijednosti atributa u njihovom zadanom stanju. Zatim možete premjestiti te ključne kadrove na željenu krajnju točku na vremenskoj traci (koliko god dugo želite da animacija traje) i stvoriti nove ključne kadrove za promjene na početku vremenske trake.

Korak 5. Animirajte logotip pomoću slojeva oblika.

Sada prijeđimo na zanimljivije tehnike animacije pomoću slojeva oblika. Slojevi oblika su objekti koji sadrže informacije o putanji kao što su sidrišne točke i konektorske linije (slično onima u vektorskim programima), a manipuliranje njima otvara vrata cijelom nizu mogućnosti animacije izvan Transformiraj svojstva .

Kako odabrati pravu boju za svoj logo?

Prvo ćemo pretvoriti logo u sloj oblika. Na ploči Slojevita kompozicija (slojevi stvoreni u koraku 3), odaberite sve svoje slojeve, desnom tipkom miša kliknite i odaberite "  Stvoriti"  > «  Stvorite oblike iz vektorskog sloja" . Vidjet ćete da je svaki sloj dupliciran sa zvjezdicom pored njega - ovo je sloj oblika. Ugniježđen ispod sloja oblika, naći ćete Svojstvo sadržaja uz Transformirajte svojstvo . Desno od Svojstva sadržaja također ćete vidjeti gumb " Dodati" , što će vam omogućiti da odaberete još više atributa za animaciju.

Skaliranje objekta u Adobe Illustratoru

Obrežite staze

Za svoj logotip koristio sam prilično uobičajenu i korisnu animaciju pomoću svojstva Trim Paths. Da bih to učinio dodao sam "Crop Paths" pomoću gumba " Dodati" na slojeve oblika za svako slovo, postavite ključni okvir atributa Kraj na 0% na početku vremenske trake i 100% nakon otprilike 1 sekunde. Kao što vidite, čini se da je obris slova iscrtan nevidljivom rukom u stvarnom vremenu.

Korištenje svojstva Trim Paths omogućuje vam animiranje linija tako da se same crtaju u stvarnom vremenu.

Osim toga, želio sam dodati neku akcentnu animaciju u pozadinu. Budući da radim crno-bijelo, odabrala sam efekt petljastog tunela koji podsjeća na Zonu sumraka. Da bih to učinio, upotrijebio sam alat za poligon na ploči Alati za crtanje oblika u središtu svoje kompozicije, stvarajući novi sloj oblika.

Zatim sam dodao svojstvo Repeater, centrirao položaj i povećao broj kopija. Ovo duplicira oblik, stvarajući naizgled beskrajan tunel. Podešavanje mjerila povećava razmak između svake kopije, a promjena rotacije usmjerava kopije u različitim smjerovima radi vizualnog interesa.

Na kraju, da ga začinim, na početku vremenske trake postavio sam pomak od 0 u ključni okvir i kasnije ga postavio na negativnu vrijednost na vremenskoj traci.

Vjerojatno ste pogodili da postoji mnogo opcija za slojeve oblika. Istina je: na Internetu postoje kompletni online tečajevi na tu temu i trebali biste odvojiti vrijeme za eksperimentiranje, praksu i učenje.

Također vam ne mogu reći koji će vam stil animacije odgovarati logotip ili koje specifične alate animacije koje će vam trebati za postizanje ovog stila. Međutim, mogu vam dati savjet kako to sami otkriti. Potražite inspiraciju u drugim animiranim logotipima, kao što su vaši konkurenti, robne marke kojima se divite i/ili web stranice kao što su Pinterest ili Dribbble - baš kao što ste činili kada ste izvorno stvarali logotip.

Kad ih počnete analizirati koristeći svoje novo znanje o tome kako animirati logotip, vidjet ćete da se mnogi od njih temelje na jednostavnim manipulacije s oblicima i transformacijama (čak i onima koji su jasno slojeviti s naprednim stiliziranim efektima). Nakon što pronađete nekoliko koje vam se sviđaju, možete raditi unatrag u After Effectsu kako biste pokušali obrnuti inženjering tih animacija za vježbu.

Korak 6: Postavite vrijeme.

Razgovarajmo o vremenu, koje opisuje tempo kadrova animacije kroz animaciju. Vizualni prikaz vremena možete vidjeti ako odete u uređivač grafikona. Da biste to učinili, kliknite ikonu grafikona (s oznakom Uređivač grafikona kada prijeđete iznad nje) na vrhu ploče vremenske trake i to će promijeniti vremensku traku u linijski grafikon.

Ako kliknete na jedan od atributa ključnog kadra, vidjet ćete ravnu liniju od jednog ključnog kadra do sljedećeg. Upravo sada, budući da smo samo ključni kadrovi postavljali početnu i završnu točku, ostavili smo After Effects da izvrši mjerenje vremena. Bez smjera, After Effects ravnomjerno pomiče svaki okvir animacije, što rezultira savršeno ravnom linijom.

Međutim, namjerna promjena vremena ono je što animaciji daje osjećaj realizma. Na primjer, u animaciji odskočne lopte, lopta se kreće sporije na visini odskoka i brže kada se približava tlu zbog zamaha i gravitacije. Drugim riječima, ne kreće se istom brzinom kroz cijelu animaciju, a da jest, istaknuo bi se kao robot.

Alati Bezier, koji se nalaze na dnu uređivača grafikona, omogućuju podešavanje zakrivljenosti linije grafikona.

Pretvorite ključne kadrove u Auto Bezier

Uređivač grafikona omogućuje vam podešavanje vremena vlastite animacije korištenjem takozvanih Bezierovih ručica za pretvaranje linije grafikona u krivulju. U donjem desnom kutu uređivača grafikona vidjet ćete neke kvadratne ikone s točkama pričvršćene na linije—to su Bezierovi alati.

Kliknite jedan od ključnih okvira i zadržite pokazivač iznad Bezierovih alata dok ne pronađete onaj s oznakom "  Pretvori ključne sličice u Auto Bezier" . Kada kliknete na ovo, vidjet ćete žutu oznaku koja se pojavljuje na grafikonu. Povlačenje ove ručke uzrokovat će savijanje linije i to će promijeniti vrijeme vaše animacije. Tamo gdje je krivulja izraženija, okviri će se reproducirati brže, a gdje je krivulja glatkija, okviri će se reproducirati sporije.

Za istinsko razumijevanje nijansi podešavanja vlastitog vremena potrebno je iskustvo animacije, zbog čega je ručno podešavanje Bezierovih krivulja naprednija tema. U ovom vodiču za početnike preporučujem korištenje alata Bezier Jednostavno jednostavnost (koji primjenjuje automatsku krivulju na ključnu sličicu koju odaberete) za sve vremenske intervale animacije. Možete se prijaviti  Jednostavno jednostavnost  na ključni okvir izvan uređivača dijagrama odabirom ključnog okvira i desnim klikom.

Korak 7: Izvezite svoj logotip.

Kada budete spremni za izvoz svog gotovog animiranog logotipa, odaberite " Datoteka" > «  Izvoz"  > «  Dodaj Adobe Media Encoder u red čekanja" . After Effects izvozi prema zadanim postavkama datoteku u formatu mp4, koji je prikladan za video. Budući da želimo stvoriti slikovnu datoteku našeg logotipa koja se može dijeliti, izvest ćemo je kao animirani GIF. U prozoru Media Encoder kliknite strelicu pokraj označenog plavog retka teksta ispod riječi "Format" i odaberite "  Animirani GIF" . Također možete postaviti odredišnu mapu za svoju gotovu datoteku klikom na plavi tekst ispod riječi "Izlazna datoteka".

Dvaput kliknite označeni plavi tekst ispod unaprijed postavljene postavke da biste otvorili prozor Mogućnosti izvoza. Postoji nekoliko opcija koje želite pogledati kako biste smanjili veličinu datoteke: kvaliteta (postavio sam je na 20), broj sličica u sekundi (postavio sam je na 10, iako se veći broj sličica u sekundi (fps) preporučuje za video) i Trajanje, što je plava traka u pregledu (ja sam svoju skratio na 4 sekunde). Izaberi  U REDU,  da zatvorite ovaj prozor.

Kada završite, odaberite zelenu ikonu Reproduciraj u gornjem desnom kutu Media Encodera i vaša će datoteka biti prikazana u odabranoj odredišnoj mapi. To je to: gotova animacija logotipa!

Oživite svoj brend pomoću animacije logotipa.
-

Animacija logotipa više je od pukog popularnog trenda koji su brendovi prisiljeni slijediti. Tu je i neosporna magija animacije logotipa, i to je sjajan način da stvorite trenutak vizualnog užitka za sve koji su u interakciji s vašim brendom. I srećom, softver za animaciju razvio se tako da gotovo svatko, bez obzira na vještine, može dodati malo te magije vlastitom logotipu.

S tim u vezi, iako vam je ovaj vodič namijenjen da započnete s osnovama animacije logotipa, potrebno je mnogo pokušaja i pogrešaka, prakse i eksperimentiranja da biste dobili nešto osim osnovne animacije. Ako želite doista posebnu animaciju logotipa, profesionalni animator logotipa je vrijedan ulaganja.

 АЗБУКА

 

Definicije i uvjeti web dizajna