Google Web Designer: El recurso con el que dar más difusión a tus proyectos

Google Web Designer es una herramienta que el gigante buscador pone a nuestra entera disposición; con ella podemos crear todo tipo de anuncios de carácter avanzado. En ellos podremos añadir desde animaciones, efectos en 2D o en 3D y es compatible con las páginas webs de última generación HTML5 y con hojas de estilo CSS3. En un primer momento podemos llegar a pensar que su único uso es ayudar a crear un diseño publicitario atractivo, pero también tiene otras funciones como, por ejemplo, ayudarnos a animar una imagen en nuestro blog. ¿Y sabes lo mejor de todo? Que no tendremos que ser expertos en diseño gráfico, publicitario, o en programación HTML5/CSS3, ya que Google Web Designer pone a nuestra disposición toda una serie de herramientas, y un entorno intuitivo, mediante el cual podremos empezar a trabajar desde ya mismo.

Tutorial básico para crear y editar banners para Display

1) Lo primero que tenemos que hacer, lógicamente, es descargar el programa. Esto lo podemos hacer de una forma completamente gratuita a través de la plataforma de la web https://www.google.com/webdesigner/. Sin embargo, recuerda que todavía está en su versión de pruebas, por lo que algunas funciones todavía serán mejoradas. Es compatible a partir del sistema Windows 7, Mac a partir de la versión del sistema operativo 10.7 y para Linux en ediciones Ubuntu, Debian o Fedora.

2) Ahora que ya lo tenemos descargado e instalado, vamos a empezar: nada más abrir el programa, este nos preguntará sobre el tipo de archivo que queremos crear; si desde cero, o bien basado en diferentes plantillas. Además, también podremos elegir si queremos que sea un banner tipo HTML5, para Admob, para Adwords, o bien para una interfaz que no tenga que ver con Google. En el caso de que queramos hacer lo último, habrá que pulsar en la opción de “Avanzado”.

3) Ahora vamos a introducir las imágenes que queremos que aparezcan en el banner. La mejor manera de hacerlo para no perder tiempo es agregarlas primeramente a la “biblioteca de recursos” (esta herramienta está en la zona derecha de la interfaz). Consejo: Organiza primero todas las imágenes y luego las arrastras a la biblioteca. De esta manera, siempre que necesites una, no perderás tiempo en buscarla.

4) Vamos a crear un banner en HTML; añadimos la imagen a nuestro lienzo y está se convertirá en el fondo del mismo. La idea es que utilices el panel de propiedades de la derecha para ajustarlo en la posición deseada. Tómate tu tiempo para estudiar todas las opciones que encontrarás en este panel (podrás controlar tanto la posición, el alto y el año, estilo, la vista, la posición en 3D o algunas opciones avanzadas). Importante: En el campo ID podemos ponerle un nombre que identifique al objeto, esto nos servirá más adelante.

5) Si queremos que el banner se anime, entonces habrá que trabajar con lo que se conoce como línea del tiempo. Tiene una regla inicial y es que todos los elementos que vamos a colocar siempre van a funcionar como capas diferentes; usando el botón derecho del ratón, podremos añadir tantos fotogramas como nos hagan falta. Cada uno de esos fotogramas terminará por controlar la animación, por lo que es importante trabajarlos cada uno de manera separada.

6) A lo largo de la animación colocaremos fotogramas clave, que son aquellos fotogramas en dónde se produce algún cambio. Por ejemplo, si queremos hacer que un rombo se mueva de izquierda a derecha, y luego de arriba a abajo, lo más normal es situar un fotograma clave entre estas dos animaciones. Entre el principio de un fotograma clave y su final (cuando empieza uno nuevo) aparecerá una línea de transición que nos indicará que hay movimiento.

7) Marcamos sobre el objeto deseado para elegir la animación que se va a producir en ese intervalo de tiempo; podemos, por ejemplo, cambiar el color, el tamaño, la ubicación, u otras opciones más avanzadas. Por ejemplo, vamos a suponer que colocamos un fotograma clave en el segundo 01:00; aquí colocamos un cuadrado y luego en el segundo 03:00 colocamos el cuadrado en otra posición. Automáticamente en la línea del tiempo se generará un nuevo fotograma clave. Si le damos al play, efectivamente, el objeto se desplazará hasta la ubicación que hemos programado. Esto se puede hacer tanto con imágenes, con textos, así como con cualquier otro recurso multimedia.

8) En todas nuestras animaciones lo más seguro es que queramos añadir un link para poder vender nuestro servicio. Esto lo podemos hacer también desde el panel de componentes. Solamente habrá que marcar en la opción de área para tocar y seleccionamos en el lienzo la zona exacta que queremos que sea un enlace. En las propiedades podremos elegir la URL del mismo, o si queremos que vaya a otra parte de la animación.

9) También podremos personalizar el tipo de evento que se producirá en el momento en el que toquemos la zona exacta: por ejemplo, que se active cuando hacemos click, cuando ponemos el mouse encima, cuando lo quitamos… esto da mucho juego a la hora de hacer animaciones.

10) Una vez que ya tengamos el banner listo, llegará el momento de exportarlo. Para ello lo único que habrá que hacer es marcar en la opción publicar localmente y tendremos toda una gran variedad de opciones para conseguir el banner que buscábamos (por ejemplo, el nombre del archivo, la ubicación, si queremos integrar los archivos .css o .js, si lo queremos comprimir, si queremos añadir el fondo), así como los datos referidos a su tamaño y al número de archivos que se obtendrán.

Una vez que tengamos el archivo listo, llegará el momento de cargarlo en nuestro proyecto web; aquí si que necesitaremos algunos conocimientos sobre código fuente, o bien sobre los diferentes sistemas de plantilla CMS. Y esto es tan solo una pequeña muestra de lo que podemos hacer con Google Web Designer pero, una vez que empieces a trabajar con él, te darás cuenta de que sus posibilidades son casi infinitas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *