I file PSD e i file .ai (Adobe Illustrator) sono tra i più utilizzati nel mondo del lavoro per comporre grafiche a livelli e / o vettoriali.
In pochi sanno che è possibile convertire questi formati in HTML e CSS. Per farlo, è possibile usufruire dei software online gratuiti, come AnyConv, oppure apprendere come creare dei file ordinati che potranno essere utilizzati per completare un sito o un e-commerce.
Convertire un file PSD in HTML
Sebbene sia molto più veloce utilizzare dei software gratuiti, l’utilizzo di una tecnica manuale permette di generare dei fogli di stile e un HTML perfetto.
Sarà dunque possibile inserire anche indicazioni per generare una grafica responsive.
Ma qual’è il vero vantaggio di iniziare un lavoro su Photoshop e salvarlo in PSD?
Sicuramente le evoluzioni grafiche di uno strumento professionale come Photoshop riescono a realizzare composizioni grafiche con una resa superiore rispetto a quello del semplice CSS e HTML.
Per questo motivo la tecnica della conversione da PSD a HTML è sicuramente consigliata per tutti coloro che devono creare un sito o effettuare un restilyng grafico.
Tempo medio richiesto: 3 ore.
Convertire un file PSD in HTML
- Suddividere l’immagini in sezioni con lo strumento
Il modo migliore per convertire un PSD è dividerlo in sezioni riconoscibili come tag HTML. Per farlo è necessario utilizzare lo strumento Sezione (Slicing) per poter ottenere il giusto numero di elementi.
- Selezione logo (opzionale)
Nel caso in cui l’immagine contenga un logo, è bene sezionare l’immagine estraendolo.
- Selezione header (opzionale)
L’header rappresenta la sezione che contiene (solitamente) il menu del sito e il logo. Non tutte le immagini richiedono una sezione del genere.
- Menu di navigazione (opzionale)
Seleziona il menu di navigazione e sezionalo rispetto l’header. Molte immagini non possiedono un menu di navigazione ma è presente del testo all’interno di un riquadro. La logica di selezione è identica.
- Seziona background
L’immagine di background o la colorazione può essere sezionata per essere riportata in HTML. Molto spesso, se il background è un colore con un’unica tonalità o una trama che si ripete sarà possibile operare una semplificazione dell’inserimento tramite CSS
- Sezionare il body del PSD
Si tratta dell’operazione principale. E’ possibile sezionare elementi all’interno del body per rendere più precisa la seconda parte del lavoro. Per rendere il lavoro facile da identificare si consiglia di creare delle cartelle indentate che riprendano la forma della parte selezionata, compresi i sotto insiemi.
- Esportare le sezioni
Una volta completata la selezione delle sezioni bisogna completare l’esportazione andando su File > Esporta > Salva per web e selezionare le parti da esportare selettivamente. E’ possibile esportare le immagini singolarmente, una per volta o tutte insieme.
- Installa Brackets
Backts è un editor pensato per semplificare i passaggi per generare un HTML proveniente da un file PSD. Lo strumento da la possibilità di aggiornare il tempo reale il lavoro di inserimento, gestendo HTML e CSS insieme. Questa soluzione è la migliore, sebbene ne esistano di più veloci,
- Ricrea in HTML il file PSD
Utilizza le sezioni ordinate e le immagini per ricostruire in HTML le sezioni. Per semplificare il lavoro, è possibile iniziare da un layout HTML da riempire, come nell’immagine di questa sezione.
Creare una grafica HTML responsive
Da questo punto di vista valgono le stesse regole dei normali file HTML: si cerca di preferire un inserimento in fogli di stile le indicazioni relative alla capacità responsive dei tag, come indicato nell’esempio successivo e nelle guide.
