Zamień pixel art na grafikę wektorową bez utraty ostrych krawędzi

Możesz przekształcić pixel art w grafikę wektorową, ale najpierw zdecyduj, czy kwadratowe piksele mają pozostać widoczne. Aby zachować oryginalny wygląd, odtwórz obraz jako siatkę lub mozaikę obiektów. Aby zmienić sprite w gładką ilustrację, użyj wektoryzacji konturów. To różne rezultaty, a zwykła wektoryzacja nie wybierze za Ciebie właściwego.

Jeśli edytujesz sprite do gry w Scratch, przycisk Convert to Vector zmienia tryb edycji bez wektoryzowania bitmapy. Skorzystaj z kontroli możliwości edycji kostiumu w Scratch, aby zdecydować, czy zachować piksele, przerysować fragment, czy zaimportować kształty SVG uzyskane przez wektoryzację, a następnie porównaj środek nowego kostiumu ze środkiem oryginału.

Jeśli Twoim rzeczywistym celem jest po prostu wyświetlanie ostrego pixel artu na stronie lub w grze, SVG może w ogóle nie być potrzebny. PNG o odpowiednich wymiarach, skalowany metodą najbliższego sąsiada, często zajmuje mniej miejsca i wierniej oddaje oryginał; w przeglądarce właściwość image-rendering udostępnia tryby crisp-edges i pixelated, które służą do zachowania ostrych krawędzi.

Trzy rezultaty do trzech różnych zastosowań

Nie chodzi tu przede wszystkim o to, który format jest „lepszy”, lecz o znaczenie poszczególnych kwadratów. W pixel arcie schodkowe krawędzie często są celowe. Ich wygładzanie może być równie destrukcyjne jak dodanie rozmycia do rysunku liniowego.

Zachowanie siatki i wygładzanie konturów to różne zadania

Sposób 1: zachowaj siatkę pikseli dokładnie

Najbardziej dosłowna konwersja na grafikę wektorową zamienia komórki obrazu rastrowego w wektorowe prostokąty. Czerwony piksel staje się czerwonym kwadratem. Ciąg sąsiadujących czerwonych pikseli może pozostać osobnymi kwadratami lub zostać scalony w większy prostokątny kształt, jeśli nie zmieni to sylwetki.

Zanim zaczniesz, ustal rzeczywiste wymiary siatki grafiki. Sprite wyświetlany w rozmiarze 800 na 800 pikseli mógł powstać jako siatka 32 na 32, powiększona metodą najbliższego sąsiada. Chcesz odtworzyć strukturę 32 na 32, a nie powiększone wymiary wyświetlania.

Tworzenie mozaiki za pomocą Object Mosaic w Illustratorze

Adobe opisuje wbudowany sposób przekształcenia osadzonej bitmapy w mozaikę:

1. Umieść oryginalny pixel art w Illustratorze i osadź go.
2. Zaznacz obraz i wybierz Object > Create Object Mosaic.
3. Jeśli znasz oryginalną siatkę pikseli, dopasuj do niej liczbę kafelków.
4. Użyj kwadratowych kafelków i wybierz wynik w kolorze.
5. Zachowaj źródłowy obraz rastrowy do czasu sprawdzenia mozaiki, a następnie usuń go lub ukryj.
6. Porównaj zewnętrzny kontur, wewnętrzne przerwy i paletę z oryginałem przy dużym powiększeniu.

Dokumentacja Create Object Mosaic firmy Adobe opisuje to polecenie, opcję kwadratowych kafelków, ustawienie kolorów i sposób postępowania ze źródłowym obrazem rastrowym. Opisany proces dla pixel artu jest praktycznym zastosowaniem tej udokumentowanej funkcji tworzenia mozaiki.

Mozaika obiektów może wiernie zachowywać strukturę, a mimo to być nieefektywna. Sprite o wymiarach 64 na 64 ma 4096 komórek przed jakimkolwiek scalaniem. Usuń całkowicie przezroczyste komórki, łącz sąsiadujące prostokąty tego samego koloru tam, gdzie to możliwe, i nie przenoś niewidocznych obiektów do końcowego SVG.

Sposób 2: utwórz SVG z siatką bez Illustratora

