Barra di menu per Navigation Matrix

20 marzo 2006

In un articolo pubblicato su PRO, Alessandro Fulciniti ha esposto la tecnica per realizzare un Menu grafici con rollover e preload via CSS.

È un’utilissimo sistema per creare dei menu grafici con rollover e preload via CSS. In questo appuntamento vedremo come realizzare una menu bar in stile plastico come quella raffigurata nell’immagine seguente:

Menubar per Navigation Matrix

Nell’articolo, Alessandro si era soffermato (per particità) soltanto alla compilazione del markup (X)html+CSS. Adesso ci concentreremo alla realizzazione della grafica (con Photoshop). In questo appuntamento parleremo di:

  • Scelta della palette dei colori con Colormixers
  • Aggiungere/Sottrarre Selezioni
  • Sfumature
  • Guide
  • Taglio della grafica
  • Esportazione per il web

Qui potete vedere l’immagine finale con le sue dimensioni originali, mentre questa è la pagina (X)HTML con il menu funzionante. Tutto il materiale per seguire l’articolo è scaricabile attraverso questo link.

Usiamo Colormixers

Cominciamo con lo scegliere uno schema di colori armonioso. Se abbiamo abbastanza occhio non abbiamo magari bisogno di un tool simile, ma penso che anche i più esperti lo troveranno utile.

Andiamo su questa pagina. Il bello di Colormixers è la varietà di funzioni che possiamo trovare al suo interno.

Nel primo box (Primary Colors), possiamo utilizzare tre utili slider, rispettivamente per il rosso, il verde e il blu. Nel pannello Generated Colors troveremo lo schema dei colori scelti da Colormixer, subito dopo il pannello dell’Anteprima e quello delle Opzioni.

Mi soffermo sull’utilità di quest’ultimo. Parlo soprattutto dei tasti dedicati all’esportazione delle tavolozze dei colori. Infatti, possiamo salvare le stesse nei seguenti formati:

  1. ACT – Tavolozza per Photoshop
  2. AI – File di illustrator
  3. File di testo che contiene i colori in:
    • HEX (esadecimale per il web)
    • RGB
    • CMYK

Ecco un esempio del pannello dedicato all’anteprima:

Anteprima della tavolozza

Se vuoi aggiornamenti su Barra di menu per Navigation Matrix inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Barra di menu per Navigation Matrix

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy