:
Now comes the moment of truth, create a banner in html5 from scratch. Well, not from scratch. Usually, we have an initial design (.PSD, .AI) or a storyboard sent by our client with precise guidelines of what should be our animated banner.
You can get something like this: A main banner and its corresponding adaptations in different sizes.
We will focus on a specific size for this tutorial, we will choose 300×600.
First, we must identify the elements that our banner has to export them individually to the assets library ( The recommended format in .PNG, for its use of transparency).
So here we have a logo, text, two geometric elements and a call to action:
Now open Google Web designer, make a new file and set dimensions at 300×600, corresponding to the current size of our banner:
Now go to the library panel, click and the plus»+» button and search where your assets are
To match the original design you can change the color of your page, just go to properties of the document:
Now that your page is ready, go to the library panel, select all the assets and put them all in the working area.
Here comes a trick that can be useful: Simply import a complete image of the banner design in your working area. So this way you can position the assets exactly where they should be.
Now for the first transition select the layers of the logo and the 2 texts of the banner, then in the timeline place the mouse approximately in the 1-second mark, right-click and insert a new keyframe. Do the same procedure for the 2-second mark on the timeline:
Now to make a simple transition for our HTML5 Banner, in the 1-second mark of the logo let’s apply an alpha of 0% and then in the second 2 to 100% ( all this at the properties panel). As for the text, let them enter from the left of the banner, so, for this, with the cursor at the layers of the 1-second mark and then move them to the end (outside the work area).
With this same concept, you can animate the rest of the elements, in different instances of the timeline and using the properties panel (rotation, size, position, alpha).
Now if we want that all the transitions of our animation move smoothly, between each motion interpolation, right click and then adjust the Easing. ( There are multiple options, choose the one that best fits the desired result)
Finally, we have to install the clickTag to our banner. I recommend that you visit this article that we have already created where this subject is reviewed in depth.
I hope this tutorial has been helpful, thanks for reading.
