All postsHo sempre ammirato il design dei prodotti Apple, fin da quando usavo un MacPlus, 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 menu psd