Di seguito riporto alcuni consigli pratici per gli sviluppatori che si trovano a dover lavorare con i file PSD di un progetto. Non siamo designer, quindi l'ingenuità delle soluzioni riportate è assolutamente giustificabile data la nostra conoscenza di Photoshop.
Salvare un gruppo come immagine
- Sul menu Layers di destra, evidenziare il gruppo scelto (un gruppo ha l'icona di una cartella).
- Dal menu in alto selezionare Layer, quindi Merge group.
- Ora il gruppo ha l'icona di un'immagine con sfondo trasparente nel menu Layers. Click con il tasto destro sull'icona e scegliere Select pixels.
- Dal menu in alto selezionare Edit quindi Copy merged.
- Dal menu in alto creare un nuovo file selezionando New... dal menu File.
- A questo punto incollate il gruppo nel nuovo file creato.
Ovviamente se il gruppo ha degli elementi che non vi interessano potete nasconderli prima di effettuare questa operazione cliccando sull'icona dell'occhio posta alla sinistra di ciascun livello.
Ottenere i valori in em dei font
Se selezionate un livello di testo (indicato dall'icona della lettera T) e cliccate due volte su di esso, nella barra degli strumenti apparirà anche la dimensione in pixel del font (ad esempio 48px). Per ottenere la dimensione in em:
- Prendete come riferimento la dimensione base dei font del sito. Ad esempio 100% equivale a 1em, ossia 16px.
- Dividete la dimensione in pixel del livello di testo per la dimensione base dei font (
48 / 16 = 3) e otterrete il valore in em.
Ottenere la larghezza in percentuale degli elementi
Partite sempre dalle dimensioni della griglia usata nel PSD. Se il PSD usa una griglia di 960 pixel, dovete dividere la larghezza dell'elemento per la larghezza dellaa griglia, ossia:
200 / 960 = 0.2083
ossia 20.83%
PNG trasparenti e sfondi
Se salvate (Save for web...) un'immagine PNG trasparente a volte può capitare di veder comparire un contorno sull'immagine quando questa viene applicata ad uno sfondo colorato. Questo non succede mai ad un designer, ma a noi si. La soluzione più semplice è quella di selezionare l'opzione Matte per il formato PNG in Save for web.... Con questa opzione possiamo specificare un colore che dovrà essere lo stesso del colore di sfondo dell'elemento a cui verrà applicata l'immagine.