Google Web Designer is an interactive software on which you can create engaging, interactive HTML5-based designs, motion graphics, websites and banner ads. It is a standalone software available for free on Windows, Mac, and Linux.

Download & Install

It’s really easy to download and install Google Web Designer app. Simply follow the steps below and return back to our tutorial.

• First you need to visit Google’s official project page
• Then press the download link
• Select the appropriate folder on your local environment
• Open the downloaded file and follow the steps

Our idea

Before we start creating our first animated html5 banner, we need to have a basic idea on what we would like to achieve. Having said that let’s take a look at the conceptual graphic.

As you can see on the following graph, we would like to create a simple animation which has two screens, with different content on each. On the second screen, we would like to add a clickable button, which will take users to our website. Sounds simple… let’s see.

Assets

On this particular demo, we are not using any asset other than an image for our banner’s background which can be replaced by one of your choice. If you would like to follow the concept step-by-step you can find the background image we used on the following link : Photo by Samarth Singhai from Pexels

Let’s create our first ad!

Open the software and create a New Project by selecting the “CREATE A NEW FILE” option. On the next screen, give your project a name, like “Demo-01” and select the desired local folder on which your project will be saved. Next, on the “Environment” section, select “Non-Google Ad” and select 300x250px on the “Dimensions” option. Lastly select quick mode on “Animation” type section. Of-course you can select different values, according to your own needs. When you finish click OK.

Now, we need to import our image. To do so, click “File > Import Assets” or Cntrl+Shift+I , and select your file. Once the image is placed, change its size (if you cannot resize your photo with your mouse, then click the checkbox on the top toolbox “Transform Control” and retry) to better fit on our canvas. Remember to hold the Shift Key on your keyboard while resizing to keep the correct aspect ratio of the photo. As this is a basic tutorial, we will not cover masks, but you can find useful information on how to do it here.

Have in mind that our photo should be bigger than our canvas, in order to be able to animate it later. For this particular image, we decided to make it approximately 2 times wider and aligned it on the left side, so we can slightly move it to the left.

Once your photo is in place select the “Text Tool” from the vertical toolbox on the left. Click anywhere on the canvas and type your message.

Once you type your text, select the “Selection Tool” from the same vertical toolbox (first choice) by selecting the text you just wrote. While selected, click the option “Text” on your right panel box. From the panel’s options, you can select the font, color, size and more.

Make your text as you desire, and move them to the correct position inside the canvas.

As we need the same text-box on the second screen to appear with the same styles, we can copy and paste it now. Change the text inside the new text-box accordingly to mach your criteria.

Now we have to create our button. To do so, let’s draw a rectangle shape. On your vertical left toolbox, locate the “PEN TOOL”, press and hold your left mouse key and select the “Rectangle Tool” from the small panel. Draw a shape inside your canvas. Then select the new shape using your “Selection Tool” and edit its color and border from the panels on your right side. Once finished resize and position your button to its correct and final position.

Next, we need to add content inside our button. To do so, create a new text-box. Once you place and style your text, select both your button shape and text, right click with your mouse and select “Create Group”. Give your group a name and an ID (It’s important) and click ok. From now on, this component will act as one. Well, it makes sense…

Once we have all of our elements on screen, it’s time to create the timeline. Before we add any new key-frame, we need to hide the elements that we want to appear next. Think about it as a clip. Select one by one all the elements you want to show next, and hide them by decreasing their opacity.

Now, from your timeline section on the center-bottom of your screen, add a new key-frame. On that key frame, select the elements you would like to show and increase their opacity to 1. If you want them to move from its previous position just drag and drop them to your desired position. Start adding more key-frames and move things around until you complete your animation. It’s time to play …. 🙂

Last thing we need to add is a link to our button. Select your button and right-click. Select the option “Add Events..” or alternatively you may add an event from your “Events Panel” and target it to your button’s id. Next, you need to select the trigger point on which the action will be initiated. For that purpose we need a click event, so navigate to “Mouse > Click”. Next we need to identify the action, so select “Generic Ad > Exit Ad” and further select the receiver and complete the configuration form. That’s it! Now click on the “Preview” button and then Publish it by clicking the button!

Check our video