Da Photoshop al sito XHTML/CSS

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.

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:

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:

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:

e poi:

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

La barra laterale

Con lo strumento "Rettangolo arrotondato" (raggio 4px) tracciamo un rettangolo, dalla seconda guida orizzontale
fino a superare l'ultima di 30 pixel; in orizzontale copriamo l'intera distanza fra le due guide a destra del
canvas, il colore del rettangolo per ora non è importante; chiamiamo il livello appena creato "Sidebar".

Con lo strumento "Cambia punto di ancoraggio", trasformiamo gli spigoli arrotondati del lato superiore del rettangolo in spigoli
netti, e facciamo in modo che combacino perfettamente con le guide; uno dei due punti degli spigoli può anche essere rimosso.

Ora creiamo un nuovo livello vuoto, lo chiamiamo "Bottom-box".

Tenendo premuto Ctrl clicchiamo sul livello del
rettangolo "Sidebar", in questo modo carichiamo una selezione attorno al rettangolo. Sempre col livello "Bottom-box"
attivo, premiamo "m" per attivare lo strumento "Selezione rettangolare" e tenendo premuto Alt eliminiamo la selezione soprastante in
modo che quella rimanente arrivi alla quarta guida partendo dall'alto. Col secchiello coloriamo di un colore qualsiasi
la selezione e poi applichiamo una sfumatura al livello, in questo modo:

Ripetiamo la stessa operazione, in modo da creare altri due rettangoli soprastanti.
A quello immediatamente sopra, che chiamiamo "Middle-box", applichiamo un gradiente giallo:

Mentre a quello che sta più in alto, "Top-box", un gradiente arancio:

Ora il nostro canvas si presenta così.

Ombra a lato della sidebar

Duplichiamo il livello "Sidebar" (basta trascinare il livello, sopra la piccola icona a forma di foglio sul fondo
della finestra livelli), e portiamo tale copia sotto al livello "sidebar", in modo che sia completamente nascosta.

Applichiamo questo effetto al livello:

che ci crea un'ombra attorno a tutto il rettangolo. Però a noi serve solo a sinistra, quindi vediamo di eliminare il resto.

Creiamo un nuovo livello vuoto e posizioniamolo sotto "Sidebar copia", attiviamo il livello "Sidebar copia" e premiamo Ctrl + e, i due livelli vengono uniti; aiutandoci con le guide, selezioniamo solo la parte di ombra che ci interessa (quella sinistra), invertiamo (Ctrl + i) la selezione e premiamo "Canc" sulla tastiera, la parti superflue vengono eliminate! Eccola qui.

Nella finestra "Livelli", possiamo creare una cartella e rinominarla in "frames"; mettiamoci dentro i livelli fino ad ora creati, facendo in modo che si presenti così:

La barra di navigazione

Attiviamo lo strumento "Rettangolo arrotondato", con raggio 6px, e disegniamo un rettangolo (510 x 27 pixel) che partendo dalla guida laterale destra si estenda in orizzontale. Posizioniamolo nell'angolo in basso a destra del rettangolo header, in modo che combaci perfettamente con le guide, e trasformiamo gli smussi degli angoli inferiori con la tecnica descritta precedentemente, in spigoli vivi:

Rinominiamo il livello in "nav" e applichiamo questi stili:

Ombra interna
Opacità: 63
Angolo: -90
Distanza: 0
Dimensione: 20

Smusso effetto rilievo
Struttura
Stile: smusso interno
Tecnica: arrotonda
Profondità: 100
Direzione: sopra
Dimensione: 0
Attenuazione: 0

Ombreggiatura
Angolo: 90
Usa luce globale: si
Altitudine: 51
Metodo luce: scolora #ffffff opacità 44
Metodo ombra: opacità: 0

Sovrapposizione colore
Colore: #9DE25F

Per quanto riguarda la struttura abbiamo quasi finito, non resta che aggiungere un po' di profondità al livello header… così appare piatto!

Effetto luce sull'header

Duplichiamo il livello header, eliminiamo l'effetto al livello (click tasto destro sul livello e dal menu a tendina "Cancella stile livello") e tenendo premuto Ctrl clicchiamoci sopra in modo da selezionarlo; Andiamo su Filtro > Rendering e clicchiamo su Effetti di luce; impostiamo i parametri:

