Google Web Designer Tutorial - Cool Button Effect, Replay Button, etc., Black Friday Sale Theme

hello this is Anya from Swift banners calm today I am going to show you how to get the banner on the left in Google web designer and this is the file on the right so the banner on the Left was pretty signed in Photoshop and I am going to use this transparent PNG files and which were also pre-designed in Photoshop and the final design we have will have some nice features like replay button with an interesting animation as you can see on the right in a carousel gallery showing featured products together with navigation and click the shop button effect together with an animated free delivery text you can see the final result here on the right and one more time the whole banner from the beginning so let's get started in Google web designer create a new file type in your file name my environment is double click choose the right dimensions and click OK first thing we need to create is the background from my second screen I will copy the color name and I will paste it into this field that's right now I will create a background background rectangle on the right in position and size field we need 0 and 0 values and just below type in the dimensions of our banner yes it looks cool and now you need to name the layer as background next thing I will do is importing the required it's to the library and I will just drag them from my second screen and drop them to the library section yeah sorry it should be the lower box in the library section that's right once all the files are there we can drag the first one onto our design this will be the header we check transform and control and align to container we align it to the center and move it up a bit with shift and arrow keys I will just look up my pre-designed banner so that I have something to refer to during the design and I will rename the layer to sale so that I can identify it easily later on next part of my design are the animated lines so there they will be white and and their size will be two hundred and fifty and two pixels let me align it to the centre and rename the layer to up then I duplicate the line and rename the layer to down as it will be at the bottom okay now I create the rest of the lines you don't have to be super accurate as their dimensions and position can be changed at any moment in the properties section and this line should be two pixels wide and 20 pixels high I change the layers name to one I copy and paste this line and move it to the correct position by pressing shift and arrow keys and I rename the layer to two I will simply repeat this process with the rest of the lines that are required so you can follow on the screen to see what is going on rename the layer and another line this will be the fourth one yeah okay so I will now move half of these lines to the bottom just a bit as I think I will need a bit more space between them there will be some more text then I continue with the lines this one should be one pixel high and 50 pixels wide I type in the dimensions in the position and size section yes 50 pixels why the one pixel high and I move it to the correct place and I rename the layer to 5 the clearer than layers are named the easier it will be for you to identify them and now the last line I duplicate it I move it to the right with shift and arrow keys and I rename the layer to six it's time for some detailing we need the circles so corner rounding should be set to 45 pixels then we draw a rectangle which will will turn into a circle if your corner rounding is set correctly as you can see it is width and height should be 5 and 5 pixels when you have this little circle you place it at the end of the upper line and you you need to rename the layer I will just rename it to let's say left dot then you copy the circle and place it at the end of the second upper line and I will also rename the layer to right dot next thing we are going to do is placing the text on the banner so we need a text field at the top and in my case the text will be don't miss these deals it's not visible now but I will adjust the color later on I change the font to also old and in a moment I will change the color to white yep and let's change the size to 12 pixels and change the placement of the text on our banner yeah it looks better now I adjust it to the center now time for the next text I will start off with changing their with replacing the text field first I will change the font color to white and I will align the text to the center let's type in the text now in my case it's going to feature discount of some exemplary products yeah okay I think four lines will be enough I change the font to Oswald I set the text size to 30 pixels no 48 no it's too big let's set it to 30 and I move the text down a bit yeah it looks cool now so I think it will look better if we move these lines down a bit so that we gain a bit more space yeah and next thing to do is creating the background for our carousel gallery so what I need to do is to create a new rectangle I need to change that corner rounding setting back to zero pixels okay background is ready and I rename the layer to white background let's say gallery will be 250 pixels wide and 90 pixels high I align it to the center and move it up a bit yeah and now go to component section pick carousel gallery and drag it onto your banner in properties change the size to 300 pixels wide and 80 pixels high and align it to the centre layer name should be gallery now go to properties and encourage your gallery click on images from my second screen I will drag and drop some some assets that I will use later on and from components drag and drop gallery navigation adjust its size place it just under the picture gallery like I'm doing right now yeah align it to the centre move it up a bit and let's rename the layer to navigation next go to properties gallery navigation and enter the ID of the gallery this component will navigate let's change the highlight color to pink I'm just pasting in the name of code of the color let's go to preview and see how it looks like yeah it's it it looks okay for now okay so now let's create a pink border at the bottom of our banner yes that's the color it will be a background for our click to shop button yep and so I will rename the layer to pink and once this border is ready we need to create a background for our click to shop text as you can see on the right so I think white will look cool so I am creating a white rectangle there I will align it to the center and now let's drag and drop this click to shop text onto our banner let's align it and now you need to rename the layers for both the button and that next so it will be white button and let's say click and now select both of the assets go to edit create group and name their group button group let's say and in the layers section we also need to type in the group name button ok now I will drag and drop this free delivery picture from the library this picture will be later animated so let's keep it outside of the banner rename the layer and it also needs to be in a group so go to edit create group type in the name and rename the layer which will be free delivery in my case ok now we need to prepare our assets for the animation every one of these elements will start from a certain point so let's say this one Black Friday sale I will increase its size twice it will be invisible at first and will be turned around by 360 degrees so to do it in properties section enter 2 + 2 + 2 4 x + y 360 for that and for opacity we need 0 make sure you use exactly the same fields where I entered these values up and down lights and then lines will start from the center of the banner from the very same place so we move them so that they are on top of each other 1 2 3 & 4 layers will be invisible at first so I select all 4 of them and on the right I change the opacity to 0 5 & 6 layers will enter the scene from the left right so I move both of them outside of the banner our dots will be invisible at first so we need to change their opacity to zero as well don't miss these deals will first be really small and invisible so I need to change X&Y to zero for this layer and I change opacity to zero as well it will later in CLE increase its size our main text will be enlarged and invisible at first so I change X and y22 and opacity to zero Gallery and the navigation will be invisible at first as well so they all need changing the opacity to zero okay and the pink border will write into the banner from the bottom so it needs to be moved below the banner up and down lines let me select them they will have their size decrease to zero and opacity set to zero at first as well then they will stretch to both sides okay and zero good now we will take care of the animation let's start from layers one two three four four these layers we need keyframes at three three seconds and three and a half seconds then and then we select all last keyframes and we change the opacity of all four layers to one it will cause them to appear on the banner up and down lines will stretch to both sides for both of them we need to create keyframes on 0 5 seconds so we select both of them for x and y we type 1 and we also need to set the opacity to 1 that these lines will also need to move across the banner so we add keyframes and three and a half seconds on these keyframes we move the lines to the top and to the bottom of our banner as I'm doing right now but we need these lines to appear a bit earlier so we move both keyframes to 3 seconds and we change easing to ease for all the keyframes one by one okay let's check the preview now okay it looks fine so now I will animate the next elements that is lines five and six which will enter the scene from left and right so I will create keyframes for both of the layers and three seconds and three-and-a-half seconds okay so I move the lines to the right and to the left at the last keyframe so they show up on the banner and I change easing to ease for the last keyframes sorry to ease in easing to is in for both of the last keyframes now I'm going to animate the left hand right dot so at three and a half and four seconds I'm going to insert two keyframes and for both of the layers I will change the opacity to 1 okay let's now animate don't miss this deal so I will also create keyframes and three and a half and four seconds and at four seconds we change the text size on the right back to one and opacity also to one and on the last keyframe we change easing to ease okay now I'm going to animate the 70% of text which will appear in the center of the banner I create keyframes at four and four and a half seconds and at four and a half seconds I change the size back to one and opacity to one let's look up the preview yeah all looks fine now so now I will work on this sale header header I create a keyframe and 0.5 seconds and I change the size to 1 and 1 in the properties section I I will also change the set property to 0 so the button rotates nicely into the button manner and opacity needs to be set to 1 ok let's check out the preview yes everything works correctly there is nice rotation next element I will work on is is the click to shop button I go to edit to edit the whole group I copy the white button layer and I will change its name to black button and I will change the color to black so now I will create keyframes at one second one and a half second and two seconds ok and at the first keyframe I move the black button part to the left so it's minimized and I change the opacity to zero a same for zero seconds keyframe yes opacity set to zero and zero as well for one and a half seconds keyframe I change the opacity to 1 for 2 seconds keyframe I change the opacity to 1 as well and I also minimize the layer by squeezing it to the right then I create another keyframe just here and I change the opacity to 1 and I'll get another keyframe here I stretch the layer to the left so it appears full-sized and I change the opacity to 1 then yet another keyframe just before the two seconds mark and opacity changed to 1 and now you can check how the animation is going to look like and this is exactly the effect I want it okay now we need to add some labels as or events here here and here I I will now add some labels the first one is going to be called any for initiation then I create another label here I will call it mouse over okay then another label here just ER just after the second event it will be called mouse out and now you need to double click the first event just timeline and pause button group click ok and double click on the second event pick timeline pause button group okay and for the last event timeline go to and pause button group okay go to deve to check out our main banner and from components drag and drop top area I will adjust the size so it fits nicely over the button and I change the layer name to tap area one I add an event pick mouse mouse over timeline go to and play button and set the label to mouse over then I add another event mouse mouse out go to and play button and I change the label to Mouse out okay let's check out the preview okay there are peers to be some glitch in the button we will try to fix it from experience I know it's usually enough to go back to the original group move around these key frames a bit first a bit to the right okay it looks like it has helped but once I move these two back to back to their original position it still works as intended not sure why but it looks like a glitch in Google web designer okay so let me explain a bit how these key frames work these two need to be next to each other first with opacity zero and second with opacity set to one as you can see on the right so the animation of the black button appearing started right away these two key frames are exactly the same and that's because with our Mouse out label above the keyframe at one point six seconds the animation sometimes stops a bit squeeze to the right like this and these last two keyframes they have opacity set to 1 and 0 for the last one so the whole thing disappears completely in a blink of an eye let's check out the preview now yep it looks cool so far so let's get started with animating the button and pink layers let's move the layers down under the white background layer and the button should have opacity set to 0 for the pink layer I will now create keyframes and four and a half and five seconds and at 5 seconds you need to move the pink border up so it appears on our banner and change easing to ease for the button layer we need keyframes at four and a half and five seconds and at five seconds set opacity to one just after the pink border and the button appearing on the banner the white background gallery and navigation will also become visible so we need keyframes for all of them at 5 and 5.5 seconds and we set opacity to one on the last keyframes so the layers become visible I pick all of them and I set opacity to one so you can see now how it's going to look like and let's check out the preview yep the gallery appears nicely on our banner click to shop works fine so now we need to animate the free delivery text so we need to right-click on the picture go to edit and you can see it's not visible because the background is white and the picture is white but believe me it's there so I will create keyframes at half a second and four seconds and at four second keyframe we move the item way to the right outside of the banner then we add two events just before the half seconds mark and at four seconds for the first event I add a label I will call it mouse over two okay I think I need to move it to the right a bit and another label here just under the first event it will be called any two for initiation so now I click on the first event pick timeline pause delivery okay for the last event pick timeline play delivery okay let's check out the main banner as you can see this text could be moved a bit to the right but let's leave it for now I will now add more events to that top area the first one will be mouse mouse over timeline go to and play free delivery label should be mouse over - let's check out the preview okay it looks fine but as you can see it could be moved right a bit so let's click on this one go to edit and move the text a bit more to the right on the last keyframe it should be fine now go to our main banner check out the preview to see if that helped yeah okay it's now white way out of the banner so next thing we need is the replay button that's going to be our last asset I think and we drag and drop it from the library it's a bit too big but we'll correct it I align it to the right corner of the banner and I adjust the size now okay it's a bit too small yeah that should be fine I aligned the position a bit and let's change the layer name to read to replay okay I need to add another tab area just on top of the replay button and obviously we need to adjust its size it should be fine and I change their name of the layer to tap area too and last thing we need to do is to add a label at zero seconds we change its name to animation start and we add an event to tap area too so pick no not most tab area touch click timeline go to and play page one and animation start let's check out the preview okay this is the whole animation from the beginning free delivery works fine and the replay button yes it works correctly thanks for watching make sure to subscribe for more tutorials and in the comment section let me know if there are any tutorials you'd like to see in the future thank you

Channel: Swift-Banners.com

Views: 66,770

Keywords: Google Web Designer, Replay Button, Black Friday Sale Banner, Html5, html5 banner, Google Web Designer Tutorial, Tutorial, Swift-banners.com

Id: 7zLY8g3o078

Length: 34min 7sec (2047 seconds)

Published: Mon Oct 31 2016