In which we indicate the parameters of our figure (in our case, these are the parameters for rounding the corners, as well as the fill color – for this, I remind you, use the “Properties” panel located on the right). To do this, similarly to paragraph 3, add a keyframe on the timeline: For the interest of the experiment, we will also change the fill color of the figure from yellow to green. Now let’s try to transform a square with rounded corners into a simple square. You can not only adjust the time for changing key frames, but also change the transition style:Ħ. I emphasize that in the example the transformation is looped for endless repetition, but we will discuss this issue a bit later :)) (upd: the demo for some reason does not work in the Chrome browser, but works great in Opera):īy the way! If you are confused by the frame rate (now it is 0.5 seconds) – by changing the key frame settings (this is available in the time panel): To do this, click the “Run” button located on the timeline:Īs you can see – the circle that we created on the first slide is very simple, and most importantly – automatically – it transforms into a square with rounded corners, shown on the second slide (you can see how this happens on the frame below. Moreover, the figure itself will look something like this:ĥ. If we want to get a square with rounded corners – just change the parameter from 80 to (for example) 30. In the screenshot above – the properties of the drawn corners, thanks to which a circle is created. To adjust the angles, use the property responsible for drawing angles: To do this, on the first frame, select the starting position of our figure, and on the second – the ending position, and using the “Properties” panel (recall, it is on the right) – we transform the circle into a square with rounded corners. And now we begin to transform the circle into a square with rounded corners. On the timeline, by clicking on the “+” icon, add another frame to the existing one. Let me remind you that you can adjust the shape fill, as well as work with other parameters using the “Properties” panel, located on the right:ģ. Using the “Work with Tags” tool, create a circle, and for clarity, fill it with yellow. As in the last lesson – I take as a basis the size of 300×600 pixels with a fast animation mode.Ģ. If you don’t know how to create a square or circle in Google Web Designer, see this post.ġ. For example, a circle in a square with rounded corners, and then in a square. Step 10: Export the created YouTube Video as HTML to serve as In banner video on your ad serving platform.Today, with the help of Google Web Designer, we will learn how to transform one simple geometric shape into another, and then into a third. Preview button available on the top right corner. Step 9: YouTube Video Banner is created now and preview the creative in browser to check locally. Under “Properties” –> “Youtube” –> Enter “Name” and “URL”, Also adjust other properties like control, auto play, etc. Step 8: Next step is configuring video to the banner. Step 7: To adjust position and dimension just alter the numbers on “Properties” –> ” Position and Size” Step 6: Once you dropped the component, layer will be on different position and dimensions like below, Step 5: Click Components on the right panel and drag “YouTube” and Drop on the staging area, Step 4: Once you created the new file, empty ad will appear on the GWD staging as below, Step 3: Enter Name, location and size of the ad which you want to create. Step 1: Download Google Web Designer and Install it See the tutorial to create video ads of your own. This does not require any HTML5 coding skills. Google Web designer is the free HTML5 design tool which allows the user to create drag and drop design. Simplest way to use YouTube video as In banner video using Google Web Designer (GWD).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |