Corso Web Mastering & Design

Modulo 2, Unità 2

Texture, testi e immagini

Texture

Un elemento importante per far sì che le nostre pagine abbiano un particolare impatto visivo sull’utente è la realizzazione e l’utilizzo di una texture.

Ovviamente è possibile scegliere, attraverso siti appositi largamente presenti in rete, specifiche texture senza doverle necessariamente realizzare. Sebbene le texture presenti in rete siano nella maggior parte dei casi molto complesse, una “tessitura” può essere realizzata anche in mani-era più semplice, creando solamente alcuni elementi distintivi partic-olari sullo sfondo delle nostre pagine.

Vedremo pertanto come utilizzare alcuni elementi grafici di base, come punti, linee e forme, comunemente usati proprio per creare quelle “tessiture” semplici adatte comunque a comunicare e supportare il messaggio delle pagine web.

Cos’è una texture

Per texture si intende quel particolare elemento grafico che fornisce un’apparenza distintiva alla superficie di immagini o oggetti, rendendoli realistici.

Esempi di texture sono tutti quegli elementi grafici che riproducono con realismo l’apparenza di un insieme di piastrelle di marmo, della corteccia di un albero, di una distesa di sabbia ecc.

Per ottenere delle superfici che sembrino effettivamente reali bisogna innanzitutto definire le caratteristiche primarie delle texture da creare.

Dovrà apparire come una superficie liscia, dovrà contenere dei particolari pattern ripetuti, dovrà avere una forma o dei volumi specifici?

Lavorare con i pixel

Il primo elemento fondamentale da considerare nella realizzazione di una texture è l’elaborazione dei pixel con cui le immagini sono com-poste. Il pixel non è altro che l’unità di misura base dei file grafici su cui ci troviamo a lavorare.Un pixel (abbreviazione per picture element) non è altro che uno dei centinaia di migliaia di punti presenti sui nostri monitor.

Se ad esempio la risoluzione del nostro monitor è impostata su 1024×768 pixel, sul nostro schermo sono rappresentati ben 786,432 punti immagine, organizzati su 768 file e 1024 colonne.

Tutti questi punti insieme servono a comporre le immagini digitali su cui andremo a lavorare per creare la grafica adatta alle nostre pagine web.

Così come un pixel è l’elemento base fondamentale delle immagini digitali, allo stesso modo un punto è un elemento fondamentale del design grafico dal momento che viene utilizzato per costruire qualsiasi elemento grafico.

Punti

I punti non hanno dimensioni specifiche a meno che non siano inseriti in una struttura (frame) di riferimento.Quando i punti sono raggruppati in un unico insieme essi vengono utilizzati per creare linee, forme e volumi.

Linee

Quando due o più punti sono connessi, questi vanno a formare una linea. La linea costituisce sicuramente uno degli elementi grafici più

comuni ma tuttavia fondamentale per l’espressività del risultato che si ottiene attraverso il suo utilizzo.Progettando la grafica di un sito, si pensa generalmente che le linee vengano utilizzate per creare dei bordi o collegamenti ipertestuali attraverso l’utilizzo di apposite regole di stile.

Al contrario tali elementi grafici possono essere impiegati in un’infinità di modi diversi per richiamare diverse sensazioni durante l’osservazione delle nostre pagine web.

Ad esempio una linea diagonale darà un senso di movimento alle nostra grafica. Un insieme di linee orizzontali come elemento grafico di sfondo offre già una specifica texture per le nostre pagine.

Tuttavia usando come pattern di sfondo delle linee diagonali, la texture delle nostre pagine risulterà molto più dinamica.

FormeEsistono un’infinità di forme da utilizzare nella grafica digitale per le nostre pagine web.Per operare una scelta adeguata a seconda delle finalità del nostro sito è bene distinguere le forme disponibili in due categorie principali: forme geometriche e astratte.Le forme geometriche che troviamo come elementi grafici predefiniti, non solo nei programmi di editing delle immagini ma anche in programmi di video scrittura come Microsoft Word, vengono

generalmente utilizzate per comunicare professionalità e introdurre temi tecnici.Al contrario le forme astratte possono essere utilizzate in maniera più casuale in siti di carattere informale.

