Jak przenieść osobowość ręcznie narysowanej postaci do pixel artu

Zanim otworzysz edytor pikseli, porównaj rysunek z krótkim opisem. Zwróć uwagę na ogólny kształt postaci, proporcje głowy do reszty ciała, typową postawę, dominujące kolory oraz jedną lub dwie charakterystyczne cechy. Opadająca grzywka, kanciasty kapelusz, za duże rękawy lub przechylona sylwetka mogą bardziej wpływać na rozpoznawalność niż liczne ozdobne kreski.

Sporządź krótką listę priorytetów i oceń, jak ważna jest każda cecha dla tożsamości postaci. Jeśli szczegół jest drobny w oryginalnym rysunku, ale powtarza się lub jest wyjątkowo charakterystyczny, może zasługiwać na miejsce. Jeśli to zwykła ozdoba powierzchni, prawdopodobnie można ją usunąć. Taka lista pomaga podejmować decyzje redakcyjne: ułatwia rozdzielenie ograniczonej liczby pikseli zamiast jednakowego zachowywania każdej linii.

Zdecyduj, jak duża będzie postać w docelowym zastosowaniu. Płótno, które w edytorze wydaje się przestronne, po zmniejszeniu może mieć zbyt mało pikseli na twarz, kończyny lub charakterystyczny element. Poradnik Adafruit pokazuje, jak różne rozmiary płótna i ograniczenia palety wpływają na tworzenie sprite’ów; opisuje przykłady w rozmiarach 16×16 i 32×32, a także pokazuje, że odpowiedni rozmiar zależy od zastosowania. Poradnik Adafruit o pixel arcie w MakeCode Arcade

Potraktuj sugerowany rozmiar płótna jako punkt wyjścia, a nie uniwersalną zasadę. Kompaktowa ikona, postać z gry oglądana z daleka i postać pokazana z bliska mają różne potrzeby. Naszkicuj wstępny układ w przewidywanym rozmiarze i sprawdź, czy ważne kształty nadal da się od siebie oddzielić. Jeśli charakterystyczny kosmyk włosów lub rekwizyt konkuruje z twarzą o zaledwie kilka pikseli, zwiększ płótno albo uprość projekt, zanim dodasz szczegóły.

Wypełnij kontur postaci jednym jednolitym kolorem. Na tym etapie kształt powinien przekazywać ogólną pozę i przynajmniej część tożsamości postaci bez polegania na liniach wewnętrznych ani kolorach. Sylwetka to zewnętrzna granica między sprite’em a tłem; samouczki pixel artu wskazują ją jako główne źródło czytelności. Poradnik Pixor o konturach i sylwetkach

Zwróć szczególną uwagę na miejsca, w których części ciała się łączą. Na rysunku niewielka przerwa między ramieniem a tułowiem może być oczywista dzięki grubości linii lub cieniowaniu; w rozmiarze sprite’a kształty mogą się zlewać. Zrób przerwę, jeśli wymaga tego poza, albo zmień kąt ramienia, by jego kontur był czytelny. Podobnie ustaw rekwizyt lub włosy pod takim kątem, aby zmieniały zarys sylwetki zamiast ginąć na tle ciała.

Właśnie tutaj może pomóc kontrolowana przesada. Poszerzenie charakterystycznego kołnierza albo mocniejsze przechylenie głowy może zachować pierwotne wrażenie po zmniejszeniu. Nie chodzi o anatomiczną dokładność za wszelką cenę, lecz o czytelny, przemyślany układ pikseli, który zachowa rozpoznawalność pierwotnej pozy i cech projektu.

Na ręcznie rysowanej twarzy brwi, powieki lub kąciki ust mogą być zaznaczone cienkimi liniami. Mały sprite może nie mieć dość pikseli, by zachować je wszystkie osobno. Zdecyduj, który element wyrazu twarzy jest najważniejszy, i przedstaw go w najprostszy czytelny sposób: może to być kąt brwi, rozstaw oczu, przechylenie głowy lub kształt ust. Nie dodawaj pojedynczych pikseli szczegółów, dopóki nie sprawdzisz, czy przy normalnym rozmiarze dają zamierzony efekt.

Zastosuj tę samą zasadę do ciała. Zachowaj różnice proporcji, które definiują postać, takie jak duża głowa, wąskie ramiona lub długi płaszcz, a uprość fałdy i anatomię, które nie wpływają na jej tożsamość. Sprawdź, jak nakładają się na siebie dłonie, rękawy, włosy i tułów; użyj odmiennych wartości jasności lub bloków kolorów, gdy sama sylwetka nie wystarcza, by pokazać, który element znajduje się z przodu.

