Vista menu con photoshop
Tutorial su come realizzare la barra di navigazione di windows.com, questo sar? il risultato:
1.Creiamo un nuovo documento 450px * 450px in modalit? RGB/8bit con sfondo bianco.
2.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.

3.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:


4.Aggiungiamo del testo in bianco per visualizzare i link, suggerisco Segoe Regular 12px Sharp(preciso) scaricabile da qu?
5.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.
6.ancellate 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.
7.questo dovrebbe essere il risultato della barra nello stato normale:
8.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.
9.applicate tramite Opzioni di fusione..(Blending Options..) questi impostazioni ombra interna, sovrapposizione sfumatura e traccia


0.duplicate il livello e posizionatelo sotto al secondo link tra le due linee di separazione, questo ? il risultato:
1.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.
2.ora impostate questi parametri con Opzioni di fusione..(Blending Options..) ombra interna, sovrapposizione sfumatura e traccia:



3.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
Fonte: preogrammando
Tags:







Nessun Commento lasciato
Lascia un commento