aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Grafica per il Web

 

2. GIF: trasparenza e animazione

Due varianti preziose del formato GIF ci permettono di creare effetti grafici ancora più interessanti. La prima consiste nell'attribuire la trasparenza a uno dei colori contenuti nella palette dell'immagine. Può trattarsi di un colore qualsiasi: una volta selezionato, diventerà trasparente e lascerà intravedere il colore di sfondo impostato via HTML per l'elemento HTML che contiene l'immagine (tabella o pagina).

Questo genere di tecnica è utile quando un'immagine deve fondersi con la pagina senza mostrare il classico bordo rettangolare. In pratica il soggetto dell'immagine si mescola con la pagina. Esistono due metodi per realizzare tale soluzione. Il primo consiste semplicemente nel creare uno sfondo per l'immagine che sia identico a quello della pagina. Ciò implica conoscere bene i colori HTML e la Websafe palette in modo da non avere differenze visibili. Prendiamo l'esempio di un bottone che vogliamo inserire nella nostra home page. Assegniamo al rettangolo che lo circonda un colore identico a quello che sarà lo sfondo della pagina. La differenza tra i due non sarà visibile sul nostro computer e l'immagine si fonderà perfettamente con il resto della pagina. Di solito i programmi di elaborazione delle immagini per il Web consentono di definire i colori mediante gli stessi codici esadecimali che useremo per lo sfondo della pagina HTML, perciò sarete matematicamente sicuri del risultato.

Abbinamento degli sfondi
L'immagine che contiene il bottone di questo esempio ha uno sfondo blu identico allo sfondo della pagina HTML in cui s'inserisce. In tal modo i due si fondono e il bottone si fonde perfettamente con la pagina.


Clicca per ingrandire

Tuttavia, nel caso volessimo cambiare lo sfondo della pagina, saremmo anche costretti a modificare ogni singolo bottone. Per ovviare a tale problema e per consentire anche l'uso di sfondi colorati in modo vario (mediante l'impiego d'immagini di background) si assegna allo sfondo che contorna il nostro pulsante un colore trasparente. Un'operazione facilissima: basta indica il colore prescelto per la trasparenza e il gioco è fatto.

I due sfondi non sono più coincidenti
Cambiando lo sfondo della pagina diventa evidente lo sfondo dell'immagine.


Clicca per ingrandire

L'unico accorgimento da eseguire in questa operazione consiste nello scegliere come colore di sfondo dell'immagine a cui assegnale la trasparenza il medesimo stesso colore che pensiamo di realizzare per lo sfondo della nostra pagina. Sembra un controsenso, ma il realtà deriva dalla necessità pratica di creare una transizione uniforme tra i bordi arrotondati dell'immagine e lo sfondo circostante. In questi punti di transizione il programma di elaborazione dell'immagine crea sfumature che tendono verso il colore circostante così da ottenere l'effetto di antialiasing (rimozione delle scalettature e frastagliature dai bordi). Nel caso in cui lo sfondo fosse bianco e lo rendessimo trasparente per poi montare l'immagine che ne risulta su una pagina blu, vedremmo un contorno biancastro e irregolare attorno alla sagoma della figura. Partendo invece da uno sfondo blu che venga poi reso trasparente, la saldatura sarebbe perfetta.

Predisposizione della trasparenza
Per creare un bottone con sfondo trasparente è necessario scegliere come colore di trasparenza lo stesso che attribuiremo allo sfondo della nostra pagina Web, in questo caso il blu. In tal modo il progreamma di grafica costruirà le sfumature di blu necessarie per favorire la saldatura morbida tra l'immagine e lo sfondo. Nell'esempio in figura vediamo che Fireworks MX ha identificato con gli scacchi grigio-bianchi la zona trasparente e ha generato un contorno bluastro tutt'intorno al pulsante.


Clicca per ingrandire

Pulsante con sfondo trasparente
Ecco il risultato della nostra operazione. Lo sfondo trasparente del bottone lascia intravededere lo sfondo originale della pagina permettendo una saldatura perfetta.


Clicca per ingrandire

Bottone con immagine di background
Grazie al fatto che il bottone ha uno sfondo trasparente, possiamo anche sovrapporlo a una pagina che abbia un'immagine di background. In questo caso, naturalmente, lo sfondo trasparente del bottone è stato creato a partire da uno sfondo grigio simile al colore della griglia di background, così da creare il bordo di antialiansing attorno al bottone con il colore corretto.


Clicca per ingrandire

Corretta creazione della trasparenza
Qui vediamo la stessa immagine a cui è stato attribuito uno sfondo trasparente partendo, nel primo caso, dallo sfondo bianco originale e, nel secondo caso, da uno sfondo blu identico a quello previsto per la pagina. Notate che nella prima si nota un bordo biancastro e alcuni segni spuri che disturbano l'immagine, che sono invece assenti dal secondo.


Clicca per ingrandire

 

Immagine trasparnte su sfondo
Un'immagine con bordo trasparente con bordi irregolari può essere montata su una pagina che contenga un'immagine di background creando un effetto di sovrapposizione perfetto.


Clicca per ingrandire (per vedere la pagina originale con cui abbiamo realizzato questo effetto apri il file "Frullatore")

L'animazione è la seconda grande prerogativa del formato GIF e consente di riunire due o più fotogrammi della stessa dimensione all'interno di un singolo file in modo da visualizzarli ciclicamente. Il formato consente di creare un ciclo ripetitivo che prosegue senza interruzione oppure termina dopo un certo numero di ripetizioni. Permette anche di definire l'intervallo di tempo tra un'immagine e la successiva. In termini pratici, la sequenza d'immagini apparirà come un singolo elemento e verrà inserita nella pagina HTML come qualsiasi altra immagine. È possibile creare un GIF animato anche con sfondo trasparente.

L'ultima variante del GIF consiste nel formato interlacciato, usato di rado perché appesantisce il file e di fatto aggrava il problema che vorrebbe risolvere. Un'immagine interlacciata compare sul video un po' per volta. La tecnica è stata sviluppata per consentire al browser di visualizzare una versione a bassa risoluzione dell'immagine non appena sia disponibile 1/8 del suo contenuto, proseguendo poi con la costruzione della pagina mentre l'immagine termina di caricarsi e diventa perfettamente visibile. La tecnica sveltisce la navigazione di pagine con immagini di grandi dimensioni, tuttavia è altamente sconsigliata per eventuali elementi di navigazione grafici visto che l'utente sarebbe costretto ad aspettare prima di riuscire a capire di che cosa si tratti.

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
  Modelli di pagina e tabelle
  Quarta lezione:
  HTML 4.01 e CSS
  Quinta lezione:
  Design e multimedialità
1. Elemeni di Web design
  1. La ruota colore del Web
2. Grafica per il Web
  1. Eclettico GIF
  2. Trasparenza e animazione
  3. JPEG per le fotografie
  4. PNG tuttofare
3. Link ipertestuali
4. Tabelle d'immagini
5. Mappe immagini
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits