Photoshop per front end developers

Nonostante al giorno d’oggi ci siano moltissimi strumenti creati appositamente per realizzare le bozze grafiche dei siti web (come ad esempio Sketch, Adobe XD, Figma, e molti altri), ancora oggi capita di ricevere grafiche realizzate con Adobe Photoshop. Ah, che gioia!

Photoshop è forse il programma grafico più utilizzato al mondo: si tratta di un ottimo editor di immagini e fotografie, con potenzialità davvero sorprendenti, e milioni di opzioni per creare e migliorare grafiche in ogni modo possibile.

Purtroppo però, questo software non è stato pensato per le esigenze di chi deve creare interfacce web e quindi a volte può essere un po’ ostico da usare per un web developer.

Inoltre le funzionalità presenti sono davvero tante, e in quanto sviluppatore non ti ritroverai mai ad utilizzarle tutte. Quindi, se esportare un’immagine o prendere una misura con Photoshop ti ha fatto tirare giù tutti i santi più di una volta allora questo articolo è stato scritto con il cuore appositamente per te!

In questo articolo andiamo a vedere esclusivamente le funzionalità di Photoshop più utili per ricavare tutte le informazioni di cui hai bisogno dal file .psd ricevuto. Prenditi un po’ di tempo per ottimizzare tutta la baracca e vedrai che ti semplificherai la vita di molto. In questa guida parliamo di:

• impostare lo spazio di lavoro;
• selezionare correttamente le unità di misura;
• selezionare e conoscere le informazioni del testo presente;
• capire il funzionamento dei livelli;
• come selezionare correttamente gli elementi utilizzando il mouse;
• conoscere e comprendere i colori;
• come ritagliare un’immagine;
• come esportare un’immagine;
• il modo migliore per prendere le misure;
• utilizzare al meglio le Azioni Ripetute;
• come esportare un solo elemento.

Tutti elementi utili ed indispensabili per analizzare correttamente un layout web ricevuto da un grafico: elementi che potranno rendere il tuo lavoro di front end developer più facile e veloce.

Come impostare lo spazio di lavoro (detto Workspace)

Iniziamo dalle basi: se non sei pratico dei software del pacchetto Adobe, ad una prima occhiata l’interfaccia di Photoshop può non apparirti molto intuitiva. Quindi, per non rischiare di perdere i capelli per lo stress, la prima cosa da fare è quella di impostare correttamente il proprio spazio di lavoro.

Per fare ciò, è utile chiudere tutte le finestre e tavolozze che si aprono in automatico al primo avvio.

Tutte!

Per poi aprire solo quello che realmente ti sarà utile per il tuo lavoro. In quanto front end developer, infatti, i pannelli che utilizzerai normalmente non saranno moltissimi:

• Layers (livelli) – una finestra che consente di aggiungere, eliminare, spostare l’ordine dei diversi livelli su cui si sta lavorando o selezionare gli oggetti presenti su di essi;
• Info – un pannellino contenente le informazioni base riguardo all’oggetto selezionato come colore e posizione;
• Character (carattere) – un pannello con tutte le informazioni riguardo ad un testo selezionato, quale il font, la dimensione, la formattazione, eccetera;
• Navigator (navigatore) – una piccola anteprima, che permette di navigare sul foglio cambiando vista e zoom, e che consente di avere una visione d’insieme del progetto;
• History (storia) – una finestra con le diverse operazioni eseguite recentemente sul progetto, che consente di tornare agevolmente ai passaggi precedenti con dei semplici click del mouse;
• Notes (note) – per le versioni di Photoshop con blocco appunti, è un’area in cui segnare le annotazioni principali utili al progetto, in modo da averle sempre a portata di mano.

Tutti questi pannelli che abbiamo appena visto si trovano all’interno del menu Window (Finestra). Una volta che avrai finito di impostare correttamente il tuo spazio di lavoro puoi salvarlo con un semplice click da:

Window > Workspace > New Workspace (Finestra > Area di lavoro > Nuova area di lavoro)

Piccola parentesi. La lingua impostata nel mio Photoshop è l’inglese per cui le varie indicazioni e screenshot in questa guida sono in lingua inglese. Sto andando ad occhio per le traduzioni. Questo perché tutto il mio computer è impostato su questa lingua. È un consiglio che mi sento di dare anche a te perché ti potrebbe tornare molto utile quando avrai bisogno di fare una ricerca su Google per risolvere gli inevitabili problemi che sorgeranno nella tua carriera da web developer. Sapere i termini esatti in inglese con cui effettuare una ricerca su Google ti aiuterà a risparmiare tempo e ad ottenere più facilmente una risposta al tuo problema, in quanto ci sono molte più pagine la fuori in inglese che solo in italiano.

Settare le unità di misura in pixel

Prima di iniziare a lavorare su un qualunque file PSD ricevuto, la cosa migliore da fare è quella di impostare le unità di misura. Questo ti permetterà di essere preciso al pixel durante la trasposizione in codice della bozza grafica.

Per farlo, occorre cliccare su:

Photoshop CC > Preferences > Units & rulers (Photoshop CC > Preferenze > Unità e righelli)

e modificare le unità in Pixel.

C’è poi un secondo posto nascosto dove modificare le unità di misura: sui righelli. Iniziamo prima di tutto attivando i righelli, facendo CMD+R (utenti Apple) oppure Ctrl+R (utenti PC), o andando su

View > Rulers (Visualizza > Righelli)

per poi fare anche qui clic con il tasto destro del mouse sul righello, e modificando anche qui le unità in Pixel.

Tipografia

Qualora fossero necessarie le informazioni riguardo ad un testo presente nel file, è possibile selezionarlo e ottenere le indicazioni del tipo di carattere, colore, dimensione, e molto altro, direttamente nella finestra Character (carattere).

Per selezionare agevolmente un testo dal progetto, il metodo più rapido è quello di premere il tasto T da tastiera, andando poi a cliccare con il mouse direttamente sul testo interessato.

Se nel file PSD sono presenti tanti oggetti, ed il testo è di difficile selezione con un click del mouse, è preferibile andare a selezionare il testo con un doppio clic sul relativo livello, direttamente nel pannello livelli.

Nelle ultime versioni di Photoshop, i livelli contenenti testo sono indicati con un’icona [T] prima del nome del layer, per cui sono di facile e veloce identificazione.

Livelli (Layers)

La professionalità e l’esperienza di chi ha lavorato sul file PSD che avete ricevuto viene tradotta in pratica soprattutto dalla finestra dei Livelli. Un lavoro ben fatto ed organizzato correttamente avrà livelli e sottolivelli dettagliati e con un ordine facile da comprendere; al contrario, esecuzioni frettolose o progetti creati da operatori improvvisati avranno pochi livelli presenti, e di difficile gestione.

I livelli sono essenzialmente degli strati da cui è composto il progetto: oggetti a cui vanno applicati effetti differenti andranno su livelli diversi, lo stesso vale per elementi di natura diversa, come ad esempio immagini e testi, che non dovranno mai trovarsi sullo stesso livello.

I layer (=livello) possono essere bloccati, semplicemente cliccando sul lucchetto accanto al loro nome, in modo da evitare erroneamente di selezionare oggetti che non devono essere modificati.

Possono, inoltre, essere eliminati totalmente in un semplice click, se quello che contengono può essere cestinato, oppure possono essere resi invisibili, cliccando sull’icona a forma di occhio accanto al nome del livello, in modo da rendere più agevole per l’utente il lavoro da effettuare su di un altro livello.

In alternativa a questa ultima funzione, è anche possibile abbassarne l’opacità, per lasciare che si intravedano gli oggetti presenti su di esso senza dare problemi di visualizzazione.

Altre operazioni che è possibile effettuare con i livelli sono gli spostamenti, cambiando di conseguenza l’ordine di visualizzazione nel progetto. In questo ultimo caso è necessario fare molta attenzione, poiché filtri ed effetti, applicati senza essere stati poi rasterizzati (fissati e resi immodificabili), possono avere un risultato differente sugli oggetti, se viene cambiato l’ordine dei livelli.

