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)