Ultimamente mi arrivano molte richieste su come passare dal template costruito con Photoshop, Gimp, Fireworks ecc. al codice HTML CSS.
Esistono molti tutorial in italiano e soprattutto in inglese, dove è spiegato in modo esaustivo come eseguire queste operazioni.
Ho voluto stilare una lista per te, cercando di prenderne i migliori. Se manca qualche tutorial, soprattutto in italiano, segnalamelo pure nei commenti 
Tutorial in Italiano
Tutte Le Fasi di Analisi e Progettazione di Un Sito Web – Your Inspiration Web
- Come capire le esigenze del cliente al primo incontro?
- Come calcolare costi e tempi di consegna di un progetto web evitando di scrivere cifre insensate?
- Come evitare futuri ripensamenti da parte del cliente?
- Come sviluppare e organizzare la struttura di un sito web?
- Come trovare l’ispirazione e disegnare il layout di un sito web?
- Come presentare la bozza grafica al cliente?
- Come realizzare le pagine interne dopo l’accettazione della bozza?
- Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) (parte 2)
- Come indicizzare un sito senza essere degli esperti SEO? (parte 1) (parte 2)
- Come assicurarsi di non aver commesso errori prima di lanciare il sito online?
Da Photoshop al sito XHTML/CSS – HTML.it
Da photoshop al codice HTML CSS
MakingSEO coded, Template CSS Gratuito con Consigli sulla Conversione PSD-to-HTML – PV. M Garage
Realizzazione Template Photoshop (in inglese)
Da Photoshop al Codice HTML CSS
WaterColored Portfolio Coded, guida per realizzare un semplice layout (X)HTML/CSS – P.V.M Garage
Realizzazione Template Photoshop
Da Photoshop al Codice HTML CSS
DesignSchool Coded, guida per realizzare un semplice layout (X)HTML/CSS – P.V.M Garage
Da photoshop al codice HTML CSS
Tutorial in Inglese
How to Code a Grunge Web Design from Scratch – Six Revisions
Realizzazione template photoshop
Da photoshop al codice HTML CSS
From PSD to HTML, Building a Set of Website Designs Step by Step – Net Tuts
Da Photoshop al codice HTML CSS
How to Convert a PSD to XHTML – Net Tuts
Da Photoshop al codice HTML CSS (video tutorial)
Converting a Photoshop Mockup – CSS Tricks
Da Photoshop al codice HTML CSS (video tutorial)
Design a Minimal and Modern Portfolio Layout with Photoshop – Six Revisions
Realizzazione Template Photoshop
Da photoshop al codice HTML CSS
Encoding a Photoshop Mockup into XHTML & CSS – Spoon Graphics
Realizzazione Template Photoshop
Da Photoshop al Codice HTML CSS
How to Convert a Photoshop Mockup to XHTML/CSS – Line25
Realizzazione Template Photoshop
Dal Template al Codice HTML CSS
Coding a Band Website Created in Photoshop – Six Revisions
Realizzazione Template Photoshop
Dal Template al Codice HTML CSS
How to Code up a Web Design from PSD to HTML
Realizzazione Template Photoshop
Dal Template al Codice HTML CSS
Coding a Clean and Professional Web Design
Realizzazione Template Photoshop
Dal Template al Codice HTML CSS
Code a Modern Design Studio from PSD to HTML
Dal Template al Codice HTML CSS
PSD/HTML Conversion: Code a Clean Business Website Design
Template Photoshop
Dal template al codice HTML CSS
Design and Code a Slick Website From Scratch
Template Photoshop
Dal template al codice HTML CSS
Designing a highly-professional website, from the sketch to the code
Template Photoshop + Codice HTML CSS
How to create a professional and clean web layout (with PSD-to-HTML conversion)
Template Photoshop + Codice HTML CSS
Create a lovely textured web design from Photoshop to HTML/CSS
Template Photoshop + Codice HTML CSS
Questa lista verrà aggiornata man mano che troverò nuovi tutorial interessanti in giro per il web, quindi ti consiglio di abbonarti gratuitamente ai feed RSS per non perderti neanche un aggiornamento.
HTML5 Please – Come Usare Tutte le Proprietà HTML5 e CSS3 | Antonio Ghidara | ADV solution on 
fedeweb on 
Enea Moro on 
alessio.... on 
Corrado on 
22 ottobre 2009 at 14:49
Hai fatto davvero un’ottima raccolta ed un ottimo lavoro, c’è sempre da imparare a guardare come gli altri scrivano CSS e ci sono sempre nuove tecniche che possono sfuggire e che magari si imparano e si dimenticano.
Complimenti anche da parte di Marco!
Usefull stuff!
p.s ti farò sapere se sono capace a rifarli da capo
23 ottobre 2009 at 13:58
Bellissimi template, da cui trarrò sicuramente ispirazione.
23 ottobre 2009 at 16:52
@Emanuela: si vero, non si smette mai di imparare. Felice di esservi d’aiuto!
@Ennio: oltre a prendere ispirazione potrai anche imparare nuove tecniche per realizzare template.
Inoltre la lista non è finita come ho detto nell’articolo..ci saranno aggiunte nelle prossime settimane
28 ottobre 2009 at 00:07
sicuramente ottimizzerò la grafica! spero sia oK!
30 ottobre 2009 at 10:50
Si se c’è qualche dubbio non esitare a chiedermi nei commenti
16 luglio 2011 at 20:51
Risorse davvero molto interessanti!