INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 01
INFORMATICA E GRAFICA PER IL WEB GRAFICA E COLORE
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 02
GRAFICA E VISUAL DESIGN
L’obiettivo principale del visual design, del design della comunicazione e delle discipline affini (web design, pubblicità, segnaletica ecc.) è quello di veicolare le informazioni importanti in modo chiaro ed efficace.
Un cattivo design rende difficile o addirittura impossibile reperire le informazioni corrette: l’utente deve sforzarsi per trovare quello di cui ha bisogno, rendendo la sua esperienza difficile e frustrante.
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 03
BAD VS GOOD DESIGN
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 04
VISUAL DESIGN: OBIETTIVI E STRUMENTI
Un buon design deve essere chiaro e comprensibile, sapere quindi trasmettere le gerarchie e le relazioni tra gli elementi, orientare e guidare gli utenti, spingendo anche gli utenti ad approfondire, ma anche esprimere significati e stili.
Gli strumenti fondamentali del visual design per raggiungere questi obiettivi sono:
» Colore
» Tipografia
» Layout
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 05
COLORE: LA LUCE
Un 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
raggi X 380 nm 430 nm 480 nm 540 nm 577 nm 627 nm
viola indaco blu verde giallo arancio rosso
770 nm698 nm infrarossiultravioletti
LUCE
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 06
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).
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?
entrambi i colori posso essere definiti arancione ma sono diversi!
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 07
DESCRIVERE IL COLORE: I MODELLI 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 | docente: Diana Quarti 08
MODELLI DI COLORE: IL METODO RGB
RGB (Red Green Blue)
» il metodo RGB o tricromia
» utilizza 3 canali: Rosso, Verde, Blu
» grafica web e video
» 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)
» 16,7 milioni di colori, grafica a 24 bit (8 bit per ogni canale)
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 09
MODELLI DI COLORE: IL METODO CMYK
CMYK (Cyan Magenta Yellow Black)
» il metodo CMYK o quadricromia
» 4 canali: Ciano, Magenta, Giallo, Nero
» metodo utilizzato in stampa
» 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.
» 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!
Situazione ideale: Situazione reale:
Inchiostri:
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 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 (28 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. 2013/2014 | docente: Diana Quarti 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 (28 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
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 11
WEB SAFE COLOR
Una quindicina 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 È OBSOLETO E 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
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
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 | docente: Diana Quarti 12
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à.
I colori possono creare reazioni emotive nell’utente per questo sono molto efficaci nel veicolare messaggi e “atmosfere”.
A ogni colore vengono inoltre attribuiti significati e simbologie, sia per alcune caratteristiche fisiche sia per cause di tipo culturale.
In occidente il nero è il colore che viene usato per il lutto, mentre in alcuni paesi orientali viene usato il bianco. Il rosso è un colore che richiama l’attenzione e spesso viene usato per indicare pericolo, ma è anche associato all’amore e alla passione. Il rosso può essere visto sia come colore dell’aggressività (nei paesi occidentali) sia come colore legato alla salute e alla buona fortuna, alla purezza e alla divinità (nell’est).
La scelta del colore oltre a una scelta estetica deve anche essere attenta alla cultura del bacino di utenza del sito (o progetto grafico) e quindi al significato simbolico e culturale del colore.
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 13
IL SIGNIFICATO CULTURALE DEL COLORE
Nero / Il nero è l’assenza del colore. Nei paesi occidentali è legato alla morte e al lutto, ma anche all’autorità. Viene usato anche per dare una sensazione di stile e eleganza.
Bianco / Il bianco non è un vero colore (e la somma di tutti i colori). Nei paesi orientali è legato alla morte e al lutto, mentre nei paesi occidentali è legato alla semplicità e alla purezza. Essendo un colore neutro è un ottimo colore di base su cui far lavorare gli altri colori.
Rosso / In Occidente il rosso è caldo, legato alla passione, all’aggressività e richiede attenzione, in Oriente porta fortuna ed è legato alla salute e alla purezza. È un colore con molta forza e vibrazione, viene usato spesso come colore di richiamo per catturare l’attenzione dell’utente. Le tonalità più scure danno un’idea di eleganza e classicità.
Blu / Al contrario il blu è un colore calmo, associato anche all’eleganza e alla stabilità, i suoi toni più scuri possono portare valori di tradizione.
Giallo / Il giallo è un colore luminoso e allegro. È associato alla natura, all’infanzia, alla gioia e al sole. Abbinando al giallo e il nero si ottiene un alto contrasto colore ed è capace di attirare l’attenzione. (Solitamente la segnaletica di pericolo è rossa o gialla)
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 14
Verde / Il verde è un colore che richiama la natura e il mondo vegetale, ha effetto rilassante e favorisce la calma, ma rappresenta anche la speranza e la vitalità. Il verde è anche il colore del denaro e del benessere.
Arancio / L’arancio condivide alcune caratteristiche con i primari che lo compongono. Com’è il giallo è allegro e giovane, allo stesso tempo richiama il calore del rosso. L’arancione inoltre si abbina a colori naturali come il verde è il marrone, ed associato ai colori autunnali.
Marrone / Il marrone è un colore è naturale e con un forte richiamo all’ambiente. Il colore può essere un sostituto del nero nelle combinazioni che richiamano la natura, aiutando a scaldare tutta la paletta cromatica.
Viola - Porpora / Le tonalità di viola e soprattutto porpora sono colori reali, soprattutto abbinato con giallo e oro. È anche un colore legato al mistero e all’immaginazione.
Lettura consigliata per approfondire le tematiche sul significato attribuito ai colori: Pastoureau Michel, Simonnet Dominique. Il piccolo libro dei colori. Ed. Ponte alle Grazie
IL SIGNIFICATO CULTURALE DEL COLORE
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 15
LA SCELTA DEI COLORI PER UN PROGETTO GRAFICO
La scelta dei colori per un sito web o altro progetto grafico:
» 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)
» si può basare su una paletta di colore creata ad hoc dal designer.
Spesso il colore diventa un elemento chiave della comunicazione di un brand. Riuscite a immaginare una Coca-Cola in un colore diverso dal rosso?
Il colore esprime personalità e può evocare reazioni per stimolare l’associazione con il brand. Il colore diventa così parte di un progetto di identità più ampio.
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 16
IL COLORE ALL’INTERNO DI UN’IDENTITÀ VISIVA
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 17
IL COLORE ALL’INTERNO DI UN’IDENTITÀ VISIVAI siti del gruppo Ferrari: il “Rosso Ferrari”
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 18
IL COLORE ALL’INTERNO DI UN’IDENTITÀ VISIVAI siti del gruppo Ferrari: il “Rosso Ferrari”
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 19
IL COLORE ALL’INTERNO DI UN’IDENTITÀ VISIVAI siti del gruppo Ferrari: il “Rosso Ferrari”
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 20
IL COLORE ALL’INTERNO DI UN’IDENTITÀ VISIVA
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 21
IL COLORE ALL’INTERNO DI UN’IDENTITÀ VISIVA
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 22
IL COLORE ALL’INTERNO DI UN’IDENTITÀ VISIVA
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 23
IL COLORE ALL’INTERNO DI UN’IDENTITÀ VISIVA
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 24
IL COLORE ALL’INTERNO DI UN’IDENTITÀ VISIVA
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 25
IL COLORE ALL’INTERNO DI UN’IDENTITÀ VISIVA
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 26
PALETTE DI COLORI DA UN’IMMAGINE DI PARTENZA
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 27
LA TEORIA DEL COLORE: COLOR WHEEL
La teoria del colore riguarda le relazioni tra i colori e le loro combinazioni. La ruota dei colori sintetizza graficamente queste relazioni in base alla tonalità dei colori. La ruota dei colori aiuta a capire le classificazioni e le relazioni tra i colori fornendo una pratica guida ai colori primari, secondari e terziari.
Selezionando i colori dalla ruota in certe combinazioni interagiscono assieme. E queste interazioni sono alla base della creazione della scelta della palette di colori che useremo in qualsiasi progetto grafico (in modo più o meno consapevole).
Se ho bisogno di creare tensione o attirare l’attenzione dell’utente su alcuni particolari andrò a selezionare dei colori complementari. Altrimenti posso usare una palette monocromatica (se poi il colore viene usato solo su alcuni particolari ha la stessa potenza di attirare l’attenzione del pubblico senza la tensione cromatica dei colori complementari).
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 28
LA TEORIA DEL COLORE: COLOR WHEEL
monocromatico
triade complementare
colori analoghi
triade equilatera
colori complementari
doppio complementare
Risorse per la scelta del colore usando la ruota cromatica:
paletton.com
kuler.adobe.com/it
www.colourlovers.com/copaso/
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 29
monocromatico
COLOR WHEEL: ESEMPI
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 30
colori analoghi
COLOR WHEEL: ESEMPI
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 31
colori complementari
COLOR WHEEL: ESEMPI
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 32
triade complementare
COLOR WHEEL: ESEMPI
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 33
triade equilatera
COLOR WHEEL: ESEMPI
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 34
doppio complementare
COLOR WHEEL: ESEMPI
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 35
IL COLORE: CONTRASTO COLORE-SFONDO
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
SI NO
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 36
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 | docente: Diana Quarti 37
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
» immagini grafiche: testo, disegni, loghi, mappe, grafici.
Ingrandimento senza perdita
Esempi di immagini vettoriali
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 38
GRAFICA BITMAP
» programmi di ritocco immagini (Adobe Photoshop)
» un’immagine bitmap è costituita piccolissime “tessere” chiamate pixel diversamente colorate
» ingrandimento con perdita
» immagini fotografiche
Una fotografia di Gabriele Basilico
Ingrandimento con perdita
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 39
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 = 65536 colori » 24 bit = 16 milioni di colori ca.
INFORMATICA E GRAFICA PER IL WEB | A.A. 2013/2014 | docente: Diana Quarti 06
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 = 65536 colori » 24 bit = 16 milioni di colori ca.
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 40
PHOTOSHOP: INTERFACCIA
barra del menu
barra di stato
barra delle proprietà
barra degli strumenti
palette degli strumenti / windows
area di lavoro (stage) con guide e righelli
documento
INFORMATICA E GRAFICA PER IL WEB | docente: Diana Quarti 41
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 | docente: Diana Quarti 42
DOMANDE?
Top Related