Come convertire un Template PSD in HTML e CSS – Parte 1 – Header e Menu

Come convertire un Template PSD in HTML e CSS - Header e Menu

Come convertire un Template PSD in HTML e CSS – Header e Menu: Photoshop può essere uno strumento utile per creare la bozza per un sito web, ma una volta creato l’aspetto grafico, il passo successivo è quello di convertirlo in HTML e CSS.

Questo passaggio, può essere un po’ complicato inizialmente, ma una volta capito come prendere gli elementi di Photoshop ed utilizzarli nel nostro editor HTML diventa molto più semplice.

Quindi è semplicemente una questione di abitudine, una volta presa la mano, riuscirete a convertire facilmente un template PSD in una vera e propria pagina HTML.

In questo articolo partiremo con la creazione della struttura di base della pagina HTML, poi andremo a creare l’header con logo e menù.

Per il video utilizzo Dreamweaver per la creazione della pagina HTML e del file CSS, ma potete utilizzare l’editor che più preferite.

Alternativa automatica – PSD To Web

Esiste un’alternativa che ci permette di generare automaticamente il file HTML della pagina web a partire dal nostro template PSD.

Questa alternativa si chiama PSDToWeb, basterà collegarsi al sito web, caricare il file PSD, aspettare la conversione e scaricare il file ZIP che contiene la pagina HTML, il file CSS e i file PNG con le immagini.

Questo strumento ha ancora alcuni difetti tra cui:

  • Non è possibile usare template che contengono maschere o stili (vanno rasterizzati prima)
  • I testi vengono convertiti in PNG
  • Alcuni elementi grafici non vengono convertiti correttamente

Essendo ancora in versione beta, sicuramente ci sarà spazio per ulteriori miglioramenti, quindi lo considero un progetto davvero interessante, ma al momento soprattutto per template complessi ancora poco adatto.

Come convertire un Template PSD in HTML e CSS – Header e Menu

Quindi l’unico metodo per ottenere un file HTML da un template PSD resta quello di crearlo manualmente.

Fortunatamente Photoshop ci viene molto in aiuto, infatti ci permette di esportare gli attributi CSS necessari per visualizzare l’elemento cosi come lo vediamo nella pagina.

È importante ricordare che su Photoshop tutte le misure sono basate sulla grandezza della pagina, quindi se vogliamo che le dimensioni siano responsive dobbiamo andare ad adattare le misure.

Per creare il template potete leggere il precedente articolo su come creare un template per un sito web con Photoshop.

Ho anche creato una playlist su Youtube che contiene il precedente video, quello di questo articolo e il futuro (o i futuri) video per completare la guida.

author avatar
Claudio Masci
Sono innanzitutto un appassionato di informatica e tecnologia in generale. Lavoro in ambito informatico da circa 16 anni, spaziando in diversi campi, andando dalla programmazione web, allo sviluppo di software, dalla grafica alla modellazione 3d ed al video editing, ho sempre voluto approfondire ogni aspetto e questo mi ha permesso di lavorare in diversi ambiti informatici.