Miękkie gradienty w Figmie: trzy warstwy radialne zamiast jednego wypełnienia

Przeanalizuj budowę pola

We wpisie nr 644 pokazano osiem zestawień do Figmy. Wspólna zasada to kilka Radial Fill, a nie jeden gradient z długą listą wielokolorowych punktów. Każde wypełnienie tworzy osobny miękki obszar.

W ćwiczeniu użyj prostokąta z zaokrąglonymi narożnikami i spokojnej jasnej podstawy. Najpierw odtwórz zestawienie „Мятный свет” (Miętowe światło), a potem zmieniaj kolory. Łatwiej zrozumiesz, co zależy od palety, a co od położenia środków.

Każda warstwa radialna w oryginalnej instrukcji ma dwa skrajne punkty: kolor z kryciem 100% i ten sam kolor z kryciem 0%. Półprzezroczysta krawędź pozwala warstwom nachodzić na siebie bez tworzenia ostrych pasów.

Kolory pierwszego przykładu

Na karcie „Мятный свет” podano trzy kolory i wskazówki dotyczące ich położenia. Zachowaj te wartości w pierwszym ćwiczeniu, aby porównywać wynik z oryginałem zamiast dobierać wszystko naraz.

• #A4FCF5 — warstwa miętowa, środek u góry po lewej.
• #CDAFFA — warstwa liliowa, środek u góry po prawej.
• #F7CBBF — warstwa brzoskwiniowa, środek na dole po lewej.

Najpierw ustaw warstwę miętową od pełnego koloru do przezroczystości. Potem dodaj liliową i brzoskwiniową według tej samej zasady. Pilnuj, aby przezroczysty punkt zachowywał kolor swojej warstwy, tak jak wskazano na oryginalnej karcie.

Przesuwaj środek zamiast dodawać nowe kolory

Jeśli jasna plama znalazła się dokładnie pośrodku i wygląda zbyt ostro, przesuń ją ku krawędzi figury. Wpis dopuszcza położenie środka nieco poza polem. Wewnątrz zostaje wtedy łagodniejsza część kolorowego obszaru.

Zmieniaj jeden parametr naraz. Najpierw położenie środka, potem długość przejścia, a następnie w razie potrzeby krycie. Jednoczesne przesuwanie wszystkich trzech warstw utrudnia zrozumienie przyczyny wyniku.

Jeśli ostatnia warstwa całkowicie zakryła pozostałe, sprawdź jej przezroczystą krawędź i rozmiar kolorowego obszaru. Dodanie czwartego koloru nie naprawi wypełnienia, które stało się już niemal jednolite.

Sprawdź inne zestawienie

Powtórz kolejność działań na drugim przykładzie, korzystając z wartości z jego karty. Porównuj położenie kolorowych plam, a nie tylko ogólny odcień. Dwa gradienty mogą mieć zbliżone kolory, ale zupełnie inny rozkład światła.

Wszystkie osiem przykładów znajdziesz w bezpłatnym zestawie miękkich gradientów. Tutaj nie potrzeba promptu tekstowego: materiał pokazuje czynności bezpośrednio w edytorze graficznym.

Zastosuj gradient pod tekstem

Umieść na polu krótki podpis i sprawdź go w każdym kolorowym obszarze. Kontrast trzeba oceniać tam, gdzie rzeczywiście znajduje się tekst. Dobra czytelność na części liliowej nie gwarantuje jej na jaśniejszej miętowej.

Jeśli tło przeszkadza, odsuń środek koloru od podpisu lub osłab konkretną warstwę. Nie trzeba przyciemniać całego pola. Dla karty interfejsu zapisz wariant z tekstem i bez niego, aby zobaczyć, jak tło działa w kompozycji.

Rezultatem ćwiczenia jest edytowalne pole o zrozumiałej budowie. Możesz dopasować je do koloru projektu bez szukania nowego obrazu: struktura warstw pozostaje, zmieniają się wartości i położenie kolorowych obszarów.