Photoshop per il Web Design: cosa è cambiato

progetto-web-photoshop
Tempo stimato di lettura: 3 minuti, 24 secondi
Pubblicato il 29 gennaio 2016

Photoshop negli ultimi mesi ha eseguito un importante aggiornamento introducendo molte novità nel mondo del Web Design. Ma non solo! Da oggi è più potente anche nella manipolazione 3D e nell’esportazione dei file, ha una nuova interfaccia grafica, risorse condivise per accedere rapidamente ai file della libreria e molto altro.

Insomma, se ancora non hai aggiornato ti aspetta un bellissimo update, sopratutto se sei un web designer! 🙂

Le tavole da disegno

La prima novità potrà sembrarti l’interfaccia grafica, ma ti assicuro che quello è niente in confronto a ciò che sto per mostrarti. La vera novità sono le Tavole da Disegno: finalmente da oggi anche su Photoshop è possibile riunire in un unico file PSD un intero progetto web (e non).

Nelle vecchie versioni, per presentare varianti disponibili oppure disegnare le versioni mobile o semplicemente le pagine interne di un sito, eri costretto a creare file diversi. Da oggi non più. Vediamo come funzionano.

Per cominciare, crea un nuovo documento su Photoshop da File -> Nuovo e fra le Tipologie di documento seleziona Web. Seleziona poi un formato per la dimensione della tavola da disegno (io ho usato Comune) e conferma.

Sembra tutto normale, ma in realtà hai creato la tua prima tavola che, magari, ospiterà la versione Desktop del sito/app che stai progettando. Come si riconosce che è una tavola? Controlla bene il pannello dei livelli e guarda l’etichetta in alto a sinistra: la tavola si presenta come un gruppo e con un doppio click potrai modificarne anche il nome.

tavola-disegno-photoshop

Come vedi, nell’esempio sotto ho modificato il nome da Tavola di disegno 1 in WebHouse Desktop e ho inserito lo screenshot del sito WebHouse.

webhouse-desktop-tavola

Benissimo, adesso viene il bello! Fai di nuovo click sul livello della Tavola di disegno e noterai che intorno alla tavola compariranno 4 simboli +, con i quali potrai crearne altre, di formati diversi e, se vuoi, organizzarle come se fosse un organigramma o flow-chart.

aggiungi-tavola-photoshop

Ovvio che il più grande vantaggio è riunire tutto in unico file di progetto PSD, ma pensa all’enorme risparmio di tempo che avrai dato che puoi riusare tutti i livelli in modo semplice e veloce! Nell’esempio sotto ho creato un organigramma di un ipotetico sito composto da più pagine.

tavole-photoshop

Fantastico vero? C’è di più. Adesso aggiungerò nuove tavole anche per le versioni mobile, precisamente per iPhone e iPad, quindi dovrò modificare le dimensioni delle singole tavole.

tavole-responsive-photoshop

Per modificare le dimensioni, seleziona la tavola creata e in alto nella barra dedicata scegli il formato che desideri: Photoshop include già una serie di formati pronti all’uso oppure inserisci le dimensioni personalizzate. Per esempio ho selezionato iPhone 6 e iPad Retina: dai pulsanti presenti sulla barra puoi invertire anche l’orientamento landscape o portrait.

Sposta le tavole dove vuoi, prendendole anche con l’etichetta, e organizzale come preferisci! Ecco come si presenta il progetto web che ho appena realizzato.

progetto-web-photoshop

Ok, adesso hai capito come funziona! Per creare le tavole puoi anche cliccare sul nuovo pulsante nella barra a sinistra e disegnarla delle dimensioni che vuoi.

simbolo-photoshop

Le librerie di Photoshop

Altra grandissima funzionalità sono le Librerie di Photoshop. Ora hai la possibilità di riprendere file vettoriali e non con un semplice click dall’apposito pannello. I file che inserisci sono memorizzati e resi disponibili direttamente da qui, per velocizzare l’inserimento in futuro.

Il bello è che puoi creare più librerie, così puoi sfruttarle per i tuoi clienti avendo tutto il loro assets a disposizione: loghi, immagini, sfondi, elementi in vettoriale, eccetera.

librerie-photoshop

Anche questa è una novità che adoro!

Design Space (anteprima)

Un’altra bellissima funzionalità è il Design Space. Una nuova modalità di lavoro semplificata con tutte le impostazioni, i livelli e gli effetti per vedere un’anteprima in modo ancora più immediato. E il bello è che da qui puoi fare anche l’Esportazione dei livelli, selezionando le versioni @2x, se necessarie.

esportazione-design-space

Se hai bisogno solo dell’esportazione, trovi tutto su File->Esporta->Esporta come… e avrai molte impostazioni di scelta grazie al nuovo pannello che è stato completamente ridisegnato.

Come vedi Photoshop adesso è una suite completa anche per il web design. Ti consiglio di aggiornarlo se non lo hai ancora fatto, non te ne pentirai! Ci vediamo al prossimo tutorial!

Shares