Grafica Online Luca Panella Innovatek scrl - Bari

Transcript

1 Grafica Online Luca Panella Innovatek scrl - Bari

2 Sommario Scenario Web Nozioni di grafica on-line Principali programmi di grafica web Realizzazione di banner e layout per il web 2

3 Risorse online Sito web: 3

4 Nozioni di grafica online La grafica sul web Tipologie di media Immagini raster e vettoriali Risoluzione spaziale e cromatica Spazi colorimetrici Dimensioni e compressione Le animazioni 4

5 La grafica sul web 5

6 La grafica sul web Il web è multimediale Gli elementi multimediali hanno un duplice scopo: Arricchire le pagine con nuovi contenuti informativi Rendere le pagine più accattivanti 6

7 La grafica sul web Tipologie di media Media discreti (time independent) Testi Immagini Media continui (time dependent) Audio Video Animazioni I media sul web devono avere un formato digitale 7

8 La grafica sul web Differenze tra analogico e digitale Digitale: rappresentazione numerica attraverso le cifre di un sistema di numerazione (decimale, binario...) Analogico: rappresentazione mediante un'altra grandezza legata alla prima da una relazione di analogia 8

9 La grafica sul web Differenze tra digitale e analogico Digitale: rappresentazione attraverso un insieme discreto di numeri (ad es. numeri naturali) Analogico: rappresentazione attraverso un insieme continuo di numeri (ad es. numeri reali) 9

10 La grafica sul web Esempio: l'orologio a lancette E' uno strumento analogico Tempo Angolo della lancetta Esempio: il termometro a mercurio E' uno strumento analogico Temperatura Altezza del mercurio 10

11 La grafica sul web La digitalizzazione: lo stato originario (analogico) viene "tradotto" e rappresentato mediante un insieme discreto di elementi Quantizzazione: processo di approssimazione in cui i valori analogici vengono arrotondati per produrre i corrispondenti valori digitali Campionamento: è una tecnica che converte un segnale continuo in un segnale discreto, valutandone l'ampiezza a intervalli di tempo regolari. 11

12 La grafica sul web 12

13 La grafica sul web Digitalizzare una foto Originariamente è formata da un infinito numero di punti ognuno dei quali formato da un'infinita gamma di colori Per digitalizzarla, la sua superficie viene divisa in un numero discreto di punti (in genere piccoli quadrati detti pixel ) ognuno dei quali formato da un colore particolare 13

14 La grafica sul web 14

15 La grafica sul web 15

16 La grafica sul web 16

17 Immagini raster e vettoriali 17

18 Immagini raster e vettoriali Immagine raster (bitmap) Rappresentata per punti Sono costituite da una matrice di punti NxM a ciascuno dei quali è associato ad un colore Immagine vettoriale Costruita da descrizioni matematiche di uno o più elementi grafici, dette appunto vettori 18

19 Immagini raster e vettoriali Direzione Modulo Punto di applicazione VETTORE Verso 19

20 Immagini raster e vettoriali Fotografia in formato bitmap di un orologio 20

21 Immagini raster e vettoriali Immagine in formato vettoriale di un orologio 21

22 Immagini raster e vettoriali Vantaggi e svantaggi I vettori non possono essere usati per codificare immagini reali, il cui contenuto varia punto per punto Nelle immagini vettoriali qualunque tipo di zoom o ridimensionamento lascia inalterata la qualità dell'immagine Nelle immagini raster lo zoom o il ridimensionamento degradano la qualità dell'immagine 22

23 Immagini raster e vettoriali Ridimensionamento immagine raster 23

24 Immagini raster e vettoriali Ridimensionamento immagine vettoriale 24

25 Risoluzione spaziale e cromatica 25

26 Risoluzione spaziale e cromatica Risoluzione spaziale Numero di punti per pollice (DPI = Dots Per Inch) Rapporta la dimensione nel reale (inch) con la dimensione digitale (dots) Risoluzione orizzontale e verticale di solito sono uguali All'aumentare dei DPI la rappresentazione digitale sarà più precisa ma anche più grande in termini di spazio occupato (bytes) 26

27 Risoluzione spaziale e cromatica Cos'è un Byte? Sequenza di 8 bit Cos'è un Bit? Unità di misura dell'informazione E' una cifra binaria (Binary digit) Può avere il valore 0 oppure 1 27

28 Risoluzione spaziale e cromatica 1 Byte è composto da 8 Bit 27 = = = = = 8 22 = 4 21 = 2 20 = 1 28

29 Risoluzione spaziale e cromatica Numeri binari 29

30 Risoluzione spaziale e cromatica Esempi di numeri binari =2 =5 = 10 30

