L'animazione di u logu hè u prucessu di introduzione di u muvimentu o cambiamenti à l'elementi visuali in un logu per rende più dinamica è attrattiva. Pò esse appiicatu à diverse parti di un logu, cum'è testu, imagine, culori è forme, è pò avè varii gradi di cumplessità, chì varieghja da animazioni simplici, cum'è u testu lampeggiante o culori sbiaditi, à animazioni cumplessi chì implicanu oggetti in movimentu o interattivi. effetti.

L'animazione di u logo hè diventata più cumuna. Trà i smartphones è u sviluppu generale di a tecnulugia di l'internet, i loghi sò oghji assai più cumuni in i spazii digitali, è questu apre a porta à l'effetti visuali cum'è l'animazione chì ùn sò micca pussibule cù i prudutti fisichi. Di sicuru, a pupularità crescente di l'animazione di u logu significa chì più è più marche anu bisognu à esse cumpetitiva. Allora amparà à animà un logu pò esse una abilità preziosa chì purterà u vostru logu à u prossimu livellu.

Cumu sceglie u culore ghjustu per u vostru logò?

À u listessu tempu, u software di animazione hè diventatu ancu più omnipresente, simplificatu è intuitivu per sustene sta basa d'utilizatori in crescita. Dunque, ùn importa quantu l'animazione di logu tecnicu è cumplessu pò sona, ancu i principianti ponu avà creà animazioni simplici ma efficaci.

 

Logo Animation in After Effects -

Step 1. Preparate u vostru schedariu logu.

Cuminceremu in realtà u nostru tutoriale nantu à cumu animà un logu in Adobe Illustrator (o software di cuncepimentu di logò simili). Questu hè necessariu per assicurà chì u nostru schedariu logu creatu per l'animazione.

Registrazione di u logo

Ancu s'ellu u software d'animazione stessu hè raster, i schedarii di u logu originale deve esse in formatu vettoriale. Stu vi permette di canciari li senza danni per a qualità di l'imaghjini (per esempiu, l'aumentu di a scala di un logu raster porta à a pixelazione), è questu serà utile dopu à travaglià cù strati di forma.

Captura di schermu Adobe Illustrator cù logu in l'animazione Logo.

Assicuratevi chì u vostru logò hè separatu in strati utilizendu u pannellu Layers.

U logò deve ancu esse multi-layered piuttostu chè raggruppati in un oggettu. Questu facilita a creazione di animazioni più cumplesse animate parti individuali di u logò. Pudete creà novi strati cù u "  Aghjunghjite un novu stratu " in u fondu di u pannellu di strati, è dopu copià è incollà parti di u vostru logu in elli.

Infine, postu chì l'animazione hè di natura digitale, avemu ancu travagliatu cù culori RGB. Se u vostru schedariu Illustrator hè stabilitu in CMYK, pudete cambià questu selezziunate u vostru logò è navigendu in Edit> Edit Colors> Cunvertite in RGB.

Quandu site prontu, esportate u vostru logu cum'è un schedariu vettoriale cumpletamente strattu. Siccomu i tipi di fugliale After Effects sò parti di a famiglia di software Adobe, andaraghju à salvà u logò chì aghju creatu cum'è un schedariu AI (Adobe Illustrator), ma ci sò parechji tippi diffirenti di fugliali vettoriali da sceglie s'è vo aduprate un altru software.

Passu 2: Import u vostru logu in After Effects. Animazione di u logo

Aprite After Effects. L'interfaccia pò parè complicata à u primu sguardu, allora scomponemu i principii:

Animazione di Logo Adobe After Effects

 

 
  1. Toolbar : quì pudete accede à u principale strumenti di graficacume u strumentu Pen, strumentu Type, etc.
  2. Panel di prughjettu : Questu hè induve gestisce è urganizà i schedarii media per tuttu u prughjettu.
  3. Finestra di cumpusizioni : Questa hè una finestra di vista previa di video induve pudete vede in anteprima l'animazione per a cumpusizioni attuale (spessu chjamata cumpusizioni) chì travagliate. E cumpusizioni sò essenzialmente sceni, ognunu cù u so propiu timeline d'animazione separati. Discuteremu di e cumpusizioni in più detail in a sezione dopu.
  4. Timeline : Questu hè induve creà a vostra animazione. Hè custituitu da una cronologia litterale à a diritta (induve cunfigurà avvenimenti d'animazione per eseguisce nantu à a cronologia) è una zona di layout à a manca (induve sovrappone è edità l'attributi di i vostri attivi media).
  5. panel, cuntrollu : Quì pudete accede à diverse funzioni di supportu cum'è l'infurmazioni media, l'opzioni di paragrafi è l'allineamentu, è l'animazione pre-custruita è e biblioteche di effetti visuali integrati in After Effects.

