Uso de transparencia y mates

Última actualización el 12-01-2022

Acerca de las imágenes web transparentes y mates

La transparencia hace posible crear imágenes no rectangulares para web. La transparencia de fondo, admitida por los formatos GIF y PNG, conserva los píxeles transparentes de la imagen y permite que el fondo de la página web se muestre a través de las áreas transparentes de la imagen. (Aunque el formato JPEG no admite transparencia, puedes especificar un color de halos para simular el aspecto de transparencia en la imagen original.)

Botón web sin transparencia (izquierda) y con transparencia (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 sin transparencia de bordes duros (izquierda) y con transparencia de bordes duros (derecha)

Conservar la transparencia de fondo en una imagen GIF o PNG

Los formatos GIF y PNG‑8 admiten un nivel de transparencia: los píxeles pueden ser completamente transparentes o completamente opacos, pero no parcialmente transparentes. (Por el contrario, el formato PNG‑24 admite transparencia multinivel; es decir, puedes tener hasta 256 grados de transparencia en una imagen, que van desde opaco hasta completamente transparente.)

```json { "trancreatedText": [ "Abrir o crear una imagen que contenga transparencia,\ny elegir Archivo > Guardar para web.
En el cuadro de diálogo Guardar para web, seleccionar GIF, PNG‑8 o\nPNG‑24 como formato de optimización.
Seleccione Transparencia.
Para los formatos GIF y PNG‑8, especifica cómo tratar los píxeles parcialmente transparentes de la imagen original. Puedes fusionar estos píxeles con un color mate o puedes crear transparencia de bordes duros.

Creación de una imagen GIF o PNG mate

Cuando conoces el color de fondo de la página web en la que se mostrará una imagen, puedes usar la función de mate para rellenar o fusionar píxeles transparentes con un color de mate que coincida con el fondo de la página web.

Abrir o crear una imagen que contenga transparencia,\ny elegir Archivo > Guardar para web.
En el cuadro de diálogo Guardar para web, seleccionar GIF, PNG‑8 o\nPNG‑24 como formato de optimización.
Para los formatos GIF y PNG-8, realice una de las acciones siguientes:
  • Para mantener los píxeles completamente transparentes como transparentes y fusionar los píxeles parcialmente transparentes con el color de halos, selecciona Transparencia. Esta opción evita el efecto de halos que ves cuando colocas una imagen suavizada en un fondo de página web que difiere del fondo de la imagen. Esta opción también evita los bordes dentados de la transparencia de bordes duros.

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

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

  • Blanco, Negro u Otro (para seleccionar un color usando el selector de color)

Crear transparencia de bordes duros en un archivo GIF o PNG‑8

Usa transparencia de bordes duros cuando no conozcas el color de fondo de una página web, o cuando el fondo de la página web contenga una textura o motivo. Sin embargo, ten en cuenta que la transparencia de bordes duros puede causar bordes dentados en la imagen.

Abrir o crear una imagen que contenga transparencia,\ny elegir Archivo > Guardar para web.
En el cuadro de diálogo Guardar para web, seleccionar GIF o PNG‑8 como\nformato de optimización.
Seleccione Transparencia.
Seleccione Ninguno en el menú Mate.

Crear una imagen JPEG mate

Aunque el formato JPEG no admite transparencia, puedes especificar un color mate para simular la apariencia de transparencia en la imagen original. El color mate rellena los píxeles totalmente transparentes y se fusiona con los píxeles parcialmente transparentes. Cuando colocas el JPEG en una página web con un fondo que coincida con el color mate, la imagen parece fusionarse con el fondo.

Abrir o crear una imagen que contenga transparencia,\ny elegir Archivo > Guardar para web.
En el cuadro de diálogo Guardar para web, seleccionar JPEG como formato de optimización." ] } ```
Selecciona un color en el menú Mate: Ninguno, Color del Cuentagotas (para usar el color en el cuadro de muestra del cuentagotas), Blanco, Negro u Otro (para seleccionar un color usando el Selector de color).

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