ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Introduzione alla grafica

•
•
R
RoBisc

Elementi di grafica digitale e teoria dei colori

1 of 28
Introduzione alla grafica Roberto Bisceglia 2016
La grafica L’utilizzo di sistemi operativi ad interfaccia grafica, ad es. Windows, ha permesso di creare degli strumenti avanzati per l’elaborazione della grafica. Questa può essere divisa in due tipi: • Grafica raster o bitmap • Grafica vettoriale
La grafica vettoriale La grafica vettoriale crea le immagini elaborando linee e curve definite da entità matematiche chiamate vettori. I vettori sono segmenti definiti da un punto di origine, una direzione e verso e una lunghezza. In altre parole, i dati dell'immagine vengono tradotti in formule matematiche che contengono tutte le istruzioni necessarie per tracciarla. Nel caso di un segmento sono memorizzate le coordinate del punto iniziale e di quello finale; nel caso di una circonferenza le coordinate del centro e la lunghezza del raggio. I colori sono dati dalla colorazione delle linee.
La grafica vettoriale Poiché la grafica vettoriale e' definita matematicamente, si ha che: • I disegni hanno una precisione notevole. • Le loro dimensioni sono contenute. • Sono oggetti vettoriali, per cui il loro ingrandimento o riduzione non ne pregiudica la qualità. • Si prestano particolarmente ad essere stampati ad alte risoluzioni. • Possono essere facilmente rasterizzati, ovvero trasformati in oggetti bitmap. Questo tipo di grafica è propria dei programmi di CAD.
La grafica vettoriale Questo un esempio di costruzione vettoriale: Qui si vede che un oggetto vettoriale può essere ingrandito senza perdere definizione, utilizzando la rielaborazione delle formule matematiche che costituiscono le curve.
La grafica raster o bitmap Nella grafica bitmap l’immagine è una griglia rettangolare detta raster costituita da pixel (picture elements) colorati disposti su un numero variabile di piani. A ciascun pixel viene assegnata una posizione specifica e un valore cromatico. Si presta meglio alla visualizzazione su video in quanto lo stesso monitor è costituito da una griglia.
La grafica raster o bitmap Un'immagine bitmap può essere monocromatica, in bianco e nero,ed è memorizzata da una serie di bit corrispondenti ai vari pixel 0 per il bianco e 1 per il nero. In questo caso è sufficiente un bit per pixel dell’immagine. Se l’immagine bitmap è a scala di grigio, di solito a 256 livelli di grigio, ad ogni pixel viene associato un valore che va da 0 (bianco) a 255 (nero). Per rappresentare tale immagine sono necessari 8 bit, cioè un byte: 28 bit = 256 colori. Se l’immagine bitmap è in True Color, ogni pixel viene rappresentato con le relative percentuali di rosso, verde, blu (R, G, B, i primari additivi). Se sono possibili 256 livelli per ognuno dei tre primari additivi, ogni pixel verrà rappresentato con tre numeri, ognuno da 0 a 255 e quindi con tre byte: (28) 3 = 224 = 16.777.216 colori.
La grafica raster o bitmap La grafica bitmap, per l’elevato numero di sfumature di colore che utilizza, si presta bene nella rappresentazione a video di immagini fotografiche. La struttura a pixel non consente modifiche della dimensione senza perdita di qualità, in quanto ogni singolo pixel deve essere ridimensionato e rimappato nella griglia. La perdita di qualità e maggiore ingrandendo l’immagine L’effetto conseguente ad un ingrandimento esagerato è visibile qui a fianco.
Teoria dei colori
La luce E’ una radiazione elettromagnetica costituita da onde che si propagano nello spazio alla velocità di 3 x 108 m/s. Le caratteristiche più importanti di un onda sono: • Lunghezza d’onda. • Frequenza. • Ampiezza. • Periodo
La luce La lunghezza d’onda è la distanza tra punti ripetitivi di un’onda. Si indica con l. La frequenza è la quantità di oscillazioni che l'onda compie nell'unità di tempo; si indica con n. La frequenza è inversamente proporzionale alla lunghezza d'onda: minore è la lunghezza d'onda maggiore è la frequenza, e viceversa. Il periodo è l’intervallo di tempo tra due occorrenze di un evento. Si indica con T. L’ampiezza d’onda è il massimo spostamento che subisce un punto rispetto alla posizione di riposo. Nella visione dei colori, l'ampiezza dell'onda influisce sull'intensità luminosa mentre la lunghezza dell'onda influenza la tonalità del colore percepito.
La luce Isaac Newton del 1666 scoprì che la luce bianca, fatta passare attraverso un prisma di vetro, si scompone in una serie di raggi colorati. Questo significa che la luce ci appare bianca non è monocromatica, ma è la somma di una serie di radiazioni, ciascuno con differente lunghezza d'onda. Newton rappresentò il colore con un cerchio che ha al suo centro il bianco e lungo la circonferenza, i colori scomposti dal prisma. I colori presenti lungo la circonferenza del cerchio di Newton sono detti colori spettrali.
La luce Come si è visto, l'occhio umano, illuminato da una luce monocromatica di varia lunghezza d'onda, percepisce i seguenti colori: • da 400 a 430 nm: zona del violetto • da 430 a 490 nm: zona del blu • da 491 a 560 nm: zona del verde • da 561 a 580 nm: zona del giallo • da 581 a 620 nm: zona dell'arancio • da 620 a 700 nm : zona del rosso
Modello di sintesi additiva Quando la luce colpisce direttamente l’occhio umano questo percepisce le differenti lunghezza d'onda che, viste singolarmente, ci appaiono colorate in modo diverso. Queste, tutte insieme, generano la visione del bianco in un fenomeno detto di sintesi additiva. Il bianco può essere, quindi, considerato come la somma di tutte le radiazioni spettrali. Nel modello comunemente usato sono stati scelti come colori primari il verde, il rosso e il blu. Questo modello è applicabile alla visione dei colori su un monitor.
Modello di sintesi additiva
Modello di sintesi sottrattiva Quando la luce che colpisce fotorecettori dell’occhio non proviene direttamente da una sorgente, ma è riflessa da una superficie, si deve tener conto della curva di riflessione propria della superficie riflettente.. Il colore visibile di una qualsiasi superficie dipende infatti dal potere di quella superficie di assorbire una parte della luce ricevuta dall'ambiente e di rimandarne verso l'osservatore la parte non assorbita sotto forma di luce riflessa. Il modello che ne deriva si chiama sintesi sottrattiva ed è quello che interviene nella normale osservazione dei colori, ad esempio quelli stampati. I colori usati sono i complementari del modello additivo: giallo, ciano e magenta. In pratica noi osserviamo degli oggetti e li vediamo colorati, in quanto, quando vengono investiti dalla luce, riflettono solo quella del loro colore mentre assorbono tutte le altre radiazioni.
Modello di sintesi sottrattiva
Tonalità La tonalità (hue in inglese) può essere definita come la qualità percettiva che ci fa assegnare un nome piuttosto che un altro al colore che stiamo vedendo. La tonalità è riferibile ai colori spettrali. Rosso, verde, giallo, blu sono tutti nomi di tonalità più i colori originati da combinazioni di rosso e di blu spettrali (porpore). Gli altri colori (es. rosa, marrone) sono da considerare combinazioni di tonalità con diversi livelli di saturazione e/o luminosità. Da un punto di vista fisico alla tonalità corrisponde la lunghezza d'onda della radiazione luminosa.
Luminosità e intensità La luminosità è l'ingrediente che specifica la quantità di bianco o di nero presente nel colore percepito. Può essere divisa in: Luminosità apparente: quantità di luce proveniente da un oggetto, paragonata alla quantità di luce proveniente da una superficie bianca sottoposta alla medesima illuminazione. Brillantezza o intensità (brightness, in inglese) è la quantità totale di luce percepita, emessa da una sorgente o riflessa da una superficie.
Saturazione La saturazione (saturation, in inglese) è la misura della purezza, dell'intensità di un colore in rapporto solo all'intensità della sua percezione isolata, ovvero in rapporto ad una superficie bianca sottoposta alla medesima illuminazione . Può essere anche considerata come come la misura della quantità di grigio presente in un colore. I colori spettrali sono in assoluto i più saturi che noi possiamo osservare.
Saturazione
Il modello RGB Il modello RGB si basa su quello a sintesi additiva. Tutti i colori visualizzati dal monitor sono creati miscelando quantità diverse di luce rossa, verde e blu con intensità diverse. A ciascun colore primario (rosso, verde e blu) viene assegnato un valore compreso tra 0 (assenza totale di colori) e 255 (colori con intensità massima), ovvero 28. Ad esempio, per ottenere il rosso puro è necessario combinare il valore 255 del rosso con il valore 0 del verde e del blu. Il giallo è ottenuto combinando il valore 255 del rosso e del verde con il valore 0 del blu. Impostando tutti e tre questi valori a 255 o a 0 si ottiene rispettivamente il bianco o il nero. Le possibilità di colore sono quindi 224 = 16.777.216.
I modello CMYK Il modello CMYK si basa su quello a sintesi sottrattiva. E’ il modello applicato nella stampa. In questo modello, i colori primari ciano (C), magenta (M) e giallo (Y) vengono combinati in quantità diverse per produrre una gamma di colori. La combinazione di tutti e tre questi colori in parti uguali produce teoricamente il nero. Poiché per le impurità presenti nell'inchiostro anziché nero puro si ottiene un marrone scuro, nell’utilizzo viene aggiunto un quarto colore, appunto il nero puro. (K).
Le tavolozze di colori Colori RGB Colori CMYK Colori HTML
Il sistema Pantone L’utilizzo dei modelli RGB e CMYK a volte non sono facilmente utilizzabili in applicazioni pratiche, ad esempio nell’industria tessile, in quanto le sfumature possibili sono troppe, oltre al fatto che un colore può risultare differente a seconda della luce dell’ambiente. Per questo nell’industria si utilizza il Sistema Pantone, che riduce a 1144 i colori originali, più altri 2000 inseriti successivamente nel catalogo. Per poter ottenere tutti i colori ai quattro colori fondamentali, il ciano, il magenta, il giallo ed il nero sono stati aggiunti l’arancio e il verde smeraldo, ottenendo così il modello CMYKOG, oppure aggiungendo il ciano chiaro ed il magenta chiaro, dando il modello CcMmYK. Questi modelli si definiscono esacromia (esa= sei). I colori Pantone hanno un nome di fantasia sono di solito riprodotte in mazzette dalle quali l’utilizzatore può scegliere quello preferito.
Il sistema Pantone Vediamo un utilizzo pratico del sistema Pantone: i colori della bandiera nazionale. Come sappiamo, il tricolore è formato da verde, bianco e rosso. Ma questo non basta, tanto è vero che esiste una norma ministeriale che dice che i colori devono essere: • VERDE: Pantone 17-6153TCX Fern Green • BIANCO: Pantone 11-0601TCX Bright White • ROSSO: Pantone 18-1662TCX Flame Scarlet
Profondità di colore La profondità del colore rappresenta il numero di colori presenti in un pixel presente in un’immagine. Nelle immagini a 1 bit, ciascun pixel può visualizzare solo uno dei due colori (21 colori per ogni bit), ad esempio il bianco e il nero. Nelle immagini a 2 bit, ciascun pixel può visualizzare uno 4 diversi colori della tavolozza (22 colori per ogni bit), ad esempio bianco, nero e due grigi. Nelle immagini a 8 bit, ciascun pixel può visualizzare uno dei 256 colori della tavolozza (28 colori per ogni bit). Nelle immagini a 16 bit, ciascun pixel può visualizzare uno dei 65536 colori (216 colori per ogni bit). Nelle immagini a 24 bit, ciascun pixel può visualizzare uno dei 16,8 milioni di colori (224 colori per ogni bit).
Fine

