Home » guide » Vista menu con photoshop

Vista menu con photoshop

ottobre 27, 2007, In: Guide, Vista

Tutorial su come realizzare la barra di navigazione di windows.com, questo sar? il risultato:
menu
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.
Free<br />
 Image Hosting at www.ImageShack.us
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:Free Image Hosting at www.ImageShack.us

Free Image Hosting at www.ImageShack.us
Free Image Hosting at www.ImageShack.us
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:Free Image Hosting at www.ImageShack.us
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 tracciaFree Image Hosting at www.ImageShack.usFree Image Hosting at www.ImageShack.usFree Image Hosting at www.ImageShack.us
0.duplicate il livello e posizionatelo sotto al secondo link tra le due linee di separazione, questo ? il risultato:menu2
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:
Free Image Hosting at www.ImageShack.us
Free Image Hosting at www.ImageShack.usFree Image Hosting at www.ImageShack.us
3.duplicate il livello e posizionateli esattamente sopra i due precedenti, dovreste vedere un? immagine simile:selected
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





* Nome, Email e Commento sono obbligatori