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.
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:
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.
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:
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:
La barra laterale
Con lo strumento "Rettangolo arrotondato" (raggio 4px) tracciamo un rettangolo, dalla seconda guida orizzontalefino a superare l'ultima di 30 pixel; in orizzontale copriamo l'intera distanza fra le due guide a destra delcanvas, il colore del rettangolo per ora non è importante; chiamiamo il livello appena creato "Sidebar".
Figura 8. Creazione della colonna laterale
Con lo strumento "Cambia punto di ancoraggio", trasformiamo gli spigoli arrotondati del lato superiore del rettangolo in spigolinetti, 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 delrettangolo "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 inmodo che quella rimanente arrivi alla quarta guida partendo dall'alto. Col secchiello coloriamo di un colore qualsiasila selezione e poi applichiamo una sfumatura al livello, in questo modo:
Figura 9. Impostazione del gradiente ciano
Ripetiamo la stessa operazione, in modo da creare altri due rettangoli soprastanti.A quello immediatamente sopra, che chiamiamo "Middle-box", applichiamo un gradiente giallo:
Figura 10. Impostazione del gradiente giallo
Mentre a quello che sta più in alto, "Top-box", un gradiente arancio:
Figura 11. Impostazione del gradiente arancio
Ora il nostro canvas si presenta
Ombra a lato della sidebar
Duplichiamo il livello "Sidebar" (basta trascinare il livello, sopra la piccola icona a forma di foglio sul fondodella finestra livelli), e portiamo tale copia sotto al livello "sidebar", in modo che sia completamente nascosta.
Applichiamo questo effetto al livello:
che ci creaun'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!
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:
Figura 14. 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 > Renderinge 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'effettoluce in luce e modifichiamo lo stile di fusione da Normale a Sovrapponi, otteniamo
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
Figura 16. Effetto sovrapposizione sfumatura
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:
Figura 17. Ombra interna
Figura 18. Bagliore interno
Figura 19. Sovrapposizione sfumatura
Creiamo un nuovo livello e chiamiamolo 'glass', teniamo premuto Ctrl e clicchiamo sul livello quadrato, impostiamo il bianco comecolore di primo piano e con lo strumento sfumatura (da bianco a trasparente) tracciamo una sfumatura, dall'alto versoil 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):
Figura 20. Strumento sfumatura
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:
Figura 25.Form 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:
Figura 26. Ombra esterna
Figura 27. Ombra interna
Figura 28. Bagliore interno
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
Ora 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.
Il nostro layout è suddiviso in due colonne a larghezza fissa, una testata ed un footer che siestende per tutta la lunghezza della pagina: ecco il
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:#header {background: #092F85;}
#nav{background: #93D459;}
#footcontainer{background: #4F4F4F;}
Ecco l'
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 inmodo 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
Dobbiamo ancora realizzare la parte grafica della navigazione, quindi apriamo Photoshop e tagliamo leimmagini che ci serviranno per il menu. È bene prestare cura a come si ritagliano le immagini, un buon design non deve presentare sbavature o imprecisioni.
Selezioniamo il livello della barra di navigazione, tenendo premuto Ctrl clicchiamo di nuovo sul livello inmodo 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 operazionieffettuate, dalla finestra "Storia"). Abbiamo ora un solo livello e non corriamo il rischio di alterare leimmagini quando le ritagliamo. Tagliamo la barra di navigazionein 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 informato gif sehanno 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:
Aggiustiamo il padding, diamo dei colori e impostiamo l'interlineadei link pari alla loro altezza, in modo che risultino centrati in verticale rispetto alla barra verde. Il codice:
Passiamo a realizzare lo sfondo che applicheremo al body della pagina. Apriamo il design suPhotoshop 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,
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
Il logo
In Photoshop tracciamo una selezione come questa:
Figura 31 - Selezione del logo
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:
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
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, ritagliamoe 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 inseritoposition: relative nelle regole dell'header, #slogan risulta posizionato in relazione a tale div! Ecco il
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
Passo 4: la colonna laterale
Per i vari box colorati dobbiamo ritagliarci delle sfumature dai relativi tre rettangoli nel design; sono sufficienti delleimmagini 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 siavessero solo poche righe di contenuti, e quindi un div più basso dell'immagine di sfondo, stabiliamo un'altezza minima deldiv 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
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 altricontenuti, 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
Per il footer ci occorrono due immagini, andiamo quindi a ritagliarle su Photoshop. La prima:
e la seconda, che verrà ripetuta in senso orizzontale:
Figura 34 - Taglio seconda immagine dello sfondo
Applichiamo le regole CSS:
Il nostro template si presenta
Come si può vedere, ancora dobbiamo sistemare qualcosa! Fra il box ciano e il footer c'è uno spazioda 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:
Figura 35 - Ritaglio immagine ombra
L'immagine deve comprendere l'ombra creata sul rettangolo sidebar e la parte ciano/azzurra. Applichiamola alla destra del contenitoree ripetiamola in senso verticale con questa regola:
Ecco il
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 andiamonuovamente su Photoshop e ritagliamo una immagine che sistemeremo proprio in quel punto:
Integriamo nel CSS:
Applichiamo anche la formattazione per i contenuti alla sidebar:
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
Considerazioni finali
Le scelte adottate per convertire il design realizzato su Photoshop in XHTML sono personali e vi sono sicuramente viediverse che possono portare ad altrettanti risultati apprezzabili; una fra tutte è l'utilizzo della tecnicadi image-replacement utilizzata per il logo. Tale tecnica non risulta efficace su Internet Explorer 5, il qualenon visualizza l'immagine, però si è preferito adottare tale tecnica in luogo di altre meno accessibili, considerandoche gli utenti di tale browser sono oramai molto pochi.
[cat=Credits]
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:
- Perfavore, Entra oppure Registrati per vedere i Link!
- Perfavore, Entra oppure Registrati per vedere i Link!
La palette dei colori
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
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
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
La barra laterale
Con lo strumento "Rettangolo arrotondato" (raggio 4px) tracciamo un rettangolo, dalla seconda guida orizzontalefino a superare l'ultima di 30 pixel; in orizzontale copriamo l'intera distanza fra le due guide a destra delcanvas, il colore del rettangolo per ora non è importante; chiamiamo il livello appena creato "Sidebar".
Figura 8. Creazione della colonna laterale
Con lo strumento "Cambia punto di ancoraggio", trasformiamo gli spigoli arrotondati del lato superiore del rettangolo in spigolinetti, 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 delrettangolo "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 inmodo che quella rimanente arrivi alla quarta guida partendo dall'alto. Col secchiello coloriamo di un colore qualsiasila selezione e poi applichiamo una sfumatura al livello, in questo modo:
Figura 9. Impostazione del gradiente ciano
Ripetiamo la stessa operazione, in modo da creare altri due rettangoli soprastanti.A quello immediatamente sopra, che chiamiamo "Middle-box", applichiamo un gradiente giallo:
Figura 10. Impostazione del gradiente giallo
Mentre a quello che sta più in alto, "Top-box", un gradiente arancio:
Figura 11. Impostazione del gradiente arancio
Ora il nostro canvas si presenta
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Ombra a lato della sidebar
Duplichiamo il livello "Sidebar" (basta trascinare il livello, sopra la piccola icona a forma di foglio sul fondodella finestra livelli), e portiamo tale copia sotto al livello "sidebar", in modo che sia completamente nascosta.
Applichiamo questo effetto al livello:
Figura 12. Applicazione effetto ombra esterna
che ci creaun'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!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.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ì:
Figura 13. Vista del pannello livelli
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:
Figura 14. 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 > Renderinge clicchiamo su Effetti di luce;impostiamo i parametri:
Figura 15. Applicazione effetti luce
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'effettoluce in luce e modifichiamo lo stile di fusione da Normale a Sovrapponi, otteniamo
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.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
Figura 16. Effetto sovrapposizione sfumatura
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:
Figura 17. Ombra interna
Figura 18. Bagliore interno
Figura 19. Sovrapposizione sfumatura
Effetto vetro sul logo
Creiamo un nuovo livello e chiamiamolo 'glass', teniamo premuto Ctrl e clicchiamo sul livello quadrato, impostiamo il bianco comecolore di primo piano e con lo strumento sfumatura (da bianco a trasparente) tracciamo una sfumatura, dall'alto versoil 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):
Figura 20. Strumento sfumatura
Figura 21. Selezione logo
Con lo strumento "Penna", tracciamo una forma come questa:
Figura 22.Forma sul logo
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:
Figura 23. Logo
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:
Figura 24. Applicazione effetto Smusso sul testo
Il form per il motore di ricerca
Figura 25.Form 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:
Figura 26. Ombra esterna
Figura 27. Ombra interna
Figura 28. Bagliore interno
Sovrapposizione colore
Normale, bianco, opacità 60%
Figura 29. Sovrapposizione sfumatura
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
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Ora 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 siestende per tutta la lunghezza della pagina: ecco il
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
che ci servirà da base per l'applicazione del CSS e il Perfavore,
Entra
oppure
Registrati
per vedere i Link!
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:#header {background: #092F85;}
#nav{background: #93D459;}
#footcontainer{background: #4F4F4F;}
Ecco l'
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.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 inmodo 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
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Dobbiamo ancora realizzare la parte grafica della navigazione, quindi apriamo Photoshop e tagliamo leimmagini 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 inmodo 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 operazionieffettuate, dalla finestra "Storia"). Abbiamo ora un solo livello e non corriamo il rischio di alterare leimmagini quando le ritagliamo. Tagliamo la barra di navigazionein modo da ottenere tre immagini come queste:
Figura 30 - Taglio immagini per la barra di navigazione
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 informato gif sehanno 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'interlineadei link pari alla loro altezza, in modo che risultino centrati in verticale rispetto alla barra verde. Il codice:
L'
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Passo 3: formattazione della testata
Passiamo a realizzare lo sfondo che applicheremo al body della pagina. Apriamo il design suPhotoshop 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,
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
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
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Il logo
In Photoshop tracciamo una selezione come questa:
Figura 31 - Selezione del logo
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:
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
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
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.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:
Figura 32 - Creazione sfondo dell'header
La selezione deve comprendere l'effetto di luce che abbiamo precedentemente creato sul rettangolo header, ritagliamoe 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 inseritoposition: relative nelle regole dell'header, #slogan risulta posizionato in relazione a tale div! Ecco il
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.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
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Passo 4: la colonna laterale
Per i vari box colorati dobbiamo ritagliarci delle sfumature dai relativi tre rettangoli nel design; sono sufficienti delleimmagini 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 siavessero solo poche righe di contenuti, e quindi un div più basso dell'immagine di sfondo, stabiliamo un'altezza minima deldiv 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
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.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 altricontenuti, 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
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Passo 5: il footer
Per il footer ci occorrono due immagini, andiamo quindi a ritagliarle su Photoshop. La prima:
Figura 33 - Sfondo del footer
e la seconda, che verrà ripetuta in senso orizzontale:
Figura 34 - Taglio seconda immagine dello sfondo
Applichiamo le regole CSS:
Il nostro template si presenta
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Come si può vedere, ancora dobbiamo sistemare qualcosa! Fra il box ciano e il footer c'è uno spazioda 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:
Figura 35 - Ritaglio immagine ombra
L'immagine deve comprendere l'ombra creata sul rettangolo sidebar e la parte ciano/azzurra. Applichiamola alla destra del contenitoree ripetiamola in senso verticale con questa regola:
Ecco il
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.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 andiamonuovamente su Photoshop e ritagliamo una immagine che sistemeremo proprio in quel punto:
Figura 36 - Taglio immagine in Photoshop
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
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Considerazioni finali
Le scelte adottate per convertire il design realizzato su Photoshop in XHTML sono personali e vi sono sicuramente viediverse che possono portare ad altrettanti risultati apprezzabili; una fra tutte è l'utilizzo della tecnicadi image-replacement utilizzata per il logo. Tale tecnica non risulta efficace su Internet Explorer 5, il qualenon visualizza l'immagine, però si è preferito adottare tale tecnica in luogo di altre meno accessibili, considerandoche gli utenti di tale browser sono oramai molto pochi.
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
il template e il file PSD in formato ZIP.[cat=Credits]
Fonte: Html.it
Revisione e Riformattazione BBCode Guida: R3tr0saction
[/cat]Revisione e Riformattazione BBCode Guida: R3tr0saction
[/ot]
