Web Design - Appunti

COLOR > LIGHT SOURCES AND SURFACE MATERIALS

Onde luci (onde elettromagnetiche) —> Le differenti lunghezze d'onda vengono interpretate dal

cervello come colori, che vanno dal rosso delle lunghezze d'onda maggiori (frequenze più basse) al

violetto delle lunghezze d'onda minori (frequenza più alte). Non a tutti i colori possiamo associare una

lunghezza d'onda precisa. Non c'è, cioè, una relazione biunivoca tra i colori che noi percepiamo e le

lunghezze d'onda. Quasi tutte le radiazioni luminose che il nostro occhio percepisce dall'ambiente

circostante non sono del tutto pure, ma sono in realtà una sovrapposizione di luci di diverse lunghezze

d'onda. Se ad ogni lunghezza d'onda è associabile un colore, non è vero il contrario. Quei colori a cui

non sono associate lunghezze d'onda, sono invece generati dal meccanismo di funzionamento del

nostro apparato visivo (cervello + occhio). Quando al nostro occhio arriva luce composta da più onde

monocromatiche, appartenenti a regioni diverse dello spettro, il nostro cervello interpreta i segnali

provenienti dai tre tipi di sensori come un nuovo colore, "somma" di quelli originari

4.2

SENSORE OCCHIO E STIMOLO

Sensore occhio: percepiamo il colore tramite due elementi, detti fotorecettori, della retina: coni

(cones) e bastoncelli (rods). I primi sono sensibili alle forme e ai colori, non garantiscono la visione

in caso di scarsa luminosità. Negli esseri umani ce ne sono tre tipi di coni: sensibili al rosso, al verde e

al blu; se attivati simultaneamente la luce percepita risulta essere bianca. I secondi Consente la

visione in condizioni di scarsa luminosità, ma non la percezione cromatica che è garantita dai coni.

FONTE LUCE + SUPERFICIE DEL MATERIALE + SENSORE OCCHIO = STIMOLO

per esempio: luce gialla + foglio bianco = Giallo ≠ luce gialla + foglio blu = Nero

4.3

PERCEZIONE DEL COLORE

I contrasti cromatici si producono tramite l'accostamento di due o più colori diversi tra loro. È altresì

vero che esistono processi fisiologici oculari che come per i contrasti luminosi permettono la visione al

nostro occhio di due tipi di colore, quello reale e quello apparente. Con un colore, per esempio il giallo,

si avranno delle percezioni diverse in base allo sfondo a cui lo sottoponiamo: questo perché tende alla

tonalità complementare dello sfondo stesso. Se invece lo sottoponessimo ad uno sfondo che è il

complementare del colore stesso, avremo maggiore luminosità per il principio del contrasto luminoso.

CONTRASTO CALDO-FREDDO: Il contrasto caldo-freddo serve ad evidenziare la sensazione

cromatica percepita dall’osservatore. E’ stato provato che i colori caldi con apice verso le tonalità

rosse, tendono ad aumentare il battito cardiaco e di conseguenza accelerare la circolazione

sanguigna provocando una sensazione di calore. Al contrario con l’osservazione dei colori freddi, con

apice sui colori blu, avviene l’inverso.

Movimento: i colori caldi hanno un movimento espansivo verso l’osservatore, ed il loro

movimento è centrifugo, dal foglio verso l’osservatore. Inversamente i colori freddi hanno un

movimento contrario, si contraggono ed il loro movimento è centripeto, sprofondano nel foglio.

CONTRASTO GIALLO-BLU: giallo caldo, blu freddo. Movimento: giallo = centrifugo verso

l’osservatore, blu = centripedo, sprofonda nel foglio.

CONTRASTO CHIARO-SCURO: effetto di movimento.

CONTRASTO BIANCO-NERO: un quadrato bianco su uno sfondo nero sembra più grande di un

quadrato nero, della stessa grandezza, su sfondo bianco. La stessa cosa vale anche per un testo

bianco su sfondo nero e un testo nero su sfondo bianco. Quindi lo sfondo nero tende a dare

l'impressione di ridurre e contrarre, mentre il bianco dilata, espande. Osserva lo stesso quadrato

grigio su sfondo bianco e nero. I quadrati grigi: quello su sfondo bianco sembra più scuro, mentre

quello su sfondo nero sembra più chiaro, eppure sono identici. Inoltre il bianco attenua la

luminosità dei colori e li fa apparire più scuri, mentre il nero accentua la luminosità e li fa sembrare più

chiari.

Altri contrasti, slides.

1. La luce fisica viene percepita fisiologicamente tramite i fotorecettori e anche psicologicamente

tramite il cervello.

2. Si percepisce la frequenza del colore

3. Poi la saturazione —> Purezza

4. La luminosità —> Intensità

5. Percezione di sola luminosità —>Bastoncelli - roda

4.4

TECNOLOGIA > MODELLI COLORE

Luma-chroma:

HSB —> sta per Hue (tinta), Saturation (saturazione) e Brightness (luminosita'). Secondo questo

modello, qualsiasi colore e' rappresentato da 3 numeri. Il primo numero e' la tinta (hue), ed il suo

valore si estende da 0 a 360 gradi. Ciascun grado rappresenta un colore distinto. A 0 (o 360) gradi si

trova il colore rosso e poi, all'aumentare dei gradi, troviamo gli altri colori (per esempio il giallo si trova

a 120 gradi, il verde a 180 gradi ed il blu a 240 gradi), fino al colore viola. In questo modo sono

rappresentati tutte le sfumature dei colori dell’iride. Il secondo numero e' la saturazione (saturation), e

rappresenta la quantita' di colore o, piu' esattamente la percentuale. Il suo valore oscilla tra 0 e 100.

