Guida Interfacce web con Photoshop

di: Cristina Parente

Introduzione

Questa guida nasce come tutorial dedicato alla costruzione di un’interfaccia di un sito con

Adobe Photoshop CS. Realizzando un layout completo da zero, affronteremo tecniche e

competenze indispensabili per chi desidera occuparsi di web design.

Disegneremo un layout dalla struttura molto comune sul web, in modo da poter scoprire gli

aspetti principali del web design, affrontando le problematiche con cui capita spesso di

confrontarsi.

Vedremo inoltre alcune "variazioni sul tema", ossia come trasformare la stessa interfaccia o

alcuni dei suoi elementi in uno stile diverso, ad esempio giocando con il colore oppure

cambiando l’aspetto grafico dei dettagli.

Per facilitare l'esecuzione delle procedure, è possibile scaricare i file di lavoro in formato .psd

(compatibile anche con le versioni precedenti di Photoshop) che accompagnano i tutorial.

Il web design è un campo molto vasto, che richiede diversi tipi di competenze, che vanno

oltre il sapere usare bene Photoshop o il vostro programma di grafica preferito. È

indispensabile infatti conoscere le diverse fasi della realizzazione di un sito, anche se

non ve ne occuperete personalmente.

La conoscenza dell’HTML, delle esigenze della programmazione e dei vincoli tecnici dei vari

browser vi aiuterà a scegliere le soluzioni grafiche migliori rispetto al progetto e a realizzare

interfacce funzionali e veloci da caricare, pur senza rinunciare alla creatività.

Le lezioni puntano l’attenzione sui principali aspetti della creazione grafica, rinviando la

trattazione degli altri argomenti (HTML, programmazione, usabilità, architettura informativa,

ecc.) ad altre risorse su HTML.it .

Impostare l'analisi

Prima di passare alla creazione di un’interfaccia, occorre approfondire l’aspetto del progetto e

dell’incontro con il cliente. Si tratta di una fase preliminare importantissima, perché da qui

si capisce come impostare il lavoro dal punto di vista tecnico e creativo.

A meno che non lavoriamo in una web agency con un account e/o un art director che si

occupano di raccogliere queste informazioni e passarcele per impostare il layout, sta a noi

interagire col cliente per capire quello che si aspetta, o meglio, quello di cui ha effettivamente

bisogno.

Cerchiamo di individuare insieme a lui quali sono le esigenze che lo portano a realizzare, o ad

aggiornare, un sito. È importante individuare quali informazioni occorre mettere sul

sito, capire cosa fa l’azienda e se ha dei punti di forza da mettere in luce. È inoltre necessario

capire come l’azienda si propone sul mercato e quali sono i suoi clienti e se a loro si rivolge il

sito oppure no.

Informazioni Principali Ecco un breve riepilogo delle principali informazioni che occorre raccogliere.

Obiettivi

Qual è lo scopo del sito? Serve per promozione, per vendere online dei prodotti oppure può

diventare uno strumento per snellire alcune procedure interne di lavoro? (ad esempio è

possibile mettere il catalogo online dando la possibilità di scaricarlo invece di spedirlo per posta,

riducendo il carico di lavoro per il personale interno e, soprattutto, le spese dell’invio?).

Target

A chi si rivolge il sito? A una o più tipologie di utenti? A utenti italiani o internazionali? È

possibile fare tracciare un profilo del target?

Stile e tono della comunicazione

Quale aspetto deve avere il sito? Quale stile grafico veicola meglio l’identità dell’azienda e si

rivolge in modo efficace ai suoi utenti?

Chiediamo se esistono precedenti comunicazioni (brochure, presentazioni aziendali, pubblicità,

manifesti) per capire come l’azienda comunica la sua immagine all’esterno.

Può capitare, soprattutto se l’azienda è piccola, che il vostro cliente non abbia un’immagine

precisa se non per quanto riguarda il marchio. In questo caso iniziamo a lavorare da quello e a

capire il perché della scelta di quel marchio. È molto probabile che, se facciamo un buon lavoro,

sarà la grafica del sito a dare vita alla comunicazione aziendale.

Raccolta del Materiale

Raccogliamo tutto il materiale che può esserci utile: fotografie, brochure, cataloghi, il logo

dell’azienda, i testi da inserire sul sito.

Cominciare il progetto Dopo aver raccolto le informazioni e il materiale necessari si può procedere alla creazione

della struttura del sito, studiando l’architettura informativa e scegliendo le soluzioni tecniche

migliori per presentare i contenuti e renderli accessibili.

Se lavoriamo su siti molto semplici (quattro o cinque pagine di presentazione senza

funzionalità particolari), iniziamo col suddividere il materiale nelle varie pagine, pensando

a come organizzarlo e presentarlo al meglio.

Ad esempio, se dobbiamo inserire un testo molto lungo in una pagina, pensiamo se è possibile

migliorarne la leggibilità spezzandolo in paragrafi, oppure se alcune informazioni che esso

contiene hanno particolare importanza e possano essere messe in evidenza con un elemento

grafico (un titolo, una immagine) o ancora possano essere comunicate con una tecnica diversa,

come un’animazione in Flash, e così via.

Procedendo in questo lavoro, chiediamoci sempre se la scelta che stiamo operando è

funzionale rispetto a:

• gli utenti

• gli obiettivi di comunicazione

• i vincoli tecnici

Questa operazione non è da sottovalutare: il design di un sito nasce da un buon progetto

prima ancora che dalla nostra creatività.

Dall'analisi al progetto

Supponiamo di voler realizzare un sito dedicato al web design e all'utilizzo di Photoshop per

elaborare grafica destinata al web. Contiene articoli, trucchi e suggerimenti, informazioni per

usare al meglio Photoshop e un'area dedicata al download di goodies (pennelli, azioni, pattern

già pronti e così via).

Un sito come questo è ricco di contenuto testuale e di immagini con articoli e tutorial che

possono essere anche abbastanza lunghi e suddivisi in più pagine. I contenuti e i tutorial

vengono costantemente aggiornati e arricchiti, invogliando l'utente a tornavi periodicamente

per accedere alle novità.

L'utente a cui si rivolge (il "target") è una persona che è, o vuole diventare, web designer, che

desidera migliorare le proprie competenze e apprendere delle tecniche per usare meglio

Photoshop.

Ci serve un'interfaccia snella e molto semplice da usare, in grado di fornire un immediato

e facile accesso ai contenuti, che rappresentano il motivo per cui i nostri utenti visitano il sito.

Occorre prevedere uno spazio centrale abbastanza ampio in grado di ospitare le immagini e il

testo dei tutorial, con un font di dimensioni e colore appropriato per facilitare la lettura.

Dal punto di vista estetico, ci serve un'interfaccia con un suo "carattere" ma che sia nel

contempo un contenitore flessibile, anche in fatto di forme e colori, in grado di accogliere

contenuti sempre nuovi e con colori non prevedibili (basti pensare alle immagini dei tutorial,

che possono presentare i soggetti e i colori più svariati).

Struttura e home page Per facilitare l’accesso ai contenuti principali, la home mette in evidenza alcuni degli

argomenti più interessanti e le novità, ossia quegli argomenti che si ipotizza che gli utenti

cerchino con maggiore frequenza. Ecco un breve riepilogo delle informazioni che conterrà

l’home page, oltre al logo e al menu di navigazione, ovviamente.

Il cuore della pagina è dedicato ai tutorial, che rapprensentano il punto di forza del nostro

sito. Verrà messo in evidenza il tutorial più recente (ricordiamoci che periodicamente vengono

pubblicati nuovi tutorial) e i tutorial sulle tecniche che la redazione del sito ritiene di interesse

più generale.

Per facilitare la ricerca delle informazioni prevediamo una sezione per la ricerca per

parola chiave. Inoltre, sarà disponibile un'elenco dei tutorial più letti dagli utenti.

Si tratta di informazioni numerose che vanno organizzate e presentate in modo appropriato in

modo da non confondere l’utente. Il nostro scopo è fornirgli un accesso facile e rapido a quello

che sta cercando e non complicargli la vita. In questo senso, la struttura della pagina e la

grafica sono fondamentali.

Da tutte queste considerazioni, nasce la struttura della home page e la collocazione dei

contenuti principali, come mostrato nella figura.

Figura 1. Schema della struttura della home page

La pagina è strutturata con:

• un header, che contiene il logo e il menu di navigazione;

• una parte centrale, destinata alla presentazione dei tutorial;

• una colonna a sinistra, che contiene i campi per la ricerca e l’elenco degli articoli più

letti;

• un footer, che chiude la pagina e riporta le informazioni sul copyright e i credits.

Questa bozza ci serve per avere le idee chiare quando apriremo Photoshop e inizieremo a

creare l’interfaccia. Vediamo in anteprima l'interfaccia finale che andremo via via creando.

Figura 2. Anteprima del sito

L'area di lavoro su Photoshop

La realizzazione di un’interfaccia parte da un’operazione tanto semplice quanto fondamentale:

creare un documento di lavoro con caratteristiche e dimensioni adeguate. Le

dimensioni dell’interfaccia sono importanti in quanto stabiliscono chiaramente i limiti del nostro

spazio di lavoro, e soprattutto ciò che vedranno, o non vedranno, gli utenti.

A meno che il nostro sito non si rivolga ad un ristretto numero di utenti, di cui conosciamo con

assoluta certezza il sistema operativo, la risoluzione del monitor nonché il browser, dobbiamo

fare in modo che l’interfaccia possa essere visualizzata da tutti gli utenti senza problemi,

e, soprattutto, senza la fastidiosa barra di scorrimento orizzontale. Ciò significa impostare la

corretta larghezza della pagina.

I dati statistici indicano che attualmente la maggior parte degli utenti utilizza una

risoluzione di 1024x768 pixel, altri lavorano a risoluzioni maggiori, ma quello che più ci

riguarda sono coloro che lavorano ancora a 800x600 pixel, perché questi sono gli utenti che

vedranno la porzione minore di interfaccia.

Pertanto, la larghezza ideale per un’interfaccia visibile alla diverse risoluzioni senza la barra di

scorrimento orizzontale è di circa 760-770 pixel.

La lunghezza della pagina crea invece meno problemi, in quanto gli utenti sono abituati a usare

la barra di scorrimento verticale. La scelta della lunghezza è strettamente legata al

contenuto della pagina e al modo in cui viene organizzato.

Ciò che è importante tenere presente è che, in modo analogo a quanto spiegato per la

larghezza, la parte di interfaccia visibile da tutti gli utenti senza usare la barra di

scorrimento è lunga circa 420 pixel. Questo valore va tenuto presente nella scelta della

collocazione degli elementi nella pagina (logo, menu di navigazione, informazioni importanti),

