Prima di creare un sito è buona norma prepararne una bozza da mostrare al committente, in modo che possa approvarne almeno l’aspetto grafico di partenza. Se quella stessa bozza è ben fatta, cioè rispetta le proporzioni, la risoluzione, la qualità delle varie pagine del sito, può anche essere scomposta nelle sue varie parti, ottimizzata e trasferita online.
Per avere un maggior controllo sulla composizione grafica di Photoshop, normalmente si fa un grande uso delle guide, orizzontali e soprattutto verticali, che vanno a formare una griglia (grid). Alcune griglie sono disponibili già pronte, gratuitamente scaricabili dal web, la più diffusa è sicuramente 960 Grid System, che è un perfetto punto di partenza, ma si può andare oltre.
Un plugin per Photoshop utilissimo e gratuito, compatibile sia con Mac che con PC, in grado di far risparmiare moltissimo tempo (anche per altri tipi di lavori grafici) è GuideGuide, di Cameron McEfee. Con questo plugin è possibile creare griglie precisissime o anche tirare semplicemente un gruppo di guide intorno a un oggetto, evidenziandone la distanza dal bordo o la metà esatta, suddividerlo in sezioni equidistanti, eccetera. Chi lavora da tempo con Photoshop sa quanto sia frustrante tracciare le guide manualmente, e anche quanto sia facile sbagliare a calcolare i pixel o i millimetri e rovinare tutto!
Quelli che seguono sono alcuni suggerimenti su come utilizzare al meglio GuideGuide.
Nella palette di GG, seleziona Grid. Nella prima riga di impostazioni puoi indicare la distanza della righe dai bordi superiore e inferiore dello schermo, mentre subito sotto puoi indicare la distanza delle colonne da sinistra e da destra. Nella terza riga puoi indicare quante colonne o quante righe devono essere create. Nella quarta riga puoi mettere la larghezza delle colonne o l’altezza delle righe (ma è meglio non inserire questi valori, sarano calcolati in automatico). Per finire, nell’ultima riga, va inserita la distanza tra le colonne e tra le righe. Clicca sul tasto tondo “GG” e la griglia sarà creata sulla tua immagine (o sull’area selezionata).
Cliccando sul + in basso a destra della palette puoi salvare la griglia per poterla riutilizzare in futuro. Mentre il simbolo del divieto elimina le guide dall’immagine, resettando tutto.
I due simboli in basso a sinistra servono a creare una linea alla metà esatta, rispettivamente orizzontale o verticale.
Come già accennato, le guide vengono generate sull’intera immagne, ma se hai tracciato una selezione, le guide prenderanno come riferimento lo spazio della selezione. Ciò è molto utile, per esempio, se volessi tracciare le guide intorno a un rettangolo (pulsante, frame, form, div, immagine…), determinando anche una distanza interna fissa dal bordo di questo (padding) o un margine esterno (margin). Prova ad esempio a tracciare una selezione rettangolare intorno a una parte della tua immagine, poi sulla palette di GG inserisci il valore -10px nei primi 4 campi in alto, quindi clicca su GG e osserva il risultato. Farlo a mano ti avrebbe portato via molto più tempo e il risultato forse non sarebbe stato altrettanto preciso.
