Come creare un banner pubblicitario per siti web con Photoshop

Ehi, gatti e gattini! Schiaffiamo insieme un banner pubblicitario con Photoshop! Wheee! Hai il tuo Photoshop? Ok, apri ‘er up e seleziona File / Nuovo dalla barra dei menu in alto.

ella finestra di dialogo che si apre, imposta Larghezza a 468 pixel e Altezza a 60 pixel.

- Prosegue dopo la pubblicità -

Vedi i due quadrati colorati (o in bianco e nero) nella parte inferiore della barra degli strumenti? Fare doppio clic a sinistra (prima) per entrare nel Selettore colore.

- Prosegue dopo la pubblicità -

È possibile selezionare un colore facendo clic in giro nei due riquadri colore o digitando valori nelle caselle.

- Prosegue dopo la pubblicità -

Hai capito il colore perfetto? Ora seleziona lo strumento Secchiello dalla barra degli strumenti e fai clic da qualche parte sulla tela. Questo dovrebbe riempire la tela con il colore che hai scelto.

Hai un logo esistente che vuoi includere nel banner pubblicitario? Nessun problema. Apri ‘er up e regolalo alla dimensione desiderata. Ricorda che .gif e .jpg sono formati compressi e di bassa qualità. Se hai i file grafici “originali” per il tuo logo (.psd, .tif o altro), allora usa quelli. In caso contrario, non preoccuparti troppo: puoi in genere modificare un file .gif e ottenere risultati accettabili.

- Prosegue dopo la pubblicità -

Una volta che hai il tuo logo la dimensione che vuoi che sia nel banner, usa lo strumento selezione rettangolare per selezionare il tutto e copialo.

Torna alla finestra che contiene il tuo banner-to-be, incolla il tuo logo e posizionalo dove vuoi. A questo punto, dovresti anche incollare un’immagine di un cane o di un gatto.

Ecco cosa ho ottenuto finora:

Ora aggiungeremo del testo. Scegli lo strumento di testo, fai clic sul riquadro e digita il testo desiderato. Per questo esempio, creeremo uno striscione animato che visualizza uno snippet di testo alla volta. Una volta che hai inserito una riga di testo, puoi posizionarla dove vuoi. Nota che il testo ora si trova su un nuovo livello.

Ripeti i passaggi precedenti per aggiungere un altro snippet di testo sul proprio livello. Fallo ancora.

Ora abbiamo diversi bit di testo, ognuno sul suo stesso livello. Girando ogni livello uno alla volta (nella finestra Livelli), possiamo creare un’animazione in cui il testo appare un po ‘alla volta fino a quando non viene visualizzato il messaggio completo. Questo è un modo semplice ma molto popolare per rendere un banner un po ‘più accattivante.

Quindi, come si crea un banner animato in Photoshop? Non puoi! Hai bisogno di un programma di animazione separato. Fortunatamente, ci sono molti programmi shareware che funzionano bene. Vai alla sezione di download degli strumenti Web e prendi una coppia.

Quello che dobbiamo fare è creare separatamente ciascuno dei fotogrammi dell’animazione e salvarli come un singolo file .gif. Questo è facile da fare usando i livelli.

Disattiva tutti i livelli di testo tranne il primo. Scegliete Esporta file / Esporta / Gif 89a. Deseleziono la casella Interlaced quando creo i banner, ma non importa molto per un banner pubblicitario indipendentemente dal fatto che sia interlacciato o meno. I banner pubblicitari non devono mai essere resi trasparenti, tuttavia, poiché potresti non sapere a quale colore sarà mostrato lo sfondo.

Salva questo .gif come banner1.gif o altro. Attiva il livello di testo successivo e ripeti i passaggi precedenti, salvandolo come banner2.gif. Ripeti finché non hai salvato tutti i fotogrammi dell’animazione come file .gif separati.

Ora apri il programma di animazione che hai scelto e riunisci questi .gif in un’animazione finita. Questo di solito è piuttosto semplice. Scegli l’ordine e il tempo tra i fotogrammi e salva l’animazione finita come un nuovo file.

Questo file è l’animazione completata e verrà caricato sul tuo server Web . Gli altri singoli file non sono più necessari, ma è necessario salvarli in modo da poter facilmente creare varianti del banner. Per ottenere i risultati massimi, crea sempre diverse versioni leggermente diverse di un banner, eseguine tutte e confronta le percentuali di clic. O vai con il banner con il click-through migliore e scarta il resto, o ruotale periodicamente.

Quindi, eccolo (potrebbe essere necessario aggiornare per vedere l’animazione di cui sopra, certamente una molto semplicistica). È facile come torta per creare banner come questo. Se solo fosse facile attirare le persone a fare clic sul nostro bel nuovo banner, e poi a venire sul tuo sito Web e comprare qualcosa!