Grafica sul web: concetti di base
-
Upload
enrico-mainero -
Category
Internet
-
view
65 -
download
2
Transcript of Grafica sul web: concetti di base
+
Diamo vita al tuo portale web, gestiamo la tua
visibilità online, promuoviamo il tuo business
+ 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
+
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
+ 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
+ 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
+ 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
+
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
+
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
+ 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
+ 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
+ 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
+ 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
+
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
+ 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
+ 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
+ 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
+ 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