INFORMATICA E GRAFICA PER IL WEB Psicologia e comunicazione A.A. 2015/2016 Università degli studi Milano-Bicocca docente: Diana Quarti LEZIONE 02 INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 01
COLORE: LA LUCE Un altro elemento di progettazione molto importante è il colore. Dal punto di vista fisico, 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. 2015/2016 docente: Diana Quarti 02
DENOMINARE IL COLORE Siamo abituati a chiamare i colori con i loro nomi: il bianco, il nero, il rosso, il verde, il blu, l arancione, il viola, ecc. Ma spesso questi nomi non sono sufficienti a descrivere un colore, o spesso possono raccogliere una gamma di colori molto diversa: Ma anche usare altri nomi non è sufficiente visto che anche l interpretazione di questi nomi non è univoco (basta cercare su google il colore glicine e vedere le numerose tonalità di viola che vengono fuori). entrambi i colori posso essere definiti arancione ma sono diversi! In altri casi invece potrebbe essere ambiguo assegnare un nome a un colore, e quindi spesso vengono aggiunti altri nomi più specifici per descrivere un colore. è un arancione? è un rosso? un vermiglione? INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 03
DESCRIVERE IL COLORE Un colore può essere descritto tramite alcune sue proprietà: La tonalità (hue) che viene definita dalla lunghezza d onda della luce (valori 0-360 ) La saturazione (saturation) può essere definta come intensità o la purezza di un colore. Al dimiunire della sua saturazione il colore apparirà più grigio (valori 0%-100%) La luminosità (brightness) può essere definita come la chiarezza del colore. Al diminuire della luminosità il colore si avvicina al nero (valori 0%-100%) Dando un valore a ciascuna di queste caratteristiche possiamo definire in modo univoco un colore tramite il modello colore HSB. I modelli colore sono metodi matemaci che servono per rappresentare e definire i colori. INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 04
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. 2015/2016 docente: Diana Quarti 05
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. 2015/2016 docente: Diana Quarti 06
Codici CODICI colore COLORE per PER il web 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: #000000 / Bianco: #FFFFFF In alcuni casì può essere utile avere degli elementi di colore in trasparenza, con i CSS3 è stata introdotta una nuova codifica rgba, che aggiunge il canale alpha alla codifica rgb. Per esempio: un nero con trasparenza al 70% avrà valori rgba(0, 0, 0, 0.7) INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 2013/2014 docente: Diana Quarti 07 10
Web WEB safe SAFE color COLOR Web safe color Una quindicina decina anni di anni fa, i fa, computer i e le e schede le schede video supportavano video supportavano al massimo al massimo 256 colori 256 Una decina di anni fa, i computer e le schede colori che venivano che venivano gestiti gestiti in maniera in maniera diversa diversa dalle video supportavano al massimo 256 colori dalle diverse diverse piattaforme. piattaforme. Venne Venne creata creata una lista che venivano gestiti in maniera diversa dalle una di 216 lista diverse colori di 216 piattaforme. web colori standard web Venne standard che creata venivano una che lista venivano visualizzati di 216 visualizzati colori in modo web standard corretto. in modo che corretto. venivano visualizzati in modo corretto. Oggi sia i computer sia i dispositivi mobili permettono Oggi sia i la computer visualizzazione sia i dispositivi milioni mobili di colori permettono e l utilizzo L UTILIZZO la di visualizzazione questa DI QUESTA paletta PALETTA di milioni non è di più È necessario. OBSOLETO colori e l utilizzo E NON PIÙ di questa NECESSARIO. paletta non è più necessario. Quando usiamo il Quando usiamo il selettore colore selettore colore in Photoshop, in Photoshop, possiamo possiamo isolare isolare i colori i colori browser browser o o web web safe. safe. INFORMATICA E GRAFICA E PER PER IL WEB IL WEB A.A. 2013/2014 A.A. 2015/2016 2013/2014 docente: docente: Diana Quarti Diana Quarti 11 08 11
IL COLORE NEL PROGETTO GRAFICO Nel progetto di un interfaccia o di qualunque altro artefatto grafico, la scelta dell uso del colore è importante perchè aiuta a creare uniformità e identità. A ogni colore vengono inoltre attribuiti significati e simbologie, sia per alcune caratteristiche fisiche sia per cause di tipo culturale. Il rosso è un colore che richiama l attenzione e spesso viene usato per indicare pericolo, ma è anche associato all amore e alla passione. Al contrario il blu è un colore calmo, associato anche all eleganza e alla stabilità. In occidente il nero è il colore che viene usato per il lutto, mentre in alcuni paesi orientali viene usato il bianco. La scelta dei colori per un progetto: si può basare su una paletta di colore creata ad hoc dal designer selezionando alcuni colori da un immagine (o una serie di immagini) di partenza»» può essere sviluppata utilizzando come base la ruota dei colori e scegliendo un metodo di selezione del colore (monocromatica, colori complementari) INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 09
IL COLORE DALL IMMAGINE INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 10
IL COLORE: COLOR WHEEL Risorse per la scelta del colore usando la ruota cromatica: paletton.com kuler.adobe.com/it www.colourlovers.com/ copaso/ monocromatico colori analoghi colori complementari triade complementare triade equilatera doppio complementare INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 11
COLOR WHEEL: ESEMPI monocromatico INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 12
COLOR WHEEL: ESEMPI colori analoghi INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 13
COLOR WHEEL: ESEMPI colori complementari INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 14
COLOR WHEEL: ESEMPI triade complementare INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 15
COLOR WHEEL: ESEMPI triade equilatera INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 16
COLOR WHEEL: ESEMPI doppio complementare INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 17
IL COLORE: CONTRASTO COLORE-SFONDO SI NO INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 18
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. 2015/2016 docente: Diana Quarti 19
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 ecc.) 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. 2015/2016 docente: Diana Quarti 20
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. 2015/2016 docente: Diana Quarti 21
Pixel PIXEL (picture (PICTURE element) 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 = 65536 colori» 24 bit = 16 milioni di colori ca. INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 2013/2014 docente: Diana Quarti 22 06
PHOTOSHOP: INTERFACCIA barra del menu barra delle proprietà area di lavoro (stage) con guide e righelli barra degli strumenti documento palette degli strumenti / windows barra di stato INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 23
PHOTOSHOP: I LIVELLI (LAYERS) L aggiunta del pannello dei livelli è stato sicuramente un cambiamento chiave che ha permesso a Photoshop di diventare un programma così versatile. I livelli permettono l elaborazione di una parte dell immagine senza modificarne il resto. Questo permette innanzi tutto di evitare di agire sull immagine in modo distruttivo. Potremmo paragonare i livelli a dei fogli di acetato trasparenti su cui ci sono gli elementi grafici dell immagine sovrapposti uno sull altro: l immagine globale è data dall insieme di questi fogli. È possibile visualizzare il pannello dei livelli tramite il menù Finestra > Livelli INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 24
DOMANDE? INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 25
LAVORARE CON I LIVELLI Per lavorare in modo efficiente con i livelli è bene tenere a mente alcune semplici regole: Nominare tutti i livelli in modo appropriato e coerente alla funzione e al contenuto Raggruppare i livelli in cartelle e spostare i livelli nell appropriata cartella: la ricerca e la modifica dei livelli è più veloce è puntuale Eliminare i livelli che non devono essere usati (soprattutto in una fase più definitiva del progetto): incrementano inutilmente la dimensione del file e il consumo di memoria OK OK NO NO APPENDICE INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 26
LAVORARE CON I LIVELLI Globalizzare gli elementi e le maschere: evitare di ripetere lo stesso elemento (logo, fondo, icone ecc.) se non necessario: se necessita modifiche non bisognerà ripeterle per ogni istanza e il file.psd peserà meno. Agire sull immagine in modo non distruttivo: maschere, smart objects e adjustment layers evitano di perdere definitivamente i pixel dell immagine. Se bisogna ingrandire un immagine o tornare da un immagine in bianco e nero a quella a colori, è molto più facile se non è stata rasterizzata o trasformata in un unico livello. Usare Composizioni livelli per mostrare le variazioni di layout (ad es. overlay e menù a tendina, differenti layout di pagina ecc.) OK OK NO NO APPENDICE INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente: Diana Quarti 27