Il Galateo di Photoshop per Web Designer

Penso tu abbia già sentito parlare di Photoshop Etiquette, un documento online uscito nel 2011, ideato e curato da Dan Rose, che spiega le regole base che ogni Web Designer dovrebbe seguire per usare al meglio photoshop.

Ci sono state, e ci sono ancora, diverse opinioni discordanti riguardo l’uso di Photoshop per il web design. Alcuni pensano sia fondamentale, altri pensano sia superfluo. Personalmente credo che ognuno dovrebbe usare lo strumento con cui si trova meglio.

Fatta questa premessa andiamo a vedere quali sono le regole da seguire per un corretto utilizzo di Photoshop durante la progettazione di un sito web. Ho pensato di fare un piccolo miscuglio tra i miei metodi e quelli citati nella guida di Dan Rose, scegliendo quelli secondo me più importanti.

Creazione dell’area di lavoro

È fondamentale personalizzare la propria area di lavoro in modo da avere subito tutti gli strumenti a portata di mano quando s’inizia un nuovo progetto. Crearla è semplicissimo, basta andare su “Finestra” e inserire tutte le opzioni di cui abbiamo bisogno. Non sto qua a dirti quali siano necessarie e quali no, anche in questo sono convinta che ognuno debba scegliere in base alle proprie esigenze e capacità. Inutile inserire tremila strumenti e usarne solo due.

Posso però dirti quali sono per me i fondamentali:

  • Navigatore
  • Livelli/Tracciati
  • Info
  • Colore/Campioni
  • Carattere/Paragrafo
  • Storia
  • Pennelli

Una volta posizionati gli strumenti devi andare su “Finestra > Area di lavoro > Nuova area di lavoro”. Quindi denominare lo spazio di lavoro (es. Web Design).

Ecco il mio:

photoshop-workstation

Nuovo Documento

Apriamo “File > Nuovo” (Ctrl/Cmd + N) per creare un nuovo documento.

Photoshop Etiquette consiglia di non creare file PSD per ogni pagina ma un solo grande file. Effettivamente se andiamo a pensare all’usabilità di un sito web sappiamo che alcuni elementi andranno ripetuti, come l’header, il menu, la sidebar, ecc… Inoltre eviteremo di creare ulteriore confusione.

pagine-photoshop

Dato che stiamo realizzando un sito Web, scegliamo Web come modello predefinito. Io solitamente scelgo una dimensione pari a 1280×1024, che posso sempre modificare in altezza con ‘dimensione quadro’. Tutto il resto lo lascio invariato eccetto ‘profilo colore’ nelle opzioni avanzate, che cambio in “Non gestire colore in questo documento”. In questo modo non si subiranno variazioni di colore RGB nei file.

nuovo-documento-photoshop

Guide, Griglie e Righelli

Una volta creato il documento ricordati d’impostare i righelli sui pixel. Se non l’hai già fatto attiva i righelli (Ctrl/Cmd + R), Quindi tasto destro sopra il righello per cambiare l’unità di misura.

Altra cosa importante è l’allineamento che ti permette di agganciare facilmente le guide agli elementi. Andiamo quindi su “Visualizza > Allinea a > Tutto”.

allineamento-photoshop

Per quanto riguarda le griglie ultimamente mi sono affezionata a quelle per Twitter Bootstrap 3. Tutto dipende dal lavoro che stai sviluppando. Se vuoi sapere tutto sulle griglie, Sara ne ha già parlato ampiamente qui: Lavorare con le griglie.

Il modo migliore per misurare le distanze è quello di usare lo strumento selezione rettangolare (M) associato con il pannello info (F8). Per rimuovere velocemente la selezione usare i tasti di scelta rapida: Ctrl/Cmd + D.

Struttura del file

Quando creiamo la struttura del sito in HTML lo dividiamo in diverse macroaree: header, section, article, aside, footer e via dicendo. Stessa cosa possiamo fare su photoshop tramite i gruppi.

Basta cliccare sul simbolo della cartella in basso nel pannello livelli, nominarla correttamente ed inserire i livelli corrispondenti all’interno.

gruppi-photoshop

Se quindi andiamo a creare il menù di navigazione principale, lo includeremo all’interno di una cartella denominata Nav, esattamente come faremmo per la struttura in HTML.

Non rinominare solo i gruppi ma prendi l’abitudine di rinominare ogni file del documento. Se ad esempio fai la copia di un file non lasciare “Layer Copy” ma assegnagli il giusto nome.

Quando crei interazioni di pagina come l’hover nei pulsanti, crea un’ulteriore cartella sopra l’elemento che vuoi variare. Ottima soluzione per mantenere il focus è quella di evidenziare gli elementi tramite colori (tasto destro > es.giallo).

hover-button

Uso corretto della tipografia

Quando creiamo dei testi su photoshop ricordiamoci che stiamo progettando per il web e non per la stampa. Innanzi tutto cerca di utilizzare i webfont, ne puoi trovare tantissimi su Google Fonts e Font Squirrel.

Assicurati di controllare il tipo di licenza e includi i font su una cartella all’interno del progetto. Se devi passare il file ad un programmatore o ad un altro grafico non c’è niente di più fastidioso nel trovarsi di fronte al messaggio di errore per mancanza di font.

Altro fattore importante è il valore numerico del testo. Cerca sempre di usare numeri interi evitando frazioni e decimali con la virgola.

carattere-photoshop

Scelta delle immagini

Quando usi delle immagini nei tuoi progetti assicurati sempre di avere tutte le licenze necessarie, esattamente come per i font. Se ti affidi a servizi di stock come Fotolia, puoi sfruttare il plugin per photoshop che ti permette di usare i bozzetti durante la progettazione.

In questo modo sarà più facile farsi un’idea del risultato prima di acquistare il file.

Inoltre consiglio sempre quando possibile di trasformare le immagini in oggetti avanzati mentre si sta lavorando, per evitare perdite di qualità (tasto destro sopra il livello > converti in oggetto avanzato).

Esportazione

Dopo aver concluso il nostro progetto siamo pronti per l’esportazione dei file. All’interno della cartella principale dove hai salvato il file PSD, inserisci un’altra cartella (assets) dove aggiungerai tutti gli altri file: elementi grafici dell’interfaccia, immagini e i font usati completi di licenza, icone, ecc…

esportazione-photoshop

Quando salvi un immagine non usare la comune opzione “Salva con nome” ma usa l’opzione “Salva per il web” che photoshop fornisce. Questo strumento integrato permette di salvare i file con il giusto grado di compressione. Inoltre evita di lasciare spazio vuoto attorno all’oggetto che vuoi esportare.

Plugin consigliati

Come ultimo punto voglio consigliarti alcune estensioni utili per migliorare l’esperienza di progettazione su photoshop.

Oltre al plugin di Fotolia consiglio:

  • Slicy – per esportare correttamente gli elementi del progetto (pulsanti, immagini, icone). La sua alternativa gratuita è Cut&Slice me.
  • CSS Hat – per ottenere codice CSS istantaneamente. Attenzione però, non affidarti completamente a dei programmi che automatizzano il codice. Possono velocizzare il lavoro, ma assicurati sempre che il codice sia corretto. Alternativa gratuita è CSS3Ps.
  • Flaticon – più di 24.000 icone da usare liberamente senza lasciare il tuo ambiente di lavoro.
  • GuideGuide – per creare griglie personalizzate in base al progetto che devi realizzare.
  • Kuler – l’estensione che permette di trovare la giusta combinazione di colori (dovrebbe già essere inclusa su photoshop CS6 e CC).

Non ho voluto includere altre informazioni contenute su Photoshop Etiquette perché ritengo siano fin troppo evidenti. Questo non toglie che meriti una lettura accurata, soprattutto delle pagine esterne consigliate sotto le voci del documento.

E per te quali sono le regole essenziali per l’utilizzo di photoshop nel web design?

Tag: ,

L'autore

Grafica e "Aspirante" Web Designer. Ha iniziato a scoprire il magico mondo dell'arte fin da piccola, osservando il nonno dipingere meravigliosi quadri su tela. Consegue il diploma di Grafica Pubblicitaria nel 2007. Inizia poi una tortuosa serie di (s)venture che la porteranno a capire il suo reale obbiettivo: il Web Design. Tutt'ora studia assiduamente e spera di concretizzare presto il suo sogno e fare di questo lavoro la sua unica professione. Come recita un famoso detto: "Scegli il lavoro che ami e non lavorerai neppure un giorno in tutta la tua vita".

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

8 commenti

Trackback e pingback

  1. Il Galateo di Photoshop per Web Designer | Your...
    […] Penso tu abbia già sentito parlare di Photoshop Etiquette, un documento online uscito nel 2011, ideato e curato da…