Tali forme possono infatti costituire quegli stessi blocchi di contenimento che abbiamo analizzato parlando dei possibili layout di una pa-gina web.Infatti, sebbene i blocchi di contenimento vengano concepiti come rettangoli, non è detto che debbano apparire come tali.

Uno dei metodi più comuni per nascondere la vera forma di un elemento HTML di forma regolare, presente sullo sfondo, è proprio quello di inserire un’immagine o una forma astratta.

Ad esempio è possibile usare un ovale come immagine di sfondo e in questo inserire il nostro testo, indicando, dove necessario, le interruzioni di riga necessarie a creare l’illusione di avere effettivamente un contenitore di testo di forma ovale.

Il problema di questa tecnica è che, sbagliando ad inserire le opportune interruzioni il testo di espanderà oltre l’ovale.

Il nostro testo con le dovute interruzioni di riga

Volumi e profondità

Attraverso l’utilizzo di programmi come Adobe Photoshop o Gimp, oppure tramite l’applicazione di specifiche regole e fogli di stile è possibile conferire ai nostri elementi grafici bidimensionali degli effetti di volume e profondità, attraverso l’utilizzo di accorgimenti e illusioni particolari.

Effetto prospetticoPer conferire alla nostra grafica una certa prospettiva basta applicare a quegli elementi che desideriamo far apparire più piccoli un punto di fuga che li faccia quasi scomparire alla vista, come nell’esempio seguente:

Proporzioni

Un utilizzo appropriato delle proporzioni è un ottimo modo per conferire ad un determinato elemento una particolare enfasi.Infatti l’occhio umano fa riferimento alle proporzioni di elementi adiacenti per determinare non solo la dimensione di quegli oggetti ma anche la loro posizione in uno spazio tridimensionale.

Elementi grafici uguali tra loro ma posizionati su due piani diversi, uno in primo piano e l’altro sullo sfondo, appariranno di dimensioni diverse anche se nella realtà hanno chiaramente grandezze identiche, come è chiaro dall’esempio seguente:

Luci e ombre

Un utilizzo ragionato di questi due elementi rappresenta senz’altro uno degli accorgimenti grafici più importanti da utilizzare per creare nella nostra grafica effetti di profondità e volume.

Anche con uno sfruttamento accurato dei principi di prospettiva e proporzione, una composizione priva di luci e ombre risulterà sempre piuttosto piatta all’occhio dell’utente.

Gli elementi di luce e ombra, peraltro facili da realizzare, servono a stabilire quel contrasto visivo che aiuta a creare l’illusione delle tridimensionalità solo attraverso l’utilizzo dei pixel presenti sul nostro monitor.

Elementi di luce e ombra possono anche essere utilizzati da soli per far apparire come tridimensionali degli oggetti che in realtà non lo sono.

Le forme e i simboli rappresentati sembrano infatti acquisire, proprio in base alle luci e alle ombre applicate, non solo livelli diversi di tridimensionalità ma anche livelli di importanza e enfasi differenti in

base proprio alla tipologia di ombreggiatura o illuminazione conferitagli.

Realizzazione di un pattern

Con il termine pattern si intende uno schema ricorrente che viene generalmente applicato ad ogni pagina presente in un sito web per conferire all’insieme un senso di omogeneità.

La creazione di un pattern comune uguale a tutte le pagine è un trend affermatosi nel campo del web design già a partire dagli anni ’90 ma utilizzato ancora oggi.

L’utilizzo di un pattern, se accuratamente scelto, può infatti arricchire lo sfondo di qualsiasi sito web.

Tuttavia nell’utilizzo di questo particolare tipo di grafica è importante evitare alcuni errori di scelta.

Ad esempio, se è accettabile creare un pattern in cui un singolo elemento grafico viene ripetuto diverse volte (ad esempio a creare una semplice linea continua), la ripetizione continua di un elemento in tutta la pagina è sicuramente da evitare.

La creazione di un pattern di questo tipo viene giustificata solo dal fatto che una ripetizione continua su sfondo di un’immagine di

piccole dimensioni comporta un tempo di download e di visualizza-zione completa molto più breve rispetto a quello di un’unica imma-gine di sfondo di grandi dimensioni.

