Come creare un modello Web in Photoshop

January 27

Come creare un modello Web in Photoshop


Un modello Web è un layout di base pagina Web o un contenitore --- --- si può riutilizzare per creare più pagine. Il modello fornisce la struttura di base per il tuo sito, consentendo di mantenere un tema costante e il layout in tutto il sito, senza dover ricreare ogni pagina. Anche se Photoshop non è tecnicamente un programma di progettazione di pagine Web, è possibile utilizzarlo per creare modelli Web da "affettare" l'immagine PSD in varie sezioni e poi esportare il PSD a una pagina Web HTML. È quindi possibile aprire il file di modello HTML in Dreamweaver o qualche altro programma di Web Design e utilizzarlo per creare le pagine per il tuo sito.

istruzione

1 Inizia un nuovo documento in Photoshop. Dategli le dimensioni che si desidera utilizzare per le pagine Web, in questo modo: Fai clic su "File" sulla barra dei menu e scegliere "Nuovo" per aprire la finestra di dialogo Nuovo. Inserire la larghezza (in pixel) nella "larghezza" Field e l'altezza (in pixel) nel campo "Altezza". Fai clic su "OK".

2 Creare il banner per la vostra pagina web. Il banner, naturalmente, è il grafico o immagine che visualizza nella parte superiore della pagina. E 'di solito costituita da un logo aziendale e alcuni altri elementi grafici relativi ad un prodotto o servizio. Si sia possibile inserire un'immagine esistente o utilizzare gli strumenti di disegno e di testo di Photoshop per creare il banner.

3 Creare i pulsanti per la vostra pagina web. Questi diventeranno i collegamenti, o "hot spot", che prendono gli utenti del sito a diverse pagine all'interno del sito. In entrambi i casi inserire immagini dei pulsanti esistenti e metterli dove vuoi nel modello o utilizzare gli strumenti di disegno e di testo di Photoshop per creare i pulsanti.

4 Selezionare l'opzione "Strumento Slice" (quinto pulsante dall'alto nella barra degli strumenti). Se non si è utilizzato lo strumento sezione prima, questo pulsante è probabilmente impostata su un altro strumento. Fare clic e tenere premuto il pulsante, e poi scegliere "strumento sezione" dal fly-out.

5 Trascinare lo strumento fetta intorno al primo pulsante o la zona nel modello in cui si desidera creare un collegamento. Questo crea una casella "fetta" attorno all'oggetto. Photoshop posiziona la casella in una cella di una tabella che diventerà una tabella HTML separato quando si esporta il documento in formato HTML.

6 Fare clic sul nuovo fetta e scegliere "Modifica Opzioni sezione" dal menu a comparsa. Ciò apre la finestra di dialogo Opzioni sezione.

7 Digitare l'URL che si desidera questo pulsante per creare un collegamento a nel campo "URL". È anche possibile inserire altre informazioni per il pulsante, come ad esempio la pagina del browser di destinazione e tag alternativi. Se si desidera modificare le dimensioni e la posizione della fetta, farlo con le opzioni nella sezione "Dimensioni" della finestra di dialogo. Fai clic su "OK".

8 Ripetere i passaggi precedenti per la creazione e la modifica di fette opzioni di sezione per ogni pulsante nel modello.

9 Fai clic su "File" sulla barra dei menu e scegliere "Salva per Web e dispositivi." Questo apre la finestra di dialogo Salva per Web e dispositivi. Da qui è possibile modificare diversi aspetti del tuo modello, come il colore di sfondo, la compressione delle immagini e la qualità, dimensioni del documento e così via. Queste opzioni sono ben etichettati e parlano da soli. (Potete vedere in anteprima il codice HTML per questo modello facendo clic sul pulsante "Anteprima".)

10 Fare clic sul pulsante "Salva". Nome e salvare il file HTML. È stato creato il modello Web. Ora è possibile aprirlo in un editor di pagine Web e aggiungere i tuoi contenuti.

Consigli e avvertenze

  • Photoshop crea una nuova immagine per ogni sezione si creano e li salva in una sottodirectory denominata "Immagini". Quando caricare le pagine in un server Web, assicurarsi di includere la cartella Immagini.
  • Se si dispone di una buona comprensione di come il layout delle pagine Web in tabelle, è possibile utilizzare questo metodo per sviluppare alcuni modelli piuttosto sofisticate, tra cui caselle di testo. Per creare una casella di testo (o un tavolo), è sufficiente impostare il "Slice Type" discesa in Opzioni sezione a "Nessuna immagine". Questo crea una tabella vuota.