Come convertire un’immagine PSD in formato HTML

Poniamo il caso di avere una immagine in formato PSD (Photoshop) e vogliamo convertirla in HTML per la pubblicazione sul web. La principale caratteristica del formato PSD è che esso è costituito da vari livelli composti da tantissimi puntini (pixel) che a loro volta formano l’immagine. Tale sistema di rappresentazione delle immagini è detta RASTER. Dovendo trasformare quindi questa immagine in contenuti fruibili su internet bisogna innanzitutto trasporre le varie sezioni di questo file nel linguaggio principe di programmazione internet: HTML. La trasposizione delle varie sezioni avverrà tramite il programma correlato di Photoshop che si chiama IMAGEREADY. Direttamente da Photoshop dal menu file passiamo l’immagine a Imageready per la sezionatura e il processo di “linkaggio” delle varie sezioni. Una volta in Imageready avremo la nostra bella immagine tutta da lavorare. Ciò che dobbiamo tenere ben presente è quello che vogliamo veicolare con questa immagine. Poniamo il caso che, avendo una mappa dell’Europa e cliccando su uno stato volessimo aprire la pagina corrispondente al portale “Turismo” di tale nazione. Il nostro primo passaggio è dividere l’immagine in corrispondenza dei confini delle nazioni, cosa che sembra complicata ma che non lo è. Nel menu di Imageready usiamo lo strumento “sezioni” che serve appunto a sezionare l’immagine. Nel nostro caso, seguendo accuratamente i confini delle nazioni vedremo crearsi delle linee blu in corrispondenza delle divisioni che andremo a creare. Queste linee creeranno a loro volta delle zone colorate di blu che corrisponderanno alle nazioni. Infine, queste zone verranno numerate dal programma progressivamente man mano che le creiamo. Fatto ciò, dobbiamo assegnare ad ogni nazione/sezione un link che permetta di reindirizzare il click dell’utilizzatore verso la pagina web corrispondente al portale turistico. Selezionando le sezioni singolarmente dobbiamo inserire nel pannello in basso l’URL, ovvero l’indirizzo, dei vari portali. Ad esempio per l’Italia dovremo inserire l’url: www.italia.it. Fatta questa operazione per tutte le nostre nazioni, non ci resta che generare i file per la pubblicazione sul web; file che saranno accompagnati dal codice HTML. Quindi selezioniamo FILE/SALVA OTTIMIZZATO e Imageready farà la conversione della nostra immagine. Andiamo a vedere cosa ha creato. Nella cartella avremo tutte le nostre immagini corrispondenti alle varie nazioni precedentemente da noi sezionate alle quali Imageready ha collegato un file in HTML con i vari riferimenti implementati, quindi tutti i collegamenti ai vari portali turistici e in generale l’architettura della pagina web. Se vogliamo essere dei perfezionisti possiamo aggiungere un passaggio a questa procedura. Imageready usa ancora un vecchio sistema per la creazione della pagina detto “a tabelle”. Senza dilungarmi in tecnicismi possiamo esportare questa pagina nel più moderno sistema “CSS”. Questo lo otterremo semplicemente selezionando, prima di salvare il tutto, dal menu FILE/OUTPUT SETTINGS i seguenti parametri:
preset: personalizzato
output sezioni: genera CSS, referenced: by ID.
Complimenti! Avete appena creato una pagina HTML da un file PSD!