Esempio di pattern comuni

Per creare un pattern ci vengono in aiuto proprio quelle regole già viste nell’unità didattica relativa ai CSS.Attraverso alcune delle regole di stile viste nelle precedenti unità è possibile realizzare pattern particolari a seconda delle nostre esigenze.

In primo luogo per inserire uno specifico file grafico sullo sfondo utilizzeremo la proprietà background-image associata all’URL della nostra immagine: {background-image: url("inserire url")}.

Infine la proprietà di background-repeat, applicata alla nostra imma-gine, ci permetterà di far si che questa venga ripetuta fino a riempire lo sfondo della pagina intera.Come abbiamo visto per far questo basterà modificare il valore di de-fault di questa proprietà (repeat) a seconda delle necessità con gli altri valori associabili: no-repeat, repeat-x (per ripetere orizzontalmente) e repeat-y (per ripetere un’immagine verticalmente).

Es. di immagine di sfondo ripetuta orizzontalmente

body{ background-image:url("stella.gif"); background-repeat: repeat-x;

}

Per stabilire la posizione esatta di un’immagine sullo sfondo, per creare il nostro pattern particolare, useremo invece la proprietà background-position con tutti i valori ad essa associabili: left top, left center, left bottom, right top, right center, right bottom, center top, center center e center bottom.

Altri valori associabili a questa stessa proprietà sono quelli relativi alla distanza orizzontale e verticale dell’immagine rispetto ai limiti

della pagina, espressi in percentuali o in punti. Le percentuali di default 0%, 0%, sono relative all’angolo sinistro in alto della pagina, luogo di comparsa standard per ogni immagine).

Infine un’ altra proprietà estremamente utile per la creazione di un pattern specifico per le nostre pagine è quella già analizzata del back-ground-attachment, con i valori scroll (default) e fixed. Quest’ultimo valore ci permette di fissare sullo sfondo l’immagine scelta.

Costruire una texture

Tutti gli elementi analizzati finora, linee, forme, volumi e pattern contribuiscono, anche singolarmente, a conferire un certo livello di texture o “trama” alle nostre pagine. Tuttavia un’efficacia maggiore si ottiene dall’utilizzo congiunto di questi elementi. Tali elementi possono infatti essere combinati per realizzare una maschera grafica che renda differente l’aspetto delle nostre pagine.

Per realizzare questo tipo di maschera o pelle esistono infinite possibilità e accorgimenti, tutti da scegliere in base all’effetto che si vuole ottenere.

Ad esempio nell’immagine della slide seguente, la texture del sito è stata realizzata in modo da risultare leggermente “invecchiata” e molto naturale, non solo attraverso i colori scelti, ma anche in base alle forme.I contenitori di testo, i blocchi rettangolari del layout, presentano, attraverso un particolare gioco di ombre, degli angoli arrotondati per sembrare meno geometrici. Lo sfondo inoltre è stato realizzato non con un unico colore ma attraverso l’utilizzo di più pattern formati da punti di colore simile per ottenere un effetto leggermente granuloso ma naturale.

Esempio di texture o maschera naturale di un sito

L’utilizzo dei caratteri (fonts)

In questa parte delle lezione esploreremo le diverse varietà di caratteri (fonts) disponibili per il web. Vedremo pertanto secondo quali criteri scegliere i font per il nostro sito tenendo conto innanzitutto di quello che, anche attraverso di essi, vogliamo comunicare.

Nel nostro progetto grafico per il web sarà necessario determinare la grandezza dei fonts, la spaziatura tra i caratteri e ovviamente il loro allineamento complessivo all’interno delle pagine.

Per tutti questi passaggi e scelte ci vengono ancora una volta in aiuto le proprietà delle regole di stile che abbiamo già considerato nel modulo precedente.

Scegliere i font

Il primo fattore da considerare nella scelta del font è che non molte famiglie di caratteri vengono ugualmente supportate dai diversi sis-temi operativi.

Pertanto la scelta della famiglia di font è piuttosto limitata dal fattore primario di visualizzazione. E’ infatti necessario che il contenuto, parte fondamentale di ogni pagina web, possa sempre essere visualizzato.La nostra scelta in questo campo si restringe pertanto a 9 famiglie di font che costituiscono una lista sicura tra cui scegliere secondo gli standard attuali:

