Google lanzó una herramienta muy útil para que todos puedan crear anuncios en HTML5 y olvidarse de las animaciones en Flash.
Todos sabemos que Flash ha ido muriendo poco a poco como herramienta para la creación de sitios web y anuncios animados, ya que lamentablemente no todos los dispositivos móviles aguantan la extensión y la idea es que todos vean esa publicidad (¿no?).
Bueno, para que todos los diseñadores que trabajan creando anuncios, les contamos que Web Designer es una herramienta disponible para que todos puedan descargar gratuitamente y comiencen a usar sin necesidad de ser un súper programador.
Google Web Designer es una aplicación web avanzada creada con HTML5 que le permite diseñar y compilar anuncios HTML5 y otros tipos de contenido web mediante una interfaz visual y de código integrada. Con la vista de diseño de Google Web Designer puede crear contenido con herramientas de dibujo, texto y objetos en 3D, y puede, además, animar objetos en una cronología. Una vez que haya terminado de crear su contenido, Google Web Designer genera archivos HTML5, CSS3 y JavaScript limpios y legibles.
Al crear creatividades publicitarias con Google Web Designer, puede usar una biblioteca de componentes que le permiten añadir galerías de imágenes, vídeos, herramientas de redes de anuncios y más.
La vista de código de Google Web Designer le permite crear archivos CSS, JavaScript y XML, con resaltado de sintaxis y autocompletado de código para que su código sea más fácil de escribir, con menos errores.
La interfaz no es muy alejada a lo que ya utilizábamos, así que será muy fácil comenzar a usar. Google, ademas dispuso tutoriales y videos para quienes comenzamos a utilizar el programa por primera vez, así que excusa ya no tienen para crear animaciones 2D y 3D en HTML5. (click aquí para tutoriales)
La interfaz de Web Designer
Google Web Designer tiene una gran área central para la compilación de sus proyectos y la edición de código. El área central está rodeada por una barra de herramientas, una barra de opciones de herramienta, una cronología y un conjunto de paneles que le permiten realizar varias tareas, como modificar los elementos y añadir componentes o eventos.
El espacio de trabajo
En el centro de la interfaz de Google Web Designer se encuentra el espacio de trabajo. En el modo Diseño, el área de trabajo muestra sus imágenes, el texto y otros elementos de forma visual, tal como se mostrarán y aparecerán en un navegador. En la vista Código el área de trabajo muestra su código con la codificación por color y el formato adecuados.
Barra de vista
La barra de vista le permite elegir entre el modo Diseño y el modo Código, así como obtener una vista previa de su HTML y publicar su anuncio. Además, puede cambiar el nivel de zoom y la página en la que está trabajando.
Herramientas
La barra de herramientas contiene herramientas para crear y manipular elementos en la fase y en el espacio de trabajo. Estas incluyen herramientas para crear texto y elementos simples de página, herramientas de selección de color y herramientas 3D.
| Herramienta | Descripción |
|---|---|
Herramienta de selección |
Seleccione y mueva objetos en el espacio de trabajo. |
Herramienta para rotar objetos en 3D |
Rote objetos en tres dimensiones. |
Herramienta para trasladar objetos en 3D |
Mueva objetos en un espacio tridimensional. |
Herramienta de etiqueta |
Cree etiquetas HTML de cualquier tipo haciendo clic y arrastrando a la fase. |
Herramienta de texto |
Añadir texto |
Herramienta de forma |
Cree formas elementales. |
Herramienta de cubo de pintura |
Modifique el color de los elementos de su proyecto. |
Herramienta de frasco de tinta |
Modifique el color de la línea y el trazo de los elementos de su proyecto. |
Herramienta de rotación de fase en 3D |
Cambie la vista en 3D del proyecto. |
Herramienta de mano |
Cambie la vista del área de trabajo. |
Herramienta de zoom |
Acerque y aleje su creatividad. |
Opciones de herramientas
La barra de opciones de herramienta muestra las opciones de la herramienta seleccionada. Por ejemplo, cuando se selecciona la herramienta de texto, la barra de opciones de herramienta muestra las opciones de fuente y diseño de texto.
Cronología
La cronología le permite crear animaciones con keyframes. En el modo Rápido, la animación se crea escena a escena; en el modo Avanzado puede animar cada elemento por separado.
Paneles
La sección de paneles de la interfaz contiene el color, las propiedades, los componentes, los eventos y los paneles CSS. Los paneles pueden minimizarse o arrastrarse a una posición diferente en la sección de paneles.
Link: Web Designer