Projektanci, studenci i wszyscy, którzy tworzą tło ekranu, mogą użyć dostępnych opcji, aby dopracować gradient przed eksportem. Obraz jest generowany lokalnie w przeglądarce, więc możesz utworzyć plik bez przesyłania wybranych kolorów w inne miejsce.
Jak korzystać z generatora teł gradientowych
- Wybierz Wypełnienie tła: jednolite, liniowe lub radialne. Ustaw Kolor główny, a następnie dodaj lub usuń punkty gradientu, aby uzyskać wybrane przejście.
- W przypadku gradientu liniowego dostosuj Kąt gradientu (stopnie). Użyj opcji Losowe ziarno i Ustawienie wstępne gradientu (Morze lub Zmierzch), a następnie wybierz Generuj na podstawie ziarna, aby utworzyć wariant oparty na ziarnie. Punkty o tej samej pozycji celowo tworzą ostre krawędzie.
- Wybierz ustawienie wstępne Rozdzielczości wyjściowej, na przykład 1920x1080, 1080x1080 lub 1080x1920. Wybierz opcję Niestandardowa, aby samodzielnie wpisać Szerokość wyjściową (piksele) i Wysokość wyjściową (piksele).
- W sekcji Format obrazu wybierz PNG, JPG lub WEBP. Podgląd jest niewielki; wybierz Pobierz obraz, aby wygenerować i pobrać plik w pełnym rozmiarze.
- Wybierz Kopiuj CSS gradientu bazowego, jeśli potrzebujesz kodu CSS dla gradientu bazowego. Użyj opcji Pełny ekran, aby powiększyć scenę, Ukryj elementy sterujące, aby je schować, lub Resetuj, aby zacząć od nowa. Naciśnij F, aby włączyć pełny ekran, R, aby zresetować ustawienia, lub Escape, aby wyjść z trybu pełnoekranowego.
Kiedy warto go użyć
- Tworzenie tapety na komputer: wybierz panoramiczną rozdzielczość, taką jak 1920x1080 lub 3840x2160, aby dopasować obraz do typowych proporcji ekranu.
- Tworzenie tła na telefon: wybierz pionowy format 1080x1920, aby uzyskać wysoką kompozycję.
- Przygotowanie kwadratowego tła graficznego: wybierz 1080x1080, aby utworzyć kwadratowy obraz.
- Wypróbowywanie zestawień kolorów: przed pobraniem zmień Kolor główny i punkty gradientu, zamiast wielokrotnie edytować wyeksportowane pliki.
- Tworzenie tła z ostrą granicą kolorów: umieść punkty w tej samej pozycji, aby uzyskać celowo ostrą krawędź.
- Korzystanie ze sprawdzonego punktu wyjścia: wybierz ustawienie wstępne gradientu Morze lub Zmierzch i wygeneruj wariant na podstawie ziarna.
- Dodawanie gradientu do projektu strony internetowej: skopiuj CSS gradientu bazowego i wykorzystaj go jako punkt wyjścia do stylu tła.
Wskazówki dotyczące tworzenia lepszych teł gradientowych
Wybierz proporcje obrazu przed dopracowaniem kolorów: gradient, który wygląda harmonijnie w szerokim podglądzie, może prezentować się inaczej w obrazie pionowym lub kwadratowym. Jeśli znasz dokładny rozmiar płótna, wybierz opcję Niestandardowa i wpisz jego szerokość oraz wysokość.
| Opcja | Na co wpływa |
|---|---|
| Kąt gradientu (stopnie) | Określa kierunek gradientu liniowego. |
| Punkty gradientu | Pozwalają kontrolować kolory i przejścia w gradiencie; punkty w tej samej pozycji tworzą ostrą krawędź. |
| Format obrazu | Dostępne są formaty PNG, JPG i WEBP. JPG i WEBP mogą zmieniać wartości pikseli. |
| Rozdzielczość wyjściowa | Określa wymiary pobieranego obrazu. Obsługa 8K zależy od urządzenia. |
Podgląd jest tylko niewielkim odwzorowaniem obrazu: pełny obraz zostanie wygenerowany po wybraniu opcji Pobierz obraz. Jeśli chcesz użyć CSS, pamiętaj, że opcja Kopiuj CSS gradientu bazowego uwzględnia wyłącznie gradient bazowy, a nie dodatkowe wzory, tekst czy kształty.
Ograniczenia, o których warto pamiętać
Generator teł gradientowych tworzy obraz do pobrania, ale nie gwarantuje, że będzie on wyglądał identycznie na każdym ekranie i w każdej przeglądarce. Renderowanie na płótnie i w CSS może różnić się przy krawędziach, zwłaszcza w przypadku ostrych przejść. JPG i WEBP mogą również zmieniać wartości pikseli, dlatego wybierz PNG, jeśli ważne jest zachowanie ich dokładnych wartości.
Maksymalny rozmiar wyjściowy to 33 177 600 pikseli, a możliwość eksportu bardzo dużych obrazów zależy od urządzenia; format 8K może nie działać na każdym urządzeniu. Jeśli pobieranie dużego pliku trwa długo lub kończy się niepowodzeniem, wybierz mniejszą rozdzielczość albo wpisz mniejsze wymiary niestandardowe. W przypadku prac wymagających precyzyjnego odwzorowania kolorów sprawdź wyeksportowany obraz w docelowym programie i na ekranie, na którym będzie wyświetlany.