La Safe ListArialArial Black

Comic Sans MS Courier New

Georgia Impact

Times New Roman

Trebuchet MS Verdana

Disporre il testo sulle immagini

E’ possibile, per presentare i nostri contenuti testuali in maniera particolare, visualizzarli sopra le immagini. Infatti, nella maggior parte dei casi, vediamo che i testi delle pagine web vengono proprio presentati come delle immagini. Questo particolare approccio permette di integrare il design specifico delle immagini con quello dei testi, ovviando alla scarsezza dei font tra cui scegliere.

Esempio di una comune sovrapposizione font-immagine

Per rendere più dinamici i nostri testi, è inoltre possibile utilizzare, anche in combinazione a delle immagini, dei font che non risultino mai uguali. E’ infatti possibile inserire in ogni pagina dei font specifici e far si che questi cambino periodicamente.Per evitare di svolgere questa operazione manualmente, cambiando ogni volta la grafica dei font, è possibile sfruttare la tecnologia sIFR.

Sostituzione automatica dei testi attraverso sIFR

L’opzione più usata per sostituire meccanicamente le parti testuali delle pagine web a seconda delle esigenze è quella particolare tecnolo-gia conosciuta come sIFR (pronuncia, “siffer”, acronimo per

Scalable Inman Flash Replacement) che permette ai web designer di utilizzare insieme alcune delle funzioni di Flash e JavaScript per applicare ogni volta delle scelte diverse relative ai font.

Modificare i testi e i caratteri attraverso le regole di stile

Allineare il testoIn questa operazione, necessaria a conferire un aspetto ordinato e omogeneo al nostro testo, è possibile servirsi di una specifica regoladi stile.

In questo caso è necessario introdurre una nuova regola che servirà proprio a determinare secondo quale allineamento comparirà un dato elemento testuale.

La proprietà in questione, text-align, che segue sempre il principio di ereditarietà, presenta 4 valori specifici da utilizzare a seconda delle necessità: left, right, center, justify, dove il valore di default è left.

Modificare la spaziaturaMentre la proprietà font-size già analizzata (valori assoluti: xx-small, x-small, small, medium, large, x-large, xx-large insieme ai valori di grandezza espressi in pixel; valori relativi: keywords smaller e larger) ci permette di modificare le dimensioni dei caratteri del testo, la

proprietà letter-spacing servirà invece a determinare la loro rispettiva distanza orizzontale.Es. Per distanziare i caratteri

selettore {letter-spacing: 2px}Per avvicinare i caratteri

selettore {letter-spacing: -3px}

Per determinare invece l’altezza di linea di un testo utilizzeremo la proprietà line-height.Anche in questo caso le “altezze” verranno misurate in valori di punti.

Nell’esempio seguente è stata impostata un’altezza verticale di 12 punti per tutte le linee di un paragrafo.

Es. p {line-height: 12px}

Utilizzo di font specifici per il web

Novelty Fonts

Questa terminologia indica una vasta categoria di font di carattere puramente decorativo, disponibili gratuitamente in rete.

Esempi di Novelty Fonts sulla pagina successiva

Alcuni dei font di questa categoria non sono altro che versioni modificate di tipologie di caratteri ampiamente conosciuti. Altri font di questo gruppo sono al contrario talmente dissimili dai font comunemente utilizzati che costituiscono non tanto dei caratteri quanto delle realizzazioni grafiche indipendenti.

Ovviamente in base alle caratteristiche finora elencate questi specifici caratteri risultano sempre meno leggibili rispetto agli altri; pertanto dovrebbero venire utilizzati, all’interno delle pagine, con un certo rigore affinchè almeno i contenuti principali non risultino illeggibili.

I Novelty font vengono infatti utilizzati spesso per realizzare il design dei simboli di determinati prodotti, aziende, siti ecc, oppure per la creazione di ulteriori elementi decorativi da aggiungere alle pagine.

