Come creare una mappa immagine con Photoshop
Quando clicchi su una parte di un'immagine di un sito web e il browser salta a un'altra pagina web, probabilmente una mappa immagine è responsabile di quell'azione. I designer possono scrivere codice HTML che crea punti cliccabili su qualsiasi immagine. Costruire mappe immagine a mano richiede tempo perché devi identificare le coordinate esatte di ogni hotspot. Con lo strumento Slice in Photoshop, disegni gli hotspot su un'immagine per generare automaticamente il codice HTML di cui hai bisogno.
Creare una mappa immagine
Passaggio 1
Avvia Photoshop e apri un'immagine che vuoi convertire in mappa immagine. Clicca e tieni premuto lo strumento "Ritaglio" per visualizzare un menu con altri strumenti. Clicca lo strumento "Slice" per selezionarlo.
Passaggio 2
Clicca un punto dentro l'immagine e trascina lo strumento Slice per disegnare un riquadro attorno alla parte dell'immagine che vuoi rendere cliccabile. Photoshop disegna "slice automatici" aggiuntivi attorno ad altre parti dell'immagine. Questi slice automatici assicurano che tutte le parti di un'immagine siano incluse in uno slice.
Passaggio 3
Fai clic destro dentro lo slice creato e seleziona "Opzioni slice" per aprire la finestra Opzioni slice. Digita l'URL che vuoi associare allo slice. Puoi anche sostituire il nome predefinito che Photoshop ha dato allo slice digitandone uno nuovo nella casella "Nome".
Passaggio 4
Clicca "OK" per chiudere la finestra Opzioni slice e tornare all'immagine. Clicca un altro punto e trascina lo strumento Slice per creare slice aggiuntivi secondo necessità.
Regolare gli slice della mappa immagine
Passaggio 1
Seleziona lo "Strumento selezione slice" dalla barra degli strumenti e clicca dentro uno slice che vuoi spostare.
Passaggio 2
Tieni premuto il tasto sinistro del mouse e trascina lo slice in una nuova posizione.
Passaggio 3
Porta il cursore su uno dei bordi dello slice e appare una linea con frecce su entrambe le estremità. Clicca quella linea, tieni premuto il tasto sinistro e trascina se devi ingrandire o rimpicciolire lo slice.
Salvare la mappa immagine
Passaggio 1
Clicca "File" poi "Salva per Web" per aprire la finestra Salva per Web.
Passaggio 2
Clicca "Predefinito" e seleziona una delle opzioni di tipo file che appaiono. Scelte includono GIF 128 Dithered, JPEG Alta qualità e PNG-24.
Passaggio 3
Clicca "Salva" per aprire una finestra che mostra i file e le cartelle del disco. Sfoglia fino alla cartella dove vuoi salvare i file della mappa immagine e digita un nome per la mappa nella casella Nome file.
Passaggio 4
Clicca il menu a discesa "Formato" e seleziona "HTML e immagini". Clicca "Salva" per salvare tutti i file nella cartella specificata.
Suggerimento
Photoshop salva ogni slice come immagine separata in una cartella immagini. Il programma salva anche un documento HTML con lo stesso nome digitato nella casella "Nome file". Se trovi quel file HTML in Esplora file e fai doppio clic, il browser apre e mostra la tua mappa immagine. Clicca parti diverse per navigare agli URL assegnati agli slice. Ad esempio, se hai diviso una mappa USA in stati creando uno slice per ogni stato, puoi cliccare uno stato per andare all'URL assegnato a quello slice.
Dai nomi significativi agli slice e sarà più facile identificarli se vorrai mai modificare il codice HTML generato da Photoshop. Ad esempio, se hai creato uno slice attorno allo stato dell'Iowa, potresti chiamarlo Iowa.
Probabilmente vorrai salvare le immagini della mappa nello stesso formato dell'immagine originale. Se è un JPEG, scegli una delle opzioni JPEG dal menu a discesa Predefinito nella finestra Salva per Web. Scegli "JPEG Bassa qualità", per esempio, e Photoshop genera immagini JPEG a bassa qualità. Più bassa la qualità, più veloce il caricamento nel browser.
Avvertenza
Questo articolo si applica ad Adobe Photoshop CC, versione 2014. Alcune informazioni possono variare in altre versioni.