Grafica sul web: concetti di base

17
+ Diamo vita al tuo portale web, gestiamo la tua visibilità online, promuoviamo il tuo business

Transcript of Grafica sul web: concetti di base

Page 1: Grafica sul web: concetti di base

+

Diamo vita al tuo portale web, gestiamo la tua

visibilità online, promuoviamo il tuo business

Page 2: Grafica sul web: concetti di base

+ 2 Chi siamo

ElaMedia Group è una Web Agency di Roma che si occupa di:

• Gestire dei portali di proprietà

• Promuovere l'attività dei propri clienti

• Creare e gestire portali web

• Proporre dei corsi di formazione (filiere ICT e Comunicazione

e Marketing)

26/01/2015 Andrea Ruggeri - www.elamedia.it

2

Page 3: Grafica sul web: concetti di base

+

Grafica raster e

vettoriale

Vettoriale o Raster?

Tutte le immagini digitali possono essere

raggruppate in due categorie principali:

Vettoriali

Raster (anche detto Bitmap)

La loro differenza sostanziale sta nel

modo in cui gli elaboratori analizzano i

loro contenuti.

26/01/2015 Andrea Ruggeri - www.elamedia.it

3

Page 4: Grafica sul web: concetti di base

+ Grafica Vettoriale

Il vettoriale è il top in campo grafico. La grafica vettoriale

sfrutta una serie di formule matematiche per generare degli

elementi grafici (punti, linee, curve e poligoni) e creare

l’immagine definitiva.

I file vettoriali non hanno problemi con la risoluzione in quanto

possono essere ingranditi all’infinito senza perdere qualità.

26/01/2015 Andrea Ruggeri - www.elamedia.it

4

immagine vettoriale ingrandita 8x

Page 5: Grafica sul web: concetti di base

+ Grafica Raster

La grafica raster, o grafica bitmap, è una tecnica utilizzata

per descrivere un’immagine in formato digitale.

Qui l’immagine viene vista come una scacchiera e ad ogni

elemento della scacchiera, chiamato pixel, viene associato uno

specifico colore.

26/01/2015 Andrea Ruggeri - www.elamedia.it

5

Page 6: Grafica sul web: concetti di base

+ Perdita di qualità dell’immagine

Le immagini bitmap se vengono ingrandite oltre alla loro

risoluzione nativa perdono qualità e si verifica il classico

effetto di immagine pixellata

26/01/2015 Andrea Ruggeri - www.elamedia.it

6

immagine raster ingrandita 8x

Page 7: Grafica sul web: concetti di base

+

La risoluzione

È la qualità dei dettagli di un

immagine.

La risoluzione si misura in DPI

(doth per inch = punti per pollice).

Se abbiamo un' immagine a 72 dpi

grande 12,7 X 12,7 cm, significa che

i due lati saranno lunghi 72 punti

per ogni 2,54 cm: 360 punti (pixel)

26/01/2015 Andrea Ruggeri - www.elamedia.it

7

Page 8: Grafica sul web: concetti di base

+

Tipiche risoluzioni

la tipica risoluzione delle immagini

web è di 72 dpi

ma ora per il web si può lavorare anche

a 96 dpi, attenzione però al peso

dell’immagine!

Un immagine destinata alla stampa ha

una risoluzione nettamente superiore

alle immagini web, fino a 300 dpi

26/01/2015 Andrea Ruggeri - www.elamedia.it

8

Page 9: Grafica sul web: concetti di base

+ La risoluzione nei Monitor

La risoluzione del monitor si riferisce al livello di dettaglio

dell'immagine che può essere riprodotto. Più è alta la

risoluzione, più è elevata la qualità dell'immagine.

Esistono diversi fattori riguardanti la risoluzione del monitor:

Pixel – Il termine pixel è l'abbreviazione di "picture element"

(elemento grafico). I pixel sono puntini molto piccoli contenuti

in un schermo. Ogni pixel può essere rosso, verde o blu.

Dot Pitch – Dot pitch è la distanza tra i pixel di uno schermo.

Un valore molto piccolo di dot pitch produce un'immagine di

qualità migliore.

26/01/201

5

Page 10: Grafica sul web: concetti di base

+ La risoluzione nei monitor

Velocità di Refresh – La velocità di refresh indica ogni quanto

