Creare un layout per un sito internet

Dopo aver imparato diverse cose leggendo i tutorials su PhotoShop CS3 di

FlepStudio, è giunta l' ora di vedere come creare un layout per un sito web.

In questo tutorial attraverseremo il processo di design necessario alla costruzione di

una semplice homepage.

La prima cosa che dobbiamo tenere a mente è che non tutti gli utenti di internet
utilizzano la stessa risoluzione sui loro monitor.

Dobbiamo quindi impostare il nostro layout in modo tale che sia ben visualizzato su
tutte o quasi tutte le risoluzioni.

Sceglieremo un layout che abbia 850px di larghezza affinchè sia visibile su tutte le
risoluzioni superiori o pari a 1024x768px.

E’ tecnicamente consigliabile farlo ancora più piccolo affinchè possa esser visualizzato
su monitor impostati a 800x600, ma di monitor di quel tipo se ne vedono ormai davvero
pochi.

Creaiamo un nuovo documento che sia abbastanza grande da contenere il nostro layout.

In genere mi piace lavorare su un’area di 2000x2000px, in modo tale da avere

abbastanza spazio in altezza per sviluppare i contenuti a piacimento.

Quella dimensione consente inoltre di avere molto spazio vuoto ai lati del layout da
poter utilizzare per fare prove di diverso tipo.

Attiviamo il righello sul nostro documento premendo CTRL+R sulla nostra tastiera, e
impostiamo la grandezza a “Pixel” cliccandoci sopra col tasto destro del mouse.

Calcoliamo i nostri 850px e trasciniamo le guide corrispondenti sul nostro documento.

Una delle cose più importante del design è l’header.

Se è vero che deve rispecchiare i contenuti della pagina, è altresì vero che esso non deve
mai attrarre troppo l’attenzione.

E’ consigliabile mantenere gli header relativamente corti in altezza per attirare

l’attenzione sul contenuto della pagina.

Faremo un header di circa 250 pixel di altezza:

Inseriremo adesso un menu orizzontale sotto il nostro header, lo renderemo alto circa
100 pixel:
Creiamo anche un menu laterale per il layout.

Tiriamo le guide in modo tale da renderlo largo 200px.

L’altezza del contenuto principale è irrilevante al momento poichè varierà in base ai
contenuti della pagina.

Usiamo lo strumento rettangolo con angoli arrotondati per creare dei box che
riempiranno gli spazi che abbiamo definito con le guide, più un box grande per il nostro
contenuto.

Ho usato un raggio di 10 pixel per i box costruiti in questo esempio.

Disattiviamo la visibilità delle guide andando su: Vista -> Mostra -> Guide.
Adesso separeremo tutti questi box (ad esclusione dell’header) uno dall’altro
selezionando i layer che li contengono uno ad uno e spostandoli leggermente verso il
basso.

Dovremo necessariamente ridimensionare il layer contenente il box del menu laterale.

Per farlo selezioniamo il layer e premiamo CTRL+T. Questo farà apparire il box di
trasformazione libera.

Per ridimensionare trasciniamo uno degli angoli del box verso il centro dell’immagine
tenendo premuto SHIFT+CTRL sulla tastiera.

Adesso abbiamo una struttura base sulla quale lavorare.

Iniziamo il design vero e proprio!

Inizieremo dal menu orizzontale.

Diamo uno stile al box che rappresenta il menu aggiungendo una sfumatura dal menu
opzioni fusione del livello:
Creiamo un duplicato di questo livello (CTRL+J sulla tastier) e rasterizziamolo.

Con lo strumento selezione rettangolare, tagliamo il box a metà.

Andiamo nelle opzioni fusione e invertiamo la direzione del gradiente.

Giochiamo un po’ con l’opacità del livello per ottenere all’incirca questo effetto:
Uniamo questo livello a quello precedente (selezioniamoli entrambi nella palette e
premiamo CTRL+E) e aggiungiamo I seguenti stili livello nelle opzioni fusione:
Aggiungeremo adesso uno stile allo sfondo.

Scegliamo una bella sfumatura o un colore solido.

Io userò un grigio molto scuro per creare un forte contrasto con il rosa lucido del menu.
Aggiungiamo ora uno stile al livello del box dei contenuti principali.

Diamo un colore bianco al box e aggiungiamo un leggero bagliore interno di color nero
nelle opzioni fusione:
Ravvicinato:
Aggiungiamo ora uno stile al menu di sinistra.

La prima cosa che faremo è masterizzare il livello contenente il box del menu e
tagliarne un porzione in modo tale da poterne aggiustare l’altezza a piacimento.

Per farlo usiamo lo strumento di selezione rettangolare per selezionare le porzioni del
livello che vogliamo tagliare e spostare.
Aggiungiamo una sovrapposizione colore nelle opzioni fusione, un bel giallo post-it:
Aggiungiamo qualche contenuto pe capire un po’ in che direzione sta andando il nostro
design.

Iniziamo aggiungendo gli elementi del menu laterale e gli elementi del menu
orizzontale.

Ricordatevi sempre di usare font web-safe e di disattivare l’anti-alias di Photoshop

qualora abbiate intenzione di utilizzare link testuali standard al posto di immagini per i
vostri menu.

Questo vi servirà a capire come effettivamente apparirà il design una volta realizzatone
il codice.
Duplichiamo il menu laterale e spostiamo la copia sotto.

Sarà il nostro newsbox.

Aggiungiamo i conetnuti principali della pagina

Aggiungiamo ora un po’ di grafica per separare gli elementi del menu orizzontale e del
menu laterale.

Utilizzeremo una linea tratteggiata per il menu laterale (basta che scriviate: “- - - - - “) e
dei piccoli cerchi bianchi con una trasparenza del 50% per il menu orizzontale.

Giocate un po’ con i colori e le opacità per ottenere effetti diversi.

Adesso creiamo il nostro header.

Posizioniamo il logo sul lato sinistro e iniziamo a disegnare qualche forma con lo
strumento penna dal lato destro.

Aggiungiamo gradienti e stili simili o uguali a quelli utilizzati nel resto della nostra
homepage.

In questo esempio ho creato dei quadrati molto piccoli e li ho riempiti con una
sfumatura che usa gli stessi colori del menu orizzontale.
Questi quadrati vengono poi ripetuti per formare una barra che si espanderà per tutta la
dimensione dello schermo.

Ho anche creato una forma “ondosa” con lo strumento penna.

Ho duplicato questa forma e l’ho specchiata verticalmente per ottenere un effetto

interessante.

Sia le forme che i quadrati usano lo stesso gradiente. Una delle due forme ha un’opacità
del 50% circa.

E voilà!

Il nostro design è completato!