Figma: Pen Tool ikony

00:00.240Witaj w kolejnej lekcji, w której stworzymy pierwszą ikonę, i między innymi zajmiemy się pracą z narzędziem "Pen Tool".

00:05.460Tak, jak to narzędzie występuje chyba we wszystkich aplikacjach graficznych, zwłaszcza wektorowych, tak w Figmie

00:10.860działa ono w sposób najbardziej przyjemny, i najprostszy, i najbardziej lubię rzeczywiście tworzyć ikony,

00:16.800czy pracować właśnie z "Pen Toolem" w Figmie. Nie bez powodu, zaraz zobaczysz, że jest to bardzo proste. Ale

00:21.630zaczniemy tworzenie ikonki kłódki od zwykłego shape'a, czyli od kształtu "Rectangle Tool". Czyli najpierw stworzę

00:27.360sobie prostokąt, który możemy zrobić...

00:31.050Nie musimy zachowywać tutaj proporcji, może to być właśnie bardziej trochę prostokąt,

00:34.760ta kłódka będzie umieszczona w tej centralnej części kółeczka. I teraz możemy przejść do właściwości tego kształtu.

00:43.140Po prawej stronie znajdziesz między innymi opcję zaokrąglenia narożników.

00:47.640Chcemy to zrobić, czyli chcemy przejść do tej opcji i teraz z pomocą kursorów możemy zaokrąglić sobie narożniki

00:52.740naszej kłódki np. w ten sposób. Możemy także przejść do edycji, do precyzyjnej edycji tego kształtu - albo

00:59.490wybierając to małe narzędzie "Edit Object", albo wciskając dwa razy Enter, albo dwa razy klikając na tym obiekcie.

01:06.220Wtedy przejdziemy do takiego charakterystycznego trybu, gdzie mamy każdą z krawędzi osobno jako tzw.

01:11.920punkt wektorowy. I każdy z tych punktów ma jakieś swoje właściwości. Jak widzisz, ma właściwość położenia

01:17.790na X i Y, i możemy ją edytować.

01:20.250Gdybyśmy w związku z tym chcieli np. zmienić wartość zaokrąglenia narożnika tylko dla tego punktu, to

01:25.560właśnie przechodzimy w ten tryb. I teraz zaznaczamy sobie ten punkt, możemy zaznaczyć więcej niż jeden punkt

01:30.630w ten sposób, albo zaznaczyć jeden i kliknąć z Shiftem na kolejny, po to, żeby doznaczyć więcej niż jeden punkt.

01:36.840I wybieramy jakąś np. inną wartość zakrzywienia tylko dla tych dwóch punktów. Więc, jak widzisz, można to

01:42.270zrobić selektywnie, zrobić to zaokrąglenie np. w ten sposób. Ja wybiorę sobie jednak wartość stałą dla

01:48.150wszystkich, czyli wartość 4, i wyjdę z tego trybu edycji wciskając polecenie "Done".

01:53.190Teraz mam zrobiony jakiś kształt.

01:55.440Tak naprawdę będę chciał, żeby to było samo obramowanie, ale na razie może zostać tylko kształt.

02:00.360Możemy go troszeczkę nawet tutaj powiększyć i zastanowić się nad tym, jak dorobić do kłódki tę górną część.

02:06.210Właśnie to będziemy musieli zrobić z pomocą narzędzia "Pen Tool". I to, czym różni się praca z narzędziem

02:11.640"Pen Tool" w Figmie od innych narzędzi, to to, że możemy edytować kształty z pomocą narzędzia "Pen Tool" i dokładać

02:19.690tutaj nowe punkty wektorowe, tworząc tzw. "Vector Network".

02:23.190Jest to bardzo proste narzędzie. Żeby do niego wejść najpierw wejdźmy do edycji tego obiektu, edycji

02:28.350naszego kształtu, i jesteśmy w tym trybie, gdzie mamy kulki. I teraz, jak widzisz, "Pen Tool" zmienia się w taki

02:33.060sposób, że możemy z jego pomocą dodawać nowe punkty wektorowe na krawędziach tego naszego kształtu, bo

02:39.300jest taka mała charakterystyczna ikonka z plusem. Dodatkowo mamy włączony ten "Pixel Preview",

02:43.620i zauważ, że mamy włączone przyleganie do "Pixel Grid'a". Więc mamy tutaj mniej więcej możliwość tworzenia

02:48.930na poszczególnych pikselach, i takie przyleganie do tych pikseli - co też czasem pomaga, czasem przeszkadza.

02:54.540Wiesz już gdzie to wyłączyć czy wyłączyć.

02:56.330Teraz będę chciał rozpocząć, np. tutaj, stworzyć sobie taki oto prosty kształt.

