3D Tools Overview Google Web Designer English German

3D Tools OverviewYouTube↗ IA↗(long shot)
Science & Technology 8.8K views 25 likes 0 dislikes 09 Dec 2014

Google Web Designer 76.8K subscribers United States YouTube↗

Click to Play Video

Hi, my name is Eric.

Hallo, mein Name ist Eric.

I'm a engineer on Google Web Designer,

Ich bin Techniker für Google Web Designer,

and today we're going to be talking about some of the two-

und heute reden wir über einige der

and three-dimensional drawing capabilities in Google Web

2D- und 3D-Zeichnungsfunktionen

in Google Web Designer.

So I have here a new HTML page.

Hier habe ich eine neue HTML-Seite.

And Google Web Designer presents a fairly standard 2D

Google Web Designer verfügt über eine standardmäßige

drawing interface that most designers would

2D-Zeichenoberfläche, die den meisten Webdesignern

be familiar with.

bekannt sein dürfte.

We'll go here, and we're going to select the TAG tool

Wir navigieren hierher, wählen das Tag-Tool aus

and create some divs here.

und erstellen einige div-Elemente.

And you'll notice that when I select that tool,

Hier sehen Sie, dass mir nach der Auswahl dieses Tools

I'm presented with a bunch of options on top.

eine ganze Reihe von zusätzlichen Optionen angeboten werden.

So I can set properties of the elements

Also kann ich die Eigenschaften der Elemente festlegen,

that I'm going to create here.

die ich hier erstelle.

I'll just put a color on that.

Hier wähle ich eine Farbe aus.

And then you just drag out the shapes

Und anschließend ziehe ich die Formen

as you normally would, and Google Web Designer tells you

wie gewohnt. Google Web Designer teilt Ihnen

the coordinates of the diagonal points,

die Koordinaten der diagonalen Punkte

and the width and the height.

sowie Breite und Höhe mit.

I let up, and I've created a div.

Ich lasse los und habe schon ein div-Element erstellt.

You'll also notice that, as I move the mouse around,

Sie werden auch feststellen, dass Google Web Designer versucht,

Google Web Designer tries to make inferences

Schlussfolgerungen auf bestehende Geometrie zu ziehen,

on existing geometry.

wenn ich die Maus bewege.

So in this case, it sees that the mouse

In diesem Fall erkennt das Programm also,

is roughly horizontal to the top of the div

dass die Maus etwa horizontal an der Oberkante des div-Elements steht,

I've already created.

das ich bereits erstellt habe.

So now if I click and drag, it will align exactly to the top

Wenn ich nun darauf klicke und ziehe, richtet sie sich genau an der Oberkante

and to the midpoint of that other rectangle.

und am Mittelpunkt des anderen Rechtecks aus.

And so I can get exact alignment that way.

Und so erhalte ich eine genaue Ausrichtung.

If I want to change the positions of those,

Wenn ich die Positionen der Elemente ändern möchte,

I can go to the Selection tool.

wechsle ich zum Auswahl-Tool.

And again, we're snapping to existing geometry.

Und hier docke ich wieder an die bestehende Geometrie an.

So it helps you align things.

Damit können Sie also Elemente ausrichten.

We also have some similar shape tools, like a Bezier tool.

Wir haben auch einige ähnliche Form-Tools, z. B. ein Bezier-Tool.

Similar to other drawing packages, we have an oval tool.

Wie bei anderen Zeichenpaketen haben wir auch ein Ellipsentool.

Und eines für Rechtecke

And a line tool.

Und ein Linien-Tool

For any of the shapes that I've created,

Für jede der von mir erstellten Formen

I can select-- say for instance, this div here--

kann ich beispielsweise dieses div-Element hier auswählen

and I can change all the properties.

und alle Eigenschaften ändern.

I can go to the Property Inspector here,

Hier kann ich den Eigenschaftenbereich aufrufen

and I can change the width or the height.

und die Breite oder Höhe ändern.

In this case, I'm dragging.

In diesem Fall ziehe ich das Element.

I could also type in values.

Ich könnte auch Werte eintippen.

I can change the fill color, or the stroker.

Ich kann die Füllfarbe oder den Strich ändern.

Basically, any of the properties.

Prinzipiell alle Eigenschaften.

So in addition to 2D drawing, Google Web Designer

Also zusätzlich zur 2D-Zeichnung ist Google Web Designer

is built on a full 3D architecture.

auf einer vollwertigen 3D-Architektur aufgebaut.

