Reklama

Kreator pixel art

Rysuj pixel art na siatce, animuj klatki i eksportuj do PNG, GIF lub kodu.

Autor: Nethanel Bar, Co-founder & CEO

Ostatnia aktualizacja 16 sierpnia 2026

Reklama

Chcesz naprawdę nauczyć się programować?

Coddy uczy cię przez pisanie prawdziwego kodu w przeglądarce: interaktywne lekcje, natychmiastowa informacja zwrotna i pomoc AI, gdy utkniesz.

Zacznij naukę za darmo

Czym jest edytor pixel art?

Edytor pixel art to narzędzie do rysowania oparte na stałej siatce: zamiast swobodnych pociągnięć stawiasz pojedyncze piksele, jeden kwadrat po drugim. To ograniczenie jest całym urokiem pixel artu: sprite'y w grach, retro ikony, awatary i ilustracje w stylu 8-bit powstają przez świadomy wybór każdego piksela.

Ten edytor daje ci klasyczny zestaw narzędzi do sprite'ów: ołówek, gumkę, wypełnianie i próbnik koloru na siatkach od 8x8 do 64x64, a do tego animację klatka po klatce z podglądem na żywo. Eksportuj wynik jako ostry PNG w dowolnym rozmiarze, animowany GIF albo arkusz sprite'ów gotowy dla silnika gry.

Ponieważ to Coddy, twój rysunek jest też kodem. Jedno kliknięcie zamienia siatkę w dwuwymiarową tablicę w Pythonie, fragment kodu canvas w JavaScripcie, grafikę z box-shadow w CSS, plik SVG albo CSV, który otworzysz w arkuszu kalkulacyjnym. To zabawny sposób, żeby zobaczyć, że obrazy to naprawdę tylko tablice wartości kolorów.

Czego nauczysz się, tworząc pixel art

Obraz to tablica dwuwymiarowa: każdy piksel to jeden element z wartością koloru. Eksport do kodu pokazuje twój rysunek dokładnie w ten sposób, jako wiersze i kolumny kodów hex.
Małe palety wyglądają lepiej. Klasyczne sprite'y używają od 4 do 32 kolorów; ograniczenie wymusza czyste kształty i czytelne sylwetki.
Animacja to po prostu klatki. Cykl chodu czy mrugnięcie to kilka lekko różniących się siatek pokazanych po kolei, a eksport GIF odtwarza je w wybranym tempie.
Skalowanie pixel artu wymaga interpolacji metodą najbliższego sąsiada. Eksportuj w skali 16x lub 32x, a kwadraty zostaną idealnie ostre; wygładzanie by je rozmyło.

Jak zrobić pixel art krok po kroku

Wybierz rozmiar siatki
Zacznij od małej: 16x16 lub 32x32. Małe siatki wymuszają proste, czytelne kształty, a większość klasycznych sprite'ów w grach ma 16x16 lub 32x32. Rozmiar możesz zmienić później bez utraty rysunku.
Zarysuj sylwetkę
Używaj ołówka do konturów i wypełniania do dużych obszarów. Najpierw narysuj ogólny kształt jednym kolorem, potem dodaj szczegóły. Prawy przycisk myszy (albo gumka) czyści piksel.
Cieniuj małą paletą
Wybierz 2 lub 3 odcienie na materiał: bazowy, rozjaśnienie i cień. Wbudowana paleta jest ułożona tak, żeby łatwo znaleźć takie przejścia, a próbnik pobiera każdy kolor, który już jest na płótnie.
Animuj (opcjonalnie)
Zduplikuj klatkę, przesuń kilka pikseli i naciśnij Odtwórz. Dwie lub trzy klatki wystarczą na mrugnięcie, podskok albo migotanie płomienia.
Eksportuj
Pobierz PNG w skali do 32x, animowany GIF albo arkusz sprite'ów ze wszystkimi klatkami w jednym rzędzie. Możesz też otworzyć panel kodu i skopiować grafikę jako Python, JavaScript, CSS, SVG lub CSV.

