• Home
• Didattica
• Download
• News
• Blog
• Tools
• Forum
• Altro...

Corsi on-line

• Altri canali:
• Hosting
• Web Grafica
• Toolbox
• WMDir.it

Creare menu di navigazione con Photoshop

In questo tutorial vedremo come realizzare realizzare due simpatici menu (uno orizzontale e l'altro verticale) da integrare all'interno di un template particolare.
L'obiettivo di questo articolo è quello di fornire al lettore lo spunto per crearsi da solo i propri menu utilizzando gli strumenti offerti dal software di casa Adobe.

Menu Orizzontale

Per prima cosa apriamo l'immagine che useremo come sfondo del nostro sito web: Creiamo un nuovo livello "Header" e, con lo Strumento di selezione rettangolare, disegniamo nella parte superiore un rettangolo, lo coloriamo con il Secchiello usando un colore adatto (io ho scelto #e7ef00) e impostiamo l'opacità al 70%: Applichiamo uno stile al livello "Header": Creiamo un altro livello "Header2" e disegniamo un rettangolo sempre con lo Strumento di selezione rettangolare, lo coloriamo con il Secchiello usando un colore più scuro del precedente (io ho scelto #a6ac01) e impostiamo l'opacità del livello al 50%: A questo punto iniziamo a creare i pulsanti del menu, lo faremo con lo Strumento rettangolo arrotondato impostando un raggio di 10px.
Ora rasterizziamo la forma: dal pannello livelli click tasto destro e poi Rasterizza livello, successivamente, con lo strumento di selezione, eliminiamo una zona del pulsante, creando un taglio netto in concomitanza delle aree orizzontali disegnate un precedenza: Passiamo a realizzare anche gli altri pulsanti del menu, per farlo duplichiamo i primo pulsante in altri 4 livelli uguali: Applichiamo un Ombra esterna su tutti gli stile dei livelli: Inseriamo del testo all'interno dei pulsanti: Ora passiamo alla parte più interessante del tutorial.
Una volta terminata la struttura del menu, dobbiamo dividere il nostro menu in varie "aree" caratterizzate dal fatto di essere sensibili al click del mouse, collegandole con dei link alle pagine web del sito.
Questa operazione la possiamo fare con lo Strumento sezione, attiviamolo: Selezioniamo il pulsante "Home": Facciamo doppio click sulla selezione: si aprirà una nuova finestra di opzioni, selezioniamo il tipo di sezione "immagine" e completiamo tutti i campi: Ripetiamo tutte queste operazioni anche per gli altri pulsanti.
Ora salviamo il progetto:

File -> Salva per Web e dispositivi...

Dalla finestra di dialogo selezioniamo Html e immagini e salviamo in una cartella: Diamo un nome del file della pagina.
In questo modo Photoshop ha creato la pagina Web con il codice del foglio di stile incorporato, se volessimo apportare qualche modifica non resta che editare la pagina con il nostro programma di editing html preferito.

• <<
• 1
• 2
• >>