03:03.510Zauważ, że po prostu jeden raz klikam, Nie przeciągam tylko jeden raz klikam.

03:09.600Klikam sobie teraz tutaj, klikam tutaj.

03:12.030Gdybym ten kształt chciał teraz zmodyfikować, mogę wcisnąć V na klawiaturze i przejść do narzędzia

03:18.420modyfikowania, czyli mogę złapać za dowolny segment, a następnie np. go przesunąć,rozciągnąć w ten sposób.

03:25.530Czyli gdybym uznał, że chciałbym zrobić ten segment szerszy, mogę zawsze zrobić to teraz albo później,

03:30.900w trakcie edycji. W związku z tym troszeczkę go zwęzimy i chcę skorzystać z następnego narzędzia, czyli "Pen Tool"

03:36.540pozwala nam tutaj dodawać, edytować punkty wektorowe, ale mamy też narzędzie "Bend Tool", które jest dostępne albo po

03:42.780jego wybraniu, albo po wciśnięciu i przytrzymaniu Cmd czy Ctrl na klawiaturze.

03:46.940Jest to bardzo fajne narzędzie, ponieważ pozwala nam - jak widzisz, zmienia się teraz kursor, gdy mam wciśnięty

03:52.350Cmd - pozwala nam złapać za taki segment i pozwala nam go zakrzywić po prostu, w ten sposób. Teraz powstały

03:59.370takie dwa ramiona dla tego punktu wektorowego, i dla tego punktu wektorowego. To są ramiona, które właśnie

04:06.150determinują zakrzywienie. I możemy za każde z tych ramion złapać i je przesunąć, i np. ustawić sobie to tutaj równiutko.

04:13.410I tak samo zrobimy dla tego drugiego ramienia, w ten sposób. A następnie, jak widzisz, możemy złapać za

04:19.470segment i np. zmniejszyć go czy powiększyć.

04:21.960Możemy też zaznaczyć jedno lub więcej, z Shiftem, tych ramion, i teraz operować kursorami na klawiaturze, po to, żeby

04:28.830zmieniać ich pozycję.

04:29.750Czyli mogę strzałkami w górę, czy w lewo, czy w prawo zmieniać pozycje tych zaznaczonych ramion.

04:35.280No, jest to naprawdę bardzo intuicyjne i pozwala nam szybko zrobić kształty, o które nam chodzi.

04:40.020Chciałbym trochę przedłużyć, powiększyć ten segment.

04:44.280Zobaczmy jak to będzie wyglądało. Ta ikonka kłódki będzie trochę bardziej rozciągnięta. I możemy zaznaczyć znowu

04:50.640te dwa ramiona, a następnie strzałeczką w górę trochę je powiększyć.

04:54.720Wydaje mi się, że ten kształt już zaczyna być dokładnie taki, jaki potrzebuję. Teraz, kolejna rzecz, którą będę

05:01.370chciał zrobić, to będzie wypełnienie również tego środkowego segmentu. I możemy to zrobić z pomocą narzędzia

05:07.460które znajduje się tutaj, nazywa się "Paint Bucket Tool".

05:09.740Jeśli wybiorę teraz "Paint Bucket Tool", to w miejscach, gdzie nie mam wypełnienia, mogę je dodać za pomocą

05:15.350plusa,

05:15.710a tam, gdzie jest to wypełnienie, mogę je zabrać z pomocą minusa. Czyli, jeżeli kliknę minus,

05:20.320zauważ, że wypełnienie nam znika z dolnego segmentu.

05:22.670Mogę kliknąć plusikem, je dodać, i plusikem dodać je także do górnego segmentu. I w ten sposób stworzyłem cały kształt,

05:29.480który teraz mogę zatwierdzić, wybierając polecenie "Done".

05:32.180Ten cały kształt jest teraz edytowalny w kontekście takim, że możemy zmieniać do niego wypełnienia,

05:37.160a ja chcę konkretnie usunąć w ogóle wypełnienia, nie chcę go wypełniać. Ale chcę dodać do niego "Stroke",

05:42.170czyli obramowanie. Więc dodajemy sobie stroke, jak widzisz, został domyślnie dodany czarny stroke i tutaj mamy jeszcze

05:48.050możliwość jego wyrównania. Jeśli wybierzemy opcję "Outside", "Inside" czy "Center", w taki sposób nam się to

05:53.600zmienia. I w tym przypadku akurat potrzebujemy wycentrować, aby wyrównać ładnie te segmenty.

05:58.650Także kolejna rzecz którą robimy do tej kłódki,

06:01.940to będzie taki ptaszek, czyli zwykły tick. Zrobimy go z pomocą narzędzia jeszcze innego, czyli narzędzia

06:07.410"Line Tool", po to, żeby pokazać Ci jak największe spektrum narzędzi. Wybieramy sobie narzędzie linii czyli "Line Tool" i tworzymy

