Acerca de las imágenes Web transparentes y mate

La transparencia hace posible crear una imagen no rectangular para la Web. La transparencia de fondo, compatible con los formatos GIF y PNG, mantiene píxeles transparentes en la imagen y permite ver el fondo de la página Web a través de las áreas transparentes de la imagen. (Aunque el formato JPEG no admite la transparencia, puede especificar que un color mate simule el aspecto de la transparencia en la imagen original).

Botón con transparencia y sin ella
Botón Web sin transparencia (izquierda) y con ella (derecha)

Los halos de fondo, compatibles con los formatos GIF, PNG y JPEG, simulan la transparencia rellenando o fusionando los píxeles transparentes con un color mate que coincide con el del fondo de la página Web. Los halos de fondo funcionan mejor si el fondo de la página Web es un color uniforme y si conoce el color.

Para crear la transparencia o los halos de fondo en la imagen optimizada, debe comenzar con una imagen que contenga transparencia. Puede crear transparencia al crear una nueva capa o al utilizar las herramientas Borrador de fondos o Borrador mágico.

Al trabajar con archivos GIF o PNG-8, se puede crear transparencia con borde irregular: todos los píxeles que son más del 50 % transparentes en la imagen original se convierten en píxeles completamente transparentes en la imagen optimizada; y todos los píxeles que son más del 50 % opacos en la imagen original se convierten en píxeles completamente opacos en la imagen optimizada. Utilice la transparencia con bordes definidos si no conoce el color de fondo de la página Web o si el fondo contiene una textura o un motivo. No obstante, tenga en cuenta que la transparencia con bordes definidos puede producir bordes dentados en la imagen.

GIF con transparencia de bordes definidos y sin ella
GIF sin transparencia de bordes definidos (izquierda) y con ella (derecha)

Mantener la transparencia de fondo en una imagen GIF o PNG

Los formatos GIF y PNG-8 admiten un nivel de transparencia, es decir, los píxeles pueden ser completamente transparentes o completamente opacos, pero no parcialmente transparentes. (En cambio, el formato PNG-24 admite transparencia en varios niveles; es decir, puede tener hasta 256 grados de transparencia en una imagen, desde opaco hasta totalmente transparente).

  1. Abra o cree una imagen que contenga transparencia y elija Archivo > Guardar para Web.
  2. En el cuadro de diálogo Guardar para Web, seleccione GIF, PNG-8 o PNG-24 como formato de optimización.
  3. Seleccione Transparencia.
  4. Para los formatos GIF y PNG-8, especifique cómo tratar los píxeles parcialmente transparentes de la imagen original. Puede fusionar estos píxeles con un color mate o crear una transparencia con bordes definidos.

Crear una imagen GIF o PNG mate

Si conoce el color de fondo de la página Web en la que se va a visualizar una imagen, puede utilizar la función de mate para rellenar o fusionar píxeles transparentes con un color mate que coincida con el fondo de la página Web.

  1. Abra o cree una imagen que contenga transparencia y elija Archivo > Guardar para Web.
  2. En el cuadro de diálogo Guardar para Web, seleccione GIF, PNG-8 o PNG-24 como formato de optimización.
  3. Para los formatos GIF y PNG-8, realice una de las acciones siguientes:
    • Para mantener la transparencia de los píxeles completamente transparentes y fusionar los parcialmente transparentes con el color mate, seleccione Transparencia. Esta opción evita el efecto de halo que se aprecia al colocar una imagen suavizada en un fondo de página Web que difiere del fondo de la imagen. A su vez, evita los bordes dentados de la transparencia con borde irregular.

    • Para rellenar los píxeles transparentes con el color mate y fusionar los parcialmente transparentes con el color mate, desactive la opción Transparencia.

  4. Seleccione un color del menú Mate:
    • Color de cuentagotas (para utilizar el color del cuadro de muestra del cuentagotas)

    • Blanco, Negro u Otro (para seleccionar un color con el Selector de color)

Crear transparencia con borde definido en un archivo GIF o PNG-8

Utilice la transparencia con bordes definidos si no conoce el color de fondo de la página Web o si el fondo contiene una textura o un motivo. No obstante, tenga en cuenta que la transparencia con bordes definidos puede producir bordes dentados en la imagen.

  1. Abra o cree una imagen que contenga transparencia y elija Archivo > Guardar para Web.
  2. En el cuadro de diálogo Guardar para Web, seleccione GIF o PNG-8 como formato de optimización.
  3. Seleccione Transparencia.
  4. Seleccione Ninguno en el menú Mate.

Crear una imagen JPEG mate

Aunque el formato JPEG no admite la transparencia, puede especificar que un color mate simule el aspecto de la transparencia en la imagen original. El color mate rellena los píxeles completamente transparentes y se fusiona con los parcialmente transparentes. Al colocar la imagen JPEG en una página Web con un fondo que coincide con el color mate, la imagen parece fusionarse con el fondo.

  1. Abra o cree una imagen que contenga transparencia y elija Archivo > Guardar para Web.
  2. En el cuadro de diálogo Guardar para Web, seleccione JPEG como formato de optimización.
  3. Seleccione un color del menú Mate: Ninguno, Color de cuentagotas (para utilizar el color del cuadro de muestra del cuentagotas), Blanco, Negro u Otro (para utilizar el Selector de color).

Al seleccionar Ninguno, se utiliza el blanco como color mate.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea