Mappare una immagine con Photoshop

La mappatura delle immagini per un web designer e’ un’azione quotidiana.

Quindi iniziamo subito a rinfrescare la nostra memoria per gli strumenti da usare in Photoshop per la mattura delle immagini.

Apriamo la nostra foto su PS.

Adesso selezioniamo sulla barre degli strumenti di Photoshop lo strumento sezione

Una volta selezionato lo strumeto sezione, selezioniamo l’area della foto che dobbiamo mappare.

Andiamo dentro l’area  bordata e clicchiamo il tasto destro del mouse, si apre un menu’ e selezioniamo modifica opzioni sezioni… e compiliamo il form che ci si presenta.

Una volta completato il form, dobbiamo salvare il documento. Ricordiamoci di salvare per dispositivi web, in formato PNG-24 e nelle opzioni di salvataggio scegliere Html e immagini

Una volta effettuato il salvataggio, andiamo nella nostra directory e vedremo che sara’ presente un file .html e una cartella immagini (images), contenente tutte le parti dell’ immagine che abbiamo mappato.

Concentriamoci, solo per adesso, sul file .html. Apriamolo con un editor di testo qualsiasi o con Dreamweaver. Saremo di fronte a un codice di questo genere:

Senza titolo-1




//questo e' la sezione mappata da noi, chiamata per comodita' prova_mappatura

A questo punto abbiamo la nostra immagine mappata in codice Html, bisogna inserire un header e un footer e con un file css avremo una propria pagina web. L’unica cosa che manca e’ il link di arrivo quando si clicca sulla porzione di immagine mappata. Ecco il codice:

Prima

r.it/photoshop/mappare-una-immagine-con-photoshop/immagini/prova_mappatura.jpg" alt="" width="261" height="108" />

Fatto questo, se lanciamo il nostro file, vedremo che nella parte mappata il cursore del mouse cambia forma e cliccandoci sopra ci inrong>.

Hai provato il nostro sistema? Ne conosci altri per mappare un’immagine? Segnalaceli!