Grafica  »  Guide  »  Guida Grafica web con Photoshop CS 

Qualsiasi progetto che preveda la diffusione o la presentazione di informazioni, di carattere testuale o visivo, deve essere organizzato secondo un preciso layout. In particolare, chiamiamo layout la struttura (grafica) e/o gli spazi nei quali vengono inseriti e distribuiti i contenuti, in questo caso di un sito.

Ideare un Layout è un'operazione che richiede anzitutto una analisi della quantità, del genere dei contenuti e della trasformazione che subiranno nel tempo.

Possiamo cominciare quantificando i rapporti fra gli spazi dedicati alle immagini e quelli dedicati a testo o contenuti di altro genere. Poi distribuiamo il materiale su una prima ipotesi di layout, decidendo "quanto spazio" assegnare a ciascuna tipologia.

Sono quindi essenziali a questo scopo tre operazioni preliminari alla realizzazione grafica del Layout definitivo:

• classificazione e organizzazione delle tipologie di contenuti e altre informazioni
• ideare un primo layout (si consiglia per esempio di schizzarlo su carta)
• distribuire i contenuti precedentemente classificati nel prototipo layout

L'ultima operazione, in particolare ci permette di verificare se l'ipotesi di Layout è adatta o meno alle nostre esigenze.

Partire direttamente con la realizzazione grafica in digitale di un Layout è quasi sempre un passo falso perché non permette una corretta valutazione degli spazi, ancor più se siamo in procinto di creare il layout per un sito dinamico, soggetto a continui adattamenti ai contenuti estratti da basi di dati.

Una volta che il progetto ci soddisfa possiamo concretizzare la nostra idea con Photoshop CS, poi passeremo a ImageReady per ottimizzare le sezioni del layout. Ma prima prendiamo confidenza con strumenti e tecniche.

Per semplificarci il lavoro possiamo avvalerci di alcuni importanti accorgimenti:

• Lasciare la struttura del layout sempre suddivisa in livelli.

  Ci aiuta ad avere un controllo assoluto su ogni singolo elemento, evitando che altre parti del layout possano essere coinvolte.

  È sempre opportuno bloccare i livelli che non stiamo utilizzando per diminuire le probabilità di errore. Per bloccare un livello è sufficiente cliccare sulla checkbox con il lucchetto.

• Allineare gli elementi e delimitarli usando le guide.

  Utilissime le guide per avere più precisione nell'allineare gli oggetti e per delimitare gli spazi del layout. Inoltre, passando a ImageReady, le guide posizionate con Photoshop rimangono nelle loro posizioni ci aiutano a delimitare le sezioni.

  Se vogliamo agganciare un livello a una guida, ricordiamoci di averlo prima selezionato nella finestra dei livelli (F7 da tastiera).

• Controllare gli effetti indesiderati delle opzioni di fusione.

  Spesso, utilizzando le opzioni di fusione dei livelli e in particolare lo smusso effetto rilievo, otteniamo effetti indesiderati.

  Figura 1. Effetti delle opzioni di fusione
  

  L'immagine qui riportata e dal rilievo volutamente esagerato mostra come, sui bordi del livello, l'opzione con effetto rilievo crei veri e propri angoli e ripetizioni di rilievo perpendicolari alla direzione desiderata. Questo diventa un problema se scegliamo di dividere il layout in piccole immagini da applicare come sfondi di livelli e tabelle sfruttandone le proprietà di ripetizione.

  La soluzione al problema sarebbe in definitiva quella di evitare le opzioni di fusione come smusso effetto rilievo, oppure, una volta terminata la crezione del layout, unire tutti i livelli (ctrl+shift+E) e ritoccare la parte "indesiderata". Di solito quest'ultima soluzione è più opportuna, essendo queste funzioni pratiche e veloci nell'ottenere determinati effetti.

• Utilizzare i tracciati per le forme personalizzate e le eventuali operazioni di decoro

  I tracciati di Photoshop tornarno sempre utili, soprattutto quando vogliamo creare elementi grafici e decorativi riutilizzandoli a piacere in vari punti del layout.

  È opportuno creare il tracciato di ogni elemento la cui forma non si possa ottenere con selezioni rettangolari ed elissoidali e l'ausilio delle guide.

  Questo non vale per le immagini fotografiche o con un alto numero di colori, che verranno semplicemente importante e manipolate.

• cercare di lasciare spazi per i contenuti testuali ed evitare di scrivere testi direttamente in Photoshop

  Photoshop non è adatto alla gestione dei testi di una pagina web. Le operazioni di aggiornamento sarebbero eccessivamente lente e sarebbe da escludere qualsiasi tentativo di creare un sito dinamico.

  tranne che per quegli elementi che rimangono fissi (es. titoli o menù), è opportuno lasciare che i contenuti testuali vengano inseriti con altri strumenti (es. editor html), quindi progettare il layout riservando al testo lo spazio necessario.

  Anche per le immagini il discorso è simile. È sconsigliabile renderle parte integrante del Layout. Meglio riservare loro degli spazi a meno che non facciano parte della struttura del layout.

Vedremo in seguito un esempio pratico, per il momento continueremo a concentrarci sugli strumenti a nostra disposizione.

Altri articoli

Altre guide

Altre newsletter