06:13.700taką L-kę, rysując, zaczynając od góry. Trzymam Shift, żeby zachować proporcje. I stworzyliśmy pierwszy

06:21.370segment linii. Teraz wybieramy jeszcze raz L, i tworzymy kolejny segment linii

06:26.270w ten sposób. Zauważ, że to, w przeciwieństwie do tego poprzedniego narzędzia, stworzyło nam dwie warstwy.

06:32.450Mamy linię drugą, i linię. Teraz możemy te dwie warstwy zaznaczyć. I mamy taką opcję jak zgrupowanie selekcji, czyli

06:39.920stworzenie jakby nowej grupy z tych dwóch linii, ale mamy też opcję "Flatten", czyli spłaszczenie tych dwóch warstw.

06:46.040Jeżeli wybierzemy opcję "Flatten", to, jak widzisz, powstaje nam jeden kształt. Czyli możemy w ten sposób wiele

06:51.380kształtów wektorowych z pomocą "Flatten" połączyć w jeden. I teraz możemy tą linie po prostu zrotować, np.

06:57.440z Shiftem,

06:58.370o określony kąt, tak, żeby uzyskać ptaszka. Aczkolwiek ten ptaszek powinien być odwrócony w drugą stronę.

07:05.150Potrzebujemy jego lustrzane odbicie. I w związku z tym wybieram prawy przycisk myszy, i mamy tutaj takie

07:10.580dwie opcje: mamy opcję "Flip Horizontal", czyli odwrócenie po osi poziomej i odwrócenie po osi pionowej czyli

07:16.770"Flip Vertical".

07:17.330Nam chodzi o Flip Horizontal. Shift+H, to jest skrót, można go zapamiętać, i Shift+V. Czyli mamy Shift+H, klikamy,

07:24.110i zostało to ładnie odwrócone. Teraz z pomocą kursorów na klawiaturze możemy ładnie wyrównać to, wyśrodkować

07:30.980w dowolnym miejscu. Jak widzisz, linia składa się z ze stroke'a, czyli mamy zarówno stroke tutaj, jak i stroke w naszej

07:38.030linii, więc możemy np. pogubić te elementy, zaznaczyć i zamiast 1px wybrać tutaj opcję 2px

07:44.300np., nawet dla obu tych warstw.

07:46.940W ten sposób mamy taką grubszą, fajniejszą ikonkę.

07:49.520Gdybyśmy chcieli dopracować tę linię, to wystarczy przejść do jej edycji i w ten sposób teraz połączyć

07:56.750te segmenty, aby to małe przejście nie było widoczne.

08:01.100Właśnie to przejście jest wygenerowane tym, że mamy dopasowanie do wyrównania do tego "Pixel Grida". Czasem

08:08.720ono, jak widzisz, przeszkadza, ale teraz udało nam się łatwo poprawić kształt.

08:12.080Przejdźmy do widoku "Fit Screen", zobaczmy, jak to wygląda. Wyjdźmy z edycji kształtu, klikając "Done", i wyjdźmy z edycji

08:18.580tej warstwy.

08:19.250Myślę że kłódka jest w porządku.

08:20.840Możemy w związku z tym zaznaczyć, np. z Cmd

08:23.390obie te warstwy i jedynie zmienić kolor obramowania na kolor biały, no i również te dwie warstwy możemy

08:30.260przesunąć nieco kursorami.

08:33.230I gdybyśmy chcieli wyrównać je teraz idealnie względem elipsy, to moja propozycja jest następująca: Grupujemy

08:40.880te dwie warstwy, czyli wybieramy polecenie Cmd+G, Ctrl+G, dzięki czemu obie warstwy są tutaj w środku,

08:47.030ale możemy edytować je jako jedną. Więc Cmd+G, wciskamy, i to już jest jedna grupa. I teraz doznaczamy

08:53.390tę elipsę, czyli z Shiftem

08:55.580dodatkowo klikamy na elipsie. W ten sposób będziemy mieli zaznaczoną grupę, oraz będziemy mieli zaznaczoną

09:00.800elipsę.

09:01.700W tym momencie działają opcje wyrównania, które masz dostępne z prawej strony na górze. I będziemy mogli

09:06.860wyrównać automatycznie horyzontalnie,

09:10.820Czyli w poziomie, i wyrównać również wertykalnie, czyli w pionie. Trochę została ta kłódeczka przesunięta i dzięki temu

09:17.270wyrównaliśmy ją właśnie względem tego zaznaczonego kształtu z pomocą tych opcji.

09:22.220Myślę, że praca z naszą pierwszą ikoną jest zakończona.

09:25.810No i, jak widzisz, wyrównanie takie, idealne, matematyczne czasem nie jest tożsame z wyrównaniem optycznym,