Possiamo giocare a nostro piacimento con l'estensione del faretto e con i colori, è importante però, non superare con la sfumatura che creiamo, la larghezza del rettangolo, altrimenti non avremo un sfondo da ripetere in orizzontale; questo risulterà più evidente in seguito quando trasformeremo il design nella pagina XHTML.

Cambiamo il nome al livello con l'effetto luce in luce e modifichiamo lo stile di fusione da Normale a Sovrapponi, otteniamo questo.

Il logo

Creiamo una nuova cartella nella finestra dei livelli e rinominiamola in "logo". Attiviamo lo strumento "Rettangolo arrotondato", impostiamo il raggio a 6 pixel e disegniamo un quadrato di più o meno 45 pixel di lato e applichiamogli questo effetto:

Ombra interna
Opacità: 28
Angolo: -90
Distanza: 2
Dimensione: 5

Bagliore interno
Metodo fusione: normale
Opacità: 42
Colore: #000000
Elementi Bordo
Riduci: 0
Dimensione:10
Qualità > intervallo: 50

Ed infine un ultimo tocco:

Traccia
Dimensione: 3
Posizione: esterno
Metodo fusione: normale
Colore: #1e1e1e

Rinominiamo il livello in 'quadrato'.

Attiviamo lo strumento "Forma personale", scegliamo una forma e disegniamola all'interno del quadrato tracciato precedentemente.

Applichiamo questi effetti al livello:

Effetto vetro sul logo

Creiamo un nuovo livello e chiamiamolo 'glass', teniamo premuto Ctrl e clicchiamo sul livello quadrato, impostiamo il bianco come
colore di primo piano e con lo strumento sfumatura (da bianco a trasparente) tracciamo una sfumatura, dall'alto verso
il basso, all'interno della selezione, fino a più o meno 3/4 del quadrato; facciamo attenzione che la sfumatura sia perfettamente verticale
(basta tenere premuto shift mentre la si traccia):

Con lo strumento "Penna", tracciamo una forma come questa:

Carichiamo una selezione, con il solito metodo, su tale forma, attiviamo il livello con la sfumatura bianca, premiamo "Canc" e portiamo a 35 l'opacità del livello. Il risultato finale sarà questo:

Spostiamo tutto il logo nella parte in alto a sinistra del canvas; inseriamo il testo: "my web site is cool" con font Arial14px, #999999, strong>antialias: preciso.

Distanziamo le lettere di un fattore 25 e applichiamo questo effetto al livello:

Il form per il motore di ricerca

Il campo di input, lo realizziamo con lo strumento "Rettangolo", disegnando un rettangolo appunto, di 170 pixel di larghezza e 16 di altezza, al quale applichiamo una ombra interna con queste impostazioni:

Ombra interna
Metodo fusione: moltiplica
Opacità: 44
Usa luce globale 90°
Distanza: 1
Dimensione: 4

Il pulsante cerca

Con lo strumento "Rettangolo arrotondato" (raggio 3px) tracciamo un rettangolo 40px per 16px, al quale applichiamo questi effetti:

Sovrapposizione colore
Normale, bianco, opacità 60%

Creiamo la sfumatura bianca con la stessa tecnica utilizzata per creare il livello glass, inseriamo la scritta "CERCA" con font Tahoma 9px Bold, colore #424242 e antialias arrotondato.

Utilizziamo lo stesso procedimento per inserire il pulsante ed il relativo campo di input nel box giallo della sidebar, e nella barra di navigazione inseriamo le voci: PORTFOLIO, NEWS, BLOG, DOWNLOADS, CONTATTI, ABOUT
(o quelle che preferite); possiamo inserirne diverse e faremo in modo che la barra si adatti automaticamente estendendosi a sinistra.

Con il font Thaoma 10px, colore #4F4F4F e antialias netto, inseriamo uno slogan, più o meno a metà altezza del rettangolo header: My web site is finally online.

Per quanto riguarda la parte grafica abbiamo finito, ora il nostro design si presenta così.

