Nella realizzazione di un sito web è molto importante la fase di rendering del design della pagina, che verrà successivamente impaginata e pubblicata in rete. In questo articolo imparerai come utilizzare Adobe Photoshop per disegnare un layout competente per un sito Web, sulla base del quale puoi successivamente creare layout più complessi.
È necessario
Programma Adobe Photoshop
Istruzioni
Passo 1
Crea un nuovo file in Photoshop (Ctrl + N) con dimensioni 1040x1400, dove 1400 è l'altezza. Attiva la visualizzazione dei righelli (Ctrl + R) e imposta i pixel come unità di misura nelle impostazioni del righello.
Passo 2
Inizia ad allungare le guide in modo che si adattino ai bordi delle caselle di layout. Allunga i bordi laterali in modo da lasciare 40 pixel ai bordi. Anche i bordi superiore e inferiore dovrebbero lasciare 40 pixel su ciascun lato ai bordi dello sfondo.
Passaggio 3
Quindi seleziona una guida che sia 200 px in basso dalla parte superiore dello sfondo per l'intestazione superiore.
Passaggio 4
Per formare le barre laterali a sinistra ea destra del layout, imposta le guide a 240 pixel dal bordo dello sfondo a sinistra e 800 a destra.
Passaggio 5
5px verso l'interno dalle barre laterali sinistra e destra e disegna altre due guide verticali. Quindi trascina altre due guide 245 px a sinistra e 795 px a destra.
Passaggio 6
Ora misura dal bordo dell'intestazione 30px e disegna una guida orizzontale per il menu orizzontale.
Passaggio 7
Seleziona l'area stretta del menu orizzontale che hai appena contrassegnato con una selezione rettangolare usando il tasto M. Seleziona lo strumento di riempimento e riempi l'area con un colore grigio chiaro neutro.
Passaggio 8
Seleziona lo strumento di riempimento e riempi l'area con un colore grigio chiaro neutro. Fare clic sul menu "Seleziona-Modifica-Comprimi", specificare un'opzione di 1 pixel e fare clic su "OK". Riempi l'area con una tonalità di grigio più chiara: avrai una cornice di menu.
Passaggio 9
Crea un nuovo livello e seleziona un'immagine adatta per l'icona o il logo del sito, quindi aprilo.
Passaggio 10
Inserisci un'immagine su un nuovo livello nell'intestazione, posizionandola sul bordo sinistro. A destra dell'immagine, scrivi il titolo testuale del sito utilizzando qualsiasi tipo di carattere.
Passaggio 11
Progetta i blocchi del tuo sito web con la stessa combinazione di colori dell'intestazione appena creata. Seleziona l'area della barra laterale sinistra ed esegui le stesse operazioni di riempimento a due colori su di essa come con il blocco del menu.
Passaggio 12
Fai lo stesso con il blocco di contenuto largo al centro. Copia il livello della barra laterale sinistra e posizionalo come barra laterale destra.
Passaggio 13
Aggiungi testo al tuo layout: scegli un carattere neutro e compila i titoli del menu, gli esempi di notizie, le foto, i tag e la sezione dei collegamenti.
Passaggio 14
Completa il layout creando un "piè di pagina" o un piè di pagina: scrivi lì i tuoi diritti d'autore e i tuoi contatti.
