Dal tema utilizzato per il blog penso che si intuisce il nostro gradimento verso il design dei prodotti Apple, così ho provato a riprodurre il menu della barra di navigazione del loro sito. Iniziamo disegnando il menu:
1 Lanciamo Photoshop, creiamo un nuovo documento (almeno 500px per 300px) con sfondo bianco in modalità RGB/8 bit.
2 Selezioniamo lo strumento Rettangolo arrotondato[Rounded Rectangle Tool], successivamente Crea un nuovo livello forma[Shape Layers] e Snap to Pixels e impostiamo come dimensioni fisse 450px per 36px e raggio dell’ angolo a 5px. 
3 Clicchiamo col tasto destro sul livello appena creato e scegliamo Stile Livello->Opzioni di fusione..[Blending Options..], e settate questi parametri: 
4 Create un nuovo livello e selezionate lo strumento Linea[Line Tool], successivamente Crea un’ area con riempimento[Fill pixels] e deselezionate l’ Anti-alias. Disegnate una linea per verticale tenendo premuto il pulsante shift lungo la barra.
4.1 Clicchiamo col tasto destro sul livello e scegliamo Stile Livello->Opzioni di fusione..[Blending Options..] scegliamo Sovrapposizione colore[Color overlay] e applichiamo #848484 poi Bagliore esterno[Outer Glow] e selezionate questi valori:
infine settate l’ Opacità[Opacity] del livello al 70%, ora potete duplicarlo due volte per creare due linee divisorie(posizionatele alla distanza che volete).
5 Aggiungiamo del testo usando il font (vi consiglio: Myriad Pro-semibold-14px-grigio scuro), poi duplichiamo il livello contenente il testo e cambiamo il colore del testo con un grigio chiaro; ora spostiamo il livello duplicato dietro a quello originale (invertendo l’ ordine dei livelli) e spostiamolo in basso di 1pixel, quello che dovreste vedere è questo:
Ora realizziamo la stessa barra ma per l’ effetto hover del cursore.
6 Creiamo un nuovo livello e realizziamo una barra arrotondata come spiegato al passo2, ora clicchiamo col tasto destro sul livello contenente il rettangolo iniziale e selezioniamo Copia stile livello[Copy Layer Style] poi clicchiamo col tasto destro sul livello dell’ ultimo rettangolo e selezioniamo Incolla stile livello[Paste Layer Style], l’ unica cosa che dobbiamo modificare sono i colori della Sfumatura[Gradient Overlay]:
7 In un nuovo livello disegniamo una linea come spiegato al passo4, ma lasciamo il livello di opacità al 100%, selezioniamo Opzioni di fusione..->Bagliore Esterno[Blending Options..->Outer Glow] :
poi Sovrapposizione Sfumatura[Gradient Overlay]:
ora duplichiamo il livello altre due volte e posizioniamoli esattamente in corrispondenza delle linee precedenti.
8 aggiungiamo il testo con lo stesso carattere precedente cambiando solamente i colori: per il testo in primo piano usiamo un bianco mentre per quello di sfondo un grigio scuro e questa volta posizioniamolo sopra di 1pixel.
Realizziamo la barra per l’ effetto active (quella più complicata).
9 In un nuovo livello creiamo un rettangolo arrotondato come descritto nel passo2 e tramite Livello->Stile Livello->Opzioni di fusione..[Blending Options..] applichiamogli lo stesso Smusso e effetto rilievo[Bevel and Emboss] del passo3; selezioniamo lo strumento Selezione Rettangolare[Rectangular Marquee Tool], ora tenendo premuto Ctrl clicchiamo sul livello, cosi da selezionare tutto il nostro rettangolo; poi tenendo premuto Alt creiamo un rettangolo sopra la nostra barra, in modo da lasciare selezionato solo la parte laterale corrispondente al primo bottone della barra precedente, come in questa immagine:
9.1 Ora creiamo un nuovo livello chiamiamolo ‘bottone1′ e coloriamo la selezione con lo strumento Secchiello[Paint Bucket Tool], Livello->Stile Livello->Opzioni di fusione..[Blending Options..] e applicate questi parametri Ombra Interna e Sovrapposizione Sfumatura:
9.2 Creiamo un nuovo livello ‘bottone2′ e usando lo strumento Selezione Rettangolare[Rectangular Marquee Tool] tracciamo un rettangolo, con la stessa altezza della nostra barra e la larghezza uguale al nostro al secondo bottone della barra precedente, e posizioniamolo alla distanza di 1pixel da ‘bottone1′ e coloriamolo con lo strumento Secchiello[Paint Bucket Tool], ora copiamo lo stile del livello ‘bottone1′ e incolliamo a quest’ ultimo ‘bottone2′, ripetiamo questo step fino ad arrivare al penultimo bottone; per l’ ultima sezione utilizziamo la stessa tecnica del passo9.
9.3 In un nuovo livello tracciamo una linea come spiegato al passo4, posizioniamola tra il ‘bottone1′ e il ‘bottone2′ ; Livello->Stile Livello->Opzioni di fusione..->Sovrapposizione Sfumatura e Bagliore Esterno[Outer Glow]:
duplicate il livello due volte e posizionatelo nei pixel vuoti tra i bottoni della vostra barra.
9.4 Inserite del testo allo stesso modo del passo8, dovreste ottenere questa immagine: 
ora siamo all’ ultimo effetto quello selected
10 disegniamo un nuovo rettangolo arrotondato in un nuovo livello come descritto al passo2, e applichiamo queste regole
Livello->Stile Livello->Opzioni di fusione..->Sovrapposizione Sfumatura,Ombra Interna,Smusso ed effetto rilievo:
11 ora in un nuovo livello disegniamo un linea come spiegato nel passo4 e applichiamo queste regole Ombra esterna, Sovrapposizione Sfumatura:
ora duplichiamo il livello altre due volte e posizioniamoli esattamente in corrispondenza delle linee precedenti.
12 aggiungiamo del testo in bianco come negli step precedenti, ma sta volta il livello secondario con il testo in grigio scuro lo posizioniamo di 1pixel più in basso. Ecco l’ ultima barra: 
Per salvarle dal pdf potete usare lo strumento Sezione[Slice Tool], è fondamentale che tutte e quattro le immagini abbiano la stessa dimensione (nel nostro caso 452px * 37px) e il testo allineato ugualmente, per facilitarne l’ utilizzo le ho rinominate (in ordine di creazione): nav.gif, hover.gif, active.gif e selected.gif. Nel prossimo tutorial vedremo il codice css per riproddure gli effetti del menu.
Aggiornamento: vi linko il mio psd macstylemenu.rar
Bello salvato
L’unico appunto potresti mettere anche le opzioni in inglese? perchè io ho la versione inglese di photoshop.
Bello!
grazie! ora completo l’ articolo con gli altri due stati e con le opzioni in inglese.
Ciao dato che ho riscontrato alcune difficolta in alcuni passaggi non è che potresti fare un bel videotutorial te ne sarei infinitamente grato!!
aspetto tue risposte
bellissimo! ma poi posso utilizzarlo x metterlo nel mio blog
@riccardo: certo, puoi usarlo dove vuoi.
ciao,
Innanzitutto compilmentoni per la guida..era da tempo che volevo usare questo stile nella mia homepage..
purtroppo ho dei problemi con il passo 9..mi spieghereste meglio per favore cosa s’intende con:
” ora tenendo premuto Ctrl clicchiamo sul livello, cosi da selezionare tutto il nostro rettangolo; poi tenendo premuto Alt creiamo un rettangolo sopra la nostra barra, in modo da lasciare selezionato solo la parte laterale corrispondente al primo bottone della barra precedente, come in questa immagine..”
nell’immagine non vedo nessun esempio ma alcuni settaggi..
P.S.
io ho un mac quali tasti devo usare al posto di ctrl ed alt?
datemi una mano.
grazie
Ciao, sono un dilettante che sta apprendendo a usare photoshop e creare qualche pulsante animato. Sto cercando di creare i pulsanti che spieghi in questo tutorial ma non riesco a realizzare il passo 4. Per favore, potresti aiutarmi? Non capisco dove devo andare quando tu scrivi: “Crea un’ area con riempimento[Fill pixels] e deselezionate l’ Anti-alias. Disegnate una linea per verticale tenendo premuto il pulsante shift lungo la barra.”
magari la mia domanda può essere banale ma non riesco a proseguire.
Ti ringrazio per il tuo aiuto.
Saluti.
Dario
ottim tutorial, complimenti. L\’unico passaggio che non capisco è questo:
ora tenendo premuto Ctrl clicchiamo sul livello, cosi da selezionare tutto il nostro rettangolo; poi tenendo premuto Alt creiamo un rettangolo sopra la nostra barra, in modo da lasciare selezionato solo la parte laterale corrispondente al primo bottone della barra precedente, come in questa immagine.
l\’immagine che c\’è… non fa vedere la selezione e non riesco a capire come metterlaa ç_ç
2 Trackbacks
[...] 1: Creare menu stile Apple con Photoshop Tutorial 2: Creare menu stile Apple con i CSS Nico, 30 Agosto 2007 (Letto 1 volte) (0 [...]
[...] Sul sito Programmando.net ho trovato un ottima guida, in italiano ed illustrata, che spiega passo per passo come creare un menù come quello presente sul sito del Mac o della Apple. Il risultato finale è questo: Che ve ne pare? Non è fantastico? Vai alla guida [...]