Możesz zbudować taki sam plik za pomocą skryptu uwzględniającego siatkę pikseli lub konwertera stworzonego do tego celu. Zasada jest ważniejsza od aplikacji:

1. Odczytaj źródło w jego natywnych wymiarach siatki.
2. Odwzoruj każdy piksel, który nie jest całkowicie przezroczysty, jako dokładny prostokąt wektorowy.
3. Zachowaj wartości palety bez antyaliasingu.
4. Scalaj sąsiadujące komórki tylko wtedy, gdy połączony kształt daje tę samą widoczną siatkę.
5. Wyeksportuj plik z atrybutem SVG viewBox odpowiadającym natywnym wymiarom siatki.
6. Przetestuj SVG przy wyświetlaniu w wymiarach całkowitych i niecałkowitych.

Projekt vectorize-pixelart o otwartym kodzie źródłowym jest jednym z przykładów narzędzia do konwersji przeznaczonego specjalnie do pixel artu. Pokazuje też ogólne ograniczenie: duże lub złożone siatki mogą generować ciężkie pliki SVG. Starsze narzędzie potraktuj najpierw jako materiał do analizy. Sprawdź jego kod i stan utrzymania, zanim włączysz je do procesu produkcyjnego.

Jeśli swobodnie posługujesz się kodem SVG, niewielki sprite możesz też odtworzyć ręcznie za pomocą elementów <rect>. To rozsądne rozwiązanie dla ikony 12 na 12. Przy szczegółowej scenie trudno uznać to za sensowny sposób spędzenia popołudnia.

Sposób 3: świadomie wygładź kształty

Czasem piksele są szkicem, a nie cechą definiującą grafikę. Możesz chcieć zmienić postać, kwiatek lub ikonę w dopracowaną naklejkę, grafikę do druku albo logo o zaokrąglonych konturach.

Jeśli świadomie zależy Ci na takiej wygładzonej interpretacji, PerfectVector sprawdzi się przy wektoryzacji konturów. Prześlij największą dostępną wersję grafiki powiększoną metodą najbliższego sąsiada, a następnie oceń rezultat jako nową ilustrację:

1. Najpierw usuń antyaliasing. Miękkie piksele na obrzeżach tworzą dodatkowe kolory i drobne kształty przy krawędziach.
2. Kontroluj paletę. Jeśli źródło używa ośmiu kolorów, wektoryzacja nie powinna tworzyć ich dziesiątek z powodu kompresji lub rozmycia.
3. Sprawdź schodkowe przekątne. Zdecyduj, które powinny stać się prostymi odcinkami, a które krzywymi.
4. Sprawdź otwory i przerwy o szerokości jednego piksela. Małe otwory mogą się zamknąć, gdy sąsiadujące obszary zostaną uproszczone.
5. Sprawdź liczbę węzłów. Celem wygładzania nie jest zastąpienie każdego kwadratowego narożnika kilkoma drobnymi krzywymi.
6. Przetestuj grafikę w docelowym rozmiarze. Gładka krzywa, która dobrze wygląda w rozmiarze plakatu, może zatrzeć twarz lub dłoń w rozmiarze ikony.

Ten sposób zmienia grafikę. Zapisz źródłowy PNG obok SVG, aby nikt nie pomylił wektorowej interpretacji z dokładną wersją archiwalną.

Problemy z przygotowaniem, które utrudniają każdy sposób konwersji

Źródło zostało przeskalowane z wygładzaniem. Wróć do sprite’a w natywnym rozmiarze lub przeskaluj go metodą najbliższego sąsiada. Gdy nowe, wymieszane kolory krawędzi zostaną już zapisane w obrazie, trudniej odzyskać oryginalną siatkę.

Plik ma format JPG. Kompresja tworzy bloki kolorów i obwódki (ringing) wokół każdej ostrej krawędzi pikseli. W miarę możliwości używaj oryginalnego PNG.

Przezroczyste tło zostało zastąpione jednolitą bielą. Białe tło może zamienić się w tysiące niechcianych komórek lub jeden duży kształt po wektoryzacji. Przywróć przezroczystość przed konwersją, a następnie sprawdź rezultat na kontrastującym obszarze roboczym. Nasz poradnik o przezroczystym tle w SVG omawia tę kontrolę.