31 Risoluzione spaziale e cromatica Multipli del Byte Kilobyte 10 = 2 byte = byte Megabyte = 220 byte = byte Gigabyte = 230 byte = byte 40 Terabyte = 2 byte = byte 31

32 Risoluzione spaziale e cromatica Esempio: immagine di 72 dpi Utilizza 72x72 = pixel per pollice quadrato Se l'immagine occupa un'area di 3x3 pollici si ha 5.184x3x3 = pixel Usando 1 bit per ogni punto byte Usando 1 byte per ogni punto byte Usando 3 byte per ogni punto byte 32

33 Risoluzione spaziale e cromatica Risoluzioni tipiche in base al media: Monitor: 96 dpi Stampa: 600 dpi Esempio: Un'immagine che copre uno schermo standard da 800x600 punti usando 3 byte per punto occupa byte. 33

34 Risoluzione spaziale e cromatica Risoluzione cromatica: 3 tipi Bicromia Palette True color Bicromia Utilizza 1 bit per punto Può rappresentare solo bianco e nero 34

35 Risoluzione spaziale e cromatica Si usano tecniche grafiche per ottenere rappresentazioni efficaci anche in bicromia, accostando opportunamente punti bianchi e neri Immagine originale a colori 35

36 Risoluzione spaziale e cromatica Immagine in bicromia 36

37 Risoluzione spaziale e cromatica Immagine in bicromia prodotta con la tecnica del dithering 37

38 Risoluzione spaziale e cromatica Palette Utilizza N bit per punto (ad esempio 8 bit) Con 8 bit si possono rappresentare 256 colori I colori possono essere scelti in diversi modi 256 toni di grigio 256 colori presi in modo uniforme 256 colori selezionati (adattiva) Poco adatta alle immagini fotografiche 38

39 Risoluzione spaziale e cromatica Immagine con palette di grigi (256 toni di grigio) 39

40 Risoluzione spaziale e cromatica Immagine con palette uniforme 40

41 Risoluzione spaziale e cromatica Immagine con palette uniforme usando il dithering 41

42 Risoluzione spaziale e cromatica Immagine con palette adattiva 42

43 Risoluzione spaziale e cromatica True color Utilizza 24 bit per punto: 8 bit per il Rosso + 8 bit per il Verde + 8 bit per il Blue = 24 bit Può rappresentare colori Supera il numero di colori effettivamente distinguibili dall'occhio umano! Adatta alla riproduzione di fotografie 43

44 Risoluzione spaziale e cromatica True color con canale alpha Utilizza 32 bit per punto: 8 bit per il Rosso + 8 bit per il Verde + 8 bit per il Blue + 8 bit per la trasparenza = 32 bit Può rappresentare colori e 256 livelli di trasparenza 44

45 Spazi colorimetrici 45

46 Spazi colorimetrici Nella rappresentazioni digitale di immagini true color si usa un sistema tricromatrico 46

47 Spazi colorimetrici Colorimetria: disciplina che si occupa di standardizzare la misurazione del colore attraverso lo studio di modelli di colore Alcuni spazi colorimetrici RGB (Red Green Blue) E' uno spazio additivo Ogni componente ha valori tra 0 e 1 (0,0,0) indica il nero; (1,1,1) indica il bianco 47

48 Spazi colorimetrici 48

49 Spazi colorimetrici 49

50 Spazi colorimetrici Codifica RGB nei programmi di grafica Numeri esadecimali: A B C D E F

51 Spazi colorimetrici Codifica RGB nei programmi di grafica FF = Rosso 00 FF 00 = Verde FF = Blu FF FF 00 = Giallo FF 00 FF = Viola 00 FF FF = Azzurro = Nero FF FF FF = Bianco 51

52 Spazi colorimetrici Codifica RGB nei programmi di grafica 6699FF FF6666 FFFFFF 99CCFF 52

53 Spazi colorimetrici CMY (Cyan Magenta Yellow) E' uno spazio sottrattivo Ogni componente ha valori tra 0 e 1 (0,0,0) indica il bianco; (1,1,1) indica il nero Il nero composto in stampa ha una cattiva resa, quindi si preferisce usare anche un pigmento nero puro, per cui si utilizza la codifica: CMYK (Cyan Magenta Yellow black) 53

54 Spazi colorimetrici YUV (Luminance Chrominance) E' uno spazio additivo Viene usata nelle trasmissioni televisive Y contiene informazioni sulla luminosità (luma) U e V contengono informazioni sul colore I sistemi televisivi in bianco e nero usavano solo l'informazione Y (luma) 54

55 Spazi colorimetrici Il piano YUV 55