So let me go and show the 3D grid here.

Daher möchte ich Ihnen das 3D-Raster zeigen.

And now I'm going to go into the View tool,

Ich rufe nun das Ansicht-Tool auf

and I'm going to change how we're looking at this page.

und ändere die Betrachtungsweise dieser Seite.

So I'm going to rotate around, and you

Ich führe jetzt eine Drehung aus. Wie Sie sehen,

can see that all those elements that I created are on xy plane.

befinden sich alle erstellten Elemente auf der xy-Ebene.

Now, you'll also notice that if I change the view enough,

Achten Sie auch auf Folgendes: Wenn ich die Ansicht ausreichend ändere,

the grid changes to the green plane or the yz plane.

wechselt das Raster zur grünen Ebene bzw. der yz-Ebene.

When that happens, I'm working on the yz plane.

Wenn das passiert, arbeite ich auf der yz-Ebene.

So if I want to create elements that are on the yz plane,

Wenn ich also Elemente erstellen möchte, die auf der yz-Ebene liegen,

I just show that and I draw.

zeige ich diese Ebene einfach an und beginne zu zeichnen.

And now I have elements that are on the yz plane,

Jetzt habe ich Elemente, die auf der yz-Ebene liegen,

in addition to the elements on the xy plane that I have.

zusätzlich zu den bereits vorhandenen Elementen auf der xy-Ebene.

So I'll double click here to restore the view.

Ich doppelklicke also hier, um die Ansicht wiederherzustellen.

And now, we can manipulate the individual elements in 3D,

Und nun können wir die einzelnen Elemente

auch in 3D bearbeiten.

So I'll select this and you'll see some handles appear.

Ich wähle jetzt dieses aus und Sie erkennen einige Ziehpunkte.

And so I can click on that object and I can rotate around.

Ich kann auf dieses Objekt klicken und es drehen.

Clicking on the object is kind of a free-form rotation.

Ein Klick auf das Objekt ist eine Art Drehung im freien Format.

I can also click on one of these circles

Ich kann auch auf einen dieser Kreise klicken

and rotate on one particular axis.

und um eine bestimmte Achse drehen.

Here I have the z-axis selected.

Hier habe ich die z-Achse ausgewählt.

And we have two modes.

Und es gibt zwei Modi.

There is local mode and global mode.

Es gibt einen lokalen und einen globalen Modus.

We're in local mode right now, which

Jetzt befinden wir uns im lokalen Modus,

means we're rotating about the object's own z-axis.

d. h., wir drehen um die eigene z-Achse des Objekts.

I can go to global mode, and now we're

Ich kann zum globalen Modus wechseln.

rotating about the z-axis of the stage.

Jetzt drehen wir um die z-Achse des Anzeigebereichs.

We also have a translation tool.

Wir haben auch ein Tool zum Verschieben.

And so again, we have a local and global mode right now.

Und auch hier gibt es einen lokalen und einen globalen Modus.

I can click this axis, the x-axis,

Ich kann auf diese Achse, die x-Achse, klicken

and it'll translate in the x-axis of the stage,

und sie wird zur x-Achse im Anzeigebereich

or the y-axis, and I can go into the local mode

oder auf die Y-Achse verschoben, und ich kann zum lokalen Modus wechseln.

and I can click the x-axis and it moves it

Ich kann auch auf die x-Achse klicken

in the plane of the object.

und diese wird auf die Ebene des Objekts verschoben.

Or I can click on this object and I

Oder ich klicke auf dieses Objekt

can translate it parallel to the plane that we're working on.

und es wird parallel zu der Ebene verschoben, in der wir arbeiten.

In this case, the plane of the object, because we're

In diesem Fall ist dies die Ebene des Objekts,

weil wir uns im lokalen Modus befinden.

Or the stage in global mode.

Oder der Anzeigebereich im globalen Modus.

And again, we can snap in 3D.

Und auch hier haben wir wieder eine Andockfunktion in 3D.

So if I want to align this point that I've

Wenn ich also diesen Punkt ausrichten möchte,

snapped to exactly to the corner of that rectangle,

den ich genau in der Ecke des Rechtecks angedockt habe,

ist das ebenfalls möglich.

And then I can rotate the view and see

Und dann kann ich die Ansicht drehen und sehe,

that those points are exactly aligned.

dass diese Punkte genau ausgerichtet sind.

So that's a brief introduction to the 2 and 3D

Das war nun eine kurze Einführung in die

