PAUL: Hi I'm Paul from Google
and today we're going to show you how to build
a Google Ads compatible banner in Google Web Designer
If you don't have Google Web Designer installed
visit the site to download it for free
Now that you have it installed go ahead and open it up
You can create a new blank banner
start from a pre-built customizable template
or open an existing file you've already created
For this video let's create
something from scratch
Under environment
make sure to select Google Ads
If you select any other option other than Google Ads
your creative will not upload
correctly
give it a name this can be anything you want
set the destination
folder, set your dimensions
and choose either Quick or Advanced animation mode
finally click OK to create your ad
If this is the first time you're using Google
Web Designer
I highly recommend you check out the YouTube channel
and visit their Help Center
to get more familiar with the tool
To start I'm going to draw
out a new div
and give it a blue background color
Let's use a custom font from Google
Cloud fonts
Select the text tool and click the add fonts icon at the top
This brings up a list of available cloud fonts I can use
Visit the Google cloud
font site
to see even more details about each font
and find the right one for your ad
Let's search for Roboto
and choose Roboto Slab by selecting it
Now it's available in the fonts drop-down
Drag out a text box area and type some
text
Let's adjust the font size to make it
larger and change the color to white
and let's make it bold and center it
Great! Looking good
next let's add an image in our creative
by dragging it
from our local folder onto our page
I've already compressed this image
so it's as small as possible
while retaining the quality I want
I'll switch
on the transform controls
and resize it down to fit
then move it into place and use stage
align controls to get it centered
Perfect
Now let's add our call-to-action button
Let's make a new div for a button
but let's add some rounded corners
Adjust the border radius to your liking
and draw out a button area
Now let's give it a background color
and move it into position
Finally I'll add some text over our
button
Now let's add some animation
we can
easily add an animation
by transitioning between different scenes
When you make a new scene
it captures the current position
and properties of everything on our page
For more information on creating animations
see the Google Web
Designer Help Center
I want the main headline text to fade and slide in
to accomplish this I'll first move the text area down
and then adjust the opacity
property to zero
This will be the beginning state of my animation
Then I create a new scene
by clicking the add scene button
This new scene will be the
end of our animation
so I'll put the text back in its final spot
and adjust
the opacity to 1
Now I can click Play to view the
animation
Now we're done
Let's preview and then publish
Click the preview
button to view your ad in a browser
We see the text slide and fade in
Go back to Google Web Designer and choose publish locally
On the publish screen we
can verify the settings look good
and click publish to create a zip of our
creative
This can now be uploaded directly to Google Ads
For more information please watch the video on uploading to Google Ads
In this video we
showed you how to create a new banner
from scratch using Google Web Designer
We added some quick animations that look great
the output is ready to go in your
Google Ads campaign
Thanks for watching!
