Convertire psd(o altra immagine) in css e div HTML

Come webdesigner stai lavorando con Photoshop e ora volete convertire il vostro file PSD ( jpg, png o qualunque altro formato che photoshop è in grado di leggere) in un CSS valido  e in un documento (X) HTML.

Se utilizzate la normale procedura andando da file/ salva per il web, tutto viene convertito in immagine ma la cosa peggiore è che viene generata la pagina attraverso tabelle annidate. Chi ha esperienze con le tabelle in html, sa benissimo quali sono i problemi a cui si va incontro, per esempio, basta una piccola modifica al testo inserito all’interno di una cella per poi non riuscire più a trovare una giusta configurazione.

Esiste anche una modalità che permette invece di trasformare tutto in div.

Per prima cosa aprite il file con photoshop e modificatelo con Image ready andando dal menu file/edit in imge Ready.

Successivamente tagliate il vostro documento usando la strument “slice”, questo vi permetterà di definire tutte le diverse parti della vostra pagina web (per esempio, l’intestazione, il menu ecc) ottenedno, quindi, numerose linee e quadrati blu numerati.

Ora è necessario i parametri di output:andare nel menu file/ output setting e selezionare i seguenti parametri:

preset: custom

slice output: generate CSS, refercenced: by ID

Ora che abbiamo definito le opzioni di output cliccare su OK. (questo convalida le impostazioni, ma non creare il file ancora). Quindi è necessario salvare il risultato, utilizzando il comando “Salva ottimizzato” (all’interno del menu File).

In questo modo Imageready avrà creato la cartella “immagini” contenente tutte le immagini a tagliate precedentemente e un file HTML contenente che è nel codice sorgente del codice CSS.

Se volete vedere, copiare, modificare i css o il codice sorgente è sufficiente aprire il file nel vostro browser preferito e visualizzare il codice sorgente.

Naturalmente si potrebbe aver bisogno di modificarlo e ottimizzare alcune o parte di essa.

Se conoscete altri meccanismi, altri metodi o trovate dei difetti in questo metodo fatemi sapere.

2 commenti su “Convertire psd(o altra immagine) in css e div HTML”

Lascia un commento