TRUCOS
   
 
IMÁGENES CON FONDO TRANSPARENTE
  
Volver al índice  
 
 

Cada vez es más común que las páginas web tengan imágenes para hacer más atractivo su diseño e incluso para aclarar el contenido: ya se sabe, una imagen vale más que mil palabras...

No obstante, las imágenes pueden convertirse en un arma de doble filo: tanto nos pueden servir para dar un aspecto más atractivo, como para entorpecer la visión. Debemos tener mucho cuidado.

Una de las opciones que más nos puede impactar cuando visitamos una página web es encontrarnos con imágenes que tienen una forma determinada, pero están encuadradas dentro de un marco de color diferente al del fondo de la página web. El resultado es el siguiente:

En cambio, si realizamos una pequeña operación que consiste en poner el fondo transparente, el resultado es mucho más resultón. Veamos un ejemplo:



Las principales ventajas de utilizar imágenes con el fondo transparente son:

  • Obtenemos un resultado más agradable a la vista. Puede que con una única foto esta afirmación no se observe en su totalidad, pero si visitásemos una web llena de imágenes con cuadros blancos, nuestra percepción sería agobiante.
  • Le da un aspecto más profesional a la web.
  • Podemos sobreponer unas imágenes con otras sin que los fondos nos tapen partes de las mismas.

Para solucionar este problema, hay personas que pintan el color de fondo de una imagen del mismo color que el fondo de la web. A simple vista, el resultado es el mismo que poniendo el fondo transparente, pero la operación puede resultar complicada, ya que muchas veces hacer coincidir ambos tonos no es fácil. Además, si llegase un día en el que deseásemos cambiar el diseño de nuestra web poniendo el fondo de otro color, deberíamos modificar todas y cada una de las imágenes para cambiar su fondo. En cambio, si optamos por la opción de poner el fondo transparente, posteriormente no deberemos repetir la operación nunca más.

¿Qué formato debo utilizar para elaborar una imagen con el fondo transparente?
Como ya hemos visto en ediciones anteriores del Boletín, los formatos de imágenes más utilizados en la actualidad son el JPG y el GIF. Generalmente se utiliza el formato JPG para fotografías, ya que los colores están más conseguidos y el formato GIF para imágenes y dibujos. Desgraciadamente, el formato JPG no permite la opción de fondo transparente, por lo que deberemos recurrir siempre a guardar nuestras imágenes transparentes como GIF.

¿Cómo puedo saber si una imagen tiene el fondo transparente?
Normalmente, cuando utilizamos un GIF en nuestras páginas, lo cogemos de internet o de alguna galería de imágenes que tengamos a mano (por ejemplo www.gifmania.com). En estos casos, las imágenes ya están producidas teniendo en cuenta este hecho y tienen el fondo transparente. Lo podemos comprobar incorporando la imagen en la página que estemos elaborando y ver el resultado.
Ahora bien, si queremos realizar un dibujo por nuestra cuenta o tenemos alguna imagen sin el fondo transparente, deberemos realizar una pequeña operación.

¿Cómo puedo convertir el fondo de una imagen en transparente?
Lo primero que debemos tener es un programa de edición gráfica. En el mercado existen múltiples de ellos, algunos muy complejos, otros más sencillos, unos comerciales, otros gratuitos... A continuación veremos como podemos realizar esta acción con uno de los programas más comunes: el Paint Shop Pro. No obstante, cabe destacar que en otros programas los pasos a seguir son los mismos, pero pueden variar los nombres de las acciones

Si no tenéis este programa en vuestro centro y deseáis probarlo, podéis encontrar una versión de prueba en español que dura 30 días en la siguiente dirección. http://es.jasc.com/download.html

Pasos a seguir:

  • Abrir la imagen que deseemos modificar.
  • En la barra de menús, acceder al de Colores, seleccionar la opción Disminuir el número de colores y seleccionar 256 colores.
  • Al realizar esta operación aparece una ventana de diálogo con varias opciones, pulsar Aceptar manteniendo todas las opciones tal y como están.
  • Coger la herramienta cuentagotas y apretar el botón derecho del ratón sobre el fondo de la imagen que deseamos hacer transparente. Con esta operación hemos seleccionado como color de fondo el actual en la paleta de colores.
  • Acceder de nuevo al menú Colores, seleccionar la opción Ajustar transparencia...
  • Nuevamente aparece una ventana de diálogo. Marcar la opción Transparencia con el valor del color de fondo. Y pulsar Aceptar.
  • Si hemos realizado correctamente toda la operación, nos aparecerá el fondo de la imagen como una cuadrícula con cuadrados de dos colores tipo tablero de ajedrez.

Como podéis observar, este es un truco muy sencillo, pero nos puede dar unos resultados muy vistosos.

 

 

 
   
 
  
Volver al índice