Adobe Photoshop è uno strumento ideale per la creazione di un layout di sito Web ed è lo strumento standard di settore per la creazione di immagini bitmap e di editing di foto. Creazione di un layout in Adobe Photoshop consente al progettista la possibilità di apportare rapide modifiche senza dover modificare alcun codice. Una volta sono finito il look and feel del sito, Adobe Photoshop, lo rende molto semplice per affettare e ottimizzare le immagini per il web.

Istruzioni

1

Pianificare il sito su carta. Avvicinarsi al computer con un piano chiaro e la conoscenza di ciò che il sito sarà necessario soddisfare le aspettative del progetto. Trovare idee per colori e stili da cui attingere. Il maggiore pianificazione e organizzazione che si verifica in questa fase, il design meno difficile scelte una volta lavorerà in Adobe Photoshop.

2

Aprire Adobe Photoshop CS3 e avviare un nuovo documento. Impostare altezza del documento a 800 pixel e la larghezza per 600 pixel. Questo è un formato standard per la progettazione di layout web e farà in modo che la pagina possa essere visualizzata da una varietà di risoluzioni dello schermo.

3

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

4

Costruire il framework della pagina utilizzando le guide. I limiti verticali creerà i parametri per la larghezza del sito Web e le guide orizzontali verranno spazio gli elementi del sito. Definire le aree per un'intestazione, barra di navigazione e l'area del contenuto. Lasciare un margine uniforme, solitamente intorno 10 pixel, tra gli elementi da aggiungere spazio estetico al sito.

5

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

6

Rendere un'immagine di sfondo. Un modello semplice in un quadrato di pixel x 100 x 100 pixel può essere piastrellato ed è più veloce da caricare rispetto un'immagine più grande.

7

Affettare il documento in pezzi da codificare nel sito Web. Utilizzare lo strumento "Sezione" per definire le aree che verranno salvate come singoli file di immagine.

8

Prendere una fetta per essere salvati utilizzando "Fetta Select". Selezionare File > Salva per Web e dispositivi ottimizzare l'immagine per il web. L'affettato immagini e lo stile della pagina comprenderà l'aspetto grafico del sito Web.

Consigli & Avvertenze

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