KENT: My name is Kent
I'm the creative specialist on the Google Web Designer team
and I'd like to show you how to get started with Google Web Designer
When you open the app
you'll see this welcome screen
and the two main choices are create new file and open template
In this case I'll make a new file
On this screen you'll see ad banner selected by default
but you have these other choices
I'm gonna enter a filename
and leave everything else as is
but quickly run through the other choices
I have my location set to Desktop
and that can be changed here
You can change the environment
sometimes I'm using Google Ads
You can change the size
make it responsive
and change the animation mode between Quick and Advanced
When you're ready click OK
Now I'd like to talk about the panels
You can rearrange these any way you'd like
for example move a panel group
or dock it to the other side
You can change the order of the tabs within a group
or create new groups
You can click a panel header to collapse or expand a group
Hover over the bottom of a panel group
until you see this double arrow icon
then you can click and drag to adjust the panel group height
or double-click to maximize the group height
I'm going to import some assets to get started
and usually I just do it by drag and drop
Even if I delete them now
I still see those files in my library
and I can also drag straight to the library
or use File > Import assets from the main menu
The first image I want is the guide
which I'll drag to my stage
and with the selection tool active
use my tool options to Align the container
and top
and left
I find using a guide just the quickest way to work
then I just create elements one by one
and position them visually
Next I'll start creating elements
which will be a little easier if I change my timeline to the advanced mode
This icon allows me to toggle between quick and advanced
and we saw those options in the create a new file dialog
Now I'll drag my logo to the stage
and we see logo in the timeline
I'll use the selection tool to move my logo
to the approximate top left position
then in the Properties panel which is the one I use the most
I'll click the chain icon to lock the aspect ratio
as I scale up and down
then click into the width or height fields
then I can use my arrow keys
to dial the logo into the correct size
Next I want to do the same thing with my product photo
These images I have created at the full final size
which is often the best practice
as a results in the smallest file size
If you're designing for mobile
you may want to save your images that double the final size
so they look sharpest on a Retina screen
So I have my product and logo images done
the next thing I need is the typography
So I'll switch to the Text tool
This is a good time to mention the tools in general
I mostly just used three tools
Selection Element and Text
Each time you change the tool
you'll see a different set of controls up here in the tool options bar
For example the element tool also known as the tag tool
has the modifiers div, image, video, and custom
which allows you to type any tag
I'll just leave it set to div
With the Text tool selected
you'll see options that are also available in the Text panel
and I'll just make sure its modifier is set to paragraph
and we've already seen that alignment controls available
when the selection tool is active
So with the Text tool selected
I'll draw a text box
for Google Home bundle
I use command a to select all these characters
and change the color to #888
and with my selection still active
I'll change the font to the Google font Poppins
I don't see Poppins in this list
so I'll click More fonts
now I can choose any Google font
and if I still don't see Poppins in this list
I can search for it
now I can select and see Poppins has been added to my doc
I'll click OK and now I see my font is Poppins
but I want to adjust the weight
In order to change the entire field
without adding a span tag
I'll change to the selection tool
and in the Text panel select medium from my list of weights
Now I'll click on the text box
and use the arrow keys to align with the top left corner of my guide text
then click in the font size field
and use arrow keys again to resize
And with it all set the last thing I want to do is resize the text box
so I'll need to uncheck this link icon
so I can change width and height independently
Now I want to create the next text field
and instead of duplicating the first text element
I'll create a new one which helps keep the CSS styles a little cleaner
I'll key in the text with the line break
and change to the selection tool
to set my color
and font
and weight
and size
Hit Enter now
and I can nudge it into position with the arrow keys
And last use my arrow keys again
to trim the text box size down
Note that by holding the Shift key I can jump ten pixels at a time
The last thing we need is the CTA
so here's where I'll use the Element tool
with the div modifier
To make it easier to get the exact size
I'll zoom the stage
You can use the plus and minus buttons
or double click to key in a value
So I'll draw a rectangle
and double click the layer to name it cta
Now I'll style it
So in the Properties panel I can assign a background color
and to set rounded corners
notice the link icon is active
so the four corners will be the same
Next I want to add some text
and I want to nest this inside of the div rather than layer it above
So I use the Selection tool to double click this div
which moves us inside that element
and you'll see this reflected in the breadcrumbs and layer names
I'll use the Text tool to draw a text box
and key in Shop now
then switch back to the Selection tool
so I can change the text styles on the entire element in the text panel
with color white
center aligned
Poppins font and medium weight
Now to position this text field
I'll use the Properties panel and this icon to change to percentages
which has several advantages
If I use 10 Left and 80 Width this quickly centers the element
The last step is font size
but I can't see my guide now
so to fix that I'll return to the root div
select the CTA and set its opacity to 0.5
Now I can see my guide
So double click the CTA again and I can finish off the text
The last step is to return to the root div
and restore my CTA to full opacity
Here's another advantage of percentages
If I change my button size with the selection tool
and enable transform control
so I get these resize handles
I see my text stays centered for any size button
I'll restore my stage to 100%
and I think that's everything
I'll toggle my guide visibility to make sure I have all elements in place
and if it looks good then remove the guide with the Delete key
Note that just using the eye icon will not remove an image from a published ad
You'll need to delete the layer from the timeline
A couple things I missed
which are hard to see are the background color and border
if I click in the gray area outside the stage
I'll deselect everything
and I can set my document page color to #fafafa
which is a very light gray it looks almost white
The other thing is the border
which I want on my top layer so it looks better
when I add some animation coming in from off-screen
I use the tag tool with div modifier again to draw a rectangle
and give it a one pixel gray border
Some settings you'll probably want to use for all your borders are percentages again
0 0 100 100 that way when you resize your ads
the borders update automatically
But there's one problem with this which we'll fix in the CSS panel
Right now my width and height are two pixels too large
due to the border width
so I want to add the style box- sizing: border-box
to make it behave the expected way
Let's add little animation
In the CTA layer right click at a half-second and insert keyframe
since I have the CTA at the end frame position now
I'm going to toggle up and down in both Translation X and Opacity fields
which sets those as animated properties
and I can confirm that by right-clicking the keyframe
Animated properties and I see both will be animated
Now I can click the starting keyframe and shift arrow left a few times
and opacity 0 which gives me a subtle fade in as I scrub the timeline
I can also right click linear to control easing
and select ease-out
We're just about done
We just need an exit event
so I'll deselect everything
and in the events panel click the little plus icon in the corner to create a new event
I'll select document.body
Mouse, click
Google ad
Exit ad
gwd-ad
And now on this panel I'll just add an arbitrary metric ID
and the full URL to my landing page
OK
Now I can preview my ad
and select the browser I want
I see my animation and when I click
I'm directed to my landing page
Everything looks good
A couple final things
in the Ad Validator panel
I'll see a real-time view of any problems with my file as I work
and I see all checks are passed
There's also Code view
which allows me to work by hand coding if I prefer
and all those changes will be reflected in Design view
The last step is to publish
and two common choices are pushed to Display & Video 360 if you're using that environment
or to Publish locally which is what I'll use
So on this dialog I normally just accept the defaults
especially Create zip
and I want to note the location of that zip file
because I'll need it when I'm trafficking the ad
I see the success message and we're done
That completes it
Thanks for watching