Nella prima parte dell'articolo abbiamo lavorato con Photoshop realizzando il modello grafico del nostro template. In questa seconda sezione metteremo mano al codice XHTML e CSS per convertire la grafica in una forma pronta per il web. Il modello grafico sarà sezionato nei modi opportuni per fornire gli elementi grafici necessari alla creazione di un layout CSS senza tabelle.

Passo 1: la struttura

Il nostro layout è suddiviso in due colonne a larghezza fissa, una testata ed un footer che si
estende per tutta la lunghezza della pagina: ecco il markup XHTML che ci servirà da base per l'applicazione del CSS e il template prima della formattazione con il foglio di stile.

Esistono vari modi per realizzare un layout di due colonne a larghezza fissa; in questo caso optiamo per una soluzione basata sul float: le due colonne scorrono entrambe a sinistra e il footer si sposterà dinamicamente in basso, adattandosi alla colonna più lunga.

Applichiamo una prima formattazione per azzerare i margini e il padding di ogni elemento, centriamo il div container e impostiamone la larghezza a 770 pixel (pari a quella delle guide più esterne del design in Photoshop):

Aggiungiamo dei colori di sfondo temporanei ai div principali, in modo da renderci conto di come si presentano e, contemporaneamente al settaggio della larghezza, impostiamo anche lo scorrimento a sinistra della sidebar e del div content:

In questo modo il div content si disporrà a sinistra e il div sidebar a destra; questo avviene perché nel codice XHTML abbiamo il content prima del sidebar, se così non fosse dovremmo adottare un'altra soluzione.

Coloriamo lo sfondo dell'header, lo sfondo di quella che sarà la barra di navigazione e il div footcontainer:

Ecco l'esempio.

Passo 2: La barra di navigazione principale

Col posizionamento assoluto, spostiamo a destra il div nav che contiene la lista col menu di navigazione.
Per fare ciò dobbiamo impostare la posizione del div padre su relative oltre a stabilirne l'altezza
(visto che ci siamo la impostiamo già da ora uguale a quella che avrà alla fine):

Impostiamo margini, padding e altezza per la lista e per i link, e facciamo scorrere a sinistra tutti gli elementi in
modo da avere un menu orizzontale:

Eliminiamo anche lo stile da tutte le liste:

ul{
list-style: none;
}

Impostiamo a zero i bordi per i fieldset e le eventuali immagini, oltre a stabilire alcune regole generali per i link:

a:link, a:visited {
color: #39f;
text-decoration: none;
}

a:hover {
color: #147;
text-decoration: underline;
}
img, fieldset{
border: 0;
}

Ecco come si presenta ora il template.

Dobbiamo ancora realizzare la parte grafica della navigazione, quindi apriamo Photoshop e tagliamo le
immagini che ci serviranno per il menu. È bene prestare cura a come si ritagliano le immagini, un buon design
non deve presentare sbavature o imprecisioni.

Ritaglio immagini per la barra di navigazione

Selezioniamo il livello della barra di navigazione, tenendo premuto Ctrl clicchiamo di nuovo sul livello in
modo da caricarne la selezione relativa.

Ora uniamo tutti i livelli (senza deselezionare)
cliccando su: Livelli > Unico livello (possiamo sempre riavere i livelli tornando indietro con le operazioni
effettuate, dalla finestra "Storia"). Abbiamo ora un solo livello e non corriamo il rischio di alterare le
immagini quando le ritagliamo. Tagliamo la barra di navigazione in modo da ottenere tre immagini come queste:

Per effettuare il taglio basta deselezionare la parte che non ci interessa e poi: Immagine > Ritaglia (ovviamente dobbiamo effettuare il taglio tre volte, quindi di volta in volta torniamo indietro nella finestra storia).

Otteniamo immagini di altezza 27 pixel, la larghezza non è fondamentale, si può fare "ad occhio" più o meno come quelle qui sopra.

Salvare le immagini

Rimandiamo ad altre sedi l'utilizzo dei vari formatti immagine per il web, in linea di massima possiamo scegliere di salvarle in
formato gif se hanno pochi colori e in formato jpg altrimenti. In generale: disegni e forme con colori netti li salviamo col formato gif, mentre fotografie o immagini con sfumature e molti colori le salviamo in jpg. Le immagini suddette possiamo salvarle in formato gif;
le chiameremo rispettivamente: left-nav.gif, bg-nav.gif e right-nav.gif.

