Adobe Photoshop è uno strumento ideale per la creazione di un layout del sito ed è lo strumento standard del settore per l'editing di foto e la creazione di immagini bitmap. Creazione di un layout in Adobe Photoshop permette al progettista la possibilità di apportare modifiche rapide senza la necessità di regolare qualsiasi codice. Una volta che il look and feel del sito sono finiti, Adobe Photoshop rende molto semplice da tagliare e ottimizzare le immagini per l'utilizzo web.

istruzione

1 Pianificare il sito su carta. Avvicinarsi al computer con un piano chiaro e la conoscenza di ciò che il sito avrà bisogno di soddisfare le aspettative di progetto. Trovare idee per i colori e gli stili a cui attingere. La maggiore pianificazione e l'organizzazione che si verifica in questa fase, le scelte progettuali meno difficili saranno volta in Adobe Photoshop.

2 Aprite Adobe Photoshop CS3 e iniziare un nuovo documento. Impostare l'altezza del documento di 800 pixel e la larghezza di 600 pixel. Si tratta di un formato standard per la progettazione di layout web e farà in modo che la pagina può essere vista da una varietà di risoluzioni di schermo.

3 Impostare la risoluzione del documento a 72 pixel per pollice (PPI). Assicurarsi che la modalità di colore del documento è impostata su RGB. Accendere le unità di misura visualizzate sul righello per pixel per misurazioni accurate.

4 Costruire il quadro della pagina utilizzando le guide. I limiti verticali creeranno i parametri per la larghezza del sito web e le guide orizzontali volontà distanziare gli elementi del sito. Definire le aree per un colpo di testa, barra di navigazione e l'area dei contenuti. Lasciare un margine consistente, di solito circa 10 pixel, tra gli elementi per aggiungere spazio estetico al sito.

5 Aggiungere le immagini e il testo che comprenderà lo stile della pagina. Per le immagini complesse, come ad esempio l'intestazione del sito, la progettazione di un prima immagine in un altro file e incollarlo nella posizione desiderata nel file di layout. Tenere tutti gli elementi di layout su livelli separati per garantire la facilità di montaggio. Nome ogni strato dopo l'elemento corrispondente.

6 Fare un'immagine di sfondo. Un modello semplice in un 100 pixel quadrati x 100 pixel può essere piastrellato ed è più veloce a caricare di una immagine ingrandita.

7 Tagliate il documento in pezzi da codificare nel sito web. Utilizzare lo strumento "fetta" per definire le aree che verranno salvati come file immagine individuali.

8 Scegliere una fetta di essere salvato con "selezione sezioni". Selezionare File> Salva per Web e dispositivi per ottimizzare l'immagine per il web. Le immagini a fette e lo stile della pagina comprenderanno il look and feel del sito web.

Consigli e avvertenze

• Coding, sia in Adobe Dreamweaver o un editor di testo, sarà necessario per rendere il sito completamente funzionale una volta che è caricato di un host web. Fare riferimento al file della guida di Adobe Photshop di risorse aggiuntive.