Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

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

Maggio 2nd, 2008 by Giovanni Caputo

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.

Questo post è stato postato venerdì, Maggio 2nd, 2008 at 12:39 nella categoria Siti Web, tutorial. Tags:, , , , .
Puoi seguire tutti i commenti di questo articolo attraverso RSS 2.0 feed. Puoi lasciare un commento, o trackback dal nostro sito.

2 responses about “Convertire psd(o altra immagine) in css e div HTML”

  1. Valentina Music 92 said:

    Ti ringrazio,molto utile!Proprio quello che cercavo. 😀

  2. pina said:

    ciao ma per fare questo imge rady dove dovrei andare ?

Lascia un commento

You must be loggati to post a comment.