Grafika zawiera półprzezroczyste efekty. Poświaty, cienie i częściowa nieprzezroczystość nie są tradycyjnymi komórkami pixel artu. Zdecyduj, czy zachować je jako efekty rastrowe, skwantyzować do jednolitych kolorów, czy zaprojektować od nowa dla wersji wektorowej.

Czy na stronie internetowej potrzebujesz grafiki wektorowej?

Niekoniecznie. Jeśli grafika jest sprite’em do gry lub ikoną interfejsu, PNG może nadal być właściwym plikiem wzorcowym. Używaj grafiki w natywnym rozmiarze, w miarę możliwości powiększaj ją całkowitą liczbę razy i skonfiguruj przeglądarkę lub silnik renderujący tak, aby wyświetlał ją z zachowaniem wyraźnych pikseli lub stosował interpolację metodą najbliższego sąsiada.

Siatka SVG pomaga, gdy paletę trzeba edytować jako obiekty, grafika ma być drukowana w dużym rozmiarze lub system dostarczania wyraźnie wymaga grafiki wektorowej. Nie sprawia automatycznie, że mała grafika ekranowa zajmuje mniej miejsca. Obiekt wektorowy dla każdej komórki może ważyć więcej niż kompaktowy PNG.

To jeden z przypadków, w których stwierdzenie „SVG można skalować bez końca” jest prawdziwe, ale niepełne. Grafikę można skalować bez końca, a jednocześnie jej przechowywanie, edycja lub renderowanie mogą stać się kosztowne. Nasz poradnik porównujący PNG i SVG szerzej wyjaśnia wybór formatu, a artykuł o tym, czym jest wektoryzacja obrazu, opisuje, dlaczego typowa wektoryzacja stawia kształty ponad siatkami pikseli.

Kontrola przed oddaniem pliku

Zanim przekażesz plik, porównaj go z oryginałem w natywnym rozmiarze oraz w docelowym rozmiarze wyjściowym.

• Wymiary siatki odpowiadają źródłu.
• Nie pojawiły się dodatkowe kolory na obrzeżach wskutek antyaliasingu.
• Przezroczyste komórki pozostają przezroczyste.
• Schodkowe kontury pozostają nienaruszone przy zachowywaniu siatki.
• Wygładzone krawędzie są zamierzone przy wektoryzacji konturów.
• Przerwy o szerokości jednego piksela, oczy, rozświetlenia i wewnętrzne otwory nadal są czytelne.
• Powtarzające się komórki tego samego koloru są upraszczane tylko tam, gdzie obraz pozostaje identyczny.
• SVG nie zawiera przypadkowo osadzonego oryginalnego obrazu rastrowego. Jeśli go zawiera, nadal może wyglądać na spikselowany mimo rozszerzenia pliku.

Najlepszy proces to taki, w którym jasno określasz kompromis. Zachowaj siatkę, gdy piksele są istotą grafiki. Wygładź kontury, gdy chcesz uzyskać nową wektorową interpretację. Zachowaj PNG, gdy grafika wektorowa nie daje Ci przydatnej kontroli.

Źródła

1. Adobe Illustrator — Creating sketches and mosaics — polecenie Object Mosaic, kwadratowe kafelki, wynik w kolorze i wymóg osadzenia obrazu rastrowego.
2. MDN — CSS image-rendering — renderowanie metodą zbliżoną do najbliższego sąsiada dla pixel artu w internecie.
3. W3C — PNG Specification, Third Edition — bezstratny model rastrowy PNG i działanie kanału alfa.
4. W3C — SVG Basic Shapes — geometria prostokątów używana w SVG, które dosłownie odwzorowują komórki siatki.
5. W3C — SVG Coordinate Systems and viewBox — odwzorowanie natywnego układu współrzędnych siatki w obszarze wyświetlania SVG.

Jeśli chcesz uzyskać gładkie kontury zamiast zachowanej siatki, przetwórz grafikę w PerfectVector, a następnie, zanim jej użyjesz, porównaj sylwetkę, przerwy o szerokości jednego piksela i drobne szczegóły z pikselowym plikiem wzorcowym.