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 :

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 e i ): 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