09:31.790bo optycznie ta kłódka, ponieważ ma lżejszy, mniejszy ten element na górze, jednak moim zdaniem powinna być

09:36.950tak 1px albo 2px wyżej. I teraz, optycznie, wydaje mi się, że jest to idealnie.

09:41.300Więc czasem nie ma co się, właśnie, przejmować tym, że nie jest to idealnie równo matematycznie, bo może to wyglądać

09:48.260lepiej.

09:48.530Kolejne ikonki, które stworzymy będą bardzo proste.

09:51.440Będzie to ikonka z kamerą, więc tworzymy sobie szkic kamery, w ten sposób. Teraz wybiorę znów jakieś zaokrąglenie

10:00.160dla tych krawędzi, już bądźmy konsekwentni i zróbmy też tutaj 4px, a następnie stworzyć z pomocą "Pen Toola"

10:06.580kolejny kształt. Będzie to kształt, który rozpocznę rysować tutaj, a następnie zrobimy sobie taką oto

10:13.240kamerę. Po prostu tutaj klikam i domykam ten kształt w ten sposób. Będę chciał zmienić obramowanie na kolor biały

10:22.200i dla tego elementu, który - możemy wyjść teraz edycji - które mamy tutaj, też włączyć obramowanie koloru białego

10:29.650a wyłączyć, usunąć wypełnienie. I w ten sposób zrobiliśmy kolejną ikonkę.

10:34.030W zasadzie fajnie by było jeszcze dopasować jej grubość do tej poprzedniej, czyli zrobić tutaj grubość 2px.

10:39.630I teraz, jako że stworzyłem dwa osobne kształty, mogę spokojnie przesunąć to kursorami na klawiaturze.

10:44.740Mogę te kształty spłaszczyć z pomocą Cmd+E, albo po prostu znów zamknąć je w grupę.

10:49.210Wydaje mi się, że można je spokojnie w tym momencie spłaszczyć, więc wybieram Cmd+E czy Ctrl+E.

10:54.050I już mamy jeden wektorowy kształt, aczkolwiek widzę, że tutaj Figma coś mi popsuła, dlatego, że tutaj wyrównanie

11:00.760mam "środek", a tutaj wyrównanie mam "Inside". W związku z tym zróbmy "Center" i "Center" dla obu tych kształtów.

11:07.360Przesuńmy troszeczkę ten kształt, i teraz, mając takie samo obramowanie w obu, możemy je spokojnie połączyć

11:13.810i na pewno nam się nic nie zmieni. Zobaczmy tę nowo powstałą ikonkę. Jest w porządku, być może jest troszeczkę

11:19.510za duża, więc możemy ją z Altem i z Shiftem trochę zmniejszyć. I została nam ostatnia ikona do stworzenia, ikona

11:27.250która znajdzie się tutaj.

11:28.750Wybieram 2 żeby przybliżyć, będzie to ikona z "pulsem", i stworzymy ją wyłącznie za pomocą "Pen Toola". I zacznijmy

11:35.530rysowanie tutaj.

11:36.730Następnie zrobimy jedną taką kreseczkę tu, tu i następną w tym miejscu. Skończymy to w ten sposób. I teraz wybiorę

11:49.240Return, Enter, żeby zatwierdzić te zmiany.

11:51.670Następnie znów zmieniamy wypełnienie, zmieniamy grubość obramowania.

11:55.980I tutaj przychodzi nam z pomocą jedna funkcja, która powoduje, że możemy zmienić kształt krawędzi tych

12:04.330kształtów.

12:04.900Tutaj mamy taką ostrą krawędź.

12:07.000Tutaj nie wygląda to zbyt dobrze.

12:08.620I tu też fajnie by było, gdyby była zaokrąglona. W związku z tym przechodzimy do tych trzech kropek, które

12:13.480znajdują się obok właściwości "Stroke'a", i opcje "Join" zmieniamy z "Mitter" na jedną z tych dwóch opcji, ale dla

12:21.460nas w tym momencie odpowiednia będzie "Round", czyli zaokrąglone krawędzie.

12:25.060Jak widzisz mamy teraz już ładnie zaokrąglone krawędzie w tych wszystkich przypadkach. Więc mogę z tego

12:30.190wyjść i mogę teraz podejrzeć trzy ikonki, które stworzyłem. Wyglądają one całkiem fajnie, są spójne, możemy

12:36.660to jeszcze wizualnie optycznie trochę lepiej wypozycjonować.

12:40.180I w związku z tym możemy przejść do kolejnej lekcji, gdzie będziemy robić następne ikony i poznamy jeszcze

12:44.530więcej właściwości "Pen Toola" i kształtów.

12:46.630Do usłyszenia!