Blog trasferito su
www.NoizExperience.com

29 giugno, 2008

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.

Il video riassume velocemente tutta la procedura, ma se vuoi approfondire o imparare ad usare Photoshop leggi l'articolo che segue.


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.
valori delle dimensioni

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.
impostazione linee guida

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.
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.
seleziona il colore

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.
Imposta il testo

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:
valore opacità

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.
sezione

sezione

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:
esempio ovale

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.
N.B 2:  Per risolvere il problema iniziale del rollover basta applicare un semplice Javascript pre-load. (thanxxx to Francesco)

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


Articoli correlati per categorie



3 commenti!:

Francesco Gavello ha detto...

E' un ottimo codice di partenza :D
forse all'avvio c'è un certo "gap" quando deve caricare l'immagine da swappare, ma un alternativa "sliding doors" è sicuramente più difficile da rendere compatibile cross browsing..

(lol, questo commento vince il premio per l'inserimento del maggior numero di inglesismi in una sola frase)

Ciaoo,
Francesco

Angelo ha detto...

Hai ragione, la soluzione sarebbe un breve javascript che precarica le immagini.. Però inserendo anche il javascript rischiavo di andare un pò troppo fuori tema, in fondo il Post è stato scritto per mostrare le "potenzialità" di Photoshop e come si usa.. ho aggiunto il css giusto per non lasciare l'esempio campato in aria..

Sicuramente questo pre-load sarà tema dei prossimi post..

Complimenti per il record di "inglesismi" ;)

marbio ha detto...

Come al solito post di qualità!
Ottimo lavoro Angelo, il tuo tutorial è semplice e chiaro.