Converti PSD in CSS

Un mockup di Photoshop deve essere trasformato in un’interfaccia per browser quando un designer consegna a uno sviluppatore web un file .psd a livelli. Il risultato non è un altro formato immagine: è HTML stilizzato con un foglio di stile .css, oltre alle risorse immagine o vettoriali esportate quando necessario.

Che cos’è il formato PSD

PSD è il formato nativo di Adobe Photoshop per immagini raster a livelli. Può memorizzare livelli pixel, testo modificabile, forme vettoriali, maschere, livelli di regolazione, guide, effetti di livello, oggetti avanzati e altri dati di modifica in un unico documento.

Fotografi, illustratori, graphic designer, UI designer e agenzie web utilizzano i file PSD per composizioni modificabili, mockup di interfacce, grafiche pubblicitarie e progetti di stampa. Un PSD può mostrare una pagina completa o una schermata di un’applicazione, ma non definisce la struttura HTML, il significato semantico, l’interazione, l’accessibilità o il comportamento responsive.

Che cos’è il formato CSS

CSS è un formato di foglio di stile in testo semplice che controlla la presentazione e il layout di HTML e SVG. Le sue proprietà includono color, font-family, font-size, margin, padding, display, grid-template-columns, bordi, ombre, trasformazioni e regole media responsive.

CSS rende il design modificabile in un sito web o in un’applicazione, consente a testo e layout di adattarsi a schermi diversi e separa la presentazione dal contenuto HTML. Un foglio di stile non può memorizzare i livelli di Photoshop, la cronologia delle regolazioni, il testo PSD modificabile o dati pixel arbitrari.

Come convertire PSD in CSS

Non esiste una conversione completa e senza perdita da PSD a CSS, perché PSD descrive una composizione visiva modificabile, mentre CSS descrive regole applicate agli elementi del documento. La conversione pratica consiste nel passaggio del design e nell’implementazione front-end.

1. Apri il file in Adobe Photoshop e organizza i livelli in gruppi significativi, come header, navigazione, card e footer. Rinomina i livelli in modo che identifichino gli elementi dell’interfaccia corrispondenti.
2. Esamina dimensioni, spaziature, colori, tipografia, opacità ed effetti con le guide e i righelli di Photoshop, il pannello Carattere e il campionatore di colori. Utilizza un sistema di misurazione coerente basato su pixel o rem.
3. Per i livelli di testo, forma e immagine compatibili, utilizza il comando Copy CSS del menu contestuale del livello. Incolla le dichiarazioni in un file come styles.css, quindi rimuovi selettori e proprietà che non corrispondono al markup effettivo.
4. Crea elementi HTML semantici che rappresentino il design, quindi collegali al foglio di stile con classi o altri selettori appropriati. Sostituisci le coordinate della tela di Photoshop con Flexbox, CSS Grid, il normale flusso o un altro modello di layout.
5. Esporta le risorse che CSS non può riprodurre direttamente. Utilizza File → Export → Export As per le fotografie in formato .jpg, per le immagini raster che richiedono trasparenza in formato .png e per le grafiche vettoriali semplici adatte in formato .svg. Fai riferimento a esse con <img> o background-image, a seconda dei casi.
6. Testa l’implementazione nei browser alle dimensioni di viewport richieste. Confronta tipografia, ritorno a capo delle righe, spaziature, ritaglio delle immagini ed effetti visivi con il PSD, quindi aggiungi regole responsive invece di forzare una sola tela fissa.

Adobe Photoshop è l’opzione desktop più diretta perché legge i dati PSD nativi e fornisce l’esportazione delle risorse e la copia del CSS. Photopea è un’alternativa affidabile basata su browser per lavori occasionali: apre i file PSD, espone le proprietà dei livelli e può copiare il CSS per i livelli supportati. Richiede comunque HTML creato manualmente, lavoro sul layout, esportazione delle risorse e test responsive.

Gli strumenti di ispezione e handoff del design, come Avocode, possono mostrare misure dei livelli, colori, tipografia e frammenti CSS, ma le funzionalità di importazione ed esportazione PSD variano in base al prodotto e all’abbonamento. Verifica il supporto PSD attuale prima di fare affidamento su uno di questi strumenti. I convertitori online generici “PSD to CSS” di solito generano solo dichiarazioni di base o frammenti con posizione fissa; non caricare file di design riservati su un servizio sconosciuto.

Limiti di qualità e compatibilità

Il CSS copiato da Photoshop spesso rappresenta una tela fissa con posizioni assolute. Può corrispondere a una schermata, ma non funzionare quando la viewport si restringe, il testo cambia lunghezza, il contenuto aumenta o gli utenti incrementano la dimensione del carattere. Ricostruisci il layout con HTML semantico, Flexbox o Grid, unità relative e media query.

Gli stili dei livelli, i metodi di fusione, le maschere di ritaglio, i filtri avanzati, i livelli di regolazione e le ombre complesse potrebbero non avere un equivalente CSS diretto. Quando è pratico, approssimali con gradienti, ombre, filtri, pseudo-elementi e proprietà di fusione; in caso contrario, esporta il risultato interessato come risorsa raster o vettoriale.

La tipografia nei browser dipende dalla disponibilità di un font web-safe, di un webfont con licenza o di @font-face. Un font mancante o sostituito modifica il ritorno a capo delle righe e può alterare l’intero layout. Inoltre, CSS non può conservare la cronologia modificabile dei livelli di Photoshop, quindi conserva il file .psd originale come file sorgente.