¿Cómo hacer animaciones de calidad PNG en formato GIF?

He notado que cada vez más sitios usan GIF animados que tienen calidad PNG. Pensarías que son los últimos si no revisaste la información de la imagen. Las líneas son nítidas, los colores se ven geniales, no hay esa granulosidad leve pero aún perceptible que tienen los GIF. ¿Cómo está logrando eso la gente? No soy diseñador gráfico, pero tengo curiosidad y me gustaría crear GIF animados que no tengan una pérdida de calidad reconocible en comparación con los GIF. (Uso GIMP pero tengo acceso a Photoshop, si es necesario).

ACTUALIZACIÓN: He aquí un ejemplo. http://codyhouse.co/gem/smart-fixed-navigation/

¿Estás seguro de que son gifs? Puede animar PNG a través de jQuery o javascript.
Sí, verifiqué las extensiones de archivo.

Respuestas (2)

Creo que los gifs animados son buenos beneficiarios del diseño plano. Si tiene un número limitado de colores y no usa degradados, no necesita usar patrones difuminados.

Estamos acostumbrados a ver estos patrones porque mucha gente usa segmentos de video reales como avatares, etc. Pero en este caso solo tienes algunos colores, digamos 20 y tienes a tu disposición 235 colores adicionales para que la apariencia sea suave.

Aquí está la paleta utilizada en ese gif en particular.

una paleta de colores

Reorganicé la paleta, para que puedas notar los colores más saturados y la amplia gama de colores suaves que forman la parte con alias de las formas y las sombras.

La otra cosa es la alta velocidad de fotogramas. Ese ejemplo tiene una velocidad de fotogramas de 375 fotogramas en aproximadamente 11-12 segundos, lo que significa que la velocidad de fotogramas es como 30 fps, lo mismo que un video normal.

Para preparar un buen paladar:

Los principios son los mismos independientemente del programa que utilice.

1) Coloque todos los elementos que usa en toda la animación en un lienzo. Convierta este lienzo en una imagen de 8 bits, sin tramado, con una paleta optimizada o adaptativa.

2) Si no obtiene un color específico, por ejemplo, un rojo limpio para el puntito, haga esa forma más grande, para que el programa le dé más importancia a esa parte de la paleta de colores.

3) Extraiga esa paleta y fuerce su animación original para usar esa paleta controlada.

Una forma de organizar objetos para extraer una paleta común.

Editado.

Probablemente el mejor programa para hacer este tipo de animación es After Effects y Flash, que puede exportarlo directamente a un gif animado. (Por supuesto, se puede usar otro software de animación)

Pero estoy publicando algunos programas gratuitos (win) que pueden lograr resultados similares, pero con algunos pasos adicionales.

La animación

http://vectorian.com/ Este es un software gratuito para Windows similar a Flash. Pero como solo se puede guardar en un archivo swf, necesitamos una herramienta adicional: http://www.pizzinini.net/projects/swf2avi/ Y exportar una secuencia de archivos bmp.

Y, con los materiales adecuados, podemos usar http://www.blender.org/ para lograr colores planos.

Un paso intermedio. Convertir a vídeo

Puede usar archivos individuales para hacer una animación en capas en gimp o photoshop. Pero puede automatizar el proceso transformándolos en un video si tiene muchos cuadros.

Puede usar http://www.virtualdub.org/

La conversión a gif

Hay un abandonware que probablemente puedas encontrar en Microsoft Gif Animator, muy útil y que puede convertir de avi a gif, con la opción de no aplicar interpolación.

Pero existen varios programas gratuitos para convertir de video a gif. No los he probado correctamente, así que no estoy haciendo ninguna recomendación todavía.

Voy a publicar algunos después de algunas pruebas.

Photop Paint de Corel puede procesar un archivo avi en gif animado directamente.

Gracias. Estoy de acuerdo, el diseño plano es naturalmente adecuado para hacer GIF animados. Traté de hacer un gráfico de barras de color plano animado simple (barras azules, ejes negros) con un título de gráfico, pero el texto salió con bordes granulados y el color de la barra parecía un tono de azul ligeramente diferente. Por otro lado, este GIF (del mismo artista nada menos) usa colores superpuestos, texto, todo el tinglado y Dios, se ve hermoso. dribbble.com/shots/1541960-Med-Use
¿Qué quieres decir con poner todos los elementos en un lienzo? Ya que uso GIMP, ¿eso se refiere a una capa? ¿Cómo usaría esos elementos para crear la animación final?
Permítanme preparar un ejemplo más detallado.
Un detalle más a tener en cuenta es que cada cuadro en una animación GIF puede tener su propia paleta de 256 colores por separado. Una forma de hacer uso de esa función es que, si el esquema de color en su animación cambia a la mitad, como en la animación de ejemplo vinculada anteriormente, puede preparar los segmentos de la animación por separado y luego unirlos usando un procesador GIF como GIFsicle .
También tenga en cuenta que una velocidad de fotogramas de 30 fps es lo suficientemente alta como para que al menos algunas versiones de IE no ejecuten esa animación a la velocidad prevista . Puede que no importe mucho en este caso, pero si necesita garantizar una velocidad de animación constante entre los navegadores, la velocidad de fotogramas segura más alta parece ser 16,67 fps (= 60 ms de retraso de fotogramas).

Para los colores, no podemos hacer nada excepto limitar ~256 colores.

Pero para los bordes pixelados puedes:

Hágalo en @3x y reutilícelo en @1x en HTML

¿Cómo hacer animaciones de calidad PNG en formato GIF?
RespuestasAquíPolítica de privacidad1y, 0v