Yuma 4×4

Media and Communications

Responsive Ad Workflow – Google Web Designer

Responsive Ad Workflow – Google Web Designer


KENT: Hi. My name is Kent. I’m the creative specialist on
the Google Web Designer team, and I’d like to talk about a
responsive ad workflow using Google Web Designer. I’m going to start off by
opening up a template. New From Template,
Banner for Display & Video 360. And the third one down is
going to be the static one. Use Layout. By default, it’s responsive,
and there’s other sizes here. I’ll give it a name. Now, the first
thing I want to do is to see that it’s
responsive, so I’m going to switch to
my Viewport tool, and then the Responsive panel,
switch over to Media rules. Now, when I change
my Viewport, I’ll see the layout is changing. So let me switch back
to the Master rules. I want to make some
changes to my design and have that apply
to all my sizes. So now, in Master rules
and the Pointer tool, I’m going to import
some new assets. So open up my Library. And I’m going to
drag some assets that I have created over here. I’m going to want to
change the logo first. So I’m going to
right-click on the logo, and I can choose Swap image… I’m going to select my new
logo, and the same thing on the product. Swap image and then
choose my T-shirt. And I could try that
on the CTA, but I noticed that I don’t see
Swap image available, and that’s because the CTA,
I can see, is a div here. That’s usually a clue I need
to double-click inside of it. Now I can see my CTA image. And if I right-click on it,
I’ll see the Swap image. But let me show you a
different way of getting around that same issue. Back in my root div,
we have the Outliner, and when I select my CTA,
I’ll see it highlighted here in my Outliner. And there is a little
icon to open up. I can see that the
image is inside of it. By clicking here,
that’s another way of navigating
directly to that image and doing the same thing. I can Swap image and
select my new CTA. Next, I want to
change some colors. So open up the
Properties panel, and I’m going to click in the gray
area to de-select everything. This will set my
background color, and I can key in a hex value. So in this case, I’m going
to use a Google blue. And then, I want to
get to my root div, and I want to select
this background element, and this one I want change
from green to white. Now I want to change
my text color, so I’m going to select both
text elements in the Text panel. I can change that
from gray to white. Last thing I need to do is
to change the actual text. So I’m going to
use my Text tool. And I’m going to select all
here, type in my new text, and I’ll do the same
thing on my sub-line. One thing to notice here
is that in my Text panel, I have Text Fitting enabled,
and that allows this text to shrink in size. It’s set to 55 but
the fitted size is 23. It allows my text to grow
in size to suit the ad. So let me change to
the Viewport tool, and then switch back to
Responsive Media rules, and we should see
our finished ad. And the text is resizing
due to that control. So now we see the
changes we’ve applied are working in all layouts. So now, maybe I want to make
a change to one layout only. For example, this
size here, maybe I want to make some edits
to this media rule. So one thing I
might want to do is get rid of this
angle white box here. So you might be inclined
to hit the Delete key, and that’s not going to work. That’s because when
you’re in Media rules, you can’t delete elements
nor create new elements. That work has to be
done in Master rules. What I can do though,
is change the styles. So here in Properties I’m
going to change the Visibility to Hidden. And the same thing, I can
change other properties too. Let me change the background
color from blue to white. And then I can make
that text readable. Select both text elements, Text
panel, change that to black. So when I switch
back to Viewport, I can see the finished ad. And this is working in
all these different sizes, and I’m ready to publish it. Well, that concludes the demo. Thanks for watching.

7 thoughts on “Responsive Ad Workflow – Google Web Designer

  1. Nice tutorial! it can become a difficult task when you have a lot of animations. I do myself all type of display responsive banner ads in my studio adsspirit and often need a good Inspiration

Leave comment

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