Infine, il terzo numero e' la luminosita' (brightness). Puoi aumentare la luminosita' del colore

aggiungendo il bianco e diminuirla aggiundendo il nero. In questo caso 0 rappresenta il colore bianco

e 100 rappresenta il colore nero. Il colore diventera' piu' luminoso al tendere di questo valore a 0, e

diventera' piu' scuro al tendere di questo valore a 100.

LAB —> sta per Luminance (luminosita') ed A e B (che sono i componenti cromatici). In base a questo

modello, il componente A si estende dal verde al rosso, mentre il componente B si estende dal blu al

giallo. Questo modello venne sviluppato per essere indipendente dall' hardware. In altre parole tramite

questo modello puoi gestire i colori indipendentemente dalle macchine usate (come monitor,

stampanti, o computer). La Luminance si estende da 0 a 100, il componente A va da -120 a 120 (dal

verde al rosso) ed il componente B va da -120 a 120 (dal blu al giallo).

YIQ —> I colori sono suddivisi in valori di Brillanza (Y) e due valori di cromaticità (I, Q).

Su un monitor a colori sono visibili tutti e tre i componenti; su un monitor monocromatico, è visibile

solo la Brillanza. Tutti i valori vanno da 0 a 255.

HSB + LAB + YIQ = B + L + Y —> LUMA (basato sulla luminosità).

N-chromatic (N- color based)

RGB —> Un modello di colore è un modello matematico astratto che permette di rappresentare i colori

in forma numerica. R = red, G = green, B = Blue

CMY —> Ciano, Magenta, Yellow. Tricromia

CMYK —> Ciano, Magneta, Yellow, Key. I colori ottenibili con la quadricromia (sintesi sottrattiva) sono

un sottoinsieme della gamma visibile, quindi non tutti i colori che vediamo possono essere realizzati

con la quadricromia, così come non tutti i colori realizzati con l'insieme RGB (RED GREEN BLUE) cioè

quelli che vediamo sui nostri monitor (sintesi additiva) hanno un corrispondente nell'insieme CMYK.

TECNOLOGIA > MODELLI COLORE > GAMUT (gamma di colori)

LAB —> Indipendente dal dispositivo —> tutti i colori visibili.

RGB —> Dipendente dal dispositivo —> esempio gamma del monitor.

CMYK —> Dipendente dal dispositivo —> esempio gamma stampa.

5

DIGITAL 2D MOTION IMAGE (immagine in movimento)

5.1

SAMPLES vs OBJECTS

Samples-based image (frame by frame) e immagine (rester - pixmap)

Movimento (T): disposizione sequenziale d’immagini (FRAMES)

Immagine (spazio 2D): disposizione (griglia) strutturata di elementi di colore (PIXELS)

La risoluzione dipende dal rapporto qualità <——> file size

PROGRAMMI VIDEO (editing)

Object-based motion (key-frame, tweening) and image (vector)

Movimento (T): descrizione matematica delle variazioni (trasformazione oggetti = posizione, colore..)

Immagine (spazio 2D): descrizione matematica della forme (oggetti = linee…)

La risoluzione è indipendente alla relazione qualità <—|—> file size.

PROGRAMMI D’ANIMAZIONE.

5.2

SAMPLE-BASED MOTION IMAGE > DIMENSIONE E RISOLUZIONE > SPAZIO

(movimento) dimensione spazio immagine dimensione continua —> immagine analogica —>

pollici, cm… dimensione discreta —> immagine digitale —> pixels

(movimento) risoluzione spazio immagine risoluzione immagine —> dimensione discreta (pixels) e

continua (inches) —> PPI = Pixels per Inches risoluzione dispositivi —> dimensione discreta (punti,

linee) e continua (inches) —> DPI = dots per inch ; LPI = lines per inches.

L’occhio ha una risoluzione di 300 DPI a 40/50 cm di distanza, una buona qualità.

SAMPLE-BASED MOTION IMAGE > DIMENSIONE E RISOLUZIONE > TEMPO

(movimento) dimensione tempo immagine dimensione continua —> movimento fisico

dell’immagine (illusione continuità) —> durata in secondi, minuti, ore… dimensione discrete —>

movimento digitale dell’immagine —> durata in frames al secondo

(movimento) risoluzione tempo immagine risoluzione movimento immagine —> dimensione

discreta (frames) e continua (secondi) —> frequenza in FPS = frames per second risoluzione

movimento dispositivo —> dimensione discreta (frames) e continua (secondi) —> frequenza in

FPS = frames per second

L’occhio 10-15 FPS - Cinema 24 FPS - TV EU 25 FPS - TV USA 30 FPS.

SAMPLE-BASED MOTION IMAGE > FILE SIZE E RATE

Il campionamento del tempo avviene per campioni, frames per secondo, la durata è data in secondi.

Il campionamento dello spazio avviene per pixel per anche (pollice) e la dimensione immagine è in

pollice o pixels

Quantizzazione, livelli di colore per pixel. Codifica in bits per pixel. File size = dimensione in bytes e

bit rate = bits/second

Compressione è la riduzione del file (lossy, lossless -spaziale, temporale). File size = dimensione in

bytes e bit rate = bits/second.

FILE SIZE —> samples X code per sample = frames X pixel per frame X bits per pixel —>

esempio: 150 frames X 1200.000 pixels (400x300 pixels) X 24 bits = 150 frames X 360.000 Byte =

54.000.000 ~ 51,5 MB.

BIT RATE —> file size / seconds esempio: 54.000.000 byte / 10s = 5.400.000 Byte/s (size per un

secondo) ~ 5,15 MB/s

FORMATI

Object-based Motion Image > FILE FORMAT

SWF Web animation, interfaccia, gioco Interattività

5.4

MOVIE MAKING > Il processo creativo

Pre-produzione —> pianificare