¿Qué es Google Web Designer? Google Web Designer es la nueva aplicación lanzada por la compañía del más famoso buscador online que permite realizar piezas publicitarias web profesionales de manera fácil y sencilla.

2. ÍNDICE
1. Definición: ¿Qué es Google Web Designer?
2. Utilidad: ¿Para qué sirve?
3. Crear un banner: Pasos a seguir.
4. Conclusión

3. 1. Definición
• Aplicación gratuita de Google
que permite la creación de
contenido animado en HTML5.
• Publicado por Google el 30
de septiembre de 2013.
• Permite la creación de elementos para todos los
dispositivos, tanto ordenadores, como móviles y
tablets.
GOOGLE WEB DESIGNER

4. Creación de banners.
Creación de contenido en 3D.
Creación de interstitials.
Creación de desplegables.
Creación de documentos HTML5.
Creación de documentos CSS3.
Creación de documentos JavaScript.
Creación de documentos XML.
2. Utilidad
Google web Designer tiene las siguientes utilidades:

5. 3. Crear un banner
A continuación procederemos a la creación de un banner sencillo
con esta aplicación de Google.
Será un proceso paso a paso en el que aprenderemos a hacer
animaciones, introducir textos, imágenes, etc.
También, aprenderemos a como insertar el banner en nuestra
web de manera óptima.

6. 3. Crear un banner
• Vamos a Archivo > Nuevo.
• Seleccionamos Banner.

7. 3. Crear un banner
• En “Entorno” seleccionamos la opción que queramos según
nuestras preferencias. En nuestro caso, utilizaremos la opción
AdMob.

8. 3. Crear un banner
• En el apartado Dimensiones seleccionamos el formato
deseado. En nuestro caso usaremos 468x60.

9. BRIEFING
9. Público Potencial: 10. Público Objetivo:
3. Crear un banner
• A continuación elegiremos el nombre y la ubicación donde vamos
a guardar el proyecto.

10. 3. Crear un banner
• Por último tendremos que escoger el modo de
animación.

11. 3. Crear un banner
• Si elegimos el modo de animación avanzado podremos
configurar nuestras animaciones mediante el uso de fotogramas
claves en una línea de tiempo.
• Si elegimos el modo de animación rápido, podremos añadir
nuestras animaciones mediante diapositivas.
Modo de animación

12. 3. Crear un banner
• Lo primero que haremos para configurar el banner
será insertar una imagen. Para ello simplemente la
arrastramos a la plantilla del programa.

13. 3. Crear un banner
• Para redimensionar un elemento (imagen de la
nave) deberemos seleccionarlo, activar la casilla
Control de transformación y estirar la imagen. Si
mantenemos pulsado el botón “shift”
redimensionaremos la imagen de manera
proporcional.

14. 3. Crear un banner
• Después hay que insertar un área para tocar (una
zona activa que al hacer clic te redirige a alguna URL
externa). Para ello vamos a la pestaña
Componentes y arrastramos el área para tocar a
nuestro proyecto.

15. 3. Crear un banner
• Ahora, crearemos el evento
para que cuando se haga clic
en el área nos redirija. Para
ello, nos vamos a Eventos y
le damos al símbolo de “+”.
• En la ventana que saldrá
seleccionaremos
“tapearea_1”(1)
>ToqueClic(2)
>”Environment(AdMob)”(3)
> Salir.(4). Por último,
rellenaremos el id y la url a la
que se va a redirigir.(5)
1 2 3 4 5

16. 3. Crear un banner
• A continuación configuramos el color de nuestro banner. Para ello,
seleccionamos el área para tocar y usamos la herramienta de
relleno en donde elegir el color que necesitemos.
• Para poner el logo por encima lo seleccionamos(1, 2) y
le damos a la herramienta de poner adelante (3).
1
2
3

17. 3. Crear un banner
• Para introducir un texto le damos a la herramienta
de texto(1), lo colocamos en el banner (2) y
seleccionamos la fuente y tamaño(3).
1 2
3

18. 3. Crear un banner
• Ahora crearemos nuestra primera transición. Para
ello introducimos en nuestro ejemplo una imagen
nueva (1) y después pulsaremos en “+”(2) para
crearla.
1
2

19. 3. Crear un banner
• En nuestra segunda
transición,
desplazaremos la
imagen dentro del
banner(1) hacia un
lado para lograr un
efecto de movimiento.
• Le daremos a “+”
para crear otra
transición más (2).• Ya podemos previsualizar el resultado
pulsando en reproducir(3) o pulsamos en
vista previa para verla desde el navegador(4).
1
23
4

20. 3. Crear un banner
• Cuando ya hayamos finalizado el banner pulsamos a
Archivo > Guardar para guardar el proyecto y después
haremos clic en Archivo > Publicar.
• Seguidamente rellenamos los datos que nos pide el
programa y le daremos finalmente a Publicar.

21. 3. Crear un banner
• Por último incrustaremos el
banner en nuestra página HTML.
• Para hacerlo usaremos la
etiqueta iframe. Pondremos
que no queremos scrolling y
escribiremos las dimensiones
del banner mediante los
atributos width y height.

22. • Una aplicación con muchas posibilidades dinámicas y opciones
variadas a la hora de realizar cualquier tipo de elemento.
• Se pueden crear documentos de varios lenguajes de
programación (Javascript, XML, HTML5, CSS3).
• Una aplicación fácil, sencilla y muy asequible para personas sin
un conocimiento previo de diseño.
• Una versión que espera muchas mejoras e implentaciones en sus
funcionalidades.
• La aplicación nos ofrece muchas características de edición a la
hora de crear nuestros elementos.
4. Conclusión

23. d
Agencia La Nave ¡Los astronautas de tu comunicación!
(+34) 902 002 902 / (+34) 865 64 68 28
> NIKO GONZÁLEZ
668896836
@nikoman_1980
marketing@agencialanave.com
www.agencialanave.com