Creación de gif con fondo transparente (utilizado como animación de carga)

Como dice mi título, mi objetivo es crear un gif con un fondo transparente. He creado una animación dentro de After Effects. Debido a que no existe la posibilidad de exportar como gif con ese tipo de fondo, lo exporto como una secuencia png y luego vuelvo a fusionar todas las imágenes en Photoshop. Finalmente, puedo exportarlo como un gif con un fondo transparente. Ahora, si lo hago, el gif tiene un fondo transparente pero la animación está rodeada por un trazo blanco y es una especie de pixelado. ¿Alguien tiene una idea de cómo solucionar esto o tal vez otra posible solución para mí? También son posibles otros formatos de archivo además de gif como svg, etc. Al final, esta animación se utilizará como una animación de carga para la web.

Ya lo exporté en muchos formatos de archivo que permiten un canal alfa, pero aún no tuve éxito. Algo que quiero decir sobre la resolución pixelada. Claro que puede ser la resolución pequeña pero, por otro lado, ¿por qué entonces es de alta resolución con un fondo de color?

Imagen del Problema

Saludos Yannick

Respuestas (3)

Si lo vas a utilizar sobre un fondo negro, pon un fondo negro en primer lugar.

Ese borde es el resultado del suavizado, que hace que algunos píxeles tengan un tono medio entre dos colores. Azul-blanco o amarillo-blanco.

Imagen que muestra el suavizado

Un gif transparente solo puede hacer que 1 color sea transparente, este es "el blanco puro". Los píxeles "no tan blancos" no son transparentes en absoluto.

Desafortunadamente, los GIF no son compatibles con la transparencia alfa. No hay manera de arreglar esto realmente. Los GIF solo admiten píxeles completamente transparentes o completamente opacos, sin nada en el medio. Básicamente, la utilidad del formato para su caso de uso particular dependerá completamente del fondo en el que lo coloque.

Si el fondo es de un solo color, o casi de un solo color, puede usar la opción "Mate" para cambiar el color de los píxeles exteriores (el mate), de modo que cuando el GIF se coloque sobre una imagen de fondo, debe mezclarse con el fondo. Obviamente, necesita saber cuál será el color de fondo para que esto tenga la posibilidad de funcionar.

Puede encontrar esta característica en Archivo > Exportar > Guardar para Web (heredado) , cuando elige GIF como formato de salida. Obviamente, cada cuadro GIF también debe tener transparencia para que funcione.

Este es un ejemplo del cuadro de diálogo Guardar para Web con el conjunto Mate en negro. En la ventana de imagen optimizada, puede ver cómo le da al GIF un contorno negro en lugar de un contorno blanco.

ingrese la descripción de la imagen aquí

¡Gracias por tu ayuda Billy! ¿Hay alguna posibilidad de exportar lo mismo en otro formato de archivo como svg, etc.?
@BeatB Si desea que sea SVG animado, puede hacerlo usando algo llamado Lottie, un poco complejo. Pero también hay otros formatos como WebM que me gusta usar en lugar de GIF.

En Photoshop hay una configuración de Exportación llamada Mate si la ve en Ninguno , eliminará el extraño contorno en blanco y negro, PERO se verá pixelado .ingrese la descripción de la imagen aquí

Pero si ya sabe de qué color será el fondo en el sitio web, puede establecer su propio color de contorno para que no se vea pixelado y se mezcle con el color de fondo.

ingrese la descripción de la imagen aquí

Creación de gif con fondo transparente (utilizado como animación de carga)
RespuestasAquíPolítica de privacidad1y, 0v