Generator siatki do przezroczystego PNG i SVG
Ten generator siatki rysuje równo rozmieszczone linie na przezroczystym tle, dokładnie w rozmiarze pikseli, który wybierzesz. Ustawiasz kolumny, wiersze, grubość i kolor linii, a potem pobierasz siatkę jako PNG lub SVG albo kopiujesz ją jako tło CSS. Przyda się jako warstwa pomocnicza nad grafiką, układem strony lub zrzutem ekranu. Wszystko działa w przeglądarce i nic nie jest wysyłane.
Siatka online w czterech krokach
Siatka rysuje się od razu na stronie:
- Wpisz Szerokość płótna (px) i Wysokość płótna (px). Każda wartość mieści się w zakresie od 10 do 5000 i na początku wynosi 1920 na 1080.
- Ustaw Kolumny (od 1 do 200, na początku 12) i Wiersze (od 1 do 200, na początku 6).
- Ustaw Grubość linii (px) od 1 do 50 i wybierz Kolor linii. Domyślnie jest czerwony, #FF0000.
- Sprawdź podgląd, a potem naciśnij Pobierz PNG, Pobierz SVG lub Kopiuj CSS.
Nie ma przycisku zatwierdzania. Podgląd rysuje się na nowo podczas wpisywania, a szachownica za nim pokazuje, które części pliku są przezroczyste. Szachownica nie jest częścią pobranego pliku.
Rozmiar komórki z płótna, kolumn i wierszy
Płótno jest dzielone równo: szerokość komórki to szerokość podzielona przez liczbę kolumn, a wysokość to wysokość podzielona przez liczbę wierszy. Napis „Każda komórka ma … × … px” pod podglądem pokazuje wynik, gdy zmieniasz wartości. Żeby komórki były kwadratowe, wybierz liczby dające ten sam rozmiar w obu kierunkach. Płótno 1920 × 1080 z 16 kolumnami i 9 wierszami daje komórki 120 × 120 px.
Linie są wyśrodkowane na każdym wewnętrznym podziale. Jeśli płótno nie dzieli się równo, linia może wypaść między dwoma pikselami i w PNG wyglądać nieco miękko. Dla ostrych linii wybierz szerokość będącą wielokrotnością liczby kolumn i wysokość będącą wielokrotnością liczby wierszy.
Popularne rozmiary siatki, także do Figmy
Najczęściej potrzebne rozmiary (szerokość × wysokość, kolumny × wiersze, rozmiar komórki):
- Kwadratowe komórki w Full HD: 1920 × 1080, 16 × 9, 120 × 120 px
- Kwadratowe komórki w 4K: 3840 × 2160, 32 × 18, 120 × 120 px
- Siatka 3 na 3, kwadratowa: 1080 × 1080, 3 × 3, 360 × 360 px
- Siatka 3 na 3, pionowa 9:16: 1080 × 1920, 3 × 3, 360 × 640 px
Gotowy plik możesz dodać do ramki w Figmie jako przezroczystą warstwę.
Grubość linii, kolor linii i opcje zaawansowane
Grubość linii to szerokość kreski w pikselach płótna. Na dużym płótnie cienka linia potrzebuje więc wyższej wartości, żeby pozostała widoczna po pomniejszeniu obrazu. Pole koloru linii otwiera selektor kolorów przeglądarki i pokazuje obok wartość szesnastkową. Wybierz kolor kontrastujący z tłem: biały na ciemnej grafice, ciemny na jasnej.
W sekcji Opcje zaawansowane są trzy pola wyboru. Zwykła siatka ma linie tylko na wewnętrznych podziałach, więc brzegi pliku zostają puste.
- Obramowanie zewnętrzne dodaje ramkę. Jest rysowana wewnątrz krawędzi płótna, dzięki czemu ma pełną grubość linii.
- Krzyż pośrodku dodaje jedną linię pionową i jedną poziomą przez środek. Przy parzystej liczbie kolumn lub wierszy pośrodku jest już linia, więc różnicę widać tylko przy nieparzystych liczbach.
- Linie ukośne dodają dwie linie z rogu do rogu, które krzyżują się w środku.
Siatka SVG i tło CSS
Pobierz PNG zapisuje przezroczysty obraz dokładnie w rozmiarze płótna, z nazwą w rodzaju siatka-1920x1080.png. Pobierz SVG zapisuje tę samą siatkę jako linie wektorowe bez tła, z nazwą w rodzaju siatka-1920x1080.svg. Kopiuj CSS wkłada do schowka wiersz background-image: url("data:image/svg+xml,...") i wiersz background-size, żeby programista mógł położyć siatkę na stronie bez osobnego pliku obrazu.
Tło domyślnie się powtarza. Jeśli układasz je kafelkami, pamiętaj, że zwykła siatka nie ma linii na zewnętrznej krawędzi. Przy włączonym obramowaniu zewnętrznym na każdym łączeniu spotykają się dwie ramki i wyglądają na około dwa razy grubsze niż ustawiona wartość.
Siatka na zdjęcie albo kod układu CSS?
Jeśli chcesz narysować siatkę na obrazie, który już masz, metodą kratki do rysowania, użyj narzędzia Generator siatki na zdjęciu. Jeśli chcesz zbudować układ strony i dostać kod grid-template-areas, wybierz Generator CSS Grid. To narzędzie służy do pustego, przezroczystego pliku siatki.
Najczęstsze pytania
Jak zrobić PNG z przezroczystą siatką?
Wpisz „Szerokość płótna (px)” i „Wysokość płótna (px)”, ustaw „Kolumny” i „Wiersze”, wybierz „Kolor linii” i naciśnij „Pobierz PNG”. Tło pliku jest przezroczyste. Szachownica w podglądzie tylko to pokazuje. Plik zapisuje się pod nazwą w rodzaju siatka-1920x1080.png, z Twoim rozmiarem w nazwie.
Jak zrobić siatkę 3 na 3 w PNG?
Ustaw „Kolumny” na 3 i „Wiersze” na 3. To rysuje dwie linie pionowe i dwie poziome oraz dzieli płótno na dziewięć równych komórek. Włącz „Obramowanie zewnętrzne” w sekcji „Opcje zaawansowane”, jeśli chcesz też ramkę na krawędzi, i naciśnij „Pobierz PNG”.
Jaki rozmiar powinna mieć siatka w proporcjach 9:16?
Ustaw „Szerokość płótna (px)” na 1080 i „Wysokość płótna (px)” na 1920 dla pionowego obrazu na cały ekran. 2160 na 3840 to ten sam kształt 9:16 z dwukrotnie większą szczegółowością. Oba mieszczą się w limicie 5000 px. Napis pod podglądem pokazuje rozmiar jednej komórki.
Jak zrobić białą siatkę jako nakładkę?
Wybierz biały, #FFFFFF, w polu „Kolor linii”. Białe linie mogą być słabo widoczne na szachownicy w podglądzie, ale pobrany PNG zachowuje je na przezroczystym tle, więc są widoczne, gdy położysz plik na zdjęciu lub ciemnym układzie.
Czy można zrobić siatkę SVG?
Tak. Naciśnij „Pobierz SVG”, żeby zapisać tę samą siatkę jako plik wektorowy, na przykład siatka-1920x1080.svg. Linie są kreskami w wybranym kolorze i nie ma wypełnienia tła, więc plik jest ostry przy każdym powiększeniu i otwiera się w przeglądarce lub dowolnym edytorze wektorowym.
Jak użyć siatki jako tła CSS?
Naciśnij „Kopiuj CSS” i wklej wynik do reguły. Dostaniesz background-image z siatką jako wbudowanym SVG oraz background-size równe rozmiarowi Twojego płótna. Zmień background-size, żeby ją przeskalować, albo wybierz małe płótno i pozwól tłu się powtarzać. Bez „Obramowanie zewnętrzne” krawędzie kafelków nie mają linii.
Jak dodać siatkę w Illustratorze lub Figmie?
Oba programy mają własne siatki i prowadnice. Użyj tego generatora, gdy potrzebujesz siatki jako pliku o dokładnym rozmiarze. Otwórz SVG w Illustratorze, żeby linie zostały wektorami, albo połóż PNG nad grafiką jako przezroczystą warstwę. W Figmie możesz dodać dowolny z tych plików do ramki.
Dlaczego mój PNG jest mniejszy na iPhonie lub iPadzie?
Safari na iPhonie i iPadzie zwraca pusty obraz powyżej około 16 milionów pikseli, więc PNG jest tam zmniejszany, a komunikat podaje rozmiar zapisu. SVG zawsze zachowuje pełny rozmiar, o który prosisz, więc użyj go, gdy potrzebujesz dokładnych wymiarów.
Polecane
-
Ołówek automatyczny Pentel GraphGear 500Najpierw naszkicuj układ na papierze cienkimi liniami zgodnymi z siatką
-
Notes Leuchtturm1917 A5 w kropkiNaszkicuj ekrany na papierze w kropki, zanim otworzysz Figmę
-
Tablet graficzny Wacom Intuos SRysuj ręcznie na warstwie siatki piórkiem, które prowadzi kursor
Pomaga utrzymać narzędzia za darmo. ✨
Zdjęcia poglądowe. Jestem Partnerem Amazon i otrzymuję wynagrodzenie z tytułu określonych zakupów dokonywanych za moim pośrednictwem.
