Guida Interfacce web con Photoshop

di: Cristina Parente

Introduzione

Questa guida nasce come tutorial dedicato alla costruzione di uninterfaccia 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 laspetto 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 dellHTML, 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 lattenzione 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 uninterfaccia, occorre approfondire laspetto del progetto e
dellincontro 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 lazienda e se ha dei punti di forza da mettere in luce. inoltre necessario
capire come lazienda 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 dellinvio?).
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 lidentit dellazienda e si
rivolge in modo efficace ai suoi utenti?
Chiediamo se esistono precedenti comunicazioni (brochure, presentazioni aziendali, pubblicit,
manifesti) per capire come lazienda comunica la sua immagine allesterno.
Pu capitare, soprattutto se lazienda piccola, che il vostro cliente non abbia unimmagine
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
dellazienda, 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 larchitettura 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 unanimazione 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 laccesso 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
lhome 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 lutente. 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 lelenco 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 linterfaccia. 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 uninterfaccia parte da unoperazione tanto semplice quanto fondamentale:
creare un documento di lavoro con caratteristiche e dimensioni adeguate. Le
dimensioni dellinterfaccia 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 linterfaccia 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 uninterfaccia 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 larea che verr sicuramente vista per prima (e sempre) dai visitatori.
Per chiarire meglio questo aspetto, ecco come appare linterfaccia 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 linterfaccia 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 lopzione, 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 dellinterfaccia 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 docchio,
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
sottocchio 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 nellunit corrette, clicchiamo con la freccina
nera e selezionare Opzioni palette.
Figura 4. Pannello Info

Nella finestra che appare, verificare di aver impostata lopzione 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 dellinterfaccia, 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 dellinterfaccia,
sapere come organizzare il contenuto e, in questo caso, quali saranno le informazioni
presenti nellhome 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 unidentit ma che rimanga semplice e ordinato.
Unultima 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
allHTML 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 dellheader. 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 docchio delle dimensioni:
Figura 1. Posizionamento del logo

Definiamo laltezza dellheader. Considerando laltezza 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 lheader, 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 laltezza 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 lorientamento allinterno 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 uninformazione con
unanimazione 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 nellarticolo 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 limmagine 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 unimmagine 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
uninterfaccia, 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 lArial, 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 lopzione 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 limmagine) 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 dellheader, 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 sullicona 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 lanti-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 dellinterfaccia e spesso ne determina lidentit. Anche il colore e la
grandezza devono essere appropriati. Come sceglierli? Lunico modo fare un po di prove fino
a trovare il carattere che ci convince, tenendo sempre presente, oltre allestetica, il target a cui
ci rivolgiamo e gli obiettivi del sito. Infine, quando linterfaccia sar completa, sar facile
verificare se il font scelto funziona oppure se occorre sostituirlo.
Nella figura sottostante vediamo due font palesemente errati rispetto allinterfaccia: 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 lopzione
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 dellimmagine 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 linterfaccia 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 cartellain 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.
Laspetto 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 laltra.
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 laltezza, come nei primi tre
casi, le immagini risultano troppo piccole e disomogenee. Se si tiene ferma la larghezza, come
nellultimo caso, limmagine 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 linquadratura 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 limmagine 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, allincirca al centro della
fotografia, una selezione di 79 x 42 pixel.
Otteniamo le dimensioni trascinando e tenendo docchio 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 sullimmagine per
creare la selezione:
Figura 3. Creazione della maschera - Selezione

Senza deselezionare, creiamo una maschera di livello con un clic sullicona Aggiungi una
maschera di livello nella palette Livelli. Limmagine immediatamente mascherata e ne
rimane visibile solo la porzione selezionata in precedenza.
Nella palette, sul livello viene aggiunta la maschera accanto allanteprima. Il nero
rappresenta la parte mascherata, mentre il bianco la parte visibile. Accanto allicona dellocchio
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 limmagine. Scollegare limmagine 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 lanteprima del livello e lindicazione della
maschera.
Clicchiamo sullanteprima del livello per attivarlo e far comparire, al posto del cerchio bianco in
campo scuro, licona del pennello, che indica che si lavora sul livello, ossia sullimmagine 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 limmagine. Man
mano che si ridimensiona, si pu spostare limmagine mascherata per cercare linquadratura
migliore prima di applicare le modifiche.
Infine, quando siamo soddisfatti, clicchiamo sul segno di spunta nella barra delle opzioni. Ed
ecco come potrebbe apparire limmagine:
Figura 6. Immagine ridimensionata

Colleghiamo nuovamente la maschera al livello con un clic tra lanteprima e la maschera (deve
riapparire licona della catena) e diamo allimmagine la posizione definitiva accanto al testo. Se
si vogliono fare delle piccole modifiche (aggiustare linquadratura, modificare le dimensioni)
basta scollegare il livello dalla maschera e apportare i cambiamenti allimmagine:
Figura 7. Immagine nel contesto dell'interfaccia

Ripetendo la stessa procedura, applichiamo la maschera alle altre immagini per ridimensionarle,
scegliendo per ognuna linquadratura 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 dellimmagine, 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 dellimmagine 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 dellultima 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 lutente, che
potr cos familiarizzare velocemente con la nostra interfaccia e riconoscere a colpo docchio la
funzione dei vari elementi (anche) dallaspetto.
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 laltezza quella sufficiente per
collocare il titolo.
Ora che linterfaccia 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
dellinterfaccia. 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 dellimmagine 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 lopzione 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 lanti-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 lelemento 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
linterfaccia:
Figura 7. Anteprima definitiva

Il file centrale4.psd contiene quanto realizzato finora.
Definire i CSS

Come abbiamo visto, quando si crea uninterfaccia, 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 allinterno 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 laspetto; 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 lindicazione 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 nellHTML, 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 linterfaccia 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 allinterno 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 lutilizzo
delle stesse tecniche gi utilizzate per creare gli altri elementi dellinterfaccia. 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 dellinterfaccia. 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 dellinterfaccia, di poter prevedere esattamente lo spazio che occupa. Infatti, a
seconda del browser, il pulsante standard creato con lHTML 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 linterfaccia sia visualizzata correttamente sui vari browser,
facciamo alcune prove nellHTML 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 sullaspetto 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. Laltezza non stata definita. Allinterno 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, laltezza 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 allaltro): 54, 58, 56,
51. Di fatto si tratta di pochi pixel, ma quando abbiamo poco spazio sulla nostra interfaccia
rischiano di complicarci la vita nellHTML. Comunque, basta tenere conto di ci nella creazione
dellinterfaccia 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 dellelenco 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 dinsieme e, se necessario, intervenire sugli spazi e gli allineamenti per trovare
una disposizione pi armoniosa.
In questo caso, sono state spostate leggermente verso lalto 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
dellintestazione (header). Sotto di essa, trova posto il copyright:
Figura 8. Vista del footer

Il footer utile per chiudere la pagina e completare lequilibrio 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 lheader. In questi casi la chiusura della pagina contribuisce a dare
uninformazione immediata al visitatore, che a colpo docchio e intuitivamente capisce di essere
arrivato alla fine del contenuto:
Figura 9. Vista globale dell'interfaccia

Con questi nuovi elementi lhome page quasi completa. Non resta che aggiungere il menu di
navigazione.
Il menu

Eccoci arrivati allultimo elemento dellinterfaccia: il menu. Quando si crea il menu di
navigazione abbiamo a disposizione unampia 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 lutente possa raggiungere
linformazione 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, laspetto del menu ci aiuta a dare unidentit allinterfaccia. A
volte basta la scelta di un font particolare o di un colore o di una forma per cambiare limpatto
della nostra home.
Nel nostro caso, con uninterfaccia 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 lArial 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 lanti-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;
questultimo 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

Lutilizzo 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