Reklama

Ściąga z pixel artu

Popularne rozmiary płótna i formaty eksportu oraz to, kiedy ich używać.

Wybór	Najlepsze do	Uwagi
Siatka 16x16	Ikony, favikony, malutkie sprite'y	Klasyczny rozmiar sprite'a, liczy się każdy piksel
Siatka 32x32	Postacie w grach, awatary	Złoty środek między szczegółowością a nakładem pracy
Siatka 64x64	Szczegółowe sceny, portrety	Najpierw zaplanuj sylwetkę, bo 4096 pikseli wypełnia się powoli
Eksport PNG	Awatary, naklejki, zasoby	Skaluj 16x lub więcej, żeby piksele zostały ostre
Eksport GIF	Animacje na czaty i strony	Używa ustawienia FPS; obsługuje przezroczystość
Arkusz sprite'ów	Silniki gier	Wszystkie klatki obok siebie w jednym PNG
Eksport do kodu	Nauka, sztuka generatywna	Python, JavaScript, CSS, SVG lub CSV

Przykłady pixel artu do wypróbowania

Twój rysunek jako tablica 2D w Pythonie

Python

PIXELS = [    [None, "#e43b44", "#e43b44", None],    ["#e43b44", "#a22633", "#a22633", "#e43b44"],    [None, "#e43b44", "#a22633", None],    [None, None, "#e43b44", None],]
for row in PIXELS:    print("".join("█" if c else " " for c in row))

Eksport do kodu zapisuje każdy piksel jako kolor hex w zagnieżdżonej liście i dodaje fragment kodu z Pillow, który renderuje go z powrotem do PNG. Ta malutka wersja drukuje kształt w terminalu, co dowodzi, że obraz to tylko tablica 2D.

Grafika z box-shadow w CSS na jednym divie

CSS