Se ùn site micca sicuru di un strumentu o buttone, passa u mouse sopra vi darà una descrizzione.

Per impurtà un schedariu di logu, trascinallu in u pannellu di u Prughjettu o selezziunate  Fichier "  > «  Importa "  > «  Fichier " . In u prossimu dialogu, sceglie Import media cum'è  filmati è strati uniti .

Passu 3: Configurate a vostra cumpusizioni. Animazione di u logo.

Una cumpusizioni (comp) hè un cuntinuu chì permette di cumpone, edità è applicà animazione à i schedarii media. Una pruduzzione più grande, cum'è un filmu, cuntene parechje piste organizate in un pannellu di prughjettu. Allora pudete pensà à e piste cum'è una sola scena in quellu filmu, è ogni traccia avarà a so propria timeline separata. In u nostru casu, una animazione di logò chì dura menu di cinque seconde richiede assai pochi cumpusizioni.

After Effects cù a cumpusizioni creatu. Animazione di u logo

Per persunalizà a vostra cumpusizioni, trascinate i fugliali media à u latu manca di u pannellu di cronologia.

Cuminciamu cù un sfondate simplice. Cliccate cù u dirittu nantu à u pannellu di layout è selezziunate " Creà "  > «  solidu" . Siccomu u mo logu hè biancu, aghju sceltu solidu culore neru, ma pudete sceglie qualsiasi culore. In a finestra dopu, chjamate u solidu (in u mo casu "BG"), cliccate "  Fate taglia  computer" è selezziunate "  OK " . Avà trascinate u vostru logu da u pannellu di Prughjettu à u pannellu Timeline è duvete vede u vostru logu in anteprima in a finestra di cumpusizioni. Se no, assicuratevi di riorganizzate i strati trascinendu u fondu solidu sottu à u schedariu di logò.

