Come utilizzare un PSD a fette su un sito web

April 16

Come utilizzare un PSD a fette su un sito web


I browser Web non possono caricare e visualizzare il formato PSD nativo di Photoshop. È possibile, tuttavia, utilizzare strumento sezione di Photoshop per affettare il PSD in file immagine separati, e poi esportare il PSD in HTML, che è il linguaggio di markup maggior parte dei progettisti usano per creare pagine Web. In primo luogo, si fetta il PSD, e quindi si utilizza Photoshop opzione Salva per dispositivi web e di assegnare collegamenti alle fette e esportare il file in formato HTML.

istruzione

1 Aprire il PSD si desidera convertire a una pagina Web in Photoshop: Fare clic sul menu "File" e selezionare "Apri". Verrà visualizzata la finestra di dialogo Apri. Passare alla PSD, selezionarlo e quindi fare clic sul pulsante "Apri".

2 Selezionare l'opzione "Strumento Slice" nel pannello Strumenti. Lo strumento Slice è la quinta opzione nel pannello Strumenti. Per impostazione predefinita, Photoshop visualizza lo strumento Ritaglia in quinta posizione. Per passare allo strumento Slice, cliccare e tenere premuto lo strumento Ritaglia per visualizzare il menu volare fuori, e quindi scegliere "Slice Tool."

3 Tenere premuto il pulsante del mouse e trascinare fuori la tua prima fetta. Ad esempio, è possibile creare sezioni per le voci pagina Web banner, barra laterale, piè di pagina e di menu. Photoshop crea immagini separate per ogni sezione e li inserisce nelle celle della tabella HTML.

4 Tagliate il PSD, se lo desideri.

5 Fare clic sul menu "File" e scegliere "Salva per Web e dispositivi." Questo apre la finestra di dialogo Salva per Web e dispositivi. Da qui è possibile apportare modifiche estese al layout HTML. Per controllare il formato di file per una particolare fetta, ad esempio, selezionare la sezione e scegliere il tipo di file, come PNG o JPEG, dal secondo menu a discesa nella colonna di destra.

È inoltre possibile aggiungere link ai tuoi fette da questa finestra di dialogo: Fare doppio clic sulla sezione per aprire la finestra di dialogo Opzioni sezione, e digitare il link nel campo URL.

6 Apportare le modifiche desiderate nella Salva per Web e dispositivi, e quindi fare clic su "Salva". Questo apre Salva ottimizzato come finestra di dialogo.

7 Fai clic sul menu a discesa "Formato" e scegliere "HTML e immagini."

8 Fai clic sul menu a discesa "fette" e scegliere "Tutte le fette."

9 Fare clic sul pulsante "Salva". Photoshop esporta le fette e crea una pagina HTML contenente i link alle fette. È possibile utilizzare la pagina HTML come è, o copiare e incollare il codice HTML dalla pagina a un'altra pagina Web HTML.

Consigli e avvertenze

  • Quando si salva il file HTML, Photoshop salva tutte le fette in una cartella denominata "immagini". Quando si carica la pagina HTML a un server Web, assicurarsi che anche caricare la cartella di immagini. In caso contrario, la pagina non viene visualizzata correttamente.