La grafica
Corso WebMeToo 2005
a cura della Dott.ssa Giovanna
Gravina
1
Introduzione
- Il luogo comune:
la grafica serve ad “abbellire” il testo, a renderlo più “leggero”; è l’ultima
cosa a cui pensare se c’è tempo in un progetto editoriale; è un male
minore da accettare se si vuole migliorare “l’appeal” della pubblicazione;
deve costare poco o niente; tutti possono migliorare “artisticamente” un
testo, basta un po’ di tempo ed un software adeguato…
- Nella realtà:
l’impostazione grafica di una pagina è soltanto una fase del processo
editoriale. Lo scopo principale di un art-director consiste nell’applicare le
tecniche idonee a rafforzare e veicolare i contenuti della pagina scritta
oltre la lettura del testo.
- Comunicare la ragione della pubblicazione.
- La grafica come medium editoriale
a cura della Dott.ssa Giovanna
Gravina
2
I colori
I tre colori primari della
miscelazione additiva
I tre colori primari della
miscelazione sottrattiva
Nella sintesi additiva il colore ottenuto dalla combinazione dei tre primari
è il bianco, nella sintesi sottrattiva il colore risultante è il nero.
Ciò si spiega facilmente: se ognuno dei primari della sintesi sottrattiva
assorbe un terzo differente della radiazione visibile, mescolandoli tutti e
tre l'intero spettro visibile verrà assorbito e nessuna luce sarà riflessa
verso l'osservatore.
a cura della Dott.ssa Giovanna
Gravina
3
I colori
Quando si stampa un’immagine visualizzata sul computer si può notare che i
colori delle due immagini sono leggermente diversi.
Ciò si verifica perché il modo di ottenere le due immagini è diverso.
Si deve considerare che lo sfondo del computer è nero e i colori che si usano
sono: il rosso, il verde ed il blu (Red – Green – Blu: RGB), ma combinati tra
loro ci danno tutta la gamma dei colori.
L’assenza di questi tre colori dà il nero, al contrario, il 100% di tutti e tre i
colori dà il bianco.
Con la stampa si fa l’operazione inversa, perché lo sfondo (il foglio) è bianco.
I colori usati dalla stampante sono: il ciano, il magenta ed il giallo (Cyan –
Magenta – Yellow: CMY o CMY+K [blaK: nero]).
a cura della Dott.ssa Giovanna
Gravina
4
I colori
Modello di colore RGB (cioè,
rosso, verde e blu). Viene usato
per i monitor, e in dispositivi di
output simili.
Modello di colore CMYK (ciano,
magenta, giallo e nero). È utilizzato
soprattutto nel settore della
stampa tipografica.
Le definizioni sono basate sulle
proprietà di assorbimento
dell'inchiostro.
a cura della Dott.ssa Giovanna
Gravina
5
Colori Primari : rosso, giallo e blu
derivano da essi tutti gli altri colori e non
possono essere creati da nessuna
combinazione di altri colori.
Colori Secondari :
verde, arancio e viola. Si
ottengono miscelando i
colori primari.
Colori Terziari : giallo-arancio,
rosso-arancio, rosso-viola, blu-viola,
blu-verde e giallo-verde. Si ottengono
mescolando i colori secondari.
Colori Analoghi :
ogni tre colori che
sono affiancati sulla
ruota di colori
Colori Complementari :due colori
che sono l’uno l’opposto diretto
dell’altro, es. rosso e verde. Questi
colori creano il maggiore contrasto.
a cura della Dott.ssa Giovanna
Gravina
6
Esempi di contrasto
tra colori
complementari
Contrasto tra testo e sfondo
più leggibile
a cura della Dott.ssa Giovanna
Gravina
meno leggibile
7
Il colore è una sensazione che viene avvertita in
una zona particolare del cervello e viene provocata
dall'azione che i fotoni compiono sui coni.
Quindi possiamo ritenere i fotoni e i coni retinici gli
attori principali della rappresentazione cromatica
che ha luogo quotidianamente nell'immenso teatro
del nostro cervello.
Per questo motivo è importante la scelta dei colori
da utilizzare, perché il nostro cervello trasforma la
vista dei colori in sensazioni.
a cura della Dott.ssa Giovanna
Gravina
8
Colore
Sensazioni positive
Sensazioni negative
Note
Rosso
Passione, energia,
amore, forza, azione
Sangue, guerra,
pericolo, aggressività
Colore che sembra
avvicinarsi
all'osservatore.
Verde:
Natura, primavera,
fertilità, denaro,
tenacia, prontezza
Inesperienza, invidia
Via libera, giovinezza.
Giallo:
Sole, estate, oro,
ottimismo,
disponibilità, altruismo
Malattia, vigliaccheria,
azzardo
Particolarmente visibile
anche in situazioni
Blu:
Stabilità, calma, unità,
soddisfazione, armonia,
fedeltà, cielo, mare
Depressione,
conservatorismo
Bianco:
Neve, purezza,
innocenza, pace
Freddo, ospedaliero,
sterile
Grigio:
Intelligenza, dignità,
maturità
Ombra, noia,
depressione
Nero:
Potenza, formalità,
profondità, stile
Cattiveria, timore,
morte, anonimato
limite.
a cura della Dott.ssa Giovanna
Gravina
Colore preferito dalle
aziende.
9
Le immagini
I formati di compressione per le immagini.
I metodi di compressione si distinguono in due grandi gruppi:
Metodi con perdita (o Lossy) sono quei metodi che,
proprio per comprimere al massimo i dati, scartano alcune
delle informazioni riguardanti l'immagine originale. L'esempio
più classico è il JPEG.
Metodi senza perdita (o Lossless) sono invece quei metodi
che non hanno perdita di informazioni; come GIF e PNG.
a cura della Dott.ssa Giovanna
Gravina
10
Gif, Jpeg, Bmp e Png
Sono le estensioni più usate dei file grafici.
Bmp (Bitmap) sono immagini non compresse.
PNG (Portable Network Graphics) supporta da 256 (PNG-8) fino a 16.7 milioni
di colori (PNG-24). Il formato PNG, come il JPEG, supporta immagini fino a 24
bit, ma in più il PNG supporta il cosiddetto canale alfa che permette 256 livelli di
trasparenza. JPG non supporta la trasparenza, GIF permette di rendere
completamente trasparente un solo colore della palette. GIF supporta le
animazioni mentre sia JPEG che PNG supportano solamente immagini statiche
(per le animazioni esiste un formato gemello di PNG, detto MNG). Sia PNG che
GIF supportano il metodo interlacciato. PNG supporta solo la codifica RGB o
RGBA (RGB più il canale Alfa) con o senza paletizzazione, in quanto multipiattaforma. JPEG usa la codifica colore HSB (Hue Saturation Brightness)
mentre GIF usa una palette di colori RGB.
a cura della Dott.ssa Giovanna
Gravina
11
La risoluzione
La risoluzione è la densità di punti [dots in inglese], ovvero il numero di
punti contenuti in un'unità lineare (cm o pollice [inch in inglese]).
La risoluzione si misura appunto in DPI (Dots Per Inch) cioè numero di
punti per pollice. Per il web si è soliti anche utilizzare i PPI ovvero Pixels
Per Inch.
Ingrandendo a sufficienza un'immagine noteremo che è formata da tanti
quadretti di colori diversi, i pixel o punti. Questi quadretti possono avere
dimensioni differenti. Ovviamente, più grandi saranno, meno un pollice ne
potrà contenere; sarà quindi minore la risoluzione dell'immagine..
a cura della Dott.ssa Giovanna
Gravina
12
Carattere Bitmap o Raster (basato su
una matrice di punti, il primo ad
essere usato nelle interfacce
software
Carattere Vettoriale (basato sulla
definizione matematica del
tracciato che lo descrive, scalabile,
adatto alla stampa e a riproduzioni
accurate)
a cura della Dott.ssa Giovanna
Gravina
13
La grafica pittorica
Le immagini bitmap, chiamate anche immagini raster, sono quelle
immagini che per la loro visualizzazione hanno bisogno di una griglia
o retino di piccoli quadratini (i pixel). A ogni pixel di un'immagine
bitmap il computer assegna una posizione specifica e un valore di
colore.
Queste immagini dipendono dalla risoluzione, cioè il numero di pixel
per unità di superficie.
Il formato bitmap riesce a dare un'illusione fotorealistica e ad offrire
maggiori sfumature ed ombreggiature anche se ha bisogno di una
maggiore memoria.
Si usa questo tipo di immagini per riprodurre foto o immagini che
necessitano di sottili sfumature cromatiche.
a cura della Dott.ssa Giovanna
Gravina
14
La grafica vettoriale
Le immagini vettoriali sono caratterizzate da linee e curve definite da
entità matematiche: i vettori.
I vettori descrivono un'immagine o meglio i disegni in base alle loro
caratteristiche geometriche. Il vantaggio delle immagini vettoriali è la
loro indipendenza dalla risoluzione. Infatti si può ridurre o ingrandire
un'immagine vettoriale senza temere di perdere in definizione, poiché
non si interviene sulla grandezza del file in termini di peso (Kb).
Inoltre le immagini vettoriali richiedono poca memoria per essere
eseguite.
Si usano le immagini vettoriali per riprodurre contorni nitidi o disegni
geometrici, per i caratteri o le immagini piatte.
a cura della Dott.ssa Giovanna
Gravina
15
I software
I programmi più rinomati per la gestione delle immagini
bitmap sono Adobe Photoshop e Macromedia Fireworks.
I programmi più conosciuti per la creazione e la modifica di
immagini vettoriali sono CorelDraw, Adobe Illustrator e
Macromedia Freehand.
a cura della Dott.ssa Giovanna
Gravina
16