Come creare un Banner HTML5 con Google Web Designer

Come creare un banner HTML con Google Web Designer da usare in campagne pubblicitarie AdWords, per campagne non Google o per fini personali del webmaster.

Nel precedente post abbiamo visto le principali funzionalità di Google Web Designer, un software multipiattaforma di Google per creare siti web e banner pubblicitari. In questo articolo vedremo più in dettaglio come creare un tale banner.

Il programma si può scaricare e installare dalla sua homepage in Windows, Mac e Linux. Gli oggetti saranno creati in HTML5 con animazioni e elementi interattivi. Ho iniziato a usare questo tool da pochi minuti quindi non lo maneggio completamente ma si possono fare delle realizzazioni interessanti anche utilizzandone solo le funzioni principali.

Il concetto è quello classico della Timeline in cui creare dei fotogrammi, che poi saranno gli elementi del banner quando verranno riprodotti. I frame del banner possono essere realizzati trascinando immagini, digitando testo e animando gli oggetti che si sono inseriti. Con i tool situati nella parte destra del programma si possono personalizzare colori, stili, bordi e dimensioni di tutti gli elementi.

Dopo aver aperto Google Web Designer, si va su Crea nuovo file per poi impostarne le caratteristiche

Si sceglie la dimensione della unità pubblicitaria, la cartella di destinazione e il nome quindi si va su OK. Verrà quindi mostrata l'area di lavoro completamente da riempire con testo e immagini. Sarà anche il primo fotogramma del nostro banner animato. Le immagini potranno essere trascinate con il drag&drop.

Se si inseriscono immagini, ci si clicca sopra per spostarle nel layout. Per settarne le dimensioni, si selezionano con il cursore quindi si va su Proprietà -> Posizione e Dimensioni. Nella Timeline si clicca sul bottone del più per creare un nuovo fotogramma. Il tempo di permanenza di ciascun Frame è impostato sul mezzo secondo.

Cliccando sul bottone, che sta tra un frame e l'altro, possiamo modificare questa durata di default. Per aggiungere del Testo si clicca sul pulsante T posto nella barra laterale, quindi si imposta il rettangolo in cui inserirlo e si digita. Sulla destra su Proprietà si potranno impostare colore, dimensioni e altri parametri.

Per creare una animazione basterà spostare con il drag&drop i singoli elementi dopo essere andati sulla icona del più per creare altri frame. In questo modo verrà aggiunto lo stesso fotogramma nel quale modificare la posizione degli elementi. Occorre però cliccare sullo strumento Selezione che è il primo nella barra di sinistra.

Dopo aver selezionato un elemento, si può cliccare sullo Strumento Rotazione per mostrarlo in una prospettiva 3D. Si possono creare dei collegamenti ipertestuali selezionando l'anchor text a cui aggiungere il link.

Si aprirà una finestra in cui digitare l'URL o l'indirizzo email da collegare. C'è anche il quadratino di controllo per far aprire il link in un'altra finestra aggiungendo il tag target="_blank" .

Quando il banner è pronto si va su Anteprima per aprirlo con Chrome, Edge o IE. Il banner potrà essere salvato come file HTML nel PC andando su Pubblica. Il banner sarà formato da una cartella con molti file

Per aprire il banner si fa un doppio click sul file index.html che si trova nella cartella gwd_preview. Le unità così realizzate potranno essere usate per creare delle campagne pubblicitarie su AdWords o DoubleClick. Scegliendo nella prima schermata di configurazione Non Google potremo usare il banner per altre realizzazioni.