Photoshop CS3 Creare un menu di navigazione

[Flep]

Dopo aver visto come creare degli sfondi vettoriali che possono essere utilizzati sia in Flash sia in siti internet in html, questo tutorial vi mostrerà come creare una barra di navigazione per il vostro sito internet usando Adobe Photoshop CS3.

Inizieremo disegnando un rettangolo con gli angoli arrotondati con un raggio di 10 pixel.

Rasterizziamo questo livello e (usando lo strumento di selezione rettangolare per selezionare la parte da ritagliare e premendo CANC sulla tastiera una volta selezionata), ritagliamo la parte inferiore del rettangolo arrotondato:

Duplichiamo questo livello e, sempre usando lo strumento di selezione rettangolare, tagliamo un’ulteriore parte della sezione inferiore del tab.

Muoviamo questo livello duplicato a destra.

Cambiamo lo sfondo con un bel nero.

Selezioniamo il livello contenente il primo tab e apriamo il pannello delle opzioni fusione.

Aggiungiamo una sfumatura e un contorno leggero:

Aggiungiamo uno stile anche all' altro tab:

Con lo strumento rettangolo creeremo adesso un nuovo livello contenente una barra che utilizzi come colore lo stesso della parte inferiore della sfumatura verde.

Posizioniamo questo livello sopra entrambi i tab e sistemiamolo in modo da ottenere questo effetto:

Creiamo un altro livello con una barra più sottile, scegliamo come colore un verde più vibrante:

Direi che è già abbastanza gradevole, no?

Aggiungiamo qualche piccolo effetto Web 2.0 per fare apparire il tutto ancora meglio.

Creiamo un nuovo livello e posizioniamolo sopra il primola.

Usiamo lo strumento di selezione rettangolare per selezionare circa metà del tab e riempiamolo con qualsiasi colore.

Andiamo alle opzioni fusione e aggiungiamo una sfumatura di default, da bianco a nero.

Con lo strumento bacchetta magica (W sulla tastiera) portiamoci sul livello contenente il tab verde e clikkiamo ovunque nello sfondo.

Selezioniamo nuovamente il livello da poco creato e premiamo CANC sulla tastiera per dare al contenuto del livello le stesse curve del tab:

Creiamo un livellonuovo sopra questo livello e uniamo I due selezionandoli entrambi nel pannello livello e premendo CTRL+E sulla tastier.

Cambiamo il metodo fusione in "Sovrapponi":

Ripetiamo il processo per il secondo tab, ma invertiamo la direzione della sfumatura:

Ottimo!

L' unica cosa che rimane da fare è duplicare I livelli che formano Il tab argentato e aggiungere I testi!

Usate pure a piacimento la barra di navigazione inclusa nel download!

Allego sia PSD che FLA che dimostra come usare questo menu con Flash CS3 ed Actionscript 3.0

[Onsitus]

Carino...mo ti farò competizione e te lo rifaccio in css.

[esteticart.it]

grazie ancora per il tuo lavoro!!

[Onsitus]

Ecco la mia versione in css, con stato selezionato, effetto rollover e pulsante estendibile basato sul suo contenuto testo.
Tab menu orizzontale - esempio 2 - CSS3 | CSS Tutorials e Risorse css gratuite

[teonji]

ragazzi..spero che questo 3d sia ancora visto..stavo provando ad editare il menu fatto in flash da flep..è ho notato che i bottoni non sono bottoni, ma sn dei fotogrammi che vengono richiamati da un action
ma volevo chiedervi..
come sgli si dice quindi a qst bottoni di aprire una determinata pagina allo schiaccire del bottone?
vorrei mettere il menu in un sito che sto facendo cn iframe e quindi sarebbe molto comodo usare qst menu in qnt l'header nn cambia mai..,ma non riesco a mettergli l'azione geturl..comincia a lampeggiare e da dei problemi di compilazione..
help me please

[Onsitus]

Originally Posted by teonji

ragazzi..spero che questo 3d sia ancora visto..stavo provando ad editare il menu fatto in flash da flep..è ho notato che i bottoni non sono bottoni, ma sn dei fotogrammi che vengono richiamati da un action
ma volevo chiedervi..
come sgli si dice quindi a qst bottoni di aprire una determinata pagina allo schiaccire del bottone?
vorrei mettere il menu in un sito che sto facendo cn iframe e quindi sarebbe molto comodo usare qst menu in qnt l'header nn cambia mai..,ma non riesco a mettergli l'azione geturl..comincia a lampeggiare e da dei problemi di compilazione..
help me please

Actionscript 3.0. Il getURL non esiste più.
E' sparito getURL! Che faccio? [Pillola]

[teonji]

ciao..grazie mille pe rla dritta..era un po che nn prendevo in mano actionscript..domani provo e vi faccio sapere

[teonji]

non riesco..ragazzi..chi mi riesce a fare un esempio di dove devo mettere quel codice aggiustato?nel fotogramma non funziona..

[teonji]

di solito nelle tua applicazioni metti l'esemprio di come linkare le pagine..;( help me please-->

[frabis67]

salve a tutti, ho anch'io lo stesso problema.... il passaggio tra as2 e as3 in questo caso lo trovo un po' brusco quindi vi prego di aiutarmi...

vi posto il codice messo sul primo fotogramma


Codice:
import flash.net.*;
import flash.events.*;
// create an array and put the buttons in it
var buttons_array:Array=new Array(menu_mc.flep_mc,menu_mc.flash_mc,menu_mc.ps_ mc,menu_mc.news_mc,menu_mc.blog_mc);
var urls:Array=new Array('http://www.miosito.com/pagina1.html','http://www.miosito.com/pagina1.html','http://www.miosito.com/pagina1.html', 'http://www.miosito.com/pagina1.html','http://www.miosito.com/pagina1.html');
/* add listeners to buttons. Add an id for each button.
At MOUSE_DOWN calls "callSelectionButton" function*/
for(var i:int=0;i {
buttons_array[i].mouseChildren=false;
buttons_array[i].buttonMode=true;
buttons_array[i].id=i;
buttons_array[i].addEventListener(MouseEvent.MOUSE_DOWN,callSelect ionButton);
}

/* This function calls another funtion ( selectionButton )
passing the id of the button that has been clicked*/
function callSelectionButton(evt:MouseEvent):void
{
selectionButton(evt.target.id);
}
/* create the function that handle the states of buttons.
This function requires one paremeter ( int type ) that is the id of the selected button*/
function selectionButton(id:int):void
{
// open a loop through the buttons array
for(var i:int=0;i {
if(i==id)
buttons_array[i].gotoAndStop(1);
else
buttons_array[i].gotoAndStop(2);
}
function go(evt:MouseEvent):void
{
var request:URLRequest=new URLRequest(urls[evt.target.id]);
navigateToURL(request);
}
}

// Enable the first button
selectionButton(0);

vi sarei davvero grato di una risposta.
frabis67