Come animare un logo
La fase di design di un logo è uno dei punti nodali all’interno di qualsiasi strategia di marketing, nella quale occorre sintetizzare visivamente tutto ciò che riguarda l’attività, il settore di appartenenza, la mission e tutti i messaggi in grado di attirare l’attenzione di un determinato target di utenti.
L’animazione, in questo senso, aiuta ad ampliare le possibilità comunicative, sfruttando il movimento come ulteriore elemento per descrivere il brand. Non solo: conferisce maggiore dinamismo, rendendo più facile la memorizzazione delle immagini, dei suoni e dei colori, ed è più adattabile a vari contesti, in particolare alle campagne di advertising e sui social network.
Se, dunque, stai cercando una guida su come animare un logo, sappi che sei arrivato proprio nel posto giusto! Ho infatti preparato questo tutorial per aiutarti a concretizzare l’idea che hai già in testa: se mi dedichi qualche minuto del tuo tempo, nei prossimi capitoli ti fornirò dei consigli sugli strumenti idonei alla realizzazione del logo e la spiegazione su come usarli per realizzare delle animazioni degne di tale nome. Sei pronto per iniziare? Benissimo, sento già che la tua creatività sta per essere stimolata a dovere!
Indice
Come animare un logo
Esistono diversi metodi per risolvere il problema di come animare un logo in maniera efficace, e nei prossimi paragrafi ti proporrò quelle che nel mondo della computer grafica vengono ritenute alcune tra le migliori soluzioni software adatte allo scopo. L’animazione base non è assolutamente difficile da realizzare: con un po’ di pazienza e la giusta dose di inventiva potrai realizzare il tuo logo animato. Esatto, proprio quello che ti stai immaginando adesso, di alta qualità e professionale.
Come animare un logo con After Effects
Adobe After Effects è senza ombra di dubbio uno degli strumenti più gettonati utilizzati dai designer professionisti nella realizzazione di qualsiasi tipo di animazione, 2D e 3D, in quanto permette di usufruire di una vasta gamma di funzionalità avanzate di alto livello.
Nonostante la sua vocazione professionale, si tratta comunque di un software abbastanza intuitivo, in particolare nella composizione di elementi più semplici ed essenziali. Non avrai particolari difficoltà, dunque, a capire come animare un logo con After Effects. Ti basterà seguire passo per passo questo tutorial. Se hai bisogno di sapere come reperire il software in questione, ti consiglio di leggere la mia guida dedicata, dove ti spiego come usufruire di una sua versione di prova gratuita, sia per Windows che per macOS. Se invece senti il bisogno di ripassare le varie funzionalità che questo programma mette a disposizione, ho preparato anche una guida su come usare After Effects.
Per poter lavorare su After Effects, l’immagine di base che andrai a caricare deve essere stata necessariamente salvata nei singoli elementi che la compongono, che in questo software vengono definiti layer. In questo modo è possibile operare sui vari componenti, attribuendo a ognuno di essi delle specifiche proprietà. Una volta aperto After Effects, dalla schermata principale, clicca sul pulsante Nuova Composizione collocato al centro. Vedrai comparire una finestra nella quale vanno inseriti in particolare due parametri: le dimensioni in larghezza e lunghezza (espresse in pixel), che devono corrispondere a quelle del tuo logo, e la durata dell’animazione. Puoi comunque variare in qualsiasi momento queste impostazioni.
Per acquisire i vari elementi del tuo logo clicca sul menu File > Importa > File, in alto a sinistra, e dalla finestra di Esplora File che si apre scegli le immagini; quindi clicca sul pulsante Importa. Gli elementi compariranno sul pannello Browser, a sinistra, e per poterci operare dovrai selezionarli, tenere premuto il clic del mouse e trascinarli fisicamente fino al pannello Livelli posto in basso, a sinistra della Timeline.
Ora, per impostare una semplice animazione, seleziona sempre dal pannello Livelli il layer su cui vuoi operare, quindi premi P sulla tastiera per richiamare la funzionalità di Posizione. Per posizionare l’oggetto, clicca sullo strumento Selezione (presente nel menu in alto a sinistra e contraddistinto dall’icona di una freccia), quindi clicca l’oggetto prescelto sul riquadro centrale di Composizione e spostalo (sempre tenendo premuto il tasto sinistro del mouse) nel punto che hai scelto come partenza dell’animazione.
È venuto il momento di attivare il primo Keyframe, ovvero il fotogramma che serve al sistema per definire e calcolare i vari momenti dell’animazione. Per farlo, clicca sull’icona cronometro accanto al campo Posizione: vedrai comparire un piccolo diamante in corrispondenza dell’indicatore temporale. Da questo momento in poi, con il cronometro acceso, ogni movimento che eseguirai nella composizione verrà registrato dal software.
Prova, ad esempio, a muovere l’indicatore temporale trascinando in avanti di due secondi la freccia rivolta verso il basso nella timeline. Successivamente, torna nell’area di composizione e sposta la posizione dell’oggetto in un altro punto dell’area del logo. Vedrai comparire un secondo Keyframe nella timeline. Per vedere la tua prima animazione, premi la barra spaziatrice della tastiera: la sequenza inizierà il suo loop e vedrai lo spostamento dell’oggetto sull’anteprima dell’area di Composizione.
Vorresti inserire del testo nel tuo logo? Clicca sul pulsante T presente nel menu in alto, in modo da entrare in modalità Testo. A seguire, nel pannello dei livelli, clicca con il tasto destro del mouse, quindi seleziona le voci Nuovo > Testo dal menu contestuale per creare il relativo Layer. Ora puoi cominciare a scrivere e a modificare colore, dimensione e font dall’apposito pannello Carattere che viene proposto nell’area di destra.
Un’altra componente essenziale di After Effects sono gli effetti. Per richiamarli, osserva il pannello di destra e clicca sulla voce Effetti e predefiniti, quindi cerca quello che ti interessa, digitando il nome sul riquadro accanto alla lente di ingrandimento: facciamo un esempio relativo all’effetto macchina per scrivere, per applicarlo sul layer di testo appena creato.
Digita macchina per scrivere e clicca sull’elemento, per selezionarlo. Mantenendo premuto il tasto sinistro del mouse, trascina poi l’oggetto verso il layer Testo nel pannello dei Livelli, quindi rilascia il tasto. In questo modo hai applicato l’effetto predefinito “Macchina per scrivere” al livello testo. Premi sulla barra spaziatrice per vedere l’animazione completa.
Sei soddisfatto del tuo lavoro? È venuto il momento di esportare il progetto! Clicca sul menu Composizione > Aggiungi a coda di rendering (in alto a sinistra), quindi clicca sul pannello inferiore alla voce in azzurro, accanto alla scritta Modulo di output.
Si aprirà una finestra dove inserire le impostazioni di esportazione, come il formato del file e l’output video. Dopo aver operato le tue preferenze, clicca sul pulsante OK, quindi clicca sul pulsante Rendering, a destra del pannello inferiore, per avviare il processo di esportazione.
Nel caso volessi approfondire il funzionamento generale di After Effects, ti rimando al mio tutorial in cui ho spiegato proprio come usare After Effects.
Come animare un logo con Photoshop
Anche Photoshop, altro celebre programma della suite Adobe Creative Cloud, permette di realizzare alcune semplici ma efficaci animazioni. Per ottenerle occorre utilizzare in particolare il pannello Timeline, che permette di riprodurre in sequenza diversi fotogrammi, ricreando l’effetto di movimento.
Se hai dei dubbi su come usare Photoshop e vuoi rispolverare le tue conoscenze di questo eccezionale programma di fotoritocco, ma anche se rappresenta una novità assoluta per te, ti consiglio di leggere la mia guida dedicata. Ho preparato anche un articolo su come scaricare il programma e approfittare del periodo di prova gratuito di 7 giorni, al fine di valutarne tutte le potenzialità.
Come prima cosa occorre aprire un nuovo documento. Dalla schermata iniziale di Photoshop, clicca quindi sul pulsante Crea Nuovo. Nella successiva finestra, definisci le impostazioni dell’immagine che vuoi preparare e premi sul pulsante Crea. Il nuovo documento è ora pronto per essere modificato, ma assicurati prima di avere i pannelli Livelli e Timeline visibili, altrimenti clicca sul menu Finestra (in alto) e attiva le relative voci per far comparire i suddetti pannelli.
La Timeline in particolare deve essere predisposta in modalità animazione. Fai quindi clic sulla freccia rivolta verso il basso al centro del pannello Timeline e seleziona la voce Crea animazione fotogrammi, quindi clicca sul vicino pulsante Crea animazione fotogrammi: vedrai generarsi il primo fotogramma sulla timeline. Considera, però, che il primo livello che viene creato è di sfondo e non può essere animato. Puoi scegliere di convertirlo e renderlo modificabile facendo doppio clic su Sfondo nel pannello Livelli e cliccando sul pulsante OK; oppure puoi aggiungere un nuovo livello.
A questo punto puoi cominciare a creare il disegno del tuo logo. Nota bene: se l’animazione prevede l’uso di più oggetti animati in modo indipendente l’uno dall’altro, dovrai creare gli stessi su livelli separati. Per aggiungere fotogrammi alla timeline, seleziona il fotogramma corrente sul pannello Timeline, quindi clicca sul pulsante con il [+], per duplicarlo.
Ogni fotogramma può essere modificato in diversi modi per creare una differenza col precedente, in modo da generare un’animazione. Dopo aver selezionato il fotogramma su cui intervenire puoi, ad esempio, attivare o disattivare la visibilità per i diversi livelli (cliccando sul pulsante con l’icona di un occhio accanto al relativo oggetto sul pannello livelli), cambiare la posizione degli oggetti per attribuirgli il movimento o, ancora, modificare l’opacità dei livelli per far comparire e sparire il contenuto. Per vedere un’anteprima dell’animazione, clicca sul pulsante ▶︎ nella timeline; per bloccarla, invece, clicca sul pulsante ◾️.
Puoi anche aggiungere un effetto di tweening, che inserisce una serie di fotogrammi nei quali viene generata un’animazione automatica che interviene su posizione, opacità ed effetti nei vari livelli. Per attivarlo, clicca sul pulsante con la pallina in movimento (lo trovi prima di quello utilizzato per duplicare i fotogrammi).
Nella finestra successiva, seleziona se vuoi applicare il tweening al fotogramma precedente o al primo, indica il numero di fotogrammi che vuoi generare e se applicarlo a tutti i livelli o solo a quelli selezionati; infine, inserisci la spunta sui parametri sui quali vuoi agire (Posizione, Opacità, Effetti). Clicca quindi sul pulsante OK: noterai che sulla timeline verranno generati i nuovi fotogrammi con le modifiche che hai operato in fase di impostazione.
Ora puoi finalmente esportare il tuo progetto: recati nel menu File > Salva > Salva con nome e, nella schermata successiva, scegli di posizionare il file nel PC, cliccando sul pulsante Salva nel tuo computer. Nella nuova finestra dovrai scegliere il formato del file: per le animazioni di fotogrammi è opportuno scegliere fra GIF o i formati Photoshop come PSD (in modo da poterlo elaborare ulteriormente sullo stesso software). Un’altra opzione consiste nell’esportazione di animazioni, cliccando sul percorso File > Esporta > Rendering video. Nella nuova finestra troverai il tuo file con estensione mp4. Clicca su Rendering in alto a destra e attendi il completamento della procedura.
Come animare un logo con Final Cut
Final Cut Pro è un programma estremamente potente per il montaggio di filmati digitali, disponibile esclusivamente per macOS. Viene considerato un riferimento per i professionisti del settore. Il software è a pagamento, ma puoi usufruire di una prova gratuita di 90 giorni accedendo a questa pagina e cliccando sul pulsante Free Trial. Maggiori info qui.
Nei prossimi paragrafi ti illustrerò come animare un logo con Final Cut, usufruendo di alcune sue funzionalità molto evolute e particolarmente adatte allo scopo.
Una volta aperto il programma, procedi subito importando il materiale già preparato per il tuo logo, cliccando sul pulsante Import Media presente in alto a sinistra, al centro del pannello Browser. Si aprirà una finestra del Finder per caricare le immagini nel tuo computer (puoi effettuare selezioni multiple tenendo premuto il tasto cmd e cliccando sui vari elementi), quindi clicca sul pulsante di importazione. Vedrai le immagini selezionate caricate sempre nel pannello Browser, pronte all’uso.
Ora occorre creare il nuovo progetto: clicca sul pulsante New Project, al centro del pannello Timeline, in basso. Attribuisci un nome al progetto, digitandolo nel campo Project Name, quindi clicca sul pulsante OK: questo abiliterà la timeline all’editing. Per cominciare a operare sul logo, devi selezionare le immagini dal pannello Browser con un clic e, mantenendo premuto il tasto, trascinarle verso la Timeline. Considera che gli elementi in primo piano devono essere collocati sulle righe più alte del pannello Timeline.
Il funzionamento dell’animazione su Final Cut Pro è simile a quello di After Effects e si avvale dei Keyframe per calcolare i riferimenti temporali nei quali attivare effetti e movimenti. Selezionando sulla timeline l’immagine su cui intendi lavorare vedrai popolarsi con una serie di parametri il pannello Inspector, in alto a destra. Per attivare il primo Keyframe, quindi, posizionati con l’indicatore temporale sull’istante in cui vuoi far partire l’animazione. L’indicatore temporale è contraddistinto da una freccia rivolta verso il basso, nella timeline; per spostarla, devi cliccarci sopra e, tenendo premuto il tasto del mouse, muoverla avanti o indietro.
Ora portati nuovamente sul panello Inspector e clicca sul pulsante a forma di diamante alla destra del parametro su cui intendi operare (ad esempio Scale All): noterai che questo diventa giallo. Posizionati con l’indicatore temporale sull’istante in cui vuoi che quell’animazione termini, nello stesso modo visto in precedenza clicca nuovamente sul pulsante con l’icona del diamante: in questo caso, però, agisci anche sui valori del parametro, spostando il cursore a destra della scritta Scale All verso sinistra, per rimpicciolire l’elemento, o verso destra, per ingrandirlo. Hai completato la tua prima animazione del logo su Final Cut Pro.
Per visualizzare l’esito di questa operazione, clicca sul pulsante ▶︎ presente sotto l’immagine centrale. Puoi agire allo stesso modo su tutte le immagini caricate, selezionandole sul pannello timeline e attivando il keyframe sul pannello Inspector, in corrispondenza del parametro sul quale vuoi operare all’inizio e alla fine dell’animazione.
Final Cut Pro offre anche la possibilità di usufruire di librerie con animazioni video preimpostate. Per accedere a quest’ultimo, clicca sul pulsante [T], a destra del pannello Browser. Vedrai comparire una serie di elementi: per utilizzarli, devi semplicemente trascinarli nella timeline, come visto prima per le immagini. Fra gli elementi sono presenti anche quelli testuali, sotto la voce Title, che consentono di aggiungere splendide animazioni scritte al logo.
Per accedere invece alla libreria degli Effetti, recati nel menu Windows > Show in Workspace > Effects. In basso a destra vedrai comparire un pannello aggiuntivo con un’ampia selezione di effetti, che potrai aggiungere trascinandoli verso l’immagine alla quale vuoi attribuirli.
Sei arrivato al termine dell’elaborazione e vuoi esportare il progetto? Clicca sul pulsante di export in alto a destra, contraddistinto da un quadrato con una freccia verso l’alto. Sotto si aprirà un pannello dove sono presenti diverse modalità di esportazione, fra cui quelle per i social network, per YouTube o per dispositivi Apple. L’impostazione di default è comunque Master File: cliccandoci verrà aperta una nuova finestra dove, se non hai particolari esigenze, è opportuno lasciare le impostazioni di default. Clicca solamente sul menu Format, quindi seleziona sotto Publishing la voce Computer. Ora clicca sul pulsante Next e, nella finestra successiva, scegli la destinazione del file cliccando sul riquadro accanto alla voce Where, infine clicca sul pulsante Save.
Come animare un logo gratis
Ti piacerebbe poter animare un logo gratis? La Rete offre diverse risorse di questo tipo, che inoltre permettono di usufruire di semplici tutorial per capirne il funzionamento. Si tratta di soluzioni efficaci, caratterizzate da interfacce molto intuitive e versatili, anche se ovviamente non sono in grado di replicare le possibilità di programmi elaborati come After Effects. Sono comunque espedienti pratici, perfettamente idonei a rispondere alla necessità di animazioni più semplici e non particolarmente ricercate. Vediamo alcuni esempi tra i più popolari in questo ambito.
Come animare un logo con Adobe Creative Cloud Express
Creative Cloud Express di Adobe è una suite di applicazioni online gratuita che permette di creare e modificare contenuti digitali come loghi e animazioni in maniera molto semplice e intuitiva. Non è assolutamente complesso, infatti, imparare come animare un logo con Adobe Creative Cloud Express. Di base è gratis, ma l’accesso a tutte le sue funzioni richiede l’abbonamento da 12,19 euro/mese.
Per cominciare a utilizzarla, accedi alla pagina principale del servizio di logo maker e clicca sul pulsante Crea ora tuo logo animato. Nella successiva schermata puoi effettuare l’autenticazione tramite Adobe ID, Google, Facebook, ID Apple o registrare un nuovo account Adobe con il tuo indirizzo email.
Una volta completata l’autenticazione, viene mostrata una schermata dove occorre scegliere il formato del progetto da animare, che si può selezionare fra quelli di dimensioni standard o alcuni specifici per i social network, come Instagram, Facebook o YouTube.
Clicca, quindi, sul pulsante Avanti e visualizzerai un’altra pagina nelle quale caricare le immagini da elaborare. Puoi scegliere di caricare un’immagine dal tuo dispositivo, cliccando sul pulsante Carica, o scegliere fra quelle gratuite proposte dal sistema, selezionabili usando l’apposito campo di testo nel quale digitare l’argomento di riferimento.
Terminato il caricamento, clicca sul pulsante Avanti e attendi la preparazione dell’interfaccia di lavoro che, come vedrai, è estremamente lineare e comprensibile, perfetta per realizzare progetti basilari. Nell’area centrale troverai le immagini caricate nello step precedente, mentre nel menu di sinistra vengono messi a disposizione una serie di strumenti per modificare le tue creazioni aggiungendo del testo, degli sfondi o delle icone, ad esempio.
Cliccando su uno degli strumenti, in un apposito pannello alla sua destra ti verranno messe a disposizione delle risorse predefinite, alle quali attingere per comporre o arricchire il tuo progetto. Ti basterà cliccare sull’elemento, per vederlo comparire all’interno dell’immagine, per poi intervenire sul posizionamento, sulla dimensione e su altre caratteristiche tramite le funzionalità che vengono immediatamente caricate nel pannello alla destra dell’area di composizione.
Se invece hai già un logo pronto da animare, clicca sul pulsante Loghi, nel menu di sinistra e poi sul bottone (+): seleziona il contenuto prescelto dalla finestra apertasi. Una volta completata la composizione del logo, clicca su un punto vuoto dell’area centrale. Ora nel pannello di destra clicca sul pulsante Animazione: vedrai comparire dei preset per l’animazione del testo o delle foto.
Cliccando sul preset questo verrà caricato automaticamente in corrispondenza dell’elemento: ad esempio, la funzionalità Macchina da Scrivere genererà l’animazione sulla scritta precedentemente inserita tramite il menu Testo, mentre quella denominata Sfoca interverrà sull’immagine di base.
Una volta terminata anche la definizione del tipo di animazione potrai facilmente scaricare e condividere il risultato tramite il menu presente in alto a destra. Clicca sul pulsante Condividi per pubblicarlo subito sui social network o invitare un collaboratore a partecipare alle modifiche, oppure clicca sul pulsante Scarica per eseguire il download, scegliendo tra i formati MP4, PNG, JPG o PDF. Premi infine sul bottone Inizia download e attendi l’esportazione del file, che troverai poi nella cartella che hai impostato sul browser per lo scaricamento dei file (di default è Download).
Il servizio è disponibile gratuitamente anche in versione mobile per dispositivi Android e iPhone/iPad. Per ottenerla, visita i link che ti ho appena fornito dal tuo device (se hai un terminale Android senza Play Store, cerca su uno store alternativo) e premi sul pulsante Installa/Ottieni. Su iPhone e iPad potresti dover verificare la tua identità.
A download completato, per accedere all’app dovrai usare un account come spiegato per la versione Web. Il funzionamento è del tutto simile a quello appena visto per la versione online, con le medesime funzionalità di animazione, di caricamento e di modifica delle immagini.
Altre soluzioni per creare loghi gratis
Su Internet hai a disposizione molti altri siti che consentono di animare un logo gratuitamente. Ti elencherò alcune delle possibilità che reputo più efficaci, tutte soluzioni creative caratterizzate dalla possibilità di attingere a ricche librerie di template e effetti, facilmente combinabili tramite appositi strumenti e funzionalità.
- Crello — si tratta di un sito che mette a disposizione una serie di validi strumenti per ideare e progettare grafica, fra cui anche un logo maker. Una volta creata l’animazione, per poterla salvare occorre essere registrati al servizio. È disponibile anche come app per Android e iOS/iPadOS.
- Renderforest — è uno strumento piuttosto interessante che propone una serie di immagini animate preconfezionate, modificabili e personalizzabili grazie a un editor. È disponibile anche come app per iOS/iPadOS.
- Canva — consente di realizzare diverse tipologie di progetti grafici, fra cui anche loghi animati, mettendo a disposizione una vasta libreria di graphic art e un tool per l’editing nel quale vieni guidato da un utilissimo tutorial. È disponibile anche come app per Android e iOS/iPadOS.
Autore
Salvatore Aranzulla
Salvatore Aranzulla è il blogger e divulgatore informatico più letto in Italia. Noto per aver scoperto delle vulnerabilità nei siti di Google e Microsoft. Collabora con riviste di informatica e cura la rubrica tecnologica del quotidiano Il Messaggero. È il fondatore di Aranzulla.it, uno dei trenta siti più visitati d'Italia, nel quale risponde con semplicità a migliaia di dubbi di tipo informatico. Ha pubblicato per Mondadori e Mondadori Informatica.
