-
LUCAS: Mi chiamo Lucas
-
e sono un ingegnere
di Google Web Designer.
-
In questo video spiegherò come
-
usare le funzionalità di disegno
in 2D e 3D di Google Web Designer.
-
Per iniziare, disegno un elemento div
-
ossia un elemento contenitore HTML.
-
Quindi seleziono lo strumento Tag.
-
Nella barra in alto
-
compaiono alcune opzioni
per definire l'aspetto
-
dell'elemento div.
-
Posso impostare il colore, in questo modo.
-
E posso scegliere
l'arrotondamento degli angoli.
-
Se faccio clic e trascino sullo stage
-
vengono mostrate
le coordinate degli angoli
-
in alto a sinistra e in basso
a destra dell'elemento
-
oltre alla larghezza
e all'altezza dell'elemento.
-
Quando rilascio il pulsante del mouse
viene creato l'elemento.
-
Se crei alcune forme
geometriche sullo stage
-
Google Web Designer cerca
di fare alcune deduzioni
-
sulle forme per aiutarti ad allinearle
in modo più ordinato.
-
Ad esempio, ora viene rilevato
-
che il puntatore del mouse si trova vicino
al bordo superiore dell'elemento
-
che ho appena disegnato.
-
Se disegno un nuovo elemento,
il suo bordo superiore viene allineato.
-
Poi posso allineare il bordo
inferiore del nuovo elemento
-
con la parte centrale o con il bordo
inferiore dell'elemento originale.
-
Se passo allo strumento Selezione
-
posso spostare l'elemento.
-
Se faccio clic su un bordo
posso agganciarlo
-
ad altri bordi nella scena.
-
Se faccio clic su un angolo
posso agganciarlo ad altri angoli.
-
Questo comportamento di agganciamento
consente di allineare
-
più facilmente gli elementi.
-
Se non vuoi questo comportamento
-
puoi disattivarlo deselezionando
-
l'opzione Aggancia dal menu Visualizza.
-
Google Web Designer fornisce
anche un insieme
-
di strumenti di disegno 2D di base.
-
Ad esempio, posso disegnare
curve di Bézier in 2D.
-
Posso creare rettangoli, ovali o linee.
-
Se seleziono un elemento,
posso modificarne le proprietà
-
nel riquadro Proprietà.
-
Ad esempio, cambio il colore
di questo elemento.
-
E cambio anche larghezza e altezza.
-
Al momento sto trascinando
nel campo di testo
-
per cambiarlo continuamente.
-
Ma puoi anche digitare il valore.
-
Un altro esempio: seleziono questo ovale.
-
Cambio il colore di riempimento
-
e imposto un raggio interno
-
per convertirlo in un anello.
-
Tutto quello che abbiamo
fatto finora è in 2D
-
ma Google Web Designer è basato
su un'architettura 3D
-
e per vederla attivo la griglia 3D.
-
Ora posso ruotare la visualizzazione
dello stage con lo strumento Vista.
-
Possiamo notare che tutti
gli elementi appena creati
-
sono nel piano xy.
-
Se ruoto a sufficienza diventa attivo
-
un altro piano, in questo
caso il piano yz.
-
Se disegno un nuovo elemento
con questo piano attivo
-
l'elemento viene posizionato
in quel piano.
-
Se ruoto di nuovo la visualizzazione
-
possiamo vedere che c'è
un elemento nel piano yz
-
e tutto il resto è nel piano xy.
-
Se vuoi tornare
alla visualizzazione predefinita
-
quando è attivo il piano xy
-
devi fare doppio clic
sullo strumento Vista.
-
Finora abbiamo creato
soltanto elementi in 2D
-
e li abbiamo visualizzati in 3D.
-
Ma possiamo anche
modificare elementi in 3D.
-
Ho attivato lo strumento
Rotazione e un elemento.
-
Se trascino sull'elemento
-
posso ruotarlo liberamente.
-
Posso anche ruotarlo
intorno a un asse specifico
-
facendo clic e
trascinando su questi anelli.
-
Per lo strumento Rotazione esistono
-
due modalità: locale e globale.
-
In modalità locale, la rotazione
avviene intorno
-
agli assi x, y e z locali dell'elemento.
-
Ora sto ruotando intorno
all'asse x dell'elemento.
-
Ora sto ruotando intorno all'asse z.
-
In modalità globale la rotazione avviene
-
intorno agli assi dello stage.
-
Qui ruoto intorno all'asse z globale.
-
Puoi anche eseguire la traslazione
degli elementi in 3D.
-
Qui eseguo la traslazione
dei valori x e y.
-
Sempre in modalità globale.
-
Quindi viene usato il sistema
di coordinate dello stage.
-
Ma posso passare alla modalità locale
e spostarmi lungo
-
l'asse x, y o z dell'elemento.
-
Se trascino l'elemento stesso
-
viene traslato nel suo piano.
-
Infine, se seleziono parte di un oggetto
-
e tengo premuto il tasto CTRL,
posso agganciare tale parte
-
ad altri elementi in 3D.
-
Ora ho agganciato questi due angoli.
-
Puoi notare che
se ruoto la visualizzazione
-
rimangono agganciati.
-
Abbiamo concluso questa panoramica
delle funzionalità di disegno in 2D e 3D
-
di Google Web Designer.
-
Grazie per l'attenzione.
