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.
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:
Import your images by dragging them into the work area in Design view, or by using image tags in the Code view.
Arrange your images and any other elements you want to use on the stage.
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
Conclusion
Once
I review the video tutorials, I might be able to create something of
usable proportions, but at this time I think there is a learning curve
to getting off the ground with this tool. It will be interesting to see
how much Google will continue to support this tool (i.e., will it go
beyond the Beta stage?). I'm also curious to see if Google takes some
focus away from promoting Web Designer as an ad creation tool and makes
it more of an all-around web development tool. For more information on the Google Web Designer tool, be sure to check out the Google Web Designer beta User Forum and the Google Web Designer Google+ pag
0 comments:
Post a Comment