-
Mam na imię Lucas.
-
Pracuję w zespole
Google Web Designera.
-
W tym filmie pokażę,
jak korzystać z funkcji
-
rysowania 2D i 3D.
-
Na początek
narysuję diva,
-
czyli kontener HTML.
-
Wybieram
narzędzie Element.
-
Na pasku u góry
-
pojawiły się opcje
sterowania wyglądem
-
elementu div.
-
Mogę ustawić kolor
-
i wybrać stopień
zaokrąglenia narożników.
-
Kiedy kliknę na scenie
i przeciągnę zaznaczenie,
-
zobaczę współrzędne
lewego górnego
-
i prawego dolnego rogu,
-
a także szerokość
i wysokość elementu.
-
Gdy puszczę przycisk myszy,
utworzę element.
-
Kiedy na scenie
są już jakieś kształty,
-
Google Web Designer
próbuje sam je rozpoznać,
-
by ułatwić wzajemne
wyrównanie elementów.
-
Na przykład teraz wykrył,
-
że kursor myszy
znajduje się przy górnej krawędzi
-
narysowanego elementu.
-
Jeśli narysuję coś nowego,
górna krawędź będzie w jednej linii.
-
Dolną krawędź nowego elementu
-
mogę wyrównać do środka
lub dołu pierwszego elementu.
-
Gdy włączę
Narzędzie do zaznaczania
-
mogę przesuwać element.
-
Kliknięcie krawędzi
umożliwia przyciąganie
-
do innych krawędzi na scenie.
-
Klikając róg, mogę przyciągać
element do innych rogów.
-
Przyciąganie znacznie ułatwia
-
wyrównanie elementów.
-
Jeśli nie chcesz go używać,
-
możesz je wyłączyć
w menu Wyświetl,
-
odznaczając opcję Przyciągnij.
-
Do dyspozycji mamy też
zestaw prostych narzędzi
-
do rysowania 2D.
-
Mogę na przykład
narysować krzywe Beziera w 2D,
-
utworzyć prostokąty,
owale i linie.
-
Po zaznaczeniu elementu
mogę edytować jego właściwości
-
w Inspektorze właściwości.
-
Zmienię na przykład
kolor tego elementu
-
oraz jego
szerokość i wysokość.
-
Przeciągam teraz
pole tekstowe,
-
by zmieniać wartości
w sposób ciągły,
-
ale mogę też
po prostu wpisać wartość.
-
Pokażę to teraz na owalu.
-
Zmienię jego kolor wypełnienia
-
i dodam promień wewnętrzny,
-
żeby zmienić
owal w pierścień.
-
Były to przykłady działań 2D,
-
ale Google Web Designer
obsługuje też architekturę 3D.
-
Żeby to pokazać,
włączę siatkę 3D.
-
Mogę teraz obracać scenę
za pomocą Narzędzia do obracania sceny 3D.
-
Widać dobrze,
że utworzone przeze mnie elementy
-
leżą na płaszczyźnie XY.
-
Gdy obrócę scenę,
uaktywni się inna płaszczyzna,
-
tutaj będzie to YZ.
-
Gdy jest aktywny ten widok
i narysuję nowy element,
-
zostanie on umieszczony
na tej płaszczyźnie.
-
Kiedy znów obrócę widok,
-
widać, że jeden element
jest na płaszczyźnie YZ,
-
a wszystkie inne
zostały na płaszczyźnie XY.
-
Aby wrócić
do widoku domyślnego,
-
czyli do płaszczyzny XY,
-
klikam dwukrotnie
Narzędzie do obracania sceny 3D.
-
Do tej pory
tworzyłem tylko elementy 2D
-
i wyświetlałem je w 3D.
-
Mogę też jednak
edytować elementy w 3D.
-
Tutaj dodałem obrót
do jednego z elementów.
-
Kiedy go przeciągnę,
-
będzie się obracać.
-
Mogę go też obracać
względem wybranej osi,
-
klikając i przytrzymując
te okręgi.
-
Narzędzie do obracania
-
ma dwa tryby:
lokalny i globalny.
-
W trybie lokalnym
-
element obraca się
względem własnych osi X, Y i Z.
-
Teraz obracam go
wokół jego osi X,
-
a teraz wokół osi Z.
-
W trybie globalnym
-
element obraca się
względem osi całej sceny.
-
Tutaj obracam go
wokół globalnej osi Z.
-
Elementy w 3D
można też przesuwać.
-
Tutaj przesuwam element
na osi X i Y.
-
Nadal jestem
w trybie globalnym,
-
czyli działam
na współrzędnych całej sceny.
-
Mogę jednak
zmienić tryb na lokalny
-
i przesuwać element
po jego osi X , Y lub Z.
-
Kiedy przeciągnę
sam element,
-
przesunie się on
na swojej płaszczyźnie.
-
Jeśli zaznaczę część obiektu
-
i przytrzymam klawisz Control,
część ta będzie przyciągana
-
do innych elementów w 3D.
-
Przyciągnąłem tutaj
te dwa rogi.
-
Kiedy obrócę scenę,
-
widać dobrze,
że dokładnie do siebie przylegają.
-
To wszystko
o rysowaniu 2D i 3D
-
w programie Google Web Designer.
-
Dziękuję za uwagę.
