Tło gradientowe i podgląd samej ikony

Gradient może dodać głębi prostemu znakowi, ale najpierw zadbaj o czytelność. Zacznij od dwóch kolorów tła i jednego wyraźnego znaku, a potem sprawdź mały podgląd.

Włącz gradient

Otwórz generator. W panelu Kompozycja zaznacz Gradient tła. Kreator pokazuje osobny podgląd i sześć gotowych presetów. Kliknij próbkę, aby zacząć od gotowej palety, albo ustaw własne kolory. Wyłączenie gradientu pozwala porównać go z jednolitym tłem.

Każdy wiersz kreatora to punkt koloru. Wybierz kolor i ustaw jego pozycję suwakiem od 0 do 100%. Dodaj kolor wstawia punkt pomiędzy najbardziej oddalone punkty; możesz użyć od dwóch do ośmiu kolorów. Przycisk × usuwa punkt, a Odwróć gradient zamienia kierunek całej palety.

Wybierz typ Liniowy, aby ustawić kierunek przejścia, lub Radialny, aby kolory rozchodziły się od środka ku narożnikom. W gradiencie radialnym suwak kąta jest ukryty.

Kąt 0° prowadzi gradient od lewej do prawej, 90° od góry do dołu, a 180° od prawej do lewej. Suwak działa lokalnie i od razu zmienia podgląd.

Sprawdź kontrast znaku

Umieść jasny znak na ciemniejszym tle lub ciemny na jasnym. Unikaj zestawu, w którym część znaku znika na jednym z końców gradientu. Zmniejsz powiększenie podglądu, aby ocenić czytelność przy niewielkim rozmiarze.

Spróbuj źródłowego SVG dostępnego pod poradnikiem. Własna grafika tła jest rysowana nad kolorem lub gradientem; nieprzezroczysty obraz może całkowicie zakryć gradient. Włączona przezroczystość wyłącza tło w formatach, które ją obsługują.

Pracuj na samej ikonie

Dla iOS, Androida, macOS, Windowsa i Linuksa włącz Podgląd samej ikony na górze panelu kompozycji. Duży podgląd ukryje pulpit lub ekran telefonu. Możesz przeciągać grafikę, zmieniać skalę oraz powiększać podgląd jak w PNG.

Przełącznik dotyczy wybranej platformy. Wyłącz go, aby zobaczyć znak w otoczeniu innych aplikacji. Ta opcja zmienia podgląd, nie format ani rozmiar eksportowanych plików.

Porównaj warianty platform

Domyślnie platformy korzystają z kompozycji bazowej. Aby ustawić inny gradient tylko dla jednego formatu, przełącz Kompozycję dla projektu na kompozycję tej platformy. Możesz wrócić do bazowej bez utraty zachowanego wariantu.

W Androidzie kolorowy gradient trafia także do warstwy tła adaptive. Podgląd ikony tematycznej pokazuje kolory tematyczne zamiast oryginalnego gradientu. Ikona powiadomień pozostaje sylwetką bez dekoracyjnego tła.

Zachowaj ustawienia i źródła

Kliknij Zapisz projekt, aby zachować gradienty, warianty i wybór podglądu razem z własnymi grafikami. ZIP z eksportem ikon również zawiera typ gradientu, wszystkie punkty koloru i dane do odtworzenia projektu; pojedynczy PNG zawiera tylko gotowy obraz.

Przed przekazaniem paczki sprawdź każdy wybrany format. Szczegóły zapisu znajdziesz w poradniku o archiwach projektu.