PSD o documento di Photoshop è un formato di file specifico per immagini e grafica creata all'interno dell'applicazione di Adobe Photoshop. Photoshop viene spesso utilizzato da Web Designer per creare mock-up di progetti di sito. Una volta che un disegno è completato, il modello PSD viene applicato al sito utilizzando HTML e CSS. CSS o Cascading Style Sheets, contengono codice che dettano lo stile generale di un sito Web. Spesso è compito dello sviluppatore Web per convertire il modello PSD in CSS e HTML per visualizzare correttamente il design del sito sul Web.

Istruzioni

1

Aprire il file PSD in Photoshop.

2

Fare clic sull'icona "occhio" di ogni livello nella finestra livelli ad eccezione dello sfondo per rendere visibile solo lo sfondo. Scegliere "Save for Web & Devices" e salvarlo come un file JPG.

3

Aprire un nuovo file nel blocco note e immettere il seguente codice CSS per lo sfondo:

corpo () {

Priorità bassa: URL('mybackground.jpg');

}

Sostituire "mybackground.jpg" con il nome della tua immagine di sfondo.

4

Selezionare "Analisi" e "Strumento righello" dal menu principale di Photoshop e utilizzatela per annotare le dimensioni delle diverse parti della pagina Web, ad esempio intestazioni, piè di pagina, contenuto principale e barre laterali. Annotare anche l'allineamento e i colori di ogni elemento.

5

Definire le diverse parti del layout Web in CSS utilizzando le informazioni raccolte nel passaggio quattro. Ad esempio, il CSS per una barra laterale sinistra colorata grigia, 300 pixel in larghezza è definita come:

Sidebar () {

float: left;

Larghezza: 900px;

Altezza: 300px;

colore di sfondo: #ccc;

}

Questo completo per tutte le altre parti come ad esempio l'intestazione, il contenuto e il piè di pagina.

6

Determinare gli stili di carattere utilizzati nel modello PSD. Fare doppio clic sul livello di testo nella finestra layer. La barra degli strumenti testo visualizzata mostra il tipo di carattere utilizzato e la dimensione del carattere.

7

Aggiungere gli stili di carattere nel tuo CSS. Ad esempio, se Arial grassetto con una dimensione pari a 20px viene utilizzato per le intestazioni, digitare il seguente codice CSS:

H1 {

font-family: Arial;

dimensione del carattere: 20px;

colore: nero;

font-weight: bold;

}

8

Salvare il file CSS.

9

Aprire un nuovo file nel blocco note e creare file HTML. Aggiungi il tuo file CSS utilizzando il seguente codice:

< head >

< link href="style.css" rel = "stylesheet" type = "text/css" >

< / head >

Sostituire "Style. css" con il nome del vostro file CSS.

10

Digitare in tutti i contenuti per il corpo utilizzando le diverse classi e selettori definito nel file CSS. Per esempio:

< corpo >

< div id = "header" >< il mio sito h1 > < / h1 >< / div >

< div id = "container" >

< div id = "maincontent" > Inserisci contenuto qui < / div >

< div id = "barra laterale" > contenuto Sidebar < / div >

< div >

< fatto id = "footer" > contenuto piè di pagina < / div >

< / body >

11

Salvare il file HTML nella stessa cartella dove si trova il file CSS.

12

Mostra il tuo sito in un browser e confrontarlo con il modello PSD. Apportare le modifiche necessarie per rendere i due identici.