2D & 3D Drawing Overview - Google Web Designer

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
colour, 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 behaviour
can make it easier to align your elements.

But if you don't
want the behaviour,

you can turn it off by
going to the 'View' menu

and unticking the 'Snap' option.

Google Web Designer
also provides

a set of basic 2D drawing tools.

For example, I can
draw 2D Bézier 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 colour 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 colour,

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 can 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
in x and in 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 translates 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've 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 drawing capabilities.

Thank you for watching.