Create ad graphics for any device with Google Web Designer!!!

Learn how to install and use Google's free Web Designer tool to create HTML5-based designs and graphics for ad campaigns. 

Google's new Web Designer tool allows you to create HTML5-based ad designs and graphics that can be run on any device. The free tool focuses on ad design and uses HTML5 and CSS3 behind the scenes, while still giving you access to modify the code if you want to create your own without restrictions. Google Web Designer is currently in Beta.

Features

Google Web Designer includes the following features:

• Animation modes, which allow you to develop in either Quick or Advanced mode, give you the ability to build scene-by-scene graphics while the tool creates the frames that tie the scenes together. With the Advanced mode, you can create layers and animate individual elements within the stack.
• 2D and 3D authoring environment tools, which allow you to create transformations and translations using CSS3 to rotate objects along any axis.
• Dual view screens give you Design view and Code view, so you can flip between the live design and the code behind the design as you work on projects.
• Illustration tools can be used for creating your graphics, or you can import image or graphic assets from other creative suites to design your vector-style artwork. In addition, you can incorporate HTML tags to reference image files using the Tab tool.

Requirements

These are the minimum requirements for installing Google Web Designer on Windows or Mac OS.

• Operating system: Windows 7/ Windows 8, Mac OS X 10.7.x or later
• Processor: Intel Pentium 4 or AMD Athlon 64 processor
• Memory: 2 GM RAM
• Screen resolution: 1280x1024
• Application window size: 1024x768
• Internet connection: Required for initial use after download, for updates, and for help access.

Getting started with Google Web Designer

For an in-depth overview of the Google Web Developer tool you can check out the Google Web Designer help pages, which includes these sections and topics: Introduction, Getting Started,Create and modify content, Create an ad, Preview and publish your work, and Troubleshoot and resolve common issues. A screen capture of the Help section is displayed in Figure A.

Figure A

The Help pages also provide several YouTube video tutorials on topics such as the Google Web Designer overview, the Text Tool overview, and the Pen Tool overview.

Installing Google Web Designer

The following installation steps are for a Windows 7 PC.

Click the Download Web Designer Beta button. When you see the Google Terms of Service agreement, read it and then click the Agree And Download button (Figure B).

Figure B

The download will start immediately and shows up as the file googlewedesigner.exe (Figure C).

Figure C

Double-click googlewedesigner.exe and then select Run from the Open File - Security Warning dialog box (Figure D).

Figure D

Depending on your PC configuration, you may also receive a User Account Control dialog box for allowing the program to make changes to your computer. Click the Yes button to continue (Figure E).

Figure E

Once the installer completes its actions, you'll see the thank you message (Figure F).

Figure F

Using Google Web Designer

Click the Google Web Designer icon from the Programs list, and you'll see the initial splash screen as it starts (Figure G).

Figure G

Once initiated, the default program will open (Figure H).

Figure H

To start your first project creating a new document, select New File from the File menu. The Create New File dialog box will appear (Figure I).

Figure I

The default new file is for a Google Banner Ad using the DoubleClick Studio Rich Media environment, with 300x500 dimensions, named as an HTML file. The default location for a PC is /Users/username/Documents, and the default animation mode is Quick. Once you have set your conventions, click the OK button. Your first file is created and displays in Design view by default (Figure J).

Figure J

Click the Code View (it's in the bottom left of the screen) to see what's behind the design (Figure K).

Figure K

The simple steps to creating a primary banner page are:

1. Import your images by dragging them into the work area in Design view, or by using image tags in the Code view.
2. Arrange your images and any other elements you want to use on the stage.
3. Create animations or bring other components onto the page, if you like.

I played around with the tool for about 30 minutes without reading any further instructions or following tutorials, and I was able to drag a few images into the work area; it will probably take trial and error before I can get any serious animations created. Figure L shows my initial attempt at creating a demonstration banner page with a 360° Gallery Component and the handshake "Welcome!".

Figure L