Grafica sul web: concetti di base
0 likes427 views
Concetti base per chiarire argomenti relativi alla grafica sul web e a come utilizzare i vari strumenti software
Grafica sul web: concetti di base
- 1. + Diamo vita al tuo portale web, gestiamo la tua visibilit online, promuoviamo il tuo business
- 2. + 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/2015Andrea Ruggeri - www.elamedia.it 2
- 3. + 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/2015Andrea Ruggeri - www.elamedia.it 3
- 4. + 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 limmagine definitiva. I file vettoriali non hanno problemi con la risoluzione in quanto possono essere ingranditi allinfinito senza perdere qualit. 26/01/2015Andrea Ruggeri - www.elamedia.it 4 immagine vettoriale ingrandita 8x
- 5. + Grafica Raster La grafica raster, o grafica bitmap, 竪 una tecnica utilizzata per descrivere unimmagine in formato digitale. Qui limmagine viene vista come una scacchiera e ad ogni elemento della scacchiera, chiamato pixel, viene associato uno specifico colore. 26/01/2015Andrea Ruggeri - www.elamedia.it 5
- 6. + Perdita di qualit dellimmagine Le immagini bitmap se vengono ingrandite oltre alla loro risoluzione nativa perdono qualit e si verifica il classico effetto di immagine pixellata 26/01/2015Andrea Ruggeri - www.elamedia.it 6 immagine raster ingrandita 8x
- 7. + 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/2015Andrea Ruggeri - www.elamedia.it 7
- 8. + 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 dellimmagine! Un immagine destinata alla stampa ha una risoluzione nettamente superiore alle immagini web, fino a 300 dpi 26/01/2015Andrea Ruggeri - www.elamedia.it 8
- 9. + 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
- 10. + 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 (HorizontalVertical 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/2015Andrea Ruggeri - www.elamedia.it 10
- 11. + 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/2015Andrea Ruggeri - www.elamedia.it 11
- 12. + 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
- 13. + 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/2015Andrea Ruggeri - www.elamedia.it 13
- 14. + 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/2015Andrea Ruggeri - www.elamedia.it 14
- 15. + 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/2015Andrea Ruggeri - www.elamedia.it 15
- 16. + Metodo Scala di Grigi Il metodo Scala di grigio usa diverse sfumature di grigio in unimmagine. Qui ogni pixel di unimmagine 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
- 17. + Metodo Scala di Colore Il metodo Scala di colore produce file di immagini a 8 bit con al massimo 256 colori. Quando converte unimmagine in Scala di colore, Gimp crea una tavola di consultazione del colore, nella quale vengono memorizzati e indicizzati i colori dellimmagine. Se un colore usato nellimmagine 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