Técnicas de diseño para hacer animaciones GIF en PS

Consejos para hacer diseños de animaciones GIF en PS

Hacer una animación GIF parece muy simple, pero si puede verse bien es otra cuestión. Este artículo le enseñará cómo generar y optimizar GIF animados. Si le gusta, desplácese hacia abajo.

En InVision, los GIF animados no son sólo para matar el tiempo. Los GIF animados juegan un papel muy importante en nuestros esfuerzos de marketing y educación. Incluso utilizamos GIF animados en la página de inicio del sitio web, aunque estas animaciones se pueden lograr con código complejo. Entonces, ¿aquí está el problema? ¿Cómo se crean estos GIF animados? Creo que es hora de revelar algunos secretos.

Diseñar un GIF animado

1. El secreto

Este es uno de mis secretos: todos los GIF animados comienzan con un vídeo. Estos videos generalmente se hacen usando ScreenFlow, que uso a menudo para crear algunos videos de productos. Creo que este es un programa muy fácil de dominar y, lo que es más importante, contiene algunas herramientas de animación muy útiles. Después de exportar la animación a formato de vídeo, importa el vídeo a Photoshop (Archivo gt; Importar gt; Fotogramas de vídeo a capas)

Consejo: Si ni ScreenFlow ni After Effect te funcionan, también puedes hacerlo en Keynote Crea animaciones y expórtalas a formato de vídeo.

2. Cuantos menos colores, mejor

Si quieres que tus GIF animados se vean impresionantes, entonces debes prestar especial atención a tus elecciones de color. Esto no solo afecta el tamaño final del archivo, sino que cuantos menos colores utilices, más animaciones podrás incluir en una unidad de volumen, por lo que podrás crear GIF animados lo suficientemente largos manteniendo el tamaño pequeño (para mí, una animación de menos de 1 MB). se considera una animación pequeña)

3.

Tanto ScreenFlow como After Effect pueden exportar animaciones con desenfoque de movimiento. Esto no sólo hace que tu animación luzca más profesional, sino que cuando tienes que eliminar algunos fotogramas porque el GIF es demasiado grande, puedes eliminar algunos fotogramas borrosos sin afectar el efecto.

4. ¿Aprender a ser vago? Optimice sus "animaciones"

¿Imagina lo que pasaría si agregara contenido adicional al Gif animado al comienzo del artículo? Por ejemplo, mostrar el nombre de usuario cuando se mueve el mouse, agregar algunos botones o algo así, o darle al cursor algunos efectos especiales. De hecho, es mejor no mostrar estas cosas, el usuario no necesita ver todas las animaciones interactivas. Entonces, ¿solo muestra la parte que más quieres mostrar? Recuerda, tu tiempo y aforo son limitados.

Exportar animación GIF

Si eres demasiado vago para leer lo siguiente, intenta exportar tu animación GIF. Si no hay ningún problema con el tamaño del archivo, felicidades, puedes hacerlo. hacer otras cosas. Si el archivo es demasiado grande, intentemos los siguientes pasos.

5. Elimina fotogramas duplicados

Muchas veces, tu animación se detendrá en un momento determinado. Si miras de cerca, verás que hay muchos fotogramas repetidos de 0,03 segundos en estos puntos de tiempo. Elimine estos fotogramas duplicados excepto uno y modifique la duración de ese fotograma para que sea más larga, como 1 segundo.

Si los pasos anteriores no son suficientes, vuelva a importar el vídeo, pero esta vez marque "¿Limitar a cada 2 fotogramas?". Esta vez debería reducir significativamente el tamaño de la animación. p> Consejo: esto no es obligatorio, pero si tu GIF supera los 150 fotogramas, será difícil controlar el tamaño del archivo sin hacer esto

6. Reduce los valores de color

Cuando Photoshop guarda su GIF, hay una opción de "Color" a la derecha, intente modificar el valor y vea cómo funciona.

Puedes intentar reducir el valor sin afectar la animación.

7. Ajustar el valor de pérdida.

Para ser honesto, no sé qué significa pérdida. Pero sé que ajustarlo entre 1 y 10 no afectará la calidad de la animación y también reducirá el tamaño en unos pocos bytes.

¿Qué pasa si has probado todos los métodos anteriores y aún no puedes comprimir bien tu GIF? En este punto, debe volver a examinar su animación, si hay demasiado contenido, si existe una mejor manera de lograr el efecto que desea o si puede dividir la animación en partes más pequeñas. Creo que, como la mayoría de los productos creativos, tus GIF funcionarán mejor si te concentras en una cosa. ;