CSS  »  Articoli  »  Nessuna selezione 

Ci troviamo a nostro agio con i CSS però diamo del lei a Photoshop? Oppure siamo dei buoni grafici però essendo abituati ad usare le tabelle ci perdiamo usando i CSS? …bene, in questo tutorial vedremo come realizzare un layout basato sugli standards XHTML/CSS, partendo dal canvas bianco di Photoshop.

Scelta del layout

I layout a larghezza fissa sono sicuramente più facili da gestire e controllare, soprattutto per quanto riguarda la grafica, quindi se ci stiamo cimentando per la prima volta nella realizzazione di un sito basato sui CSS la larghezza fissa rappresenta la scelta più semplice.

Nel nostro caso avremo un layout largo 770 pixel, diviso in due colonne, un footer, una barra di navigazione orizzontale e una testata per il logo. I 770px ci consentono di star sicuri che anche ad una risoluzione di 800x600 non compaia la barra di scorrimento orizzontale che sicuramente risulterebbe poco usabile.

Colori e stile

La scelta dei colori determina l'impatto visivo di un sito, quindi in fase di progettazione è bene spendere un po' di tempo per trovare la giusta palette, anche se ovviamente, si può sempre cambiare idea, e anzi, alcune scelte di effetto le si raggiunge in corso d'opera.

Mettere assieme dei colori ed ottenere una palette equilibrata non è certo semplicissimo, se non possediamo "l'occhio allenato" possiamo sempre rubacchiare qualche idea in giro per il web oppure possiamo affidarci a degli schemi gia preconfezionati reperibili in rete; per esempio:

• http://www.worqx.com/resource-recommends.htm
• http://www.colorschemer.com/

La palette dei colori

La palette dei colori che utilizzeremo è abbastanza variopinta e mescola tonalità calde come l'arancio e il giallo ad altre fredde come il ciano e il blue.

Figura 1. Palette dei colori

Realizzazione del design in Photoshop

Apriamo un nuovo canvas di 840 x 840, meglio stare larghi, così si ha una visione globale di ciò che si fa. Coloriamo lo sfondo del canvas con questo colore: #4F4F4F.

Impostiamo delle guide che ci aiuteranno nella costruzione delle forme principali. Ctrl+r per visualizzare i righelli e poi basta puntare il mouse sul righello e trascinare per inserire una guida, a questo punto il canvas si presenta in questo modo.

Premiamo "d" e poi "x" sulla tastiera in modo da impostare il colore bianco in primo piano, e con lo strumento "Rettangolo" disegniamo un rettangolo bianco. Rinominiamo il livello che si viene a creare in "Body".

È importante che il rettangolo sia più largo del canvas, in modo da avere una superficie continua da lato a lato. Applichiamo i seguenti effetti, facendo doppio click sul corrispondente livello:

Figura 2. Ombra esterna

Figura 3. Ombra interna

Figura 4. Smusso

In questo modo diamo un effetto tridimensionale al rettangolo appena disegnato, il quale rappresenta lo sfondo dei contenuti principali.

Premiamo "m" sulla tastiera per attivare lo strumento "Selezione rettangolare" e tracciamo una selezione che comprenda la parte del canvas fino alla prima guida in alto:

Figura 5. Selezione rettangolare

Premiamo "d", di seguito "g", creiamo un nuovo livello, che chiamiamo "Top" e col "Secchiello" coloriamo di nero la selezione. Deselezioniamo con Ctrl+d, allarghiamo il rettangolo appena creato in modo che sia poco più largo del canvas e applichiamo al livello l'effetto:

Figura 6. Ombra esterna

e poi:

Figura 7. Sfumatura

Fra il livello Body e il livello Top, ne inseriamo un altro che chiamiamo "Header", selezioniamo la parte del canvas compresa fra la prima e la seconda guida (per non perdere la testa durante le selezioni, è possibile attivare l'effetto calamita alle guide!);

Con il livello Header attivo, riempiamo la selezione con un colore qualsiasi. Applichiamo al livello appena creato, una sfumatura con i colori #90AFD8 -> #00357C.

A questo punto abbiamo il nostro file PSD composto da quattro livelli, in ordine:

• Top
• Body
• Header
• Sfondo

Altri articoli

Altre guide

Altre newsletter