Logo animacija

Animacija logotipa je proces uvođenja pokreta ili promjena u vizualne elemente 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 tekst koji treperi ili blijede boje, do složenih animacija koje uključuju objekte koji se kreću ili interaktivni. efekti.

Logo animacija postaje sve češća. Između pametnih telefona i općeg razvoja internet tehnologije, logotipi su sada mnogo č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 sve više brendova trebati da ostanu konkurentni. Dakle, učenje kako animirati logotip može biti vrijedna vještina koja će vaš logo podići na viši nivo.

Kako odabrati pravu boju za vaš logo?

Istovremeno, softver za animaciju je također postao sveprisutniji, moderniji i intuitivniji kako bi podržao ovu rastuću korisničku bazu. Dakle, koliko god zvučala tehnička i složena animacija logotipa, čak i početnici sada mogu kreirati jednostavne, ali učinkovite animacije.

 

Animacija logotipa u After Effects-u -

Korak 1. Pripremite svoj logo.

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š fajl logo postavljen za animaciju.

Registracija logotipa

Iako je sam softver za animaciju rasterski, originalne datoteke logotipa moraju biti u vektorskom formatu. To vam omogućava da ih mijenjate bez oštećenja za kvalitet slike (na primjer, povećanje razmjera rasterskog logotipa dovodi do pikselizacije), a to će biti korisno kasnije kada radite sa slojevima oblika.

Logo takođe treba da bude višeslojan, a ne grupisan u jedan objekat. To olakšava kreiranje složenijih animacija animacijom pojedinačnih dijelova logotipa. Možete kreirati nove slojeve koristeći "  Dodaj novi sloj" na dnu ploče slojeva, a zatim kopirajte i zalijepite dijelove vašeg logotipa u njih.

Konačno, pošto je animacija digitalne prirode, radimo i sa RGB bojama. Ako je vaš Illustrator fajl postavljen na CMYK, to možete promijeniti odabirom vašeg logotipa i navigacijom do Uredi > Uredi boje > Pretvori u RGB.

Kada budete spremni, izvezite svoj logotip kao potpuno slojevitu vektorsku datoteku. Budući da su tipovi datoteka After Effects dio Adobe porodice softvera, sačuvaću logo koji sam kreirao kao AI datoteku (Adobe Illustrator), ali postoji nekoliko različitih tipova vektorskih datoteka koje možete izabrati ako koristite drugi softver.

Korak 2: Uvezite svoj logotip u After Effects. Logo animacija

Otvorite After Effects. Interfejs može izgledati komplikovano na prvi pogled, pa hajde da razbijemo osnove:

 

1. Alatna traka : ovdje možete pristupiti glavnom grafički alatikao što je alat Pen, Alat za unos teksta itd.
2. Projektni panel : Ovdje upravljate i organizirate medijske datoteke za cijeli projekat.
3. Prozor kompozicije : Ovo je prozor za pregled videa u kojem možete pregledati animaciju za trenutnu kompoziciju (koja se često naziva kompozicija) na kojoj radite. Kompozicije su u suštini scene, svaka sa svojim zasebnim vremenskim linijama animacije. O kompozicijama ćemo detaljnije govoriti u sljedećem odjeljku.
4. Vremenska linija : Ovdje ćete kreirati svoju animaciju. Sastoji se od doslovne vremenske linije na desnoj strani (gdje ćete postaviti događaje animacije da se pokreću na vremenskoj liniji) i područja izgleda na lijevoj strani (gdje ćete prekrivati ​​i uređivati ​​atribute svojih medijskih sredstava).
5. control panel : Ovdje možete pristupiti raznim pratećim funkcijama kao što su informacije o medijima, opcije paragrafa i poravnanja, te unaprijed izgrađene biblioteke animacija i vizuelnih efekata ugrađene u After Effects.

Ako niste sigurni u vezi alata ili dugmeta, prelazak miša preko njih će vam dati opis.

Da biste uvezli datoteku s logotipom, jednostavno je prevucite u projektni panel ili odaberite  Datoteka "  > «  Uvezi "  > «  Datoteka " . U sljedećem dijaloškom okviru odaberite Uvezi medij kao  snimak i spojeni slojevi .

Korak 3: Postavite svoju kompoziciju. Logo animacija.