.pixel-art {    --px: 12px;    width: var(--px);    height: var(--px);    box-shadow:        calc(1 * var(--px)) 0 0 0 #e43b44,        calc(2 * var(--px)) 0 0 0 #e43b44,        calc(1 * var(--px)) calc(1 * var(--px)) 0 0 #a22633;}

Eksport CSS zamienia każdy piksel w jedno przesunięcie box-shadow pojedynczego diva, co jest klasycznym trikiem frontendowym. Wklej to na dowolną stronę i zmień --px, żeby przeskalować całą grafikę.

Pixel art w arkuszu kalkulacyjnym przez CSV

CSV

,#e43b44,#e43b44, #e43b44,#a22633,#a22633,#e43b44 ,#e43b44,#e43b44, ,,#e43b44,

Eksport CSV wstawia jeden kod hex do każdej komórki. Otwórz plik w Arkuszach Google lub Excelu, zwęż kolumny do kwadratów i dodaj regułę formatowania warunkowego, która koloruje każdą komórkę według jej wartości. Gotowe: pixel art w arkuszu.

Częste błędy w pixel arcie

Zaczynanie od siatki 64x64. Duże płótna ukrywają słabe kształty, więc ucz się na 16x16, gdzie każdy piksel to decyzja.
Używanie zbyt wielu kolorów. Jeśli sprite ma 40 kolorów, nie ma stylu. Wybierz małą gamę odcieni na materiał i się jej trzymaj.
Skalowanie eksportu z włączonym wygładzaniem. Pixel art trzeba skalować metodą najbliższego sąsiada (to narzędzie robi to za ciebie), inaczej zmienia się w rozmytą papkę.
Eksportowanie sprite'ów na białym tle. Zostaw przezroczyste tło dla wszystkiego, co trafi do gry lub zostanie nałożone na inne treści.
Animowanie ze zbyt wieloma klatkami. Klasyczny klimat gier bierze się z 2 do 4 dobrze dobranych klatek, a nie z 16 prawie identycznych.

Edytor pixel art: FAQ

Co to jest pixel art?

Pixel art to grafika cyfrowa, w której obraz buduje się piksel po pikselu na małej siatce, więc każdy kwadrat jest postawiony świadomie. To styl wizualny klasycznych gier wideo i nadal jest wszędzie: w grach indie, awatarach, ikonach i zdjęciach profilowych z ery NFT.

Jak zrobić pixel art na początek?

Zacznij od siatki 16x16 i 3 lub 4 kolorów. Narysuj sylwetkę czegoś prostego (serca, grzyba, miecza), a potem dodaj jeden odcień rozjaśnienia i jeden cienia. Wbudowane szablony dają ci kształt startowy, który możesz przekolorować i edytować. Prosty pixel art to czyste kształty, a nie szczegóły.

Jaki rozmiar powinien mieć pixel art?

16x16 i 32x32 to klasyczne rozmiary sprite'ów i najlepsze na początek; pixel art 32x32 pasuje do większości postaci w grach i awatarów. Po 64x64 sięgaj tylko wtedy, gdy potrzebujesz prawdziwych szczegółów. Przy eksporcie skaluj 16x lub 32x, żeby piksele zostały ostre w docelowym rozmiarze.

Jak zrobić animowany GIF w pixel arcie?

Dodaj drugą klatkę przyciskiem Duplikuj, zmień kilka pikseli (mrugnięcie oka, przesunięcie płomienia), ustaw FPS i naciśnij Odtwórz, żeby zobaczyć podgląd. Pobierz GIF eksportuje zapętlony animowany GIF z przezroczystością, gotowy na komunikatory, Discorda albo stronę internetową.

Co to jest arkusz sprite'ów?

Arkusz sprite'ów to jeden obraz zawierający wszystkie klatki animacji obok siebie. Silniki gier takie jak Unity, Godot i Phaser wczytują arkusz raz i odtwarzają klatki, przesuwając okno widoku. Eksport arkusza sprite'ów układa twoje klatki w rzędzie w komórkach o stałym rozmiarze.

Czy mogę używać tego jako edytora sprite'ów do mojej gry?

Tak. Narysuj każdą klatkę animacji, obejrzyj pętlę w tempie klatek swojej gry i wyeksportuj arkusz sprite'ów PNG z przezroczystym tłem. Eksporty SVG i PNG sprawdzają się też przy ikonach interfejsu i zestawach kafelków.

Czy to alternatywa dla Piskel?

Obejmuje ten sam podstawowy sposób pracy co Piskel (rysowanie na siatce, animacja klatek, eksport GIF i arkusza sprite'ów), działa w całości w przeglądarce bez instalacji i dodatkowo oferuje eksport do kodu. Jeśli szukasz prostego, rozwijanego edytora sprite'ów online, powstał właśnie w tym celu.

Co to jest pixel art w arkuszu kalkulacyjnym?

To klasyczny trik z lekcji: zmniejsza się komórki arkusza do kwadratów i koloruje je tak, żeby powstał obraz. Eksport CSV daje jeden kod hex na komórkę, więc jedna reguła formatowania warunkowego w Arkuszach Google lub Excelu odtwarza twój rysunek jako kolorowe komórki.

Jak zamienić pixel art na kod?

Otwórz panel kodu i wybierz format. Python daje listę 2D i renderer w Pillow, JavaScript rysuje obraz na canvasie, CSS renderuje go jako grafikę z box-shadow na jednym divie, SVG tworzy ostre wektorowe prostokąty, a CSV zasila arkusze kalkulacyjne. Formaty tablicowe to świetne pierwsze spojrzenie na to, jak obrazy działają w kodzie.

Czy ten edytor pixel art jest darmowy?

Tak: za darmo, bez rejestracji i bez znaku wodnego. Wszystko działa lokalnie w przeglądarce, a twoja grafika zapisuje się automatycznie na twoim urządzeniu i nigdy nie trafia na serwer.