Animația logo-ului este procesul de introducere a mișcării sau modificărilor elementelor vizuale dintr-un logo pentru a-l face mai dinamic și mai atractiv. Poate fi aplicat pe diferite părți ale unui logo, cum ar fi text, imagini, culori și forme și poate avea diferite grade de complexitate, variind de la animații simple, cum ar fi clipirea textului sau culorile estompate, până la animații complexe care implică obiecte în mișcare sau interactive. efecte.
Animația logo-ului devine din ce în ce mai comună. Între smartphone-uri și dezvoltarea generală a tehnologiei internetului, logo-urile sunt acum mult mai des întâlnite în spațiile digitale, iar acest lucru deschide ușa unor efecte vizuale precum animația care nu sunt posibile cu produsele fizice. Desigur, popularitatea tot mai mare a animației de logo înseamnă că tot mai multe mărci vor avea nevoie de ea pentru a rămâne competitive. Deci, a învăța cum să animați un logo poate fi o abilitate valoroasă care vă va duce logo-ul la următorul nivel.
În același timp, software-ul de animație a devenit, de asemenea, mai omniprezent, simplificat și intuitiv pentru a sprijini această bază de utilizatori în creștere. Deci, indiferent cât de tehnică și complexă ar suna animația logo-ului, chiar și începătorii pot crea acum animații simple, dar eficiente.
Animație logo în After Effects -
Pasul 1. Pregătiți fișierul logo-ului.
De fapt, vom începe tutorialul nostru despre cum să animați un logo în Adobe Illustrator (sau un software similar de design de logo). Acest lucru este necesar pentru a ne asigura că fișierul nostru logo configurat pentru animație.
Deși software-ul de animație în sine este raster, fișierele originale de logo trebuie să fie în format vectorial. Acest lucru vă permite să le schimbați fără deteriora pentru calitatea imaginii (de exemplu, mărirea unui logo raster are ca rezultat pixelarea), iar acest lucru va fi util mai târziu când lucrați cu straturi de formă.
Asigurați-vă că logo-ul este separat în straturi folosind panoul Straturi.
Logo-ul ar trebui, de asemenea, să aibă mai multe straturi decât să fie grupat într-un singur obiect. Acest lucru facilitează crearea de animații mai complexe prin animarea părților individuale ale logo-ului. Puteți crea straturi noi folosind „ Adăugați un nou strat" în partea de jos a panoului Straturi, apoi copiați și inserați părți din logo-ul dvs. în ele.
În cele din urmă, deoarece animația este de natură digitală, lucrăm și cu culori RGB. Dacă fișierul dvs. Illustrator este setat la CMYK, puteți modifica acest lucru selectând logo-ul și navigând la Editare > Editare culori > Conversie în RGB.
Când sunteți gata, exportați logo-ul ca fișier vectorial stratificat. Deoarece tipurile de fișiere After Effects fac parte din familia de software Adobe, voi salva sigla pe care am creat-o ca fișier AI (Adobe Illustrator), dar există mai multe tipuri diferite de fișiere vectoriale din care să alegeți dacă utilizați alt software.
Pasul 2: importați-vă logo-ul în After Effects. Animație logo
Deschideți After Effects. Interfața poate părea complicată la prima vedere, așa că haideți să dezvăluim elementele de bază:
- Bara de instrumente : aici puteți accesa principalul instrumente graficecum ar fi instrumentul Pen, instrumentul Type etc.
- Panoul de proiect : Aici gestionați și organizați fișierele media pentru întregul proiect.
- Fereastra de compoziție : Aceasta este o fereastră de previzualizare video în care puteți previzualiza animația pentru compoziția curentă (numită adesea compoziție) la care lucrați. Compozițiile sunt în esență scene, fiecare cu propriile cronologie de animație separate. Vom discuta despre compoziții mai detaliat în secțiunea următoare.
- Cronologie : Aici vă veți crea animația. Acesta constă atât dintr-o cronologie literală din dreapta (unde veți configura evenimente de animație pentru a rula pe cronologia), cât și dintr-o zonă de aspect din stânga (unde veți suprapune și edita atributele materialelor dvs. media).
- Panou de control : Aici puteți accesa diverse funcții de suport, cum ar fi informații media, opțiuni de paragraf și aliniere și biblioteci de animații și efecte vizuale predefinite încorporate în After Effects.
Dacă nu sunteți sigur despre un instrument sau un buton, treceți mouse-ul peste acesta vă va oferi o descriere.
Pentru a importa un fișier logo, pur și simplu trageți-l în panoul Proiect sau selectați Fişier" > " Import" > " Fişier" . În următoarea casetă de dialog, selectați Import media ca filmare și straturi îmbinate .
Pasul 3: Configurați-vă compoziția. Animație logo.
O compoziție (comp) este un container care vă permite să compuneți, să editați și să aplicați animație fișierelor media. O producție mai mare, cum ar fi un film, va conține mai multe piese organizate într-un panou de proiect. Deci, vă puteți gândi la piesele ca la o singură scenă din acel film și fiecare piesă va avea propria sa cronologie separată. În cazul nostru, o animație de logo care durează mai puțin de cinci secunde necesită foarte puține compoziții.
Pentru a vă personaliza compoziția, trageți fișierele media în partea stângă a panoului cronologic.
Să începem cu un fundal simplu. Faceți clic dreapta pe panoul de aspect și selectați " Crea" > " Solid" . Deoarece logo-ul meu este alb, am ales solid negru, dar poți alege orice culoare. În fereastra următoare, numiți solidul (în cazul meu „BG”), faceți clic pe „ Faceți dimensiunea computer" și selectați " BINE" . Acum trageți fișierul logo din panoul Proiect în panoul Cronologie și ar trebui să vedeți sigla previzualizată în fereastra de compunere. Dacă nu, asigurați-vă că ați rearanjat straturile trăgând fundalul solid sub fișierul siglă.
Faceți clic dreapta pe fișierul logo din panoul de aspect și selectați Crea" > " Convertiți într-o compoziție cu mai multe straturi" . Acest lucru va transforma fișierul logo-ului într-o compoziție diferită (veți vedea că pictograma s-a schimbat). Făcând dublu clic pe fișierul logo, se va deschide o filă nouă și vă va duce la această nouă compoziție care conține toate straturile individuale pe care le-ați configurat în Illustrator. Acum puteți vedea cum funcționează compușii: ele sunt în esență ca subfolderele.
Animație logo
Dacă doriți, puteți converti fiecare dintre aceste straturi în compoziții separate făcând clic dreapta și selectând alcatuirea preliminara" . Acest lucru va oferi acestui strat propria cronologie de animație, imbricată în compoziția anterioară. Și dacă doriți să animați întregul logo dintr-o dată, ar trebui să utilizați o cronologie asociată compoziției principale.
Cu asta din drum, să înțelegem cum funcționează aceste cronologie pentru animație.
Pasul 4: Animați sigla folosind cadre cheie
After Effects (și majoritatea software-ului de animație) funcționează folosind cadre cheie. Cadrele cheie sunt în esență markeri pe care îi puteți seta pe cronologia pentru a determina când ar trebui să apară stările de început și de sfârșit pentru animația dvs.
De exemplu, să începem cu o animație foarte simplă: fading in. Un obiect are atribute diferite atașate, iar atributele care se schimbă într-o anumită perioadă de timp sunt în esență animație. Pentru a vedea aceste atribute, faceți clic pe pictograma Extindere de lângă logo, urmată de proprietate „Convertire” .
Creați cadre cheie făcând clic pe pictograma cronometru de lângă Proprietăți din panoul Cronologie.
Pentru o animație cu estompare, doriți să lucrați cu atributul care măsoară vizibilitatea unui obiect: opacitatea. Opacitatea este setată la 100% deoarece, implicit, sigla este complet vizibilă.
Faceți clic pe pictograma cronometru de lângă opțiunea Opacitate și veți vedea un romb unde este setat marcatorul capului de redare (linia albastră slabă care traversează linia temporală). Acesta este un cadru cheie, practic un instantaneu al valorii curente a unui atribut specificat. Mutați cadrul cheie făcând clic și trăgându-l la marcajul de 2 secunde de pe cronologia. Trageți glisorul înapoi la marcajul 0 secundă, apoi creați un alt cadru cheie și setați opacitatea la 0%. Apăsați pe bara de spațiu pentru a vizualiza animația în fereastra de compoziție.
Dupa efecte
Veți vedea că ați creat o animație cu fade-in lină schimbând opacitatea de la 0% la 100% în 2 secunde cu doar două cadre cheie. Așa se realizează toată animația în After Effects. Puteți crea un cadru cheie de început și un cadru cheie de sfârșit la intervale diferite de-a lungul liniei temporale, iar After Effects calculează automat tranzițiile de cadre necesare pentru a ajunge de la punctul A la punctul B (numite în mod tradițional cadre de interpolare în domeniul animației).
O animație simplă netedă este creată folosind două cadre cheie pentru proprietatea Opacitate.
Puteți vedea că există o serie de atribute cu care puteți lucra Transformă proprietatea, pe care o vom explica pe scurt aici. Simțiți-vă liber să experimentați cu cadre cheie și să le modificați pe fiecare pentru a obține o idee despre capacitățile lor de animație:
- Poziție : Acest atribut descrie poziția siglei în spațiul X, Y pe ecranul de aspect și permite animarea mișcării liniare.
- scară : Acest atribut descrie dimensiunea siglei (ca procent din dimensiunea completă a fișierului original) și vă permite să creați animații de mărire sau micșorare.
- Rotație : Acest atribut descrie orientarea în grade și vă permite să creați animații de rotație.
Sfaturi de la un profesionist :
Când vine vorba de animarea unui logo, este logic să lucrați înapoi (cum am făcut cu fade-in-ul), deoarece animația ar trebui să se termine pe logo-ul final, complet. Aceasta înseamnă că trebuie să creați cadre cheie înainte de a schimba ceva, astfel încât să aveți instantanee ale valorilor atributelor în starea lor implicită. Puteți muta apoi aceste cadre cheie la punctul final dorit de pe cronologia (oricat de mult doriți să dureze animația) și să creați noi cadre cheie pentru modificările de la începutul cronologiei.
Pasul 5. Animați logo-ul folosind straturi de formă.
Acum să trecem la tehnici de animație mai interesante folosind straturi de formă. Straturile de formă sunt obiecte care conțin informații despre cale, cum ar fi punctele de ancorare și liniile de conectare (asemănătoare cu cele din programele vectoriale), iar manipularea acestora deschide ușa către o întreagă gamă de posibilități de animație dincolo de Transformă proprietăți .
Cum să alegi culoarea potrivită pentru logo-ul tău?
Mai întâi vom transforma logo-ul într-un strat de formă. În panoul Compoziție stratificată (straturile create la pasul 3), selectați toate straturile, faceți clic dreapta și selectați „ Crea" > " Creați forme din stratul vectorial" . Veți vedea că fiecare strat este duplicat cu o stea lângă el - acesta este un strat de formă. Imbricate sub stratul de formă, veți găsi Proprietatea conținutului pe lângă Transformă proprietatea . La dreapta de Proprietățile conținutului veți vedea și un buton " Adăuga" , care vă va permite să selectați și mai multe atribute de animat.
Straturile de formă conțin un buton Adaugă (în partea dreaptă a proprietății Conținut) care vă permite să adăugați tot felul de proprietăți animate, cum ar fi traseele de tăiere.
Scalarea unui obiect în Adobe Illustrator
Tăiați căile
Pentru logo-ul meu, am folosit o animație destul de comună și utilă folosind proprietatea Trim Paths. Pentru a face acest lucru, am adăugat „Crop Paths” folosind butonul „ Adăuga" la straturile de formă pentru fiecare literă, setați cadru-cheie cu atributul Sfârșit la 0% la începutul cronologiei și 100% după aproximativ 1 secundă. După cum puteți vedea, conturul literelor pare a fi desenat de o mână invizibilă în timp real.
Utilizarea proprietății Trim Paths vă permite să animați liniile astfel încât acestea să se deseneze în timp real.
În plus, am vrut să adaug o animație de accent pe fundal. Din moment ce lucrez în alb-negru, am ales un efect de tunel în buclă care amintește de Twilight Zone. Pentru a face acest lucru, am folosit instrumentul poligon din panoul Instrumente pentru a desena o formă în centrul compoziției mele, creând un nou strat de formă.
Apoi am adăugat o proprietate Repeater, am centrat poziția și am crescut numărul de copii. Acest lucru dublează forma, creând un tunel aparent fără sfârșit. Reglarea scalei mărește spațiul dintre fiecare copie, iar schimbarea rotației orientează copiile în direcții diferite pentru interes vizual.
În cele din urmă, pentru a condimenta, am creat un cadru cheie de 0 la începutul cronologiei și ulterior l-am setat la o valoare negativă pe cronologie.
Folosind un strat de formă poligonală și proprietatea Repeater, am putut crea un fundal animat.
Probabil ați ghicit că există multe opțiuni pentru straturi de formă. Este adevărat: există cursuri online complete pe această temă pe Internet și ar trebui să îți iei timp să experimentezi, să exersezi și să înveți.
De asemenea, nu vă pot spune ce stil de animație vi se potrivește logo sau ce instrumente specifice animații de care veți avea nevoie pentru a realiza acest stil. Cu toate acestea, vă pot da sfaturi despre cum să îl descoperiți singur. Căutați inspirație din alte sigle animate, cum ar fi concurenții dvs., mărcile pe care le admirați și/sau site-uri precum Pinterest sau Dribbble - exact așa cum ați făcut atunci când ați creat inițial sigla.
Veți descoperi că odată ce începeți să le analizați folosind noile cunoștințe despre cum să animați un logo, multe dintre ele se bazează pe simple manipulări cu forme și transformări (chiar și cele care sunt în mod clar stratificate cu efecte stilizate avansate). Odată ce găsiți câteva care vă plac, puteți lucra înapoi în After Effects pentru a încerca să faceți inginerie inversă pentru acele animații pentru practică.
Pasul 6: Setați ora.
Să vorbim despre timp, care descrie ritmul cadrelor de animație de-a lungul animației. Puteți vedea o reprezentare vizuală a timpului accesând Editorul grafic. Pentru a face acest lucru, faceți clic pe pictograma grafic (etichetată Editor grafic când treceți cu mouse-ul peste ea) din partea de sus a panoului cronologiei și aceasta va schimba cronologia într-un grafic cu linii.
Dacă faceți clic pe unul dintre atributele cadru-cheie, veți vedea o linie dreaptă de la un cadru-cheie la altul. Momentan, din moment ce făceam doar cadru cheie punctele de început și de sfârșit, am lăsat After Effects să facă cronometrarea. Fără direcție, After Effects mută fiecare cadru al animației în mod egal, rezultând o linie perfect dreaptă.
Editorul de grafice arată sincronizarea cadrului cheie așa cum se arată în graficul cu linii.
Cu toate acestea, schimbarea intenționată în timp este cea care dă animației un sentiment de realism. De exemplu, într-o animație cu mingea care sări, mingea se mișcă mai lent la înălțimea săriturii și mai repede pe măsură ce se apropie de sol din cauza impulsului și a gravitației. Cu alte cuvinte, el nu se mișcă cu aceeași viteză pe toată durata animației și, dacă ar face-o, s-ar remarca ca robot.
Instrumentele Bezier, situate în partea de jos a editorului de grafice, vă permit să reglați curbura liniei graficului.
Convertiți cadrele cheie în Bezier automat
Editorul de grafice vă permite să ajustați sincronizarea propriei animații folosind așa-numitele mânere Bezier pentru a transforma o linie de grafic într-o curbă. În colțul din dreapta jos al editorului de grafice, veți vedea câteva pictograme cu puncte pătrate atașate liniilor - acestea sunt instrumente Bezier.
Faceți clic pe unul dintre cadrele cheie și plasați cursorul peste instrumentele Bezier până îl găsiți pe cel etichetat „ Convertiți cadrele cheie în Bezier automat" . Când faceți clic pe aceasta, veți vedea un marcator galben care apare pe grafic. Tragerea acestui mâner va face ca linia să se îndoaie și acest lucru va schimba sincronizarea animației. Acolo unde curba este mai pronunțată, cadrele se vor reda mai repede, iar acolo unde curba este mai netedă, cadrele se vor reda mai lent.
O curbă mai clară corespunde unei sincronizări mai rapide, iar o curbă mai netedă corespunde unei sincronizări mai lente.
Pentru a înțelege cu adevărat nuanțele ajustării propriului timp necesită experiență în animație, motiv pentru care ajustarea manuală a curbelor Bezier este un subiect mai avansat. În acest ghid pentru începători, vă recomand să utilizați instrumentul Bezier Ușurință ușoară (care aplică o curbă automată cadrului cheie pe care îl selectați) pentru toate intervalele de timp ale animației. Puteți aplica Ușurință ușoară la un cadru cheie din afara editorului de diagrame selectând cadrul cheie și făcând clic dreapta.
Pasul 7: Exportați sigla.
Când sunteți gata să exportați sigla animată finalizată, selectați „ Fişier" > " Export" > " Adăugați Adobe Media Encoder la coadă” . After Effects se exportă în mod implicit fișier în format mp4, care este potrivit pentru video. Deoarece dorim să creăm un fișier imagine care poate fi partajat cu logo-ul nostru, îl vom exporta ca GIF animat. În fereastra Media Encoder, faceți clic pe săgeata de lângă linia albastră evidențiată de text sub cuvântul „Format” și selectați „ GIF animat" . De asemenea, puteți seta folderul de destinație pentru fișierul final făcând clic pe textul albastru de sub cuvintele „Fișier de ieșire”.
Pentru a exporta un fișier, accesați Fișier > Export > Adăugați în coada Adobe Media Encoder și selectați Gif animat din lista derulantă din coloana Format.
Faceți dublu clic pe textul albastru evidențiat de sub presetare pentru a deschide fereastra Opțiuni de export. Există câteva opțiuni pe care veți dori să vă uitați pentru a reduce dimensiunea fișierului: Calitate (am setat-o la 20), Frame Rate (am setat-o la 10, deși sunt recomandate rate mai mari de cadre (fps) pentru video) și Durata, care este bara albastră din previzualizare (am tăiat-o pe a mea la 4 secunde). Selectați BINE, pentru a închide această fereastră.
Când ați terminat, selectați pictograma verde Redare din colțul din dreapta sus al Media Encoder și fișierul dvs. va fi afișat în folderul de destinație ales. Asta este: animația logo-ului terminată!
Dați viață mărcii dvs. cu animația logo-ului.
-
Animația logo-ului este mai mult decât o tendință populară pe care mărcile sunt forțate să o urmeze. Există, de asemenea, o magie incontestabilă pentru animația logo-ului și este o modalitate excelentă de a crea un moment de plăcere vizuală pentru toți cei care interacționează cu marca ta. Și, din fericire, software-ul de animație a evoluat astfel încât aproape oricine, indiferent de pricepere, poate adăuga puțin din acea magie propriului logo.
Acestea fiind spuse, deși acest tutorial are scopul de a începe cu elementele de bază ale animației logo-ului, este nevoie de multă încercare și eroare, practică și experimentare pentru a obține ceva dincolo de animația de bază. Dacă doriți o animație de logo cu adevărat specială, un animator de logo profesionist merită investiția.
Lasă un comentariu