Una delle caratteristiche offerte dal formato GIF, è quella di poter creare delle immagini con UN SOLO colore trasparente, ovvero che non copre ciò che sta al di sotto. Cerchiamo di capirci meglio con degli esempi.
Uno splendido omino che deturpa la foto originale.
Prendete ora un foglio trasparente delle stesse dimensioni di quello precedente e disegnateci sopra un altro omino. Sovrapponetelo alla fotografia di prima. Cosa vedete adesso?
Uno splendido omino perfettamente integrato con la fotografia originale!
Questo piccolo esempio vi dovrebbe far capire la differenza fra un GIF normale ed un GIF trasparente.
Una delle caratteristiche del formato GIF è che ogni immagine occupa sempre una certa superficie rettangolare misurabile in pixel, ovvero in punti dello schermo. Un'immagine 100x150pixel
occupera' dunque una porzione di schermo rettangolare, lunga 100 punti e alta 150 punti, per un totale di 100x150=15,000 punti.
Se per un qualsiasi motivo la vostra immagine ha dei contorni non rettangolari, essa dovrà essere inserita all'interno di un'immagine comunque rettangolare, con evidenti spazi vuoti. Fintanto che tali spazi vuoti hanno lo stesso colore dello sfondo, il problema non si pone, in quanto si confonderà con esso, ma oggi che la maggior parte delle pagine ha uno sfondo più o meno variopinto questa soluzione non è più adottabile. Se però assegnamo agli spazi vuoti della nostra immagine rettangolare un colore che definiremo trasparente, ecco che essa si potrà integrare perfettamente con il contenuto dello sfondo sottostante.
Un'altra possibilità di utilizzo dei GIF trasparenti è quella di separatori d'immagini o testi. Immaginate di avere due immagini e di doverle separare di 20 pixel.
E' sufficiente creare un'immagine 20x2pixel con una palette di 2 colori e riempirne tutto lo spazio a disposizione con uno dei due colori.
Assegnate a tale colore l'attributo "trasparente" e memorizzatelo come GIF 89a. A questo punto potete inserire nel vostro documento HTML delle istruzioni simili a queste:
<IMG SRC="img1.gif"><IMG SRC="vuoto20.gif"><IMG SRC="img2.gif">
Ottenendo il seguente risultato:
Come creare un' immagine trasparente con Giftrans.
Il trucco che sta dietro a questo effetto speciale sta sostanzialmente nel conoscere quale dei 256 colori della figura é il colore trasparente.
Se l'immagine é costruita da zero sta al disegnatore decidere di quale colore sará lo sfondo.
Se l'immagine é giá fatta é necessario disporre di un programma per la visualizzazione delle immagini in grado di editare la palette e permettere di conoscere il fatidico numero.
In oltre é indispensabile il programma GIFTRANS che permette di marcare il colore trasparente in modo comprensibile ad un browser.
Partiamo da un' immagine giá fatta:
Se lo sfondo non é uniforme si deve renderlo tale con un qualsiasi programma per l' elaborazione delle immagini. Si deve usare per la parte si vuole rendere trasparente un colore che non appare nel resto dell' immagine.
1 - Se il numero n ( 0 < n < 255) é giá noto si puó subito saltare alla fase 4 altrimenti si deve aprire il file gif con il programma in proprio possesso
2 - Si edita la palette dell' immagine: su Paint Shop il comando é Edit Palette e sta sotto il menu Colors, su LView é Palette Entry e sta sotto Retouch etc. Solitamente il programma fa vedere tutti i 256 colori dell' immagine e a questo punto non resta che determinare il numero n (0 < n < 255) corrispondente al colore dello sfondo. A volte conviene ritoccare l'immagine in modo che il colore di fondo non appartenga alla gamma di colori utilizzati nel resto della stessa, in modo da evitare uno spiacevole effetto "traforato".
3 - Conviene rinominare il file su cui si vuole lavorare per es.:
Filename.gif --> Filename.org
4 - Una volta ottenuto il famigerato numero di colore e rinominati i file si utilizza il programma GIFTRANS:
giftrans -t NUMCOL -o Filename.gif Filename.org
Dove
NUMCOL = (0...255) numero del colore che si vole rendere trasparente
Filename.org file ORIGINE
Filename.gif file DESTINAZIONE
Ed ora il vostro file TRASPARENTE é pronto per stupire con effetti speciali il mondo di WWW !!!
Uno splendido omino che deturpa la foto originale.
Prendete ora un foglio trasparente delle stesse dimensioni di quello precedente e disegnateci sopra un altro omino. Sovrapponetelo alla fotografia di prima. Cosa vedete adesso?
Uno splendido omino perfettamente integrato con la fotografia originale!
Questo piccolo esempio vi dovrebbe far capire la differenza fra un GIF normale ed un GIF trasparente.
Una delle caratteristiche del formato GIF è che ogni immagine occupa sempre una certa superficie rettangolare misurabile in pixel, ovvero in punti dello schermo. Un'immagine 100x150pixel
occupera' dunque una porzione di schermo rettangolare, lunga 100 punti e alta 150 punti, per un totale di 100x150=15,000 punti.
Se per un qualsiasi motivo la vostra immagine ha dei contorni non rettangolari, essa dovrà essere inserita all'interno di un'immagine comunque rettangolare, con evidenti spazi vuoti. Fintanto che tali spazi vuoti hanno lo stesso colore dello sfondo, il problema non si pone, in quanto si confonderà con esso, ma oggi che la maggior parte delle pagine ha uno sfondo più o meno variopinto questa soluzione non è più adottabile. Se però assegnamo agli spazi vuoti della nostra immagine rettangolare un colore che definiremo trasparente, ecco che essa si potrà integrare perfettamente con il contenuto dello sfondo sottostante.
Un'altra possibilità di utilizzo dei GIF trasparenti è quella di separatori d'immagini o testi. Immaginate di avere due immagini e di doverle separare di 20 pixel.
E' sufficiente creare un'immagine 20x2pixel con una palette di 2 colori e riempirne tutto lo spazio a disposizione con uno dei due colori.
Assegnate a tale colore l'attributo "trasparente" e memorizzatelo come GIF 89a. A questo punto potete inserire nel vostro documento HTML delle istruzioni simili a queste:
<IMG SRC="img1.gif"><IMG SRC="vuoto20.gif"><IMG SRC="img2.gif">
Ottenendo il seguente risultato:
Come creare un' immagine trasparente con Giftrans.
Il trucco che sta dietro a questo effetto speciale sta sostanzialmente nel conoscere quale dei 256 colori della figura é il colore trasparente.
Se l'immagine é costruita da zero sta al disegnatore decidere di quale colore sará lo sfondo.
Se l'immagine é giá fatta é necessario disporre di un programma per la visualizzazione delle immagini in grado di editare la palette e permettere di conoscere il fatidico numero.
In oltre é indispensabile il programma GIFTRANS che permette di marcare il colore trasparente in modo comprensibile ad un browser.
Se lo sfondo non é uniforme si deve renderlo tale con un qualsiasi programma per l' elaborazione delle immagini. Si deve usare per la parte si vuole rendere trasparente un colore che non appare nel resto dell' immagine.
1 - Se il numero n ( 0 < n < 255) é giá noto si puó subito saltare alla fase 4 altrimenti si deve aprire il file gif con il programma in proprio possesso
2 - Si edita la palette dell' immagine: su Paint Shop il comando é Edit Palette e sta sotto il menu Colors, su LView é Palette Entry e sta sotto Retouch etc. Solitamente il programma fa vedere tutti i 256 colori dell' immagine e a questo punto non resta che determinare il numero n (0 < n < 255) corrispondente al colore dello sfondo. A volte conviene ritoccare l'immagine in modo che il colore di fondo non appartenga alla gamma di colori utilizzati nel resto della stessa, in modo da evitare uno spiacevole effetto "traforato".
3 - Conviene rinominare il file su cui si vuole lavorare per es.:
Filename.gif --> Filename.org
4 - Una volta ottenuto il famigerato numero di colore e rinominati i file si utilizza il programma GIFTRANS:
giftrans -t NUMCOL -o Filename.gif Filename.org
Dove
NUMCOL = (0...255) numero del colore che si vole rendere trasparente
Filename.org file ORIGINE
Filename.gif file DESTINAZIONE
Ed ora il vostro file TRASPARENTE é pronto per stupire con effetti speciali il mondo di WWW !!!
fonte: Re Ubuntu
Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog:
Trovato questo articolo interessante? Condividilo sulla tua rete di contatti in Twitter, sulla tua bacheca su Facebook, in Linkedin, Instagram o Pinterest. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie!
0 commenti:
Posta un commento