Creare un'immagine mappata

In questo articolo vedremo come realizzare un'immagine mappata.

Nota: l'articolo è stato realizzato utilizzando la versione di Paint Shop Pro Photo X2, tuttavia le operazioni descritte possono essere eseguite anche su diverse versioni di Paint Shop Pro.

Un'immagine mappata non è altro che un'immagine suddivisa in diverse aree, ognuna delle quali costituisce un'area mappata (hotspot), ovvero un'area collegata ad un link.
Al passaggio del mouse su una delle aree, il cursore assume la forma di una mano per indicare che è possibile fare clic su tale area e aprire il link designato.

L'aggiunta di "mappe d'immagini" ad un sito web può essere molto utile nel caso volessimo realizzare una cartina geografica, una piantina di una casa, oppure per la creazione si un menù graficamente bello e complesso.

Utilizzando immagini mappate la progettazione grafica risulterà più libera ed accurata (dal momento che i link sono parte integrante della grafica), tuttavia dobbiamo anche tener conto del tempo di caricamento piuttosto lungo che potrebbe richiedere il download di una grafica molto complessa.

Da ricordare, infine, che i link contenuti in un'immagine mappata non sono facilmente individuabili dai motori di ricerca, per cui è sempre consigliabile accompagnare un'immagine mappata ad un menù testuale.

Creare l'immagine da mappare

Iniziamo creando l'immagine alla quale applicheremo la mappatura. In questo articolo realizzeremo un menù di navigazione verticale con cinque link puntati su cinque diverse pagine del nostro sito web.

Per prima cosa, creiamo un nuovo file, mediante la combianzione di tasti CTRL+N, oppure cliccando su:

File -> Nuovo

Nella finestra di dialogo che apparirà ho impostato le seguenti dimensioni ed ho spuntato la voce trasparente: La risoluzione è stata impostata sul valore 100, in quanto l'immagine sarà destinata alla visualizzazione sul web, quindi non deve richiedere molta memoria altrimenti rallenterebbe il suo caricamento nella visualizzazione del sito web.

Rinominiamo il primo livello generato automaticamente col nome Sfondo, e coloriamolo utilizzando lo strumento Riempimento (presente nella barra degli Strumenti).
Per selezionare il colore, andiamo nella tavolozza dei materiali e clicchiamo sul riquadro del colore di sfondo e riempimento. A questo punto si aprirà una finestra di dialogo, in cui dovremo selezionare il colore da applicare come mostrato nell'immagine seguente:

Una volta selezionato, premiamo Ok per dare conferma. Adesso clicchiamo una sola volta sulla tela.

Dopo aver riempito il livello, creerò una scritta verticale che andrò a posizionare sul lato sinistro dell'immagine.
Per aggiungere del testo è sufficiente cliccare sullo strumento Testo e nella finestra di dialogo digitare il testo che desideriamo.

Prima di premere il tasto Applica per dare conferma, selezioniamo il colore che desideriamo dare al testo; per fare questo è necessario recarsi nella tavolozza dei materiali (nel mio caso ho scelto un beige chiarissimo per sfondo e riempimento, ed un marrone scuro come colore di primo piano e pennellata).

• <<
• 1
• 2
• 3
• 4
• >>