KENT: Hi my name is Kent
I'm the creative specialist on the Google Web Designer team
and I'd like to show how to use
masking in Google Web Designer
Masking means showing or hiding parts of an element
For example photos are rectangular
but we can add a mask to
make it circular
and the effect may be easier to see
when you're not working
with the plain white background
to emphasize the element is becoming
transparent
rather than just being covered up
There is one big limitation
to be aware of
only rectangle clip path masks work in all browsers
and the other
mask types I'm going to show
have limited support in different browsers
So let's see what we can do with the rectangle mask
Here's the effect I want
to create
I want to wipe away some text with a
vertical barn doors effect
and this text can be dynamic
which becomes a pretty
powerful effect on a custom ad campaign
To recreate this I'll start with a new
blank file
and just give it a name
I'll add some images to my Library panel
bring in my background photo
and position it with the alignment controls
Then with my Text tool draw a text box
and key in my headline
Switch to the Selection tool
and in the Text panel
choose a nice heavy font
and make it larger
Then I can use the CSS panel to
tighten up the line height
so my text really fills the space
Now with it selected
I want to point
out the clip path mask tool
and note three options rectangle oval and polygon
I choose rectangle which works in all browsers
and draw a shape
Notice when I
release the tool
the mask is instantly applied
I've essentially drawn a window
through which I can see my masked element
Next in the Properties panel
I can make the mask tall enough to reveal the whole sentence
Now I'll set a couple
keyframes by right clicking
and with my last keyframe selected
move the mask
down to about the center of my text
and make its height zero
I usually add some
easing
so right click linear, change to ease-out
and play to see the effect
Now let's talk about some advanced
masking features
which again will not be supported in all browsers
First let's look at those other clip path options
I'll delete this mask
select the Oval
mask tool
and hold down the SHIFT key to draw a circle
set a couple keyframes on
the mask
On the middle keyframe in the Properties panel
make sure Width and
Height are linked
and reduce the size to 0
Now I want to move it but it's hard to
see
so if I hide the mask
and use the Selection tool with the Transform control
I see a little dot where my mask is
and can use my arrow keys to move it
to the center of this o
Now I right click to remove the first keyframe
turn the mask back on
and in my last
keyframe use the SHIFT key again
to constrain to a circle large enough to
reveal everything
And just to make this easier to see
add one more keyframe and
play to see the common iris transition
I've mentioned hiding a mask
You can hide any mask type in stage preview with this icon
and with the clip path selected
you'll see its outline even during animation
One thing to note
when I move the element, the mask comes with it
but when I move the mask, the element stays put
So if you want to animate something
moving past a stationary mask
it's a little tricky and here's how to do it
First I'll delete the mask
then right click my element and select Wrap
which nests it inside a div
now add a mask to the wrapper
and if I double
click into it
I can animate the contents without disturbing the mask
And here we see the effect
The last clip
path mask is polygon
and with it selected I can change the number of sides
To set this up I'll delete the text
and bring in a different image
Now draw the polygon
again I'll make a couple keyframes
and use the Polygon tool to drag these vertices around
I can't add or subtract
sides
but I can change the shape
and with this I can create some interesting effects
Now I'd like to show two other
completely different types of masks
right-click any element to add an image
mask or gradient mask
Let's do a gradient mask
With the mask selected
I can control the gradient in the Properties panel
click on the icon and I
can control the start and end positions
as well as their values and I can also
add new stops
the bottom slider controls the direction
I can also click on the
middle icon to change to a radial gradient
and again set the start and end
positions and values
I can drag down to delete stops
and click the right icon to
reset and I'm back where I started
I can also drag these stops past each other
to reverse the gradient
Notice these gradient masks are by default set to the
same size and position
as the masked element
but you can control this independently
for example to create an offset radial gradient
I'd like to point
out these masks work on all elements
images divs groups components even video
I have a complex example here
a dynamic swipe gallery with a deeply nested group of text and images
I'll select the gallery component and apply a mask to it
then preview to see my dynamic data
animation and interactivity are all working as expected
The last type of mask I want to
demonstrate is image mask
which means using a transparent PNG or GIF as your mask
so for example I'll select my photo
right click and select Add image mask
and we see the result
I want to point out my mask image has transparency in it
so a black and white JPG won't work
the mask image must contain transparency
I've used black but that doesn't matter
all colors will be ignored and only the
transparency is being read in this file
One last trick is using an animated GIF
for my mask image
and here we see that effect
Well that does it for masking in
Google Web Designer
Thanks for watching!
