Costruire un layout sito web è un compito impegnativo che richiede grafica designer anni da padroneggiare . Sia per i più esperti e inesperti , Photoshop di Adobe fornisce una serie di strumenti che gli aiuti nel processo di creazione di un layout di sito web . Prima di cominciare, si dovrebbe avere una buona idea di come volete che il vostro sito web per guardare . Disegnare alcuni campioni su carta prima di iniziare in modo che si dispone già di un solido punto di partenza . Cominciando con un logo già progettato anche accelerare la vostra creazione layout. Istruzioni
1

Creare un nuovo file in Photoshop facendo clic sul menu "File" e scegliere "Nuovo ". La dimensione dell'immagine determina la dimensione finale del tuo sito web , in modo da scegliere una larghezza che è appropriato per la maggior parte degli schermi . Una larghezza di 750 pixel farà in modo che il vostro sito è visibile da chiunque utilizzi una risoluzione dello schermo pari o superiore a 800 - by - 600 . Immettere un valore per l'altezza di circa 500 pixel . Questo può essere regolata successivamente . Premere il tasto " OK ".
2

design intestazione del tuo sito web , che è l'area che appare nella parte superiore della pagina web. Questa zona deve essere limitato a non più di 200 pixel in altezza. Includere il nome del tuo sito web e il logo in questo settore , così come alcuni elementi grafici o fotografie che mettono in risalto lo scopo del tuo sito web . Per esempio , il sito web layout di una società senza scopo di lucro di può comprendere fotografie di individui che hanno aiutato .
3

Creare una barra di navigazione sotto il colpo di testa che è di circa 50 pixel di altezza . Selezionare il " Tipo di testo " strumento dalla barra degli strumenti di sinistra , quindi fare clic sulla vostra immagine di digitare . Immettere i nomi delle diverse pagine principali del sito ( ad esempio "casa ", " Chi siamo ", " contatto ", " prodotti ", ecc ) .
4

fare una scatola sotto il tuo barra di navigazione per rappresentare l'area di testo sul vostro sito andrà . È possibile lasciare questo campo vuoto per ora , ma è necessario che l'area riservata in modo che non si aggiungono i disegni ad esso. L' area può essere largo quanto l'intestazione e barra di navigazione , o essere stretta per ospitare barre laterali sui .
5

design barre laterali di sinistra , destra o entrambi se hai lasciato spazio per loro . Queste barre laterali inizieranno sotto l'intestazione e andrà giù per tutta la lunghezza della pagina fino a quando il piè di pagina. La tua barra laterale possibile includere grafica o fotografie , o può essere un altro settore per il testo . Se si sta riservando le aree di testo , è possibile lasciare i campi in bianco . In caso contrario , iniziare a progettare la grafica che appariranno nelle vostre barre laterali .
6

Creare un piè di pagina nella parte inferiore dell'immagine . Il piè di pagina deve essere largo quanto l' intestazione , ma potrebbe essere il più alto o basso come volete. Non è necessario preoccuparsi di lasciare uno spazio adeguato tra l'intestazione e il piè di pagina per il testo come vostro disegno aumenterà e diminuirà per accogliere il testo più o meno automaticamente . Includere le informazioni di copyright nel vostro piè di pagina così come qualsiasi disclaimer legali che si desidera aggiungere .
7

Continuare a lavorare su tutti gli aspetti del layout sito web fino a quando si è soddisfatti con il suo look . Salvare il file facendo clic sul menu " File " e scegliendo "Salva ". Salvare l'immagine in formato Adobe Photoshop ( * . Psd) in modo da poter poi tornare e fare ulteriori modifiche , senza alcuna perdita di qualità .
8

Selezionare lo strumento " Slice" dalla barra degli strumenti in le selezioni di sinistra , e trascinare le varie aree della vostra immagine. Se si utilizza solo un colpo di testa , nell'area di testo e piè di pagina , fare tre selezioni intorno a queste tre aree . Se hai incluso barre laterali , creare sezioni aggiuntive intorno a queste aree . Trascinando una casella di selezione intorno a un'area con lo strumento sezione selezionata è tutto quello che serve per creare una sezione .
9

Fare clic su " File" e scegliere "Salva per Web ". Photoshop richiederà i nomi di file per ciascuna delle sezioni create , e genererà un'immagine separata per ciascuna delle fette . Le fette possono poi essere ricollegati per il layout del sito web utilizzando un programma di progettazione di siti web come FrontPage o Dreamweaver , oppure a mano utilizzando il codice HTML .