Linterfaccia 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 unesigenza 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 linterfaccia 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 allheader 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 unimmagine 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 linserimento 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 unimmagine di
dimensioni fisse (da Photoshop NON esporteremo in blocco tutta limmagine 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 allallungarsi 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 unidea
di come sia possibile realizzare elementi grafici tenendo sempre docchio lHTML (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 unimmagine 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 lefficacia 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, nellHTML che la troviamo - sempre che ci abbiamo pensato in
fase di costruzione grafica.

I formati

Terminata linterfaccia il momento di decidere cosa esportare e in che formato. Si tratta di
scegliere il formato migliore rispetto alle caratteristiche dellimmagine e, soprattutto, di avere
gi unidea di come si intende strutturare lHTML. Nel nostro caso abbiamo previsto di
realizzare molti elementi grafici direttamente nellHTML e ci ci consente di esportare poche
immagini. Vediamo come fare sezione per sezione.
Esportare lheader
Lheader costituito dalle tre bande colorate, dal logo e dal menu. Chi conosce poco lHTML
avrebbe la tentazione di esportare tutto lheader cos com, creando probabilmente ununica
immagine, simile a quella mostrata nella figura (pulsanti del menu esclusi). In questo modo
otterrebbe unimmagine che, ottimizzata come gif a 64 colori, peserebbe circa 2,5 kb:
Figura 1. Esportazione dell'header

Nel nostro caso il peso dellheader 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 lesportazione dellintero header
richiederebbe parecchi kb. La soluzione quella di individuare gli elementi grafici che
possibile creare direttamente nellHTML.
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 lheader; 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 lheader. La sua ripetizione nellHTML crea le tre bande colorate. Nella figura
sottostante, a sinistra si vede limmagine 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 lheader
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 laiuto delle guide ingrandendo la visualizzazione e tenendo docchio 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 limmagine 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 dellanteprima dellimmagine ottimizzata vengono riepilogati i dati dellimmagine:
formato, peso, dithering, tipo di palette e numero colori, nonch il tempo stimato di
scaricamento dellimmagine 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 dellanteprima e selezionando unopzione dal menu. Alla fine
salviamolimmagine ottimizzata cliccando 'Salva'.
Esportare il logo



Laltro elemento da esportare per lheader 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 unimmagine 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; laltra con palette a 55 colori e con il 100%
dithering per un peso pari a quello della prima anteprima.
Potremmo scegliere di salvare lottimizzazione a 32 colori, in quanto 1.259 K sono gi un buon
equilibrio peso/qualit, ma possiamo provare a scendere ancora.
Selezioniamo lultima 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 nelleconomia 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 dellimmagine non accettabile, soprattutto per un logo:
Figura 4. Immagine a 8 colori

Il miglior compromesso lottimizzazione 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 sullicona Mappa su trasparente i colori selezionati per rendere trasparente il
grigio. Automaticamente lanteprima viene aggiornata. Se siamo soddisfatti, si pu salvare
limmagine:
Figura 5. Dare trasparenza all'immagine

Usare le sezioni



Per realizzare la parte restante dellinterfaccia nellHTML 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 nellHTML 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 allesportazione 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 loperazione 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 dellimmagine. 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 sullicona '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 nellangolo inferiore sinistro della finestra). In questultimo caso
facciamo attenzione: difficile valutare la qualit di unimmagine 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 lottimizzazione pi appropriata.Ad esempio ricordiamoci che per le
thumbnail meglio impostare il formato jpg.
Il formato jpg agisce sul peso comprimendo limmagine; quindi, a differenza del formato GIF,
dove abbiamo agito sulla palette dei colori, dobbiamo scegliere il fattore di compressione che
riduce limmagine senza comprometterne troppo laspetto.
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 lottimizzazione, clicchiamo 'Salva'. Nella maschera di salvataggio scegliamo dove e
con che nome salvare le immagini e, soprattutto, scegliamo lopzione 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 allarea 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 lesportazione si conclude la creazione dellinterfaccia in Photoshop ed anche la guida.
Nel file allegato al tutorial trovate il file export.psd con le sezioni per lesportazione e la cartella
immagini che contiene tutte le immagini esportate.