Masking – 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 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!

6 Comments

Add a Comment

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