2D & 3D Drawing Overview – Google Web Designer

2D & 3D Drawing Overview – Google Web Designer


LUCAS: My name is Lucas. And I’m an engineer on
Google Web Designer. In this video,
we’ll talk about how to use Google Web Designer’s
2D and 3D drawing capabilities. To start, I will
draw a div, which is an HTML container element. So I select the Tag tool. And we see that
in the upper bar, I have some options that
control the visual appearance of the div. So I can set the
color, like this. And I can choose how
rounded the corners are. If I click and
drag on the stage, then I see the coordinates
of the upper left and lower right
corners of the element, and also the element’s
width and height. And when I let go of the
mouse, the element is created. Once you have some
geometry on the stage, Google Web Designer attempts
to make some inferences about this geometry to help
you align things more cleanly. For example, right
now, it’s detected that the mouse is near the
upper edge of that element that I just drew. So if I draw a new element, its
top edge is aligned with it. I can then align the bottom
edge of the new element with the middle of the
original or with the bottom. If I switch to the
Selection tool, I can move the element around. By clicking on one
edge, I can snap to other edges in the scene. And by clicking on a corner,
I can snap to other corners. This snapping behavior
can make it easier to align your elements. But if you don’t
want the behavior, you can turn it off by
going to the View menu and unchecking the Snap option. Google Web Designer
also provides a set of basic 2D drawing tools. For example, I can
draw 2D Bezier curves. I can create rectangles
or ovals or lines. If I select an element, then
I can edit its properties in the Property Inspector. For example, I will change
the color of this element. And I will change
its width and height. Right now, I’m dragging
in the text field to continuously change it. But you can also just
type in the value. To give another example,
I will select this oval. I will change its fill color. And I will give
it an inner radius to convert it into a ring. While all this that we’ve
done so far is in 2D, Google Web Designer is
built on a 3D architecture. And to see this, I will
turn on the 3D grid. I can now rotate the view of
the stage with the View tool. And we see that all the
elements I just created are in the xy-plane. And if we rotate far enough,
then a different plane– in this case, the
yz-plane– becomes active. So with that active, if
I draw a new element, then it is placed in that plane. If I, once again,
rotate the view, you can see I have one
element in the yz-plane, and then everything
else in the xy-plane. If you want to return
to the default view, where you’re looking
at the xy-plane, just double-click
on the View tool. So far, we’ve only
created elements in 2D and viewed them in 3D. But we can also
edit elements in 3D. So here, I’ve stuck to the
Rotate tool and an element. And now if I drag
on the element, I can freely rotate it. I can also rotate it
about a specific axis by clicking and
dragging on these rings. When you use the
Rotate tool, there are two modes, a Local
Mode and a Global Mode. When you’re in Local
Mode, you rotate about the element’s local
x-, y-, and z-axes. So right now, I’m rotating
about the element’s x-axis. And here, I’m rotating
about its z-axis. If you’re in Global
Mode, then you rotate about the stage’s axes. So here, I rotate about
the global z-axis. You can also translate
elements in 3D. So here, I translate
an x and an y. This is still in Global Mode. So it’s in the stage’s
coordinate system. But I can change to Local
Mode and now move along the element’s own x-axis
or y-axis or z-axis. If I drag the element
itself, then it translate in the
element’s plane. Finally, if I select
part of an object and hold the Control
key, I can snap that part to other elements in 3D. So right now, I snapped
these two corners together. And you see that if
I rotate the view, they are exactly stuck together. So that concludes this look at
Google Web Designer’s 2D and 3D drawings capabilities. Thank you for watching.

4 thoughts on “2D & 3D Drawing Overview – Google Web Designer

Leave a Reply

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