La grafica in un sito internet copre un ruolo molto importante, come
si usa dire, anche l'occhio vuole la sua parte. Creare un sito con
solo materiale testuale, per interessante che questo possa risultare,
senza un adeguata grafica, il sito perde in interesse. Un altro detto
importante dice, una foto vale più di mille parole, dobbiamo dar
ragione anche a questo detto, immaginate questo corso senza l'utilizzo
di schermate grafiche di esempio, il testo di spiegazione sarebbe
dovuto essere migliaia di pagine più lungo e sarebbe necessario di
una maggiore concentrazione da parte dello studente.
In questa lezione iniziamo a trattare la grafica di un sito internet e
cominciamo dai Banner pubblicitari, ma prima di iniziare la
costruzione del banner é importante una piccola prefazione sulle
immagini e i loro formati principali.
I formati grafici più utilizzati nel mondo Windows sono i Bitmap,
questi file hanno estensione BMP
sono di ottima qualità ma occupano anche molto spazio, non sono
quindi adatti nell'uso della grafica su internet, sono comunque ottimi
da conservare come immagine di archivio.
Il formato grafico con milioni di colori più utilizzato in internet e
il JPG, questo formato con la sua
funzione di compressione dei colori riesce a trattare immagini con
milioni di colori da un peso minimo in Kb, ovvero salvando un immagine
da BMP effettuando una conversione in JPG, si ha un notevole riduzione
di peso dell'immagine in quanto vengono eliminati i colori adiacenti
superflui. Un immagine se di buona qualità e sempre meglio di una
pessima, ma se per visualizzare una bella foto da un sito internet
dovremmo impiegare dieci minuti invece che pochi secondi, chi ci perde
e il sito stesso, se troppo lento da caricare perde visitatori, quindi
meglio inserire una foto non tanto eccellente ma che si carichi in
fretta. Volendo mostrare una bella foto al limite si inserisce un
collegamento per mostrarla a parte.
Un altro formato molto utilizzato nei siti internet sono i GIF,
questo formato possiede di alcune caratteristiche interessanti pur se
possiede al massimo 256 colori, per esempio ha la funzione trasparenza
utile per creare titolazioni grafiche oppure permette di creare
piccoli animazioni che attirano l'attenzione del visitatore.
Quarto ed ultimo formato grafico di cui ci interesseremo e il PNG,
questo formato ha un elevata qualità di compressione se utilizzato
con pochi colori e di ottima qualità visiva, un esempio a caso, tutte
le immagini precedenti di questo corso sono in formato PNG, avrete
notato della loro alta qualità riproduttiva delle schermate di
esempio, forse non avete notato del peso in Kb che occupano, lo
vediamo qui in seguito con alcuni esempi su tutti i formati.
Qui di seguito inseriamo due tabelle, nella prima utilizziamo un
immagine con milioni di colori in BMP e i corispettivi
salvataggi negli altri formati, vince la gara il formato JPG
che pur mantenendo un ottima qualità riesce a comprimere l'immagine
risultando di circa 18 volte più leggera, cioé al posto della BMP
possiamo utilizzare 18 immagini JPG per avere lo stesso peso.
| Formato |
Byte
Occupati |
Compre-
-ssione |
Immagine |
| BMP |
55.854 |
|
 |
| JPG |
18.584 |
100% |
 |
| JPG |
4.150 |
75% |
 |
| JPG |
2.987 |
50% |
 |
| PNG |
29.561 |
|
 |
| GIF |
16.639 |
|
 |
Nella seconda tabella qui sotto
facciamo invece il confronto fra immagini di pochi colori nei vari
formati. In questa categoria vince il assoluto PNG.
| Formato |
Byte
Occupati |
Compre-
-ssione |
Immagine |
| BMP |
55.854 |
|
 |
| JPG |
13.600 |
100% |
 |
| JPG |
4.954 |
75% |
 |
| JPG |
3.793 |
50% |
 |
| PNG |
735 |
|
 |
| GIF |
1.821 |
|
 |
Il consiglio quindi che diamo e di
creare sempre le immaggini nel formato BMP che utilizziamo come
archivio di ottima qualità, da questo possiamo convertire nel formato
che più ci interessa.
E' da considerare un altro
aspetto, la qualità e il peso di un immagine che si ottiene dopo la
conversione dipende principalmente dalla qualità e dal numero dei
colori dell'originale, pertanto le tabelle sopra sono si indicative,
ma potrebbero variare con un immagine differente, e quindi bene fare
varie prove e scegliere quella che ci soddisfa di più in qualità e
peso.
Teniamo presente nel formato JPG ad ogni salvataggio la
qualità peggiora perché ogni volta fa la sottrazione dei colori,
quindi nel caso che vogliamo modificare una JPG per poterla poi
salvare, il consiglio e di salvare prima l'immagine in BMP, lavoriamo
sulla BMP e a lavoro terminato la riportiamo a JPG.
Per credere bisogna fare una prova, prendete un immagine JPG che non
vi serve o fatene una copia di riserva, modificatela e salvatela su se
stessa, vedrete la qualità peggiorare e il peso diminuire.
Un altro discorso da fare nel formato JPG é che nel momento del
salvataggio e possibile impostare il livello di compressione
preferito, come avete visto sopra ci sono tre immagini JPG con
riferimento 100% 75% e 50%, il % significa la percentuale di
compressione che abbiamo dato all'immagine, modificando la percentuale
di compressione l'immagine avrà un diverso aspetto e peso finale, per
un ottima riuscita e necessario fare più prove di compressione
partendo sempre dall'originale BMP.
Realizziamo un Banner
Nella lezione che segue utilizzeremo
tre programmi di grafica, il primo conosciuto da tutti e già
disponibile in qualsiasi computer con Windows installato, e il
famossissimo Paint di Windows. Con questo programma
realizzeremo le immagini in bitmap (BMP)
Il secondo programma che utilizzeremo
porta il nome di ThumbsPlus, un convertitore di immagini e un
utile gestore di archivio immagini, potete scaricare questo programma
<Cliccando
qui>. Questo programma nel corso ci serve per
convertire le immagini da BMP a GIF o JPG.
Il terzo programma porta il nome di Gif
Animator, un semplice programma per creare GIF animate, potete
scaricarlo <Cliccando
qui>. Questo programma serve per unire più immagini
GIF fisse per creare una GIF Animata.
Scaricate e installate i due
programmi accettando i menu che vi vengono presentati, non devono
essere configurati come WS_FTPle quindi non sto a illustrarvi la loro
installazione, sarebbe un inutile perdita di tempo. Per il primo
programma Paint non dovete scaricare nulla in quanto lo avete
già nel computer, e iniziamo il corso proprio da questo.
Aprite il programma Paint, se
questo e ridotto in finestra allargatela al massimo cliccando in alto
a destra sull'icona centrale Ingrandisci.
Qualcuno di voi dirà; "Ma dai,
non e possibile, questo programma di disegno e stupido, inutile,
troppo sempliciotto, ecc." Vi dimostrerò che é uno dei migliori
programmi di disegno esistenti a livello di pixel, seguite il corso e
capirete le sue potenzialità, se poi possedete e sapete usare altri
programmi migliori tanto meglio per voi.
Ecco quindi come si presenta il
programma Paint
Fine Prima Parte -
Continua alla lezione successiva
|
Torna
alla
