Sebbene Photoshop sia principalmente un programma per effetti di immagine e modifica, è anche un ottimo strumento per progettare l’aspetto delle pagine Web. Con l’uso dei suoi strumenti incorporati, Photoshop può essere facilmente utilizzato per creare layout dall’aspetto professionale che possono poi essere trasferiti a Dreamweaver per l’effettivo lavoro di codice. Una volta che il lavoro di progettazione effettivo è stato svolto in Photoshop, scoprirai che rendere la pagina Web una realtà con Dreamweaver non è poi così difficile.
Progetta la pagina con Photoshop
1
Apri Photoshop, fai clic sul menu “File” e seleziona “Nuovo”. Scegli “pixel” come unità di misura e poi digita la larghezza e l’altezza desiderate per la tua pagina web. Per la massima compatibilità con l’utente finale, dovresti scegliere una larghezza inferiore a 1100 pixel. Lascia lo sfondo bianco, imposta la risoluzione su “72” e assicurati che la modalità colore sia impostata su “Colore RGB”. Fai clic su “OK”.
2
Fare clic sullo strumento “Forme” nella barra degli strumenti e selezionare il tipo di forma desiderato per il layout. Una volta selezionato, fai clic e trascina sul documento per creare la tua forma. Ripetere l’operazione secondo necessità con forme diverse per creare il layout della pagina Web. Per cambiare il colore o lo stile di una forma dopo averla creata, fare doppio clic sulla forma nella tavolozza “Livelli” e apportare le modifiche desiderate.
3
Aggiungere il testo desiderato al layout della pagina Web con lo strumento “Testo” nella barra degli strumenti. A meno che tu non stia creando un logo, dovresti sempre usare un carattere standard che sia molto facile da vedere, come Verdana, Georgia o Times New Roman (solo per citarne alcuni). Una volta che hai tutti i livelli desiderati per la tua pagina Web, fai doppio clic sui livelli uno alla volta per rinominarli. Questo ti aiuterà a ricordare a cosa serve ogni livello.
Trasferisci il disegno in Dreamweaver
1
Fare doppio clic su ogni forma e livello di testo per cui è stato abilitato un colore specifico e fare clic sul campione di colore per visualizzare il codice HEX per il colore. Avrai bisogno di questi codici quando trasferirai il tuo progetto in Dreamweaver. Al termine, salva la pagina nel formato Photoshop predefinito (PSD) e quindi salva una copia JPEG. Il JPEG verrà utilizzato come immagine di riferimento e puoi utilizzare il PSD se desideri apportare modifiche.
2
Apri Dreamweaver e crea un nuovo documento HTML. Vai alla scheda “Inserisci” e inserisci una nuova tabella o DIV e imposta gli attributi dell’elemento in modo che corrispondano a quelli utilizzati nel layout di Photoshop (ad esempio, larghezza / altezza e colore di sfondo). Mentre fai riferimento all’immagine JPEG del layout della tua pagina Web di Photoshop, digita il testo necessario nei punti appropriati e allinea i vari elementi in modo che corrispondano al design di Photoshop.
3
Torna all’immagine JPEG del tuo progetto e usa lo strumento di ritaglio in Photoshop per ritagliare la parte del logo dell’immagine. Salvalo nella cartella in cui hai salvato il file HTML. Di nuovo in Dreamweaver, apri la vista Progettazione e fai clic nel punto in cui desideri inserire il logo. Aprire la scheda “Inserisci” e fare clic su “Immagine” per inserire il logo nella pagina Web. La pagina progettata da Photoshop / Dreamweaver è ora pronta per l’uso.