Ti trovi in: Homepage » Guide » Photoshop » Tutorial per creare un banner

Photoshop

Tutorial per creare un banner

A chi non serve un banner? Ecco qui un tutorial molto semplice per crearsene uno. Se siete dei principianti di Photoshop vi sarà utile anche come esercitazione, perchè vedremo come si seleziona, come si applica una traccia e un riempimento, come si rende semitrasparente un livello, come si applica uno stile, come utilizzare un "pixel font", e come salvare ottimizzando per il web.

Queste stesse operazioni vanno bene anche per realizzare ad esempio un avatar o una firma, cambiano solo le dimensioni del documento che saranno un po' più grandi.


banner Questo è il risultato che vogliamo ottenere: creare un banner di 88x31 pixel con la scritta del nostro sito.


nuovo documento Aprite Photoshop e andate su File-> Nuovo per creare un nuovo documento di 88 pixel di larghezza e 31 di altezza, 72 pixel per pollice, colore RGB.


Andate su File-> Inserisci e selezionate un'immagine da utilizzare come sfondo del banner.

ridimensionaRidimensionate l'immagine a piacere, tirandola per una diagonale mentre tenete premuto il tasto SHIFT (per mantenere le proporzioni). Quando siete soddisfatti premete INVIO oppure la spunta in alto a destra per confermare il ridimensionamento.


nuovo livelloCreate un nuovo livello: per farlo potete andare sul menù Livello -> Nuovo -> Livello oppure fancedo CTRL+SHIFT+N (oppure cliccando nella palette livelli sull'icona "nuovo" in basso a destra). Chiamatelo "traccia" e confermate.


seleziona tuttoSelezionate tutto cliccando sul menù Selezione-> Tutto oppure facendo CTRL-A.


tracciaVerificate di essere sul livello appena creato, poi cliccate sul menù Modifica-> Traccia. Scegliete il colore che più preferite, impostate la dimensione a 1 pixel e la posizione "centro" (oppure interno). Così comparirà un sottile bordo.


nuovo livello Per rendere più leggibile la scritta mettere una striscia bianca semitrasparente sotto il testo. Quindi create un'altro nuovo livello e chiamatelo "striscia". Dovr stare sopra il livello dell'immagine ma sotto il livello traccia.


selezionaCon lo strumento selezione rettangolare (tasto rapido M) selezionate una striscia lunga tutta la larghezza dell'immagine, e alta un po' meno.


riempiCliccate sul menù Modifica-> Riempi (tasto rapido Shift+Backspace). Selezionate il colore bianco e fate OK.


strisciaOra abbassate l'opacità del riempimento del livello con la striscia bianca: un 60% o 70% andrà bene, dipende anche dall'immagine di sfondo che avete scelto.


stile di livello tracciaFate doppio click sul livello dove avete appena creato la striscia bianca, e vi si aprirà la finestra "stili di livello".Applicate una "traccia" (è l'ultima voce). Selezionate colore bianco, dimensione 1 pixel e date Ok.


testoOra ci rimane solo da aggiungere la scritta del sito. Prendete lo strumento testo e nella barra in alto impostate Arial, 12 px, nessun antialias, colore nero. Altri font adatti possono essere il verdana e il tahoma. Poi scrivete il vostro nome.


salva per il web Bene, il nostro banner è pronto, non ci resta che salvarlo. Cliccando su File -> Salva con nome potreste salvarlo in formato PSD, in questo modo potrete riaprilo e modificarlo quando vorrete. Cliccando su File -> Salva per il Web lo ottimizzerete per internet. Selezionate il formato Jpg o Gif e una qualità medio/alta (70 o 80 andrà bene). Fate qualche prova per trovare la combinazione ottimale tra qualità e peso.