comments 2

Da un toque de creatividad a tus proyectos web con un GIF animado

Como diseñadores, como emprendedores, no podemos permitirnos caer en el error de no probar. De no intentar ir más allá. No podemos tener miedo a ser creativos.
Hay un pensamiento que siempre va conmigo y que intento poner en práctica cuando tengo ese sentimiento de estar acomodado en mis diseños, cuando no arriesgo.
Y es: “si te acomodas estás muerto” o algo así.

Y este es el caso de este post. La idea es utilizar un elemento animado como un gif para darle otra dimensión, un nuevo enfoque a un call to action e intentar obtener más conversiones.
Y cuando hablo de gif animado, no me refiero a Chiquito de la Calzada haciendo el ‘No Puedor’.
Sino a algo mucho más sutil, que potencie nuestro mensaje y que ayude a nuestro diseño, como este:

Gif animado en un proyecto web

Gif animado en un proyecto web

Creando un gif animado en Photoshop

Hace no mucho tiempo, mi principal herramienta de trabajo era Photoshop.
Interfaces de aplicaciones, maquetas web, wireframes, mockups,etc. Todo, lo hacía en Photoshop.
Hasta que aparecieron herramientas más especializadas como Sketch para el diseño de interfaces, y hasta que comencé a usar en serio Adobe Illustrator. Hoy día apenas uso bitmaps, solo vectores.

Si conoces a muchos diseñadores de interfaces o si eres uno de ellos, ya sabrás que hay poco más que una Guerra Santa por ver qué herramienta es mejor para diseñar interfaces. Yo creo que la mejor herramienta es con la que más productivo te sientas. Sea cual sea.

En mi caso, Photoshop solo lo utilizo para editar alguna imagen, para dar el último toque de un interfaz, para algún montaje o retoque… y para hacer gif animados.

Por cierto, para animar interfaces y mostrarlo a los equipos de desarrollo o a los clientes no utilizo Photoshop, aunque lo podría utilizar con la herramienta que vamos a ver a continuación. Prefiero realizarlas con Adobe After Effects. Pero ya veremos en próximos posts como realizar animaciones complejas de interfaces de usuarios, y videos comerciales para tus apps o productos.

El ejercicio.

Para que tenga más interés el artículo, y no se quede solo en la técnica de cómo realizar una animación y crear un gif, vamos a añadir una composición para trabajar.
Un mockup que bien podría servir para desarrollar una cabecera de una landing page, o de un boletín de correo, o un baner publicitario.

Antes de comenzar, lo importante es indicar que esto es una guía que no debes seguir al pie de la letra. Intenta experimentar con otras cosas, otras imágenes, otra composición,etc y mostrar tus resultados en los comentarios.

Preparando la composición

La versión actual de Adobe Photoshop en Creative Cloud es la CC 2014. Si utilizas versiones anteriores probablemente encuentres diferencias.

– Creamos un documento nuevo en Photoshop, de por ejemplo, 1200 x 600 px y fondo blanco.

Creamos un nuevo documento en Photoshop

Creamos un nuevo documento en Photoshop

– Añadimos una imagen de fondo para nuestra composición. En este caso, he obtenido una imagen del portal Unsplash, que nos recomendó Álvaro Bernal en los comentarios de este post.

Añadiendo una imagen de fondo.

Añadiendo una imagen de fondo.

– La imagen que he usado para fondo la puedes descargar aquí

– Para recortar y colocar la imagen, y para analizar la relación con el copy que vamos a usar, nos vamos a basar en la Regla de los Tercios la cual se basa en ordenar los elementos de una composición en base a unos ejes en cuyos puntos de intersección se encuentran los puntos de atención del usuario.

– Para poder utilizar nuestros ejes debemos crear una cuadrícula. Para ello, en Preferencias> Guías, cuadros, sectores, configuramos una cuadrícula, con una línea cada 33,33%. Lo que viene siendo un tercio.

Menu de guias para cuadricula.

Menu de guias para cuadricula.

Configurando la cuadricula.

Configurando la cuadricula.

Para visualizarla y ocultarla, vamos al menú Vista > Mostrar > Cuadrícula o Cmd+’ en Mac.

Mostrando la cuadrícula.

Mostrando la cuadrícula.

– Basándome en la cuadrícula, he colocado la figura de la chica en uno de los puntos de intersección, y he realizado el recorte.

Moviendo el fondo y haciendo el recorte.

Moviendo el fondo y haciendo el recorte.

