Creare un layout per un sito web con photoshop (parte grafica)



In questo tutorial vedremo come creare un Layout di base molto semplice per un sito attraverso l’utilizzo di Photoshop.

Come prima cosa dobbiamo pensare alle dimensioni, dato che non tutti utilizzano la stessa risoluzione, quindi bisogna impostare il Layout in modo che venga visualizzato bene su tutte le risoluzioni.  Dunque come dimensione metteremo 1024x768px, però il contenuto dovrà stare dentro una dimensione minore intorno a 800x600px in modo tale che venga visualizzato da tutti.

1.  Come prima cosa dobbiamo aprire un nuovo documento File -> Nuovo e dare a larghezza il valore di 1024 e ad altezza il valore di 768.

20090915file-nuovo.

2.  Adesso prendiamo lo strumento rettangolo e partendo dall’angolo in basso a destra lo trasciniamo fino all’angolo in alto a sinistra in modo da riempire tutto il documento.

20090915sfondo

3.  Ora sempre con lo strumento Rettangolo andremo a creare un rettangolo dentro al quale si sviluperà il sito.

20090915contenuto-3

4.  Ora usando ancora lo strumento rettangolo creeremo l’header (la parte in alto)  il menù (che sarà appena sotto l’header) e il body (che racchiuderà i contenuti),  dando a ognuno un colore diverso in modo da poterlo ricnoscere.

20090915parti-2

5.  Adesso andremo a modificare le parti appena create. Per modificare le varie parti basterà entrare nelle proprietà di stile livello (facendo doppio click sul livello) di ognuna delle parti.Io come colori ho messo per l’Header #4c4b4b per il menù nelle proprietà di stile livello ho scelto sovrapposizione sfumatura e come colori ho messo #8ddc0c e #40b80a per il body ho scelto il bianco.

20090915parti-finite

6.  Ora per finire non ci resta che inserire il contenuto, i collegamenti alle pagine nel menù il titolo nell’header e il contenuto nel body.

20090915finito

Ora non resta che creare il nostro template html utilizzando eventualmente i fogli di stile CSS.

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!

Pinterest