Hai mai visto su un sito internet un banner pubblicitario animato, cioè con la grafica che cambiava dopo alcuni secondi? Hai provato a chiederti chi l’avesse creato e, soprattutto, come?

In questo articolo troverai le giuste risposte a queste domande e avrai modo di scoprire anche come imparare questo e molto altro in un corso che in pochi mesi può darti le giuste competenze per lavorare nel mondo della grafica digitale e web, anche se parti da zero.

Quale figura professionale crea immagini animate per banner adv online con Photoshop

Oltre a tutte le attività di grafica per la realizzazione di materiali offline (cataloghi, brochure, stampe e così via), chi si occupa di graphic design ha anche questo compito: ideare e realizzare immagini animate per la produzione di banner adv destinati all’online. Questa figura deve avere dunque la giusta preparazione tecnica e conoscere i principali software di grafica digitale per creare contenuti di livello ed essere in grado così di comunicare il messaggio e i valori di un brand o di un’azienda attraverso elementi visual.

Tra i programmi fondamentali per ogni graphic designer c’è anche e soprattutto Adobe Photoshop, lo strumento più famoso e utilizzato per il fotoritocco, con il quale è possibile principalmente realizzare fotoritocchi e manipolare le immagini, creare disegni digitali utilizzando la grafica raster e creare i mockup, cioè simulazioni illustrative in digitale di un oggetto.

Tra le funzioni possibili con Photoshop c’è anche la creazione di immagini animate per la realizzazione di banner online.

Creare un banner adv online in 12 passaggi:

Quelli che stai per leggere sono gli step principali per la creazione di un’immagine animata ma che potrai scoprire in modo più approfondito e dettagliato dal nostro docente Claudio Angiolelli nel Master in UX/UI e Digital Graphics , in cui spiega tre funzioni principali che si possono fare con Photoshop, ovvero l’alterazione marionetta, la timeline e il generatore.

Vediamo ora i passaggi per creare un’immagine animata:

1. inserire l’immagine con oggetto “collegato”: su un documento bianco, cioè nuovo, di Photoshop, inserire l’immagine con oggetto collegato che permette successivamente di andare a modificare quello che è l’oggetto originario senza dover creare altri file in più;
2. selezionare il livello: inserita l’immagine con oggetto collegato, selezionare sul pannello dei livelli sia il livello di regolazione per gestire il colore da applicare sia la tonalità per lo sfondo dell’immagine o dei blocchi dell’immagine;
3. inserire una nuova immagine: su quanto creato nei precedenti passaggi, inserire una nuova immagine ridimensionandola, eliminando lo sfondo di provenienza e, attraverso l’uso di una maschera di livello, farla apparire sullo sfondo definitivo giù creato;
4. animare solo una parte dell’immagine creata: per animare solo una parte dell’immagine presa, è necessario selezionare con lo strumento laser solo quella parte desiderata e poi usare il pannello dei livelli;
5. tracciare la parte dell’immagine da animare e applicare le ancore: qui inizia ufficialmente “l’alterazione marionetta” che consiste nella modifica di alcune immagini andando a dare movimento ad alcune parti di quelle stesse immagini, attraverso la selezione tracciata della parte destinata all’animazione e l’applicazione delle ancore sui punti necessari per l’animazione stessa; ripetere i passaggi nel caso di più animazioni.
6. inserire il testo: tra le varie azioni è possibile creare una sorta di casello di testo per poi scriverci dentro. Nel caso ci fossero più testi, che devono apparire in momenti diversi, è necessario creare per ognuno un apposito livello;
7. stabilire il tempo di animazione: attraverso la funzione timeline viene stabilito il tempo di azione dell’immagine animata andando a duplicare i singoli frame e indicando i singoli ritardi di animazione;
8. salvare l’immagine con l’esportazione del file: dal menu si va alla voce “salva file con nome” e lo si salva nel formato psd; sempre dallo stesso menu si va sulla voce “esporta” e da lì si seleziona “esporta per web versione precedente”;
9. indicare le corrette dimensioni del file: ogni banner vuole le proprie misure che vanno riportate in pixel all’interno del pannello Photoshop;
10. visualizzare un’anteprima con tutti i dettagli e il codice html: dal pannello del programma è possibile anche vedere un’anteprima dell’immagine animata creata, sotto lo quale vengono riportati tutti i dettagli e il codice html, utile per chi deve caricare l’immagine direttamente sul sito;
11. salvare il banner in formato .gif: è necessario salvare il file anche nel formato .gif (quello appunto delle immagini animate)
12. salvare tutti i livelli con la funzione generatore: per non perdere i singoli livelli che hanno permesso passo dopo passo di arrivare all’immagine, Photoshop mette a disposizione la funzione generatore in modo tale da creare delle sottocartelle in cui è possibile avere tutti i livelli uniti appunto nel formato .png

Come diventare un esperto di Design e Digital Graphic certificato

Se vuoi diventare una figura di esperienza nel settore della grafica digitale, iscriviti al master di UX/UI & Digital Graphics di Click Academy dove puoi acquisire in soli pochi mesi i principali strumenti e programmi di grafica necessari per proporti come freelance o come dipendente di un’azienda all’interno dell’ufficio di marketing e comunicazione, della divisione pubblicità o del dipartimento grafico. Inoltre hai la possibilità di ottenere la certificazione Adobe, riconosciuta in tutto il mondo e richiesta da molte aziende, sulle competenze acquisite in ambito di contenuti grafici digitali.

Ricorda: ogni successo è frutto della conoscenza, dell’allenamento e dell’esperienza.

Buona formazione!