drawing capabilities of Google Web Designer.

2D- und 3D-Zeichnungsfunktionen von Google Web Designer.

Thanks for watching.

Danke fürs Zuschauen.

Similar videos:

2D & 3D Drawing Overview - Google Web Designer
Google Web Designer
6.3K views 34 likes 5 dislikes 03 Jan 201840% match

Illustration Palette Layout and Workflow featuring Mike Thompson
PainterTutorials
6.5K views 19 likes 0 dislikes 09 Aug 201629% match

Getting started with Google Web Designer: how to create a simple banner ad
Google Web Designer
46.6K views 339 likes 14 dislikes 29 Jul 201929% match

Responsive Layout: Overview - Google Web Designer
Google Web Designer
106.5K views 444 likes 8 dislikes 03 May 201629% match

Publish to Studio
Google Web Designer
7.7K views 17 likes 1 dislikes 04 Aug 201429% match

Google Web Designer - DoubleClick Studio Dynamic Overview
Google Web Designer
11.5K views 20 likes 8 dislikes 17 Nov 201528% match

Parallax Overview - Google Web Designer
Google Web Designer
31.9K views 285 likes 6 dislikes 28 Nov 201828% match

Creating and working with hierarchies in Power BI (3-11g)
Microsoft Power BI
100.1K views 140 likes 6 dislikes 12 Apr 201628% match

Gradient Editing Tool
Google Web Designer
17.8K views 38 likes 7 dislikes 15 Jan 201428% match

CSS Panel Overview - Google Web Designer
Google Web Designer
3K views 16 likes 0 dislikes 20 Aug 201828% match

Data Driven Templates for Display & Video 360 Ad Canvas - Google Web Designer
Google Web Designer
5K views 39 likes 0 dislikes 26 Sep 201827% match

DoubleClick Studio Events
Google Web Designer
12.3K views 24 likes 5 dislikes 04 Aug 201427% match

Groups with Events Overview - Google Web Designer
Google Web Designer
3.4K views 15 likes 2 dislikes 03 Jan 201827% match

Tag Tool Demo
Google Web Designer
17.6K views 57 likes 3 dislikes 30 Sep 201327% match

Painter 2020 NEW Interface Advancements
PainterTutorials
16.4K views 122 likes 11 dislikes 25 Jun 201927% match

Groups Overview - Google Web Designer
Google Web Designer
2.6K views 11 likes 2 dislikes 03 Jan 201826% match

Timeline Advanced Mode Overview - Google Web Designer
Google Web Designer
12.2K views 93 likes 3 dislikes 18 Jun 201826% match

Row-level security (6-4b)
Microsoft Power BI
12.7K views 44 likes 2 dislikes 22 Aug 201626% match

Responsive Ad Workflow - Google Web Designer
Google Web Designer
21.8K views 208 likes 5 dislikes 24 Aug 201826% match

Code View - Google Web Designer
Google Web Designer
3.1K views 20 likes 0 dislikes 22 Aug 201826% match

Percent Authoring Overview - Google Web Designer
Google Web Designer
1.6K views 11 likes 0 dislikes 21 Aug 201826% match

Dynamic in Studio - Google Web Designer
Google Web Designer
10.5K views 54 likes 1 dislikes 31 Aug 201826% match

Enchanced Dynamic - Multi schema support
Google Web Designer
3.8K views 8 likes 1 dislikes 31 Aug 201526% match

Google Web Designer - AdWords Dynamic Overview
Google Web Designer
55K views 64 likes 21 dislikes 31 Aug 201526% match

Capture One 20 Tutorials | Color editor
Capture One
31.3K views 405 likes 1 dislikes 04 Dec 201926% match

3-1 Your First Project: Creating & Project Settings in LumaFusion
Create with LumaTouch
15.2K views 140 likes 3 dislikes 16 Jan 202025% match

Studio Dynamic Profiles
Google Web Designer
5.6K views 35 likes 1 dislikes 28 Sep 201825% match

Google Web Designer - Animation Updates
Google Web Designer
53.6K views 136 likes 9 dislikes 17 Nov 201525% match

PowerPoint Präsentation mit Ton aufzeichnen | Tutorial für Lehrende und Studierende
Medienpsychologie Würzburg
27.2K views 322 likes 5 dislikes 17 Apr 202025% match

AnyMode Modeling in Creo (3D modes) - PTC
PTC
27.3K views 24 likes 1 dislikes 15 Nov 201025% match

Settings Privacy About Contact Donate