Getting started with Google Web Designer: how to create a simple banner ad

Articles

Getting started with Google Web Designer: how to create a simple banner ad


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

Leave a Reply

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