Pen tool – Google Web Designer

Pen tool – Google Web Designer


JEAN-PIERRE: Hi. This is Jean-Pierre. I work on the Google
Web Designer team, and I’m going to
talk to you about one of the shapes in Google Web
Designer, the Bezier paths that you can create
using the Pen tool. These are some basic examples
of the shapes you can create. I’m going to take you through
creating and modifying some of these. In order to create a path,
you select the Pen tool, either by clicking on the
menu after a long press or by clicking on
the P shortcut. Then clicking on the stage will
add a handle on the clicking location and create your path. If you click, don’t release
the mouse and then drag it. You actually create
the two control points, allowing you to
modify the Bezier path between the previous
handle and the last one. Clicking on the first
handle will close your path, at which point you
cannot Add Handle, unless you use the
Add Anchor Point. You can move the handles
by clicking on them, dragging in your new
location, and releasing them. The Property tools
allows you, similarly as with the other shapes,
to modify your path. You can change the background
color, change its stroke color, change the stroke width. If you want to edit the
path once you have it, you need to select it. Select your Pen tool
again, and then you’re able to modify the
shapes, add handles. So I’m going to click on
the Add Anchor Point tool, and by clicking on
the path somewhere, I’m going to add a
handle in this location that I can then drag once
the Pen tool is selected. If I don’t want the handle,
I click on the Delete Anchor Point. And by clicking on
it, it will disappear. Another possibility is double
clicking on an anchor point, which allows to display
the control points and, by dragging them, modify
the curve of the Bezier path at that location. It’s possible to, like
with the other shapes, animate your path colors by
creating a new key frame, selecting a solid color. As you can see, the
animation will show. That’s it for the Pen tool. Thank you for your time.


2 thoughts on “Pen tool – Google Web Designer

Leave a Reply

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