Creare un menu rollover con Photoshop e Css

L’utilizzo di Adobe Photoshop è fondamentale per un Web Designer poichè è uno strumento molto potente per realizzare la grafica web delle nostre pagine.Realizziamo un menù abbastanza semplice con l’effetto rollover utilizzando quindi Photoshop per realizzare la grafica e Html-Css per appliccarlo alle nostre pagine.

Apriamo Photoshop
Crea un nuovo file e dagli le misure: supponiamo che intendi realizzare quattro pulsanti da 150px l’uno, quindi avrai una lunghezza totale di 600px per un’altezza di 50px. Come risoluzione metti il valore 72, che in genere è il più ottimale per il web.

Dal menu visualizza scorri verso giù e clicca su Mostra Righelli, e da Modifica > Preferenze >
Unità di misura e righelli > imposta i Pixel come unità.

Posizionati sul righello a sinistra, clicca e trascina la linea che compare fino al valore orizzontale 0, poi un’altra su 150, e così via per multipli di 150 fino ad arrivare a 600. Questa procedura serve per progettare il menù con delle misure precise, e grazie alle guide avremmo l’effetto calamita che ci aiuteranno ad impostare meglio il lavoro. Ovviamente sono solo degli oggetti virtuali, quindi non compariranno nel risultato finale.

Crea un nuovo livello, per fare ciò vai al menù sulla voce Livello > Nuovo > Livello. Posizionati sulla barra strumenti e clicca su Strumento Secchiello, seleziona il colore bianco e clicca sul riquadro dell’immagine. A destra sul pannello dei livelli, posizionati sopra, clicca col tasto destro sulla voce Opzioni di Fusione.

Nella finestra che compare cerca la voce Sovrapposizione Sfumatura e spunta il riquadro a fianco. A destra del riquadro compare una fascia colorata, cliccaci sopra ed imposta il colore nero a sinistra e grigio scuro a destra. Clicca su ok e torna all’interfaccia iniziale dove compare il nostro lavoro.

Cala una guida dal righello orizzontale e posizionalo a 1/4 circa dell’altezza in modo tale da impostare la base del testo. A sinistra sulla barra strumenti clicca sulla T che simboleggia il testo. Scrivi le 4 voci, nel nostro caso: Home, Chi Siamo, Portfolio, Contatti, e allineale al centro rispetto alle sezioni delle guide.

Ora diamo al menù un piccolo particolare per renderlo un pochino più speciale. Crea un nuovo livello, vai sulla barra strumenti e clicca sul primo pulsante a sinistra, ossia Strumento Selezione. Vai sull’immagine e seleziona in rettangolo lungo tutta la lunghezza e alto pochi pixel. Ora riempilo col bianco, vai su Opzioni di Fusione e imposta l’opacità con un valore tra il 5 e il 10. Guarda l’esempio:

Posizionati sulla barra strumenti e clicca su Strumento Sezione, sposta il cursore sull’immagine e per ogni riquadro creato dalle linee guida, seleziona un rettangolo. Ripeti l’operazione per ogni voce del menù. Dopo di che clicca col tasto destro sul numero della sezione e accertati che tutte le voci abbiano 150px di lunghezza, e che l’asse X sia basata su multipli di 150.

Dopo di che vai su file > salva per web, seleziona la finestra con il miglior rapporto peso/qualità e clicca su ok. Sulla finestra che compare, seleziona il formato Solo Immagini Jpg e salva con il nome menu001.

Torniamo sulla finestra principale e applica l’effetto che farà il rollover. Crea un nuovo livello, poi posiziona il cursore sulla barra strumenti, clicca su Selezione Ellitica e forma un ovale in modo che la parte bassa occupi tutta la lughezza sulla parte alta dell’immagine, riempi l’ovale di bianco e dagli un’opacità di valore 10. Guarda l’esempio:

Ora ripeti la procedura del salvataggio: File > salva per web > seleziona una finestra, clicca su ok, scegli Solo Immagini Jpg e salva con il nome menu002.

Inserisci il codice Css e Html
Terminato il lavoro di Grafica: ora devi applicare il menù sulla tua pagina html. Vai sul tuo editor e tra i tag style o sul tuo foglio di stile copia questo codice css:

#menu {margin:0; padding:0; float:left; list-style:none; height:50px}
#menu a {display:block; width:150px; height:50px;}
.home {background-image:url(menu001_01.jpg); width:150px;}
.home:hover {background-image:url(menu002_01.jpg); width:150px;}
.chisiamo {background-image:url(menu001_02.jpg); width:150px;}
.chisiamo:hover {background-image:url(menu002_02.jpg); width:150px;}
.portfolio {background-image:url(menu001_03.jpg); width:150px;}
.portfolio:hover {background-image:url(menu002_03.jpg); width:150px;}
.contatti {background-image:url(menu001_04.jpg); width:150px;}
.contatti:hover {background-image:url(menu002_04.jpg); width:150px;}

Per chi usa Blogger consiglio di dare un’occhiata a questa pagina per capire come applicare il Css.
Ora nel punto in cui vuoi compaia il menu inserisci questo semplice codice Html:

<ul id=”menu”>
<li id=”menu” class=”home”><a href=”home.html”></a></li>
<li id=”menu” class=”chisiamo”><a href=”chisiamo.html”></a></li>
<li id=”menu” class=”portfolio”><a href=”portfolio.html”></a></li>
<li id=”menu” class=”contatti”><a href=”contatti.html”></a></li>
</ul>

N.B:  Il menù funziona perfettamente con Opera, Firefox, Safari e IExplorer 7, mentre su IE 6 e inferiori non comparirà l’effetto rollover.

Per vedere un’esempio del lavoro finito clicca qui.
Per scaricare tutti i file che abbiamo utilizzato clicca qui.