anterior.gif (992 bytes)  siguiente.gif (1013 bytes)

9.gif (330 bytes)Archivo de Im�gines/ Fondo Transparente

Fondo Transparente
(Transparent Background)

Algunas veces im�genes tienen mas impacto visual "sin el fondo". Por ejemplo, considera las siguientes dos muestras en l�nea de la misma imagen, la primera mostrando el fondo y la segunda sin fondo:

En el segundo ejemplo, el fondo no es necesariamente removido, en vez, est� preparado igualmente al color del muestrario del navegador, el cual es equivalente a hacerlo transparente. Ahora demostramos c�mo "remover el fondo" de la imagen GIF usando un programa PC llamado giftrans. Una versi�n de este programa tambi�n esta disponible para sistemas Unix. En la Macintosh un programa llamado "Transparency" puede ser usado para cumplir con la misma misi�n.

Notamos que un solo color puede ser removido de esta manera, y ser� removido para todas las ocurrencias en la figura. Por lo tanto, este m�todo es muy efectivo si el fondo es de un solo color que aparece solamente en el fondo de la imagen.

Haciendo Fondos Transparentes
(Making Backgrounds Transparent)

La versi�n PC de giftrans es un programa DOS, y no una aplicaci�n de Windows.

En t�rminos pr�cticos, esto quiere decir que usas giftrans abriendo una ventana MSDOS en tu PC y escribiendo mandatos, en ves de oprimir botones o hacer selecciones de alg�n men�. Afortunadamente, los mandatos de giftrans no so muy complicados, as� que el programa es relativamente f�cil de usar aun cuando una interfaz bastante cursi.

Vamos a suponer que tenemos una imagen gif con un fondo de color s�lido en un archivo llamado visback.gif, y deseamos crear una versi�n de la imagen que tenga un fondo transparente y guardarlo en un archivo llamado transback.gif. Podemos lograrlo escribiendo el siguiente mandato en nuestra ventana de MSDOS:

giftrans -T visback.gif > transback.gif

La -T nos dice que cual color giftrans de la imagen original se convertir� en transparente en la imagen nueva, viz. el color del fondo en la imagen original. Como otro ejemplo, podemos escribir lo siguiente en nuestra ventana de DOS para producir el segundo de los mapas de los Estado Unidos anteriormente mostrados, usa-trans.gif, de la primera versi�n, usa.gif:

giftrans -T usa.gif > usa-trans.gif

Si queremos guardar la imagen con el fondo transparente en el mismo archivo que el de la imagen con el fondo visible original, podemos usar un proceso de dos pasos:

giftrans -T usa.gif > temp.gif
ren temp.gif usa.gif

El primer paso guarda temporeramente la nueva imagen en el nuevo archivo temp.gif, pero el segundo paso re - nombrar este nuevo archivo al mismo nombre que el archivo original. Esto tiene el efecto de reemplazar la versi�n original (con fondo visible) de usa.gif con la nueva versi�n (fondo transparente).

Nota que el fondo de la imagen creada por giftrans ser� transparente siempre y cuando la imagen sea vista en un navegador. Si la observamos con otro software de gr�ficas, el fondo se podr� ver.

Tambi�n podemos observar que los mandatos de las versiones anteriormente mencionadas asumen que el mandato es dado mientras esta en el mismo expediente de la imagen a la cual le deseamos utilizar el programa y que cualquiera de las giftrans (a) esta en el mismo expediente, o (b) la localizaci�n de la giftrans ha sido a�adido al pasillo variable de tu DOS. Sino, tu le tendr�s que ser especifico al programa de giftrans sobre cual pasillo usar cuando lo quieras ejecutar.

Haciendo Cualquier Color Transparente
(Making Any Color Transparent)

Lo anteriormente dicho es con veracidad lo que necesitas conocer para usar giftrans para "remover" los fondos en las im�genes en gif. Pero programas de giftrans tambi�n puede hacer transparente cualquier color singular en la imagen original de gif. No esta limitado exclusivamente al color del fondo. Pero, para hacer esto, debemos poder decirle a giftrans cual es el color que deseamos hacer transparente. Podemos identificar el color a cambiar refiri�ndonos a sus seis c�digos digitales hexadecimales rgb o yendo a su �ndice, en la tabla de color de las im�genes. Como ejemplo, podemos hacer transparente todas las ocurrencias en una imagen, vamos a decir, rojo puro, con el mandato

giftrans -t #ff0000 old.gif > new.gif

