Figma: Wstawianie Obrazków

00:00.300Zaczynamy dokładnie w miejscu, gdzie skończyliśmy poprzednio. I teraz chciałbym umieścić w ramach tła

00:04.590dla aplikacji obrazek. Może wybiorę plus, po to, żeby trochę to powiększyć, a następnie wybieram opcję "Place Image".

00:11.810czyli klikam sobie na tę małą ikonkę i wybieram jeden z obrazów, który mam przygotowany.

00:17.010Jeżeli umieszczę obraz w ten sposób, zauważ, że został on wklejony w naprawdę bardzo dużych rozmiarach.

00:22.110Mamy tutaj width 1920, height 1080, czyli to znaczy, że muszę się znacznie odzoomować, albo wcisnąć przycisk 0,

00:31.680po to, żeby przejść do opcji "Fit Screen".

00:34.560No, to jeszcze nie wystarczy, więc muszę się odzoomować, po to, żeby zeskalować ten obraz. Żeby skalować z zachowaniem proporcji

00:40.080skaluję z Altem i z Shiftem, i to jest jeden sposób na umieszczenie obrazu.

00:44.280Często będziemy musieli właśnie większe obrazki w ten sposób zmniejszać.

00:47.850Jeżeli teraz usunę ten obraz z pomocą Backspace, mogę pokazać Ci drugi sposób. I polega on na tym, że najpierw

00:54.420tworzymy sobie kształt, czyli tworzymy Rectangle, w ten sposób, a następnie jako wypełnienie tego kształtu używamy

01:01.440obrazka, czyli wybieramy opcję "Image".

01:03.660Moim zdaniem jest to zdecydowanie bardziej intuicyjny sposób. Możemy przeciągnąć i upuścić tu obrazek,

01:09.090albo wybrać po prostu polecenie "Choose Image" i wskazać ten sam obrazek, który wybraliśmy wcześniej.

01:15.180Ale jest to bardziej intuicyjne, dlatego, że nie będziemy musieli go później skalować.

01:18.840Jak widzisz ma on w tym momencie wybraną opcję "Fill", czyli opcję, która pozwala nam wypełnić całą dostępną

01:24.600przestrzeń, czyli cały prostokąt, który narysowaliśmy. Ten prostokąt możemy naturalnie powiększyć, możemy

01:30.300zreorganizować kolejność warstw, tak, aby warstwa z obrazkiem znajdowała się pod spodem, i dzięki temu też

01:37.380troszeczkę go powiększyć, rozciągnąć tutaj do góry i zrobić dokładnie taki rozmiar, jaki planowaliśmy.

01:43.080Ale możemy też zmienić jedną z opcji, czyli możemy zamiast "Fill" wybrać np. "Fit", i w ten sposób nie będzie to wypełniało

01:50.220całego kształtu, ale w proporcjach zostanie przeskalowany tak, aby wszystko to, co jest na obrazku, zmieściło się

01:55.590w tym kształcie, który wypełniamy.

01:57.540Mamy też opcję "Crop", czyli mamy możliwość przycięcia tego zdjęcia, nie będę tego robił, i mamy opcję "Tile".

02:04.550"Tile" to opcja, która pozwala ten obrazek wyświetlać w kafelkach, jeden obok drugiego.

02:09.540Nie będziemy z niej korzystać.

02:10.820Możemy tutaj, zauważ, w opcji "Tile", skorzystać z wariantów np. 1%, 11% - i w ten sposób zmniejszać sobie nasz obrazek

02:18.730i dzięki temu, że mamy właśnie opcję "Tile" włączoną, to on będzie wypełniał kafelkami tę całą, dostępną przestrzeń.

02:25.980To jest fajne w momencie, gdy tworzymy jakieś wzorki, patterny - ale w przypadku obrazków najczęściej będziesz

02:30.720używał opcji "Fill".

02:32.240Ja w związku z tym zostawię sobie opcję "Fill" włączoną i teraz już mogę zamknąć to pole. I teraz chciałbym

02:38.100uzyskać taki efekt, że to zdjęcie nie będzie aż tak bardzo wyraźne, czyli będzie ono miało jakieś krycie.

02:43.640No i możemy przejść sobie do opcji wypełnienia, i mamy tutaj 100% krycia. Klikamy w tym polu, i z pomocą

02:49.810Shifta i strzałki w dół zmniejszamy krycie tego elementu.

02:52.710Problem polega na tym, że pod spodem jest białe tło, a my chcielibyśmy, aby to krycie zmieniało się w taki

02:58.650ciemny kolor, jaki mamy tutaj poniżej w stopce. możemy kliknąć na te warstwy i od razu je nazwać, czyli

03:04.490Cmd+R

03:05.190Będzie to "Footer", a ta druga warstwa, z pomocą Tab, nazwę ją po prostu "Image".

03:10.120I teraz chciałbym powielić warstwę "Footer".

03:13.140Jak to zrobić?

03:13.890Skorzystam ze skrótu klawiaturowego, który warto zapamiętać.

03:17.490Jest to skrót Cmd+D, albo Ctrl+D na Macu jak "Duplicate", po prostu pozwala on powielić tę warstwę.

03:23.760Więc, jeśli wcisnę Cmd+D, "Footer" zostanie powielony i mam już dwie takie same warstwy. Mogę ją usunąć,

03:29.900i mogę pokazać Ci jeszcze jeden, alternatywny sposób na klonowanie. Zamiast Cmd+D mogę wcisnąć i przytrzymać

03:35.760Alt na klawiaturze, wtedy zmieni mi się kursor na takie charakterystyczne dwie strzałki, białą i czarną,

03:40.950i będę mógł wyciągnąć tę warstwę, którą chcę powielić.

03:43.860Jeżeli w tym momencie puszczę, jak widzisz, została ona też skopiowana.

03:48.030Czyli dwie alternatywne metody.

03:50.090Jeśli wybiorę Cmd+D, to mogę teraz ten "Footer", który jest powielony, umieścić na samym dole w strukturze

03:56.670warstw, tak aby pozostałe warstwy go przykrywały, zmienić jego nazwę na "BG" - jak "Background", i powiększyć w

04:04.320taki sposób, aby przykrywał całą przestrzeń.

04:07.340I teraz już pod spodem mam to ciemne tło, więc mogę wybrać warstwę "Image" - obrazek, a następnie zmienić jej

04:13.470poziom przezroczystości. Teraz przechodzę w związku z tym do tego pola, a następnie z pomocą Shift i strzałki w dół

04:19.260zmieniam sobie przezroczystość na pożądaną, np. wybieram około 18%.

04:24.960Ok, to wszystko, jeśli chodzi o umieszczanie obrazków, skalowanie i wstawianie ich do konkretnych warstw.

04:30.030To wszystko na teraz.

04:31.080Zapraszam w związku z tym do kolejnej lekcji!