tempo, in secondi, l'immagine viene ricostruita. Un'elevata

velocità di refresh produce una migliore qualità dell'immagine

e riduce il livello di sfarfallamento.

HVC (Horizontal Vertical Colors) – Il numero di pixel in una

linea rappresenta la risoluzione orizzontale. Il numero di linee

in uno schermo rappresenta la risoluzione verticale. Il numero

di colori riproducibili rappresenta la risoluzione del colore.

26/01/2015 Andrea Ruggeri - www.elamedia.it

10

Page 11: Grafica sul web: concetti di base

+ La risoluzione nei monitor

Rapporto d'aspetto (Aspect Ratio) – L'Aspect Ratio è la

proporzione tra la larghezza e l'altezza dello schermo del

monitor.

Ad esempio, un aspect ratio di 4:3 si dovrebbe applicare ad

uno schermo largo 16 pollici ed alto 12 pollici.

Un aspect ratio di 4:3 si potrebbe anche applicare ad uno

schermo largo 24 pollici ed alto 18. Uno schermo largo 22

pollici ed alto 12 ha un aspect ratio di 11:6.

26/01/2015 Andrea Ruggeri - www.elamedia.it

11

Page 12: Grafica sul web: concetti di base

+ La risoluzione nei monitor

Interlacciato/ Non interlacciato – I monitor interlacciati

generano l'immagine tramite una doppia esplorazione. La

prima esplorazione crea le linee dispari, dall'alto verso il

basso, la seconda esplorazione, invece, crea le linee pari.

I monitor non interlacciati generano l'immagine attraverso una

sola esplorazione, dall'alto verso il basso. La maggior parte dei

monitor CRT oggi sono non interlacciati.

26/01/201

5 Andrea Ruggeri - www.elamedia.it

12

Page 13: Grafica sul web: concetti di base

+

I metodi di colore

I metedi di colore, ci consentono di

definire come vengono colorati i pixel

Rgb, cmyk, scala di grigi, scala di

colore sono i metodi più comuni

26/01/2015 Andrea Ruggeri - www.elamedia.it

13

Page 14: Grafica sul web: concetti di base

+ Metodo RGB

RGB è l'acronimo di RED, GREEN e BLUE, i colori

fondamentali nella tecnica additiva, è un metodo di colore che

si basa sulla luminosità.

L'RGB è il metodo su cui si basano i monitor, le TV e tutti gli

apparecchi a colori che utilizzano la luce come sorgente.

26/01/2015 Andrea Ruggeri - www.elamedia.it

14

Page 15: Grafica sul web: concetti di base

+ Metodo CMYK

CYAN, MAGENTA, YELLOW, BLAC(K), è un metodo che si

basa,non sulla luminosità, ma sul colore. Questi colori

formano la sintesi sottrattiva, chiamata così perchè i colori

mescolati sottraggono la luce fino al nero

Metodo utilizzato per il settore della stampa

26/01/2015 Andrea Ruggeri - www.elamedia.it

15

Page 16: Grafica sul web: concetti di base

+ Metodo Scala di Grigi

Il metodo Scala di grigio usa diverse sfumature di grigio in

un’immagine. Qui ogni pixel di un’immagine in scala di grigio

ha un valore di luminosità compreso tra 0 (nero) e 255 (bianco).

Le immagini a 16 e 32 bit hanno un numero di sfumature molto

più elevato rispetto alle immagini a 8 bit (256).

I valori della scala di grigio possono anche essere calcolati

come percentuale di copertura di inchiostro nero (0%

corrisponde al bianco, 100% al nero).

26/01/201

5 Andrea Ruggeri - www.elamedia.it

16

Page 17: Grafica sul web: concetti di base

+ Metodo Scala di Colore

Il metodo Scala di colore produce file di immagini a 8 bit con

al massimo 256 colori. Quando converte un’immagine in Scala

di colore, Gimp crea una tavola di consultazione del colore,

nella quale vengono memorizzati e indicizzati i colori

dell’immagine.

Se un colore usato nell’immagine originale non è incluso nella

tavola, viene selezionato il colore più simile.

Questo metodo può ridurre le dimensioni dei file mantenendo

la qualità visiva necessaria per presentazioni multimediali,

pagine Web e simili utilizzi delle immagini

26/01/201

5 Andrea Ruggeri - www.elamedia.it

17