– Para equilibrar la composición, y como voy a colocar un call to action, qué mejor lugar que el punto de intersección contrario.
En este caso voy a crear un botón y para ello he utilizado un rectángulo de bordes redondeados, sin relleno, con borde blanco de 2 pixeles, y radio de curvatura de 5 px. Tal y como puedes ver en la imagen.
Para el texto del botón he utilizado un simple y escueto “Entra”.
Para la fuente del botón he usado Avenir Bold en mayúscula. He intentado que sea prominente, porque al fin y al cabo es el elemento que vamos a animar.

Creando un botón.

Creando un botón.

Botón creado.

Botón creado.

– Para el copy vamos a utilizar un mensaje directo, que potencie el call to action. Un mensaje dirigido al sector femenino, al sentido de la individualidad de la mujer, que creo tiene bastante sentido con la imagen que hemos elegido.
Para el copy vamos a usar las fuentes Voyage Font y Frontage Font, las cuales potencian nuestro diseño hacia el público que hemos elegido en este ejemplo.

Insertando el copy y finalizando la composición.

Insertando el copy y finalizando la composición.

Creando el gif:

Una vez preparado el entorno es hora de ponernos con la animación.
Lo que queremos hacer es llamar la atención al call to action, haciendo que la palabra entra, aparezca y desaparezca. Como si de un letrero luminoso se tratara. Algo sutil.

Lo primero es mostrar la ventana de linea de tiempo. Para ello vamos al menú Ventana > Línea de tiempo, y se nos mostrará por defecto en la parte inferior.

Mostrandola ventana de linea de tiempo.

Mostrandola ventana de linea de tiempo.

La linea de tiempo tiene dos opciones: crear una película, como si de Adobe Premiere se tratara, o crear animación de cuadros, que es la que usaremos. Así que la seleccionamos del desplegable y la pulsamos en el botón.

Seleccionamos la opción de crear animación de cuadros.

Seleccionamos la opción de crear animación de cuadros.

Lo que muestra la línea de tiempo es una serie de fotogramas que, uno detrás de otro, realizarán la animación. Lo bueno es que para esto, solo necesitamos un psd. No tenemos que montar un archivo con varios psd.

Nuestra animación completa básicamente se basa en jugar con la opacidad o transparencia de la capa de texto ENTRA. Partimos de una opacidad al 100%, y vamos a crear fotogramas con una secuencia de 10% de opacidad menos. Cuando llegue a 0, volvemos a hacer lo contrario, y ascenderemos de 10 en 10 la opacidad hasta llegar al 100%. Algo muy sencillo.

Creando un nuevo fotograma.

Creando un nuevo fotograma.

Para crear los fotogramas, primero lo creamos pulsando el icono de nuevo de la parte inferior de la línea del tiempo, y luego fijamos la nueva opacidad de la capa de texto en nuestro panel de capas.
En la parte inferior de la linea del tiempo, tenemos un reproductor, donde podemos visualizar aproximadamente como quedará nuestro gif.

Opacidad al 0%.

Opacidad al 0%.

Todos los fotogramas.

Todos los fotogramas.

Una vez terminados los 21 fotogramas, ya podemos salvar nuestro archivo como un gif.
Para ello elegimos el menú Archivo > guardar para web. En el menú de guardar elegimos el tipo de archivo como GIF, y en la parte inferior, en opciones de repetición, seleccionamos Infinito para que la reproducción no se detenga y se inicie una y otra vez.

Guardando para web.

Guardando para web.

Recuerda que puedes visualizar tu gif abriendo el archivo en cualquier navegador web.

Conclusión:

Y esto ha sido todo ¿Qué te ha parecido el artículo? ¿Qué usos se te ocurren para realizar un gif animado? ¿Qué animación habrías realizado tu?

Post relacionados:
5 lugares para descargar imágenes gratis.
Diseño web: color de un call to action

2 Comentarios

  1. luis_aledo

    Muy buen artículo. Este tipo de recursos siempre te pueden dar un punto extra al diseño sin llegar a despistar al usuario.

    Como anotación a la guía que has preparado, añadiría la utilización de la función “animación entre frames” es un icono que se muestra en la parte inferior de la línea del tiempo con varios círculos con distinta transparencia.

    En el caso que explicas, no es necesario hacer los 21 fotogramas, sería suficiente hacer el primer con la opacidad al 100% y el último al 0%. Una vez que tengas los dos fotogramas, los seleccionas con el control o cmd pulsado y le das al icono de los círculos. En ese momento te saldrá una ventana donde le dirás el número de fotogramas que quieras para la transición y el tipo de transición (movimiento, transparencia…) esta manera nos permite ganar tiempo y perfección.

    Te recomiendo que la pruebes y veras que fácil es.

    Saludos y felicidades por estos artículos.

  2. FranciscoJGallardo

    Gracias por el comentario Luis y por el valioso aporte!
    Probado, y comprobado. Sin duda, mucho más eficiente y rápido.
    Un saludo!

Leave a Reply