Dingbat fontsUn’importante fonte per ottenere facilmente illustrazioni e artworks da incorporare nel design di un sito, è senz’altro rappresentata dai Ding-bat font. I Dingbat font erano in principio dei caratteri ornamentali usati come simboli nei programmi di videoscrittura (ad es. i font Wingdings e

Webdings presenti in Microsoft Word) per separare le diverse parti di un testo e per riempire degli spazi vuoti.

Ora nel campo del web design questi caratteri ornamentali vengono impiegati come mezzi di supporto grafico per la realizzazione di icone e pulsanti dalle forme particolari.

Esempi di Dingbat Fonts

Trovare i font adatti

Esistono ormai infiniti siti web sui quali è possibile trovare gallerie di fonts specifici anche per il web design.Tra i siti più conosciuti e utilizzati a livello globale, dove è possibile reperire fonts artistici progettati appositamente per la realizzazione grafica di pagine web, troviamo i seguenti:

http://www.1001fonts.com/ http://www.dafont.com/

http://www.wantedfonts.com/

Inserire i font speciali

Per questa operazione è possibile usare la regola @font-face associata alla proprietà font-family e alla “fonte” dei nostri font (src).La forma base della regola, quindi, è la seguente:

@font-face {font-family: nome del font ; src: local ("nome del font"), url ("nome del font.ttf") format ("truetype")}

L’indicazione local nella “fonte” src permette di cercare il font necessario allo stile direttamente sul computer, nel caso sia già stato stato installato.

Utilizzo delle immagini

Ora prenderemo in considerazione alcuni degli elementi necessari per ottimizzare le immagini da inserire nelle nostre pagine e vedremo come utilizzare appropriatamente il materiale grafico presente in rete, già pronto per essere utilizzato nella grafica web.

Ottenere le immagini

Esistono due possibilità per ottenere delle immagini da utilizzare nella realizzazione delle nostre pagine web:

· Elaborarle autonomamente attraverso un programma di editing

· Acquistare o ottenere gratis quelle immagini già pronte, presenti su siti dedicati proprio alla vendita o alla condivisione di immagini non specifiche ma realizzate appositamente per il web.

· Ovviamente è possibile anche pagare dei professionisti affinchè realizzino delle immagini esattamente secondo i nostri desideri e scopi.

Stock di immagini gratuite

Esistono diversi siti web che mettono gratuitamente a disposizione degli utenti diversi stock di fotografie, adatte ad ogni tipi di esigenza.

