L'animazione del logo è il processo di introduzione di movimento o modifiche agli elementi visivi di un logo per renderlo più dinamico e attraente. Può essere applicato a diverse parti di un logo, come testo, immagini, colori e forme, e può avere vari gradi di complessità, che vanno da semplici animazioni come testo che lampeggia o colori sbiaditi, ad animazioni complesse che coinvolgono oggetti in movimento o interattive. effetti.
L'animazione del logo sta diventando più comune. Tra gli smartphone e lo sviluppo generale della tecnologia Internet, i loghi sono oggi molto più comuni negli spazi digitali, e questo apre la porta a effetti visivi come l’animazione che non sono possibili con i prodotti fisici. Naturalmente, la crescente popolarità dell’animazione del logo significa che sempre più marchi ne avranno bisogno per rimanere competitivi. Quindi imparare ad animare un logo può essere un'abilità preziosa che porterà il tuo logo al livello successivo.
Allo stesso tempo, anche i software di animazione sono diventati più onnipresenti, snelli e intuitivi per supportare questa base di utenti in crescita. Quindi, non importa quanto possa sembrare tecnica e complessa l’animazione del logo, anche i principianti possono ora creare animazioni semplici ma efficaci.
Animazione del logo in After Effects -
Passaggio 1. Prepara il file del logo.
Inizieremo il nostro tutorial su come animare un logo in Adobe Illustrator (o software simile per la progettazione di loghi). Ciò è necessario per garantire che il nostro file logo impostato per l'animazione.
Sebbene il software di animazione stesso sia raster, i file del logo originale devono essere in formato vettoriale. Questo ti permette di cambiarli senza danno per la qualità dell'immagine (ad esempio, l'ingrandimento di un logo raster provoca la pixelizzazione) e questo sarà utile in seguito quando si lavora con i livelli forma.
Assicurati che il tuo logo sia separato in livelli utilizzando il pannello Livelli.
Il logo dovrebbe anche essere multistrato anziché raggruppato in un unico oggetto. Ciò semplifica la creazione di animazioni più complesse animando singole parti del logo. Puoi creare nuovi livelli utilizzando il comando " Aggiungi nuovo livello" nella parte inferiore del pannello Livelli, quindi copia e incolla al loro interno parti del tuo logo.
Infine, poiché l'animazione è di natura digitale, lavoriamo anche con i colori RGB. Se il tuo file Illustrator è impostato su CMYK, puoi modificarlo selezionando il tuo logo e accedendo a Modifica > Modifica colori > Converti in RGB.
Quando sei pronto, esporta il tuo logo come file vettoriale completamente a strati. Poiché i tipi di file After Effects fanno parte della famiglia di software Adobe, salverò il logo che ho creato come file AI (Adobe Illustrator), ma ci sono diversi tipi di file vettoriali tra cui scegliere se utilizzi altri software.
Passaggio 2: importa il tuo logo in After Effects. Animazione del logo
Apri After Effects. L'interfaccia può sembrare complicata a prima vista, quindi analizziamo le nozioni di base:
- Toolbar : qui puoi accedere al main strumenti graficicome lo strumento Penna, lo strumento Testo, ecc.
- Pannello del progetto : qui puoi gestire e organizzare i file multimediali per l'intero progetto.
- Finestra di composizione : questa è una finestra di anteprima video in cui puoi visualizzare in anteprima l'animazione per la composizione corrente (spesso chiamata composizione) su cui stai lavorando. Le composizioni sono essenzialmente scene, ciascuna con le proprie linee temporali di animazione separate. Discuteremo le composizioni in modo più dettagliato nella sezione successiva.
- Sequenza temporale : qui è dove creerai la tua animazione. È costituito sia da una sequenza temporale letterale sulla destra (dove imposterai gli eventi di animazione da eseguire sulla sequenza temporale) sia da un'area di layout sulla sinistra (dove sovrapporrai e modificherai gli attributi delle tue risorse multimediali).
- Pannello di controllo : qui puoi accedere a varie funzionalità di supporto come informazioni multimediali, opzioni di paragrafo e allineamento e librerie di animazioni ed effetti visivi predefinite integrate in After Effects.
Se non sei sicuro di uno strumento o di un pulsante, posizionando il mouse su di esso verrà visualizzata una descrizione.
Per importare un file logo, trascinalo semplicemente nel pannello Progetto o selezionalo File" > " Importare" > " File" . Nella finestra di dialogo successiva, seleziona Importa file multimediali come filmati e livelli uniti .
Passaggio 3: imposta la tua composizione. Animazione del logo.
Una composizione (comp) è un contenitore che consente di comporre, modificare e applicare animazioni ai file multimediali. Una produzione più ampia, come un film, conterrà più tracce organizzate in un pannello di progetto. Quindi puoi pensare alle tracce come a una singola scena di quel film e ogni traccia avrà una propria sequenza temporale separata. Nel nostro caso, un'animazione del logo che dura meno di cinque secondi richiede pochissime composizioni.
Per personalizzare la composizione, trascina i file multimediali sul lato sinistro del pannello timeline.
Cominciamo con uno sfondo semplice. Fare clic con il tasto destro sul pannello di layout e selezionare " Creare" > " Solido" . Dato che il mio logo è bianco, ho scelto il solido colore nero, ma puoi scegliere qualsiasi colore. Nella finestra successiva, dai un nome al solido (nel mio caso "BG"), fai clic su " Crea la dimensione computer" e seleziona " OK" . Ora trascina il file del logo dal pannello Progetto al pannello Timeline e dovresti vedere il tuo logo in anteprima nella finestra di composizione. In caso contrario, assicurati di riorganizzare i livelli trascinando lo sfondo a tinta unita sotto il file del logo.
Fare clic con il pulsante destro del mouse sul file del logo nel pannello di layout e selezionare Creare" > " Converti in una composizione multistrato" . Questo trasformerà il file del tuo logo in una composizione diversa (vedrai che l'icona è cambiata). Facendo doppio clic sul file del logo si aprirà ora una nuova scheda e ti porterà a questa nuova composizione contenente tutti i singoli livelli che hai impostato in Illustrator. Ora puoi vedere come funzionano i comps: sono essenzialmente come sottocartelle.
Animazione del logo
Se lo desideri, puoi convertire ciascuno di questi livelli in composizioni separate facendo clic con il pulsante destro del mouse e selezionando Composizione preliminare" . Ciò darà a questo livello la propria sequenza temporale di animazione, annidata nella composizione precedente. E se vuoi animare l'intero logo in una volta, dovresti utilizzare una timeline associata alla composizione principale.
Detto questo, capiamo come funzionano queste linee temporali per l'animazione.
Passaggio 4: animare il logo utilizzando i fotogrammi chiave
After Effects (e la maggior parte dei software di animazione) funziona utilizzando i fotogrammi chiave. I fotogrammi chiave sono essenzialmente marcatori che puoi impostare sulla timeline per determinare quando dovrebbero verificarsi gli stati di inizio e fine dell'animazione.
Ad esempio, iniziamo con un'animazione molto semplice: la dissolvenza in apertura. Un oggetto ha diversi attributi ad esso associati e gli attributi che cambiano in un dato periodo di tempo sono essenzialmente animazioni. Per visualizzare questi attributi, fai clic sull'icona Espandi accanto al logo seguito da proprietà "Converti" .
Crea fotogrammi chiave facendo clic sull'icona del cronometro accanto a Proprietà nel pannello Timeline.
Per un'animazione in dissolvenza, vuoi lavorare con l'attributo che misura la visibilità di un oggetto: l'opacità. L'opacità è impostata al 100% perché per impostazione predefinita il logo è completamente visibile.
Fai clic sull'icona del cronometro accanto all'opzione Opacità e vedrai un diamante in cui è impostato l'indicatore della testina di riproduzione (la debole linea blu che attraversa la sequenza temporale). Questo è un fotogramma chiave, fondamentalmente un'istantanea del valore corrente di un attributo specificato. Sposta il fotogramma chiave facendo clic e trascinandolo sul segno dei 2 secondi sulla timeline. Trascina nuovamente il cursore sul segno di 0 secondi, quindi crea un altro fotogramma chiave e imposta l'opacità su 0%. Premi la barra spaziatrice per visualizzare l'animazione nella finestra di composizione.
gli effetti dopo
Vedrai che hai creato un'animazione in dissolvenza uniforme modificando l'opacità dallo 0% al 100% in 2 secondi con solo due fotogrammi chiave. Ecco come vengono eseguite tutte le animazioni in After Effects. Potete creare un fotogramma chiave iniziale e uno finale a intervalli diversi lungo la timeline e After Effects calcola automaticamente le transizioni dei fotogrammi necessarie per passare dal punto A al punto B (tradizionalmente chiamati fotogrammi interpolati nel settore dell'animazione).
Viene creata un'animazione semplice e fluida utilizzando due fotogrammi chiave per la proprietà Opacità.
Puoi vedere che ci sono una serie di attributi con cui puoi lavorare Trasforma la proprietà, che qui spiegheremo brevemente. Sentiti libero di sperimentare con i fotogrammi chiave e di modificarli ciascuno per avere un'idea delle loro capacità di animazione:
- Posizione : Questo attributo descrive la posizione del logo nello spazio X, Y sulla schermata di layout e consente l'animazione del movimento lineare.
- Scala : questo attributo descrive la dimensione del logo (come percentuale della dimensione intera del file originale) e consente di creare animazioni di ingrandimento o riduzione.
- rotazione : Questo attributo descrive l'orientamento in gradi e consente di creare animazioni di rotazione.
Consiglio di un professionista :
Quando si tratta di animare un logo, ha senso lavorare all'indietro (come abbiamo fatto con la dissolvenza in apertura) poiché l'animazione dovrebbe terminare con il logo finito e completo. Ciò significa che è necessario creare fotogrammi chiave prima di modificare qualsiasi cosa in modo da avere istantanee dei valori degli attributi nel loro stato predefinito. Puoi quindi spostare questi fotogrammi chiave sul punto finale desiderato sulla timeline (per quanto tempo desideri che duri l'animazione) e creare nuovi fotogrammi chiave per le modifiche all'inizio della timeline.
Passaggio 5. Animare il logo utilizzando i livelli forma.
Passiamo ora a tecniche di animazione più interessanti utilizzando i livelli di forma. I livelli forma sono oggetti che contengono informazioni sul percorso come punti di ancoraggio e linee di connessione (simili a quelle dei programmi vettoriali) e la loro manipolazione apre le porte a tutta una serie di possibilità di animazione oltre Trasformare le proprietà .
Come scegliere il colore giusto per il tuo logo?
Per prima cosa convertiremo il logo in un livello di forma. Nel pannello Composizione a livelli (i livelli creati nel passaggio 3), seleziona tutti i livelli, fai clic con il pulsante destro del mouse e seleziona " Creare" > " Crea forme dal livello vettoriale" . Vedrai che ogni livello è duplicato con una stella accanto: questo è un livello di forma. Nidificato sotto il livello della forma, troverai Proprietà del contenuto oltre a Trasforma proprietà . Alla destra Proprietà del contenuto vedrai anche un pulsante " Aggiungere" , che ti consentirà di selezionare ancora più attributi da animare.
I livelli forma contengono un pulsante Aggiungi (a destra della proprietà Contenuto) che ti consente di aggiungere tutti i tipi di proprietà animate, come i tracciati di ritaglio.
Ridimensionare un oggetto in Adobe Illustrator
Ritaglia percorsi
Per il mio logo ho utilizzato un'animazione abbastanza comune e utile utilizzando la proprietà Trim Paths. Per fare questo ho aggiunto "Ritaglia Percorsi" utilizzando il pulsante " Aggiungere" ai livelli di forma per ciascuna lettera, imposta il fotogramma chiave dell'attributo Fine su 0% all'inizio della sequenza temporale e su 100% dopo circa 1 secondo. Come puoi vedere, il contorno delle lettere sembra disegnato da una mano invisibile in tempo reale.
L'uso della proprietà Tracciati di taglio ti consente di animare le linee in modo che si disegnino da sole in tempo reale.
Inoltre, volevo aggiungere qualche animazione allo sfondo. Dato che lavoro in bianco e nero, ho scelto un effetto tunnel in loop che ricorda ai confini della realtà. Per fare ciò, ho utilizzato lo strumento poligono nel pannello Strumenti per disegnare una forma al centro della mia composizione, creando un nuovo livello forma.
Quindi ho aggiunto una proprietà Ripetitore, ho centrato la posizione e aumentato il numero di copie. Questo duplica la forma, creando un tunnel apparentemente infinito. La regolazione della scala aumenta lo spazio tra ciascuna copia e la modifica della rotazione orienta le copie in direzioni diverse per interesse visivo.
Infine, per rendere il tutto più piccante, ho impostato un keyframe con un offset pari a 0 all'inizio della timeline e successivamente l'ho impostato su un valore negativo sulla timeline.
Utilizzando un livello di forma poligonale e la proprietà Ripetitore, sono riuscito a creare uno sfondo animato.
Probabilmente hai intuito che ci sono molte opzioni per i livelli forma. È vero: su Internet si trovano corsi online completi sull'argomento e dovresti prenderti il tempo per sperimentare, esercitarti e imparare.
Inoltre, non posso dirti quale stile di animazione sarà adatto alle tue esigenze logo o quali strumenti specifici animazioni necessarie per ottenere questo stile. Posso però darti dei consigli su come scoprirlo da solo. Cerca ispirazione da altri loghi animati, come quelli della concorrenza, dai marchi che ammiri e/o da siti come Pinterest o Dribbble, proprio come hai fatto quando hai creato originariamente il logo.
Scoprirai che una volta che inizi ad analizzarli utilizzando le tue nuove conoscenze su come animare un logo, molti di essi sono basati su semplici manipolazioni con forme e trasformazioni (anche quelle chiaramente stratificate con effetti stilizzati avanzati). Una volta trovate alcune che ti piacciono, puoi lavorare all'indietro in After Effects per provare a decodificare quelle animazioni per esercitarti.
Passaggio 6: impostare l'ora.
Parliamo del tempo, che descrive il ritmo dei fotogrammi dell'animazione durante l'animazione. Puoi vedere una rappresentazione visiva del tempo accedendo all'editor grafico. Per fare ciò, fai clic sull'icona del grafico (etichettata Editor grafico quando passi il mouse sopra di essa) nella parte superiore del pannello della timeline e questo cambierà la timeline in un grafico a linee.
Se fai clic su uno degli attributi del fotogramma chiave, vedrai una linea retta da un fotogramma chiave a quello successivo. In questo momento, poiché stavamo creando keyframe solo per i punti iniziale e finale, abbiamo lasciato che After Effects si occupasse dei tempi. Senza direzione, After Effects sposta ogni fotogramma dell'animazione in modo uniforme, risultando in una linea perfettamente retta.
L'editor grafico mostra la temporizzazione dei fotogrammi chiave come mostrato nel grafico a linee.
Tuttavia, il cambiamento mirato nel tempo è ciò che dà all'animazione un senso di realismo. Ad esempio, nell'animazione di una palla che rimbalza, la palla si muove più lentamente al culmine del rimbalzo e più velocemente quando si avvicina al suolo a causa della quantità di moto e della gravità. In altre parole, non si muove alla stessa velocità durante l'intera animazione e, se lo facesse, risalterebbe come un robot.
Gli strumenti Bezier, situati nella parte inferiore dell'editor grafico, consentono di regolare la curvatura della linea del grafico.
Converti fotogrammi chiave in Bezier automatico
L'editor grafico ti consente di regolare i tempi della tua animazione utilizzando le cosiddette maniglie di Bezier per trasformare una linea del grafico in una curva. Nell'angolo in basso a destra dell'editor grafico vedrai alcune icone di punti quadrati attaccate alle linee: questi sono strumenti di Bezier.
Fai clic su uno dei fotogrammi chiave e passa il mouse sugli strumenti Bezier finché non trovi quello etichettato " Converti fotogrammi chiave in Bezier automatico" . Quando fai clic su questo, vedrai apparire un indicatore giallo sul grafico. Trascinando questa maniglia la linea si piegherà e ciò modificherà i tempi dell'animazione. Dove la curva è più pronunciata, i fotogrammi verranno riprodotti più velocemente, mentre dove la curva è più morbida, i fotogrammi verranno riprodotti più lentamente.
Una curva più nitida corrisponde a una sincronizzazione più rapida, mentre una curva più uniforme corrisponde a una sincronizzazione più lenta.
Per comprendere veramente le sfumature della regolazione dei propri tempi è necessaria esperienza nell'animazione, motivo per cui la regolazione manuale delle curve di Bezier è un argomento più avanzato. In questa guida per principianti, consiglio di utilizzare lo strumento Bezier Facile facilità (che applica una curva automatica al fotogramma chiave selezionato) per tutti gli intervalli di tempo dell'animazione. Puoi candidarti Facile facilità a un fotogramma chiave all'esterno dell'editor di diagrammi selezionando il fotogramma chiave e facendo clic con il pulsante destro del mouse.
Passaggio 7: esporta il tuo logo.
Quando sei pronto per esportare il logo animato finito, seleziona " File" > " Esportare" > " Aggiungi Adobe Media Encoder alla coda" . After Effects esporta per impostazione predefinita file in formato mp4, adatto per i video. Poiché vogliamo creare un file immagine condivisibile del nostro logo, lo esporteremo come GIF animata. Nella finestra Media Encoder, fai clic sulla freccia accanto alla riga di testo blu evidenziata sotto la parola "Formato" e seleziona " GIF animata" . Puoi anche impostare la cartella di destinazione per il file finito facendo clic sul testo blu sotto le parole "File di output".
Per esportare un file, vai su File > Esporta > Aggiungi alla coda di Adobe Media Encoder e seleziona Gif animata dall'elenco a discesa nella colonna Formato.
Fare doppio clic sul testo blu evidenziato sotto la preimpostazione per aprire la finestra Opzioni di esportazione. Ci sono alcune opzioni che dovresti considerare per ridurre le dimensioni del file: Qualità (l'ho impostato su 20), Frequenza fotogrammi (l'ho impostato su 10, anche se per i video si consigliano frequenze fotogrammi (fps) più elevate) e Durata, che è la barra blu sotto l'anteprima (la mia l'ho ridotta a 4 secondi). Selezionare bene per chiudere questa finestra.
Quando hai finito, seleziona l'icona verde Riproduci nell'angolo in alto a destra di Media Encoder e il tuo file verrà visualizzato nella cartella di destinazione prescelta. Questo è tutto: animazione del logo terminata!
Dai vita al tuo marchio con l'animazione del logo.
-
L’animazione del logo è molto più di una semplice tendenza popolare che i marchi sono costretti a seguire. C'è anche un'innegabile magia nell'animazione del logo ed è un ottimo modo per creare un momento di piacere visivo per tutti coloro che interagiscono con il tuo marchio. E fortunatamente, i software di animazione si sono evoluti in modo tale che quasi chiunque, indipendentemente dalle proprie capacità, può aggiungere un po’ di quella magia al proprio logo.
Detto questo, anche se questo tutorial ha lo scopo di farti iniziare con le basi dell'animazione del logo, sono necessari molti tentativi ed errori, pratica e sperimentazione per ottenere qualcosa oltre l'animazione di base. Se desideri un'animazione del logo davvero speciale, vale la pena investire in un animatore di logo professionista.
Lascia un commento