Come costruire un modello di pagina Web da zero - dummies

Lo strumento standard tra le agenzie digitali e i reparti interni per la creazione di grafica per siti Web è Adobe Photoshop. Sebbene Fireworks sia ottimizzato e costruito appositamente per produrre file sorgente di grafica web, non è stato preso in considerazione, probabilmente a causa del massiccio sforzo di riqualificazione che avrebbe richiesto la realizzazione di interi reparti. Per impostare un nuovo modello di web-comp:

1. Avvia Photoshop.

2. Scegli File → Nuovo.

   Nella finestra di dialogo che appare, inserisci una dimensione della tela di 1, 200 pixel di larghezza di 1, 000 pixel di altezza. La risoluzione deve essere impostata su 72 dpi ( pixel per pollice, in realtà). La modalità colore dovrebbe essere di colore RGB. Il colore di sfondo può essere bianco. Clicca OK.

3. Dal menu di Photoshop, selezionare Preferenze → Generale.

   Sulla sinistra, selezionare l'opzione Unità e righelli. Quindi, nell'area della finestra principale, per Righelli, seleziona "pixel" dal menu a discesa. Clicca OK.

   Utilizzerai le guide. Per fare ciò, devi prima accendere i Righelli dal menu Visualizza, come mostrato nel Passaggio 4.

4. Seleziona Visualizza → Righelli dal menu.

   Dopo aver visto i righelli, fai clic sul righello sul lato sinistro e trascina una guida verticale e rilasciala sul contrassegno da 100 pixel.

   

5. Ripristina il marker 0, 0.

   Nell'angolo in alto a sinistra del documento, all'intersezione dei due righelli c'è un piccolo quadrato con linee tratteggiate. Fai clic sul quadratino e trascina la tua guida sul segno da 100 pixel, ma fai attenzione a rimanere nella parte superiore della pagina. Quello che stai cercando di fare è mantenere 0 nella parte superiore della pagina (dove è ora), ma impostare il tuo attuale contrassegno guida da 100 pixel su 0. Se lo fai correttamente, vedrai l'aggiornamento della numerazione nel tuo righello superiore.

6. Imposta il secondo indicatore guida.

   Fai nuovamente clic sul righello sinistro e trascina un'altra guida. Trascina questa nuova guida sulla pagina e rilasciala sul marchio da 1, 000 pixel. Se hai eseguito correttamente i passaggi 1-6, dovresti avere un margine di 100 pixel su entrambi i lati delle due guide. Salva il documento.

7. Trasforma lo sfondo in un livello.

   Nel pannello Livelli, dovresti avere solo un livello chiamato "Sfondo" in corsivo. Fare doppio clic su di esso per trasformarlo in un livello che è in grado di trasparenza e di essere spostato in set di livelli che verranno creati. Nella finestra visualizzata, lascia il nome come Livello 0 per ora e fai clic su OK.

8. Crea quattro set di livelli.

   Nella parte inferiore del pannello Livelli vedrai l'icona di una cartella. Fare clic quattro volte per creare quattro distinti set di livelli (cartelle che possono contenere livelli).Sono un ottimo modo per aiutarti a organizzarti. Ecco i passaggi:

   1. Fai doppio clic sul testo di gruppo 1 del set di livelli più in basso e rinominalo in BACKGROUND in maiuscolo.

      Usa tutti i maiuscoli per i nomi delle cartelle e in minuscolo per i nomi dei livelli per aiutarti a distinguerli.

   2. Fai clic e trascina il livello Livello 0 nel set di livelli BACKGROUND.

   3. Fare doppio clic sul testo del gruppo 2 e rinominarlo PIEDE.

   4. Rinomina gli altri due set di livelli CONTENT e NAVIGATION.

   Questi set di livelli sono solo il tuo punto di partenza e potresti averne bisogno di meno o più. Salva il tuo modello.

   

Ora hai una tela bianca pronta per le tue ispirazioni creative. Mentre crei nuovi livelli per lavorare su parti diverse del tuo comp, chiamali subito e assicurati che vengano trascinati nel set di livelli appropriato. Non solo ciò ti aiuterà a rimanere più organizzato, qualsiasi altro designer che raccolga il tuo comp per apportare modifiche - così come lo sviluppatore che deve usarlo per costruire la versione HTML di esso - sarà più in grado di dare un senso.