Kompozicija (comp) je kontejner koji vam omogućava da sastavite, uredite i primijenite animaciju na medijske datoteke. Veća produkcija, kao što je film, će sadržavati više pjesama organiziranih u projektnom panelu. Dakle, možete zamisliti numere kao jednu scenu u tom filmu, a svaka numera će imati svoju zasebnu vremensku liniju. 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 tablu izgleda i odaberite " Stvoriti"  > «  solidan" . Pošto je moj logo bijel, izabrao sam solidan crna boja, ali možete odabrati bilo koju boju. U sljedećem prozoru dajte naziv čvrstoj tvari (u mom slučaju "BG"), kliknite na "  Napravite veličinu  računar" i odaberite "  UREDU" . Sada prevucite datoteku logotipa sa panela Project na panel Timeline i trebalo bi da vidite svoj logo pregledan u prozoru kompozicije. Ako nije, obavezno preuredite slojeve povlačenjem čvrste pozadine ispod datoteke logotipa.

Kliknite desnim tasterom miša na datoteku logotipa na panelu izgleda i izaberite Stvoriti" > « Pretvori u višeslojnu kompoziciju" . Ovo će pretvoriti vaš logo u drugu kompoziciju (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 comps funkcionišu: oni su u suštini kao podmape.

Logo animacija

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 liniju animacije, ugniježđenu unutar prethodne kompozicije. A ako želite da animirate cijeli logotip odjednom, trebali biste koristiti vremensku liniju povezanu s glavnom kompozicijom.

Sklonimo to s puta, hajde da shvatimo kako ove vremenske linije funkcioniraju za animaciju.

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

After Effects (i većina softvera za animaciju) radi pomoću ključnih kadrova. Ključni kadrovi su u suštini markeri koje možete postaviti na vremenskoj liniji kako biste odredili kada se početno i završno stanje vaše animacije treba pojaviti.

Na primjer, počnimo s vrlo jednostavnom animacijom: upadanje. Objekt ima različite atribute koji su mu pridruženi, a atributi koji se mijenjaju u datom vremenskom periodu su u suštini animacija. Da biste vidjeli ove atribute, kliknite na ikonu Proširi pored logotipa nakon čega slijedi svojstvo "Pretvori" .

Za blijedu animaciju, želite raditi s atributom koji mjeri vidljivost objekta: neprozirnost. Neprozirnost je postavljena na 100% jer je logo po defaultu potpuno vidljiv.

Kliknite na ikonu štoperice pored opcije Opacity i vidjet ćete romb na kojem je postavljen marker za reprodukciju (slaba plava linija koja prelazi vremensku liniju). Ovo je ključni okvir, u osnovi snimak trenutne vrijednosti određenog atributa. Pomjerite ključni kadar klikom i povlačenjem do oznake od 2 sekunde na vremenskoj liniji. Povucite klizač nazad do oznake od 0 sekundi, a zatim kreirajte drugi ključni kadar i postavite neprozirnost na 0%. Pritisnite razmaknicu da vidite animaciju u prozoru kompozicije.

nakon Effects

Vidjet ćete da ste kreirali glatku animaciju zatamnjenja promjenom neprozirnosti od 0% do 100% za 2 sekunde sa samo dva ključna kadra. Ovako se radi sva animacija u After Effects. Možete kreirati početni ključni kadar i krajnji ključni kadar u različitim intervalima duž vremenske linije, a After Effects automatski izračunava potrebne prijelaze kadrova da bi došao od tačke A do tačke B (tradicionalno se u animaciji nazivaju tween frames).

Možete vidjeti da postoji niz atributa s kojima možete raditi transformacija imovine, koje ćemo ovde ukratko objasniti. Slobodno eksperimentirajte s ključnim kadrovima i modificirajte svaki od njih kako biste stekli osjećaj za njihove mogućnosti animacije:

• Pozicija : Ovaj atribut opisuje poziciju logotipa u X, Y prostoru na ekranu izgleda i omogućava animiranje linearnog kretanja.
• Skala : Ovaj atribut opisuje veličinu logotipa (kao postotak pune veličine originalne datoteke) i omogućava vam da kreirate animacije za uvećanje ili smanjivanje.
• Rotacija : Ovaj atribut opisuje orijentaciju u stepenima i omogućava vam da kreirate animacije rotacije.

Savjet od profesionalca :

Kada je u pitanju animacija logotipa, ima smisla raditi unatrag (kao što smo radili s fade-in) budući da animacija treba završiti na gotovom, kompletnom logotipu. To znači da morate kreirati ključne kadrove prije nego što bilo što promijenite tako da imate snimke vrijednosti atributa u njihovom zadanom stanju. Zatim možete premjestiti ove ključne kadrove do željene krajnje točke na vremenskoj liniji (koliko god želite da animacija traje) i kreirati nove ključne kadrove za promjene na početku vremenske linije.

Korak 5. Animirajte logo koristeći slojeve oblika.

Sada pređimo na zanimljivije tehnike animacije koristeći slojeve oblika. Slojevi oblika su objekti koji sadrže informacije o putanji kao što su tačke sidrišta i linije povezivanja (slično onima u vektorskim programima), a manipuliranje njima otvara vrata čitavom nizu mogućnosti animacije izvan Transformirajte svojstva .

Kako odabrati pravu boju za vaš logo?

Prvo ćemo pretvoriti logo u sloj oblika. Na panelu slojevite kompozicije (slojevi kreirani u koraku 3), odaberite sve svoje slojeve, kliknite desnim tasterom miša i odaberite "  Stvoriti"  > «  Kreirajte oblike iz vektorskog sloja" . Vidjet ćete da je svaki sloj dupliciran sa zvijezdom pored njega - ovo je sloj oblika. Ugniježđeno ispod sloja oblika, naći ćete Svojstvo sadržaja pored Transformirajte svojstvo . Desno od Svojstva sadržaja također ćete vidjeti dugme " Dodati" , što će vam omogućiti da odaberete još više atributa za animiranje.

Skaliranje objekta u Adobe Illustratoru

Trim staze

Za svoj logo koristio sam prilično uobičajenu i korisnu animaciju koristeći svojstvo Trim Paths. Da bih to uradio, dodao sam "Puteve izrezivanja" koristeći dugme " Dodati" na slojeve oblika za svako slovo, postavite ključni kadar atributa Kraj na 0% na početku vremenske linije i 100% nakon otprilike 1 sekunde. Kao što vidite, čini se da je obris slova nacrtan nevidljivom rukom u realnom vremenu.

Korištenje svojstva Trim Paths vam omogućava da animirate linije tako da se crtaju u stvarnom vremenu.

Osim toga, htio sam dodati malo animacije naglaska u pozadini. S obzirom da radim crno-bijelo, odabrao sam efekat petlje tunela koji podsjeća na zonu sumraka. Da bih to uradio, koristio sam alat za poligon na panelu Tools da nacrtam oblik u centru svoje kompozicije, kreirajući novi sloj oblika.

Zatim sam dodao svojstvo Repeater, centrirao poziciju i povećao broj kopija. Ovo duplira oblik, stvarajući naizgled beskonačan tunel. Podešavanje razmjera povećava razmak između svake kopije, a promjena rotacije orijentira kopije u različitim smjerovima radi vizualnog interesa.

Konačno, da bih to začinio, napravio sam pomak od 0 na početku vremenske linije i kasnije ga postavio na negativnu vrijednost na vremenskoj liniji.

Verovatno ste pogodili da postoji mnogo opcija za slojeve oblika. Istina je: na Internetu postoje kompletni online kursevi o ovoj temi i trebali biste odvojiti vrijeme za eksperimentiranje, vježbanje i učenje.

Također vam ne mogu reći koji će vam stil animacije odgovarati logo ili koji specifični alati animacije koje će vam trebati da postignete ovaj stil. Ipak, mogu vam dati savjet kako to sami otkriti. Potražite inspiraciju od drugih animiranih logotipa, kao što su vaši konkurenti, brendovi kojima se divite i/ili web stranice poput Pinteresta ili Dribbblea - baš kao što ste radili kada ste originalno kreirali logo.

Otkrit ćete da kada ih počnete analizirati koristeći svoje novo znanje o tome kako animirati logotip, mnogi od njih su zasnovani na jednostavnim manipulacije sa oblicima i transformacijama (čak i onima koji su jasno slojeviti sa naprednim stilizovanim efektima). Kada pronađete nekoliko koje vam se sviđaju, možete raditi unatrag u After Effects-u da pokušate obrnuti inženjering te animacije za vježbu.

Korak 6: Podesite vreme.

Razgovarajmo o vremenu, koje opisuje tempo kadrova animacije kroz cijelu animaciju. Vizuelni prikaz vremena možete vidjeti ako odete u uređivač grafikona. Da biste to uradili, kliknite na ikonu grafikona (označena kao uređivač grafikona kada pređete mišem preko nje) na vrhu panela vremenske linije i to će promeniti vremensku liniju u linijski grafikon.

Ako kliknete na jedan od atributa ključnog kadra, vidjet ćete ravnu liniju od jednog do sljedećeg ključnog kadra. Upravo sada, pošto smo pravili samo ključne kadrove početne i krajnje tačke, prepustili smo After Effects-u da odredi vreme. Bez smjera, After Effects ravnomjerno pomiče svaki kadar animacije, što rezultira savršeno ravnom linijom.

Međutim, svrsishodna promjena vremena je ono što animaciji daje osjećaj realizma. Na primjer, u animaciji loptice koja odbija loptu, lopta se kreće sporije na visini odskoka i brže kako se približava zemlji zbog momenta i gravitacije. Drugim riječima, on se ne kreće istom brzinom kroz cijelu animaciju, a da jeste, isticao bi se kao robot.

Bezier alati, koji se nalaze na dnu uređivača grafikona, omogućavaju vam da prilagodite zakrivljenost linije grafikona.

Pretvorite ključne kadrove u Auto Bezier

Grafički uređivač vam omogućava da prilagodite vrijeme vaše vlastite animacije korištenjem takozvanih Bezierovih ručki za transformaciju linije grafikona u krivu. U donjem desnom uglu uređivača grafova, videćete neke ikone kvadratnih tačaka koje su pričvršćene za linije – ovo su Bezierovi alati.

Kliknite na jedan od ključnih kadrova i zadržite pokazivač iznad Bezierovih alata dok ne pronađete onaj s oznakom "  Pretvorite ključne kadrove u Auto Bezier" . Kada kliknete na ovo, vidjet ćete da se na grafikonu pojavljuje žuti marker. Povlačenjem ove ručke uzrokovat će se savijanje linije i to će promijeniti vrijeme vaše animacije. Tamo gdje je kriva izraženija, kadrovi će se reproducirati brže, a gdje je kriva glatkija, kadrovi ć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 Bezierovog alata Easy Ease (koja primjenjuje automatsku krivu na ključni kadar koji odaberete) za sve vremenske intervale animacije. Možete se prijaviti  Easy Ease  na ključni kadar izvan uređivača dijagrama odabirom ključnog kadra i desnim klikom.

Korak 7: Izvezite svoj logo.

Kada budete spremni da izvezete svoj gotov animirani logotip, odaberite " Datoteka " > «  izvoz"  > «  Dodaj Adobe Media Encoder u red čekanja" . After Effects izvozi prema zadanim postavkama fajl u formatu mp4, koji je pogodan za video. Pošto želimo da kreiramo datoteku sa slikom našeg logotipa za dijeljenje, izvezćemo je kao animirani GIF. U prozoru Media Encoder kliknite na strelicu pored označene plave linije teksta ispod riječi "Format" i odaberite "  Animirani GIF" . Također možete postaviti odredišni folder za svoju gotovu datoteku klikom na plavi tekst ispod riječi "Izlazni fajl".

Dvaput kliknite na istaknuti plavi tekst ispod unaprijed postavljene postavke da biste otvorili prozor s opcijama izvoza. Postoji nekoliko opcija koje ćete htjeti pogledati kako biste smanjili veličinu datoteke: Kvalitet (ja sam je postavio na 20), Frame Rate (postavio sam je na 10, iako se za video preporučuju veće brzine kadrova (fps)) i Trajanje, što je plava traka ispod pregleda (ja sam skratio svoje na 4 sekunde). Odaberite  UREDU,  da zatvorite ovaj prozor.

Kada završite, izaberite zelenu ikonu Play u gornjem desnom uglu Media Encoder-a i vaš fajl će biti prikazan u odabranom odredišnom folderu. To je to: gotova animacija logotipa!

Oživite svoj brend uz animaciju logotipa.
-

Animacija logotipa je više od popularnog trenda koji su brendovi prisiljeni slijediti. Tu je i neosporna magija animacije logotipa i odličan je način da stvorite trenutak vizualnog užitka za sve koji komuniciraju s vašim brendom. I srećom, softver za animaciju je evoluirao tako da gotovo svako, bez obzira na vještinu, može dodati malo te magije svom logotipu.

S obzirom na to, iako je ovaj tutorijal namijenjen da počnete s osnovama animacije logotipa, potrebno je mnogo pokušaja i pogrešaka, prakse i eksperimentiranja da biste dobili bilo što izvan osnovne animacije. Ako želite zaista posebnu animaciju logotipa, profesionalni logo animator je vrijedan ulaganja.

 АЗБУКА

 

Definicije i termini web dizajna