Attualmente il sito che offre la collezione fotografica più ampia di immagini gratuite è il seguente: Stock.XCHNG (http://www.sxc.hu) contiene oltre 250.000 immagini di alta qualità. Una collezione che viene arricchita ogni giorno dall’inserimento di nuove foto.

Ora che abbiamo visto come ottenere le immagini adatte al nostro progetto, vediamo come elaborarle affinchè possano essere inserite in maniera ottimale nelle nostre pagine.

Ritaglio creativo (cropping)

Per ottenere un particolare impatto visivo solo attraverso la presentazione di un’immagine, una tecnica particolarmente usata per la sua manipolazione, è quella del ritaglio (o cropping).

Ad un livello base il cropping è sicuramente una tecnica comune attraverso la quale è possibile eliminare parti superflue dalle nostre immagini. Tuttavia seguendo dei criteri particolari è facilmente possibile rendere un’immagine molto più curata e interessante, eliminando tutti quegli elementi che possono distogliere l’attenzione dell’utente da quello che vogliamo mostrare come prima cosa.

Ritagliando le immagini è importante non modificare eccessivamente le dimensioni complessive generali del file grafico. Se si vuole ad esempio ritagliare un’immagine e ingrandire poi l’elemento primario, è importante che la risoluzione iniziale dell’immagine non sia troppo bassa, altrimenti il nostro ritaglio risulterebbe granuloso, con i pixel in evidenza.Fortunatamente le immagini utilizzate per il web possono anche essere utilizzate con una risoluzione inferiore rispetto a quella delle stampe. Le immagini elaborate secondo un ritaglio creativo possono avere le forme più disparate, dal momento che non devono essere per forza racchiuse in forme rettangolari.

Con la tecnica del ritaglio è possibile estrapolare parti di determinate immagini (tali parti sono chiamate comunemente knock-out) per reinserirle in forme o “maschere” completamente diverse e originali.

Esempio di ritaglio (cropping) creativo – il testo viene utilizzato come maschera per contenere il knock-out

Formato e risoluzione delle immagini

Non importa quale programma di editing venga usato, per preparare delle immagini per il web è necessario conoscere solamente alcune nozioni di base relative ai formati standard dei file grafici. In questo modo potremo scegliere ragionatamente, a seconda delle esigenze, quale tipo di formato utilizzare.

Attualmente tre formati diversi vengono ampiamente accettati e visualizzati correttamente dai browser: JPEG, GIF e PNG.

JPEGSi tratta del più diffuso al mondo. Viene supportato praticamente da ogni programma di grafica e da qualsiasi piattaforma.

Il formato JPEG è stato sviluppato specificamente per archiviare del materiale fotografico digitale. Si tratta infatti di un formato per il quale si può impostare a completo piacimento uno specifico livello di compressione. Tuttavia proprio per questo, un eccessivo livello di compressione dell’immagine causerà una significativa perdita di qualità.

GIFIl formato GIF (Graphics Interchange Format) comprime i file grafici sulle base dei colori presenti in un’immagine.

Sebbene il livello di compressione per questo specifico formato non comporti perdite di qualità per le nostre immagini, i file GIF support-ano un massimo di soli 256 colori, poco adatto alle rappresentazioni di immagini fotografiche per il web.

Questo formato è ottimo per tutti quegli elementi grafici contenenti una gamma limitata di colori, come ad esempio simboli, icone, linee, punti ecc.

Inoltre il formato GIF può visualizzare particolari effetti di trasparenza e, fatto ancora più importante, può supportare delle animazioni.

PNGIl formato PNG (Portable Networks Graphics) è stato sviluppato come specifica alternativa al GIF. Così come il formato GIF, il PNG supporta gli effetti di trasparenza ma con una resa finale ancora migliore. Inoltre anche il livello di compressione è migliore rispetto al formato GIF, sempre senza perdita di qualità.

Realizzare dei bordi per le immagini

Normalmente le immagini posizionate nelle pagine web attraverso la marcatura HTML <img> appaiono in linea con il testo che le circonda.

Inoltre un’immagine con collegamento ipertestuale comparirà sulle nostre pagine con un antiestetico bordo blu.

Se invece vogliamo presentare le nostre immagini con un bordo specifico è necessario crearlo in due modi possibili.E’ possibile applicare l’effetto desiderato alla nostra immagine utilizzando un programma di photo editing, altrimenti si possono applicare dei bordi tramite i fogli di stile (CSS).

I bordi attraverso l’utilizzo dei CSS

I bordi CSS hanno tre parametri fondamentali da considerare al momento del loro utilizzo: width, style, e color, controllati rispettivamente attraverso le specifiche proprietà, border-width, border-style e border-color a cui si può aggiungere la proprietà di utilizzo rapido border.

La proprietà border-width stabilisce lo spessore del bordo. I valori ad essa associabili comprendono unità di misura come, ad esempio, 1 px oppure delle keyword come medium (valore di default della proprietà), thick e thin.

La proprietà border-color utilizza invece i valori esadecimali dei colori di cui abbiamo già parlato.Infine la proprietà border-style comprende 8 stili diversi come valori associabili: dotted (punteggiato), dashed (tratteggiato), solid(continuo), double (doppio), groove (scavato), ridge (sbalzato), inset(premuto) e outset (sollevato). Inoltre il border-style può anche essere impostato come assente (none) oppure nascosto (hidden).

Es. p{border-style: double; border-width:15px; border-color:

#ff00ff}

Sempre attraverso l’utilizzo delle regole di stile è possibile impostare bordi diversi per ogni lato dell’immagine da caratterizzare, attraverso le proprietà border-bottom, border-top, border left e border-right, a cui possono essere associati indipendentemente stili, spessori e colori, come nell’esempio seguente:

img { border-top: 20px groove #ff1100;

border-right: 16px dotted #66ee33;

border-bottom: 8px outset #00aaff; border-left: 12px double #ff00ff;

}

FINE LEZIONE