More Related Content

Introduzione alla grafica

  • 2. La grafica L’utilizzo di sistemi operativi ad interfaccia grafica, ad es. Windows, ha permesso di creare degli strumenti avanzati per l’elaborazione della grafica. Questa può essere divisa in due tipi: • Grafica raster o bitmap • Grafica vettoriale
  • 3. La grafica vettoriale La grafica vettoriale crea le immagini elaborando linee e curve definite da entità matematiche chiamate vettori. I vettori sono segmenti definiti da un punto di origine, una direzione e verso e una lunghezza. In altre parole, i dati dell'immagine vengono tradotti in formule matematiche che contengono tutte le istruzioni necessarie per tracciarla. Nel caso di un segmento sono memorizzate le coordinate del punto iniziale e di quello finale; nel caso di una circonferenza le coordinate del centro e la lunghezza del raggio. I colori sono dati dalla colorazione delle linee.
  • 4. La grafica vettoriale Poiché la grafica vettoriale e' definita matematicamente, si ha che: • I disegni hanno una precisione notevole. • Le loro dimensioni sono contenute. • Sono oggetti vettoriali, per cui il loro ingrandimento o riduzione non ne pregiudica la qualità. • Si prestano particolarmente ad essere stampati ad alte risoluzioni. • Possono essere facilmente rasterizzati, ovvero trasformati in oggetti bitmap. Questo tipo di grafica è propria dei programmi di CAD.
  • 5. La grafica vettoriale Questo un esempio di costruzione vettoriale: Qui si vede che un oggetto vettoriale può essere ingrandito senza perdere definizione, utilizzando la rielaborazione delle formule matematiche che costituiscono le curve.
  • 6. La grafica raster o bitmap Nella grafica bitmap l’immagine è una griglia rettangolare detta raster costituita da pixel (picture elements) colorati disposti su un numero variabile di piani. A ciascun pixel viene assegnata una posizione specifica e un valore cromatico. Si presta meglio alla visualizzazione su video in quanto lo stesso monitor è costituito da una griglia.
  • 7. La grafica raster o bitmap Un'immagine bitmap può essere monocromatica, in bianco e nero,ed è memorizzata da una serie di bit corrispondenti ai vari pixel 0 per il bianco e 1 per il nero. In questo caso è sufficiente un bit per pixel dell’immagine. Se l’immagine bitmap è a scala di grigio, di solito a 256 livelli di grigio, ad ogni pixel viene associato un valore che va da 0 (bianco) a 255 (nero). Per rappresentare tale immagine sono necessari 8 bit, cioè un byte: 28 bit = 256 colori. Se l’immagine bitmap è in True Color, ogni pixel viene rappresentato con le relative percentuali di rosso, verde, blu (R, G, B, i primari additivi). Se sono possibili 256 livelli per ognuno dei tre primari additivi, ogni pixel verrà rappresentato con tre numeri, ognuno da 0 a 255 e quindi con tre byte: (28) 3 = 224 = 16.777.216 colori.
  • 8. La grafica raster o bitmap La grafica bitmap, per l’elevato numero di sfumature di colore che utilizza, si presta bene nella rappresentazione a video di immagini fotografiche. La struttura a pixel non consente modifiche della dimensione senza perdita di qualità, in quanto ogni singolo pixel deve essere ridimensionato e rimappato nella griglia. La perdita di qualità e maggiore ingrandendo l’immagine L’effetto conseguente ad un ingrandimento esagerato è visibile qui a fianco.
  • 10. La luce E’ una radiazione elettromagnetica costituita da onde che si propagano nello spazio alla velocità di 3 x 108 m/s. Le caratteristiche più importanti di un onda sono: • Lunghezza d’onda. • Frequenza. • Ampiezza. • Periodo
  • 11. La luce La lunghezza d’onda è la distanza tra punti ripetitivi di un’onda. Si indica con l. La frequenza è la quantità di oscillazioni che l'onda compie nell'unità di tempo; si indica con n. La frequenza è inversamente proporzionale alla lunghezza d'onda: minore è la lunghezza d'onda maggiore è la frequenza, e viceversa. Il periodo è l’intervallo di tempo tra due occorrenze di un evento. Si indica con T. L’ampiezza d’onda è il massimo spostamento che subisce un punto rispetto alla posizione di riposo. Nella visione dei colori, l'ampiezza dell'onda influisce sull'intensità luminosa mentre la lunghezza dell'onda influenza la tonalità del colore percepito.
  • 12. La luce Isaac Newton del 1666 scoprì che la luce bianca, fatta passare attraverso un prisma di vetro, si scompone in una serie di raggi colorati. Questo significa che la luce ci appare bianca non è monocromatica, ma è la somma di una serie di radiazioni, ciascuno con differente lunghezza d'onda. Newton rappresentò il colore con un cerchio che ha al suo centro il bianco e lungo la circonferenza, i colori scomposti dal prisma. I colori presenti lungo la circonferenza del cerchio di Newton sono detti colori spettrali.
  • 13. La luce Come si è visto, l'occhio umano, illuminato da una luce monocromatica di varia lunghezza d'onda, percepisce i seguenti colori: • da 400 a 430 nm: zona del violetto • da 430 a 490 nm: zona del blu • da 491 a 560 nm: zona del verde • da 561 a 580 nm: zona del giallo • da 581 a 620 nm: zona dell'arancio • da 620 a 700 nm : zona del rosso
  • 14. Modello di sintesi additiva Quando la luce colpisce direttamente l’occhio umano questo percepisce le differenti lunghezza d'onda che, viste singolarmente, ci appaiono colorate in modo diverso. Queste, tutte insieme, generano la visione del bianco in un fenomeno detto di sintesi additiva. Il bianco può essere, quindi, considerato come la somma di tutte le radiazioni spettrali. Nel modello comunemente usato sono stati scelti come colori primari il verde, il rosso e il blu. Questo modello è applicabile alla visione dei colori su un monitor.
  • 15. Modello di sintesi additiva
  • 16. Modello di sintesi sottrattiva Quando la luce che colpisce fotorecettori dell’occhio non proviene direttamente da una sorgente, ma è riflessa da una superficie, si deve tener conto della curva di riflessione propria della superficie riflettente.. Il colore visibile di una qualsiasi superficie dipende infatti dal potere di quella superficie di assorbire una parte della luce ricevuta dall'ambiente e di rimandarne verso l'osservatore la parte non assorbita sotto forma di luce riflessa. Il modello che ne deriva si chiama sintesi sottrattiva ed è quello che interviene nella normale osservazione dei colori, ad esempio quelli stampati. I colori usati sono i complementari del modello additivo: giallo, ciano e magenta. In pratica noi osserviamo degli oggetti e li vediamo colorati, in quanto, quando vengono investiti dalla luce, riflettono solo quella del loro colore mentre assorbono tutte le altre radiazioni.
  • 17. Modello di sintesi sottrattiva
  • 18. Tonalità La tonalità (hue in inglese) può essere definita come la qualità percettiva che ci fa assegnare un nome piuttosto che un altro al colore che stiamo vedendo. La tonalità è riferibile ai colori spettrali. Rosso, verde, giallo, blu sono tutti nomi di tonalità più i colori originati da combinazioni di rosso e di blu spettrali (porpore). Gli altri colori (es. rosa, marrone) sono da considerare combinazioni di tonalità con diversi livelli di saturazione e/o luminosità. Da un punto di vista fisico alla tonalità corrisponde la lunghezza d'onda della radiazione luminosa.
  • 19. Luminosità e intensità La luminosità è l'ingrediente che specifica la quantità di bianco o di nero presente nel colore percepito. Può essere divisa in: Luminosità apparente: quantità di luce proveniente da un oggetto, paragonata alla quantità di luce proveniente da una superficie bianca sottoposta alla medesima illuminazione. Brillantezza o intensità (brightness, in inglese) è la quantità totale di luce percepita, emessa da una sorgente o riflessa da una superficie.
  • 20. Saturazione La saturazione (saturation, in inglese) è la misura della purezza, dell'intensità di un colore in rapporto solo all'intensità della sua percezione isolata, ovvero in rapporto ad una superficie bianca sottoposta alla medesima illuminazione . Può essere anche considerata come come la misura della quantità di grigio presente in un colore. I colori spettrali sono in assoluto i più saturi che noi possiamo osservare.
  • 22. Il modello RGB Il modello RGB si basa su quello a sintesi additiva. Tutti i colori visualizzati dal monitor sono creati miscelando quantità diverse di luce rossa, verde e blu con intensità diverse. A ciascun colore primario (rosso, verde e blu) viene assegnato un valore compreso tra 0 (assenza totale di colori) e 255 (colori con intensità massima), ovvero 28. Ad esempio, per ottenere il rosso puro è necessario combinare il valore 255 del rosso con il valore 0 del verde e del blu. Il giallo è ottenuto combinando il valore 255 del rosso e del verde con il valore 0 del blu. Impostando tutti e tre questi valori a 255 o a 0 si ottiene rispettivamente il bianco o il nero. Le possibilità di colore sono quindi 224 = 16.777.216.
  • 23. I modello CMYK Il modello CMYK si basa su quello a sintesi sottrattiva. E’ il modello applicato nella stampa. In questo modello, i colori primari ciano (C), magenta (M) e giallo (Y) vengono combinati in quantità diverse per produrre una gamma di colori. La combinazione di tutti e tre questi colori in parti uguali produce teoricamente il nero. Poiché per le impurità presenti nell'inchiostro anziché nero puro si ottiene un marrone scuro, nell’utilizzo viene aggiunto un quarto colore, appunto il nero puro. (K).
  • 24. Le tavolozze di colori Colori RGB Colori CMYK Colori HTML
  • 25. Il sistema Pantone L’utilizzo dei modelli RGB e CMYK a volte non sono facilmente utilizzabili in applicazioni pratiche, ad esempio nell’industria tessile, in quanto le sfumature possibili sono troppe, oltre al fatto che un colore può risultare differente a seconda della luce dell’ambiente. Per questo nell’industria si utilizza il Sistema Pantone, che riduce a 1144 i colori originali, più altri 2000 inseriti successivamente nel catalogo. Per poter ottenere tutti i colori ai quattro colori fondamentali, il ciano, il magenta, il giallo ed il nero sono stati aggiunti l’arancio e il verde smeraldo, ottenendo così il modello CMYKOG, oppure aggiungendo il ciano chiaro ed il magenta chiaro, dando il modello CcMmYK. Questi modelli si definiscono esacromia (esa= sei). I colori Pantone hanno un nome di fantasia sono di solito riprodotte in mazzette dalle quali l’utilizzatore può scegliere quello preferito.
  • 26. Il sistema Pantone Vediamo un utilizzo pratico del sistema Pantone: i colori della bandiera nazionale. Come sappiamo, il tricolore è formato da verde, bianco e rosso. Ma questo non basta, tanto è vero che esiste una norma ministeriale che dice che i colori devono essere: • VERDE: Pantone 17-6153TCX Fern Green • BIANCO: Pantone 11-0601TCX Bright White • ROSSO: Pantone 18-1662TCX Flame Scarlet
  • 27. Profondità di colore La profondità del colore rappresenta il numero di colori presenti in un pixel presente in un’immagine. Nelle immagini a 1 bit, ciascun pixel può visualizzare solo uno dei due colori (21 colori per ogni bit), ad esempio il bianco e il nero. Nelle immagini a 2 bit, ciascun pixel può visualizzare uno 4 diversi colori della tavolozza (22 colori per ogni bit), ad esempio bianco, nero e due grigi. Nelle immagini a 8 bit, ciascun pixel può visualizzare uno dei 256 colori della tavolozza (28 colori per ogni bit). Nelle immagini a 16 bit, ciascun pixel può visualizzare uno dei 65536 colori (216 colori per ogni bit). Nelle immagini a 24 bit, ciascun pixel può visualizzare uno dei 16,8 milioni di colori (224 colori per ogni bit).
  • 28. Fine