Encuentra la ayuda que necesitas
Encontrarás tutoriales en vídeo, formularios de ayuda y entradas de blog para usuarios de cualquier nivel, de principiante a experto, que te ayudarán a ampliar tus habilidades. Más abajo tienes acceso a respuestas rápidas y a instrucciones detalladas.
-
Explora los componentes de la Galería
Familiarízate con las funciones avanzadas de los componentes de la galería de Google Web Designer. Descubre cómo mejorar los anuncios de banner estándar de 300x250.
- Modo avanzado
- Interfaz de usuario
-
Zoom en la línea de tiempo cuando el modo avanzado está activo
Natalie, ingeniera de experiencia de usuario, muestra cómo ampliar y reducir elementos desde la línea de tiempo cuando el modo avanzado está activo.
- Modo avanzado
- Tutorial en vídeo
-
La interfaz de Google Web Designer
Familiarízate con la interfaz de Google Web Designer. Descubre qué herramientas tiene y dónde encontrarlas.
- Descripción general
- Interfaz de usuario
-
Consejos para usar Google Web Designer - Parte 1
Crea y trabaja con contenido 3D aprovechando el potencial que ofrece el código CSS3. Gira objetos y diseños 2D sobre cualquier eje y visualiza transformaciones y traslaciones de contenido 3D mientras lo creas.
- 3D
- Blog
-
Cambiar estilos usando el panel CSS
El panel CSS muestra el estilo de cualquier elemento que selecciones. En este panel, también puedes cambiar el estilo de la clase, añadir estilos insertados y crear estilos.
- Artículo de ayuda
- Estilos CSS
-
Gestionar recursos con la biblioteca
Las imágenes, los archivos de audio y los archivos de vídeo que utilizas en los documentos se denominan, en conjunto, "recursos". Se crean cuando los importas en los documentos y se almacenan en la biblioteca, donde puedes verlos y volver a utilizarlos.
- Artículo de ayuda
- Biblioteca
-
Selección de varios fotogramas clave y miniaturas
Natalie, ingeniera de experiencia de usuario, explica brevemente cómo seleccionar varios fotogramas clave en el modo avanzado y varias miniaturas en el modo rápido.
- Modo avanzado
- Tutorial en vídeo
-
Cinco funciones interesantes
Vamos a ver cinco funciones y flujos de trabajo que pueden ser muy útiles en Google Web Designer: grupos, muestras, BYOC, publicar en Drive y diseños fluidos.
- Descripción general
-
Notas de la versión
Consulta cuál es la versión más reciente y las nuevas funciones que incorpora.
- Artículo de ayuda
- Información técnica
-
Requisitos del sistema
Comprueba que tu sistema cumple todos los requisitos.
- Artículo de ayuda
- Información técnica
-
El entorno del anuncio
Google Web Designer es compatible con varios entornos del anuncio: Google Ads, Display & Video 360 y Google AdMob. Puedes cambiar de uno a otro con un solo clic.
- Artículo de ayuda
- Crear y modificar contenido
- Entorno del anuncio
-
La herramienta de texto
Puedes añadir texto y aplicarle formato. Utiliza Google Fonts y ajustes automáticos de texto para conseguir el aspecto que buscas.
- Artículo de ayuda
- Crear y modificar contenido
- Añadir elementos
-
Usar la herramienta de lápiz y la de forma
Dibuja líneas y formas en SVG, empieza con diseños sencillos hasta atreverte con otros más complejos.
- Artículo de ayuda
- Crear y modificar contenido
- Añadir elementos
-
Usar herramientas 3D
Google Web Designer te permite mover y rotar elementos en tres dimensiones. Puedes cambiar de vista para ver los elementos desde cualquier posición.
- Artículo de ayuda
- Crear un anuncio
- Mover elementos y modificar su tamaño
-
Usar degradados
Un degradado es un relleno multicolor donde cada color cambia al siguiente de forma gradual. Los degradados pueden aplicarse tanto al borde como al relleno de elementos SVG, HTML y canvas.
- Artículo de ayuda
- Crear y modificar contenido
- Colores
- Degradados
-
Agrupar y encapsular elementos
La agrupación y el encapsulado son dos métodos para trabajar con un conjunto de elementos como si se tratase de un único objeto.
- Artículo de ayuda
- Crear y modificar contenido
- Encapsular elementos
- Agrupar elementos
-
Descripción general del diseño adaptable
El diseño adaptable se caracteriza por ser flexible en lugar de fijo. En lo que respecta a los anuncios, esto implica que se puede crear un único anuncio que modifique el estilo de sus elementos cuando cambia la orientación o el tamaño, en lugar de tener que crear varios anuncios similares.
- Artículo de ayuda
- Adaptable
-
Cambiar el tamaño de la ventana gráfica
Al crear un diseño adaptable, es muy útil poder ver la apariencia final del documento en tamaños de pantalla distintos.
- Artículo de ayuda
- Adaptable
- Viewport
-
Acerca de las animaciones
En Google Web Designer, las animaciones se crean añadiendo fotogramas clave en determinados puntos de la línea de tiempo. Las propiedades CSS de un elemento animado se definen en cada fotograma clave, de modo que el elemento cambia gradualmente para adaptarse a esas propiedades durante la transición desde el fotograma clave anterior.
- Artículo de ayuda
- Animación
- Interactividad
-
Animaciones en el modo rápido
En el modo rápido, las animaciones se crean escena a escena: puedes añadir una nueva vista de página entera, cambiar los elementos de la animación y, si quieres, también puedes modificar los easings y los tiempos de transición.
- Artículo de ayuda
- Animación
- Interactividad
-
Animaciones en el modo avanzado
En el modo avanzado, la línea de tiempo de la animación muestra cada elemento en una capa independiente. Con las capas, puedes cambiar la posición de los elementos dentro de la pila, ocultarlos o bloquearlos para trabajar de forma más eficaz.
- Artículo de ayuda
- Animación
- Modo avanzado
-
Acerca de los easings
Los easings permiten cambiar la aceleración y deceleración de la transición de una animación.
- Artículo de ayuda
- Animación
- Interactividad
- Easing
-
Anidar animaciones
En muchos casos deberás crear una línea de tiempo para toda una página. Así podrás tener todos los elementos de la página en una única línea de tiempo. También hay una línea de tiempo de animación por cada contenedor principal, para que puedas crear animaciones complejas anidando una animación en otra.
- Artículo de ayuda
- Animación
- Interactividad
- Elementos anidados
-
Reproducir animaciones en bucle
Para reproducir una animación en bucle, puedes usar dos técnicas diferentes. Puedes reproducir capas en bucle por separado o usar eventos para reproducir en bucle todas las capas juntas, en casos de animaciones más complejas.
- Reproducción en bucle
- Interactividad
- Animación
- Artículo de ayuda
-
Acerca de las trayectorias de movimiento
Con las trayectorias de movimiento, puedes animar objetos para que se muevan trazando curvas y formas complejas.
- Artículo de ayuda
- Animación
- Interactividad
- Movimiento
-
Crear animaciones en el modo avanzado
Para animar elementos en el modo avanzado, debes crear fotogramas clave para cada uno de ellos en la línea de tiempo. En este panel, las animaciones se representan de un modo esquemático, y los fotogramas clave indican dónde comienzan y dónde finalizan.
- Artículo de ayuda
- Animación
- Interactividad
- Modo avanzado
-
Ver y barrer animaciones
Con las herramientas de vista previa y de barrido, puedes ver y ajustar una animación a medida que la vas creando.
- Artículo de ayuda
- Capas
- Modo avanzado
- Animación
- Interactividad
-
Información sobre los componentes
Los componentes son módulos compilados previamente que permiten añadir funciones específicas a tus anuncios o a tus documentos HTML.
- Artículo de ayuda
- Descripción general
- Componentes
-
Componente Galería 360°
Puedes utilizar un conjunto de imágenes para mostrar un objeto en rotación. La última imagen se encapsula con la primera, lo que permite a los usuarios rotar el objeto en cualquier dirección de forma sencilla.
- galería
- Artículo de ayuda
- Componentes
-
Componente Galería en carrusel
Crea una galería de imágenes deslizables que giran de modo similar a un carrusel. Puedes modificar las propiedades de este componente para crear varias experiencias 3D y varios tipos de carrusel.
- Artículo de ayuda
- galería
- Componentes
-
Componente Navegación por la galería
Añade un panel de navegación de colocación independiente a los componentes Galería deslizable, Galería en carrusel o Galería 360°.
- Artículo de ayuda
- galería
- Componentes
-
Componente Galería deslizable
Crea una galería de imágenes sencilla que los usuarios pueden deslizar hacia adelante y hacia atrás para mostrar diferentes conjuntos de imágenes o de grupos.
- Artículo de ayuda
- galería
- Componentes
-
Componente Añadir a calendario
Crea recordatorios de eventos que los usuarios pueden añadir a sus calendarios.
- Artículo de ayuda
- Calendar
- Componentes
-
Componente Gesto
Capta las interacciones de los usuarios con tus anuncios.
- Artículo de ayuda
- Componentes
- Gesto
-
Componente Botón de imagen
Crea un botón que se adapte visualmente sin necesidad de generar una animación basada en un evento.
- Artículo de ayuda
- Botón
- Componentes
-
Componente Área de pulsación
Coloca un elemento transparente sobre cualquier parte de la pantalla. Estos elementos reaccionan cuando los usuarios los tocan o hacen clic sobre ellos.
- Área de pulsación
- Componentes
-
Componente Tocar para llamar o enviar mensaje de texto
En smartphones compatibles, puedes iniciar una llamada telefónica o enviar un mensaje SMS desde un anuncio para móviles al número que especifiques.
- Artículo de ayuda
- Componentes
- Llamar/Enviar SMS
-
Componente Mapa
Puedes añadir a tu proyecto un mapa configurable en el que se pueden hacer búsquedas. El mapa también puede mostrar la ubicación del usuario, así como otros datos específicos basados en la ubicación.
- Artículo de ayuda
- Maps
- Componentes
-
Componente Street View
Añade a tus proyectos imágenes de Google Street View con las que puedan interactuar los usuarios.
- Artículo de ayuda
- Componentes
- Street View
-
Componente Audio
Añade sonido a tus anuncios.
- Artículo de ayuda
- Componentes
- Audio
-
Componente Vídeo
Es una forma muy fácil de añadir vídeos a tus anuncios.
- Artículo de ayuda
- Componentes
-
Componente YouTube
Puedes añadir un vídeo de YouTube a tus anuncios, y personalizar el reproductor y la reproducción.
- Artículo de ayuda
- Componentes
- YouTube
-
Componente iframe
Carga en tu proyecto elementos de URL externos, como páginas HTML externas.
- Iframe
- Componentes
- Artículo de ayuda
-
Componente Hoja de sprites
Añade animaciones con sprites, de forma que cada sprite se muestre de manera secuencial como fotograma clave, o bien coloca varias imágenes en una hoja de sprites para que el número de archivos de imagen sea el menor posible.
- Artículo de ayuda
- Componentes
- Hoja de sprites
-
APIs de componentes
Consulta la lista de propiedades, eventos y métodos disponibles con cada componente para escribir código personalizado.
- Artículo de ayuda
- Vista previa
-
Información acerca de los eventos
Los eventos son las acciones que especificas en respuesta a los gestos de los usuarios, a los fotogramas clave de la línea de tiempo o a otros aspectos de un anuncio o un documento HTML.
- Artículo de ayuda
- Eventos
-
Crear acciones personalizadas
Puedes crear tus propias acciones personalizadas con JavaScript. Una vez definidas, las acciones personalizadas pueden reutilizarse dentro de creatividades.
- Artículo de ayuda
- Eventos
-
Crear un anuncio de banner
Los anuncios de banner son anuncios sencillos que se ajustan a un espacio publicitario con un tamaño específico de una página web o aplicación.
- Artículo de ayuda
- Anuncios de banner
- Crear un anuncio
-
Crear un anuncio expandible
Una creatividad expandible es un anuncio que al principio tiene el tamaño de un banner estándar y después se expande. Con estas creatividades tienes más posibilidades de captar la atención de los usuarios.
- Artículo de ayuda
- Eventos
- Expandible
-
Crear anuncios intersticiales
Los anuncios intersticiales presentan una experiencia de anuncio a página completa en puntos naturales de transición, por ejemplo, al cambiar de página, al ejecutarse una aplicación o al cargase el siguiente nivel de un juego.
- Artículo de ayuda
- Intersticial
- Crear un anuncio
-
Crear un anuncio dinámico
Los anuncios dinámicos permiten mostrar ofertas relevantes a tu audiencia. Para ello, utilizan información de un feed de datos para determinar qué imágenes, texto y otra información se va a mostrar.
- Artículo de ayuda
- AMP HTML
- Crear un anuncio
-
Anuncios AMP HTML
Puedes utilizar Google Web Designer para crear anuncios AMP HTML. Los anuncios creados en AMP (Accelerated Mobile Pages) se cargan más rápido que los demás, por lo que son ideales para mostrarse en dispositivos móviles.
- Artículo de ayuda
- Crear un anuncio
- AMP HTML
-
Utilizar plantillas
Las plantillas son anuncios que ya están creados y que tienen tamaños, estilos y funciones que se usan habitualmente. Si sustituyes las imágenes y otros recursos, podrás crear anuncios útiles y funcionales en poco tiempo.
- Artículo de ayuda
- Crear un anuncio
- Plantillas
-
Crear una plantilla personalizada
Puedes guardar cualquier anuncio que crees como una plantilla. Esta función te ayuda a ahorrar tiempo, sobre todo si vas a crear varias versiones del mismo anuncio.
- Artículo de ayuda
- Crear un anuncio
- Plantillas
-
Validador de anuncios
El validador de anuncios comprueba si hay problemas comunes en tu anuncio y muestra los resultados en un panel en tiempo real.
- Artículo de ayuda
- Crear un anuncio
-
Desplazarse por la estructura de un documento en el panel Esquema
En el panel Esquema se muestra una vista de árbol de los elementos que hay en un documento para que puedas seleccionarlos y desplazarte por ellos fácilmente.
- Artículo de ayuda
- DOM
-
Revisar una vista previa de un anuncio o una página HTML
A medida que creas un anuncio o una página HTML, puedes revisar una vista previa en el navegador para comprobar su funcionamiento y el aspecto que tendrán cuando se publiquen.
- Artículo de ayuda
- Vista previa
-
Publicar proyectos
Al publicar un proyecto, se generan archivos finalizados listos para ser traficados. Google Web Designer permite publicarlos en una carpeta local, o directamente en Google Drive o Studio.
- Artículo de ayuda
-
Zoom en la línea de tiempo cuando el modo avanzado está activo
Natalie, ingeniera de experiencia de usuario, muestra cómo ampliar y reducir elementos desde la línea de tiempo cuando el modo avanzado está activo.
- Modo avanzado
- Línea de tiempo
- Tutorial en vídeo
-
Funciones de easing (inicio/finalización del paso)
Natalie, ingeniera de experiencia de usuario, nos ofrece un tutorial guiado sobre cómo añadir el inicio y la finalización del paso de las funciones de easing. Esta opción es especialmente útil si quieres hacer que las animaciones salten de un fotograma clave a otro al instante, en lugar de con una transición gradual.
- Tutorial en vídeo
- Easing
-
Ocultar y bloquear capas en la línea de tiempo
Natalie, ingeniera de experiencia de usuario, nos guía por los pasos que hay que seguir para ocultar y bloquear varias capas en la línea de tiempo.
- Modo avanzado
- Línea de tiempo
- Tutorial en vídeo
-
Descripción general de la interfaz de usuario
Jon, ingeniero de experiencia de usuario, presenta la interfaz de usuario de Google Web Designer. Aprende a usar los distintos paneles y barras de herramientas, así como a organizar y personalizar el espacio de trabajo según tus preferencias.
- Tutorial en vídeo
- Interfaz de usuario
-
Descripción general de los eventos
Maciek, uno de los ingenieros de Google Web Designer, explica el flujo de trabajo con eventos. Descubre cómo usar eventos para definir estilos CSS y cómo añadir acciones personalizadas, entre otras funciones.
- Tutorial en vídeo
- Eventos
-
Descripción general de la herramienta de degradado
Jean-Pierre, uno de los ingenieros de Google Web Designer, explica cómo utilizar los tipos de degradado lineal y radial, así como la herramienta de edición de degradados.
- Tutorial en vídeo
- Degradados
-
Descripción general de las formas
Jean-Pierre, uno de los ingenieros de Google Web Designer, explica cómo funcionan las herramientas de forma, como el óvalo y el rectángulo.
- Tutorial en vídeo
- Formas
-
Descripción general de las funciones de texto
Shuo, una de las ingenieras de Google Web Designer, explica cómo utilizar las funciones y el panel de texto. Descubre cómo mover texto, cambiar su tamaño o copiar estilos de un documento a otros, entre otras opciones.
- Tutorial en vídeo
- Texto
-
Descripción general de los dibujos en 2D y 3D
Lucas, uno de los ingenieros de Google Web Designer, explica las características de las funciones y herramientas de dibujo 2D y 3D.
- Tutorial en vídeo
- Crear y modificar contenido
-
Descripción general del modo avanzado de la línea de tiempo
Natalie, una de las ingenieras de Google Web Designer, explica en qué consiste el modo avanzado de la línea de tiempo. Descubre cómo crear animaciones, trabajar con fotogramas clave y configurar el easing, entre otras funciones.
- Modo avanzado
- Tutorial en vídeo
-
Validador de anuncios
Jon, uno de los ingenieros de Google Web Designer, explica cómo funciona el Validador de anuncios. Esta función, pensada para mejorar el flujo de trabajo, comprueba si hay problemas en los anuncios y muestra los resultados en un panel. Aunque con ello no te aseguras de que los anuncios vayan a ser aprobados, te permite ver los problemas que pueda haber y corregirlos al instante.
- Crear un anuncio
- Tutorial en vídeo
-
Conjuntos de paneles del área de trabajo
Yaqi, una de las ingenieras de Google Web Designer, explica en qué consisten los conjuntos de paneles del área de trabajo y cómo guardar los que más utilices en Google Web Designer.
- Tutorial en vídeo
- Área de trabajo
- Configuración
-
Descripción general de las trayectorias de movimiento
Jon, uno de los ingenieros de Google Web Designer, explica en qué consisten las trayectorias de movimiento. Esta función sirve para animar objetos mientras se mueven a lo largo de trayectorias que hayas diseñado. Puedes añadir puntos de origen para crear animaciones y torcerlas o conectarlas como quieras.
- Tutorial en vídeo
- Movimiento
-
Modificar trayectorias de movimiento
Chia-Ling, una de las ingenieras de Google Web Designer, explica cómo editar trayectorias de movimiento. Descubre diferentes formas de editar animaciones en la escena mediante esta función.
- Tutorial en vídeo
- Movimiento
-
Descripción general de los grupos
En este video, el ingeniero de diseño web de Google, Lucas, proporciona una demostración de la función Grupos.
- Agrupar elementos
- Tutorial en vídeo
-
Descripción general de los grupos con eventos
Lucas, uno de los ingenieros de Google Web Designer, explica cómo utilizar eventos en la nueva función Grupos. Los grupos son colecciones reutilizables de elementos que se pueden editar y gestionar como un objeto único. Si utilizas esta función con eventos, podrás crear fantásticas animaciones rápidamente.
- Tutorial en vídeo
- Eventos
- Agrupar elementos
-
Flujo de trabajo con anuncios adaptables
Kent Myers, uno de los especialistas en creatividades de Google Web Designer, explica el flujo de trabajo con anuncios adaptables. Descubre cómo crear tus propios anuncios adaptables de forma fácil y rápida a partir de una plantilla.
- Adaptable
- Tutorial en vídeo
-
Esquema
En este video, el ingeniero de diseño web de Google, Jean-Pierre, proporciona una descripción general del Outliner.
- Tutorial en vídeo
- Esquema
-
Escalado de fotogramas clave de la línea de tiempo
Natalie, una de las ingenieras de Google Web Designer, explica la función de escalado de fotogramas clave. Para cambiar la duración de una animación conservando la proporción del espacio entre fotogramas clave, mantén pulsada la tecla Mayús y arrastra los fotogramas clave seleccionados en la línea de tiempo cuando está en el modo avanzado.
- Modo avanzado
- Línea de tiempo
- Tutorial en vídeo
-
Descripción de los componentes de la galería de Google Web Designer
Familiarízate con las funciones avanzadas de los componentes de la galería de Google Web Designer.
- Blog
- galería
- Componentes
-
Consejos para usar Google Web Designer - Parte 2
Crea código personalizado, utiliza eventos de la línea de tiempo para reproducir un anuncio en bucle y mucho más.
- Modo avanzado
- Código personalizado
- Blog
-
Trabajar con texto en Google Web Designer
Le mostraremos cómo administrar la apariencia del texto en su documento de Google Web Designer.
- Texto
- Blog
Empezar
Para descargar la herramienta, haz clic en Descargar Web Designer y sigue las instrucciones que aparecen en pantalla.