perché questa è l’area che verrà sicuramente vista per prima (e sempre) dai visitatori.

Per chiarire meglio questo aspetto, ecco come appare l’interfaccia di HTML.it visualizzata a

1024x768 pixel (sopra) e a 800x600 pixel (sotto).

Figura 1. La home page di HTML.it a diverse risoluzioni

È evidente che la parte visibile in altezza alla risoluzione di 800x600 pixel è notevolmente

ridotta; inoltre, mentre nel primo caso l’interfaccia appare centrata sullo schermo, nel secondo

occupa tutto lo spazio disponibile:

Si possono verificare in prima persona la visualizzazione del sito alle diverse risoluzioni

cambiando le impostazioni del vostro monitor e visualizzando la pagina HTML nel browser.

Creare il documento di lavoro. In Photoshop selezioniamo File>Nuovo. Appare una finestra dove è possibile impostare tutte le

caratteristiche del documento.

Figura 2. Creazione di un nuovo documento

Nella casella Predefinito, Photoshop ci offre una serie di dimensioni predefinite, che rendono

più veloce la creazione del documento. Tra quelle disponibili, selezioniamo 1024x768 pixel.

Imposteremo in seguito la dimensione corretta (760x420 pixel) nel documento nuovo

aiutandoci con le guide.

Una volta scelta l’opzione, vengono impostati automaticamente gli altri parametri.

Assicuriamoci che la risoluzione sia di 72 ppi, ossia la risoluzione adatta al web, e che il

metodo di colore sia RGB a 8 bit.

Nella casella Contenuto sfondo selezionare Bianco (perché impostiamo una interfaccia con

sfondo bianco).

Quindi, clicchiamo su Avanzate. Si allunga la finestra di dialogo per mostrare il profilo colore

in cui lavoreremo, ossia RGB di lavoro: sRGB IEC61966-2.1, che è il profilo colore ideale per

il web.

Figura 3. Pannello delle impostazioni avanzate

Finalmente clicchiamo su OK per creare il documento.

Impostare le dimensioni Nel nuovo documento usiamo le "guide" per delimitare la larghezza dell’interfaccia a

760 pixel, che abbiamo detto essere il valore che ci assicura la massima compatibilità.

Invece di usare le guide, potremmo impostare questo valore nella finestra della creazione del

nuovo documento; tuttavia è preferibile lavorare con un documento di 1024 pixel in

quanto ci consente di:

a. valutare contemporaneamente le scelte grafiche per entrambe le risoluzioni (1024x768

e 800x600) con un solo colpo d’occhio,

b. avere un po’ più di spazio per lavorare.

Condizioni ideali per operare.

Anzitutto verifichiamo che l'ingrandimento sia del 100%. La percentuale di

visualizzazione viene indicata nella barra del titolo del documento. In genere Photoshop

presenta il documento a una visualizzazione del 66,7%: possiamo portarla al 100% premendo

Ctrl+ '+' oppure selezionando Visualizza>Pixel reali.

Rendiamo visibili i "righelli" con il comando Visualizza>Righelli. Avendo impostato il

documento in pixel, i righelli riportano i valori in questa unità di misura.

Per lavorare più agevolmente, visualizziamo il pannello "Info" con il comando

Finestra>Info. Questo pannello offre utili informazioni ed è un buon riferimento da tenere

sott’occhio mentre si lavora.

In particolare indica (da sinistra a destra): i valori RGB del colore sottostante il puntatore, una

seconda lettura del colore in CMYK, la posizione corrente del puntatore (x,y) e le dimensioni

(larghezza e altezza) di una selezione.

Per essere certi che i valori vengano visualizzati nell’unità corrette, clicchiamo con la freccina

nera e selezionare Opzioni palette.

Figura 4. Pannello Info

Nella finestra che appare, verificare di aver impostata l’opzione Pixel nella casella Coordinate

mouse e fare clic su OK.

A questo punto, impostiamo le guide verticali: cliccando sul righello di sinistra, trasciniamo

una guida fino alla posizione 132. Per compiere questa operazione ci si può aiutare con il

pannello Info che mostra la posizione della guida man mano che la si trascina.

Impostiamo una seconda guida fino alla posizione 892, in modo da delimitare uno spazio di

760 pixel. Ecco come si presenta il documento:

Figura 5. Creazione delle guide

Salviamo il documento con il nome che più ci piace con il comando File>Salva.

Chi vuole può scaricare questo file guide.psd. Se le guide non fossero visibili, selezionare il

comando Visualizza>Mostra guide.

Realizzare l'intestazione

Dopo aver definito le dimensioni dell’interfaccia, abbiamo il nostro foglio bianco su cui lavorare.

È il momento di fare mente locale sul progetto. Infatti, è importante avere le idee chiare

sull’ architettura informativa del sito, prima ancora di creare lo stile grafico dell’interfaccia,

sapere come organizzare il contenuto e, in questo caso, quali saranno le informazioni

presenti nell’home page. Un buon progetto iniziale ci aiuta a realizzare più semplicemente

anche la grafica.

Come abbiamo visto nel primo tutorial, il layout che creeremo riprende una struttura molto

utilizzata sul web ed è costituito da

• header nella parte superiore, dove verrà posizionato il logo e il menu,

• parte centrale, suddivisa in due colonne e dedicata al contenuto,

• footer nella parte inferiore a chiusura della pagina.

Poiché dal nostro progetto il sito e la home page sono ricchi di informazioni, ci serve creare

una struttura equilibrata, che dia ordine al contenuto e ne faciliti la lettura e la ricerca. Ci serve

un contenitore flessibile, che abbia un’identità ma che rimanga semplice e ordinato.

Un’ultima cosa da tenere presente mentre si lavora è quella di privilegiare le scelte grafiche

che riducono al minimo le immagini da esportare e delegano, invece, quanto più possibile

all’HTML e ai CSS la creazione dei colori e degli elementi grafici. In questo modo il peso della

pagina sarà contenuto permettendo agli utenti di caricarla velocemente senza inutili attese.

Costruiamo l'header Apriamo il file contenuto.psd. Nella palette Livelli è presente il livello "logo" che contiene il

marchio da utilizzare. Per continuare a lavorare sul file che abbiamo creato nelle lezioni

precedenti, si può copiare il contenuto del livello "logo" e incollarlo nel nuovo documento.

Definiamo le dimensioni dell’header. Ci serve uno spazio non molto alto, sufficiente a

contenere il logo e il menu orizzontale. Ricordiamo che questa interfaccia deve lasciare quanto

più spazio possibile ai contenuti dell'area centrale che sono quelli che interessano i nostri utenti.

Con lo strumento "Sposta" posizioniamo il logo in alto a sinistra, rispetto alle guide,

lasciando un po’ di margine in modo da non attaccarlo ai bordi della pagina. Non occorre

essere precisi in questa fase, ci serve solo per avere il colpo d’occhio delle dimensioni:

Figura 1. Posizionamento del logo

Definiamo l’altezza dell’header. Considerando l’altezza del logo e immaginando di avere

una fascia rettangolare per il menu, 85 pixel di altezza dovrebbero essere sufficienti.

Trascinare quindi una guida orizzontale alla posizione 85.

L'header è composto da tre fasce colorate: una scura in corrispondenza del logo, una per il

menu e una sottile che ci serve come elemento decorativo di transizione tra le due fasce

precedenti. Trasciniamo una guida orizzontale alla posizione 50 per delimitare la fascia in

corrispondenza del logo.

Clicchiamo sul livello "Sfondo" per creare un nuovo livello sopra di esso con un clic sull'icona

Crea un nuovo livello.

Nella casella degli strumenti, selezioniamo lo strumento di "selezione rettangolare" e

verifichiamo nella barra delle opzioni in alto che il valore nella casella "Sfuma" sia 0 px.

Creiamo una selezione di 760x50 dietro al logo aiutandovi con le guide e il pannello "Info":

Figura 2. Creazione di una selezione dietro al logo

Senza deselezionare e mantendovi sul nuovo livello, fare clic sul campione colore di primo

piano nella casella degli strumenti e scegliere il colore per l’header, ad esempio un grigio

molto scuro (RGB 36, 36, 36).

Utilizzando lo strumento Secchiello, riempire con il colore scelto la selezione. In questo modo

si è creata una fascia che fa risaltare il logo.

Deselezioniamo premendo Ctrl+D oppure selezionando Selezione>Deseleziona. Ecco il

risultato:

Figura 3. Immagine dell'header

Definiamo ora l’altezza della fascia di transizione e di quella per il menu. Posizionare una

nuova guida orizzontale alla posizione 60.

Con lo strumento di selezione rettangolare, selezioniamo la prima zona rettangolare

(quella più bassa).

Impostimo come colore di primo piano un verde, ad esempio il colore RGB 175, 165, 98.

Con il secchiello riempiamo la selezione del colore scelto.

Come sfondo per il menu, usiamo un colore grigio. Selezioniamo l'area rettangolare

sottostante delimitata dalle guide.

Scegliamo come colore di primo piano un grigio, ad esempio il colore RGB 102, 102, 102

e riempiamo l'area selezionata. Su questa fascia grigia collocheremo in seguito il menu. Ecco

come si presenta l'header:

Figura 4. Header e fascia di transizione

Per vedere il risultato senza le guide, premiamo Ctrl+'.' (punto) per nasconderle oppure

selezioniamo Visualizza>Mostra>Guide. Per ripristinare la visualizzazione delle guide premete

nuovamente Ctrl+'.' oppure usiamo il comando del menu "Visualizza".

Il risultato è disponibile nel file contenuto_finale.psd.

Organizzare i livelli

Abbiamo definito le dimensioni (altezza e larghezza) dell'header e scelto i colori, prevedendo lo

spazio per il menu di navigazione.

Figura 1. Immagine dell'header

Lasciamo per il momento questo spazio vuoto e rimandiamo la creazione del menu a

quando il layout sarà quasi completo, in modo da trovare gli allineamenti e l'equilibrio

corretti, nonchè lo stile più adatto (scelta dei colori, del rollover, dell'aspetto e così via)

rispetto all'interfaccia che abbiamo creato. Passiamo a creare il contenuto della home.

Nel progetto abbiamo previsto che la parte centrale della pagina contenga un articolo in primo

piano e un elenco degli articoli più interessanti. Nel file centrale_1.psd trovate, oltre all'header

già realizzato, le nuove immagini e i testi da utilizzare. Una guida delimita uno spazio di circa

220 pixel, dedicato alla colonna di sinistra che svilupperemo in seguito.

Per proseguire a lavorare sul vostro file creato nei precedenti tutorial, copiamo il contenuto dei

livelli ricorrendo al copia/incolla oppure affiancando i documenti e trascinando i livelli da un

documento all'altro. Senza dimenticare di aggiungere la nuova guida.

Nella palette Livelli del file centrale_1.psd sono presenti due cartelle che contengono il

materiale (immagini e testo) da disporre nella pagina.

Le sezioni da creare sono due:

1. una in alto per il tutorial "in primo piano";

2. una sezione sottostante "scelti per voi" che propone i tutorial più interessanti.

Come si vede dal contenuto dei livelli, entrambe le sezioni contengono un titolo, una immagine

relativa al tutorial e un breve testo di presentazione:

Figura 2. Pannello dei Livelli con i testi da utilizzare

I set di livelli Le versioni più recenti di Photoshop consentono di gestire al meglio i livelli organizzandoli in

cartelle (o set). Con un clic sull'icona Crea un nuovo set di livelli nella parte inferiore della

palette si può creare una cartella al cui interno collocare tutti i livelli appartenenti, ad esempio,

all'header o a un'altra sezione della pagina.

Le cartelle sono utilissime per snellire la palette, che spesso diventa molto lunga

(soprattutto quando si è alla ricerca di un'idea o si fanno varie prove). Inoltre rendono più

semplice la gestione dei livelli che possono essere modificati, spostati o temporaneamente

nascosti senza necessariamente collegarli tra loro. Particolarmente comoda è anche la

possibilità di applicare un certo metodo di fusione o modificare l'opacità dell'intero set senza

dover agire su ciascun livello.

La gestione dei set è molto semplice. Le cartelle possono essere aperte e chiuse con un clic

sulla freccina a fianco del nome. I livelli già esistenti possono essere inseriti nella

cartella con un semplice trascinamento oppure creati direttamente all'interno della cartella

stessa. Per escludere un livello da una cartella, basta trascinarlo al di fuori di essa e collocarlo

in una nuova posizione.Le cartelle possono essere anche nidificate creando una nuova cartella

all'interno di un set esistente.

Comunicare le informazioni

Ciò che ci apprestiamo a fare è dare una veste grafica alle immagini e al testo che sono

contenuti nei set di livelli e che appaiono molto disomogenei tra loro. Si tratta di trovare la

soluzione grafica migliore per comunicare le informazioni, per metterne in evidenza alcune e

renderne altre facilmente accessibili, tenendo sempre presente che le scelte grafiche sono

fondamentali per costruire l’orientamento all’interno del sito e far sentire

immediatamente il visitatore a proprio agio.

Una volta raccolto il materiale da utilizzare, bisogna capire come organizzarlo e quale soluzione

tecnica adottare. Le informazioni possono essere comunicate tramite colori, testi, icone,

immagini e con tecniche diverse: ad esempio si può decidere di veicolare un’informazione con

un’animazione in Flash, oppure utilizzando un testo in grafica con un certo colore e dimensione

e così via.

In questo senso, la creazione di un layout coinvolge diversi aspetti:

• la capacità creativa

• la capacità di comunicare con efficacia con il visitatore

• la conoscenza degli aspetti tecnici, ossia come creare al meglio il layout per lo

sviluppo HTML.

Ma torniamo al nostro sito. Come trovare un equilibrio tra immagini così diverse per dimensioni,

colori e il testo? Come distinguere le due sezioni della parte centrale? Non affrontiamo in

questa sede gli aspetti teorici, su cui potete trovare informazioni nell’articolo I principi della

Gestalt e l'impaginazione di una pagina Web.

Organizzare il materiale Le soluzioni potrebbero essere diverse; in questo caso ricorriamo a quella più comunemente

utilizzata, anche su siti molto noti, e che si rivela adatta alla maggior parte delle interfacce.

Una soluzione semplice ma efficace.

Nel file centrale_1.psd nascondiamo temporaneamente il set di livelli "scelti per voi"

con un clic sull'occhio accanto alla cartella corrispondente in modo da visualizzare soltanto il

contenuto del set "in primo piano". Questa cartella contiene un livello con titolo della sezione,

un livello per l’immagine che va ridimensionata e il testo descrittivo:

Figura 1. Contenuto del set in primo piano

Nel progetto abbiamo previsto che la sezione "in primo piano" contenga il tutorial a cui

vogliamo dare più rilevanza perché è il più recente oppure perché presenta un argomento

interessante. Le scelte grafiche devono perciò aiutare l'utente a cogliere intuitivamente la

natura di questa sezione, quantomeno per differenziarla a colpo d'occhio dall'elenco dei

tutorial che verranno inseriti nella parte sottostante nella sezione "scelti per voi".

Oltre alla posizione in alto e centrale rispetto alla pagina, una soluzione molto diffusa è quella

di utilizzare un’immagine leggermente più grande rispetto a quelle degli altri tutorial e un

testo descrittivo un po’ più lungo, aggiungendo un box colorato come sfondo.

Aiutandoci con delle guide, delimitiamo la larghezza dello spazio destinato al contenuto,

immaginando di lasciare circa 28/30 pixel a sinistra e a destra come margini. Creando

un’interfaccia, teniamo presente che gli spazi che fissiamo via via potranno richiedere dei

piccoli aggiustamenti in modo che siamo funzionali e armoniosi rispetto agli altri elementi della

pagina creati successivamente.

Affianchiamo testo descrittivo e immagine trovando la giusta proporzione in larghezza e

altezza per entrambi. Partiamo dal testo per poi ridimensionare l'immagine di conseguenza.

Facciamo doppio clic sul livello del testo descrittivo della fotografia (“Ottenere...”): il testo

viene evidenziato e compare il box che delimita il paragrafo.

Nota: quando si devono ancora definire gli spazi da destinare al testo rispetto agli altri

elementi della pagina può essere comodo utilizzare lo strumento "Testo" per creare un

paragrafo di testo. In questo modo potremo intervenire sulle dimensioni (numero di righe

o di parole) e sulla posizione del paragrafo molto rapidamente e senza dover modificare

manualmente gli “a capo”.

Per creare un paragrafo di testo occorre selezionare lo strumento "Testo", fare clic in un

punto del documento e trascinare fino a creare il box delle dimensioni desiderate. Non è

necessario essere precisi: la comodità del paragrafo è proprio quella di poterlo modificare in

qualsiasi momento.

È il momento di scegliere il font per il testo. In genere, per facilitare la lettura a video si

preferiscono i font sans-serif (senza grazie), come l’Arial, lasciando i font serif (con grazie),

come il Times New Roman, ai testi stampati su carta.

Nella barra delle opzioni impostiamo il font Arial di dimensioni 12 pixel e di colore nero. Poiché

questo testo verrà inserito nella pagina html come testo e non come immagine, abbiamo

scelto un font di sistema presente sulla maggioranza dei sistemi operativi e che, dove non

presente verrà sostituito da un font della famiglia sans-serif.

Photoshop consente anche di visualizzare il font senza anti-alias in modo da riprodurre la

modalità di visualizzazione del browser. Nella casella Imposta il metodo di anti-alias sono

presenti diversi gradi di anti-alias, più o meno marcato. Nel caso di testo che verrà reso con

HTML selezionare l’opzione Nessuno:

Figura 2. Impostazione del metodo anti-alias

Infine, scegliamo l'allineamento a sinistra con un clic sul pulsante corrispondente. Le

opzioni che abbiamo impostato sulla barra sono disponibili anche nella palette "Carattere", che

si può visualizzare con un clic sull'icona Attiva/Disattiva le palette carattere e paragrafo.

A questo punto è possibile ridimensionare il paragrafo. Portiamo il puntatore sulla maniglia

in basso a destra del box del paragrafo e quando appare la doppia freccia ridimensionare la

larghezza del testo in modo simile a quella mostrata nella figura. Lo scopo è ottenere un blocco

di testo di larghezza adatta allo spazio che abbiamo previsto (tenendo conto che a fianco

metteremo l’immagine) e che faciliti la lettura, evitando di avere righe con troppo corte

(due/tre parole soltanto) che spezzano troppo la lettura del testo:

Figura 3. Visualizzazione del paragrafo di testo inserito

Una volta trovata la dimensione che ci pare adatta, la applichiamo con un clic sul segno di

spunta nella barra delle opzioni oppure premendo il tasto Invio del tastierino numerico (il tasto

Invio vicino alla lettere serve per andare a capo).

Con lo strumento "Sposta", spostiamo il blocco di testo allineandolo al margine sinistro,

come mostrato nella figura:

Figura 4. Allineamento del blocco di testo

Immagini, testo e interpolazione

Quando si ha un'immagine accompagnata da un blocco di testo, occorre trovare un equilibrio

tra le loro dimensioni e lo spazio che occupano. Uno dei metodi più utilizzati per evitare

disequilibri e dare ordine alla pagina è quello di far corrispondere l'altezza dell'immagine a

quella del testo in modo che visivamente siano armonici e creino uno spazio “unico”, come

mostrato nella figura.

Figura 1. Disposizione di testo e immagine

È importante lasciare un po' di spazio tra l'immagine e il testo, evitando anche di avere

situazioni come quelle mostrate nella figura sottostante.

Figura 2. Disposizione con poco spazio

Qui oltre ad avere il testo attaccato all'immagine, le dimensioni della fotografia creano

problemi: nel primo caso una parte di riga va a capo e, oltre a rovinare l'equilibrio estetico,

spezza la lettura e il concetto della frase.

Nel secondo caso il disequilibrio è ancora più palese.

Figura 3. Altro esempio di disposizione non equlibrata

Ridimensionare l'immagine Vediamo come ridimensionare l'immagine. Abbiamo già stabilito lo spazio destinato

all'immagine quindi non ci rimane che usare il comando Trasforma. L'operazione di per sé è

abbastanza semplice: una volta scelto il comando Trasforma>Scala non resta che trascinare le

maniglie fino alla dimensione desiderata per ottenere un buon risultato.

In realtà, conoscendo un po' meglio Photoshop (e cosa accade quando trasciniamo le maniglie),

si può intervenire sul risultato migliorando la qualità e la nitidezza della fotografia.

I metodi di interpolazione Quando si ridimensiona un'immagine, Photoshop esegue un'operazione di ricampionamento,

ossia di modifica delle dimensioni in pixel, utilizzando un preciso metodo di interpolazione.

La riduzione delle dimensioni in pixel di un'immagine, come nel nostro caso, comporta

l'eliminazione di parte delle informazioni dall'immagine.

Analogamente, quando si ingrandisce un'immagine rispetto alle sue dimensioni originali,

Photoshop aggiunge dei nuovi pixel. In questo processo, Photoshop assegna dei valori

cromatici ai nuovi pixel sulla base dei pixel esistenti. Come? Utilizzando il metodo di

interpolazione che abbiamo scelto. Da qui deriva la qualità e la nitidezza dell'immagine

ridimensionata.

Come scegliere il metodo di interpolazione Per impostazione predefinita, Photoshop utilizza il metodo di interpolazione Bicubica

(migliore), il più adatto per le immagini di tipo fotografico. Vediamo quali altri metodi abbiamo

a disposizione e dove impostarli.

Raggiungiamo il menu Modifica>Preferenze>Generali oppure premiamo Ctrl+K. e clicchiamo

sull casella Interpolazione immagine per visualizzare tutte le opzioni disponibili.

Figura 4. Opzioni di interpolazione

L'opzione Vicina più prossima è la meno adatta per ridimensionare le immagini fotografiche,

in quanto produce un effetto scalettato, e si adatta meglio a quelle immagini con bordi netti

privi di antialias.

L'opzione Bilineare produce un risultato più simile all'opzione Bicubica ma di qualità inferiore.

Nella figura si può vedere un esempio di quanto accade utilizzando la Vicina più prossima e la

bilineare con un'immagine dai bordi netti (il .it di HTML.it) e la fotografia di esempio.

Figura 5. Verifica delle opzioni di interpolazione

Come si può notare, la Vicina più prossima ottiene risultati migliore con il testo di .it che ha

bordi netti, mentre distorce la fotografia.

Figura 6. Confronto tra metodi di interpolazione

L'opzione Bicubica è quella più appropriata al ridimensionamento delle immagini con molte

gradazioni di tonalità, come le fotografie. La Bicubica (migliore) dà un buon risultato nella

maggior parte dei casi.

La Bicubica più morbida può essere utilizzata per ingrandire le immagini.

Photoshop CS offre inoltre l'opzione Bicubica più nitida, adatta per ridurre le immagini, in

quanto mantiene la nitidezza dei dettagli. Ecco un esempio delle tre interpolazioni applicate

all'immagine dell'esempio.

Figura 7. Ulteriori metodi di interpolazione

Se vogliamo regolare personalmente la nitidezza, usiamo la Bicubica migliore e poi

applchiamo il filtro Maschera di contrasto.

Per questa immagine, selezioniamo Bicubica più nitida e clicchiamo su Ok. Se vogliamo

gestire personalmente il grado di nitidezza dell'immagine, selezioniamo Bicubica (migliore) e,

dopo aver ridimensionato l'immagine, ricorriamo al filtro "Maschera di contrasto2 (di cui

abbiamo parlato in questo Ottenere thumbnail belle e nitide).

Il metodo di interpolazione scelto rimane impostato e verrà utilizzato per tutti i

successivi ridimensionamenti.

Ridimensionare l'immagine. Attiviamo con un clic il livello foto e selezioniamo

Modifica>Trasforma>Scala oppure premiamo Ctrl+T per attivare la trasformazione libera.

Per mantenere le proporzioni tenere premuto il tasto Maiusc (oppure attivare l'icona col

simbolo della catena nella barra delle opzioni) e trascinare una maniglia di angolo fino a

ottenere la dimensione desiderata. Noi abbiamo scelto il 35% ca.

Aiutandoci con lo strumento "Sposta" e le guide, collochiamo l'immagine a sinistra del testo.

Ecco come appare la nostra interfaccia:

Grafica e HTML

È arrivato il momento di lavorare un po' sull'aspetto di questa sezione. Possiamo lasciarla così

se ci piace oppure possiamo provare ad aggiungere degli elementi grafici.

È anche il momento di pensare a come verrà sviluppata la pagina web, a come rendere i nostri

elementi grafici con i fogli di stile. In questo senso, è interessante cercare di aggiungere degli

elementi grafici che non vengono esportati come immagine, ma che verranno resi con i

fogli di stile e con gli attributi dei vari tag.

Giocare con bordi, sfondi, cellpadding e cellspacing sono solo alcune delle possibilità che si

offrono al webdesigner. È molto facile creare un'interfaccia bellissima in cui ogni singolo

pezzettino va tagliato ed esportato per essere “semplicemente” montato come un puzzle

nell'HTML. Aldilà del peso in kb di una pagina costruita in questo modo, è invece molto più

stimolante pensare a come sfruttare al meglio l'html e i css dal punto di vista grafico. Ecco

alcune soluzioni.

Differenziare con lo sfondo Utilizzando gli attributi per il colore di sfondo si può creare un box che dia maggior risalto alla

nostra sezione “in primo piano”. L'importante è scegliere un colore che non renda difficoltosa la

lettura:

Figura 1. Esempio: differenziare lo sfondo

Nel creare lo sfondo occorre prevedere di usare il cellpadding per lasciare un po' di margine

dai bordi del box ed evitare di “impiccare” immagine e testo al bordo. Come si può vedere nella

figura, i margini abbelliscono il box e migliorano la leggibilità del testo:

Figura 2. Esempio: testo su sfondo grigio

Sfruttando l'attributo “border” si può creare un filetto di colore leggermente più scuro:

Figura 3. Esempio: uso di un bordo

Si tratta di piccoli interventi che non aumentano il peso in kb della home: infatti, l'unica

immagine che verrà esportata da Photoshop è la fotografia che abbiamo ridimensionato. Tutto

il resto verrà creato direttamente nell'HTML.

Ecco altre varianti che sfruttano l'HTML a scopo grafico che potrebbero servirvi come spunto

per trovare nuove soluzioni:

Figura 4. Esempio: variazioni sul tema

Anche in questo caso, i colori vengono aggiunti nell'HTML e l'unico elemento grafico da

esportare è la fotografia. Anche la scritta “Leggi il tutorial” e le freccine sono create nell'HTML.

Con questa soluzione il nostro box guadagna in estetica e la pagina HTML in peso: infatti,

l'immagine è leggermente più piccola di quella usata in precedenza e, di conseguenza,

riusciamo a “rosicchiare” ancora qualcosina in peso. L'equilibrio in altezza con il testo lo

gestiamo con la fascia verde al di sotto della foto:

Figura 5. Esempio: variazioni sul tema

Volendo, possiamo anche realizzare un box dagli angoli arrotondati e aumentare il bordo

colorato (in questo caso di colore bianco) intorno all'immagine. Non è necessario esportare

tutto lo sfondo, ma solo gli angoli arrotondati come mostrato nella figura sottostante:

Figura 6. Esempio: angoli arrotondati

Il disegno del rettangolo con gli angoli arrotondati è molto semplice: basta utilizzare l'apposito

strumento Rettangolo arrotondato e impostare il raggio nella barra delle opzioni.

Nel file contenuto_2.psd si trova quanto è stato realizzato finora

I titoli

Dopo aver visto come sistemare le immagini, affrontiamo la disposizione e le proporzioni dei

titoli. Cominciamo dal titolo “In primo piano” dell'esempio.

Nel file contenuto_2.psd scegliere il tipo di box che si preferisce e spegnere gli altri livelli. Ad

esempio io ho scelto di tenere quello con lo sfondo beige e il link “Leggi il tutorial”.

Attiviamo con un clic il livello di testo “in primo piano” e con lo strumento Sposta lo

collochiamo al di sopra del box a sinistra, calcolando sempre di lasciare un po’ di spazio tra il

box e la fascia grigia dell’header, come mostrato nella figura:

Figura 1. Sistemazione del testo

Facciamo doppio clic sul livello del testo per renderlo modificabile e nella barra delle opzioni,

poi clicchiamo sull’icona Attiva/Disattiva delle palette Carattere e Paragrafo per

visualizzare le opzioni per il testo.

Questa palette contiene molte più opzioni rispetto a quelle visualizzate nella barra delle opzioni.

Usiamole per impostare l’anti-alias su Arrotonda: questo testo, infatti, a differenza del

testo descrittivo, verrà esportato come immagine.

A questo punto si sceglie un font appropriato alla nostra interfaccia. La scelta del font gioca

un ruolo fondamentale nel stabilire il tono e lo stile della comunicazione.

Talvolta la scelta del font viene sottovalutata, ma in realtà il carattere lavora in sinergia

con gli altri elementi dell’interfaccia e spesso ne determina l’identità. Anche il colore e la

grandezza devono essere appropriati. Come sceglierli? L’unico modo è fare un po’ di prove fino

a trovare il carattere che ci convince, tenendo sempre presente, oltre all’estetica, il target a cui

ci rivolgiamo e gli obiettivi del sito. Infine, quando l’interfaccia sarà completa, sarà facile

verificare se il font scelto funziona oppure se occorre sostituirlo.

Nella figura sottostante vediamo due font palesemente errati rispetto all’interfaccia: il Comic,

che stabilisce uno stile troppo informale e giocoso e il Lucida Calligraphy, che con le sue grazie

e il suo stile elegante, non si adattano alla nostra interfaccia:

Figura 2. Confronto tra 2 font

Rispetto a questi due font, un carattere senza grazie e dal sapore un po’ tecnologico sarebbe

più appropriato al nostro layout. Scegliamo una soluzione che si adatta alla maggior parte dei

casi: Arial Black (16 pixel di grandezza e colore grigio) a cui modifichiamo la spaziatura tra i

caratteri, come si vede nella figura sottostante:

Figura 3. Impostazione del font Arial Black

Nella scelta del carattere, si può provare anche a variare la quantità di anti-alias,

applicando le diverse opzioni disponibili. Alcuni font, infatti, risultano più definiti con l’opzione

Netto piuttosto che con Arrotonda o Forte, che applicano una quantità maggiore di anti-alias.

Infine, allineiamo il titolo a un elemento del box, ad esempio il bordo dell’immagine come

mostrato nella figura sottostante. Gli allineamenti sono importanti per dare ordine alla pagina:

Figura 4. Allineamento del titolo

Spostiamo la nostra attenzione sul testo vero e proprio. Vediamo come differenziare il titolo

(nell'esempio “Ottenere thumbnail...”) dal testo descrittivo in modo che sia immediatamente

riconoscibile e funzioni anche da link alla corrispondente pagina interna.

Selezioniamo il livello di testo corrispondente e lo attiviamo con un doppio clic. Poi

selezioniamo le parole del titolo e nella barra delle opzioni e scegliamo un colore verde che

faccia risaltare il titolo rispetto al testo, ad esempio #468206, e scegliamo Bold (grassetto)

come stile.

Applichiamo la modifica con un clic sul segno di spunta. Nel codice HTML il colore sarà

realizzato con dei CSS che applicheremo sui link. Ma di questo parleremo più avanti. Ecco

come appare l’interfaccia sin qui costruita:

Figura 5. Stato dell'interfaccia a meta dell'opera

Ridimensionare le immagini

In questa lezione vediamo come risolvere alcuni problemi legati al ridimensionamento delle

immagini con le 'Maschere di livello'. Lo facciamo creando la sezione “scelti per voi” del nostro

esempio.

Chiudiamo la cartella”in primo piano” con un clic sulla freccina corrispondente e riattiviamo la

cartella “scelti per voi” che avevamo temporaneamente nascosto per lavorare meglio.

Abbiamo a disposizione immagini di diversa dimensione e il testo corrispondente. A differenza

della sezione “in primo piano” le immagini sono più piccole ed il testo più breve; questo perché

vogliamo avere un sorta di sommario di rapida consultazione e veloce da caricare.

L’aspetto definitivo della sezione è questo:

Figura 1. Anteprima della sezione 'Scelti per voi'

Le operazioni da compiere sono simili a quelle viste per la sezione 'in primo piano': trovare una

dimensione per il testo e la foto corrispondente; applicare lo stile scelto per il testo e il titolo, e

lasciare lo stesso spazio tra una foto e l’altra.

Il ridimensionamento delle immagini però presenta qualche difficoltà. Infatti, se si prova a

ridimensionare le immagini alla dimensione stabilita (79 x 42 pixel) non si ottengono buoni

risultati. Nella figura si vede cosa può accadere: se si tiene ferma l’altezza, come nei primi tre

casi, le immagini risultano troppo piccole e disomogenee. Se si tiene ferma la larghezza, come

nell’ultimo caso, l’immagine risulta troppo grande:

Figura 2. Uso di immagini ridimensionate

In questi casi, ossia quando le immagini sono molto diverse tra loro, si può scegliere di

ridimensionare la foto lasciando visibile solo una parte di essa. Una procedura molto comoda

per eseguire questa operazione è ricorrere alle maschere di livello.

Ridimensionare le immagini con le maschere Le maschere di livello sono molto comode quando si devono fare di questi ridimensionamenti,

in quanto ci permettono di trovare l’inquadratura migliore prima di applicare la trasformazione

e di fare piccoli aggiustamenti anche in seguito. Oltre a ottimizzare il nostro lavoro, ci

renderanno anche più facile ridimensionare le nuove immagini che col tempo saranno sostituite

a quelle attuali.

Facciamo attezione però a non ridimensionare più volte la stessa immagine, altrimenti

rischiamo di perdere in qualità e nitidezza. Se vogliamo fare un po’ di prove, è meglio lavorare

su una copia del livello contenente l’immagine originale.

Dopo aver scelto le dimensioni delle immagini, ossia 79 x 42 pixel, nascondiamo

temporaneamente i livelli contenenti le fotografie ad eccezione di quello che si vuole

ridimensionare per primo, ad esempio la barca (livello “difetti”), che invece attiviamo con un

clic.

Selezioniamo lo strumento Selezione rettangolare, impostiamo nella barra delle opzioni 0 px

alla voce 'Sfuma' (non vogliamo una selezione sfumata) e tracciamo, all’incirca al centro della

fotografia, una selezione di 79 x 42 pixel.

Otteniamo le dimensioni trascinando e tenendo d’occhio i valori del pannello Info, oppure

selezionando Dimensione fissa dalla casella Stile nella barra delle opzioni e specificando le

dimensioni nelle due caselle accanto. In questo caso basta un semplice clic sull’immagine per

creare la selezione:

Figura 3. Creazione della maschera - Selezione

Senza deselezionare, creiamo una maschera di livello con un clic sull’icona Aggiungi una

maschera di livello nella palette Livelli. L’immagine è immediatamente mascherata e ne

rimane visibile solo la porzione selezionata in precedenza.

Nella palette, sul livello viene aggiunta la maschera accanto all’anteprima. Il nero è

rappresenta la parte mascherata, mentre il bianco la parte visibile. Accanto all’icona dell’occhio

è comparso un cerchio bianco su sfondo scuro che indica che stiamo lavorando sulla maschera:

Figura 4. Creazione della maschera - Aggiunta

A questo punto, si può ridimensionare l’immagine. Scollegare l’immagine dalla maschera, in

modo da non ridimensionare anche la maschera che deve mantenere le dimensioni scelte, con

un clic sul simbolo della catena presente tra l’anteprima del livello e l’indicazione della

maschera.

Clicchiamo sull’anteprima del livello per attivarlo e far comparire, al posto del cerchio bianco in

campo scuro, l’icona del pennello, che indica che si lavora sul livello, ossia sull’immagine che

esso contiene. Se non si esegue questa operazione, le modifiche vengono fatte alla maschera:

Figura 5. Attivazione dell'anteprima

Digitando Ctrl+T o selezionando Modifica>Trasforma>Scala ridimensioniamo l’immagine. Man

mano che si ridimensiona, si può spostare l’immagine mascherata per cercare l’inquadratura

migliore prima di applicare le modifiche.

Infine, quando siamo soddisfatti, clicchiamo sul segno di spunta nella barra delle opzioni. Ed

ecco come potrebbe apparire l’immagine:

Figura 6. Immagine ridimensionata

Colleghiamo nuovamente la maschera al livello con un clic tra l’anteprima e la maschera (deve

riapparire l’icona della catena) e diamo all’immagine la posizione definitiva accanto al testo. Se

si vogliono fare delle piccole modifiche (aggiustare l’inquadratura, modificare le dimensioni)

basta scollegare il livello dalla maschera e apportare i cambiamenti all’immagine:

Figura 7. Immagine nel contesto dell'interfaccia

Ripetendo la stessa procedura, applichiamo la maschera alle altre immagini per ridimensionarle,

scegliendo per ognuna l’inquadratura migliore.

Non è necessario creare ogni volta la selezione iniziale con lo strumento di selezione

rettangolare. La si può ottenere selezionando la maschera appena creata nel seguente modo:

1. Premendo il tasto Ctrl e portiamo il puntatore sulla maschera presente sul livello.

Appare una manina con un quadratino di selezione.

2. Clicchiamo: viene creata la selezione della maschera. Con lo strumento di selezione la

spostiamo per posizionarla meglio sulla nuova immagine da ridimensionare.

3. Con la selezione attiva applichiamo la maschera al nuovo livello da ridimensionare

(ricordando di attivarlo prima con un clic).

Le modifiche realizzate finora sono contenute nel il file centrale3.psd.

Allineamenti e colorazioni Le pagine ricche di contenuto, come quella che stiamo creando, hanno bisogno di trovare un

proprio equilibrio per apparire ordinate e piacevoli alla vista e alla lettura. Una tecnica che

contribuisce a ciò è quella di trovare degli allineamenti tra i vari elementi della pagina.

In modo analogo a quanto è stato fatto per la prima sezione, dove il titolo è stato allineato al

bordo dell’immagine, nella sezione sottostante si è sfruttata questa linea immaginaria (indicata

nella figura dalle guide) per disporre il contenuto.

Le nuove immagini sono state perciò allineate al bordo dell’immagine grande in alto, come si

può vedere nella figura. A seconda della grafica che state creando potete trovare allineamenti

diversi; con qualche prova sarà facile individuare quale disposizione funziona meglio rispetto al

contenuto:

Figura 1. Allineamento delle immagini

Allo stesso modo il testo descrittivo rispetta idealmente il margine destro del box in alto, come

si vede nella figura sottostante. Per rispettare questo margine ed evitare di avere una riga

troppo corta, il testo descrittivo dell’ultima immagine è stato leggermente modificato,

invertendo alcune parole. Si tratta di un piccolo cambiamento che può capitare di dover fare,

sempre che il contenuto testuale o il nostro cliente lo permetta:

Figura 2. Allineamento del testo

Completiamo la sezione aggiungendo il titolo. Usiamo il font già scelto (Arial Black) sia per

motivi di uniformità sia per creare una sorta di codice di navigazione per l’utente, che

potrà così familiarizzare velocemente con la nostra interfaccia e riconoscere a colpo d’occhio la

funzione dei vari elementi (anche) dall’aspetto.

Per distinguere ulteriormente le due sezioni e i loro argomenti, si può creare un titolo che

mantiene lo stesso font, ma che sfrutta un colore di sfondo per creare una separazione, come

mostrato nella figura sottostante:

Figura 3. Disporre il titolo

La creazione dello sfondo è molto semplice: su un nuovo livello posto al di sotto del titolo,

creiamo una selezione rettangolare non sfumata di 480 x 20 pixel e la riempiamo col colore

desiderato.

La dimensione 480 pixel riprende quella del box beige, mentre l’altezza è quella sufficiente per

collocare il titolo.

Ora che l’interfaccia comincia a definirsi, si possono valutare meglio le scelte fatte finora e

rivedere lo stile o il colore di alcuni elementi. Nel caso del titolo, il colore grigio scelto in

precedenza non sembra funzionare molto.

Si può provare a cambiare colore giocando sulle tonalità verdi utilizzate per altri elementi

dell’interfaccia. Ad esempio si può provare ad applicare il verde #7CA64E, che richiama il colore

dei link,

Figura 4. Anteprima colore #7CA64E

oppure il verde #8C957C usato per creare il bordo dell’immagine della prima sezione:

Figura 5. Anteprima colore #8C957C

Per cambiare colore rapidamente allo sfondo, invece di selezionarlo ogni volta prima di

riempirlo di colore, si può attivare l’opzione Blocca i pixel trasparenti nella parte superiore della

palette Livelli e procedere alla colorazione. In questo modo verranno colorate solo le parti

opache del livello e le altre rimarranno invariate, rispettando l’anti-alias presente ed evitando

di avere bordi seghettati o un po’ rovinati da più cambiamenti di colore:

Figura 6. Bloccare i pixel

Inoltre, un metodo molto veloce per riempire di colore un elemento è quello di ricorrere

alla tastiera. Premendo Alt+Backspace lo sfondo viene riempito con il colore di primo piano;

premendo Ctrl+Backspace si utilizza il colore di sfondo. Usando questi due metodi (opzione

Blocca pixel trasparenti e la tastiera per colorare) si evita di selezionare l’elemento e si può

cambiare colore e idea molto più rapidamente.

Una volta scelto il colore per i titoli, ad esempio il verde un po’ più brillante, ecco come appare

l’interfaccia:

Figura 7. Anteprima definitiva

Il file centrale4.psd contiene quanto realizzato finora.

Definire i CSS

Come abbiamo visto, quando si crea un’interfaccia, occorre stabilire uno standard grafico

(colori e aspetto) per i principali elementi e mantenerlo nelle varie pagine del sito.

La scelta del colore e del font per il testo, per i link nei vari stati (hover, active, visited), per i

titoli o per i pulsanti contribuisce a creare un vero e proprio codice all’interno del sito,

facilitando la navigabilità e il reperimento delle informazioni. Le soluzioni grafiche possono

essere davvero tante; le argomentazioni teoriche sul perché e il per come operare sono

altrettanto numerose.

Una volta fatta la nostra scelta, dobbiamo cercare di essere coerenti e di pensare sempre a

come sfruttare al meglio i CSS per realizzarla.

Nel nostro caso, abbiamo stabilito uno standard per i titoli delle sezioni (Arial Black, colore

verde o bianco su verde), che manterremo anche per le pagine interne. I titoli, che

costituiscono un elemento che non si presuppone di aggiornare costantemente, verranno

esportati come immagine; testo e titoli dei tutorial, invece, verranno gestiti con i CSS

direttamente nella pagina HTML senza esportare nulla da Photoshop. Anche di questi è stato

deciso l’aspetto; non rimane che stabilire i colori per il rollover del link rappresentato dai titoli

dei tutorial.

Ecco la tavolozza (palette) dei colori utilizzati finora con l’indicazione dello stile da adottare per

i link:

Figura 1. Tavolozza dei colori

Per lo stato hover e active dei link si è scelto un verde un po’ più brillante, mentre per

distinguere i link visitati, un verde meno saturo. Al rollover, il link appare sottolineato. Ecco gli

attributi del link per il CSS:

Figura 2. Aspetto dei link

I CSS rappresentano uno strumento per realizzare parte delle nostre scelte grafiche. È perciò

importante conoscerne le potenzialità e i limiti per sfruttarli al meglio e costruire pagine

belle e leggere. Ad esempio, nella figura vengono riepilogati gli attributi del box che saranno

gestiti dai fogli di stile:

Figura 3. Da Photoshop ai CSS

Come si può notare, tutti gli elementi del box sono creati direttamente nell’HTML, ad

eccezione, ovviamente, della thumbnail. Ciò permette di avere pagine di peso ridotto e

soprattutto regala una grande flessibilità.

Ad esempio, è molto semplice cambiare il colore a un elemento durante lo sviluppo HTML o gli

aggiornamenti al sito: è sufficiente infatti modificare un piccolo pezzetto di codice invece di

riaprire Photoshop ed esportare nuovamente le immagini.

I pulsanti

I pulsanti Resa Cross-Browser di elementi standard e grafici

Proseguiamo il nostro esperimento, in questa lezione mentre creiamo il nostro layout

affrontiamo anche il tema della visualizzazione delle nostre pagine, in particolare dei pulsanti,

su browser diversi e vediamo delle ipotesi di adeguamento.

Nel file def1.psd abbiamo l’interfaccia completa, a cui manca soltanto il menu di navigazione.

Rispetto a quanto realizzato finora è stata aggiunta la colonna di sinistra dove, come previsto

nel progetto, trova collocazione la sezione per la ricerca di informazioni all’interno del sito e i

link agli articoli più letti. Inoltre, a chiusura della pagina, è stato aggiunto un footer (piè di

pagina), come mostrato nella figura sottostante:

Figura 1. Vista globale dell'interfaccia

La realizzazione della colonna e del footer non presenta particolari difficoltà e richiede l’utilizzo

delle stesse tecniche già utilizzate per creare gli altri elementi dell’interfaccia. Vediamo

comunque alcuni aspetti della loro creazione.

Sezione “Cerca” La sezione "Cerca" presenta i campi per effettuare la ricerca nel sito e riprende i colori e i font

già utilizzati per la parte centrale dell’interfaccia. Il colore di sfondo è quello utilizzato per il box

“In primo piano”, così come il verde della fascia del titolo è quello scelto in precedenza. Si è

soltanto diminuita la grandezza del carattere del titolo da 16 px a 14 pixel:

Figura 2. Sezione Cerca

Il pulsante Cerca

Il pulsante Cerca, che attiva la ricerca delle parole digitate, è realizzato come elemento grafico

e sostituisce il pulsante classico realizzato tramite HTML.

Il vantaggio di avere un pulsante in grafica è quello, oltre di gestire graficamente anche i

dettagli dell’interfaccia, di poter prevedere esattamente lo spazio che occupa. Infatti, a

seconda del browser, il pulsante standard creato con l’HTML occupa spazi leggermente diversi,

che possono creare problemi e disallineamenti specie se lo spazio che abbiamo a disposizione è

poco.

Si tratta di una scelta facoltativa; se usiamo il pulsante standard (per motivi diversi tecnici,

grafici, ecc.) ed è necessario che l’interfaccia sia visualizzata correttamente sui vari browser,

facciamo alcune prove nell’HTML per verificare quanto spazio occorre. Comunque occorre

prevedere già in Photoshop un minimo di tolleranza in modo che il layout “resista” anche

a piccole variazioni della dimensione del pulsante.

Inoltre possiamo intervenire sull’aspetto dei pulsanti standard con i CSS (sempre browser

permettendo). Ecco una prova fatta con quattro browser diversi su Windows 2000. È stata

creata una tabella di 220 pixel di larghezza (tanto quanto la colonna di sinistra) impostando un

cellpadding di 10 pixel. L’altezza non è stata definita. All’interno della cella è stato inserito il

form con i campi della ricerca separati da un semplice <br>:

Figura 3. Visualizzazione crossbrowser del pulsante

Come si può vedere, con lo stesso codice HTML, si ottengono risultati diversi.

Innanzitutto, l’altezza del form è diversa. Internet Explorer 6 si prende un po’ più di spazio in

fondo così come un vecchio browser come Netscape 4.8.

Il pulsante Cerca ha dimensioni differenti in tutti i browser, come si vede nella figura

sottostante:

Figura 4. Vista crossbrowser: dimensioni del pulsante

Le differenze sono soprattutto nella lunghezza (e non ce n’è uno uguale all’altro): 54, 58, 56,

51. Di fatto si tratta di pochi pixel, ma quando abbiamo poco spazio sulla nostra interfaccia

rischiano di complicarci la vita nell’HTML. Comunque, basta tenere conto di ciò nella creazione

dell’interfaccia oppure ricorrere ai pulsanti in grafica per risolvere il problema.

Sezione “I più letti” Anche questa sezione riprende colori e font utilizzati in precedenza. Per il colore dei titoli, che

sono di fatto dei link che rimandano allo specifico articolo, è stato mantenuto il codice colore

(verde) previsto dal foglio di stile che abbiamo creato nelle lezioni precedenti. Soltanto il font è

dimensione inferiore: 10 pixel invece di 12 pixel:

Figura 5. Sezione I più letti

Per facilitare la lettura dell’elenco dei titoli, si è fatto ricorso a un metodo molto semplice:

alternare il colore delle righe.

Come si vede nella figura sottostante, il colore più scuro è stato ottenuto creando delle righe

dello stesso colore dello sfondo e impostando il metodo di fusione del livello su Moltiplica.

Figura 6. Metodi di fusione per il colore di sfondo

La modifica del metodo di fusione è una tecnica molto semplice, che, quando si hanno dei

dubbi sul colore da scegliere, aiuta a trovare velocemente una possibile soluzione. In questo

caso abbiamo scelto il Moltiplica, ma anche altri metodi (ad esempio il Sovrapponi) offrono

spesso risultati interessanti. Vista la semplicità della procedura, vale sempre la pena fare

qualche prova con metodi di fusione diversi:

Una volta terminata la creazione di tutte le sezioni della pagina, è il momento di verificare il

suo aspetto d’insieme e, se necessario, intervenire sugli spazi e gli allineamenti per trovare

una disposizione più armoniosa.

In questo caso, sono state spostate leggermente verso l’alto le due sezioni centrali in modo da

trovare la posizione migliore rispetto ai nuovi contenuti.

Le guide presenti nel file aiutano a individuare queste modifiche. Ad esempio, come si vede

nella figura sottostante, si è allineata la fine dello sfondo verde del titolo “Cerca” con il titolo

“in primo piano” e lo sfondo verde de “i più letti” con la fine del box beige.

Figura 7. Aggiustamenti sugli elementi dell'interfaccia

Si tratta di scelte che vanno fatte di volta in volta e che possono essere ovviamente anche

diverse da queste; lo scopo è trovare delle linee invisibili che portano a creare una

pagina equilibrata, che, pur senza essere particolarmente creativa, sia comunque piacevole

da guardare e facile da usare.

Il footer A chiusura della pagina è stato inserita una fascia colorata, riprendendo il grigio

dell’intestazione (header). Sotto di essa, trova posto il copyright:

Figura 8. Vista del footer

Il footer è utile per chiudere la pagina e completare l’equilibrio dei contenuti. Il footer è inoltre

utile nella pagine interne e soprattutto in quelle lunghe, che occorre scorrere verso il basso fino

a non vedere più l’header. In questi casi la chiusura della pagina contribuisce a dare

un’informazione immediata al visitatore, che a colpo d’occhio e intuitivamente capisce di essere

arrivato alla fine del contenuto:

Figura 9. Vista globale dell'interfaccia

Con questi nuovi elementi l’home page è quasi completa. Non resta che aggiungere il menu di

navigazione.

Il menu

Eccoci arrivati all’ultimo elemento dell’interfaccia: il menu. Quando si crea il menu di

navigazione abbiamo a disposizione un’ampia scelta di soluzioni tecniche: dal semplice

pulsante in grafica col rollover al menu in DHTML o in Flash.

La scelta di un menu piuttosto che un altro dipende essenzialmente dalla funzionalità che

vogliamo ottenere e dalla struttura del sito. Ad esempio, se abbiamo un sito di parecchie

pagine e articolato in numerose sottosezioni, e vogliamo che l’utente possa raggiungere

l’informazione ricercata senza troppi clic, un menu a tendina o ad albero fa al caso nostro.

In questo caso in Photoshop dovremo prevedere solo spazi e colori, pensando di realizzare il

menu con altre tecniche. Questo vale anche quando prevediamo di realizzare il menu con i

CSS.

Se vogliamo un menu composto da pulsanti in grafica, occorre preparare in Photoshop le

immagini dei pulsanti nei vari stati che vogliamo poi realizzare in HTML: normale, sopra (ossia

il rollover), premuto e attivo. Potete realizzare immagini diverse per ognuno di questi stati, ma,

in genere, sono sufficienti due immagini: una per lo stato normale e una per il rollover.

Se non esistono particolari vincoli tecnici, sentiamoci liberi di scegliere la soluzione che

preferiamo, ricordando di valutare anche gli eventuali aggiornamenti del sito nel tempo

come modifica o l'aggiunta di pulsanti.

Dal punto di vista grafico, l’aspetto del menu ci aiuta a dare un’identità all’interfaccia. A

volte basta la scelta di un font particolare o di un colore o di una forma per cambiare l’impatto

della nostra home.

Nel nostro caso, con un’interfaccia fatta di colori pieni e molto lineare, abbiamo scelto di

realizzare un menu che si accordasse a questo stile, come si vede nella figura sottostante.

Figura 1. Vista del menu

Si è ripreso l’Arial come font per le etichette dei pulsanti. Si potrebbe usare anche un font

diverso, facendo attenzione però a non creare un insieme poco armonioso: sulla home sono

presenti già due font diversi (quello del logo e quello del contenuto) e un terzo font, magari

molto dissimile, potrebbe non essere la soluzione appropriata. Comunque, sono scelte che

vanno fatte di volta in volta a seconda del layout che stiamo creando.

Il font è di colore bianco, con dimensioni di 11 pixel. Per migliorare la leggibilità, la

spaziatura tra i caratteri è impostata al valore 10 e l’anti-alias su 'Preciso'. Tutte queste opzioni

le trovate nella palette Carattere, visualizzabile dalla barra delle opzioni dello strumento 'Testo'

oppure da Finestra>Carattere.

I pulsanti hanno tutti la stessa dimensione (80 x 25 pixel) e sono separati da un filetto di

colore verde, che si raccorda alla fascetta verde soprastante. Per il rollover si è scelto il colore

grigio scuro. La figura sottostante mostra i due stati del pulsante home: normale e rollover;

quest’ultimo verrà utilizzato anche per lo stato “premuto”.

Figura 2. I pulsanti per il rollover

Nel file def2.psd, ci sono tutti i livelli relativi al menu nella cartella menu (palette 'Livelli').

Se siamo a corto di idee per il nostro menu, Photoshop mette a disposizione diversi stili

predefiniti per creare i pulsanti, che possono essere applicati dalla palette 'Stili'

(Finestra>Stili) a qualsiasi forma e testo. Facendo clic sulla freccia in alto a sinistra nella

palette, potete caricare diversi stili predefiniti.

Figura 3. Vista della Palette Stili

L’utilizzo degli stili è molto semplice: con un clic si applicano alla forma o al testo desiderato.

Inoltre, possono essere facilmente personalizzati, intervenendo sulle opzioni degli effetti

aggiunti al livello. Se invece volete creare un menu a tab oppure con i CSS in Un menu a tab

stile Apple trovate interessanti informazioni e link.

Interfacce flessibili

L’interfaccia che abbiamo costruito stabilisce dimensioni fisse sia per la pagina principale sia

per i vari elementi del suo contenuto.

Le pagine interne di questo sito hanno però un contenuto variabile: infatti presenteranno testi

e immagini di lunghezza e quantità non prevedibili a priori. Abbiamo perciò bisogno di creare

una pagina interna che sia un contenitore flessibile, in grado di adattarsi perfettamente al

contenuto, quale esso sia.

Si tratta di un’esigenza che ci si trova spesso ad affrontare soprattutto quando il nostro sito è

fatto di pagine dinamiche con database che forniscono i contenuti.

Una interfaccia di questo tipo si costruisce in parte in Photoshop e in parte in HTML. Si tratta di

individuare quali modifiche subirà l’interfaccia e, di conseguenza, disegnare in Photoshop

elementi che dovranno essere "elastici".

Nel nostro caso, la pagina interna mantiene la struttura della home con la colonna beige a

sinistra, in cui manteniamo la sezione “cerca” e in cui possiamo inserire altri contenuti che

riteniamo utili (link, banner, ecc.). È proprio questa colonna a dover essere mobile in modo da

adattarsi al contenuto centrale e raccordarsi in modo corretto all’header e il footer,

conservando inalterato il layout.

Le scelte grafiche che abbiamo fatto per questa colonna ci aiutano nella trasformazione da

dimensioni fisse a dimensioni elastiche. Vediamo perché.

Se la colonna fosse costituita da un’immagine di sfondo con dimensioni fisse (ad esempio di

220 x 486 pixel, ossia la grandezza della colonna nella home) ciò che otterremmo è, nella

migliore delle ipotesi, una pagina interna come quella sottostante, dove l’inserimento del testo

nella parte centrale provoca un troncamento della colonna:

Figura 1. Colonna con immagine fissa

Quando abbiamo bisogno di elasticità e di elementi mobili, non utilizziamo immagini e celle

di dimensione fissa. Nel caso della nostra colonna, la soluzione è molto semplice.

Avendo realizzato lo sfondo della colonna con un semplice colore e non con un’immagine di

dimensioni fisse (da Photoshop NON esporteremo in blocco tutta l’immagine della colonna,

neanche il solo sfondo beige), potremo impostare il colore direttamente nel codice HTML,

assegnandolo ad esempio come sfondo della tabella o della cella che contiene la colonna,

ottenendo una perfetta chiusura della pagina:

Figura 2. La colonna con colore impostato in HTML

Una volta previsto di usare un colore piatto come sfondo della colonna in Photoshop, si tratta

di strutturare correttamente la pagina html, impostando ad esempio due tabelle, una per il

contenuto e una per la colonna, in modo che all’allungarsi della parte centrale si allunghi

automaticamente anche la colonna, spingendo il footer verso il basso. In questi casi funziona

bene anche usare un pattern di sfondo invece di un colore piatto:

Figura 3. Uso di un pattern per lo sfondo

Ricordate sempre che la flessibilità di una pagina a contenuto variabile dipende da come

abbiamo disegnato il layout in Photoshop e da come lo realizziamo in HTML. I due aspetti sono

inscindibili.

Filetti elastici

In questa interfaccia non abbiamo usato filetti, ma vorrei comunque parlarne per darvi un’idea

di come sia possibile realizzare elementi grafici tenendo sempre d’occhio l’HTML (CSS inclusi) e

la necessità di avere interfacce mobili che mantengano il loro aspetto indipendentemente dal

contenuto. Vediamo praticamente come fare.

Ipotizziamo di voler realizzare un box di questo tipo, dedicato alle news:

Figura 4. Box delle news

Abbiamo un filetto verde che delimita lo spazio del box e il testo di una news. In genere questo

tipo di contenuti non vengono gestiti in modo manuale ma dinamicamente. Ciò significa che

dobbiamo creare un box in grado di mantenere il suo aspetto anche in caso di un testo più

lungo o più corto. Come fare ad avere dei filetti allungabili a piacere?

Se esportiamo da Photoshop un’immagine del box di dimensioni fisse da usare come

sfondo della tabella HTML per il testo (vd. figura sottostante), non otteniamo il risultato

flessibile che ci occorre ma solo molti grattacapi.

Figura 5. Box a dimensioni fisse

Se il testo sarà più lungo, anche la cella si allungherà e lo sfondo sarà ripetuto con un brutto

effetto.

Figura 6. Box a dimensioni fisse con la news

Per evitare questo non dobbiamo rinunciare al filetto del box, ma dobbiamo realizzarlo in

HTML sfruttando i CSS applicati alla tabella:

• colore e dimensione del bordo per impostare il filetto, in questo caso di 1 px e di colore

verde;

• cellpadding per evitare che il testo rimanga “impiccato” al bordo.

In questo modo avremo un box flessibile pronto a contenere qualsiasi quantità di testo; ecco

come appare il box con lo stesso identico testo usato sopra:

Figura 7. Box flessibile

Questa soluzione sarà sempre funzionale, anche con un testo molto più lungo, come si vede

sotto.

Figura 8. Box flessibile con molto testo

Il codice non è stato modificato, si è semplicemente copiato e incollato un brano più lungo per

testare l’efficacia del box che daremo in pasto alla pagina dinamica.

Il cellpadding ci assicura che il testo, qualunque esso sia, non sarà mai attaccato ai bordi, il

box creato col bordo della tabella si allungherà delle dimensioni corrette (né troppo lungo né

troppo corto), non dobbiamo pensare agli “a capo” (i <br> e i <p>): una volta impostati gli

stili CSS non dobbiamo davvero più preoccuparci di cosa accadrà al nostro box.

Se cerchiamo la flessibilità, è nell’HTML che la troviamo - sempre che ci abbiamo pensato in

fase di costruzione grafica.

I formati

Terminata l’interfaccia è il momento di decidere cosa esportare e in che formato. Si tratta di

scegliere il formato migliore rispetto alle caratteristiche dell’immagine e, soprattutto, di avere

già un’idea di come si intende strutturare l’HTML. Nel nostro caso abbiamo previsto di

realizzare molti elementi grafici direttamente nell’HTML e ciò ci consente di esportare poche

immagini. Vediamo come fare sezione per sezione.

Esportare l’header L’header è costituito dalle tre bande colorate, dal logo e dal menu. Chi conosce poco l’HTML

avrebbe la tentazione di esportare tutto l’header così com’è, creando probabilmente un’unica

immagine, simile a quella mostrata nella figura (pulsanti del menu esclusi). In questo modo

otterrebbe un’immagine che, ottimizzata come gif a 64 colori, peserebbe circa 2,5 kb:

Figura 1. Esportazione dell'header

Nel nostro caso il peso dell’header non è eccessivo, in quanto abbiamo dei colori piatti e

uniformi, ma spesso abbiamo a che fare con interfacce più elaborate, che, ad esempio,

contengono sfumature, effetti particolari o immagini, e l’esportazione dell’intero header

richiederebbe parecchi kb. La soluzione è quella di individuare gli elementi grafici che è

possibile creare direttamente nell’HTML.

Lo sfondo

In questo tipo di header le bande colorate, inclusa quella grigia del menu, possono essere

create in HTML in due modi diversi:

a. si può impostare il colore esadecimale corrispondente alle bande come sfondo delle

celle e/o delle tabelle che costituiranno l’header; in questo caso il peso è praticamente

nullo in quanto il colore viene creato dal codice.

b. si può esportare un pattern di 1 pixel di larghezza e 85 pixel di altezza (ossia tanto

quanto le tre bande) da utilizzare come sfondo delle celle e/o delle tabelle che

conterranno l’header. La sua ripetizione nell’HTML crea le tre bande colorate. Nella figura

sottostante, a sinistra si vede l’immagine salvata per creare lo sfondo: è una gif che pesa

soltanto 60 byte.

Figura 2. Esempio di sfondo ripetuto

Questi due metodi sono molto utili anche quando si vuole creare un header che si estenda al

100% dello spazio disponibile, in quanto sia i colori esadecimali sia il pattern vengono

ripetuti automaticamente. Cosa che non sarebbe possibile se avessimo esportato l’header

come unica immagine.

Esportare il pattern Vediamo come esportare il pattern per creare le bande colorate. Esistono diversi modi per

esportare le immagini da Photoshop. In questo caso facciamo una esportazione “manuale”,

molto pratica per questo tipo di lavoro.

Vogliamo ottenere una selezione precisa. Quindi ci posizioniamo sul livello header e

scegliamo lo strumento di 'selezione rettangolare' e nella barra delle opzioni impostiamo a 0 la

casella 'Sfuma'.

Creiamo una selezione di 1x85 pixel come mostrato nella figura che possiamo realizzare anche

senza l’aiuto delle guide ingrandendo la visualizzazione e tenendo d’occhio il pannello 'Info' fino

a raggiungere le dimensioni desiderate.

In alternativa, possiamo impostare nella barra delle opzioni dello strumento lo stile di selezione

'Dimensione fissa' e specificare nelle caselle a destra i valori 1 e 85. In questo modo basta un

clic per creare la selezione delle dimensioni corrette:

Figura 3. Creazione di una selezione

Copiamo la selezione (Ctrl+C oppure Modifica>Copia), creiamo un nuovo documento (Ctrl+N

o File>Nuovo) usando le impostazioni che ci vengono proposte nella finestra che appare. Infine

incolliamo la selezione nel nuovo documento (Ctrl+V o Modifica>Incolla).

Lavorare usando i comandi da tastiera velocizza moltissimo la realizzazione di questa ed

altre operazioni.

A questo punto, salviamo il pattern selezionando File>Salva per il Web. Nella finestra che

appare clicchiamo sulla scheda '2 immagini' in modo da vedere a sinistra l’immagine originale

e a destra quella ottimizzata.

Tra le opzioni disponibili sulla sinistra della finestra, scegliamo di usare il formato GIF, ideale

per immagini di questo tipo. Photoshop ci propone automaticamente una tavola colori già

ottimizzata: 3 colori con palette selettiva e nessun dithering, per un peso di 60 byte:

Figura 4. Salvataggio della nuova immagine

Al di sotto dell’anteprima dell’immagine ottimizzata vengono riepilogati i dati dell’immagine:

formato, peso, dithering, tipo di palette e numero colori, nonché il tempo stimato di

scaricamento dell’immagine utilizzando un modem da 28.8 Kbps:

Figura 5. Informazioni sull'immagine esportata

Possiamo visualizzare i tempi previsti per altri tipi di connessione facendo clic sulla freccina

nera al di sopra dell’anteprima e selezionando un’opzione dal menu. Alla fine

salviamol’immagine ottimizzata cliccando 'Salva'.

Esportare il logo

L’altro elemento da esportare per l’header è il logo. Dopo averlo selezionato il logo come

mostrato nella figura sottostante, lo si può copiare e incollare in un nuovo documento con la

stessa procedura vista per il pattern:

Figura 1. Selezione del logo

Per ottimizzare il logo torniamo alla finestra 'Salva per il Web' selezionare la scheda 4

immagini in modo da poter confrontare diverse ottimizzazioni.

Photoshop ci propone alcune ottimizzazioni nel formato GIF (il formato che abbiamo utilizzato

nel precedente salvataggio), come si vede nella figura sottostante:

Figura 2. Visualizzazione '4 immagini'

Quando si ottimizza un’immagine occorre tenere presenti diversi fattori: il rapporto

peso/qualità (al fine di avere tempi di download ridotti e belle immagini) e, nel formato GIF, il

numero di colori della palette.

Nella prima anteprima, Photoshop ci indica automaticamente che la palette ottimizzata di

questa immagine è di 55 colori. Un dato importante perché ci indica che si può provare a

diminuire il numero di colori per diminuire anche il peso in kb.

Nella seconda e nella terza anteprima, Photoshop ci propone altre due ottimizzazioni: una con

palette ridotta a 32 colori pari con un peso leggermente inferiore rispetto alla prima (1.259 K

contro 1.425 K) mantenendo intatta la qualità; l’altra con palette a 55 colori e con il 100%

dithering per un peso pari a quello della prima anteprima.

Potremmo scegliere di salvare l’ottimizzazione a 32 colori, in quanto 1.259 K sono già un buon

equilibrio peso/qualità, ma possiamo provare a scendere ancora.

Selezioniamo l’ultima anteprima con un clic e nelle opzioni sulla sinistra della finestra,

clicchiamo sulla casella 'Colori' e diminuiamo il numero di colori portandolo a 16. Impostiamo il

dithering su Nessun dithering ed ecco cosa otteniamo:

Figura 3. Immagine a 32 colori

A 16 colori la qualità è leggermente inferiore ma ancora abbastanza buona; il peso è diminuito

a 1.041 K. Si tratta di poca differenza ma nell’economia generale di una pagina, soprattutto se

costituita da molte immagini, riuscire a risparmiare pochi byte su ogni immagine può fare

davvero la differenza.

Se si prova a ridurre ulteriormente i colori, portandoli ad esempio a 8, il peso scende a 859

byte, ma la qualità dell’immagine non è accettabile, soprattutto per un logo:

Figura 4. Immagine a 8 colori

Il miglior compromesso è l’ottimizzazione a 16 colori. Possiamo salvarla così oppure, se

vogliamo, rendere lo sfondo trasparente. In questo caso basta selezionare con lo strumento

contagocce il colore grigio di sfondo in modo da evidenziarlo nella palette dei colori.

CLicchiamo sull’icona Mappa su trasparente i colori selezionati per rendere trasparente il

grigio. Automaticamente l’anteprima viene aggiornata. Se siamo soddisfatti, si può salvare

l’immagine:

Figura 5. Dare trasparenza all'immagine

Usare le sezioni

Per realizzare la parte restante dell’interfaccia nell’HTML occorre esportare:

• i titoli in grafica (“in primo piano”, “cerca”, “scelti per voi”, “i più letti”);

• i pulsanti del menu nei vari stati (normale e rollover) e il pulsante “cerca”;

• le thumbnail.

Tutti gli altri elementi, compreso il footer, verranno creati nell’HTML con i CSS.

Abbiamo visto che il formato GIF è particolarmente indicato per per i titoli e i pulsanti,

in quanto questo formato meglio si adatta all’esportazione di testo in grafica e di immagini con

colori piatti e uniformi.

Per le thumbnail possiamo usare il formato jpg che rende meglio i colori delle fotografie

mantenendo contenuto il peso.

Photoshop consente anche di esportare le immagini utilizzando le sezioni. Si tratta di

usare lo strumento 'Sezioni' per suddividere il layout e ricavare le immagini che vogliamo

esportare evitando di fare l’operazione di copia/incolla vista in precedenza. Vediamo come fare.

Selezioniamo lo strumento 'Sezione' dalla palette degli strumenti (si trova accanto alla

taglierina) e creaimo dei riquadri sulle immagini da esportare, iniziando ad esempio dal

titolo “cerca”.

I riquadri possono essere modificati trascinando le maniglie e spostati. Come si vede nella

figura, Photoshop indica in blu la sezione che abbiamo creato e genera automaticamente delle

sezioni aggiuntive (in grigio) per le restanti aree dell’immagine. Queste sezioni automatiche

vengono via via ridefinite ogni volta che si aggiungono nuove sezioni o si modificano quelle già

create:

Figura 1. Creazione di una sezione

Possiamo creare le sezioni per tutte le immagini da esportare. Per il menu, è meglio creare le

sezioni per i pulsanti nello stato normale. Il rollover può essere esportato in un secondo

momento. Il file export.psd contiene tutte le sezioni realizzate.

Terminata la suddivisione, File>Salva per il web. Nella finestra che appare è possibile

ottimizzare ciascuna sezione impostando valori e formati diversi per ognuna.

Se nelle anteprime le sezioni non fossero visibili, clicchiamo sull’icona 'Attiva/Disattiva visibilità

delle sezioni' sul lato sinistro della finestra di dialogo.

Con lo strumento 'Seleziona sezione' clicchiamo su una delle sezioni che abbiamo creato

(quelle indicate in blu) per attivarla e impostarne il formato e la qualità sfruttando le opzioni

sulla sinistra, come abbiamo già visto per il logo.

Per visualizzare meglio la sezione possiamo aiutarci con lo strumento 'Mano' e aumentando

lo zoom (la casella si trova nell’angolo inferiore sinistro della finestra). In quest’ultimo caso

facciamo attenzione: è difficile valutare la qualità di un’immagine ingrandita, quindi ricordate di

tornare alla visualizzazione al 100% per verificare il risultato delle impostazioni.

Selezioniamo via via le sezioni, tralasciando quelle automatiche generate da Photoshop, e

cerchiamo di scegliere l’ottimizzazione più appropriata.Ad esempio ricordiamoci che per le

thumbnail è meglio impostare il formato jpg.

Il formato jpg agisce sul peso comprimendo l’immagine; quindi, a differenza del formato GIF,

dove abbiamo agito sulla palette dei colori, dobbiamo scegliere il fattore di compressione che

riduce l’immagine senza comprometterne troppo l’aspetto.

Nel caso delle thumbnail si può impostare una qualità medio-bassa di 30 (ossia un fattore di

compressione abbastanza alto). Nel caso di immagini più grandi dovremmo probabilmente

scegliere una qualità maggiore (40-50):

Figura 2. Vista delle sezioni da esportare

Terminata l’ottimizzazione, clicchiamo 'Salva'. Nella maschera di salvataggio scegliamo dove e

con che nome salvare le immagini e, soprattutto, scegliamo l’opzione Tutte le sezioni utente

dalla casella Sezioni. In questo modo esporteremo solo le sezioni che abbiamo creato,

escludendo quelle automatiche di Photoshop:

Figura 3. Salvataggio finale

Con un clic su Salva, Photoshop crea una cartella “immagini” che contiene tutto quello che

abbiamo esportato e torna all’area di lavoro.

Non ci rimane che esportare il rollover del menu sfruttando le sezioni già create. Nella

cartella menu della palette livelli, attiviamo il livello rollover e con lo strumento 'Selezione

sezioni' selezioniamo (con un click) ciascuna sezione che non dobbiamo più esportare. Le

cancelliamo premendo il tasto Canc. Lo scopo è quello di conservare solo le cinque sezioni dei

pulsanti.

Quindi ripetiamo la procedura di ottimizzazione 'Salva per il web' per esportare le sezioni del

rollover. Ricordiamo di assegnare un nome diverso a questi pulsanti in modo da riconoscere il

rollover dallo stato normale.

Le immagini appena esportate pesano complessivamente circa 13 Kb. Se a queste

aggiungiamo il logo e il pattern salvati in precedenza abbiamo una cartella immagini di appena

14.4 Kb! Se consideriamo che una pagina web completa dovrebbe pesare tra i 30 e i 50 Kb,

possiamo sicuramente prevedere che la nostra home sarà veloce da scaricare.

Con l’esportazione si conclude la creazione dell’interfaccia in Photoshop ed anche la guida.

Nel file allegato al tutorial trovate il file export.psd con le sezioni per l’esportazione e la cartella

immagini che contiene tutte le immagini esportate.