Convertire file PSD

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.

File PSD

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

  1. 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.
    Strumento selezione sezioni

  2. Selezione logo (opzionale)

    Nel caso in cui l’immagine contenga un logo, è bene sezionare l’immagine estraendolo.
    sezione logo

  3. 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.sezione PSD header

  4. 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.
    navigation

  5. 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
    sezione psd background

  6. 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.body del PSD

  7. 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.Selezione di sezioni

  8. 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, Brackets

  9. 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.Ricostruisci in CSS e HTML

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.

<picture>
  <source srcset="img_sun.jpg" media="(max-width: 600px)">
  <source srcset="img_sun.jpg" media="(max-width: 1500px)">
  <source srcset="virtual-agency.jpg">
  <img src="img_virtual.jpg" alt="Web Agency">
</picture>

No comment yet, add your voice below!


Add a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *