Introducing Google Web Designer

Google Web Designer is an advanced web application that’s built with HTML5 which lets you design and build HTML5 advertisements and other web content using an integrated visual and code interface. Using Google Web Designer’s design view you can create content using drawing tools, text, and 3D objects, and you can animate objects on a timeline. Once you’re done creating your content, Google Web Designer outputs clean human-readable HTML5, CSS3, and Javascript.

When you create advertising creatives with Google Web Designer, you can use a library of components that lets you add image galleries, videos, ad network tools, and more.

Google Web Designer’s Code view lets you create CSS, JavaScript, and XML files, using syntax highlighting and code autocompletion to make your code easier to write, with fewer errors.

System requirements

	Minimum	Recommended
Operating system	Windows® 7/ Windows 8 Mac® OS X 10.7.x or later	Windows® 7/ Windows 8 Mac® OS X 10.7.x or later
Processor	Intel Pentium® 4 or AMD Athlon 64 processor	Intel Pentium® 4 or AMD Athlon 64 processor
Memory	2 GB RAM	4 GB RAM
Screen resolution	1280×1024	1920×1080
Application window size	1024×768 minimum	1024×768 or larger
Internet connection	Required for initial use after download, for updates, and for help access.	Required for initial use after download, for updates, and for help access.

The Web Designer interface

Google Web Designer has a large central area for building your projects and editing code. The central area is surrounded by a tool bar, a tool options bar, a timeline, and a set of panels that let you do several things, including modify elements, add components, and add events.

The workspace

In the center of the Google Web Designer interface is the workspace. In Design mode, the workspace shows your images, text, and other elements visually, just as they will be displayed as they will appear in a browser. In Code view the workspace shows your code with appropriate color coding and formatting.

View bar

The view bar lets you choose between Design and Code mode, lets you preview your HTML and publish your ad, and lets you change the zoom level and which page you’re working on.

Tools

The tool bar contains tools for creating and manipulating elements on the stage and in the workspace. This includes tools for creating text and simple page elements, color selection tools, and 3D tools.

Tool	Description
Selection tool	Select and move objects in the workspace
3D object rotate tool	Rotate objects in three dimensions
3D object translate tool	Move objects in three space
Tag tool	Create HTML tags of any type by clicking and dragging on the stage
Text tool	Add text
Shape tool	Create elementary shapes
Paint bucket tool	Modify the color of elements in your project
Ink bottle tool	Modify the line color and stroke of elements in your project
3D stage rotate tool	Change your 3D view of the project
Hand tool	Change your view of the workarea
Zoom tool	Zoom in and out on your creative

Tool options

The tool options bar shows options for the currently selected tool. For example, when the text tool is selected, the tool options bar shows font and text layout options.

Timeline

The timeline lets you create animations using keyframes. In Quick mode, the animation is created scene by scene; in Advanced mode you can animate each element separately.

Panels

The panels section of the interface contains the Color, Properties, Components, Events and CSS panels. Panels can be minimized or dragged to a different position in the panels section.