AdSkills | Building HTML5 Ads With Google Web Designer

July 25, 2019 posted by

hey there and welcome to another add skills tutorial in this video we'll be talking about how I create html5 ads with Google web designer if this is the first time you've ever seen an ad skills video I just want to say welcome my name is John Belcher and the teacher here and I'm excited to share my knowledge so very quickly what we're talking about html5 ads are animated ads it can be used in Google AdWords if you've got a designer in your team and you want to go through and try out some html5 ads before you go full force to be how to do it for your entire strategy this is a great resource to have so html5 our ads are great because they produce better CTR which gives you better cpc's with AdWords also you know banner blindness is a real thing whenever you've got animated ads it removes it because something's kind of jumping off the page of people and if you look at the top ads you know a lot of the companies that do a ton of display and native advertising utilize html5 ads because it pops it's something that really stands out it works it's been proven to work so going through and finding a way to produce some is important to know if you want to be really be successful with display advertising so what do you need in order to create them well you have to have image layer so transparent PNG files I use adobe illustrator i'll show you the layers that i've got but you have to have a designer that can go through and cut your ad from one image into five or six images that are layered on top of one another because you're gonna animate some of them and then you're use a tool called Google web designer so I use it go through and animate and export everything for Adwords you can use it for double-click if you're using double-click it's just a very nice tool it was built by Google for Google Ads and so it allows you to go through and you know do your animations export it into the file that AdWords accepts and then upload it very easily so the steps to the process of making html5 ads there's five of them first you have to get transparent layers I always export mine in a three time scale so your designer will know what that means if you don't that's fine but you just want to make sure you know you've normally we're talking about 300 by 250 AD you just want to make sure that when you render your images they're blown up three times scale so they're sharp when they're shrunk down I did not do that recently and the image looked terrible so we to go back and redo it once you've got your layers you can import them into Google web designer go through and do your animation export it to a zip file and upload it into Adwords and one of your campaigns so I'll show you how to walk through all these steps first thing I want to do is introduce you to Google web designer so if you just Google Google web designer very simple you come in you can download the beta there's not a whole lot to it so if you don't know any code I don't know code I go through and build these no problem if you do no code you have the ability to go in on the backend and actually alter it if you want to or if you have somebody in your team that can handle that so really this is just a visual builder come through and download it it's a tool that is this is what it looks like it's great it you've got pre-built templates and things like that so I'm gonna create a new file as the skills and so in here we've got the dimensions 300 by 250 I want it to be Adwords and it makes you quick this is all we need so there's other things you can come in here and do I've always done banner ads simple the size that you need it's got all the sizes loaded in here 300 by 250 s where I always start testing and I highly recommend you do too so you'll click OK this is what your ad would look like so now I need to come into my library and upload my images and so in here I've got three as you can see it says at three X I've got three times there's four images that are three times the size so come in here drag my background as you can see it's a lot bigger than the ad so what you're gonna do is come up here you will you'll want to make sure that your dimensions are linked and so my width is gonna be 300 I'll change it to 250 and then what I want to do is align this to the container and then I will Center it and then I'm gonna lock this so I come down here and I'm gonna lock that to this can't move that will come in here and I will do this for all of my individuals so 870 divided by 3 its what is that this is what's nice about Google having a calculator 870 divided by three three hundred and two hundred and ninety right yeah so this will lead to ninety and then we will do our copy 700 – 33 – 33 and so all I want to do here I'll show you got my text and we use I'm using the fish oil stuff because that's been such a big part of our Google Display Network course just to make sure that it all flows 586 divided by 3 195 okay so now I've got the basics of my ad we just send these so what I want to do is come through with this particular image that the headline and I want to have it start small pop out and then settle in so it really is catchy to the user and so that's how I'm gonna do that is the translation rotation and scale this is how you can move stuff left right I'm gonna leave that at zero this say you rotate you can rotate front back all the different things and what we'll talk about ready to do it here in a second and so then the last one is the scale so I want this to be I want to start at zero I'm going to set a keyframe which do you just like so I did was right-click and I'm gonna insert a keyframe at one second so what I want this to do is gonna start at zero at one second I want it to be one and so if we looked at that I brought this back here and press play it would just look like that but that's pretty boring let's not catch anybody's attention so what I always like to do is come in here I'm going to add another keyframe and I'm gonna make this one point two and so now what this will look like is BAM okay headline popped interesting and then what we'll do next is I want the fish to actually wiggle so I'm gonna take the fish go to one second I'm gonna move this so at one second got the headline pop now what I want this to do so I want this to go up to my rotation here so my Z's what's going to rotate so I think what I'm gonna do is just have this go back and forth probably every second so I'll do a keyframe here I'll make this a negative five another one at 3 seconds 5 negative 5 and so if I came back here and played this now we've got our fish moving while the fish oil scams pops so I think what I do here is I'm just gonna move this stuff down this way so that when the fish oil pops this everything will be you know a piece at a time so fish oil scams and then the fish starts moving this is kind of the way that we go through and get people's attention and so this is just a really easy way to go through and make an ad you can test that you've got different images that that pop is really important so it's cool to see this in you know inside a web designer that you've gone through and created something but you know I always like to preview what it would look like out in the wild so you have the ability click preview and this is on Chrome what the ad would look like so once you've got looking the way you want to you'll click file publish I do it locally and I just put it into a folder it'll go through and publish it so what I want to make sure that you see is from the ad this is what the ad folder looks like this is a ton of stuff that you don't even want to get into it's all the information that Google needs so all you're gonna do is when you're uploading this into Google which I'll show you to do here in a second you just want to make sure that you are accessing this zip file this is the one that we want so I'm inside of our AdWords account now if I'm gonna just click the plus sign let's say we'll do a display campaign no goal continue and then I'm just gonna show you how it create an ad I would upload a display ad choose file as you can see right here it says my file is too big it's 248 rather than 150 so what I may do is go back and look at reducing my image sizes from three times down to two times this happens every once in a while really the biggest thing is just making sure that you your file doesn't have too much too many animations to go through and upload it if it's got too much bulk to it Google will not serve it but that's the process you used to go through and build your html5 ads using Google web designer I know this was a long tutorial hopefully you give it to your designer and they can go through and actually create this stuff for you and help you get it done it makes a huge difference going through and getting your click-through rate to increase and honestly that's that's what this game is all about so if you found this tutorial helpful and want to learn more about how to effectively advertise on Google make sure to check out our Google Ads pathway it includes our bulletproof YouTube ads bulletproof AdWords ads and bulletproof GD and ads courses and honestly it's the culmination of my experience when I worked at Google my time with clients afterwards and Justin's experience with clients is all wrapped into one if you want to be successful advertising on Google this is the number one resource that will help you do it and if you like free stuff don't forget to check out the ad skills quarterly giveaway the link is in the description if you like free stuff like Amazon gift cards Barnes of Noble gift cards Xbox Playstation and even Bose headphones make sure to check it out we give away stuff every quarter and all you have to do to enter is subscribe to our youtube channel like our facebook page follow us on twitter little things like that so don't forget to head over there and enter yourself with a chance to win thanks so much and have an awesome day


