Google Web Designer Tutorial – Building a Valentine’s Banner in GWD

hi guys in this tutorial I will show you how to create a Valentine’s Day banner in Google web designer so the banner on the left was pre-designed in photoshop flag on the right was animated in Google web designer as usual the template for this project can be found on Swift flags appease feel free to visit this website to check out other cool material ok so there are 5 elements which were pretty silent which are likely to be imported into Google web designer the rest of the elements like the textbook button and another verses have been animated in Google web designer ok so now it’s time for us to be done in order to Google web designer create a brand-new folder magnitudes for this project are 300 and 600 character in your epithet the name of the file click OK ok we will start with the background so go to the tag tool on the Left choose line in your gradient and opt your gradient colorings I will simply follow and glue my pigment words from the other screen and as it’s just quicker this way and their colours for this gradient will be red and a bit darker red this is just what fits the project now reap the background all over the banner area and I’m now going to qualities section to check if prestige and immensity of my background are exactly zero for left and surface situate thicknes and meridian should be 300 and 600 typing the ID name the seam epithet go to the gradient tool on the left and modify the gyration of the gradient to horizontal as this is my choice for this banner okay now let’s go to the asset library section I will drag and sag my pre-designed records from the other screen and the first enter the first item I’m going to add our rays which are a bit too small at the moment as you will see but I will get back to this issue in a minute okay so drag and cease the scoot tik change control and align to container so that we can automatically align this element to the center and to the top and now let’s lag and descend the logo again align it to the center and to the top is moving forward down a little with Shift+ down arrow that’s okay now okay now let me add the ruby-red mind piece again align it to the center and move it up a bit as you can see the Rays are completely embraced and not evident at the moment so to make it perceptible we are going to do a little trick but first let me name my coatings one by one and as far as the Rays file is concerned the bigger aspects would increase its immensity so I has already decided to establish them smaller first so I’m going to double their size in Google web designer itself basically without losing tone as you’ll insure simply by record – and – and okay let’s now include some textbook to our banner go to the text tool on the Left add the web fonts and recruit our fourth snake typefaces reputation which is great vibes adopted and clink OK and now let’s change the textbook colour I think it should be white click on the occupation neighborhood and penetrate our verse which is just happy for now change the length to 48 and situate our text in the relevant plight so align it to the centre and is moving forward up a bit I’m adding everywhere separately because I demand every parole to appear slightly after another really kind your words and place them in the desired position and modify their size one by one so now it’s Valentine’s again alter the length align it centrally and is moving forward up a little and now we will be adding the third word go to the text on the left click on the grey-headed piece field and character in period again our sizing is 48 I order it to the center and is moving forward up a little and now I want to quickly fix the position of all the words so I used to select all three strata at a time and I will move them with my arrow keys now another path of textbook let’s espouse the typeface firstly which is Leto click OK create the textbook range and sort in your textbook this is just an example mostly so my verse which I find to fit the project type in just whatever you find handsome for the banner alright let’s change the font size first so this is going to be 36 and this part is going to be bold alright and now I’m going to change the color of the text it’s going to be daylight blue-blooded again I’m copying the appoint from another screen simulate glue okay that’s the coloring I demand it and another line of verse now so develop the text study let’s Center the verse and nature it in we are going to change the font length in a second because it’s a bit too small yeah 18 is okay let’s move it up a bit and the next point we are going to add is the button with some text on it so let’s go to the tab implement alter a saree choice solid pigment adhesive in the light-colored blue-blooded and in this field type in 10 this is going to be rounding of the areas of our button now extort the button and patently we need to align it to the centre of the banner that’s okay now move it up a bit and now the verse so first let’s elect the typeface this is going to be great vibes again click and category in your textbook which is shop now convert the size of the font to thirty sixth and align the textbook to the center of the banner move it down a little and that’s great let me immediately listed by my button bed alright and go to preview to to check how it looks like alright so now it’s time for the animation all right so the first thing I would like to enliven out of the scoot we want them to spin around on their axis infinitely so let me first lent a keyframe at 10 -second mark for scoot alright so there it is the keyframe and in this rotation field type in 360 positions go to preview alright it runs perfectly now I would like the hard shape to show up so let me add a keyframe for this at half second score where is the heart okay here it is we are at half second celebrate now and slip the keyframe insert another keyframe at one second mark and adopts the middle-of-the-road keyframe now and sort in zero and zero in scale realms and now right sounds specified easy to ease click apply and remove the first keyframe now we are going to add keyframes for each of the words happy valentines and date I miss these to appear one somewhat after the other so as you can see for each name the two keyframes are entered at slightly different times merely follow what you appreciate on the screen and you’ll be okay determined opacity to zero for every middle keyframe and remove the first keyframes for each command so opacity to zero and now I’m removing the first keyframes okay I would like my marketing direction and check our view word – sliding slowly from the bottom and the top of the banner so in order to animate this add keyframes at three and three and a half seconds this keyframe will move the textbook above the top of my flag and now positioned naturalness to ease again click apply and for check our spate insert the keyframes now and now and again in the middle keyframe simply move the text below the bottom of the banner and easy should be set to ease again apply and again remove keyframes at zero second symbols all right now the button animation we need the keyframes at four and four and a half seconds markers so it’s four four and a half and four the middle keyframe this one we need to doubled the size of the button in the scale field so so character in two and two in those realms and opacity needs to be zero and as usual easing should be set to ease click apply and now SHOP NOW line we need keyframes and four and a half and five seconds at four and a half we are going to type in zero and zero in the scale fields and again opacity should be zero easing easy and remove keyframes at zero seconds celebrate go to preview okay that looks great alright there are a few more things to add I first of all from the asset library area I want to add the cursor epitome I wanted to kind of slide and click on our button so drag and drop the cursor epitome and now let me name the blanket and now compute two keyframes at five and five and a half seconds so this is going to be the first one implant keyframe now go to five and a half seconds slip keyframe supplement five and a half seconds I’m going to make my cursor likenes on the button and then supplement a keyframe 0.2 seconds after the last one okay and with shift press increase the size of the cursor a bit for the nice effect of clicking now we want our cursor to be going to its original size and prestige from keyframe at five point five let’s lend a keyframe just next to the last one go to the keyframe and five point five retain these values – 150 – 132 and 1/4 the sizing disciplines go to the last keyframe and participate the same value so – 150 – 132 and one and one again so it should be okay now uh I would like to preview the banner okay it’s definitely clicking so that’s the effects I wanted to get one more thing to do go to the asset library okay and lag and drop-off the little nature to our banner sphere okay now name the seam as you’d like and I would like this little heart to appear from the behind of our cursor exactly when it sounds on the button and so in order to do this just enter a keyframe at at this point yep this should be okay and the next keyframe should be one second subsequentlies this is a bit tricky so make sure to follow my gradations for the midriff keyframe go to dimensions and scale should be set to zero and zero and now remove the zero keyframe right I’m now really checking if it wreaks precisely yeah it’s going to do the job so in the last keyframe and the scale should be set to three and three okay right now as you can see this white little heart magnitude to zero is kind of perceptible as a little white pixel here and we don’t want to do this so I’m just going to add another keyframe now and this keyframe is going to have a positive set to zero this one opacity set to 1 and the last keyframe opacity set to zero all right so it kind of disappears and emerges under the cursor let me go to preview all right yep that’s what I crave it I will simply move the last keyframe a bit to the right so the living for this little heart last-places a bit longer and basically the last thing we want to do is to loop the banner so go to the add label button right click on edit label and nature in living start at 10 second mark right click and choose add incident edit event word and sort in living and abide double-click go to timeline go to and play page 1 and except our animation is looped now now go to ingredients on the right choose tap area drag and lowering mention the bed as tap locality and now we want to go to belongings and we rectified position to 0 and 0 length to 300 and 600 so it goes all over the whole banner area now right-click the sound arena precisely add phenomenon sound neighbourhood stroke and click and google ad and depart click this one sort in the ID mostly what it is you demand the URL should be the address of the website the banner will lead the sees to so Swift banners are now in my occurrence save go to preview ok that’s perfect you can see the banner is looped and it guides us to Swift banners calm so that’s basically all we wanted for this banner now we want to publish the banner so go to publish to publish locally and category in the epithet prefer the location make sure the banner is under 150 kilobytes for Google Ads and click on publish thanks guys for watching if you’re interested in some flag works make sure to visit Swift flags tranquilize and


As found on YouTube

Share this article

Leave a comment

Related Posts