Tutorial su come realizzare la barra di navigazione di windows.com, questo sarà il risultato:
- Creiamo un nuovo documento 450px * 450px in modalità RGB/8bit con sfondo bianco.
- selezioniamo strumento Rettangolo arrotondato(Round Rectangular Tool),Crea un nuovo livello forma(Shape Layers) e snap to Pixels e impostiamo come dimensioni fisse 340px * 28px e raggio dell’ angolo a 2px.
- clicchiamo col tasto destro sul livello appena creato e scegliamo Stile Livello->Opzioni di fusione..(Blending Options..) e applicate questi parametri Ombra Interna,Sovrapposizione Colore,Traccia:
- Aggiungiamo del testo in bianco per visualizzare i link, suggerisco Segoe Regular 12px Sharp(preciso) scaricabile qui.
- ora disegniamo delle barre di separazione tra i link: scegliamo lo strumento selezione singola colonna(single coloumn marquee tool) e riempitela con #0f0f0f, spostate la selezione a destra di 1px e riempitela con #666666, spostatevi ancora di 1px a destra e colorate la selezione con #424242.
- cancellate la parte superiore e inferiore del livello che fuoriesce dalla barra, ora usando lo strumento gomma in modalità pennello (brush tool) con un diametro di 15px andiamo a scolorire la parte superiore e inferiore della striscia, settate l’ opacità del livello al 40%, duplicate il livello e posizionatelo a destra della seconda scritta.
- questo dovrebbe essere il risultato della barra nello stato normale:
- andiamo a disegnare l’ effetto rollover, tracciamo una selezione 135px * 24px e poi Selezione->Modifica->Arrotonda(select,modify,smooth) e applicate un raggio di 2px; create un nuovo livello e riempite la selezione con un colore qualsiasi.
- applicate tramite Opzioni di fusione..(Blending Options..) questi impostazioni ombra interna, sovrapposizione sfumatura e traccia:
- duplicate il livello e posizionatelo sotto al secondo link tra le due linee di separazione, questo è il risultato:
- ora dedichiamoci allo stato selezionato: cliccate sull’ ultimo livello creato tenendo premuto il tasto ctrl, create un nuovo livello e coloratelo con un colore qualsiasi.
- ora impostate questi parametri con Opzioni di fusione..(Blending Options..) ombra interna, sovrapposizione sfumatura e traccia:
- duplicate il livello e posizionateli esattamente sopra i due precedenti, dovreste vedere un’ immagine simile:
Per salvarle dal pdf potete usare lo strumento Sezione(Slice Tool), è fondamentale che tutte e tre le immagini abbiano la stessa dimensione (nel nostro caso 342px * 30px) e vi consiglio di salvarle trasparenti nel formato .gif; nel prossimo tutorial vedremo come utilizzarle con i css per simulare la barra di navigazione di windows.com
