Creación y configuración de un banner en Google Web Designer

Creación y configuración de un banner en Google Web Designer

Índice

    Paso 1: Empezar a trabajar

    Google Web Designer es un entorno de desarrollo gratuito para webmasters que ofrece la posibilidad de crear páginas web, incluyendo elementos individuales como banners, utilizando CSS3 y HTML5. Para utilizar esta herramienta, en primer lugar, es necesario descargar el archivo de instalación desde el sitio web oficial y realizar la instalación.

    Descargar Google Web Designer desde el sitio web oficial

    Instalación del programa

    1. Haga clic en el enlace anterior para ir a la página principal del software y haga clic en "Descargar el Diseñador Web". Tenga en cuenta que el programa sólo es compatible con Windows 7 y versiones posteriores.
    2. A través de una ventana emergente. "Guardar". seleccione una ubicación en el ordenador y utilice el botón marcado en el panel inferior.
    3. Navegue hasta la carpeta con el archivo que acaba de guardar y haga doble clic con el botón izquierdo del ratón para abrirlo. Esto debería abrir la ventana de instalación.

      El procedimiento de instalación en sí mismo se realiza en modo totalmente automático, guardando todos los archivos de trabajo en el directorio con otros programas en la unidad del sistema.

    Autorización

    1. Si quieres guardar proyectos en la web o en general crear un banner específicamente para los servicios internos de Google, vale la pena realizar adicionalmente la autorización. Para ello, inicie el programa con el icono correspondiente, cierre la ventana de bienvenida y haga clic en "Login". en la barra superior.
    2. Introduzca la información de su cuenta de Google, pulse "Siguiente". y completar la confirmación como se requiere. La cuenta se añadirá inmediatamente sin necesidad de realizar ninguna otra configuración.

    Cambiar la configuración

    1. Una vez resuelta la preparación, es aconsejable realizar cambios en los ajustes básicos del software para facilitar el trabajo en el futuro. A través del panel superior, amplíe el menú "Editar". y seleccione una sección "Ajustes". al final de la lista.
    2. En la ficha. "Básico" puede cambiar el comportamiento inicial del programa para abrir rápidamente los proyectos, asignar una carpeta para guardar las plantillas creadas y establecer valores por defecto para el anuncio de la variante cuando se crea.
    3. Página siguiente. "Modo de vista del diseño" contiene los parámetros de la apariencia del editor. Cambiando la configuración presentada, puede ajustar la cuadrícula y el ajuste del objeto para un posicionamiento más preciso de los elementos.
    4. El Diseñador Web de Google tiene un editor de código con su propia configuración. Por ejemplo, en la pestaña "Modo de vista de código". puede asignar un estilo de diseño, establecer opciones de formato y añadir enlaces de teclas a las tareas.
    5. Última pestaña. "Avanzado". contiene sólo dos parámetros - "Registro". и "Escala de aplicación".. En el primer caso, al activarlo se creará un registro de cambios, mientras que el segundo elemento permite establecer una nueva escala por defecto para el espacio de trabajo del editor.

      ¡Tenga cuidado! Si se establece una escala demasiado grande, puede haber problemas de falta de espacio en la pantalla para los elementos importantes.

    Cualquier cambio que hagas requiere que reinicies el programa de una forma u otra. Si estás empezando a trabajar con el editor, no te olvides de la posibilidad de restablecer la configuración mediante un elemento independiente en cada una de las pestañas.

    Paso 2: Crear un banner

    Después de configurar el programa, puedes empezar a trabajar en el banner utilizando todas las funciones de Google Web Designer. Sin embargo, tenga en cuenta que esta herramienta actúa sólo como un editor visual, permitiéndole colocar sólo elementos ya creados por separado, por ejemplo, en Photoshop.

    Lea también: Creación de un banner en Adobe Photoshop

    Preparación del diseño

    1. Para crear un nuevo proyecto, utilice el enlace "Crear archivo". en la ventana de inicio. Para reabrir el archivo se puede utilizar el elemento "Crear". en el menú "Archivo"..
    2. En el bloque. "Anuncios". seleccione "Bandera". y rellenar el campo principal "Nombre".sin el cual no es posible guardar el proyecto. También puede especificar la ubicación del proyecto a preparar.
    3. Utilizar la lista desplegable "Contexto". establecer una de las opciones en función de la futura aplicación de la pancarta. La resolución en sí puede cambiarse mediante el menú "Dimensiones"..

      Si es necesario, las dimensiones de la disposición pueden ajustarse de forma independiente. Para ello, establezca el parámetro "Personalizado". y especifique la resolución deseada.

      Marcando la casilla. "Disposición adaptativa".No tiene que preocuparse por el tamaño, ya que el anuncio se estirará de acuerdo con el bloque principal después de ser añadido al sitio.

    4. Las opciones de personalización se pueden ampliar seleccionando otra pestaña, ya sea "Ampliable". O "Intersticial".. No vamos a considerar estas variantes, porque el diseño estándar es suficiente como ejemplo.

      Por separado, señalemos que "Banner AMPHTML" debe utilizarse si se desea adaptar los anuncios a los dispositivos móviles. Esto acelerará la carga de los anuncios, pero bloqueará algunas funciones del editor.

    Trabajar con herramientas

    1. Después de preparar el trazado, hay que familiarizarse con las herramientas. En el panel superior, la lista de herramientas merece atención "Vista"., que permite activar y desactivar los elementos auxiliares.
    2. A través del menú "Ventana". puede desactivar temporalmente un elemento de la interfaz en particular. Por ejemplo, si quieres hacer un banner estático, "Línea de tiempo". sólo estorbará, así que es mejor desmarcarla.
    3. Las principales herramientas del editor se presentan en la columna de la izquierda. No vamos a considerar todas las opciones, ya que no todos los elementos se utilizan durante la creación, pero se recomienda experimentar por su cuenta.
    4. Junto a la barra de herramientas se presenta "Anuncio Inspector". Con varias contribuciones. Cabe destacar "Eventos".responsable de las acciones con tal o cual objeto de bandera, y "CSS"donde se establecen los parámetros de estilo.
    5. La parte derecha del programa también cuenta con un conjunto de herramientas que permiten controlar el color, el texto, la estructura de los objetos, las propiedades y simplemente las capas. Además del conjunto básico de funciones, es mejor aprender las ventanas por su cuenta mientras se crea un proyecto.
    6. Según sea necesario con el "Línea de tiempo". se puede crear un banner animado. En ese momento, utilice la barra espaciadora y el LKM para controlar el área principal del editor, así como el bloque con los parámetros de escala.

    Rellenar el diseño

    1. La creación de un banner siempre comienza con el fondo, por lo que después de preparar el diseño, abra la pestaña "Propiedades". y en el bloque "Página". utilice la subsección "Vertido".. Aquí es muy posible establecer cualquier color, incluyendo un gradiente o un fondo totalmente transparente.
    2. A continuación, hay que añadir los elementos gráficos preparados de antemano por orden de prioridad. Esto se puede hacer en la pestaña Pestaña "Biblioteca de objetos".haciendo clic en el icono "+" en el panel inferior.
    3. Seleccione los archivos gráficos que desee y pulse "Abre".. Puede hacerlo para todas las capas deseadas a la vez o por separado, repitiendo los pasos anteriores.
    4. Para realizar la colocación, haga clic en la imagen deseada en la pestaña Pestaña "Biblioteca de objetos". y arrastrar y soltar al área principal del editor.

      Puede controlar la ubicación del objeto arrastrando y escalando normalmente cuando la herramienta de selección está activa. Siempre se pueden utilizar guías en función de las necesidades.

    5. Seleccionando un archivo gráfico en el área de trabajo o en la pestaña Pestaña "Editor de estructuras".Abrir "Propiedades".. Aquí hay muchas más opciones que en el caso del fondo, como la configuración del borde o la sangría.
    6. Si el diseño de tu banner incluye texto, puedes añadir el elemento correspondiente mediante la herramienta estándar de Google Web Designer. Haga clic en el icono "T" en el panel izquierdo, haga clic en la ventana principal del editor y escriba el conjunto de caracteres deseado.

      Para controlar el texto, seleccione la capa en la pestaña Pestaña "Editor de estructuras"., ampliar "Texto". y establecer los parámetros adecuados.

    Ajuste de la animación

    1. En el bloque. "Línea de tiempo". puedes añadir y ajustar efectos de animación. Para empezar, haga clic en el botón "Añadir icono". con icono "+".
    2. Haga clic en el icono ".5s" entre los fotogramas y establezca los ajustes que desee. Por ejemplo, puede cambiar la duración y el estilo de la transición.
    3. Todos los bloques de "Línea de tiempo". es completamente independiente de los demás. Para crear animaciones, cambia algunos elementos a tu gusto y comprueba el resultado con el botón de reproducción.

      Una vez que haya completado el proceso de edición, utilice el botón "Repite".. Esto creará una animación sin fin.

    Añadir eventos

    1. Una vez que haya resuelto el diseño, tiene que añadir eventos de transición para elementos individuales o para todo el banner. Para ello, en la columna "Inspector de anuncios". abrir la pestaña "Eventos" y haga clic en el icono "+" en el panel inferior.
    2. En la ventana que se abre de la lista "Objetivo". seleccione el objeto que actuará como referencia.
    3. En la página. "Evento". Ampliar "Ratón". y seleccione "clic".. En función de los requisitos del resultado, se pueden combinar diferentes ajustes.
    4. Más abajo en la lista. "Acción". Abrir "Anuncios de Google". y establecer el valor "Transición".. Esta selección permitirá al usuario navegar a una página específica de Internet que usted desee.
    5. Como. "Destinatario". seleccione una única opción presentada "gwd-ad".
    6. En la última etapa en el campo. "ID del indicador". establecer el enlace con la etiqueta y rellenar "URL"especificando la página deseada. Para guardar, utilice "DE ACUERDO"..

    Trabajar con el código fuente

    1. Como hemos mencionado, Google Web Designer contiene un editor de código incorporado. Puede habilitarlo mediante el botón "Código". en el lado derecho del panel superior.
    2. Puede realizar cambios en la estructura del banner utilizando no sólo el editor visual, sino también trabajando directamente con el código en el archivo del proyecto. Esto puede ser muy útil cuando se alinean muchos elementos pequeños o se añaden eventos no previstos por el programa.

    Las acciones descritas deberían ser suficientes para crear una pancarta independientemente de la aplicación. Sin embargo, puedes ampliar enormemente las posibilidades combinando las herramientas mencionadas.

    Paso 3: Terminar el trabajo

    Cuando el banner esté completo y listo para ser colocado en el sitio web, puede pasar al último paso. Lo primero que hay que hacer es comprobar cómo se ve su trabajo en la página web real.

    Vista previa

    1. En el panel superior, pulse el botón "Vista previa".para abrir un menú adicional. Aquí puede especificar el navegador que se utilizará para abrir el banner.
    2. Cuando se abre, se conservan todas las funciones y el aspecto de la pancarta, pero con algunas peculiaridades. Por ejemplo, aunque hayas configurado la animación para que se repita infinitamente, aquí todo se limita a una sola iteración.
    3. Si lo necesitas, siempre puedes demostrar el resultado a otras personas. Para ello, seleccione "Obtener enlace compartido". y confirma el acceso de la aplicación a tu cuenta de Google.

      Esto mostrará un enlace para ver el banner en este modo como el anterior. Por supuesto, esto sólo es posible si tienes una cuenta.

    Guardar y publicar

    1. Para realizar un guardado de proyecto, primero abra el menú de archivo y utilice la opción "Guardar".. El archivo original se guardará en su ordenador y podrá abrirse más tarde.
    2. Para preparar un proyecto para su publicación en el sitio, abra el menú "Publicar". en la esquina superior derecha del programa y seleccionando una de las ubicaciones de guardado.
    3. Cambie la configuración de la ventana de publicación a su gusto, dejando sólo las casillas que desee, y haga clic en "Publicar".. Guardar de esta manera es rápido, independientemente del tamaño del proyecto.

      La carpeta resultante se encuentra en la ubicación de guardado. La colocación del banner en el sitio difiere según el sitio y, por lo general, ya no es relevante para el procedimiento de creación.

    Nos alegramos de haber podido ayudarle con su problema.

    Describa lo que no le ha funcionado.
    Nuestros especialistas tratarán de responder con la mayor rapidez posible.

    ¿Le ha ayudado este artículo?

    Subir

    Si continuas utilizando este sitio aceptas el uso de cookies. Más Información


    Parada Creativa