Come creare layout Web in Photoshop

Progettare un sito web può essere molto divertente ma impegnativo . Forse la parte più difficile del progetto è decidere come disporre ogni segmento del sito. Anche se questo può essere realizzato in molti editor web , che spesso non sono i migliori strumenti in questa fase di progettazione iniziale . Adobe Photoshop fornisce un modo più semplice e più efficiente per creare layout web perché permette di visualizzare il layout senza trattare con il codice HTML . Questo tutorial vi insegnerà a creare un layout web in Photoshop CS3 ; altre versioni di Photoshop dovrebbe essere simile . Cose che ti serviranno
Adobe Photoshop
Mostra più istruzioni
1

aprire un nuovo documento . Se si utilizza Adobe CS3 o superiore , Adobe ha fornito un preset per le pagine web che è di 640 x 480 pixel . Nella finestra di dialogo "Nuovo" , selezionare "Web " dal menu a discesa "Preset" . Se non si dispone di un preset web o il layout web è una dimensione diversa , immettere la dimensione della vostra pagina web in "Larghezza" e "Altezza" scatole .
2

Riempire il fondo con la colore di sfondo. Selezionare l'opzione " strumento Riempi . " Fare doppio clic sul " colore di primo piano " per aprire il " Selettore colore. " Selezionare la casella di controllo " Solo Web Colori " . Quindi , scegliere il livello di sfondo . Selezionare "OK ".
3

Inserire il banner . Create un nuovo livello . Selezionare " File> Inserisci ... " Passare alla vostra immagine del banner e fare clic su "OK". Posizionare il tuo banner , se lo desideri . Se non si dispone di un banner immagine, è possibile creare un posto per il tuo banner , come mostrato nel passaggio successivo .
4

Aggiungere i restanti segmenti del layout web . Create un nuovo livello per ogni parte della pagina web. Selezionate uno strumento forma dal menu Strumenti. Scegliere un colore di sfondo per il segmento . Disegnare il layout rimanente per il tuo sito web .
5

Affettare il layout web per prepararlo per il web . Selezionare la funzione " Slice" . Tracciare un riquadro intorno a ogni segmento .
6

Salva per il web . Selezionare " File > Salva per Web ". Premere il tasto " Controllo A" per selezionare tutte le fette . Poi , premere il tasto " Salva ". Seleziona "HTML e immagini" dal menu " Formato" a discesa. Assicurarsi che " Tutte le sezioni " è selezionato e salvare il layout in che cartella sito . Il layout web è ora possibile aggiungere il contenuto in un programma di editing web, come Dreamweaver .