:
Google web designer is an application created by Google that allows you to design and develop HTML5 web content through an easy to understand Graphic Interface.
Google Web Designer has common tools of drawing, text, 3D objects, animation, among others, once you finish designing your web content the application automatically generates the HTML5, CSS and Javascript code.
How to Get Google Web Designer?
Just go to the Official Google Web Designer page and download the application, for the moment only available to Windows and Mac and Linux.
When we start using this tool we will find an initial screen that invites us to select a format for our new ad. It is clear that Google intends to seamlessly integrate its tool with its advertising network, making Google Web Designer the best program to make HTML5 banners, so we will find among the main options the selection of formats compatible with them.
The available environments are: DoubleClick, AdMob, Adsense and finally a generic option that allows us to change the HTML5 ad size and format. We can create three types of HTML5 banners: banner, drop-down and finally interstitial.
Once installed Google Web Designer and can easily look 5 different areas:
- Basic tool panel to create objects, text, zoom and so on.
- 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.
- 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.
- A Panel to the right that includes several elements like colors, properties, components, Css editor, Events, library and Ad Validator
- And Finally to the center the main area of work.
Graphic editing functions
Google Web Designer contains a basic editing panel, so we can trim, scale, fill with a color or make a stroke.
We can convert a previously created object into 3D, which is one of the most important features. By using this property we can rotate and move any object and if we create a new frame in a different position we will have an animation. The animation process is similar to Flash.
The text panel is very well integrated with other Google services. For example we can use a basic typeface or use any type of Google Fonts source simply by selecting an option from the list.
Le’ts take a look at some extra elements to keep in mind:
The component panel
Probably the most interesting panel of Google Web Designer. On the component panel, located on the right side.
Among the components available we can highlight:
- Gallery 360º
- Carrousel of images.
- Gallery of interchangeable images.
- IFrame
- Maps
- Transparent Action Areas (Tap Area)
- Video component
- Youtube Videos
Library
In the library panel, we can view all the files or assets that our banner use. We can also delete and add new elements
