INFORMATICA E GRAFICA PER IL WEB

Transcript

1 INFORMATICA E GRAFICA PER IL WEB Psicologia e comunicazione A.A. 2013/2014 Università degli studi Milano-Bicocca docente: Diana Quarti INFORMATICA E GRAFICA PER IL WEB A.A. 2013/2014 docente: Diana Quarti 01

2 Obiettivi del Laboratorio Usare Adobe Photoshop come strumento: per la progettazione e la realizzazione di layout grafici completi e dei singoli elementi dell interfaccia di un sito web per la modifica e il ritocco di immagini»» per l ottimizzazione delle immagini per il web INFORMATICA E GRAFICA PER IL WEB A.A. 2013/2014 docente: Diana Quarti 02

3 Adobe Photoshop Adobe Photoshop è un programma per l elaborazione di immagini digitali: fotoritocco, creazione di nuove immagini, illustrazione digitale, ma è anche un programma molto utile nella fase di progettazione e realizzazione di layout di vari tipi, grazie alle numerosi funzioni. È un programma di grafica raster o bitmap visto che le elaborazioni che vengono effettuate agiscono sui singoli pixel dell immagine, (anche se alcuni strumenti permettono di creare elementi vettoriali). L ultime versioni hanno aggiunto funzioni avanzate che vanno oltre la realizzazione di immagini 2D, tra le quali editing video, disegno 3D ecc... INFORMATICA E GRAFICA PER IL WEB A.A. 2013/2014 docente: Diana Quarti 03

4 Grafica Vettoriale programmi di disegno vettoriale (Adobe Illustrator, InDesign) grafica costituita da linee e curve definiti tramite vettori (formule matematiche) che definiscono tracciati con proprietà specifiche (colore, posizione, forma, etc.) Ingrandimento senza perdita ingrandimento senza perdita immagini grafiche: testo, disegni, loghi, mappe, grafici. Esempi di immagini vettoriali INFORMATICA E GRAFICA PER IL WEB A.A. 2013/2014 docente: Diana Quarti 04

5 Grafica Bitmap programmi di ritocco immagini (Adobe Photoshop) un immagine bitmap è costituita piccolissime tessere chiamate pixel diversamente colorate Ingrandimento con perdita ingrandimento con perdita immagini fotografiche Una fotografia di Gabriele Basilico INFORMATICA E GRAFICA PER IL WEB A.A. 2013/2014 docente: Diana Quarti 05

6 Pixel (picture element) il pixel è l elemento base che compone l immagine digitale ogni pixel ha un valore di colore specifico»» ogni pixel è rappresentato dal numero di bit che ne caratterizza gli attributi colore (profondità di bit), maggiore è la profondità, maggiore sarà il numero di colori disponibili nell immagine» 1 bit = 2 colori (bianco/nero)» 2 bit = 4 colori» 8 bit = 256 colori» 16 bit = colori» 24 bit = 16 milioni di colori ca. INFORMATICA E GRAFICA PER IL WEB A.A. 2013/2014 docente: Diana Quarti 06

7 Il colore e la luce Il colore è la percezione visiva determinata dalle caratteristiche delle onde elettromagnetiche della luce emesse o riflesse dai corpi. La luce: radiazione elettromagnetica lunghezza d onda varia tra 380 nm e 770 nm diverse lunghezze d onda corrispondono a diversi stimoli colorati gli oggetti sorgenti irradiano l energia luminosa gli oggetti opachi riflettono l energia luminosa LUCE ultravioletti raggi X 380 nm 430 nm 480 nm 540 nm 577 nm 627 nm 698 nm 770 nm infrarossi viola indaco blu verde giallo arancio rosso INFORMATICA E GRAFICA PER IL WEB A.A. 2013/2014 docente: Diana Quarti 07

8 MODELLI DI COLORE: IL METODO RGB RGB (Red Green Blue) il metodo RGB o tricromia utilizza 3 canali: Rosso, Verde, Blu Rosso-Verde-Blu sono colori primari della luce che per sintesi additiva o luminosa generano il bianco visualizzazione a monitor (le luci rossa, verde e blu vengono proiettate in un unico pixel, che in base all intensità delle singole luci emette un colore diverso) grafica web e video»» 16,7 milioni di colori, grafica a 24 bit (8 bit per ogni canale) INFORMATICA E GRAFICA PER IL WEB A.A. 2013/2014 docente: Diana Quarti 08

9 MODELLI DI COLORE: IL METODO CMYK CMYK (Cyan Magenta Yellow Black) il metodo CMYK o quadricromia 4 canali: Ciano, Magenta, Giallo, Nero ciano magenta giallo sono colori primari che per sintesi sottrattiva generano il nero. Sono gli opposti dei colori primari della tricromia: il ciano assorbe il rosso, il magenta assorbe il verde e il giallo assorbe il blu. metodo utilizzato in stampa Inchiostri: Situazione ideale: Situazione reale: MA gli inchiostri non sono puri! Se mescolo gli inchiostri dei 3 colori primari ottengo un marrone o un grigio scuro; per ottenere il nero in stampa e maggiore profondità nelle immagini devo aggiungere ai 3 colori primari un inchiostro in più: il nero! INFORMATICA E GRAFICA PER IL WEB A.A. 2013/2014 docente: Diana Quarti 09

10 Codici colore per il web I colori possono essere definiti tramite i loro valori di RGB. Ogni canale ha un valore da 0>255 (2 8 per canale). Il nero avrà i valori più bassi: rgb(0,0,0), il bianco quelli più alti: rgb(255,255,255)»» I colori HTML vengono definiti tramite una notazione esadecimale (HEX) la combinazione dei valori RGB. Ogni canale è definito da due cifre. Il valore più basso è 00 (0), il più alto è FF (255). Nero: # / Bianco: #FFFFFF INFORMATICA E GRAFICA PER IL WEB A.A. 2013/2014 docente: Diana Quarti 10

11 Web safe color Una decina di anni fa, i computer e le schede video supportavano al massimo 256 colori che venivano gestiti in maniera diversa dalle diverse piattaforme. Venne creata una lista di 216 colori web standard che venivano visualizzati in modo corretto. Oggi sia i computer sia i dispositivi mobili permettono la visualizzazione di milioni di colori e l utilizzo di questa paletta non è più necessario. Quando usiamo il selettore colore in Photoshop, possiamo isolare i colori browser o web safe. INFORMATICA E GRAFICA PER IL WEB A.A. 2013/2014 docente: Diana Quarti 11

12 Domande? INFORMATICA E GRAFICA PER IL WEB A.A. 2013/2014 docente: Diana Quarti 12