¿Crear gifs cristalinos para la web?

Estamos en medio de un rediseño y, dado que ahora tenemos tableros de mejor apariencia, nos gustaría utilizar algunos gifs que los muestren en uso. El problema es que cada vez que guardo un gif en Photoshop, aparece pixelado y borroso .

ejemplo gif animado optimizado

Me preguntaba qué podría estar haciendo mal aquí. Estos se hicieron con todo el arte vectorial, por lo que no creo que el tamaño debería haber sido un problema. No se redimensionaron en PS, solo se redimensionaron en AI.

Estoy buscando un resultado similar a este . La sección que estoy viendo se encuentra principalmente en la sección "descripción general". Entiendo que este ejemplo es un video HTML, pero he visto ejemplos usando gifs simples. ¿Sería mi mejor apuesta usar videos HTML5 en su lugar y olvidarme de los gifs por completo?

¡Gracias por la información!

Como ya sabrá, los GIF admiten 256 colores, lo que significa que no podría obtener un mejor resultado con degradados y fotos en color verdadero. tienes que optimizar tus imágenes para manejar 256 colores. El buen ejemplo que llevaste 1. es una ilustración de color limitado 2. las imágenes son .jpg que pueden manejar millones de colores.
Gracias por la sugerencia, solo para aclarar sus puntos, para 1. la parte de la que estoy hablando está en la "sección de descripción general" hay un video, que supongo que es un video html 5
ok, el video es un video .mp4 que también admite millones de colores. si desea mejorar su calidad, cambie su salida a .mp4
Parece que esa es mi mejor opción, tapar la pantalla del tablero y luego convertirlo a video mp4. ¡Gracias por la ayuda!
Edite su pregunta para decir que la parte a la que se refiere es la sección de descripción general , preferiblemente con capturas de pantalla también, de modo que si ese sitio deja de funcionar, esta puede ser una pregunta útil para otros.
Ese gif es de 1,3 MB (por ejemplo, es enorme), este formato podría no ser el más adecuado para lo que quieres hacer y también estás perdiendo calidad.

Respuestas (1)

Las cosas que no son geniales para una salida gif son las partes que tienen

  • Fotos.

  • Imágenes degradadas, como los peces, los gráficos.

  • Gradientes como los botones tienen.

Entonces tu paleta está siendo devorada por esos.

El uso actual de moda de los gifs se debe al diseño "plano". El otro ejemplo que publicaste es plano.

En tu caso particular (si no puedes eliminar esos elementos) un solo gif no es la mejor opción.

Si tiene un diseño plano suficiente, lo siguiente es exportar sin degradado (tramado). Esto también reduce el tamaño del archivo.


Una alternativa probablemente sea usar una serie de jpg y animar y luego usar CSS.