Google Web Designer

Create animations

You can create animations in Google Web Designer in two modes, Quick mode and Advanced mode.

In Quick mode, you build your animation scene by scene: you add a new view of the entire page, change the elements you want to animate, and, optionally, modify your transition times and easings.

For more complex animation, Advanced mode lets you individually animate each of the the elements, optionally modifying transition times and easing as well. Advanced mode also shows layers, which let you change where each element is in the stack of elements.

Full 3D authoring environment

Create and manipulate 3D content utilizing an array of tools and the power of CSS3. Rotate objects and even 2D designs along any axis, visualizing 3D transformations and translations as you author.

Design view and code view

Code view lets you view and edit your code in Google Web Designer's built-in code editing tool. Code view lets you create CSS, JavaScript, and XML files. Code view uses code autocompletion which makes your code easier to write, with fewer errors.

For Ads and HTML files, you can switch between Code view and Design view, with the changes that you make to the code in Code view reflected in the Design view. This lets you immediately test how changes in your code will affect your designs.

You can also select objects with the selection tool and change the CSS styling for those objects in the CSS panel.

Illustration tools

Import assets from any other creative suite or use the built-in illustration tools to create vector-style artwork – keeping your designs light. To create new HTML tags in your designs, just draw them in with the Tag tool.

The CSS panel lets you edit current styles, as well as add new CSS rules.

Easy ad workflow

Google Web Designer makes it simple to publish ads through any platform. Choose from DoubleClick Studio or AdMob, or go for the Generic option to push content through any other ad network. No coding required.

What's New:

Document Upgrade

Files created in previous builds will be upgraded when they are opened in Google Web Designer v1.1.1. The upgrade process seamlessly copies your old documents and converts the copy and all the assets into a v1.1 document. Your original document will remain in the older format and placed in the archive folder.

This file upgrade is necessary because:

1. Google Web Designer no longer generates code for components. Component code now uses Web Components (CustomElements).
2. Events are now supported for all elements, not just components.
3. The CSS code generated by the Timeline is different from v1.
4. The new version uses Project folders. A Google Web Designer document typically consists of the HTML markup, assets, Javascript files and CSS stylesheets. They are now bundled in a folder, which represents the Google Web Designer document.

Auto Update (Internet connection required)

If you have a previous version of Google Web Designer, it will be automatically updated to the latest version.

Important: Google Web Designer requires an internet connection to run the first time after installation.

Improvements and additions to six feature areas have been implemented since version 1.0.6.0428

New Events System

The new events system lets you author highly interactive documents. You can author a wide array of new component and timeline actions in response to events on any element in any GWD document. You can also write your own custom actions in JavaScript and convert predefined actions to custom actions and back, opening up many opportunities for creativity.

Publish to DoubleClick Studio

You can now publish your creatives directly to DoubleClick Studio. Google Web Designer adds the studio enabler code, and associates the ad with the appropriate account, advertiser, and campaign.

Publish to Google Drive

You can publish Google Web Designer files to Google Drive, letting you work collaboratively and share creatives more easily.

Pages are supported in HTML

You can now use the “page” paradigm in HTML, by choosing “HTML with Pages” when you create a new file.

New Timeline

The animation timeline has been reworked to include animation scrubbing, timeline events, auto keyframing, new UI for repeating animation and infinite animation, and the ability to switch back and forth between Quick and Advanced mode as needed.

Web Components

Each component had been rewritten as web components, including the 360 Gallery, Carousel Gallery, Swipeable Gallery, iFrame, Map, Tap Area, Video and YouTube. Canvas shapes are also implemented as web components. You can also now use components in HTML pages. In addition, we’ve added a couple of new components:

• The Gesture component - Lets you use touch and mouse tracking, taps, clicks and other mouse and touch gestures.
• Tap to Call - Lets the user tap to initiate a phone call to a phone number that you specify. CodeMirror3 Integration

Code view now uses CodeMirror3

Three issues have been fixed since version 1.1.0.0723

• V1 Generic Ad file with Exit Event cannot be upgraded to Generic Ad in V1.1
• Cannot add a handler for the same target-event pair for a saved file
• The Taparea is not clickable in IE10 when there is an image behind it