Nie musisz odtwarzać każdego koloru z rysunku źródłowego. Zacznij od zachowania relacji, które definiują postać: wskaż najjaśniejszy i najciemniejszy obszar oraz kolor akcentujący, który przyciąga uwagę. Grupuj kolory według materiału lub roli, na przykład włosów, ubrania, skóry i dodatków. Ograniczona paleta ułatwia odróżnianie tych grup. Adafruit zauważa, że ograniczone palety wciąż są popularnym wyborem stylistycznym we współczesnym pixel arcie i pokazuje postać utworzoną z użyciem dwunastu kolorów. Omówienie palety i płótna na stronie Adafruit

Zapewnij każdemu ważnemu obszarowi wystarczający kontrast względem sąsiadujących kształtów. Jeśli włosy i płaszcz zlewają się w jedną ciemną masę, zmień ich jasność lub barwę, zanim dodasz refleksy. Jeden jasny akcent może być też bardziej użyteczny niż kilka dodatkowych odcieni. Nie ma jednej liczby kolorów odpowiedniej dla każdego sprite’a: wybór zależy od rozmiaru płótna, stylu i widoczności postaci.

Dostosuj sposób rysowania konturu do skali sprite’a i jego otoczenia. Ciemna krawędź może oddzielić małego sprite’a od złożonego tła, ale obrysowanie każdego wewnętrznego załamania może zagracić obraz. Pixor rozróżnia zewnętrzny kontur od linii wewnętrznych i zaleca stosowanie tych drugich tylko tam, gdzie nakładające się na siebie formy mogłyby być mylone. Pixor o liniach sylwetki, liniach wewnętrznych i załamaniach

Gdy sylwetka, poza i główne grupy kolorów są już gotowe, dodawaj szczegóły według priorytetu: najpierw cechy z listy rozpoznawalności, potem drugorzędne akcenty, a na końcu teksturę powierzchni, jeśli zostanie miejsce. Na każdym etapie zastanów się, czy dany znak wpływa na rozpoznawalność, oddziela formy lub wyjaśnia wyraz twarzy. Jeśli nie spełnia żadnej z tych funkcji, piksele można lepiej wykorzystać gdzie indziej.

Używaj cieniowania, by opisać formę lub oddzielić sąsiadujące obszary, zamiast naśladować każdy gradient z rysunku. Pixel art może zawierać antyaliasing, ale łagodniejsze kolory przejściowe mogą sprawić, że mały kształt będzie wyglądać mniej wyraźnie, jeśli nie sprawdzisz go w docelowej skali. Poradnik Adafruit wyjaśnia, że antyaliasing wykorzystuje piksele o pośrednim kontraście, aby wygładzić schodkowe krawędzie; to, czy takie podejście pasuje do postaci, zależy od jej stylu i docelowego rozmiaru. Adafruit o krawędziach pikseli i antyaliasingu

Obejrzyj sprite’a w docelowym rozmiarze wyświetlania. Tymczasowo ukryj kolory i szczegóły wewnętrzne, aby sprawdzić sylwetkę; potem przywróć kolory i, jeśli masz taką możliwość, zapytaj osobę niezaznajomioną z projektem, co zauważa jako pierwsze. Te sprawdzenia pomagają ustalić, czy poza, charakterystyczny kształt i najważniejszy szczegół postaci są nadal czytelne. Nie gwarantują, że każdy rozpozna projekt, ale ułatwiają zdiagnozowanie konkretnych problemów.

Jeśli sprite wydaje się nijaki, porównaj go z pierwotną listą priorytetów. Zanim dodasz więcej ozdób, przywróć lub wzmocnij najważniejszą cechę. Jeśli twarz staje się nieczytelna, uprość elementy wyrazu twarzy lub przeznacz więcej pikseli na głowę. Jeśli części ciała się zlewają, zrób między nimi przerwę, zmień kontur albo popraw kontrast. Jeśli sprite działa tylko po powiększeniu, rozważ zmianę rozmiaru lub usuń szczegóły, które zlewają się przy wyświetlaniu.

Gotowa wersja w pixel arcie powinna zachować najmocniejsze sygnały wizualne rysunku, a jednocześnie świadomie uwzględniać ograniczenia siatki. Zadbaj o czytelną sylwetkę i pozę, użyj kolorów do oddzielenia ważnych form, a piksele przeznacz na cechy wyróżniające tę postać. Niektóre szczegóły się zmienią lub znikną; to naturalne przy przekładaniu rysunku na mniejszy język wizualny.

• Adafruit Industries, Sprite’y pixel art w MakeCode Arcade

• Pixor, Kontury w pixel arcie: sylwetka, linie wewnętrzne i załamania