Come creare una mappa immagine utilizzando Photoshop
Quando si fa clic su una parte dell'immagine di un sito Web e il browser passa a una pagina Web diversa, è probabile che una mappa di immagini sia responsabile di tale azione. I progettisti di siti possono scrivere codice HTML che crea punti caldi cliccabili su qualsiasi immagine. La creazione manuale di mappe di immagini richiede tempo perché è necessario identificare le coordinate esatte di ciascun punto caldo. Con lo strumento Taglia in Photoshop, disegna punti caldi su un'immagine per generare automaticamente il codice HTML di cui hai bisogno.
Crea mappa immagine
Passaggio 1
Avvia Photoshop e apri un'immagine che desideri convertire in una mappa di immagini. Fare clic e tenere premuto lo strumento "Ritaglia" per visualizzare un menu contenente altri strumenti. Fare clic sullo strumento "Slice" per selezionarlo.
Passaggio 2
Fare clic su un punto all'interno dell'immagine e trascinare lo strumento Taglia per disegnare un rettangolo di selezione attorno alla parte dell'immagine che si desidera rendere selezionabile. Photoshop disegna ulteriori "fette automatiche" attorno ad altre parti dell'immagine. Queste sezioni automatiche assicurano che tutte le parti di un'immagine siano incluse in una sezione.
Passaggio 3
Fai clic con il pulsante destro del mouse all'interno della sezione che hai creato e seleziona "Modifica opzioni sezione" per aprire la finestra Opzioni sezione. Digita l'URL che desideri associare alla sezione. Puoi anche sostituire il nome predefinito che Photoshop ha assegnato alla sezione digitandone uno nuovo nella casella di testo "Nome".
Passaggio 4
Fare clic su "OK" per chiudere la finestra Opzioni sezione e tornare all'immagine. Fai clic su un altro punto all'interno dell'immagine e trascina lo strumento Taglia per creare fette aggiuntive secondo necessità.
Regola le sezioni della mappa immagine
Passaggio 1
Seleziona lo "Strumento di selezione fetta" dalla barra degli strumenti e fai clic all'interno di una fetta che desideri spostare.
Passaggio 2
Tieni premuto il pulsante sinistro del mouse e trascina la sezione in una nuova posizione.
Passaggio 3
Tieni il cursore del mouse su uno dei bordi della fetta e apparirà una linea con le frecce su ciascuna estremità. Fare clic su quella linea, tenere premuto il tasto sinistro del mouse e trascinare il mouse se è necessario ingrandire o rimpicciolire la fetta.
Salva mappa immagine
Passaggio 1
Fai clic su "File" seguito da "Salva per Web" per aprire la finestra Salva per Web.
Passaggio 2
Fare clic su "Predefinito" e selezionare una delle opzioni del tipo di file visualizzate. Le scelte includono GIF 128 con retinatura, JPEG High e PNG-24.
Passaggio 3
Fare clic su "Salva" per aprire una finestra che mostra i file e le cartelle del disco rigido. Passare alla cartella in cui si desidera salvare i file della mappa immagine e digitare un nome per la mappa immagine nella casella di testo Nome file.
Passaggio 4
Fai clic sul menu a discesa "Formato" e seleziona "HTML e immagini". Fai clic su "Salva" per salvare tutti i file nella cartella specificata.
Suggerimento
Photoshop salva ogni sezione come immagine separata in una cartella immagini. Il programma salva anche un documento HTML che ha lo stesso nome del nome digitato nella casella di testo "Nome file". Se trovi quel file HTML in Esplora file e fai doppio clic sul file, il tuo browser si apre e mostra la tua mappa immagine. Fai clic su parti diverse della mappa dell'immagine per accedere agli URL assegnati alle sezioni. Ad esempio, se hai diviso una mappa degli Stati Uniti in stati creando una sezione per ogni stato, puoi fare clic su uno stato per accedere all'URL assegnato alla sezione di quello stato.
Assegna alle fette nomi significativi e troverai più facile identificarle se desideri modificare il codice HTML generato da Photoshop. Ad esempio, se hai creato una fetta che circonda lo stato dell'Iowa, potresti nominare la fetta Iowa.
Probabilmente vorrai salvare le immagini della mappa immagine nello stesso formato dell'immagine originale. Ad esempio, se si tratta di un JPEG, scegli una delle opzioni JPEG dal menu a discesa Predefinito nella finestra Salva per Web. Scegli "JPEG Low", ad esempio, e Photoshop genererà immagini JPEG di bassa qualità. Minore è la qualità di un'immagine, più velocemente viene caricata in un browser Web.
Avviso
Questo articolo è applicabile ad Adobe Photoshop CC, versione 2014. Alcune informazioni possono variare in altre versioni del software.