Cliccate cù u dirittu nantu à u schedariu logu in u pannellu di layout è selezziunate Creà " > « Cunvertisce in una cumpusizioni multi-layer" . Questu hà da trasfurmà u vostru logu in una cumpusizioni sfarente (vedete chì l'icona hè cambiata). Doppiu cliccà nantu à u fugliale di logò avà apre una nova tabulazione è vi porta à sta nova cumpusizioni chì cuntene tutti i strati individuali chì avete stabilitu in Illustrator. Avà pudete vede cumu funziona i cumpunenti: sò essenzialmente cum'è sottocartulari.

Logo animazione

Se vulete, pudete cunvertisce ognuna di sti strati in cumpusizioni separati clicchendu u dirittu è selezziunate  cumpusizioni preliminari" . Questu darà sta strata a so propria cronologia di animazione, nidificata in a cumpusizioni precedente. È se vulete animà tuttu u logu in una volta, duvete aduprà un timeline assuciatu cù a cumpusizioni principali.

Cù questu fora di a strada, capiscemu cumu queste timelines funzionanu per l'animazione.

Passu 4: Animate u Logo Using Keyframes

After Effects (è a maiò parte di u software di animazione) travaglia cù fotogrammi chjave. I fotogrammi chjave sò essenzialmente marcatori chì pudete stabilisce nantu à a cronologia per determinà quandu i stati di iniziu è di fine per a vostra animazione devenu esse.

Per esempiu, cuminciamu cù una animazione assai simplice: fading in. Un ughjettu hà diverse attributi attaccati à ellu, è l'attributi chì cambianu annantu à un certu periodu di tempu sò essenzialmente animazione. Per vede questi attributi, cliccate nantu à l'icona Expand accantu à u logò seguita da pruprietà "Cunvertite" .

Adobe After Effects Timeline Panels Animazione Logo

Crea fotogrammi chjave clicchendu l'icona di cronometro accantu à Pruprietà in u pannellu Timeline.

Per una animazione fading, vulete travaglià cù l'attributu chì misura a visibilità di un ughjettu: opacità. L'opacità hè stabilita à 100% perchè per difettu u logu hè completamente visibile.

Cliccate l'icona di cronometro accantu à l'opzione Opacità è vi vede un diamante induve u marcatore di playhead hè stallatu (a linea blu debole chì attraversa a cronologia). Questu hè un fotogramma chjave, basicamente un snapshot di u valore attuale di un attributu specificatu. Move u keyframe clicchendu è trascinendu à a marca di 2 secondi in u timeline. Trascinate u slider torna à a marca 0 seconda, dopu create un altru fotogramma chjave è stabilisce l'opacità à 0%. Press Spacebar per vede l'animazione in a finestra di cumpusizioni.

After Effects

Puderete vede chì avete creatu una animazione di fade-in liscia cambiendu l'opacità da 0% à 100% in 2 seconde cù solu dui fotogrammi chjave. Questu hè cumu tutte l'animazioni sò fatte in After Effects. Pudete creà un fotogramma chjave di iniziu è un fotogramma chjave di fine à intervalli diffirenti longu u timeline, è After Effects calcula automaticamente e transizioni di frame necessarie per andà da u puntu A à u puntu B (tradizionalmente chjamati tween frames in l'attività di animazione).

Gif animatu di una animazione crescente in After Effects

Una animazione liscia simplice hè creata cù dui fotogrammi chjave per a pruprietà Opacità.

Pudete vede chì ci sò una quantità di attributi chì pudete travaglià cù Trasfurmà a pruprietà, chì spiegheremu brevemente quì. Sentite liberu di sperimentà cù fotogrammi chjave è mudificà ognuna per avè una sensazione di e so capacità d'animazione:

  • Posizione : Stu attributu descrive a pusizione di u logò in X, Y spaziu nantu à a pantalla di layout è permette u muvimentu lineale per esse animatu.
  • Scala : Questu attributu descrive a dimensione di u logu (cum'è un percentinu di a dimensione completa di u schedariu originale) è permette di creà animazioni zoom-in o shrink-out.
  • Rotazione : Questu attributu descrive l'orientazione in gradi è permette di creà animazioni di rotazione.

Cunsiglii da un prufessiunale :

Quandu si tratta di l'animazione di un logu, hè sensu di travaglià in daretu (cum'è avemu fattu cù u fade-in) postu chì l'animazione deve finisce nantu à u logu finitu è ​​cumpletu. Questu significa chì avete bisognu di creà fotogrammi chjave prima di cambià qualcosa in modu chì avete snapshots di i valori di l'attributu in u so statu predeterminatu. Pudete tandu move sti fotogrammi chjave à u puntu finale desideratu nantu à a cronologia (per quantu vulete chì l'animazione durà) è creà novi fotogrammi chjave per i cambiamenti à u principiu di a cronologia.

Passu 5. Animate u logu cù strati di forma.

Avà andemu à tecnichi d'animazione più interessanti chì utilizanu strati di forma. I strati di forma sò l'uggetti chì cuntenenu l'infurmazioni di u percorsu, cum'è i punti d'ancora è e linee di cunnessione (simili à quelli in i prugrammi vettoriali), è a manipulazione apre a porta à una larga gamma di pussibulità di animazione oltre. Pruprietà di trasfurmà .

Cumu sceglie u culore ghjustu per u vostru logò?

Prima avemu da cunvertisce u logu in un stratu di forma. In u pannellu di Composizione in strati (i strati creati in u passu 3), selezziunate tutti i vostri strati, fate un clic right è selezziunate "  Creà "  > «  Crea forme da strati vettoriali " . Vi vede chì ogni capa hè duplicata cù una stella vicinu à questu - questu hè un stratu di forma. Nidificatu sottu à a capa di forma, truverete Pruprietà di cuntenutu in oltre Trasfurmà a pruprietà . A diritta di Pruprietà di cuntenutu vi vede ancu un buttone " Aghjunghje " , chì vi permetterà di selezziunà ancu più attributi per animà.

Pannelli di cronologia di Adobe After Effects

I strati di forma cuntenenu un buttone Aggiungi (à a diritta di a pruprietà di u cuntenutu) chì vi permette di aghjunghje ogni tipu di pruprietà animate, cum'è i percorsi di clipping.

Scala un ughjettu in Adobe Illustrator

Trim Paths

Per u mo logò, aghju utilizatu una animazione abbastanza cumuna è utile cù a pruprietà Trim Paths. Per fà questu aghju aghjustatu "Crop Paths" cù u buttone " Aghjunghje " à i strati di forma per ogni lettera, stabilisce l'attributu End keyframe à 0% à l'iniziu di u timeline è 100% dopu à circa 1 secondu. Comu pudete vede, u contornu di e lettere pare esse disegnatu da una manu invisibile in tempu reale.

Trim Paths permette di animate e linee. Animazione di u logo

Utilizà a pruprietà Trim Paths vi permette di animà e linee in modu chì si disegnanu in tempu reale.

Inoltre, vulia aghjunghje una animazione di accentu à u fondu. Siccomu u travagliu in biancu è neru, aghju sceltu un effettu di tunnel in looping chì ricorda a Twilight Zone. Per fà questu, aghju utilizatu l'uttellu di poligonu in u pannellu di Strumenti per disegnà una forma in u centru di a mo cumpusizioni, creendu una nova capa di forma.

Allora aghju aghjustatu una pruprietà Repeater, centru a pusizione è hà aumentatu u numeru di copie. Questu duplica a forma, creendu un tunnel apparentemente infinitu. L'aghjustà a scala aumenta u spaziu trà ogni copia, è cambià a rotazione orienta e copie in diverse direzzione per l'interessu visuale.

Infine, per spice it up, aghju keyframed un offset di 0 à l'iniziu di u timeline è dopu l'aghju stabilitu à un valore negativu nantu à u timeline.

Screenshot di Adobe After Effect

Utilizendu una capa di forma poligonale è a pruprietà Repeater, aghju pussutu creà un fondo animatu.

Probabilmente avete intuitu chì ci sò parechje opzioni per i strati di forma. Hè vera : ci sò corsi cumpleti in linea nantu à u sughjettu nantu à Internet, è duvete piglià u tempu per sperimentà, praticà è amparà.

Ùn possu micca dì ancu quale stile di animazione vi cunvene logu o chì strumenti specifichi animazioni vi tuccherà à ottene stu stile. Tuttavia, vi possu dà cunsiglii nantu à cumu scopre per sè stessu. Cerca l'ispirazione da altri loghi animati, cum'è i vostri cuncurrenti, i marchi chì ammirate, è / o siti cum'è Pinterest o Dribbble - cum'è avete fattu quandu avete creatu u logu originale.

Truverete chì una volta chì avete cuminciatu à analizà aduprendu a vostra nova cunniscenza di cumu animà un logu, assai di elli sò basati in simplicità. manipulazioni cù forme è trasfurmazioni (ancu quelli chì sò chjaramente stratificati cù effetti stilizzati avanzati). Una volta truvate uni pochi chì ti piace, pudete travaglià in daretu in After Effects per pruvà à ingegneria inversa quelli animazioni per a pratica.

Passu 6: Stallà u tempu.

Parlemu di u tempu, chì descrive u ritmu di i frames d'animazione in tutta l'animazione. Pudete vede una rappresentazione visuale di u tempu andendu à l'Editor Graficu. Per fà questu, cliccate nantu à l'icona di u graficu (etichettatu Editore graficu quandu passa sopra) in a cima di u pannellu di a cronologia è questu cambierà a cronologia in un graficu di linea.

Se cliccate nantu à unu di l'attributi keyframe, vi vede una linea recta da un keyframe à l'altru. Avà, postu chì eramu solu keyframing i punti di partenza è di fine, avemu lasciatu After Effects per fà u timing. Senza direzzione, After Effects move ogni quadru di l'animazione in modu uniforme, risultatu in una linea perfettamente dritta.

Editor di grafici. Animazione di u logo

L'editore graficu mostra u timing di u quadru chjave cum'è mostra in u graficu di linea.

In ogni casu, u cambiamentu propiu in u tempu hè ciò chì dà l'animazione un sensu di realismu. Per esempiu, in una animazione di ballu chì rimbalza, u ballu si move più lento à l'altitudine di u saltu è più veloce quandu s'avvicina à a terra per u momentu è a gravità. In altre parolle, ùn si move micca à a listessa velocità in tutta l'animazione, è s'ellu facia, si distinguerà cum'è un robot.

Animazione di u Logo Bezier Tools

L'arnesi Bezier, situati à u fondu di l'editore di graficu, permettenu di aghjustà a curvatura di a linea di graficu.

Cunvertisce Keyframes à Auto Bezier

L'Editor Graficu vi permette di aghjustà u timing di a vostra propria animazione utilizendu e maniche Bezier chjamate per trasfurmà una linea di graficu in una curva. In l'angulu in fondu à diritta di l'editore graficu, vi vede qualchi icone di punti quadrati attaccati à e linee - quessi sò strumenti Bezier.

Cliccate unu di i fotogrammi chjave è passate sopra l'arnesi Bezier finu à truvà quellu marcatu "  Cunvertite Keyframes à Auto Bezier" . Quandu clicate nantu à questu, vi vede un marcatore giallu chì appare nantu à u graficu. Trascinendu stu manicu pruvucarà a linea per piegà è questu cambierà u timing di a vostra animazione. Induve a curva hè più pronunciata, i frames riproduceranu più veloce, è induve a curva hè più liscia, i frames riproduceranu più lentu.

Screenshot di i strumenti Bezier in Adobe After Effects

Una curva più nitida currisponde à una sincronia più veloce, è una curva più liscia currisponde à una sincronia più lenta.

Per capisce veramente e sfumature di l'aghjustà u vostru propiu timing richiede una sperienza d'animazione, per quessa, aghjustà manualmente e curve di Bezier hè un tema più avanzatu. In questa guida per principianti, vi cunsigliu di utilizà l'uttellu Bezier Facilità faciule (chì applica una curva automatica à u fotogramma chjave chì selezziunate) per tutti l'intervalli di tempu d'animazione. Pudete applicà  Facilità faciule  à un fotogramma chjave fora di l'editore di diagramma selezziunate u fotogramma chjave è cliccà cù u dirittu right.

Passu 7: Esporta u vostru logu.

Quandu site prontu à esportà u vostru logu animatu finitu, selezziunate " Fichier " > «  Esporta "  > «  Aghjunghjite Adobe Media Encoder à a fila " . After Effects esporta per automaticamente schedariu in u furmatu mp4, chì hè adattatu per u video. Siccomu vulemu creà un schedariu d'imaghjini sparte di u nostru logu, l'esportaremu cum'è GIF animatu. In a finestra di Media Encoder, cliccate nantu à a freccia accantu à a linea blu di testu evidenziata sottu a parolla "Format" è selezziunate "  GIF animatu" . Tù dinù ponu stabilisce u cartulare distinazione di u vostru schedariu finitu clicchendu u testu turchinu sottu à e parolle "Output File".

Adobe Media Encoder

Per esportà un schedariu, andate à File> Export> Add to Adobe Media Encoder Queue è selezziunate Gif animatu da a lista di u menù in a colonna Format.

Cliccate doppiu u testu blu evidenziatu sottu u preset per apre a finestra Opzioni d'esportazione. Ci hè uni pochi di opzioni chì vulete guardà per riduce a dimensione di u vostru schedariu: Qualità (l'aghju stabilitu à 20), Frame Rate (l'aghju stabilitu à 10, anche se i ritmi di fotogrammi più alti (fps) sò cunsigliati per u video), è Duration, chì hè a barra blu sottu preview (aghju trimmed mine à 4 seconde). Selezziunà  OK,  per chjude sta finestra.

Quandu avete finitu, selezziunate l'icona Play verde in l'angulu superiore destra di Media Encoder è u vostru schedariu serà visualizatu in u cartulare di destinazione sceltu. Eccu tuttu: animazione di logu finita!

Fate a vostra marca à a vita cù l'animazione di logò.
-

L'animazione di u logo hè più cà una tendenza populari chì e marche sò obligate à seguità. Ci hè ancu una magia innegabile à l'animazione di u logu, è hè una bella manera di creà un mumentu di piacè visuale per tutti quelli chì interagiscenu cù a vostra marca. E per furtuna, u software d'animazione hà evolutu in modu chì quasi tutti, indipendentemente da l'abilità, ponu aghjunghje un pocu di quella magia à u so propiu logò.

Dittu questu, mentri stu tutorialu hè destinatu à avè principiatu cù i principii di l'animazione di logu, ci vole assai prucessu è errore, pratica è sperimentazione per uttene qualcosa oltre l'animazione basica. Se vulete una animazione di logò veramente speciale, un animatore di logu prufessiunale vale a pena l'investimentu.

 АЗБУКА

 

Definizioni è Termini di u Web Design