Applichiamole alla barra di navigazione impostando:

• right-nav.gif, posizionata a destra come sfondo per il div contenitore della barra;
• left-nav.gif, posizionata a sinistra come sfondo per il tag ul della lista;
• bg-nav.gif come sfondo per tutti i tag li.

Aggiustiamo il padding, diamo dei colori e impostiamo l'interlinea dei link pari alla loro altezza, in modo che risultino centrati in verticale rispetto alla barra verde. Il codice:

L'esempio.

Passo 3: formattazione della testata

Passiamo a realizzare lo sfondo che applicheremo al body della pagina. Apriamo il design su
Photoshop e tracciamo una selezione di pochi pixel (possiamo aiutarci con una guida supplementare) dall'estremo superiore del design,
alta più o meno 350 pixel, uniamo tutti i livelli, ritagliamo e salviamo (File > Salva per il web) come bg.jpg.

Applichiamola come sfondo al tag body e ripetiamola solo in orizzontale:

Eliminiamo ora lo sfondo del div header, rendendolo trasparente, altrimenti coprirebbe l'immagine appena inserita:

ed ecco il risultato.

Il logo

In Photoshop tracciamo una selezione come questa:

Salviamo per il web come logo.gif.

Vogliamo che i browser visualizzino questa immagine anziché il testo dell'intestazione h1 che abbiamo nel codice,
quindi utilizziamo una delle tecniche di image-replacement e scriviamo nel file CSS le seguenti regole:

Piccola nota a margine.
Le tecniche di image-replacement ricadono tuttora in un settore pionieristico del web design basato sui CSS, una lista e relative spiegazioni si possono trovare qui:
www.mezzoblue.com/tests/revised-image-replacement/

Trasformiamo la modalità di visualizzazione del link nell'intestazione, da inline a block, in modo da poter settare larghezza e altezza, e rendere l'immagine del logo cliccabile:

Ecco il risultato.

Ora realizziamo lo sfondo dell'header, dopo aver reso non visibili i livelli del menu orizzontale e il logo (cliccando sull'occhio dei relativi livelli nella finestra livelli), aiutandoci con le guide, tracciamo una selezione in questo modo:

La selezione deve comprendere l'effetto di luce che abbiamo precedentemente creato sul rettangolo header, ritagliamo
e salviamo come: bgheader.jpg (770x193 pixel).

Applichiamo l'immagine come sfondo al div header con la seguente regola:

Ritagliamo l'immagine della scritta "My website is finally online" e salviamola come slogan.gif. Con la stessa tecnica utilizzata per il logo, la applichiamo all'intestazione h3 che abbiamo utilizzato nel codice:

Modificando gli attributi top e left possiamo sistemarla nella posizione corretta.Teniamo presente che avendo inserito
position: relative nelle regole dell'header, #slogan risulta posizionato in relazione a tale div! Ecco il risultato.

Il form

Posizioniamo in modo assoluto anche il form per la ricerca, quindi aggiungiamo le seguenti regole:

L'immagine bg-input.gif ovviamente la dobbiamo ricavare dal design. È sufficiente ritagliare un pezzetto del rettangolo che abbiamo disegnato precedentemente su Photoshop, oramai dovremmo essere abbastanza esperti da poterlo fare da soli. Ecco il risultato.

Passo 4: la colonna laterale

Per i vari box colorati dobbiamo ritagliarci delle sfumature dai relativi tre rettangoli nel design; sono sufficienti delle
immagini di un pixel di larghezza che poi ripeteremo in senso orizzontale.
Ecco le regole CSS:

In questo caso, contrariamente agli altri, l'immagine viene ripetuta nella parte bassa del div.
Il bordo quasi bianco evita lo stacco troppo netto che si avrebbe col verde della barra di navigazione.

La sfumatura del box ciano è la più alta, e per evitare lo stacco netto di colore che si avrebbe nel caso si
avessero solo poche righe di contenuti, e quindi un div più basso dell'immagine di sfondo, stabiliamo un'altezza minima del
div uguale all'altezza dell'immagine che ci rende la sfumatura.