56 Spazi colorimetrici Ipovisione dei colori Daltonismo: difficoltà nel distinguere i colori Si divide in: Protanopia: cecità per il rosso (1% uomini) Deuteranopia: cecità per il verde (1% uomini) Tritanopia: confonde giallo e blu (0,003%) Acromatopsia: cecità ai colori (0,005%) 56

57 Spazi colorimetrici Visione normale Deuteranopia (rosso/verde) 57

58 Spazi colorimetrici Visione normale Tritanopia (giallo/blu) 58

59 Spazi colorimetrici Ipovisione dei colori: filtri software 59

60 colorschemedesigner.com Spazi colorimetrici 60

61 Dimensioni e compressione 61

62 Dimensioni e compressione Calcolo delle dimensioni di un'immagine: Risoluzione spaziale Incide con un fattore quadratico (il numero di punti va considerato sulle due dimensioni) Ad es. un'immagine 3x4 inch richiede un numero di punti molto diverso in base alla risoluzione utilizzata: 72 dpi dots 600 dpi dots 62

63 Dimensioni e compressione Calcolo delle dimensioni di un'immagine: Risoluzione cromatica Incide con un fattore moltiplicativo Ad es. un'immagine 3x4 inch a 72 dpi ( dots) richiede: In bicromia byte A palette byte In True color byte 63

64 Dimensioni e compressione Compressione delle immagini Operazione di codifica per diminuire le dimensioni originali dell'immagine Compressione senza perdita (lossless) E' reversibile Compressione con perdita (lossy) Non è reversibile 64

65 Dimensione e compressione Esempio di compressione Dati da comprimere: N caratteri usati: 28 Dati compressi: N caratteri usati: 14 65

66 Dimensione e compressione Esempio di compressione Codifica non compressa: RRRRRRR RRRRRRR VVVVBBB VVVVBBB N caratteri usati: 28 Codifica compressa: R14 V4 B3 V4 B3 N caratteri usati: 11 In questo caso è lossless (reversibile) 66

67 Dimensioni e compressione Formati non compressi BMP (BitMaP) Formato standard di Microsoft Windows Supporta diverse risoluzioni cromatiche Si può specificare la risoluzione in bit TIFF (Tagged Image File Format) Supportato da tutte le applicazioni grafiche Ottimo per lo scambio tra piattaforme diverse Supporta diverse risoluzioni cromatiche E' possibile usare una compressione lossless 67

68 Dimensioni e compressione Formati compressi JPEG (Joint Photographic Experts Group) Compressione con perdita (lossy) Si basa sulla conversione dello spazio dei colori Lavora su immagini True color (24 bit) Sulle foto raggiunge un rapporto di 25:1 senza riduzioni percettibili della qualità 68

69 Dimensioni e compressione Formati compressi GIF (Graphic Interchange Format) Compressione senza perdita (lossless) sfruttando le sequenze di colori uguali Ottimo per la codifica di icone e simboli Usa una palette di 256 colori (8 bit) ed è possibile gestire un colore come trasparente Usate per semplici animazioni (GIF animate) Possono essere interlacciate 69

70 Dimensioni e compressione Formati compressi PNG (Portable Network Graphic) Compressione senza perdita (lossless) Alternativa libera al formato GIF Supporta diverse risoluzioni cromatiche: Palette (8 bit) True color (24 bit) oppure True color con trasparenza (32 bit) 70

71 Dimensioni e compressione Quali formati usare sul web? GIF icone, diagrammi, testi JPEG fotografie, immagini complesse PNG molto versatile Quali formati non usare sul web? Bitmap troppo pesante (non compresso) 71

72 Le animazioni 72

73 Le animazioni Tipologie di animazione Cel-like animation Cel sta per Cellulose Nitrate (sono fogli di plastica trasparente) Metodo classico (cartoni animati) Sfondo fisso Si muovo solo alcuni elementi in primo piano 73

74 Le animazioni 74

75 Le animazioni 75

76 Le animazioni Tipologie di animazione Sprite Immagini che si muovono localmente e vengono spostate sullo schermo indipendentemente dalle altre immagini Metodo usato nei primi videogame 76

77 Le animazioni 77

78 Le animazioni Tipologie di animazione Key frame Animazione specificata attraverso punti chiave in cui i vari elementi cambiano stato I passaggi intermedi sono calcolati automaticamente da un software Molto usata nei siti web altamente interattivi 78

79 Le animazioni 79

80 Le animazioni Animazione sul web GIF animate (raster) Flash (vettoriale) Javascript (programmabile) Animazione vettoriale bidimensionale Usata per costruire siti ad alta interattività o per rendere più accattivante il layout delle pagine 80

81 Fine 81