La cosa migliore da fare è fare uno spostamento alla volta, per poi verificare immediatamente che questa operazione non intacchi il risultato finale.

Come selezionare correttamente gli elementi con il mouse

Quando si è nello strumento Move (Sposta), compare in alto a sinistra la casella già spuntata Auto-Select (Selezione automatica). Nel menu a tendina si può scegliere se al click selezionare solo il layer specifico oppure l’intero gruppo al quale appartiene.

In alternativa puoi usare le scorciatoie a da tastiera:

Windows: Ctrl+Alt e tasto destro del mouse sull’elemento;

Apple: Alt+CMD e tasto destro del mouse sull’elemento.

Se devi selezionare più livelli allo stesso momento, tieni premuto anche Shift con la shortcut appena illustrata. In questo modo, verranno selezionati tutti i livelli degli elementi su cui si farà click con il tasto destro del mouse.

Qualora, invece, la selezione automatica fosse disabilitata, è possibile effettuare delle selezioni multiple allargando il riquadro di selezione del mouse per comprendere più livelli contemporaneamente (nello stesso modo in cui si selezionano più icone nello stesso istante sul desktop): vediamo come. Innanzitutto, premere la lettera “V” della tastiera per selezionare lo strumento di spostamento, e poi:

Windows: tenere premuto Ctrl e trascinare il riquadro sugli elementi che si vuole selezionare;

Apple: tenere premuto CMD e trascinare il riquadro sugli elementi che si vuole selezionare.

Infine, un ultimo modo: è possibile fare un clic con il pulsante destro del mouse su un elemento all’interno del documento, per selezionare il livello dell’elemento stesso.

Colori

Per ottenere informazioni riguardo ad un colore che è stato utilizzato all’interno di un file PSD è possibile utilizzare principalmente due strumenti:

• Eyedropper Tool (contagocce) nel pannello strumenti – permette di ottenere velocemente un riferimento del colore campionato nel design, semplicemente cliccando sul punto in cui è presente il colore da rilevare. Nella parte inferiore della barra degli strumenti sulla sinistra, il colore in primo piano diventerà quello selezionato. Facendo infine doppio clic sul rettangolo con il colore, si aprirà una finestra con i riferimenti ricercati;

• Campionatore colore – aprendo la finestra info, e passando con il mouse sopra alle zone di colore di interesse, i valori nella finestra (mostrati in RGB e CMYK) cambieranno indicando i riferimenti del colore selezionato.

Come ritagliare un’immagine

Ritagliare un’immagine con Photoshop è davvero un’operazione molto semplice da realizzare, nonché estremamente intuitiva.

Nella barra Strumenti sulla sinistra si deve selezionare l’icona Crop Tool (Ritaglia); cliccando e tenendo premuto sull’immagine si andrà a creare un rettangolo dagli angoli marcati. Se si clicca sugli angoli e li si sposta è possibile variare in modo semplice l’area di selezione da ritagliare.

È possibile anche ruotare questa selezione.

Avvicinando inoltre il puntatore del mouse ad un angolo, comparirà una freccia curva: se si clicca quando è presente, l’intera area di selezione ruoterà.

Una volta definiti i margini definitivi della zona da ritagliare, basterà premere Invio da tastiera per veder scomparire tutto quello che è rimasto all’esterno del rettangolo di selezione, lasciando a video solo l’immagine ritagliata

Come esportare un’immagine

Una volta selezionata l’immagine che si intende usare nel proprio progetto, è utile esportarla con parametri ottimizzati per il web.
E’ possibile farlo semplicemente andando nella barra in alto, su:

File > Export > Save for Web (File > Esporta > Salva per il Web)

oppure utilizzando il comando da tastiera Ctrl+Alt+Shift+S (Windows) o CMD+Alt+Shift+S (Apple). A quel punto, verrà aperta una finestra con numerose opzioni, che permetteranno di personalizzare i parametri di ottimizzazione per la figura. Si potranno scegliere formato, dimensione e qualità dell’immagine da esportare.

Come prendere correttamente le misure