Ancora una considerazione: min-height su Internet Explorer non funziona, la soluzione per ovviare a questo è presa da constile.org.

I colori di sfondo vanno settati in base al colore della sfumatura che sta dalla parte "estensibile" del div;
per esempio, il gradiente giallo viene ripetuto nella parte alta del div, quindi se dovessimo inserire altri
contenuti, il div estendendosi, sarebbe più alto dell'immagine ripetuta e lascerebbe intravedere il colore sottostante, però
se applichiamo allo sfondo un colore uguale a quello dell'estremo inferiore del gradiente, questo non accadrà.
Ecco il risultato.

Passo 5: il footer

Per il footer ci occorrono due immagini, andiamo quindi a ritagliarle su Photoshop. La prima:

e la seconda, che verrà ripetuta in senso orizzontale:

Applichiamo le regole CSS:

Il nostro template si presenta così.

Come si può vedere, ancora dobbiamo sistemare qualcosa! Fra il box ciano e il footer c'è uno spazio
da colorare ed inoltre dobbiamo aggiungere l'ombra alla colonna laterale; possiamo ripetere un'immagine in senso verticale e creare quindi una falsa colonna.

Ritagliamo l'immagine:

L'immagine deve comprendere l'ombra creata sul rettangolo sidebar e la parte ciano/azzurra. Applichiamola alla destra del contenitore
e ripetiamola in senso verticale con questa regola:

Ecco il risultato.

Ancora abbiamo qualche problema, la leggera sfumatura grigia nell'angolo in alto a destra del div "content",
ha uno stacco netto sulla destra, dovuto alla sovrapposizione dell'ombra della colonna destra, quindi andiamo
nuovamente su Photoshop e ritagliamo una immagine che sistemeremo proprio in quel punto:

Integriamo nel CSS:

Applichiamo anche la formattazione per i contenuti alla sidebar:

Ai contenuti del div "content":

Alla classe "item":

Impostiamo le regole per le intestazioni:

Spostiamo il paragrafo del footer, allineandolo a destra ma spostato in modo che si appoggi alla sidebar:

Sistemiamo la lista nella sidebar, il form nel box giallo e aggiungiamo del padding sul fondo di ogni box:

Ed infine con la regola:

facciamo in modo che il filetto orizzontale con id: "clearer" annulli lo scorrimento a sinistra impostato nei due div: content e sidebar; inoltre lo rendiamo invisibile.

Questa operazione, se fosse stato compreso nel container, avremmo potuto delegarla al footer, ma in questo
caso che il footer sta fuori dal contenitore principale, abbiamo bisogno di un elemento supplementare.
Ecco il template.

Crossbrowsing

Ancora il nostro template non viene visualizzato correttamente su tutti i browser, specialmente su Internet Explorer.

Primo problema. Nelle versioni di IE inferiori alla 6 la regola applicata al div container:

non funziona!

Possiamo risolvere aggiungendo la regola:

al body, e di conseguenza per mantenere tutto allineato a sinistra, impostiamo:

nel div container.

Ecco il codice integrato con le due ultime regole:

Secondo problema: la barra di navigazione, questo su tutte le versioni "moderne" di Internet Explorer, non risulta allineata a destra! Possiamo risolvere aggiungendo le regole:

Terzo problema: il pulsante "invia" del form sulla testata viene visualizzato a sinistra. Risolviamo definendo questa classe:

Abbiamo concluso, ecco il nostro template finito.

Considerazioni finali

Le scelte adottate per convertire il design realizzato su Photoshop in XHTML sono personali e vi sono sicuramente vie
diverse che possono portare ad altrettanti risultati apprezzabili; una fra tutte è l'utilizzo della tecnica
di image-replacement utilizzata per il logo. Tale tecnica non risulta efficace su Internet Explorer 5, il quale
non visualizza l'immagine, però si è preferito adottare tale tecnica in luogo di altre meno accessibili, considerando
che gli utenti di tale browser sono oramai molto pochi.

Scarica il template e il file PSD in formato ZIP.