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.
Không có nhận xét nào:
Đăng nhận xét