de gifs y transparencia

publicado el 2018-08-08


pues que me quiero hacer un gif animado para la página, y que me encuentro con varios problemas a resolver…

pepepépepe me entrega las ilustraciones en vectores en inkscape, lo cual implica que puedo manipular el tamaño libremente y que además puedo exportar imágenes png con transparencia.

hice una versión de la imagen de la cabecera, la del signo de interrogación, pero sin signo, para alternarlo con la otra y tener una animación algo graciosa.

imagen de rata panchis con signo de interrogación

imagen con signo

imagen de rata panchis sin signo de interrogación

imagen sin signo

en un directorio tenía rata1.png, la imagen con el signo, y rata2.png, la imagen sin él. en inkscape me aseguré de que estuvieran alineadas. dupliqué en la terminal la segunda para que durara más tiempo (seguro hay forma de elegir la duración de cada frame, pero no la investigué) :

$ cp rata2.png rata3.png

y luego apliqué el comando que normalmente uso de imagemagick en la terminal para generar un gif a partir de una serie de frames:

$ convert -delay 50 -loop 0 *png rata.gif

(usa un tiempo de 50 centésimas de segundo por frame, repite por siempre, toma todas las imágenes png del directorio y unélas en rata.gif)

el resultado fue una imagen que no se movía, además de algo pixeleada.

investigando un poco, vi que se trataba de que por defecto las frames de la animación se quedan presentes, y hay que borrarlas explícitamente. esto cambió el comando a

$ convert -delay 50 -loop 0 -dispose previous *png rata.gif

ahora sí había animación, pero pixeleada (o con “efectos de aliasing”, como al parecer se dice)

animación de rata panchis con el signo de interrogación apareciendo, pero pixeleada

animación relativamente fallida

estuve haciendo pruebas de cambiar el tamaño ya sea desde inkscape o imagemagick, pero me di cuenta que no era eso porque antes de convertirlas a animación, la imagen se veía bien.

el asunto o la conclusión de todo esto es que los gifs animados no permiten una transparencia en gradiente, solo es binaria (on u off).

los efectos de “anti-aliasing” que generaban los dos programas para suavizar los bordes, al final no funcionaban porque dependían de una transparencia parcial.

algunas propuestas decían que se podían aplicar ciertos filtros para que no se notara tanto… lo que decidí hacer fue ahorrarme el problema y exportar las frames con el fondo que tengo en la página. esperando que así se quede un rato…

animación con bordes suaves

animación con bordes suaves