LUCAS: My name is Lucas. And I’m an architect onGoogle Web Designer. In this video, we’ll talk about how to use Google Web Designer’s2D and 3D trace abilities. To start, I willdraw a div, which is an HTML container element. So I select the Tag tool. And we see thatin the upper saloon, I have some options thatcontrol the visual image of the div. So I can name thecolor, like this. And I can choose howrounded the corners are. If I sounds anddrag on the stage, then I construe the coordinatesof the upper left and lower rightcorners of the element, and also the element’swidth and summit. And when I let go of themouse, the element is created. Once you have somegeometry on the stage, Google Web Designer attemptsto stir some surmises about this geometry to helpyou align things more flawlessly. For example, rightnow, it’s detected that the mouse is near theupper edge of that ingredient that I time drew.So if I describe a brand-new point, itstop fringe is aligned with it. I can then align the bottomedge of the new constituent with the middle of theoriginal or with the bottom. If I switch to theSelection tool, I can move these components around. By clicking on oneedge, I can click to other rims in the panorama. And by clicking on a reces, I can snap to other angles. This snapping behaviorcan make it easier to align your points. But if you don’twant the behaviour, you can turn it off bygoing to the View menu and unchecking the Snap option. Google Web Designeralso provides a planned of basic 2D attraction tools. For example, I candraw 2D Bezier curves. I can create rectanglesor ovals or directions. If I select an element, thenI can edit its qualities in the Property Inspector. For example, I will changethe color of this element. And I will changeits width and meridian. Right now, I’m draggingin the textbook field to endlessly change it.But you can also justtype in the quality. To render another example, I will select this oval-shaped. I will change its fill color. And I will giveit an inner radius to proselytize it into a ring. While all this that we’vedone so far is in 2D, Google Web Designer isbuilt on a 3D architecture. And to see this, I willturn on the 3D grid. I can now revolve the view ofthe stage with the View tool. And we see that all theelements I time established are in the xy-plane. And if we revolve far enough, then a different plane– in this case, theyz-plane– becomes active. So with that active, ifI draw a new point, then it is placed in that plane. If I, once again, rotate the belief, you can see I have oneelement in the yz-plane, and then everythingelse in the xy-plane.If you want to returnto the default view, where you’re lookingat the xy-plane, just double-clickon the View tool. So far, we’ve onlycreated constituents in 2D and ended them in 3D. But we can alsoedit components in 3D. So here, I’ve fixed to theRotate tool and an element. And now if I dragon these components, I can freely rotate it. I are also welcome to rotate itabout a specific axis by clicking anddragging on these peals. When you use theRotate tool, there are two modes, a LocalMode and a Global Mode. When you’re in LocalMode, you revolve about the element’s localx-, y-, and z-axes. So right now, I’m rotatingabout the element’s x-axis. And now, I’m rotatingabout its z-axis. If you’re in GlobalMode, then you rotate about the stage’s axes. So here, I revolve aboutthe world-wide z-axis. You are also welcome to translateelements in 3D. So here, I translatean x and an y. This is still in Global Mode. So it’s in the stage’scoordinate system. But I can change to LocalMode and now move along the element’s own x-axisor y-axis or z-axis. If I drag the elementitself, then it convert in theelement’s plane. Finally, if I selectpart of an objective and regard the Controlkey, I can click that fraction to other ingredients in 3D. So right now, I snappedthese two corners together. And you see that ifI rotate the goal, they are exactly stuck together. So that concludes this look atGoogle Web Designer’s 2D and 3D describes abilities. Thank you for watching.
