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 banner on the right was animated in Google web designer as usual the template for this project can be found on Swift banners calm feel free to visit this website to check out other cool stuff ok so there are 5 elements which were pretty silent which will be imported into Google web designer the rest of the elements like the text button and the other texts have been animated in Google web designer ok so now it's time for us to go to Google web designer create a new file dimensions for this project are 300 and 600 type in your name 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 choose your gradient colors I will just copy and paste my color names from the other screen and as it's just quicker this way and their colors for this gradient will be red and a bit darker red this is just what fits the project now draw the background all over the banner area and I'm now going to properties section to check if position and size of my background are exactly zero for left and top position width and height should be 300 and 600 typing the ID name the layer name go to the gradient tool on the left and change the rotation of the gradient to vertical as this is my choice for this banner okay now let's go to the asset library section I will drag and drop my pre-designed files from the other screen and the first file 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 drop the race tik transform control and align to container so that we can automatically align this element to the center and to the top and now let's drag and drop the logo again align it to the center and to the top move it down a bit with Shift + down arrow that's okay now okay now let me add the red heart item again align it to the center and move it up a bit as you can see the Rays are completely covered and not visible at the moment so to make it visible we are going to do a little trick but first let me name my layers one by one and as far as the Rays file is concerned the bigger dimensions would increase its size so I have decided to make them smaller first so I'm going to double their size in Google web designer itself basically without losing quality as you'll see just by entering - and - and okay let's now add some text to our banner go to the text tool on the Left add the web fonts and enter our fourth snake fonts name which is great vibes selected and click OK and now let's change the text color I think it should be white click on the work area and enter our text which is just happy for now change the size to 48 and place our text in the appropriate position so align it to the centre and move it up a bit I'm adding everywhere separately because I want every word to appear slightly after another just type your words and place them in the desired position and change their size one by one so now it's Valentine's again change the size align it centrally and move it up a bit and now we will be adding the third word go to the text on the left click on the gray work area and type in day again our size is 48 I line it to the center and move it up a bit and now I want to quickly fix the position of all the words so I will choose all three layers at a time and I will move them with my arrow keys now another line of text let's choose the font first which is Leto click OK create the text area and type in your text this is just an example basically so my text which I find to fit the project type in just whatever you find attractive 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 light blue again I'm copying the name from another screen copy paste okay that's the color I want it and another line of text now so create the text field let's Center the text and type it in we are going to change the font size in a second because it's a bit too small yeah 18 is okay let's move it up a bit and the next element we are going to add is the button with some text on it so let's go to the tab tool change a saree choose solid color paste in the light blue and in this field type in 10 this is going to be rounding of the corners of our button now draw the button and obviously we need to align it to the centre of the banner that's okay now move it up a bit and now the text so first let's choose the font this is going to be great vibes again click and type in your text which is shop now change the size of the font to thirty sixth and align the text to the center of the banner move it down a bit and that's great let me quickly named by my button layer 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 animate out of the race we want them to spin around on their axis infinitely so let me first add a keyframe at 10-second mark for race alright so there it is the keyframe and in this rotation field type in 360 degrees go to preview alright it works perfectly now I would like the hard shape to show up so let me add a keyframe for this at half second mark where is the heart okay here it is we are at half second mark now and insert the keyframe insert another keyframe at one second mark and selects the middle keyframe now and type in zero and zero in scale fields and now right click set easing to ease click apply and remove the first keyframe now we are going to add keyframes for each of the words happy valentines and day I want these to appear one slightly after another so as you can see for each word the two keyframes are entered at slightly different times just follow what you see on the screen and you'll be okay set opacity to zero for every middle keyframe and remove the first keyframes for each word so opacity to zero and now I'm removing the first keyframes okay now I would like my sale line and check our sight line - 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 text above the top of my banner and now set easing to ease again click apply and for check our sight insert the keyframes here and here and again in the middle keyframe just move the text below the bottom of the banner and easing should be set to ease again apply and again remove keyframes at zero second marks all right now the button animation we need the keyframes at four and four and a half seconds marks so it's four four and a half and four the middle keyframe this one we need to double the size of the button in the scale field so so type in two and two in those fields 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 mark go to preview okay that looks great alright there are a few more things to add I first of all from the asset library section I want to add the cursor image I wanted to kind of slide and click on our button so drag and drop the cursor image and now let me name the layer and now add two keyframes at five and five and a half seconds so this is going to be the first one insert keyframe now go to five and a half seconds insert keyframe add five and a half seconds I'm going to put my cursor image on the button and then add a keyframe 0.2 seconds after the last one okay and with shift press decrease the size of the cursor a bit for the nice effect of clicking now we want our cursor to go back to its original size and position from keyframe at five point five let's add a keyframe just next to the last one go to the keyframe and five point five remember these values - 150 - 132 and 1/4 the size fields go to the last keyframe and enter 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 effect I wanted to get one more thing to do go to the asset library okay and drag and drop the little heart to our banner area okay now name the layer as you'd like and I would like this little heart to appear from the behind of our cursor exactly when it clicks 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 afterwards this is a bit tricky so make sure to follow my steps for the middle keyframe go to properties and scale should be set to zero and zero and now remove the zero keyframe right I'm now just checking if it works correctly 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 scale to zero is kind of visible as a little white pixel here and we don't want to do this so I'm just going to add another keyframe here 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 appears under the cursor let me go to preview all right yep that's what I want it I will just move the last keyframe a bit to the right so the animation for this little heart lasts 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 type in animation start at 10 second mark right click and choose add event edit event name and type in animation and accept double-click go to timeline go to and play page 1 and except our animation is looped now now go to components on the right choose tap area drag and drop name the layer as tap area and now we want to go to properties and we set position to 0 and 0 size to 300 and 600 so it goes all over the whole banner area now right-click the tap area just add event tap area touch and click and google ad and exit click this one type in the ID basically whatever you want the URL should be the address of the website the banner will direct the viewers to so Swift banners come in my case save go to preview ok that's perfect you can see the banner is looped and it directs 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 type in the name choose 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 banner services make sure to visit Swift banners calm and

Channel: Swift-Banners.com

Views: 155,565

Keywords: Google Web Designer Tutorial, GWD, Google Web Designer, Web Banner, HTML5 GWD, Valentine's Web Banner, HTML5 Banner

Id: fVSf4x_9cLk

Length: 21min 1sec (1261 seconds)

Published: Thu Jan 14 2016