Creare un layout per un sito internet

Dopo aver imparato diverse
cose leggendo i [Devi essere iscritto e connesso per vedere questo link] 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!

Giocate pure un po’ con il PSD incluso nel download e usate pure questo
template per i vostri design!