Come già scritto all’inizio di questo articolo, Photoshop non è stato pensato per il web per cui non esiste un modo efficace per prendere le misure fra un elemento e l’altro. A meno che non mi sia sfuggito.

È ovviamente fondamentale riuscire ad avere almeno un’idea indicativa delle dimensioni degli oggetti e della loro distanza.

Per fare queste misurazioni un po’ ad occhio, si può creare un rettangolo (nuovo elemento, con livello più alto) che copra la distanza o la dimensione che si vuole ottenere. Difatti vicino al mouse comparirà una finestrella con le dimensioni del rettangolo che stai andando a creare.

Un secondo modo per prendere correttamente le misure è quello di utilizzare il righello (ruler tool): si seleziona dalla barra degli strumenti e cliccando con il tasto sinistro del mouse puoi tracciare una linea. Le dimensioni di questa linea le puoi vedere nel pannello info.

Azioni ripetute

In alcuni casi, come ad esempio nella riduzione di tutte le immagini del progetto ad una stessa altezza, sarà utile poter impostare un’azione da ripetersi, evitando di dover ogni volta applicare la sequenza intera dei diversi passaggi.

Per creare questo automatismo, per prima cosa è necessario visualizzare la finestra Azioni, semplicemente selezionandola:

Window > Actions (Finestra > Azioni)

nella barra superiore. Poi bisognerà creare una nuova azione cliccando sull’icona Crea nuova azione in basso alla finestra, dandole un nome.

A questo punto il programma entrerà in modalità registrazione (in modo del tutto identico al registratore di Macro di Microsoft Excel), ossia registrerà all’interno di questa Azione tutti i passaggi che saranno eseguiti fino a quando non verrà cliccato sull’icona rettangolare Stop registrazione / riproduzione.

In questo modo, l’operazione routinaria sarà salvata, e potrà essere facilmente richiamata successivamente: infatti, quando questa operazione dovrà essere applicata ad un altro file, sarà sufficiente selezionare il nome dell’Azione nella relativa finestra e cliccare sul triangolino Play.

Se invece vuoi applicare queste azioni ad una cartella di immagini senza doverle aprire una ad una dovrai seguire i seguenti passaggi:

1. Vai in File > Automate > Batch
2. Seleziona le cartelle Source (Fonte) e Destination (Destinazione)
3. Seleziona l’azione da eseguire sui file
4. Clicca ok e il gioco è fatto

Esportare un solo elemento

Per esportare un preciso elemento dal design puoi selezionarne il livello con lo strumento Move Tool (Sposta). Nel pannello dei livelli si evidenzierà il layer che ti interessa.

Fai click destra su quel livello e poi scegli Export As (Esporta come) per esportare solo il livello selezionato.

Conclusione

In questa guida, non completa per tutte le funzionalità che Photoshop offre agli utenti, abbiamo visto alcuni piccoli accorgimenti che possono rendere la tua vita da front end developer più facile. Tuttavia, potrebbero esserci mille altre situazioni dove potresti ritrovarti in difficoltà: a volte, infatti, i grafici si sbizzarriscono con i modi più ingegnosi di incastrare i vari elementi nel design, fra opacità, metodi di fusione e maschere. E non sempre è facile trovare un ordine logico e uno schema, dietro tutti questi elementi piovuti nel progetto.

Trovare quello che serve davvero potrebbe essere come cercare un ago nel pagliaio: quindi non ti resta altra soluzione che tartassare il grafico affinché ti procuri tutti gli asset di cui hai bisogno.

Se vuoi continuare la lettura, ti consiglio alcuni altri miei articoli:

• Guadagnare online, tutti i modi per lavorare online da casa seriamente
• Ngrok, come mostrare al cliente il sito in locale sul proprio computer
• Come trovare clienti per te che sei un web developer freelance
• Come creare un virtual host in locale con MAMP
• Perché ho scelto SiteGround per il mio sito e quelli dei miei clienti
• Obiezioni dei clienti sul riutilizzo del know how e del codice prodotto
• 100/100 su Pagespeed Insights con il tuo sito WordPress