Book grafica

Transcript

Book grafica

1_ DISEGNO GRAFICO
CAPITOLO 1
LA GRAFICA BITMAP
UNIVERSIDAD
DE LAS ARTES
SUN
Dipartimento di Architettura
e Disegno Industriale
Luigi Vanvitelli
Benecon
Centro Regionale di Competenza
per i Beni Culturali
Corso di
CAPITOLO 2
GRAFICA VETTORIALE
2_ DISEGNO WEB
CAPITOLO 3
WEB DESIGN
CAPITOLO 4
MACROMEDIA FLASH
Design Mutidimensionale
3_ DISEGNO CAD
CAPITOLO 5
GRAFICA 2D
CAPITOLO 6
GRAFICA 3D
1_ DISEGNO GRAFICO
CAPITOLO 1
Lezione 1 ore 3
LA GRAFICA BITMAP - IMAGING
Elementi di base
La grafica Bit Map - La grafica Vettoriale
La risoluzione
Gestire la risoluzione delle immagini - La risoluzione dello
schermo
La definizione
Il formato
Formati grafici e compressioni per il video
Il formato GIF - Le animazioni GIF - Il formato JPEG – Il
formato PNG–
Formati grafici e compressioni per la stampa
ll formato TiFF – Il formato PSD
L'anti-aliasing
Aliasing: che cos'è? - Come funziona l'anti-aliasing? - Quando
utilizzare l'anti-aliasing e quando no Anti-aliasing e peso delle immagini.
I formati di compressione per le immagini
Cosa si intende per metodo di compressione? - Come
funzionano i metodi di compressione? - Metodi Lossy Metodi Lossless
Il colore nell’ immagine
I colori
Quadricromia CMYK - Colori RGB - Scala di grigio - Scala
colori - Colori bitmap
Caratteristiche
Tinta - Saturazione - Luminosità - Contrasto
I Programmi di Grafica
Gestione delle immagini bitmap: Adobe Photoshop
Lezione 3
ore 3
Lezione 4
ore 3
Lezione 5
ore 3
1_DISEGNO GRAFICO
ELEMENTI DI BASE
La grafica bitmap - La grafica vettoriale
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Introduzione
Esistono due tipi di computer grafica: grafica a punti (bitmap
graphics) e grafica vettoriale.
Nella grafica a punti, l’immagine è una griglia rettangolare (raster)
di pixel colorati: è un po’ come un mosaico, le cui tessere (i pixel)
sono molto piccole. Nella memoria del computer vengono conservati
i singoli pixel dell’immagine bitmap.
Nella grafica vettoriale, una immagine è composta da oggetti grafici
(punti, linee, rettangoli, curve, e così via) ognuno dei quali è definito,
nella memoria del computer, da una equazione matematica.
Poiché ogni oggetto è rappresentato (in memoria) da una equazione
matematica, per riprodurre l’immagine su un dispositivo raster
questa va trasformata in pixel, operazione che si dice rasterizzazione.
Per le immagini bitmap ovviamente non esiste il concetto di
rasterizzazione, in quanto sono già per definizione un rettangolo di
pixel colorati.
Grafica bitmap
Questo tipo di grafica ha dei vantaggi, ma anche degli svantaggi:
I vantaggi di questo tipo di grafica consistono nel fatto che i
programmi di fotoritocco, funzionano con immagini a punti, e i
ritocchi sono appunto possibili punto per punto.
Per ingrandire l’immagine, (su monitor o in stampa) si deve aumentare
la dimensione del pixel, che può diventare però visibile, e quindi
rendere un effetto sgradevole all’immagine.
Nello stampare una immagine bitmap, la stampante riproduce
l’immagine punto per punto
esattamente come i punti sono. Ciò indipendentemente dalla
risoluzione della stampante, sia che si tratti di una stampa a risoluzione
bassa (300 punti per pollice) o molto elevata (2000 punti per pollice).
Grafica vettoriale
La grafica vettoriale è un’evoluzione della grafica a punti. I programmi
che consentono di creare immagini con curve, linee, rettangoli…
memorizzano il disegno, ossia l’immagine attraverso formule
matematiche e non coi punti; Poiché esistono moltissime curve
diverse, e un programma non può gestirle tutte, in computer grafica
vettoriale viene normalmente utilizzato un tipo di curva, studiato
per la prima volta nel 1972 dal matematico Pierre Beziér. Queste
formule matematiche, che descrivono i singoli oggetti che
compongono l’immagine, sono scritte in qualche linguaggio
(PostScript è il più noto).
Consideriamo per esempio un cerchio.
In modalità bitmap il cerchio verrà rappresentato con pixel neri su sfondo bianco. In modalità vettoriale il
cerchio verrà rappresentato con una formula, per esempio con le coordinate del centro e la lunghezza del
raggio.
Grazie a questa tecnica gli oggetti si possono ingrandire, e al contrario della grafica raster, senza nessuna
perdita di qualità. Quando poi si invia in stampa l’immagine, alla stampante non viene indicato dove vanno
stampati i singoli pixel, ma a questa arriva la descrizione matematica.
Quindi, contrariamente alla grafica a punti, la qualità con cui l’immagine verrà stampata è sicuramente
migliore. Inoltre, più la stampante ha maggiori punti per pollici, più l’immagine sarà definita. I programmi
che elaborano l’immagine con la grafica vettoriale, sono Macromedia Freehand e Adobe Illustrator.
Formati grafici
Quando l’immagine viene registrata su un supporto di massa, ossia, su disco rigido, bisogna scegliere un
formato grafico.
Vi sono due categorie di formati grafici:
• le immagini bitmap;
• le immagini vettoriali
LA GRAFICA BITMAP - IMAGING
La risoluzione
La dimensione dei pixel in un’ immagine ne determina la risoluzione. La risoluzione è misurata in pixel per
pollice (ppi, pixels per inch) o anche punti per pollice (dpi, dots per inch). Maggiore è la risoluzione, maggiore
è il numero di pixel. Un’ alta risoluzione implica una maggiore quantità di informazioni contenute nell’
immagine e quindi anche una maggiore quantità di dettagli e di passaggi di colore registrati.
Al contrario, a basse risoluzioni, con una registrazione di informazioni insufficienti, l’ immagine potrebbe
risultare poco nitida. Il numero di pixel in un’ immagine è fisso, quindi gli ingrandimenti determinano ina
riduzione della risoluzione. I monitor hanno una risoluzione di 72 dpi, pertanto la maggior parte delle
immagini per il Web sono caratterizzate da questa risoluzione.
Inoltre, la bassa risoluzione riduce i tempi di download delle
immagini, tuttavia non è adatta per le immagini stampate. Alcune
riviste vengono stampate ad un minimo di 300 dpi, ma gli imagesetter
ad alta definizione possono stampare a 1.200 dpi, 2.400 dpi o più.
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Ricampionare significa modificare la quantità di dati di un’immagine
alterando le dimensioni in pixel o la risoluzione dell’immagine. Il
ricampionamento verso il basso (riduzione del numero di pixel), o
downsampling, elimina delle informazioni dall’immagine. Il
ricampionamento verso l’alto (aumento del numero di pixel), o
upsampling, aggiunge nuovi pixel. Per specificare come aggiungere
o eliminare i pixel, dovete scegliere un metodo di interpolazione.
Photoshop esegue il ricampionamento usando un metodo di
interpolazione per assegnare i valori cromatici ai nuovi pixel sulla
base dei valori cromatici dei pixel esistenti.
Nel ricampionare la dimensione di un’ immagine, è consentito
passare da una risoluzione alta, ad esempio 300 dpi (per la stampa),
ad una bassa, ad esempio 72 dpi (per il monitor). In questo modo
la definizione non cambia, invece per il passaggio inverso, l’ immagine
non apparirà ben definita.
Inoltre è importante tenere in considerazione la voce “ricampiona
immagine”. Scegliendo tale voce e cambiando il numero di dpi, la
quantità di pixel diminuisce e la definizione non si mantiene. Invece,
non scegliendo il ricampionamento dell’ immagine, il numero dei
pixel rimane uguale, come anche la definizione, diminuisce o
aumenta solo la pesantezza del file, ossia il numero di dpi.
La definizione
Nelle immagini fisse, concentrandoci solo sulla fotografia digitale,
il processo di incremento della definizione è stato continuo e procede
tuttora, apparentemente senza un limite superiore.
Il numero di elementi primari che compone una immagine digitale
(pixel) è infatti in crescita ininterrotta dagli albori (anni '80) ad oggi,
e ha raggiunto ormai i 3 M/pixel per immagine negli apparecchi
miniaturizzati, gli 8 M/p negli apparecchi amatoriali ad ottica fissa
zoom, i 12 M/p nelle macchine professionali reflex.
Con questo livello di prestazioni è stata già raggiunta la qualità della
fotografia analogica nel formato più diffuso (35mm) e il livello di
crescita consente di prevedere che possa essere raggiunta a breve
anche la qualità del formato professionale (6x6).
La crescita continua di prestazioni è consentita, in questo settore,
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
a breve anche la qualità del formato professionale (6x6).
La crescita continua di prestazioni è consentita, in questo settore,
dalla quasi totale assenza di ogni vincolo di standard.
Questo deriva dal fatto che lo strumento per trasformare l'immagine
digitalizzata in una foto, visualizzata su schermo o stampata, è un
PC, ed è quindi completamente flessibile, aggiornabile e interfacciabile
con unità di memorizzazione sempre diverse e magari non ancora
esistenti al momento della sua fabbricazione.
Inoltre, uno standard esiste e si è affermato universalmente e senza
deroghe: è il formato JPEG (o JPG) per le immagini in formato
compresso. E' sufficiente che un PC trasformi le immagini provenienti
da una macchina digitale in formato JPG, perché queste siano
visualizzabili su qualsiasi unità (anche un lettore DVD collegato a
uno schermo T V) o stampabili su qualsiasi stampante.
Il formato
Formati grafici e compressioni per il video
Pixel per Pixel
In PhotoShop inoltre esistono diversi "modi di ragionare": in pixel,
in centimetri, in pollici ecc... Il Pixel è l'unità di misura per il web.
Si tratta della dimensione in base alla quale l’immagine appare a
video (visualizzazione che è condizionata anche dall'impostazione
del monitor).
Poiché potrà essere visualizzata anche su un monitor inferiore al
vostro, si consiglia di limitarne la dimensione entro i 1024 per 768
pixel.
Il numero di pixel visualizzati per unità di lunghezza sul monitor
variano a seconda della macchina che stai usando:
• PC: ha una risoluzione del monitor pari a 96 dpi (punti per
pollice)
• Mac: ha una risoluzione del monitor pari a 72 dpi
Se si considera che la risoluzione usata per la stampa è di 300 pixel
per pollice, è semplice comprendere quanto sia differente preparare
un’immagine per il web piuttosto che un’immagine che debba poi
essere stampata.
Il numero di pixel visualizzato per unità di lunghezza in un’immagine
è chiamato risoluzione dell’ immagine, solitamente misurata in pixel
per pollice (ppi).
Un’immagine ad alta risoluzione (usata solitamente per la stampa)
contiene più pixel, che sono di conseguenza più piccoli, rispetto a
un’immagine delle stesse dimensioni con una risoluzione inferiore
(consigliabile per il web). E' inoltre da dire che tutto quello che resta
a monitor avrà al massimo una risoluzione di 72Dpi e maggiore per
definizione alta
definizione bassa
per l'uso in printing. Ricordate infine che un'immagine in PS supporta dimensioni sino a 2GB, ma per il web
ne bastano molti, ma molti di meno.
Il formato GIF
GIF (si pronuncia “gif” ma anche “ghif”) è un formato standard di memorizzazione di file grafici bitmap a
scala di colore (quindi RGB). GIF è la sigla di Graphics Interchange Format ed è stato creato da CompuServe,
uno dei primi servizi online, per trasmettere in rete immagini grafiche in modo compresso, quindi rapido.
GIF è superiore a JPEG se si tratta di disegni al tratto, logo, fumetti. In questi casi GIF non elimina pixel,
come fa JPEG, ma anzi li riproduce esattamente, è prevalente su Internet quindi è probabilmente il formato
grafico più usato al mondo. Un grande utilizzo del formato gif è la grafica web, anche grazie alla possibilità
di avere trasparenze ed animazioni.
GIF funziona bene sui grafici “al tratto”, sia in bianco e nero che a colori e supporta al massimoGIF funziona
bene sui grafici “al tratto”, sia in bianco e nero che a colori e supporta al massimo 256 colori, quindi, se sono
necessari più di 256 colori bisogna considerare JPEG. Ma non funziona bene con le fotografie e le immagini
sfumate, per le quali è meglio usare JPEG. GIF funziona solo con immagini a scala di colore, con un massimo
di 256 colori (o grigi). Utilizza una compressione lossless, il che significa che nessun pixel dell’immagine
originale viene perduto (contrariamente ai metodo di compressione lossy).
Altro tipo di GIF è quello Interfacciato, in questo caso, l'immagine verrà visualizzata gradualmente man mano
che viene scaricata da un browser web, fino ad arrivare all’immagine più dettagliata. Quando si desidera che
alcuni pixel dell'immagine non vegano visualizzati, ma lascino posto allo sfondo, si usa un GIF cosiddetto
trasparente (deve essere un GIF89a). Tutti i pixel che devono essere trasparenti devono avere un certo colore,
diverso da ogni altro colore dell'immagine. Quel determinato colore deve essere indicato come trasparente.
Il GIF animato è una successione di diversi GIF che vengono visti successivamente. Photoshop non permette
di creare GIF animati. Per farlo servono altri programmi, per esempio GIFBuilder.
Il formato JPEG
JPEG (si pronuncia “geipeg”) è un formato standard di compressione dei file grafici bitmapped. E' la sigla di
Joint Photographic Experts Group, il nome del comitato cheha scritto le specifiche. Come abbiamo già detto
prima, al contrario del formato GIF funziona bene sulle fotografie, sui quadri naturalistici e simili; ma non
come detto prima, al contrario del formato GIF funziona bene sulle fotografie, sui quadri naturalistici e simili;
ma non funziona bene sui fumetti, disegni al tratto, logo, lettering.
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Questo formato è stato, infatti, progettato per memorizzare immagini
a colori o a grigi di scene fotografiche naturali in modo compresso.
Esso tratta solo immagini statiche, ma esiste un altro standard
correlato, MPEG, per i filmati (immagini in movimento). Il JPEG
è consigliato solo in fase di stampa o pubblicazione sul web, quando
cioè non sono più necessarie ulteriori elaborazioni. Si usa per
diminuire la dimensione di un file grafico, e per memorizzare ogni
pixel con 24 bit invece che con 8 bit. Realizzare file di piccola
dimensione è quasi obbligatorio se il file deve essere trasmesso su
rete o archiviato.
Riesce a comprimere una foto a colori fino a 20 volte, mentre GIF
arriva di solito a 4 volte. Il secondo vantaggio di questo formato è
che salva le immagini a colori a 24 bit per pixel (cioè potendo quindi
scegliere da oltre 16 milioni di colori). GIF può scegliere solo da
una paletta di massimo 256 colori.
JPEG tuttavia non sostituisce interamente GIF. Su alcuni tipi di
immagine, GIF funziona meglio sia per quanto riguarda le dimensioni
del file che per la qualità dell'immagine. Parlando in senso generale,
JPEG è superiore a GIF se si tratta di memorizzare o trasmettere
scene realistiche a colori o a grigi. E quindi fotografie prelevate con
lo scanner e simili. Le variazioni continue di colore e di grigio
vengono rappresentate meglio e in meno spazio da JPEG che da
GIF.
Come si salva una immagine JPEG in Photoshop?
Nel menù File si sceglie il comando Salva con nome e si seleziona
il formato JPEG.
Adobe Photoshop 4 ha una scala di qualità per la memorizzazione
dei JPEG che va da 0 a 10. Per compatibilità con la versione 3
conserva anche una scala correlata, espressa con aggettivi, che va da
Bassa a Massima. Attenzione che questi numeri e aggettivi si
riferiscono alla qualità dell'immagine. E naturalmente maggiore è
la qualità, maggiore è la dimensione del file (cioè minore la
compressione) e maggiore il tempo di trasferimento.
JPEG non supporta la trasparenza e probabilmente non la supporterà
ancora per un po'. Aggiungere la trasparenza a JPEG non è semplice.
Il metodo tradizionale, usato da GIF, consiste nello scegliere un
colore tra i 256 disponibili e dire che quel colore è trasparente.
Questo non si può fare in JPEG, perché JPEG perde i pixel: un pixel
non necessariamente rimane dello stesso colore dopo aver
decompresso l'immagine. Un altro approccio sarebbe di memorizzare
un canale alfa (percentuale di trasparenza), ma questo aumenterebbe
la dimensione dell'immagine. L'ideale sarebbe memeorizzare
l'immagine JPEG lossy più una maschera di trasprenza lossless
usando un altro algoritmo. Ma ancora non l'ha fatto nessuno.
Il formato PNG
Il formato PNG è superficialmente simile al GIF, in quanto è capace di immagazzinare immagini in modo
lossless, ossia senza perdere alcuna informazione, ed è più efficiente con immagini non fotorealistiche (che
contengono troppi dettagli per essere compresse in poco spazio).
Essendo stato sviluppato molto tempo dopo, non ha molte delle limitazioni tecniche del formato GIF: può
memorizzare immagini in colori reali (mentre il GIF era limitato a 256 colori), ha un canale dedicato per la
trasparenza (canale alfa). Esiste inoltre un formato derivato, Multiple-image Network Graphics o MNG, che
è simile al GIF animato.
Formati grafici e compressioni per la stampa
Il formato TIFF
Tag Image File Format è il più usato, più flessibile ed affidabile metodo per memorizzare immagini bitmap
in bianco e nero, a scala di grigio, a scala di colore, a colori RGB, CMYK, YCbCr, Lab. Un file TIFF può
essere di ogni dimensione (in pixel) e di ogni profondità di bit. Può essere salvato con o senza compressione;
Photoshop utilizza la compressione LZW, che è di tipo lossless.
Oltre ai dati dei pixel TIFF può contenere qualunque metainformazione in locazioni di memoria chiamate
tag. Le più comuni sono la risoluzione, la compressione, il tracciato di scontorno, il modello di colore, il
profilo ICC.
Esistono due versioni di TIFF, una per macchine Windows e una per macchine Macintosh. L’unica differenza
consiste nel fatto che i byte sono ordinati in maniera diversa. I byte nei file per Windows iniziano con le cifre
meno significative, nei file per Macintosh con quelle più significative.
Il formato PSD
PSD è un formato di file grafico di Adobe Photoshop, in grado di salvare un'immagine completa di tutti i
livelli che la compongono. Un'immagine salvata in formato proprietario Adobe, ha il vantaggio di essere
lavorabile in fasi successive. Lo svantaggio è dato dalle dimensioni eccessive che non rendono agevole il suo
trasferimento, se non usando idonee connessioni veloci o supporti adeguati.
Si tratta di un formato particolarmente ricco di dettagli e informazioni sull'immagine. Rappresenta per la sua
completezza un buon punto di partenza per i professionisti della grafica, per ottenere quasi qualsiasi altro tipo
d'immagine. Il formato supporta anche le animazioni basate su livelli.
L’ anti-aliasing
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Anti-aliasing : cos’è?
Photoshop è un programma con formato raster, questo tipo di
formato, causa il fenomeno dell'aliasing (ovvero digitale non vettoriale)
l'immagine il questo caso viene rappresentata da una griglia di pixel,
che, essendo quadrati, riescono a rappresentare le linee oblique (o
le curve) solo creando un effetto spezzettato. La scalettatura provocata
da questi quadrati è meno visibile se l'immagine è di una risoluzione
maggiore, in quanto il numero di quadrati aumenta e saranno
quindi ovviamente più piccoli.. Da quanto detto sopra è facile capire
cosa sia l'anti'aliasing: In effetti questo è un metodo utile per ridurre
visivamente al minimo l'effetto della scalettatura, che, soprattutto
per la visualizzazione dei caratteri tipografici, può risultare piuttosto
antiestetica..
Come funziona l’ anti-aliasing?
La maggioranza dei software per le immagini raster sono in grado
di gestire l'anti-aliasing.
Come fanno?
Creano vicino alla seghettatura dei pixel che sfumano dal colore
dell'oggetto a quello del suo sfondo, rendendo così il passaggio da
un colore ad un altro più graduale. Nelle figure qui a lato si vede
la differenza fra un testo scritto senza anti-aliasing e un testo scritto
con. Il cerchio invece è l'ingrandimento di un pallino fatto utilizzando
l'anti-aliasing. Si nota il passaggio graduale dal nero al bianco dei
pixel sul bordo della figura.
Quando utilizzare l’anti-aliasing e quando no
- E' utile utilizzare l'anti-aliasing sulla maggioranza dei caratteri
tipografici e su immagini con linee cur ve ed oblique.
- In linea generale, invece, non va utilizzato l'anti-aliasing quando
si lavora con font molto piccoli perchè ne peggiorerebbe drasticamente
la leggibilità.
- Un caso spinoso è quello della realizzazione di una gif con lo sfondo
trasparente.
Ci sono due possibilità:
a. Si può applicare l'anti-aliasing a patto che al momento della
realizzazione dell'immagine e dell'applicazione dell'anti-aliasing lo
sfondo sia dello stesso colore di quello su cui poi verrà visualizzata.
Il risultato altrimenti produrrà un antiestetico alone di un colore
non compatibile con lo sfondo.
b. Si può invece far a meno dell'anti-aliasing (se l'immagine lo
permette e la scalettatura non è esageratamente vistosa) ovviando
così al problema dell'alone e rendendo compatibile la trasparenza
con qualunque sfondo.
Una ulteriore possibilità prevede l'utilizzo del formato PNG al posto
di quello GIF, che permette di gestire una trasparenza graduale (il
cosiddetto canale alfa). Purtroppo, però, al momento in cui scrivo,
Internet Explorer non lo supporta ancora.
Anti- aliasing e peso delle immagini
È da tener presente (anche se per alcune immagini si tratta di differenze quasi trascurabili) che salvando in
GIF un'immagine a cui è stato applicato l'anti-aliasing questa sarà più pesante in kilobyte rispetto alla sua
corrispondente senza anti-aliasing. Questo è dovuto al metodo con cui le GIF vengono compresse e che le
penalizza nel caso in cui siano presenti più sfumature.
I formati di compressione per le immagini
Cosa si intende per metodo di compressione?
Ogni immagine digitale è caratterizzata da tre aspetti: oltre alla risoluzione e alla profondità di colore,ossia il
numero massimo di colori possibili, vi è il Formato/compressione: formato di salvataggio o codifica del file.
Per ottenere dei file di dimensione ridotta, si possono comprimere i dati, bisogna fare attenzione però alla
qualità dell'immagine, dato che certi metodi di compressione (detti lossy o distruttivi) possono influire
negativamente.
Esempio di formato non compresso: BMP (Windows/OS2 Bitmap).
Esempi di formati compressi: TIFF, GIF, JPEG, PNG.
Come funzionano i metodi di compressione?
Il loro funzionamento dipende in maniera sostanziale dal particolare metodo matematico usato. Per darvi
un'idea prendo ad esempio l'algoritmo di compressione usato dal formato GIF, uno dei più famosi. GIF utilizza
il metodo di compressione LZW (iniziali dei suoi inventori Lempel-Ziv e Welch).
Questo metodo, tra le varie tecniche che utilizza, si preoccupa anche di memorizzare il colore di una sequenza,
quando questa è monocromatica, invece che il colore di ogni singolo byte di cui è composta. Per esempio,
invece di memorizzare la sequenza rosso-rosso-rosso-rosso-rossorosso-rosso-rosso-rosso-rosso-verde-verde-blu-blublu-rosso, il metodo LZW memorizza i dati riguardanti il colore in questo modo: 10 rossi > 2 verdi > 3 blu
> 1 rosso È facile capire come immagini con vaste aree di colore uniforme possano venire quindi molto
compresse dal formato GIF, mentre immagini con sfumature molto graduali vengano ben poco compresse.
Il formato JPEG, invece, si basa sulla scoperta che l'occhio umano ha dei recettori di luminanza (bianco e
nero) molto più precisi rispetto a quelli di crominanza (colore).
Il metodo JPEG infatti separa i due canali dell'immagine (luminosità e colore) e applica algoritmi differenti,
più precisi sulla luminosità e più drastici sul colore, ottenendo così compressioni molto buone.
Vediamo ora le principali distinzioni fra i metodi di compressione.
Per questo metodi di compressione si distinguono in due grandi gruppi:
- Metodi con perdita (o Lossy)
- Metodi senza perdita (o Lossless)
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
I metodi Lossy
I metodi Lossy sono quei metodi che, proprio per comprimere al
massimo i dati, scartano alcune delle informazioni riguardanti
l'immagine originale. Sono metodi molto vantaggiosi per aumentare
al massimo la velocità di scaricamento, ma irreversibili:ogni qual
volta una immagine viene salvata in un formato lossy, vengono perse
alcune informazioni, che non sono più recuperabili. L'esempio più
classico di formato lossy per quanto riguarda le immagini è il JPEG;
un altro esempio di formato lossy assai usato oggi in rete è l'MP3.
I metodi Lossless
I metodi Lossless sono invece i metodi che non hanno perdita di
informazioni; ovviamente essi risultano sempre meno efficaci
nell'ottimizzare lo scaricamento dei dati, ma hanno il grande pregio
di mantenere costanti e stabili le informazioni contenute nell'originale.
Formati lossless per le immagini web sono il GIF e il PNG, uno dei
tanti formati lossless per l'audio è il WAV.
Attualmente nel Web vengono usati solo tre formati per le immagini:
GIF, JPEG e PNG. Questi formati comprimono le dimensioni dei
file delle immagini per ridurre i tempi di caricamento. È importante
sapere quale formato utilizzare per ogni diverso tipo di immagine.
Esempi metodi Lossless:
· RLE (Run Length Encoding)
· LZW (Lempel - Zif - Welch)
· JPEG (Joint Photographic Experts Group)
· CCITT (Comitato Consultivo Internazionale di Telegrafia e
Telefonia)
· Fractal
· Photo CD
Lossy compression
Il colore nellí immagine
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
I colori
Per poter completare la nostra preparazione dell'immagine, bisogna
conoscere sin dall'inizio anche la destinazione di queste, infatti per
definire qual'è il metodo di colore da utilizzare, bisogna sapere se
si stanno preparando immagini per la stampa oppure per il web.
Bisogna sapere che monitor e stampanti non elaborano i colori alla
stessa maniera.
I colori RGB sono usati per lavori che restano a monitor, che
possono essere: immagini web, clip art, gif ecc. Al contrario il
metodo CMYK è usato per la stampa.
Il monitor del computer utilizza una combinazione di raggi di luce
rossi, verdi e blu, mentre per la stampa il metodo CMYK "colori in
quadricromia", in quanto la quasi totalità delle macchine da stampa
commerciali e una grande quantità di stampanti a colori utilizzano
una combinazione di quattro colori - ciano, magenta, giallo più un
colore chiave .I principi che regolano questi due modi "di vedere i
colori" sono detti: composizione e scomposizione.
La composizione e la scomposizione dei colori sono regolate da due
diversi principi: la sintesi addittiva e la sintesi sottrattiva.
La prima si riferisce al colore sotto forma di luce, la seconda
al colore come pigmento.
Prendiamo in esame la sintesi addittiva. La luce bianca contiene in
sé tutti gli altri colori, come viene evidenziato dalla sua scomposizione
attraverso un prisma, ma i colori-luce primari sono tre, rosso, verde
e blu, spesso indicati con le iniziali dei loro nomi inglesi (R - Red,
G - Green, B - Blue).
Il termine primari indica che i tre colori sommati in uguali
proporzioni ( per esempio facendo convergere tre fasci di luce rossa,
verde e blu ) generano luce bianca, mentre se vengono miscelati tra
loro a due a due creano altri colori, detti secondari.
Ogni colore primario ha un complementare, che è quello dato dalla
somma degli altri due primari.
Se davanti ad un fascio di luce bianca viene posto un filtro giallo,
e così via per gli altri colori secondari. Questo è il principio di base
al quale funzionano gli schermi televisivi e monitor dei computer,
che vengono appunto definiti schermi RGB.
Diverso è il discorso quando dobbiamo riprodurre i colori tramite
la stampa: in questo caso dobbiamo fare riferimento al principio
della sintesi sottrattiva, che è quella che si applica agli inchiostri.
I pigmenti depositati sulla carta, colpiti dalla luce bianca, ne
assorbono alcune componenti e ne riflettono altre: per esempio,
l'inchiostro giallo assorbe tutte le componenti della luce tranne
quella gialla. I colori primari della sintesi sottrattiva non sono altro
che i colori secondari della sintesi addittiva, e cioè cyan, magenta
e giallo.
Anche in questo caso si usano spesso le iniziali inglesi (C - Cyan,
M - Magenta, Y - Yellow).
Miscelandoli insieme tra loro in proporzioni diverse si ottengono tutti gli altri colori, sommando tutti e tre
al massimo dell'intensità si ottiene il nero.
Photoshop usa il modello RGB, assegnando un valore d'intensità ad ogni pixel compreso fra 0 (nero) e 255
(bianco) per ognuna delle componenti RGB di un'immagine a colori.
Ad esempio, un colore rosso luminoso può avere un valore R di 246, un valore G di 20 e un valore B di 50.
Quando i valori di tutte le tre componenti sono uguali, si ottiene una sfumatura di grigio. Quando il valore
di tutte le componenti è 255, si ottiene il bianco puro, mentre quando il valore di tuttele componenti è 0,
si ottiene il nero puro.
Per convertire le immagini seguite alcuni accorgimenti:
· Eseguite modifiche e ritocchi quando l'immagine si trova nel suo formato originale;
· Salvate sempre copie di riserva prima della conversione;
· Unite sempre i layer (livelli) prima della conversione
CYAN
MAGENTA
GIALLO
Come convertire in modo veloce:
· Dal menù selezionate IMMAGINE
· Selezionate METODO
· E scegliete il metodo: da RGB a Scala di colore (per formati GIF e BMP) da CMYK a Multicanale,
da Lab a Multicanale, Bitmap o Scala di grigio, da Scala di grigio a Bitmap, Scala di colore o
Multicanale, da Due tonalità a Bitmap, Scala di colore o Multicanale
Quadricromia CMYK
CMYK è l'acronimo per Cyan, Magenta, Yellow, Key black; è un modello di colore detto anche di quattricromia
o quadricromia. La “K” in CMYK si riferisce a key (chiave), in quanto i sistemi di stampa che utilizzano questo
modello usano la tecnologia Computer to plate (CTP), nella quale mediante una “lastra chiave” (“key plate”
in inglese) si allineano correttamente le lastre degli altri tre colori (il ciano, il magenta ed il giallo appunto).
Yellow
Cyan
Key black
Magenta
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Quando sono sovrapposti nelle diverse percentuali, i primi tre
possono dare origine quasi a qualunque altro colore. Il 100% di
tutte e tre le componenti (CMYK 100,100,100,0) non genera
solitamente il nero, bensì il bistro, colore simile a una tonalità di
marrone molto scura.
Nelle immagini CMYK, il bianco puro si ottiene quando tutte le
quattro componenti hanno valore 0 percento. CMYK è il metodo
da usare per la preparazione di un'immagine da stampare in
quadricromia. Ricordando che nella maggior parte dei casi le
immagini RGB, in scala di grigio e CMYK contengono 8 bit di dati
per ogni canale di colore, un'immagine RGB con tre canali, otterrà
una risoluzione in bit RGB a 24 bit (8 bit x 3 canali), una risoluzione
in bit in scala di grigio a 8 bit (8 bit x 1 canale) e una risoluzione
in bit CMYK a 32 bit (8 bit x 4 canali).
Con PhotoShop è inoltre possibile convertire i vari formati tra loro,
tale passaggio crea una modifica permanente ai valori cromatici
dell'immagine.Ad esempio, quando convertite un'immagine RGB
in metodo CMYK, i valori cromatici nella gamma RGB non contenuti
nella gamma CMYK sono regolati in modo da rientrare nella gamma
CMYK, in poche parole, il quarto colore viene aggiunto.
Colori RGB
Le immagini RGB usano tre colori per riprodurre fino a 16,7 milioni
di colori sullo schermo; sono immagini a tre canali, per cui
contengono 24 (8 x 3) bit per pixel. RGB è il metodo predefinito
per le nuove immagini Photoshop. Photoshop usa anche il metodo
CMYK, assegnando ad ogni pixel di un'immagine un valore
percentuale di ciascun inchiostro di quadricromia.
Ai colori più chiari (luci) vengono assegnate piccole percentuali di
colori di quadricromia, mentre ai colori più scuri (ombre) vengono
assegnate percentuali più alte.
Ad esempio, un rosso brillante può contenere 2% di cyan, 93% di
magenta, 90% di giallo e 0% di nero.
Scala di grigi
Se ci si limita ai grigi la scala sviluppata è detta scala di grigi. Una
scala di grigi è una scala uniforme di chiarezza, con vari gradi di
grigio che vanno da bianco a nero che dunque, fissato il numero,
sono sempre gli stessi, indipendentemente dall'illuminazione. Il
modello Scala di grigio usa le tinte di nero per rappresentare un
oggetto. Ogni oggetto in scala di grigio ha un valore di luminosità
compreso tra 0% (bianco) e 100% (nero). Le immagini prodotte
con gli scanner in bianco e nero o in scala di grigio vengono
visualizzate in scala di grigio. La scala di grigio consente di convertire
i disegni a colori in disegni in bianco e nero di alta qualità. In questo
caso, Adobe Illustrator ignora tutte le informazioni sui colori del
disegno originale: i livelli di grigio (tonalità) degli oggetti convertiti
rappresentano la luminosità degli oggetti originali.
Quando convertite gli oggetti dalla scala di grigio al modello RGB,
i valori di grigio dei singoli oggetti vengono tradotti in colori. Potete
anche convertire un oggetto da scala di grigio in CMYK.
Immagini convertite in CMYK
CMYK
Immagini convertite in RGB
RGB
Cyan
Red
Magenta
Green
Yellow
Blue
Key black
Potete anche convertire un oggetto da scala di grigio in CMYK.
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Scala colori
Per scala di colori si intende un sistema di codificazione standardizzato
per l'identificazione univoca dei colori. I sistemi di standardizzazione
cambiano a seconda dell'ambito di utilizzo (tipografia, fotografia,
grafica video o per computer, colori per edilizia eccetera).
Attualmente si utilizzano diversi sistemi di riferimento:
- RAL
- NCS
- Pantone
- RGB
Colori bitmap
Un'immagine a colori richiede più informazione di una in bianconero o a sfumature di grigio; la quantità di informazione necessaria
sarà tanto maggiore quanto maggiore il numero di colori (sfumature)
possibili. Le immagini bitmap a colori usano sempre la sintesi
additiva dei colori, basata sui tre colori fondamentali Rosso-VerdeBlu (RGB red-green-blue).
Un'immagine bitmap a 16 colori sarà formata da pixel che possono
assumere solo 16 colori possibili. Poichè 16 = 24 ogni pixel richiede
solo 4 bit di informazione. Dunque un'immagine 800x600 a 16
colori richiede 800x600x4 = 1920000 bit = 240000 bytes e cioè circa
120K. Naturalmente con soli 16 colori non è possibile riprodurre
tutte le sfumature di colore di un quadro e se si vuole una qualità
migliore è inevitabile passare a un numero di colori maggiore e a
un maggior consumo di informazione.
Nel mondo dell'informatica sono usati gli standard dell’ immagine
accanto. L'ultimo standard (16 milioni di colori ovvero 24 bit) è
detto anche True Color (vero colore) ed è molto diffuso oggi sui
personal computer dando una qualità di livello fotografico. Si stanno
comunque diffondendo anche standard a 30, 32, 36 bit con numero
di colori dell'ordine dei miliardi.
Caratteristiche del colore
Tinta
Il principale attributo percettivo del colore è la tinta, cioè quella
caratteristica del colore che si indica con i nomi rosso, giallo, verde,
blu, viola, arancio e così via .Quando si cita una tinta, per esempio
"rosso", non si intende parlare di un colore rosso particolare, ma
dell'intera famiglia di tutti i rossi, dai più saturi ai meno saturi e dai
più luminosi ai meno luminosi. In questo senso, i colori rosso e
rosa fanno parte della stessa famiglia, cioè hanno la stessa tinta.
Non tutti i colori hanno una tinta: bianco, nero e varie gradazioni
di grigio sono colori senza una tinta, ovvero colori acromatici. I
colori cromatici sono quelli che hanno una tinta (eventualmente
mescolata con bianco, nero e grigio). Pare che l'occhio umano possa
distinguere circa 250 tinte diverse.
saturazione 0%
proporzione
bianco 100%
luminosità100%
proporzione
nero 100%
luminosità 0%
Pare che l'occhio umano possa distinguere circa 250 tinte diverse.
Di queste ce ne sono solo quattro che non vengono percepite come
mescolanze di altre tinte: si tratta del rosso, del giallo, del verde e
del blu che sono dette tinte unarie.
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Saturazione
La saturazione o purezza è l'intensità di una specifica tonalità. Una
tinta molto satura ha un colore vivido e squillante; al diminuire
della saturazione, il colore diventa più debole e tende al grigio. Se
la saturazione viene completamente annullata, il colore si trasforma
in una tonalità di grigio.
.La saturazione di un colore dipende dall'intensità della luce e dallo
spettro di lunghezze d'onda su cui viene distribuita. Il colore puro
si ottiene quando la luce è su una singola lunghezza d'onda (come
nel caso del laser). Per desaturare un colore in un sistema sottrattivo
si possono aggiungere bianco, nero, grigio, o il colore complementare.
Corso di
Luminosità
Lavorare sulla luminosità di un’ immagine vuol dire eseguire semplici
regolazioni sulla gamma tonale dell'immagine, regolando in modo
uguale ogni pixel dell'immagine (regolazione lineare), a differenza
di Curve e Livelli, che invece, applicano regolazione non lineare in
base al punto (nero o Bianco) che viene impostato. I valori possono
essere compresi tra -100 e +100, e trascinando il cursore verso sinistra,
si diminuisce la luminosità, mentre se si sposta il cursore verso
destra, si aumenta.
Contrasto
Lavorare sul contrasto significa, come per la luminosità, eseguire
semplici regolazioni sulla gamma tonale dell'immagine, regolando
in modo uguale ogni pixel dell'immagine, a differenza di Curve e
Livelli. Basta solo trascinare i cursori per regolare il contrasto. I
valori possono essere compresi tra -100 e +100, e trascinando il
cursore verso sinistra, si diminuisce il contrasto, mentre se si sposta
il cursore verso destra, si aumenta.
Tono
Lavorare sui toni consente di colorare una foto in scala di grigio
oppure in un qualsiasi colore scelto, che sia ciano, magenta, nero,
giallo, e così via. E’ possibile aggiungere un colore in tutta la gamma
tonale, ad esempio l’effetto seppia, oppure creare un effetto di
divisione dei toni in cui viene applicato un colore diverso alle ombre
e alle luci. Le ombre e le luci più estreme rimangono rispettivamente
nere e bianche.
1_ DISEGNO GRAFICO
CAPITOLO 1
LA GRAFICA BITMAP
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale di Competenza
CAPITOLO 2
GRAFICA VETTORIALE
2_ DISEGNO WEB
CAPITOLO 3
WEB DESIGN
CAPITOLO 4
MACROMEDIA FLASH
Corso di
3_ DISEGNO CAD
CAPITOLO 5
GRAFICA 2D
CAPITOLO 6
GRAFICA 3D
1_ DISEGNO GRAFICO
CAPITOLO 2
Lezione 2 ore 3
GRAFICA VETTORIALE
Coordinate
Coordinate cartesiane - Coordinate polari
Vettori
Grafica publishing
Il formato pagina - Scelta del formato pagina - Il layout Sezione aurea e numeri di Fibonacci - Griglia delle linee
di base - Organizzazione dei contenuti - I livelli
Editing
La scelta dei caratteri
Il tipo di carattere - Leggibilità dei caratteri sul monitor La leggibilità delle pagine - Diamo risalto alle parole Quanto scrivere? - Gli allineamenti - Immagini come testo
I formati di font
Font bitmap e vettoriale - Il formato PostScript - Il formato
Type1 - Il formato TrueType - Il formato ATM - Il formato
OpenType
Caratteri e testo grafico
Il corpo del carattere - Unità di misura - Crenatura - Legatura
- Spaziatura - Giustezza - Paragrafi e allineamenti - Lunghezza
di riga e interlinea - Font size
Labeling
Web labels - I principali problemi del labeling - guida di
progettazione - Esempio di titolazione non chiara
Lettering
Cos’è il lettering - Lettering rivista - Lettering busta lettere
- Lettering biglietti da visita - Lettering carta intestata
I Programmi di Grafica
Gestione delle immagini vettoriali: Macromedia Freehand
Lezione 6
ore 3
Lezione 7
ore 3
Lezione 8
ore 3
Revisione progetti
ore 6
giorni 1
GRAFICA VETTORIALE
INTRODUZIONE
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
La grafica vettoriale si basa totalmente su "vettori" cioè segmenti
orientati individuati dalle loro coordinate in un piano cartesiano:
ciò permette di svincolare la resa dalle dimensioni, che pur se
modificate notevolmente, non modificano la qualità dell'immagine
come invece avviene nei programmi di grafica bitmap che come le
fotografie peggiorano con l'ingrandimento.
Nella grafica vettoriale un'immagine è descritta mediante un insieme
di primitive geometriche che definiscono punti, linee, curve e
poligoni ai quali possono essere attribuiti colori e anche sfumature.
È radicalmente diversa dalla grafica raster in quanto nella grafica
raster le immagini vengono descritte come una griglia di pixel
opportunamente colorati.
Tutti i programmi di grafica tridimensionale salvano i lavori definendo
gli oggetti come aggregati di primitive matematiche. Nei personal
computer l'uso più evidente è la definizione dei font. Quasi tutti i
font utilizzati dai personal computer vengono realizzati in modo
vettoriale, per consentire all'utente di variare la dimensione dei
caratteri senza perdita di definizione.
COORDINATE
Le coordinate sono degli enti che servono a individuare la posizione
di un punto rispetto ad un prefissato sistema di riferimento, e che
i sistemi di riferimento più utilizzati per rappresentare un punto sul
piano sono quello CARTESIANO e quello POLARE.
Il sistema cartesiano si compone di 2 assi ortogonali tra loro (asse
delle x o delle ascisse, ed asse delle y o delle ordinate) che si
intersecano in un punto O che prende il nome di origine.
Il sistema polare si compone invece di un solo asse (asse polare) e
di un punto O detto polo nell'origine del suddetto asse .Su ciascuno
dei sistemi di riferimento è assegnata un'unità di misura, e su quello
polare anche un verso positivo delle rotazioni (generalmente
coincidente con il verso antiorario, anche autocad utilizza questa
convenzione).
Una volta fissato il sistema di riferimento sul piano, per individuare
univocamente un qualsiasi punto presente su di esso si possono
utilizzare due differenti tipi di coordinate:
le coordinate cartesiane se il riferimento è cartesiano,
le coordinate polari se il riferimento è polare.
Coordinate cartesiane
Quando si voglia determinare la posizione di un generico punto P
sopra una superficie, si può considerare questo punto come
intersezione di due rette tracciate su di essa e parallele rispettivamente
a ciascun asse. Queste due rette intersecheranno gli assi x ed y in
due punti P' e P'', la misura (denotiamola con x) della distanza tra
l'origine O ed il punto P' (quello sull'asse delle x) è detta ascissa del
punto; la misura (denotiamola con y) della distanza tra l'origine O
ed il punto P'' (quello sull'asse delle y) è detta ordinata del punto.
In tal modo ad ogni punto P del piano resta associata una coppia
In tal modo ad ogni punto P del piano resta associata una coppia di numeri (x, y) questi due numeri si
chiamano le coordinate cartesiane del punto P, e si dicono rispettivamente l'ascissa e l'ordinata di P.
Coordinate polari
Il sistema di coordinate polari è un sistema di coordinate bidimensionale nel quale ogni punto del piano è
identificato da un angolo e da una distanza da un punto fisso detto polo. Il sistema di coordinate polari è
utile specialmente nelle situazioni in cui le relazioni tra due angoli possono essere espresse più facilmente in
termini di angoli e distanza.
Siccome il sistema di coordinate è bidimensionale, ogni punto è determinato da due coordinate polari: la
coordinata radiale e quella angolare. La prima, di solito identificata con la lettera r, denota la distanza del
punto da un punto fisso detto polo (equivalente all'origine del sistema cartesiano). La coordinata angolare,
solitamente denotata con la lettera greca ∏, è anche detta angolo azimutale ed identifica l'angolo che la retta
a 0° deve spazzare in senso antiorario per andare a sovrapporsi a quella che congiunge il punto al polo.
Coordinate cartesiane
Coordinate polari
y
II
I
Q”
Q (5, 5)
P”
P (3, 3)
x0
x
P’
III
Q’
IV
VETTORI
Un vettore è un segmento orientato nello spazio euclideo tridimensionale.
Gli elementi che caratterizzano un vettore applicato sono:
direzione: la retta su cui giace il segmento;
verso: uno dei due possibili versi su questa retta;
punto di applicazione: punto di inizio del segmento, ovvero il punto che precede tutti gli altri punti
del segmento;
modulo o intensità: lunghezza del segmento.
modulo
direzione
verso
punto di applicazione
GRAFICA PUBLISHING
Il formato pagina
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Il formato è dato dalla forma e dalle dimensioni del prodotto finale,
che sia un libro, una rivista, un volantino o una confezione. La
scelta del formato spesso passa in secondo piano per la presenza
della serie di formati casrta ISO (International Organization for
Standardization), basati su un rettangolo con i lati in rapporto di
1:1,4142.
La serie fornisce una gamma di punti di riferimento per le dimensioni
che esonera il designer dalla necessità di dedicare un’ eccessiva
attenzione all’ argomento. L’ esistenza di dimensioni standard offre
un certo grado di uniformità al mondo delle produzioni stampate;
tuttavia, le istruzioni di progetto possono richiedere l’ utilizzo di
formati diversi.
Scelta del formato pagina
La scelta del formato si basa generalmente su:
- la tipologia del pubblico destinatario
- la natura dell’ informazione fornita
- l’ entità del budget disponibile, in quanto i processi di stampa
e finitura dei formati non standard sono più costosi.
Un approccio creativo alla scelta del formato può produrre ottimi
risultati. Con una maggiore varietà di opzioni per la scelta dei
supporti, si otterranno sensibili variazioni del risultato finale, che
si tratti del rapporto annuale sui profitti di un’ azienda o dell’ inserto
di una rivista.
In teoria, un grafico è libero di scegliere qualunque formato pagina
anche se, in pratica, l’ impatto visivo potrebbe risultare discutibile.
La divisione dello spazio su una pagina, frutto di una serie di studi,
ha una sua logica e una semplicità d’ uso che agevola il lavoro oltre
a offrire proporzioni gradevoli alla vista. Poter disporre di un’ ampia
gamma di formati significa, per un grafico, risparmiare tempo e
avere un buon punto di partenza per il proprio lavoro.
Il layout
Il layout è la disposizione degli elementi grafici in relazione allo
spazio che occupano all’ interno di un progetto complessivo. Lo si
potrebbe anche definire come la gestione della forma e dello spazio.
Scopo del layout è offrire una presentazione degli elementi grafici
e testuali che ne consenta la comprensione con il minore sforzo
possibile. Un buon layout permette all’utente di orientarsi attraverso
informazioni, anche complesse, presentate sia con un supporto di
stampa che elettronico. Il layout affronta gli aspetti pratici ed estetici
del lavoro e delle modalità di visualizzazione del contenuto, che si
tratti di una rivista, di un sito Web, di una rete televisiva o dell’
etichetta di un prodotto.
è un esempio di
simmetria e staticità,
infatti in questa
gabbia c'è un certo
equilibrio per cui le
immagini sono
disposte in modo
ordinato.
TITOLO
si tratta in questo caso di
una gabbia molto
versatile. infatti può
accogliere immagini di
diverse dimensioni e
blocchetti di testo di
diversa lunghezza.
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Sezione aurea e numeri di Fibonacci
Secondo gli antichi la sezione aurea rappresentava in modo infallibile
le proporzioni del bello. Se si divide un segmento in un rapporto
approssimativo di 8:13, la proporzione tra la parte più lunga e quella
più corta sarà uguale a quella tra la parte più lunga e il tutto.
Gli oggetti che rispettano queste proporzioni risultano gradevoli
alla vista e tale rapporto è presente in una serie di numeri chiamati
NUMERI DI FIBONACCI, ma anche in natura, negli steli di alcune
piante o nel guscio di certi animali.
Forse proprio perchè esistono in natura, risultano tanto gradevoli
alla vista. Nel campo delle arti grafiche, la sezione aurea è alla base
dei formati carta e i suoi principi possono essere assunti quale punto
di riferimento per creare lavori di design di proporzioni armoniche.
Se si disegnano due piccoli quadrati uniti per poi disegnarne un
terzo usando come lato la somma delle lunghezze dei due lati
precedenti, e si procede in questo modo, si ottiene una serie di
rettangoli di Fibonacci, i cui lati sono due numeri successivi di
Fibonacci in lunghezza, costituiti a loro volta da quadrati i cui lati
sono numeri di Fibonacci. Una curva simile è presente in natura
nel guscio delle lumache.
Griglia delle linee di base
La griglia delle linee di base è il fondamento grafico su cui si costruisce
un progetto di design. Svolge una funzione simile a quella delle
impalcature in edilizia, fungendo da guida e supporto per posizionare
elementi all’ interno della pagina con una precisione che sarebbe
difficile ottenere ad occhio nudo.
Ideare un progetto diverso per ciascuna pagina è un lavoro dispendioso
in termini di tempo, ma talvolta necessario. La griglia aiuta a stabilire
le proporzioni di una pagina sia sull’ asse verticale che su quello
orizzontale, rendendo la fase di progettazione più rapida e facile,
garantendo allo stesso tempo coerenza visiva e chiarezza. Spesso, per
presentare informazioni diverse in modi diversi, la griglia può variare
anche all’ interno di uno stesso lavoro.La griglia delle linee di base
è in rapporto con molti elementi chiave del design, ad esempio la
distanza rispetto alla linea di base e, quindi, le dimensioni del
carattere e l’ interlinea. Un altro aspetto di cui tenere conto è il
posizionamento della griglia rispetto all’altezza delle minuscole e
delle maiuscole.
Le griglie possono costituire un utile strumento a seconda di come
il designer intende usarle. Alcuni le ritengono fondamentali, altri
ingombranti. La flessibilità è importante per rendere la grafica
accessibile e interessante, e ciò è reso possibile dalle griglie. Le pagine
divise in colonne verticali risultano familiari, ma l’aggiunta di una
griglia orizzontale offre delle aree in cui inserire testo e immagini.
Complessità e libertà posso essere aumentate sovrapponendo due
o più griglie che creano spazi di forma originale in cui posizionare
gli elementi.
arte
Pompei in fiore
Suggestivi percorsi didattici
tra i giardini pompeiani
Fino al due giugno sarà aperto all’Orto
Botanico della Soprintendenza la
manifestazione
“Profumi e Semine di Primavera”,
appuntamento del ciclo “Le Stagioni nell’antica
Pompei 2008”. I visitatori saranno guidati,
sulla scorta delle indagini fornite
dai laboratori di ricerche applicate della Sap,
tra le dimore antiche e le loro fioriture.
Un viaggio suggestivo, che porterà il turista
dalla Casa dei Casti Amanti,
alla Casa di Polibio, passando per la
Casa dei Pittori al lavoro,
fino alla Casa di Ebe.
di Francesca Chiarolanza
36
Torna la Primavera nell’antica Pompei: dal 18 marzo si
è, infatti, aperto all’Orto Botanico della Soprintendenza
“Profumi e semine di Primavera”, l’appuntamento del
ciclo “Le stagioni nell’antica Pompei 2008”.
Fino al 2 giugno i visitatori saranno guidati in un suggestivo
percorso didattico sulla composizione dei prati che
ornavano i giardini di alcune più belle case pompeiane,
studiati dal laboratorio Ricerche applicate della SAP
(Soprintendenza Archeologica di Pompei) sulla scorta
delle indagini botaniche: dalla Casa del Profumiere, che
si mostrerà ancora più bella nella stagione delle piante
in fioritura, alla Casa dei Casti Amanti, (dove il prato
faceva parte di un giardino pensile) fino alla Casa dei
Pittori al lavoro, la Casa di Polibio e la Casa di Ebe.
Sarà possibile inoltre osservare semi di ortaggi e piante
annuali, comuni negli antichi orti pompeiani e oggi di
non facile reperimento.
Sempre nell’ambito della manifestazione, il 21 aprile,
all’Auditorium della Soprintendenza di Pompei si è svolta
una mattinata di studi dedicata alla gestione del
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Organizzazione dei contenuti
Nell’impaginazione di qualsiasi tipo di testo – romanzo, racconto,
poesia, illustrazione, libro fotografico, ecc. – c’è alla base una
organizzazione delle forme – e di conseguenza dei contenuti – che
viene denominata gabbia grafica. Essa serve a dare una coerenza
visiva all’intero libro, a organizzare in modo chiaro e leggibile i
contenuti, a dare alle pagine un aspetto armonico e ben curato, in
breve ad offrire al lettore un valore estetico aggiunto all’opera nella
sua totalità.
L’importanza di scegliere una buona proporzione tra lo spazio bianco
del foglio e lo spazio dedicato a immagini o testo, determina anche
il piacere della lettura. Solitamente una gabbia può essere simmetrica
(speculare) o asimmetrica. Nella gabbia simmetrica solitamente la
zona di bordo bianco è maggiore nella parte bassa per permettere
di sfogliare con le dita il foglio senza toccare i caratteri di stampa.
Nell’immagine seguente una gabbia grafica utilizzata con questo
canonico modello – oggi non più molto seguito – la cui conoscenza
è comunque utile per cercare nuove soluzioni grafico-visive.
All’interno della griglia potranno essere sistemati gli elementi della
pagina – testi, immagini, disegni, intestazioni, ecc.
I livelli
I livelli consentono di organizzare facilmente i contenuti di un
documento. È possibile disegnare e modificare gli oggetti di un
livello senza alterare gli oggetti contenuti in un altro livello.
E’ consigliabile aggiungere ulteriori livelli per organizzare le immagini,
il testo, i titoli, la grafica, e altri elementi del documento. I livelli
possono anche essere nascosti, bloccati o modificati. Il numero di
livelli che è possibile creare è limitato solamente dalla memoria del
computer;infatti il numero di livelli non influisce sulle dimensioni
dei file . Solo gli oggetti che vengono inseriti nei livelli ne
incrementano le dimensioni.. Ogni tipo di impaginazione può avere
numeri di livelli diversi, a seconda della materia da trattare.
arte
arte
Pompei in fiore
manifestazione
36
36
Pompei in fiore
manifestazione
36
Editing
La scelta dei caratteri
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Il tipo di carattere
Al fine di realizzare un buon sito web o un’ impaginazione grafica,
è bene dare il giusto peso, ad uno degli elementi più importanti,
ossia, il tipo di carattere utilizzato. In ogni sistema operativo, ci sono
dei caratteri predefiniti che sono: Arial, Courier, Georgia, Times
New Roman, Trebuchet e Verdana.
Analizzando nellospecifico possiamo fare un'altra distinzione:
1.Sistemi Windows: Times New Roman, Arial e Courier New
2. Sistemi Mac OS: Times, Helvetica e Courier.
E' possibile dividere questi caratteri in tre grandi famiglie:
- Times e Times New Roman sono caratteri serif. Vanno bene
per i documenti stampati, ma sono meno leggibili sullo
schermo di un computer.
- Arial e Helvetica sono caratteri sans-serif. Sono chiaramente
leggibili sullo schermo.
- Courier e Courier New sono caratteri a larghezza fissa, e
simulano i caratteri di una macchina da scrivere.
La leggibilità dei caratteri sul monitor
La leggibilità di un font dipende soprattutto dalla cosiddetta altezza
x (l'altezza di una x minuscola) e dalla dimensione generale del
carattere. Per questo, un tipo di carattere come il Times New Roman
ha una leggibilità media sullo schermo del computer in quanto ha
un'altezza x moderata.Invece caratteri quali Georgia e Verdana sono
stati progettati per essere letti su schermo, le altezze delle x sono
esagerate se paragonati a tipi di caratteri più tradizionali con la stessa
dimensione di punti.
La leggibilità delle pagine
Si consiglia di utilizzare sempre pochi font e poche dimensioni, per
dare alle pagine un aspetto più chiaro, mentre l'uniformità è garantita
dallo stesso tipo di carattere e la stessa combinazione di stili in tutte
le pagine evitando cambiamenti casuali. La tipografia è l'equilibrio
e l'interrelazione tra la forma delle lettere sulla pagina, un' equazione
verbale e visiva che aiuta il lettore a comprendere la forma e ad
assorbire la sostanza del contenuto.
Ha quindi un duplice ruolo in qualità di comunicazione verbale e
visiva; quando i lettori analizzano una pagina, sono inconsciamente
consapevoli di entrambe queste funzioni: per prima cosa studiano
i modelli grafici generali della pagina e poi analizzano il linguaggio
leggendo il testo.
Una buona tipografia stabilisce una gerarchia visiva per la prosa
sulla pagina e fornisce punteggiatura visiva e accenti grafici che
aiutano il lettore a capire le relazioni tra la prosa e le immagini, i
titoli e i blocchi subordinati di testo.
Le pagine web con testo denso, sono percepite dal lettore come un
muro grigio senza contrasto visivo. Anche ingrandire tutti gli elementi
allo stesso modo risulta essere un'operazione sbagliata; mentre i
caratteri in grassetto diventano monotoni perché, se tutto è in
è in grassetto, niente risalta nel modo giusto. Un buon uso dei margini e dello spazio bianco aumenta la
leggibilità di una pagina. Il contrasto visivo tra i vari caratteri e i blocchi di testo, i titoli e lo spazio circostante
sono fondamentali per ottenere una buona tipografia. L'occhio del lettore è attratto da un contrasto forte e
da motivi caratteristici frutto di un progetto accurato delle pagine.
Dare risalto alle parole
E' possibile attirare l'attenzione del lettore anche attraverso un giusto "movimento" del testo. Anche se le regole
di base della tipografia sono molto simili per le pagine web e i documenti di stampa tradizionali, i caratteri
stampati su carta e quelli visualizzati su schermo mostrano alcune differenze di base. La prima delle differenze
riguarda la risoluzione con la quale sono visualizzati i caratteri sui due supporti. Su quello cartaceo è assai
superiore.
Infatti la tipografia di riviste e libri è in maggior parte composta da 1200 punti per pollici (dpi), mentre lo
schermo di un computer visualizza raramente più di 85 dpi.La peculiarità della tipografia web è data dalla
sua variabilità: le pagine web vengono create al momento dello scaricamento sul browser web; ogni singola
riga di testo, titolo, carattere e relativo stile sono ricreati al momento dello scaricamento da un'interazione
tra browser, server web e sistema operativo dell'utente.
Quindi, un carattere mancante, un browser obsoleto, o un set particolare di caratteri rappresentano una serie
di imprevisti del processo di visualizzazione di una pagina web.
Corsivo (es: Corsivo)
- Il testo corsivo attira
l'occhio perché è in contrasto con la forma del
corpo del testo ma non è molto leggibile sullo
schermo, si può utilizzalo all'interno del testo per
parole o frasi accentuate o straniere e comunque
quando non si può proprio farne a meno.
lorem ipsum dolor sit am tempore
Grassetto (es: Grassetto)
- Il testo in grassetto
conferisce risalto essendo in contrasto con il colore
del testo normale. Il grassetto è abbastanza leggibile
su schermo, ma è bene usarlo il solo per evidenziare
singole parole e non intere frasi, altrimenti la sua
funzione viene a cadere.
Sottolineato (es: Sottolineato) - Il testo sottolineato
è una convenzione tipografica che risale ai tempi
delle macchine da scrivere, quando il corsivo e il
grassetto non erano disponibili. È buona norma
evitare la sottolineatura nei documenti web poiché
generalmente indica un collegamento ipertestuale.
Testo Colorato (es: Testo Colorato)
Generalmente il testo colorato come il testo
sottolineato ha funzione di collegamento
ipertestuale, perciò va usato solo per questa funzione,
cercando di dare lo stesso colore a tutti i link presenti
nei testi.
Lettere maiuscole (es: LETTERE MAIUSCOLE)
- Il testo in lettere maiuscole è uno dei metodi più
comuni e meno efficaci per aggiungere risalto.
LOREM IPSUM DOLOR SIT AM TEMPORE
incidunt ut labore et dolore. atque ut odia, invidia
despicatione et adver antur luptabib
INCIDUNT
UT
LABORE
DOLORE.ATQUE UT ODIA, INVIDIA
ET
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Ha più o meno la stessa funzione del grassetto, ma probabilmente
non ha la stessa efficacia. L'occhio legge soprattutto riconoscendo
la forma generale delle parole, non analizzando tutte le lettere e
riunendole in una parola riconoscibile.
Le parole o i titoli tutti maiuscoli formano rettangoli monotoni che
non catturano l'occhio. Per leggere un blocco di testo tutto maiuscolo
è necessario leggere il testo lettera per lettera, il che si traduce in una
lettura scomoda e lenta. È consigliabile anche evitare di utilizzare le
lettere iniziali maiuscole in tutte le parole delle intestazioni.
Spaziatura tra paragrafi - Uno dei modi più efficaci e sottili per
variare il contrasto visivo e l'importanza relativa di una porzione di
testo consiste semplicemente nell'isolarla o trattarla in modo diverso
dal testo circostante. Dividendo il testo in tanti piccoli blocchi e
distanziandoli leggermente tra di loro sarà più facile leggerli e
comprenderli.
Quanto scrivere
Scegliere parole corte che entrano più facilmente nel processo di
comprensione, con frasi composte da un massimo di 24, 25 parole,
ed espressioni concrete, tangibili. Anche la lunghezza delle righe di
testo delle pagine gioca un ruolo fondamentale per la leggibilità. È
necessario che la lunghezza delle righe di testo sia di circa 60/70
caratteri per riga.
Righe di testo troppo ampie richiedono al lettore di spostare
leggermente la testa o di affaticare i muscoli dell'occhio; allora la
leggibilità ne soffre perché, lungo la distanza di ritorno al margine
sinistro, il lettore può perdere la posizione della nuova riga.
Il conteggio esatto dei caratteri è difficile da prevedere perché le
dimensioni dei caratteri variano a seconda dei browser e dei sistemi
operativi. Una soluzione consiste nell'usare griglie di pagine con celle
di testo impostate della dimensione che si desidera che il testo abbia.
Un valido aiuto potrebbe consistere nell'utilizzo del carattere Times
New Roman da 12 punti. Tale larghezza di cella produce una riga
lunga circa 50 caratteri con una media di circa 9 o 10 parole per
riga.
Immagini come testo
Se si vuole utilizzare un carattere non standard per un titolo o un
capolettera, bisogna creare un'immagine GIF del testo o lettera in
un programma di gestione delle immagini e semplicemente inserirla
come immagine nel documento. Il colore di sfondo del testo deve
essere lo stesso della pagina.
Questo non è un metodo a cui ricorrere spesso perchè, un file con
immagini è di dimensioni superiori rispetto ad un file di testo e ciò
comporta un aumento del tempo necessario allo scaricamento della
pagina. Questo trucco, inoltre impedisce ai motori di ricerca di
leggere i testi.
Gli allineamenti
Le opzioni di allineamento standard sono:
- Giustificazione a destra;
I blocchi di testo allineati a destra nel mondo
occidentale sono difficili da leggere. Leggiamo
da sinistra a destra attenendoci alla linea verticale
del margine sinistro. La giustificazione del testo
a destra crea dei margini sinistri irregolari e questi
rende difficile la lettura perché l'occhio deve
cercare l'inizio di ogni nuova riga.
-Giustificazione al centro;
Sconsigliabile per le stesse motivazioni della
giustificazione a destra.
-Giustificazione a sinistra;
E' l'opzione più leggibile soprattutto per le pagine
web, perché il margine sinistro è uniforme e
prevedibile mentre quello destro è irregolare
aggiungendo così diversità e interesse alla pagina,
senza interferire con la leggibilità.
- Testo giustificato;
I blocchi di testo giustificato creano superfici
piene e le intestazioni dei blocchi sono
generalmente centrate per ottenere documenti
dall'aspetto simmetrico e formale.
giustificazione a destra
giustificazione al centro
giustificazione a sinistra
lorem ipsum dolor sit am tempore incidunt ut labore
et dolore. atque ut odia, invidia despicatione et adver
antur luptabib
testo giustificato
I formati di font
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Font bitmap e vettoriale
Cosa si intende per font vettoriale?
Un font vettoriale definisce i singoli caratteri descrivendoli attraverso
formule matematiche, o per meglio dire, vettori.
Queste 'formule' descrivono le linee che costituiscono il singolo
carattere, esattamente come succede per le immagini vettoriali, che
tradizionalmente si manipolano con programmi come Illustrator,
CorelDraw o FreeHand.
In realtà i font file di qualsiasi formato contengono, oltre alla
descrizione dei singoli caratteri, molte altre informazioni; ad esempio,
alcuni font file vettoriali contengono anche dati di hinting. Lo
hinting è un sistema che, in base ad esigenze dimensionali, modifica
la forma del carattere o della sequenza di caratteri.
Il formato PostScript
Il formato PostScript é un formato vettoriale di immagine creato
per la stampa; questo formato permette per la prima volta di descrivere
in modo vettoriale e quindi più preciso e meglio scalabile un font,
un riempimento od una immagine al tratto ad una stampante
PostScript in grado di comprenderlo e passarlo su carta.
Il formato Type1
Il formato Type1 è un formato vettoriale di font, basato sulla
tecnologia Postscript, rivolto inizialmente alla sola stampa. Il sistema
è stato integrato subito da Apple; i Macintosh sono quindi i primi
computer ad aver avuto a disposizione un così potente e versatile
mezzo di stampa. La Apple, cui andavano stretti questi vincoli
imposti da Adobe, si allea con la allora nascente Microsoft per creare
una nuova specifica per i font. Nasce così il formato TrueType (TTF).
Il formato TrueType
Il formato TrueType è un formato vettoriale; nella sua versione per
Mac è nato per contrastare il monopolio di Type1, e resta un formato
vettoriale solo per la stampa. Microsoft o integra nei suoi sistemi
operativi, rendendone possibile per la prima volta anche la
visualizzazione corretta sullo schermo.
Il supporto TrueType in Windows è infatti in grado di gestire il
font, convertendolo, a seconda dell'uso a cui è destinato, nei formati
più adatti per essere visualizzato al meglio, sia su schermo che in
stampa. Adobe, naturalmente, fa la sua contromossa: pubblica tutte
le specifiche di Type1 rimaste riservate fino a quel momento, in
modo da espandere il mercato dei font Type1, e, immediatamente
dopo l'uscita di TrueType per Windows, lancia il Formato ATM.
Il formato ATM
Il formato ATM (che prende il nome da Adobe Type Manager, il
software che lo gestisce) è un'evoluzione di Type1 che, tramite
un'ulteriore file, permette una visualizzazione di qualità sullo schermo
di tutti i font Type1 che, prima d'allora, erano visibili correttamente
un'ulteriore file, permette una visualizzazione di qualità sullo schermo di tutti i font Type1 che, prima d'allora,
erano visibili correttamente solo in stampa.
Il formato OpenType
Il formato OpenType è un formato vettoriale, nato prima di tutto dall'idea di unificare finalmente i due formati
Type1 e TrueType.Capace di essere visualizzato e stampato correttamente sia dalle stampanti PostScript che da
quelle di altro tipo, il formato OpenType ha inoltre meccanismi di 'intelligenza' (simili al sistema di hinting) che
scelgono la versione più adatta del carattere a seconda del testo circostante, o si occupano di convertire o meno
una serie di caratteri in un unico simbolo (ad esempio, sostituire 1/2 con _).
Caratteri e testo grafico
Il corpo del carattere
La parola "font" è difficilmente traducibile in italiano. Potrebbe essere resa con “disegno del carattere". Un font
può assumere diverse dimensioni che vengono scelte sulla base del "corpo". Il corpo è la misura della distanza
verticale tra il punto più alto e il punto più basso di un gruppo di caratteri. Da questa osservazione deriva che il
“corpo” fornisce un’idea molto approssimativa delle dimensioni vere e proprie di un carattere ed è molto
approssimativo anche per quel che riguarda la leggibilità; infatti font diversi ma con lo stesso corpo possono avere
livelli di leggibilità molto diversi.
apice
braccio
asta curva
C DE G I
J K LM
P R
S T VW XYZ
barra
montante
arco
ispessimento
coda
Unità di misura
Il corpo si esprime in punti tipografici. Punti sono misure molto complicate, vi sono diversi tipi di "punti" si parla
infatti di "punto cicero", "didot", "pica"... Essi non sono basati sul sistema metrico decimale. Il punto tipografico
è un dodicesimo della riga tipografica. Il sistema anglosassone prevede una riga tipografica di circa 4,2 mm, per
cui un “punto” è circa 0.35; che sarebbe il punto pica.
La riga nella trazione europea è di 4,512 mm e quindi il "punto didot" è di 0,376 mm. La dimensione in punti
di un carattere va dal punto più basso dei caratteri che hanno un'asta discendente (come la q o la g) al punto più
alto di un carattere che ha un'asta che sale (ad esempio, la d).
Per misurare un font nel senso orizzontale in molti casi si usano i punti “em” o “n”. Sono espressi in percentuale
rispetto alla larghezza della lettera m e alla larghezza della lettera n che
cambiano al cambiare del font. Questa unità di misura relativa al
font viene usata con profitto per la spaziatura tra i caratteri e per
altre spaziature orizzontali.
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Crenatura
Con il termine crenatura o kerning si indica la riduzione dello spazio
in eccesso fra due caratteri, attuata al fine di eliminare spazi bianchi
antiestetici e dare un aspetto più omogeneo al testo. Le distanze fra
lettera e lettera non devono ritenersi necessariamente uguali.
Di fatti potrebbe darsi il caso che tutte o gran parte delle lettere che
formano una parola vengano ad avere la medesima distanza fra le
singole lettere: questo tuttavia sarebbe un caso dovuto agli aspetti
costruttivi delle lettere stesse e per nulla dovuto al preconcetto che
tali distanze debbano calcolarsi uguali.
La crenatura nelle lettere di stile lineare sarà differente da quella
nelle lettere di stile graziato; nelle prime lo spazio fra due aste verticali
supera, di solito, lo spessore dell’asta stessa, eccetto nel caso in cui
lo spessore dell’asta sia molto largo. Ciò è determinato dal fatto che
il bianco interno alla lettera esige un corrispondente bianco
esterno.quando bisogna affiancare lettere particolari (con molto
spazio bianco al loro interno) la crenatura diventa la correzione
ottica della spaziatura tra lettera e lettera.
Legatura
Nei font graziati l'ascendente della lettera "f" e la grazia dell'ascendente
della lettera che la segue possono sembrare fastidiose alla vista per
questo spesso vengono unite da una legatura. Allo stesso modo il
puntino della "j" può essere eliminato e unito alla lettera "f".
Spaziatura
Per rendere i caratteri distinguibili è possibile regolare la spaziatura
fra tutte le lettere. Una spaziatura minore permette l'inserimento
di più lettere in un'area ma una riduzione esagerata della spaziatura
può provocare una sovrapposizione delle lettere mentre un'eccessiva
spaziatura rende le lettere troppo distanti l'una dall'altra.
Giustezza
La giustezza definisce la larghezza di una colonna di testo, si regola
in base all'interlinea e viceversa, ciò vuol dire che due blocchi di
testo aventi stesso carattere, stessa interlinea e stessa dimensione del
carattere avranno leggibilità diversa se distribuiti su colonne di
diversa dimensione.
La giustezza si misura in righe tipografiche o in centimetri. Stabilisce
la lunghezza massima delle righe tipografiche. Ciò non vuol dire
che la riga di testo debba essere lunga come la giustezza, cosa che
si verifica solo nella composizione a blocchetto; la riga può essere
di differente lunghezza, stabilendo appunto, per la giustezza il
massimo della lunghezza delle righe sulla quale è centrato o allineato,
a sinistra o a destra, il testo.
nulla potest mulier tantum se dicere amatam vere, quantum a me
lesbia amata mea est. nulla fides ullo fuit umquam foedere tanta,
quanta in amore tuo ex parte reperta mea est.
crenatura 0
nulla potest mulier tantum se dicere amatam vere, quantum
a me lesbia amata mea est. nulla fides ullo fuit umquam
foedere tanta, quanta in amore tuo ex parte reperta mea
est.
crenatura 5
n u l l a p o t e s t m u l i e r t a n t u m s e d i c e r e a m a t a m ve r e ,
qu a n t u m a m e l e s b i a a m a t a m e a e st . n u l l a f i d e s u l l o
f u i t u m qu a m fo e d e re t a n t a , qu a n t a i n a m o re t u o e x
p ar te reper t a m e a e st .
crenatura 10
colonna di 7 cm
lorem ipsum dolor sit am
tempore
incidunt ut labore et dolore.
atque ut odia, invidia
despicatione et adver antur
luptabib
7 cm
colonna di 13 cm
lorem ipsum dolor sit am tempore incidunt ut labore et
dolore. atque ut odia, invidia despicatione et adver antur
luptabib
13 cm
massimo della lunghezza delle righe sulla quale è centrato o allineato,
a sinistra o a destra, il testo.
La sproporzione fra un corpo del carattere e la lunghezza delle linee
può nuocere alla leggibilità, nel senso che, se il corpo è troppo
grande l’effetto risulterà sgradevole, mentre se è troppo piccolo
renderà faticosa la lettura.
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Poiché l’occhio legge per gruppi di parole anziché per parole singole,
il loro numero sulla riga è molto importante. per una corretta
giustezza, bisogna ricordare che:
• i caratteri con grazie danno i migliori risultati con 9-12 parole per
riga.
• i caratteri senza grazie hanno bisogno di righe da 7 a 10 parole.
• i caratteri con occhio grande accettano righe più lunghe, mentre
quelli con l’occhio piccolo impongono meno parole per riga.
• il numero di parole contenute in una riga può essere modificato
aumentando o diminuendo il corpo, cambiando carattere o
modificando la giustezza.
• la lunghezza di una linea di testo dovrebbe contenere circa da 1
a 2 volte le lettere dell’alfabeto minuscolo di un carattere tondo,
neretto, normale.
• quando si lavorara su giustezze più lunghe bisogna aumentare
lo spazio interlineare ed evitare confusione ed inciampi nel
passaggio della lettura da una linea a quella sottostante
Paragrafi e allineamenti
Paragrafi
Sia per un’ impaginazione grafica che per un sito internet, affinchè
la lettura sia fluida, è necessario dividere il testo in paragrafi, in
articolar modo nei casi in cui è presente troppo testo e non vi sono
immagini che possano allegerire la lettura.
Allineamenti di testo
Nel linguaggio HTML, per impostare gli allineamenti di testo che
valgono paragrafo per paragrafo si usa l'attributo ALIGN del tag
<P> secondo la sintassi:
<P ALIGN="valore">paragrafo da allineare</P>
dove il valore di ALIGN può essere: left per l'allineamento a sinistra,
center per l'allineamento al centro, right per quello a destra e justify
per l'allineamento giustificato.
L'allineamento a sinistra è quello predefinito, quindi specificare
l'attributo ALIGN="left" è superfluo, mentre il valore justify è stato
introdotto a partire da Html 4.0 e quindi non tutti i browser sono
in grado di interpretarlo correttamente.
Allo stesso modo di <P ALIGN="valore">....</P> si può usare il tag
<DIV ALIGN="valore">....</DIV> per identificare e formattare in
modo omogeneo interi blocchi di testo anziché i singoli paragrafi.
Quindi usando il tag <DIV>....</DIV> si contrassegna una sezione
di testo, costituita da uno o più paragrafi.
Esiste anche un tag che permette di definire un paragrafo di testo
preformattato. Si tratta del tag <PRE>....</PRE> che fa in modo che il testo venga visualizzato dal browser
nel modo in cui è stato digitato nel codice HTML usando un carattere a spaziatura fissa.
align = left|center|right|justify [CI]
Possibili valori:
left: le righe di testo sono riprodotte livellate a sinistra.
center: le righe di testo sono centrate.
right: le righe di testo sono riprodotte livellate a destra.
justify: le righe di testo sono giustificate su entrambi i margini.
<HEAD>
<TITLE>Come intagliare il legno</TITLE>
<STYLE type="text/css">
H1 { text-align: center}
</STYLE>
<BODY>
<H1> Come intagliare il legno </H1>
Lunghezza di riga e interlinea
Lunghezza di riga
Il testo visualizzato su schermo è difficile da leggere per via della bassa risoluzione degli schermi. Anche la
lunghezza delle righe di testo delle pagine web gioca un ruolo fondamentale per la leggibilità. Righe di testo
troppo ampie richiedono al lettore di spostare leggermente la testa o di affaticare i muscoli dell'occhio; allora
la leggibilità ne soffre perché, lungo la distanza di ritorno al margine sinistro, il lettore può perdere la posizione
della nuova riga.
E' opportuno restringere la lunghezza delle righe di testo a circa 60/70 caratteri per riga. Il conteggio esatto
dei caratteri è difficile da prevedere perché le dimensioni dei caratteri variano a seconda dei browser e dei
sistemi operativi. Una soluzione consiste nell'usare tabelle di layout di pagine con celle di testo non superiori
a 365 pixel di larghezza. Ad esempio utilizzando il carattere Times New Roman da 12 punti, tale larghezza di
cella produce una riga lunga circa 50 caratteri con una media di circa nove/dieci parole per riga. Partendo
da questa base provate a variare caratteri e dimensioni per ottenere il migliore equilibrio tra efficienza spaziale
e leggibilità.
Interlinea
Anche l'interlinea influenza notevolmente la leggibilità dei blocchi di testo: un'interlinea eccessiva rende
difficile all'occhio trovare l'inizio della riga successiva, mentre un'interlinea troppo ridotta confonde le righe
di caratteri. Nella stampa tradizionale si imposta l'interlinea dei blocchi di testo sommando circa 2 punti alle
dimensioni dei caratteri; ad esempio un carattere a 12 punti dovrebbe essere impostato con un'interlinea di
interlinea di 14 punti
lorem ipsum
dolor sit am
tempore
incidunt ut
labore et
dolore. atque
ut odia,
invidia
despicatione
et adver antur
luptabib
tempore
incidunt ut labore et
dolore. atque ut odia,
invidia despicatione et
adver antur luptabib
tempore
incidunt ut labore et dolore.
atque ut odia, invidia
despicatione et adver antur
luptabib
un'interlinea di 14 punti. Purtroppo l'HTML semplice non ha un
controllo affidabile sull'interlinea. Se si vuole gestire correttamente
l'interlinea bisogna ricorrere ai fogli di stile.
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Font- size
Per modificare le dimensioni dei caratteri la sintassi è:
<FONT SIZE="valore"> testo </FONT>
dove il valore si esprime con un numero intero che può essere
indicato in senso relativo o assoluto. In senso relativo il valore va
da -3 (molto piccolo) a +3 (molto grande). In senso assoluto il valore
va da 1 (molto piccolo) a 7 (molto grande).
Tutti gli attributi del tag <FONT> esaminati possono essere combinati
fra loro secondo la sintassi:
<FONT FACE="tipo di carattere" COLOR="#colore"
SIZE="dimensione"> testo </FONT>
Si può indicare la dimensione di un testo in diversi modi. Ecco
quali sono:
In pixel: E' un modo molto preciso per indicare le dimensioni
del carattere. Stabilite voi esattamente di quanti pixel deve essere
grande il carattere.
Headline 1 - 20px
Headline 2 - 18px
Headline 3 - 16px
Main text - 14px
Sub text - 12px
Footnotes - 10px
- Dichiarando un valore relativo: vale a dire scrivendo chiaramente
" grosso ", " molto grosso ", " piccolo ", " minuscolo ". ovviamente
in inglese. Ecco la lista dei differenti valori che potete assegnare con
il loro significato:
xx-small : minuscolo
x-small|: molto piccolo
small : piccolo
medium : medio
large: grande
x-large: molto grande
xx-large: . gigantes
- Con em: è un altro modo di indicare in modo relativo la dimensione
del testo. Unpo' più difficile da capire , ma con un po' di pratica
diventa intuitivo e facile da applicare.
Si deve indicare la dimensione del testo rispetto alla dimensione
normale del testo.
" 1em " significa " taglia normale ". Se indichiamo un numero
superiore ( generalmente un numero decimale ) come " 1.3em ", il
testo sarà di una dimensione 1 , 3 volte più grande. Lo stesso per
ridurre: " 0.8em " e il vostro testo sarà di una dimensione 0 , 8 volta
più piccolo. Fate attenzione, bisogna mettere un punto al posto
della virgola per i numeri decimali. Voi dovete dunque scrivere "
1.4em " e non " 1, 4em " !
Headline 1 - 1.25em (16 x 1.25 = 20)
Headline 2 - 1.125em (16 ◊ 1.125 = 18)
Headline 3 - 1em (1em = 16px)
Main text - 0.875em (16 x 0.875 = 14)
Sub text - 0.75em (16 x 0.75 = 12)
Footnotes - 0.625em (16 x 0.625 = 10)
- In percentuale: Questo è facile. Se voi indicate " 100 % ", il testo avrà una dimensione " normale ". Se
indicate" 130 % ", il testo di aura una dimensione corrispondente al 130 % della dimensione normale. Ciò
somiglia enormemente al "em" ( in realtà è più o meno simile ), dopo tutto è una questione di gusto.
var percentuale = "80%"; // default
if (size == 1) percentuale = "70%";
if (size == 5) percentuale = "110%".
Labeling
Cos’è il labeling
Per labeling s'intende l'attività di "nominare" o "etichettare" concetti e cose. All'interno del sito Web l'attività
di labeling può riguardare:
- le sezioni del sito,
- i menu,
- i link stessi
Insomma qualsiasi cosa funga da etichetta.
Ogni tipo di linguaggio è fondamentalmente ambiguo. Nel dialogo diretto con una persona il contesto e il
condizionamento sono molto forti e noi abbiamo dei costanti feedback che ci aiutano a capire meglio il
messaggio: immagini, suoni, l'espressione del viso, ecc. Nella comunicazione scritta il feedback dell'utente non
è immediato e la comunicazione diventa più difficile.
Risulta perciò cruciale progettare un sistema di labelling per evitare errori grossolani e permettere agli utenti
di capire i contenuti del sito e navigarlo: attraverso il labeling le parole (labels) sono scelte attentamente per
suddividere e rappresentare gruppi di informazioni molto ampie in sottoinsiemi più gestibili, differenziandole
chiaramente tra di loro. Esse devono, quindi, riflettere i contenuti del sito ma al tempo stesso parlare il
linguaggio dell'utente al fine di rendere più efficiente lo sforzo cognitivo di chi naviga sul sito
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Benecon
Centro Regionale
di Competenza
Corso di
Web labels
Le label possono essere testuali o iconiche. Le label
iconichecostituiscono un linguaggio più limitato del linguaggio
testuale e si utilizzano dove la lista di possibili scelte è molto ridotta.
Sul Web le label possono essere utilizzate in 4 modi.
- Label contestuali: descrivono i link ipertestuali presenti all'interno
di un testo in una pagina del sito. I link contestuali non sono
progettati in modo sistematico, come invece accade per gli
indici o i vocabolari controllati: è il contesto che ne circoscrive
il significato. Si deve quindi fare in modo che esse risultino
rappresentative per gli utenti che consulteranno il sito.
- Titoli: le label vengono utilizzate per indicare i titoli delle pagine
e molta attenzione deve essere posta alla coerenza tra titolo e
contenuto.
- Label in un sistema di navigazione: dopo aver categorizzato i
contenuti del sito strutturandolo in sezioni e sottosezioni si
procede all'attività di labeling delle sezioni. Fondamentale è
garantire la rappresentatività di tutti i contenuti del sito, poiché
in questo caso le label formano il sistema di navigazione
principale del sito e quindi il sistema prioritario di accesso alle
informazioni.
- Label come indici: l'attività di labelling è fondamentale anche
per realizzare l'indice di un sito (organizzato ad esempio
alfabeticamente). Si tratta di un sistema di navigazione alternativo
dei contenuti: l'indice - navigabile - suddivide in blocchi di
informazioni molto dettagliate i contenuti del sito.
I principali problemi del labeling
Una cattiva attività di labeling è spesso fonte di problemi di
navigazione e accesso alle informazioni.
Ecco i principali problemi che possono sorgere da una mancata
progettazione:
· label non sufficientemente rappresentative dei contenuti o
non abbastanza differenziate tra di loro. Un caso esemplare è
l'utilizzo della label "novità" o "news";
· abel fondate sul gergo e sulla cultura aziendale e non sui
bisogni dell'utente;
· label confuse o male organizzate. E' il caso frequente di nomi
di sezioni che non corrispondono ai nomi delle pagine a cui
rimandano, generando disorientamento nell'utente;
· label troppo sintetiche. Spesso si ha la tendenza a condensare
le label in due o tre parole a prescindere dal significato che
riescono a trasmettere. Questo accade spesso perché le label
non sono ideate in fase di progettazione del sito ma quasi
sempre in fase di elaborazione e devono quindi adeguarsi
all'estetica complessiva, adattandosi allo spazio concesso nella
barra di navigazione o allo spazio a fianco o all'interno di
un'icona.
Linee guida di progettazione
Progettare il labeling prevede una stretta collaborazione tra copywriter
e Information Architect. L'Information Architect non scrive
direttamente le label ma pone delle linee guida generali e specifiche per ogni sito che servono al copywriter
come riferimento per la realizzazione delle labels.
Ecco alcune linee guida:
- Costruire sistemi di labeling e non semplicemente delle label.
Il sommario di una rivista indica gli argomenti degli articoli proposti ed è ben diverso dall'indice alfabetico
dei contenuti di un libro così come dall'archivio cartaceo o elettronico di una biblioteca. Questi sono
tutti sistemi di labeling distinti ma facilmente riconoscibili. Sono basati su una logica di fondo che
permette di estendere l'uso delle labels man mano che i contenuti aumentano.
- Il labeling segue l'attività di categorizzazione dei contenuti.
L'attività di labeling parte dall'analisi di ogni contenuto individuato nell'attività di categorizzazione dopo
che si è creato un inventario dei contenuti. Partendo da questo inventario si estraggono alcune parole
chiave. Queste ultime rappresentano ogni sezione, sottosezione e contenuto del sito e diventano il punto
di partenza per la costruzione di un inventario delle label.
- Partire dagli obiettivi del sito e dagli utenti
Dopo aver raccolto una lista di parole chiave relative al contenuto stesso occorre progettare le labels
facendo riferimento agli altri due assi fondamentali analizzati in fase iniziale di progettazione: obiettivi
del sito e utenti. Occorre progettare labels che rispettino gli obiettivi del sito (vendita, intrattenimento,
comunicazione, ecc.) tenendo conto anche del target di riferimento e, quindi, del suo linguaggio e dei
suoi bisogni.
- Utilizzare altre fonti
E' sempre utile analizzare siti competitors che si riferiscono allo stesso target, mutuando da questi un
sistema di labeling che possa funzionare. Nel caso di siti specialistici può essere utile consultare vocabolari
controllati realizzati da professionisti del settore.
- Monitorare e migliorare continuamente
Il labeling non è mai definitivo: una volta messo online il sitema deve essere continuamente monitorato.
Esempio di titolazione non chiara
· I nostri prodotti
· Oggettistica in vetro soffiato
· Lampade da tavolo
· Il design di Artemide
· Faretti appesi
· Luci per il computer
· I consigli dei nostri clienti
L'indentazione chiarisce i legami logici tra gruppi di info
I nostri prodotti
Oggettistica in vetro soffiato
Lampade da tavolo
Il design di Artemide
Faretti appesi
Luci per il computer
I consigli dei nostri clienti
LETTERING
UNIVERSIDAD
DE LAS ARTES
SUN
Luigi Vanvitelli
Per lettering si intende tutta la fase di progettazione di un elaborato
grafico per quanto riguarda il carattere tipografico (il font per
intenderci). E' la scelta adeguata di un particolare tipo di font da
usare nelle circostanze giuste, oltre allo studio dello spazio che il
testo deve occupare in un impaginatoscelta delle font, eventualei
effetti (ombre, bombature, eccetera) posizionamento, che si tratti
di un lavoro cartaceo o multimediale.
E’ necessario far si che i font scelti si adeguino alla grafica ed alla
griglia utilizzate nel lavoro grafico, in modo da realizzare impaginati
eleganti ed armoniosi.
Benecon
Lettering biglietto da visita
Corso di
Carattere Optima corpo 11
colore Pantone blu 541
Antonio Devivo
Riviera di Chiaia, 86 • 80121 Napoli
Carattere BlairmdITC TTMedium corpo 5colore Pantone
blu 541
Tel 39 081 3134344 Fax 39 081 3134345
Carattere BlairmdITC TTMedium corpo 5 colore Pantone
silver 877 il pallino è Pantone
blu 541
ww w.fergi.it
[email protected]
Carattere Optima corpo 7 colore
Pantone blu 541
5 mm
12,5 mm
35 mm
20 mm
Centro Regionale
di Competenza
ferg
14 mm
5 mm
Antonio Devivo
KOMPAR spa
Riviera di Chiaia, 86 • 80121 Napoli
Tel 39 081 3544344 Fax 39 081 3164345
[email protected]
Lettering rivista
Utilizzo di due tipi di colori
e font combinati in modo
armonioso. Il titolo di
pagina, il paragrafo ed il testo
sono disposti in due colonne
dalla larghezza di 74, 6 mm.
FONT
PUNTI
TONALITA’
arte
FONT
gill sans
PUNTI
18
TONALITA’ 50% nero
optima
33
100%nero
Pompei in fiore
FONT
PUNTI
TONALITA’
manifestazione
optima
18
100%nero
36
FONT
PUNTI
TONALITA’
optima
11
0c45m100y0k
Lettering busta da lettere
Rimane il Marchio Fergi
in bianco in basso a destra.
Le
informazioni
tipografiche e la tipologia
della carta sono le stesse
per la carta da lettere.
10 mm
5 mm
10 mm
ferg
KOMPAR spa
Riviera di Chiaia, 86
80121 Napoli
w w w.fer gi.it in fo @ferg i . i t
10 mm
30 mm
20,5 mm
L’indirizzo è posto subito
al di sotto del Logo
allineato a destra sul limite
della fascetta al 10%.
10 mm
Sulla busta il Logo è
riportato in misura 10x30
mm ed è posto nell’angolo
superiore sinistro.
40 mm
FONT
PUNTI
TONALITA’
optima
8
nero 100%
FONT
gill sans
PUNTI
10
TONALITA’ 100% nero

Book grafica

Transcript

Documenti analoghi

Programma AA 2011/2012

Impiego Appropriato dei font

html_base - WordPress.com

Through Crisel Instruments Srl, Clivo di Cinna 196, 00136 Rome

Botanica Italiana - Botanica Italiana

SSENZIALE - Fujifilm

Curriculum Vitae - Università Popolare di Trieste

ENSEMBLE ARS INSTRUMENTALIS - Liceo statale "Galileo Galilei"

Review_Rinfrescare il look_PO_ottobre_2011