Aprende a mostrar tus productos con animaciones GIF siguiendo está fácil guía.
Debido a que los clientes no pueden examinar el producto con sus manos, es sumamente importante el proporcionarles una amplia variedad de imágenes de calidad y vídeos que muestren las características del producto.
Una experiencia visual llamativa permitirá a los clientes entender exactamente lo que están comprando y ayudará a incrementar sustancialmente su confianza en tu empresa, y por consecuencia, en la calidad del servicio al cliente.
El producir vídeos puede llegar a ser una tarea tediosa y que toma mucho tiempo. En todo caso, existen otras opciones que permiten mostrar un producto en un marco visual en movimiento como el caso de las animaciones GIF.
El GIF es un archivo comprimido que combina múltiples imágenes estáticas en una animación de secuencia corta. Son ideales para mostrar varios ángulos de un producto. De esta manera el cliente tendrá un ángulo de 360 grados inclusive para apreciar el producto. El promover además tus productos mediante este formato en redes sociales puede ayudarte a ganar seguidores. Es muy llamativo y da confianza.
Sigue estos sencillos pasos a continuación y crea tu propio GIF con tus productos. ¿Empezamos?
1. Crea una carpeta con las imágenes que usarás
Crea una nueva carpeta con el nombre “carpeta GIF”. Selecciona todas las imágenes que quisieras incluir en la animación GIF y pégalas en la carpeta.
Estas son las ocho imágenes que se utilizarán para crear nuestro GIF del ejemplo.
Para este tutorial crearemos una animación GIF de un zapato de mujer con ocho imágenes. Añadimos las ocho imágenes a la carpeta que hemos creado. Una vez combinadas las imágenes proveerán un ángulo de 360 grados del producto. Es un excelente método para mostrar zapatos. Si necesitas más información sobre cómo crear imágenes de producto de calzado favor mira nuestra guía sobre como optimizar tus fichas de producto de zapatos.
2. Abre tus archivos en Photoshop.
Para hacer esto, selecciona File > Scripts > Load Files into Stack. Una ventana pop up aparecerá y te permitirá elegir la carpeta GIF que has creado en el paso 1. Haz clic en Browse para seleccionar, abre tus imágenes y haz clic en OK. Photoshop creará una nueva carpeta con todas tus imágenes en capas, una sobre otra.
Esta es la ventana que se desplegará cuando abras tus archivos.
Asi se verán tus imágenes en capas.
3. Ordenar las capas en Photoshop.
Las recién creadas capas deben de ordenarse en orden numérico de acorde a la secuencia correcta de las imágenes, siguiendo las manecillas de un reloj. No importa si los nombres o números no coinciden en los archivos originales. Es importante que la secuencia tenga sentido y las imágenes estén alineadas, sin saltarse ningún cuadro de ésta.
4. Crea marcos en la paleta de animación.
Selecciona Window > Animation (o Window > Timeline dependiendo de tu versión de Photoshop) para abrir la paleta de animación y hacer que aparezca la ventana de animación en la parte inferior de tu pantalla.
Asi se ve la ventana con la secuencia de cuadros de imágenes. En rojo indicados el menú desplegable de cuadros, y el ícono de Time vs Timeline Frame.
Haz clic en el menú desplegable superior derecho y selecciona Make Frames From Layers. A este punto, sería prudente que te asegures que la animación está en modo Frame view, en lugar de Timeline view, haciendo clic el ícono más abajo de todo, de lado derecho. Dependiendo del orden de los cuadros que veas y el orden que deseas de las imágenes para aparecer en el GIF, entonces necesitarás aplicar la función Reserve Frames utilizando el menú de la esquina superior derecha.
5. Cambiar la duración de cada cuadro.
En el menú superior de lado derecho, haz clic en Select All Frames. Para ajustar la duración de tiempo en todos los cuadros de la animación, anda a la parte interior de uno de los cuadros de imágenes y haz clic en el menú desplegable para ajustar la velocidad de la secuencia, o elige Other si lo que quieres es personalizar la velocidad.
En rojo se ve señalado el menú desplegable que se usa para modificar la duración y repetición de la animación.
Cada cuadro de imagen puedes modificarse individualmente, así que puedes si prefieres ajustar el tiempo uno por uno, y así si lo deseas, uno de los cuadros de la secuencia aparecerá más tiempo, y otro menos. Otra manera de hacerlo, es elegir el mismo tiempo de visibilidad para cada cuadro, y de esa manera casi no se notará el cambio de cuadro a cuadro.
6. Ajusta el número de veces que el GIF se verá.
Debajo del primer cuadro, en la esquina inferior izquierda de tu paleta de animación, existe la opción de ajustar cuantas veces correrá la secuencia de imágenes una vez que des al botón Play. Recomendamos que sean muchas veces, que sea una animación continua, para que tus clientes puedan observar el producto continuamente. Ellos siempre pueden igualmente parar la animación en todo caso.
7. Guarda el GIF.
Ahora que ya tienes todos los cuadros de secuencia ordenados, y con una duración pre-establecida, es momento de guardar el archivo GIF. Para esto debes de elegir la opción File > Save For Web & Devices.
Este es el menú para guardar la animación especialmente para web. ¡Asegúrate de revisar todos los ajustes!
Asegúrate de que los ajustes en la pantalla Save están hechos a tu gusto. Luego debes de hacer clic en Save para seleccionar la carpeta GIF que creaste en el paso 1.
8. Testea la animación.
Ahora que has creado la animación GIF, es momento de probar como se ve. Arrastra tu archivo creado recientemente con la animación hasta el navegador que utilices, o dale al botón derecho del mouse sobre el archivo y elige Open With > a seguir del nombre del navegador de tu preferencia.
Esta es la animación terminada del zapato de mujer del ejemplo. ¿Qué bien se ve no?
Si has hecho ya una prueba, y la animación se ve correctamente, entonces has terminado ya. Ahora toca que lo incluyas en tu web y permitas a tus clientes disfrutar de la animación ¡y apreciar tus productos al máximo!