With its latest product, Google Web Designer that helps users to create motion graphics with a lot of ease, Google has a great say in this battle too. Maybe many of you already heard about it and they are using it, but how many really know how to master this new program? In order to aid you, we decided to write the most important things about this animated HTML 5 creator, including a couple of tips and tricks and a small range of guidelines.
Google Web Designer – an HTML5 animator
Recently, Google added a new application to their portfolio that is simply called Google Web Designer. At this point when the app is only a beta release, it provides a way to create amazing and interactive ads and not websites, which are based on the versatile HTML 5 technology. They chose this particular technology to offer a way to create projects that are accessible on any screen. Furthermore, the app is loaded with a great number of interesting features, such as Full 3D Environment, Design / View Code View, Illustration Tools, Two Animation Modes (Quick and Advanced) and more.
Take a tour
The first thing you have to do when open the program is to take a tour of the Google Web Designer in order to accustom with its interface and tools. As soon as you’ll open the program you’ll see that you can do a bunch of different things with this application, like designing your projects in two different modes (Design or Code views), testing your ads in various browsers by pressing the “Preview” button and immediately publish the final work on your favorite ad network. In order to get familiar with Google Web Designer and for more information about it, go to the following link and watch a full walk-through made by its developers.
Add Text and Tags to Your Projects
Google Web Designer was essentially made to be a simple alternative to the complex and bulky professional applications that cost a lot of money. That’s why, developers offer a quicker way to transform your text into paragraphs, headings and links while using a huge library of open source web fonts. Furthermore, it was never simpler to add tags because this app has an easy-to-use Tag Menu that helps users to add div images, video and custom elements to their documents. The app also permits users to change the color of the tag and its border radius with a lot of ease, because these operations involve only a couple of clicks. For full explanations about how to add these things to your projects, go to the following links and watch the movies that explain how to add text and tags to your ads.
Use the Google Web Design Forum
If you encounter any trouble in making your project or you just want to share your expertise, go to the official forum. Here, you’ll find a big community of users from all around the world who help each other in order to obtain their desired results. Also, Google developers monitor the forum and offer ideas, insights and solutions about how to squeeze the most of this app. So, don’t wait longer and join the discussions on Google Web Designer forum by accessing the following link.
Master the Components
The Components feature represents pre-built modules that are used to add different functionality to projects. In order to get the most from your ads, you have to know what each one of the components does and use them in their appropriate meaning. So, here is a list that contains the features and some basic information about them:
360° Gallery – This feature permits users to add multiple images and create an ad that presents a rotating object. The last image will merge with the first one, which will allow users to rotate the ad in either direction. Carousel Gallery – With this feature users can create a gallery with multiple images that looks like a carousel. Swipeable Gallery – If you choose to use this Component, the program will create a gallery of images that users can swipe in both directions. iFrame – This functionality lets users to add and load different URL elements to their projects, like HTML pages and videos. Map – It permits you to add user’s location, as well as other location-based information within your ad. Tap Area – This Component creates an opaque element that can be positioned over other parts of your project. This transparent part can be used as a trigger when the user touches or clicks it. Video and YouTube – These two features allow users placing videos or YouTube content in their ads.
Learn the Keyboard Shortcuts
It was never simpler to work with a program of this kind, because many of its tools can be easily selected and used by pressing a combination of keys on your keyboard. The following keyboard shortcuts are the ones that can help you most:
New File – Ctrl+N (for Windows) or Cmd+N (for Mac OSX) Open File – Ctrl+O / Cmd+O Close File – Ctrl+W/Cmd+W Save – Ctrl+S/Cmd+S Select tool – V Tag tool – D Pen tool – P Text tool – T Rectangle Shape tool – R Oval Shape tool – O Line Shape tool – L Paint Bucket tool / Ink Botttle tool – K 3D Stage Rotate tool – M Hand tool – H Zoom tool – Z
Change CSS Styles
The application is able to edit the styling for the any element you want, add an inline to the class or create a new one through an easy-to-use CSS panel, which can be found in the bottom right side of the interface. In the following lines we will describe how to easily do these operations:
Create a new style – Via the CSS panel press the “Add” button that can be found at the bottom of the panel. Then, press another time on “Add” in order to add a new value or property. Add an inline style – Select the desired element and click the “Add” button in the inline section and write the property or value pairs. Modify a style – Select an element and the program will automatically show the styles that are associated with that particular part. Select on a value or property to change it and click the “Add” button to add new values for them.
Preview and Publish Your Work
Google Web Designer permits users to make these two operations with so much ease, thanks to its simplicity and efficiency. When it’s about of publishing your final work, this app helps you to upload it on any platform in just seconds. Press the “Publish” button which can be found under “File” and choose between AdMob or DoubleClick ad technologies and the generic option which lets you upload the project on any other ad network. Also, you can preview the working progress in your favorite browser as soon as you started to design your ad. The application recognizes the installed browsers from your computer and permits you to run your project in either one of them. To do this, press on the selection arrow placed on the “Preview” button and choose the desired browser from the pop-up list and after just press on “Preview”.
