Quante volte aprendo un sito vi sarà capitato di vedere delle pubblicità che ci invitano a cliccarci sopra? Spesso sono ricche di animazioni o semplicemente delle belle immagini statiche, ma parecchio accattivanti. Dietro hanno uno studio di linguaggio ricercato che inducono all’acquisto di un prodotto o ci stuzzicano a visitare il link del sito che pubblicizzano. Chi come noi lavora in questo settore sa che un banner web deve avere tutte queste caratteristiche; deve distinguersi nella giungla dei siti con un linguaggio forte poiché sarà il primo passo per l’azienda per aumentare la sua visibilità.
Se ci si vuole cimentare nella progettazione di un banner web è indispensabile seguire alcune regole fondamentali. Alcune di queste ve li riportiamo di seguito, dopodiché passeremo alla fase creativa seguendo un piccolo tutorial creato per voi.
I banner web hanno delle misure standard espresse in pixel e si distinguono in tre categorie principali (di seguito abbiamo riportato una tavola che riassume tutti i tipi di banner)
- Skyscraper: banner verticali o “grattacielo”;
- Button: banner “bottone”;
- Rectangular: banner rettangolari .
Tavola riassuntiva delle dimensioni standard dei banner.
Altra caratteristica è la tipologia di presentazione; essi infatti possono essere di due tipi:
- Banner Statici: immagine unica in .jpg o .png
- Banner Animati: creati in Flash o JavaScript
Una volta analizzata la struttura e le tipologie dei banner web, possiamo adesso passare alla fase creativa. Nel seguente tutorial abbiamo pensato di guidarvi nella realizzazione di un banner web commissionato da “Splash” che ci ha chiesto di promuovere i suoi software grafici. Personalmente abbiamo scelto di utilizzare il programma Adobe Illustrator. Ognuno ovviamente è libero di esprimere la sua creatività con l’utilizzo dei programmi che ritiene più adatti, ma nel nostro caso abbiamo scoperto che AI ci permette di elaborare una bella grafica anche per il web.
Aprendo il programma di grafica Illustrator creiamo un nuovo documento selezionando dal menu File la voce “Nuovo” e scegliamo le credenziali adatte per il web come da figura ( vedi tavola 1). Noi abbiamo scelto di progettare un banner 250 x 250 pixel, A 72 dpi (dot per inch – punti per pollice) ed in RGB (Red Green Blue).
Tavola 1
Una volta creata la nostra tavola da disegno, dobbiamo iniziare a riempire il nostro banner seguendo le idee che ci sono state suggerite dal cliente. In questo caso Splash vuole dare maggiore risalto all’acquisto di due pacchetti di software. Per meglio risaltare le scatole molto vivaci abbiamo pensato di giocare con uno sfondo nero con gradiente grigio (vedi tavola 2/fase 1) e sovrapporre un “effetto schizzo” in bianco per dare profondità al banner (vedi tavola2/fase 2-3-4). Nella seguente tavola vediamo insieme i 4 passaggi.
Tavola 2
Fase 1 – Nella barra degli strumenti posta a sinistra del programma selezioniamo lo “strumento rettangolo” e creiamo un quadrato della stessa dimensione della tavola creata in precedenza; (250 x 250 px) una volta creato, selezioniamolo e scegliamo dalla paletta “sfumatura” di riempirlo con un gradiente nero/bianco con la stessa percentuale come da esempio.
Fase 2 – Sovrapponiamo al quadrato sfumato un nuovo rettangolo bianco con la stessa larghezza del primo ma di altezza inferiore alla metà di tutta la tavola. In questa maniera prepareremo la base per l’effetto schizzo.
Fase 3/4 – A questo punto passiamo all’effetto schizzo per dare profondità al banner e lo completeremo successivamente con la scritta della ditta ed altri piccoli dettagli. Per realizzare la scritta SPLASH basterà selezionare lo “strumento testo”. Dalla paletta “carattere” invece potremo modificarne la dimensione ed il font a nostro piacere.
Per realizzare l’effetto schizzo possiamo adottare due sistemi: per i più esperti ci si può sbizzarrire creando con lo “strumento penna” una serie di forme e raggrupparle fra loro, modificandone i punti di ancoraggio e modellandole a vostro piacere. Ma AI ci viene in aiuto anche adottando un sistema più veloce e creativo che potrà essere adottato anche per altre occasioni. Nella seguente tavola 3 vedremo come grazie allo “strumento pennello” potremo realizzare un pennello “personalizzato” con un semplice elemento e, una volta memorizzato, riutilizzarlo per l’intera tavola da disegno e modificarne il colore e dimensione
Tavola 3
Fase 1 – Scegliamo dalla barra lo “strumento pennello” ed apriamo tutta la palette principale. In una nuova tavola bianca disegniamo con lo “strumento penna” diverse piccole macchie e raggruppiamole con il comando CTRL+G.
Fase 2 – Selezioniamo tutto il nostro oggetto con lo “strumento selezione” (freccia nera) ed andiamo ad aggiungere un nuovo pennello personalizzato; scegliamo la categoria e procediamo.
Fase 3 – In una nuova finestra vi si chiederà di dare il nome al nuovo pennello e di decidere già fin d’ora il colore di default del pennello; noi per comodità di visualizzazione abbiamo scelto un giallo/verde. Selezioniamo la voce “proporzionale” e procediamo con OK.
Fase 4 – A questo punto il nostro pennello personalizzato è stato memorizzato nella palette principale, (vedi tavola 4/ fase 4). Non ci resta quindi che scegliere la grandezza della punta del pennello ed iniziare a sbizzarrirci disegnando tanti piccoli schizzi; dopo che avremo finito la nostra composizione non ci resterà che raggruppare tutti i singoli elementi e modificarne il colore in bianco in modo da poterlo sovrapporre sopra alla nostra tavola sfumata creata in precedenza.
La prima parte del nostro banner è stata così creata. Adesso passiamo alla fase di progettazione del prodotto da pubblicizzare; nelle tavole seguenti (vedi 4 & 5) vi mostreremo come possiamo arrivare a creare con Illustrator un effetto 3D con pochi semplici elementi. Per realizzare la scatola del prodotto potremo scegliere a nostro piacimento i colori che ci piacciono di più attraverso la palette dei “campioni di colore”, personalizzare la sfumatura in modo da dare degli effetti di luce e tridimensionalità all’oggetto e tanto altro ancora. Ma andiamo con ordine e vediamo i passaggi da fare:
Tavola 4
Tavola 5
Fase 1 – Iniziamo a vedere come possiamo realizzare la nostra scatola e dare l’effetto 3D senza complicarci con funzioni speciali di Illustrator. Per facilitarci il compito è bene crearci un griglia con delle linee guida. Una volta creata la base, con lo “strumento penna” non faremo altro che disegnare due forme geometriche come da figura (vedi tavola5). Per comodità le disegneremo separate e, una volta terminato, non ci resterà che selezionarle singolarmente e riempirle con il colore sfumato da noi scelto (vi consigliamo di fare tante prove fino ad ottenere il giusto effetto di ombra e luce). Una volta terminata questa fase non vi resta che unire le due figure geometriche e raggrupparle con il solito comando a tastiera CTRL+G.
Fase 2 – Per completare la scatola e renderla più realistica dobbiamo inserire il nome della ditta e un piccolo decoro che richiama lo schizzo; per l’elemento grafico potete scegliere di applicare o un tocco con il pennello personalizzato, oppure crearvi una nuova figura ad hoc con lo “strumento penna”. Passiamo ora alla scritta SPLASH e darle la prospettiva nella scatola. Un metodo semplice e veloce è il seguente: una volta scritta la parola selezioniamola e cliccando il tasto destro del mouse scegliamo la voce “trasforma” e poi “inclinazione”. Si aprirà una finestra come quella della figura (vedi tavola 5), nella quale potremo scegliamo il tipo di inclinazione/prospettiva. Ricordatevi che con il flag “anteprima” avrete la possibilità di gestire al meglio il vostro effetto prima di dare l’ok definitivo. La stessa operazione fatela sulla seconda scritta più piccola ed il gioco è fatto. A questo punto sistemateli all’interno della scatola e date un equilibrio grafico complessivo.
La vostra scatola del prodotto è finita. Non vi resta che raggruppare tutti gli elementi e salvare questa nuova grafica. Una volta creata una singola scatola vi sarà possibile duplicarla (CTRL+C e successivamente CTRL+V) e cambiarne le caratteristiche di colore e sfumatura. Ricordate che quando volete modificare un singolo elemento già raggruppato potete selezionarlo con il comando “strumento di selezione diretta” (freccia bianca).
Per rendere la nostra scatola ancora più realistica e darle una collocazione spaziale è possibile applicare un’ombra prospettica. Illustrator permette già di suo di creare bellissimi effetti ombra, ma nel nostro caso è consigliabile disegnarla a mano in modo da darle il giusto effetto ed inclinazione. Non vi resta che disegnare il nostro rettangolo prospettico alla stessa maniera della scatola (vedi tavola 6) e riempirla con un gradiente sfumato bianco/nero ma, per renderla soft e leggera, vi consigliamo pure di applicare una trasparenza del 12 %. Una volta terminata applicatela dietro la nostra scatola creata in precedenza. Con Illustrator è possibile spostare di livello i singoli pezzi senza dover prendere la palette livelli; basterà selezionare il singolo oggetto e con il tasto destro del mouse scegliere la voce “ordina”. Toccherà poi a voi scegliere come posizionare l’oggetto scelto.
Tavola 6
Una volta creata la scatola e l’ombra non ci resta che raggruppare il tutto e collocarlo all’interno della parte bianca del nostro banner, l’effetto sarà piacevole e darà risalto al prodotto da pubblicizzare. (vedi tavola7)
Tavola 7
Adesso occupiamoci di realizzare un contenuto più commerciale; SPLASH ci chiede di evidenziare nel banner l’offerta dei due diversi tipi di software. Non ci resterà che inserire un nuovo testo e applicargli del colore per rendere più vivace tutto il progetto. Nel web una delle regole fondamentali è l’invito a cliccare sul prodotto. Per questo è bene inserire dei bottoni che attirano il cliente. Potremmo perdere molto tempo a realizzare a mano un bottone personalizzato ma come spesso accade che il tempo è poco Illustrator ci viene in aiuto con una serie di simboli web di cui potremo successivamente modificarne il colore e le caratteristiche. Dalla palette “simboli” (vedi tavola 7) selezioniamo la categoria che ci interessa e scegliamo ciò che ci sempre più adatto. Il nostro consiglio è di farsi aiutare da queste grafiche di default senza però esagerare con l’utilizzo, altrimenti rischiereste di non avere una vostra personalità come web designer.
Tavola 8
Ecco… il nostro progetto è terminato! O quasi, visto che SPLASH ci ha chiesto di realizzare diversi tipi di banner web. Una volta creato il primo ci verrà semplice riutilizzare i singoli elementi e riadattarli nei vari formati. Prima di tutto dobbiamo crearci delle nuove tavole da disegno ognuna con il formato richiesto. Grazie allo “strumento tavola da disegno” Illustrator vi permette di visualizzarle tutte nello stesso file. (vedi tavola 9) Per comodità procederemo in questa maniera in modo che sarà facile fare il duplicato dei singoli pezzi del primo banner. Una volta fatto però è consigliabile salvarli su files diversi. Di seguito vi mostriamo i 4 banner che abbiamo scelto.
Tavola 9
A noi web designer è affidato ora il compito di personalizzare i restanti banner scelti dal cliente. Non è necessario che tutti gli elementi vengano ripetuti, poiché alcuni, viste le piccole dimensioni, rischierebbero di essere troppo confusi per un visitatore veloce. Nella seguente figura (vedi tavola 10) vi mostriamo come abbiamo cercato di adattare la stessa grafica, con qualche piccola variante a seconda del gusto e le scelte grafiche nei restanti banner web.
Tavola 10
Una volta finita la progettazione dei vostri banner non vi resta che salvare i files sia in formato .ai per poi modificarne i contenuti quando vi necessiterà, ma anche esportarli per il web. Dal menu a tendina File scegliete la voce “Salva per il Web e dispositivi”; vi si aprirà una nuova finestra nella quale potrete visualizzare i pixel reali del vostro progetto e sulla destra scegliere il formato che preferite. (vedi tavola 11)
Tavola 11
Questo è solo un piccolo esempio di tutto ciò che potreste fare con questo programma. Sta a voi Web designer scegliere di sperimentare con grafiche sempre più accattivanti ricordandovi sempre di non essere mai scontati e di mantenere uno proprio stile nelle regole del web.
Adesso tocca a voi sperimentare un nuovo banner web!
