May 27
Mentre Photoshop è stato progettato principalmente per modificare e migliorare le foto e creare grafica, è possibile utilizzare "strumento sezione" del programma e "Salva per Web e dispositivi" opzioni per creare pagine web da i file di immagine PSD. Utilizzare lo strumento fetta di tagliare (o "slice") il PSD in sezioni. Ogni sezione diventa un elemento web separato, ad esempio un pulsante o campo di testo. Photoshop posiziona ogni fetta nella propria tabella HTML. È quindi possibile aggiungere collegamenti ipertestuali o altri tag HTML per le varie sezioni ed esportare il PSD a una pagina web HTML.
1 Inizia una nuova immagine in Photoshop PSD con le dimensioni desiderate per la vostra pagina web, in questo modo: Fai clic su "File" sulla barra dei menu e scegliere "Nuovo" per visualizzare la finestra di dialogo Nuovo. Inserire la larghezza di pagina (in pixel) nel campo "Larghezza" e l'altezza (in pixel) nel campo "Altezza".
2 Tipo "96" nel campo "Risoluzione" e fare clic su "OK". Questo crea una tela bianca per la tua pagina web.
3 Creare la grafica di banner e pulsanti nella parte superiore della pagina. È possibile importare immagini esistenti e metterli dove si vuole o si utilizza la grafica di Photoshop e strumenti di testo per creare il layout e la bandiera.
4 Selezionare l'opzione "Strumento Slice" (quinto pulsante dall'alto nella barra degli strumenti). Se non appare attualmente lo strumento sezione, cliccare e tenere premuto il pulsante e scegliere "strumento sezione" dal fly-out.
5 Trascina il cursore del mouse intorno al primo pulsante o area nel banner in cui si desidera creare un collegamento. Photoshop crea una scatola, o "fetta" attorno all'oggetto e lo pone in una tabella. Quando si esporta la pagina, le fette vengono visualizzati come oggetti separati in singole tabelle HTML.
6 Fare clic con la fetta e scegliete "Modifica Opzioni sezione" dal menu a comparsa per aprire la finestra di dialogo Opzioni sezione. Utilizzare questa finestra di dialogo per definire le proprietà del pulsante. Ad esempio, digitare il link URL nel campo "URL". Inserire la pagina di destinazione del browser, i tag alternative, e così via. Fai clic su "OK".
7 Ripetere questi passaggi per la creazione di pulsanti e modificare le opzioni di sezione per ogni area che si desidera rendere cliccabile.
8 Utilizzare lo strumento sezione per definire un'area nella pagina in cui si desidera inserire una casella di testo. Fare clic con la fetta e scegliete "Modifica Opzioni sezione" dal menu a comparsa.
9 Fare clic su "Slice Type" a discesa e scegliere "No Image". Viene visualizzato il "testo visualizzato nella cella" campo. È possibile digitare il testo in questo campo o copiare e incollare da un word processor. Al termine, fai clic su "OK '.
10 Fare clic su "Slice Type" a discesa e scegliere "No Image". Viene visualizzato il "testo visualizzato nella cella" campo. È possibile digitare il testo in questo campo o copiare e incollare da un word processor. Al termine, fai clic su "OK '.
Nota: questo campo supporta la maggior parte dei tag HTML. Ad esempio, per fare alcuni dei corsivi di testo, è sufficiente posizionare il testo tra le "<i> il testo </ i>" tag. Utilizzare "<p>" per creare interruzioni di paragrafo, e così via.
Si noti inoltre che il testo in questa tabella non viene visualizzato all'interno di Photoshop --- non si può vedere fino a quando si esporta la pagina.
11 Continuare ad aggiungere e definire le fette di testo, immagini, grafica, e così via, fino al completamento del layout.
12 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. Utilizzare questa finestra di dialogo per controllare il colore di sfondo, la compressione delle immagini e la qualità, e così via.
13 Fare clic sul pulsante "Salva" per nome e esportare la pagina web.