8 Replies to “AdSkills | Building HTML5 Ads With Google Web Designer”

  1. Stoyan Krastev says:

    Useful info. I do myself all type of display banner ads in my studio adsspirit com and often need a good Inspiration for my work

  2. Computer Learning says:

    Sound is very low

  3. Manish Yadav says:

    Dear AdsSkills, Please suggest how to make kind of banner in the link provided and also how to promote them :-

    I am trying to figure it out from last 3 months but I could not, Please help.

  4. Re/Max Vip Team Realtor says:

    Hi John. I removed all pictures from project and save it as a zip file only with back ground color just to test it and google ad words give me the same message. "We could not upload 1 of your ads
    close Jan – The file is 352 KB. Upload an ad less than 150 KB in size."
    I am sure every body experience the same problem. Please help.
    Best Regard

  5. Re/Max Vip Team Realtor says:

    Hi John. This is awesome. been looking for long time for this. You are the best! Do you have tutorial how to resize this project ? I know you mention before just to resize images, but like to see YouTube tutorial, up to the end when you are uploading your project to google with correct size . Thanks

  6. HedonAdventures says:

    How do you lock the layer? Your face video box is just in front of whatever you are clicking.
    I mean where do you click right after the background dragging: time point 4.10

  7. Jason Fletcher says:

    No CTA?

  8. Mike Buontempo says:

    This is awesome, gonna test this out this week. Thanks John

Leave a Comment

Your email address will not be published. Required fields are marked *