Hemos hablado en secciones anteriores estas representaciones de colores hexadecimales, pero la mera noci�n de especificar un color en una imagen por medio de su �ndice en la tabla de colores, es un poco misterioso. Pero de hecho, hacerlo es bastante f�cil. Existen programas de gr�ficas que presentan la tabla de colores usada para cualquier imagen, y nos muestran el �ndice de cada color en la imagen. Empero, giftrans per se nos pueden proveer con esta informaci�n.

Una ilustraci�n bastante simple, supongamos que tenemos una imagen gif en el archivo redgreen.gif que solo consiste de dos colores, rojo y verde, como sigue a continuaci�n:

Entonces podemos pedir que giftrans nos muestre la tabla de color para esta imagen al escribir el mandato:
giftrans -1 redgreen.gif

en nuestra ventana de MSDOS. (Aqu� la opci�n -1 le pide a giftrans que de una lista de los colores de la gr�fica de im�genes). Si escribimos el mandato anterior, giftrans debe responder con la siguiente informaci�n en �ste caso:

Global Color Table:  
        Color 0: Red 255, Green 0, Blue 0, #ff0000 (red, red1)  
        Color 1: Red 0, Green 255, Blue 0, #00ff00 (green, green1)

Esto es, el color en esta imagen con �ndice de 0 tiene componentes rgb de rojo 255, verde de 0, azul de 0, y una representaci�n hexdecimal de #ff0000. Y el color en la imagen con �ndice de 1 tiene componentes rgb de rojo 0, verde 255 y azul de 0 y una representaci�n hexdecimal de #00ff00. ( Nota que el �ndice de colores tiene una amplitud desde cero a uno menos que el n�mero total de colores en la imagen).

Podemos usar esta informaci�n de �ndice de colores para que giftrans haga una transparencia roja en la imagen usando el mandato:
Giftrans -t0 redgreen.gif > templ.gif

Esto guardar� la siguiente imagen en el archivo templ.gif :

(Mant�n el bot�n derecho del rat�n oprimido sobre el �rea izquierda del cuadrado verde, para ver que este a�n es parte de la imagen que ahora es invisible en el navegador). Tambi�n podemos usar el mandato:
giftrans -t1 redgreen.gif > temp2.gif

Esto guardar� la siguiente imagen en donde el verde se ha hecho transparente en el archivo temp2.gif:

De manera similar, podemos usar giftrans con la opci�n -1 para mostrar la tabla de colores para cualquier imagen, y usar la informaci�n resultante para encontrar el �ndice de cualquier color en la imagen. Giftrans puede ser usada con la opci�n -t y la informaci�n del �ndice de colores para hacer cualquier color en la imagen transparente.

Otra Opci�n de giftrans
(Another giftrans Option)

El programa de giftrans tambi�n puede ser usado para convertir cualquier color en una imagen gif en otro color. Este procedimiento puede ser repetido tantas veces como sea necesario, hasta que cualesquiera o todos los colores originales de la imagen queden reemplazados por otros colores espec�ficos.

Un juego completo de opciones de giftrans, con breves explicaciones pueden ser vistos con simplemente escribir giftrans seguido por RETURN en la ventana "window" de DOS.

Ejemplo para tu P�gina
(Example for Your homepage)

Ahora, vamos a usar la t�cnica anterior para a�adir una imagen a tu p�gina sin fondo. Te daremos un archivo .gif para bajar como ejemplo, pero si�ntete en la libertad de bajar un archivo .gif diferente si te place. Vayamos a la siguiente direcci�n:

http://csep10.phys.utk.edu/webcourse/samplegif.html

oprime el bot�n derecho del rat�n sobre tu imagen de la escuela en la parte superior de la p�gina y guarda el archivo de tu expediente en tu diskette local con el nombre por omisi�n (school4_logo.gif). Nota que lo que sigue asumimos que el archivo que acabas de guardar y tu p�gina est�n en el mismo expediente.

Ahora, sigue los pasos descritos anteriormente para remover el fondo gris) de la imagen, guardarlo bajo el nombre original en tu expediente. Despu�s, ve a archivo de tu p�gina en el mismo expediente y entra el siguiente texto en un lugar conveniente (usa el rat�n para copiar y pegar):

  <img src="school4_logo.gif" hspace="15"  
align="left"> Here is an example of some  
text that should wrap around the preceding  
figure of the schoolhouse.  The align="left"  
command says to position the figure to the  
left, and the hspace="15" command says to  
leave 15 points (there are about 72 points  
in an inch) horizontal space around the image.

Guarda los cambios y recarga en el navegador; si todo sali� bien, debes tener el icono de la escuela (u otra imagen si lo deseas) puesta a la izquierda, con texto envolvi�ndose hacia la derecha y el fondo de la imagen debe estar transparente.

siguiente.gif (1013 bytes)