Come abbiamo visto nel post precedente, una volta identificata la struttura HTML, possiamo cominciare a lavorare sul CSS. Per farlo cominciamo con aprire il file PSD in Photoshop e a raccapezzarci nel mondo del programma che ha rivoluzionato il mondo dell’immagine digitale.
Per cominciare visualizziamo tutte le guide. Ho l’abitudine di realizzare la griglia di impaginazione principale attraverso le guide e lasciarle nel file come riferimento per il web designer. Per farlo andare su View > Show > Guides o più semplicemente digitare CTRL+H (comando che mostra/nasconde tutti i riferimenti visivi disponibili comprese le note di cui abbiamo parlato nel precedente capitolo).
Oltre alla guide che identificano le colonne della struttura (nel file di esempio è usata una derivazione del template di 960 grid system), sono solito lasciare anche quella che viene definita la griglia verticale, ovvero la griglia che guida il posizionamento del testo e che corrisponde all’altezza della riga testo.
Tale griglia ci sarà molto utile per settare il line-height del body della pagina e come riferimento visivo per le misure.
Prima di proseguire nella parte pratica dobbiamo ancora soffermarci un attimo su altri aspetti. Oggi ci concentreremo su alcuni strumenti utili all’utilizzo di Photoshop in modo da potersi orientare nel file in modo veloce.
Muoversi nel file
Per muoversi con destrezza nel file utilizzare sempre lo strumento Hand (H) o molto più velocemente, la barra spaziatrice, premendola potremo spostarci nel file anche se questo va al di fuori dell’ampiezza del monitor.
Per un movimento più intuitivo, entrare nella modalità full screen di Photoshop schiacciando ripetutamente la lettera F fino a trovare l’impostazione più comoda. Ricordo inoltre che per sgombrare dalle migliaia di palette il monitor (e poi farle riapparire) basta usare il TAB.
Eseguire uno zoom
Per zoomare in avanti, è necessario attivare lo strumento zoom. Schiacciando barra spaziatrice + CTRL attiverete lo strumento, aggiungendo alla combo anche ALT lo zoom all’indietro. L’effetto è ottenibile anche premendo i tre tasti e ruotando la rotellina del mouse. Per ritornare allo zoom 1:1 ovvero le dimensioni originali del file premere CTRL+ALT+0, mentre per vedere l’intero file all’interno della finestra premere CTRL+0.
Selezione di un livello e spostamento
Talvolta è necessario selezionare un livello particolare per isolarlo o tirarlo fuori dal file. Per farlo, posizionarsi sull’immagine e tenendo premuto CTRL+ALT+MOUSE DX il livello più in alto sotto il puntatore verrà selezionato nella palette dei livelli.
La palette dei livelli è quella finestra che ci mostra tutti i livelli disponibili nel file. Quando ho scoperto questa funzionalità, all’inizio della mia carriera Photoshoppesca, la mia vita è letteralmente cambiata.
Per spostare un livello, selezionare lo strumento Move (V), selezionare il livello e trascinarlo. Per movimenti minimi di 1px per volta utilizzare le frecce della tastiera o freccia della tastiera + SHIFT per movimenti di 10px alla volta.
Creare una selezione
In verità creare una selezione senza dover disegnare nulla è un po’ un controsenso, ma con la palette info attivata, è un modo veloce per fare le misure. Lo strumento di selezione rettangolare (M) ci permette di selezionare delle aree all’interno del tavolo di lavoro. Una volta disegnata l’area, visualizzare la palette info tramite Window > Info (F8) e nella parte in basso ci sarà possibile vedere le dimensioni della selezione e le sue coordinate all’interno del file. Assicuriamoci di avere l’unità di misura giusta (pixel) nelle preferenze di Photoshop così da poter ottenere le stesse dimensioni che utilizzeremo nel CSS.
Selezionare un colore
Con lo strumento contagocce (I) è possibile selezionare un colore dall’immagine. Cliccando sul pixel corrispondente, il colore viene inserito nella tavolozza che si trova in basso nella palette degli strumenti.
Per determinare il valore del colore cliccare due volte sul colore di primo piano della tavolozza. Così facendo si aprirà una finestra che mostra il valore assoluto del colore che abbiamo selezionato. Per quel che ci riguarda possiamo leggerlo in due punti, o come valore RGB o in modo più pratico per il CSS come valore esadecimale.
Leggere le caratteristiche di un testo
Per selezionare un testo, sia per eseguire un copia incolla, sia per riuscire a leggere le caratteristiche del font, possiamo, o selezionare il livello oppure cliccare sul testo (sempre che sia editabile) con lo strumento testo (T). A supporto dello strumento testo esiste la palette dei caratteri, visualizzabile con Window > Character, che ci mostra alcune caratteristiche che possono esserci utili con i CSS: la famiglia del font (font-family e font-weight), la dimensione in px (font-size), l’altezza della riga (line-height), nonchè la spaziatura tra le lettere (letter-spacing, questo valore non corrisponde ai pixel, perciò più ostico da usare) ed il colore (color).
Nascondere i livelli
Nella palette dei livelli è possibile identificare due tipologie di livelli, il livello singolo o il gruppo di livelli (identificato con una cartellina) contenente una serie di livelli singoli. Talvolta ci sarà necessario nascondere un livello o un set, per farlo basta cliccare sull’occhiolino disegnato alla sinistra del livello. Tenendo schiacciato ALT mentre eseguiamo questa operazione nasconderemo tutti i livelli tranne quello cliccato.
Creare un nuovo file
Ci sono volte in cui l’esportazione per il web (che vedremo più avanti) non è fattibile. Per aprire un nuovo file al volo premere CTRL+N, inserire le dimensioni, ed il gioco è fatto. Se il file serve con il fondo trasparente ricordiamoci di sbloccare il livello definito background cliccandoci sopra due volte e cancellandolo (se non si cancella è perché almeno un livello deve esistere nel documento).
A mio parere questi, insieme ad altri che vedremo sono gli strumenti basilari necessari per riuscire a mouversi in Photoshop e a gestire un file PSD al fine di estrarre le immagini utili nel CSS. Alla prossima.
