Cómo diseñar un banner animado para Google Ads con Photoshop

Una de las opciones que las campañas de Google Ads nos ofrece para conseguir visibilidad, notoriedad y conocimiento de marca a los usuarios es la Publicidad en formato Display. Con la Red Display, a diferencia de la de Búsqueda, podremos crear anuncios con imágenes o vídeos con los que podemos conseguir un mayor impacto.

Tras hablar sobre el editor de informes de Google Ads, queremos detenernos en este post en los banners. Uno de los formatos más conocidos y estandarizados dentro de la Red Display son los banners, tanto estáticos como animados. Por eso, hoy os enseñamos cómo diseñar un banner animado para Google Ads con el programa Adobe Photoshop.  ¡Empezamos!

Ordena los ingredientes

El proceso del diseño gráfico a menudo puede compararse con el proceso de elaborar una exquisita receta. Necesitamos los ingredientes que nos sirvan tanto para elaborar la pieza como para inspirarnos y escoger el camino gráfico adecuado.

En este caso, los ingredientes serán todo el material gráfico que nos facilite el cliente: el logotipo vectorizado, la tipografía y colores corporativos, imágenes, ilustraciones…
Idealmente, el Manual de Marca suele ser el pack de ingredientes esenciales para no fallar en el diseño. Por desgracia, no todos cuentan con un manual con el que trabajar… En ese caso, un buen recurso sería “conformarnos” con el logotipo como la pista primordial que nos indique “por dónde tirar”. 

Una buena fuente de inspiración y de material gráfico es la página web del cliente, ya que así podemos descubrir el lenguaje visual que estamos buscando en un entorno digital.

Planifica la animación

Una vez hemos recopilado toda la información necesaria, llega el paso de pensar en la animación. Este paso consiste simplemente en esquematizar de forma breve el orden de los frames y el contenido de cada uno de ellos para comprobar que definitivamente explica la propuesta de valor con un orden y coherencia.

En este paso, el briefing puede ser de gran ayuda para saber aspectos básicos como el servicio que queremos promocionar, el objetivo principal y el discurso a seguir, entre otros.

Es importante ser claro y directo, con la mínima cantidad de texto posible y orientado al CTA (call to action) final – el botón que indica la acción a realizar por parte del usuario — .

¿No sabes como crear una animación desde Photoshop? Simplemente activa la ventana de Línea de Tiempo de Photoshop para ver el orden de frames y la duración de cada uno de ellos. Recuerda que en las opciones de repetición, deberemos marcar la opción “2 veces”.

El máster: 336×280

Nuestra recomendación es empezar con un primer banner de 336×280 píxeles. Acostumbra a ser el de mayor peso y el más fácil de trasladar al resto de tamaños. 

Una vez aprobado este primer tamaño por parte del cliente, podremos adaptarlo al resto de tamaños admisibles. Recomendamos crear un set de 7 banners, suficientes para aparecer en un volumen considerable de ubicaciones dentro de la Red Display, según el espacio disponible.

No es necesario crear espectaculares transiciones de frames que aumenten el peso final del archivo. Tres frames principales y una pequeña transición inicial pueden ser una solución para darle vida al banner sin excedernos.

Un consejo: empieza por el final

Puesto que la diapositiva final será la que finalmente quede fija una vez el banner haya finalizado su animación, a veces resulta mucho más cómodo empezar por el último frame, especialmente cuando no tenemos ni idea de por dónde empezar. 

La fobia de la página en blanco será mucho menos duradera mediante este proceso, cuando ya tengamos definido el botón de acción, los colores corporativos, el claim, el logo y la imagen final. El resto de frames vendrán prácticamente solos para darle un sentido a la imagen final.

Una cuestión de tiempo y peso

Puesto que queremos ser claros, breves y directos no podemos alargar la duración del banner mucho tiempo. De hecho, la Red de Display nos obliga a no superar los 30 segundos.

También a nivel de peso de formato, no podemos excedernos de lo 150kb. De ahí que la sencillez y la brevedad tanto en el contenido como en el tratamiento de las animaciones sea tan importante.

Para poder ver estos dos parámetros, podemos comprobarlos haciendo clic en Guardar para Web dentro del programa de Photoshop.

En el panel de Guardar para Web, seleccionamos el formato .GIF y comprobamos en la segunda copia que realmente estamos cumpliendo con el tiempo y el peso del archivo. En caso de superar estos dos parámetros, podemos reducir la calidad en la opción “Menos calidad”.

¡Hacemos clic en Guardar y listo!

Ahora que ya sabes cómo diseñar un banner para Google Ads, podrás ganar en visibilidad con anuncios atractivos que conecten con tu público objetivo.

Y recuerda: lo breve, si bueno, dos veces bueno.

También recuerda comparar el rendimiento de Google Ads, Facebook Ads y el resto de redes y plataformas como YouTube TrueView Ads, puede ayudarte a decidir cuál es la mejor plataforma para tus objetivos publicitarios y maximizar el impacto de tus banners.

Si tienes cualquier otra pregunta, en GO2JUMP somos expertos certificados en Google Ads. Te ayudaremos en lo que necesites.