Come aggiungere link a aree di una immagine con Photoshop

Come aggiungere collegamenti ipertestuali a aree selezionate di una immagine con Photoshop, come condividere tali oggetti HTML e come pubblicarli nel web

In un post precedente abbiamo visto come dividere una immagine con Photoshop. Facciamo un ulteriore passo in avanti nell'utilizzo della stessa funzionalità e mostriamo come linkare delle aree di una immagine.

In altri termini, in una singola foto, possono essere aggiunti dei collegamenti ipertestuali, che possono aprire pagine web. Ogni link sarà associato a una data area della foto che potrà essere selezionata con l'aiuto del cursore.

Con questi strumenti di Photoshop, l'immagine iniziale sarà suddivisa in sezioni, che saranno salvate come immagini singole in una apposita cartella. Sarà poi creato un file HTML che, se aperto con un browser, mostrerà l'intera immagine originale con i link che sono stati inseriti.

Cliccando sulle aree selezionate verrà aperta un'altra scheda del browser, con la pagina web collegata all'area in oggetto. La cartella delle immagini e il file HTML potranno essere condivisi e il file HTML avrà gli stessi collegamenti e mostrerà la stessa immagine anche se aperto con un altro computer.

Una immagine così suddivisa e così mappata con vari link potrà anche essere inserita in una pagina web senza dover utilizzare degli strumenti terzi. Non si tratta di una procedura troppo complessa ed è più semplice vederla che spiegarla. Per questa ragione ho pubblicato sul mio Canale Youtube il video tutorial su come aggiungere i link.

In Photoshop si va su File -> Apri e si seleziona l'immagine a cui aggiungere gli hyperlink. Nella colonna di sinistra si sceglie lo Strumento Sezione e poi, con il mouse, si traccia un rettangolo su un'area della foto.

Sempre nella colonna di sinistra, si cambia strumento e si clicca su quello denominato Selezione Sezione, che sta subito sotto a precedente. Si va poi sotto il menù e si clicca sulla icona Opzioni Sezione sulla destra.

Si aprirà una finestra di configurazione in cui incollare l'indirizzo del collegamento in URL. In Destinazione è opportuno digitare la stringa _blank per aprire il collegamento in un'altra scheda. Si va su OK.

Si ripete la stessa operazione per le altre aree della foto da linkare. Da ricordarsi che l'area va selezionata con lo strumento Sezione e il link va invece aggiunto con lo strumento Selezione Sezioni.

Per salvare la foto con i collegamenti, si va su File -> Salva per Web... che aprirà una finestra come questa.

In alto si sceglie il formato del file (consigliato JPEG) e la sua qualità. Si va su Salva che aprirà Esplora File.

Si sceglie la cartella di destinazione e si dà un nome al file. In formato, si sceglie HTML e immagini e Tutte le sezioni, quindi si va su Salva. Dopo un rapido processo verrà creato un file HTML e una cartella Immagini.

Facendo un doppio click sul file HTML, verrà aperta l'immagine nel browser. Passandoci sopra con il mouse potremo cliccare sulle aree selezionate per aprire le pagine collegate in un'altra scheda.

Nella cartella Immagini ci saranno le immagini delle sezioni create e delle altre parti mancanti della foto. Per condividere immagine con link, dovremo condividere il file HTML insieme alla cartella Immagini.

Per pubblicare questo oggetto HTML in una pagina web, va aperto il file HTML con un editor tipo Notepad++.

Gli indirizzi delle immagini sono inseriti con il loro percorso nella cartella immagini cioè del tipo src="immagini/nomefile_02.jpg" che vanno sostituiti con gli URL diretti delle foto caricate su Blogger o nella cartella Media di Wordpress. Il codice da copiare e incollare in una pagina web è quello che va dalla riga <table id=... fino alla sua chiusura </table>. Ci sono anche dei commenti colorati di verde prima e dopo queste due righe per facilitare la selezione e la copia.