Sa online ads we meet as soon as we open the search engine, and do you know how these ads are actually made?

Google has created a powerful tool that allows us to design and create quickly and easily HTML5 ads and commercials, will use a visual and code interface. This is a complex program that contains a large number of possibilities. Google Web Designer (GWB) also offers a set of components that allow us to add image galleries, carousel, videos.

And best of all, it's completely free.

How is Google Web Designer used?

Google Web Designer you can download at the following link.

"Okay, I downloaded the program, what's next, this is too confusing," you think to yourself for sure.

Introduction to the program

Once downloaded and installed Google Web Designer, the first challenge we face is creating a file:

On the left side of the interface, select the ad type (Banner, AMPHTML Banner, Expandable and Interstitial) or one of the listed options (HTML, HTML with Pages, CSS, Javascript and XML).

For now, we'll stick to the banner ad. We move to the right part of the screen. We add the name and location where we want the material we work with in the program to be stored. The next item is the environment for which our ad is intended. There are 4 options: Display & Video 360, Google AdMob, Google Ads, Non-Google Ad. Depending on the platform for which we create the ad, we will choose the appropriate option. 

This time we will choose Non-Google Ad and appropriate dimensions, we will not check responsive layout and we choose Advanced Animation Mode, so that we have more options when creating an animation in Timeline segment.

Google Web Designer interface

After creating the project, we encounter the main interface Google Web Designer program. The interface is divided into several main parts. In the central part, we have a large area for building a project and editing the code itself (basic desktop). There is a toolbar at the left end of the screen, at the bottom of the screen timeline, and on the right is a set of panels that allows us to change and add colors, elements, components, various ''event'' and many other options.

In the upper right corner Google Web DesignerThere are 2 modes for creating ads:

1.     DesignView, where images, text and other elements of our document are visually displayed, just as they will look on the browser
2.      Code View, where it is shown in the document code itself

Tool menu - Tools

There is a toolbar on the far left.

It contains all the tools needed to create elements (text, shapes, masks (). We use the toolbar to create text and add the elements we want to have in the ad.

Timeline

With help Timeline-and we create animations along the way keyframes. Keyframe represents the position of a particular object at a precisely defined moment. This allows you to determine in time when which component will appear and in what way. In advanced mode, each element is animated by adding keyframes na Timeline to indicate where the animations begin and where they end.

We now turn to the animation of the object. If we want, for example, to text GOOGLE WEB DESIGNER we animate so that it appears on the left:

U Timeline segment must be added 2 Keyframe-a, one where the text is outside the desktop on the left and one in the position where it is currently located.

Right click on timeline where the text is located we add Keyframe-s when we want. We choose the first one and change the position of the text so that it is outside the desktop.

The second Keyframe is the position in which we want the text to remain, more precisely the one from the beginning. By moving scroll u Timeline we can check what the animation looks like.

Panels

Panels within the Google Web Designer program include items on the right side of the screen, in order: color palettes and text, display of current elements on the project, properties of the selected object (position, rotation, fill…), components.

Object properties

Changing the structure of an object in Google Web Desginer is done manually (moving, enlarging the object with the mouse) or using the panel on the right.

In the space on the right there are options for:

1. the position and size of the object (it can be expressed in pixels or in percentages).
2. rotation, 3d rotation and ratio in length, width and height
3. style, color and size of the frame, whether it will be curved or not
4. visibility of the object (from 0 to 1), where 0 implies that the object is completely invisible

Component

Components are pre-built modules that allow ads or HTML add certain functions to documents. They are organized within several smaller sections that are expanded by clicking on the name of one of the sections.

We will single out a few:

Galleries:

• 360 'Gallery

• Carousel Gallery

• Gallery Navigation

• Swipeable Gallery

• Transition Gallery

• Amp-carousel (only allowed with AMPHTML ads)

Interaction:

• Add to Calendar

• Gesture

• Image Button

• Parallax

• Tap Area

• Tap to Call / Text

In this text, we have introduced you to the interface and basic functions Google Web Designer program. Google's a product that makes it easier to create ads for both beginners and those with more advanced knowledge. In one of the following texts, we will deal in more detail with all the components and other functions Google Web Designra.

Digitizer is here to support you in designing an advertising appearance on Google-u. Contact us!