Niezależni programiści często muszą łączyć kilka ról jednocześnie: projektanta gier, programisty, kompozytora, artysty. A jeśli chodzi o oprawę wizualną, wiele osób wybiera pixel art – na pierwszy rzut oka wydaje się to proste. Ale żeby zrobić to pięknie, potrzeba dużego doświadczenia i pewnych umiejętności. Znalazłem tutorial dla tych, którzy dopiero zaczynają rozumieć podstawy tego stylu: z opisem specjalnego oprogramowania i technik rysowania na przykładzie dwóch duszków.
tło
Sztuka pikselowa to forma sztuki cyfrowej, w której zmiany wprowadzane są na poziomie pikseli. Kojarzy się głównie z grafiką gier wideo z lat 80. i 90. XX wieku. W tamtych czasach artyści musieli liczyć się z ograniczeniami pamięci i niską rozdzielczością. Obecnie sztuka pikselowa jest nadal popularna w grach i ogólnie jako styl artystyczny, pomimo możliwości tworzenia realistycznej grafiki 3D. Dlaczego? Pomijając nostalgię, tworzenie fajnych prac w tak ciasnych ramach jest przyjemnym i satysfakcjonującym wyzwaniem.
Bariera wejścia do sztuki pikselowej jest stosunkowo niska w porównaniu do tradycyjnej sztuki i grafiki 3D, co przyciąga niezależnych programistów. Ale to nie znaczy, że będzie łatwo koniec gra w tym stylu. Widziałem wielu niezależnych programistów tworzących metroidvanie w stylu pixel art na platformach crowdfundingowych. Myśleli, że skończą wszystko w rok, ale tak naprawdę potrzebowali kolejnych sześciu lat.
Metal Slug 3 (zręcznościowe). SNK, 2000
Pixel art na poziomie, na jakim większość ludzi chce tworzyć zajmuje dużo czasu, a krótkich tutoriali jest bardzo mało. Pracując z modelem 3D można go obracać, deformować, przesuwać poszczególne jego części, kopiować animacje z jednego modelu do drugiego i tak dalej. Grafika pikselowa na wysokim poziomie prawie zawsze wymaga dużo wysiłku, aby dokładnie rozmieścić piksele w każdej klatce.
Generalnie ostrzegałem.
A teraz trochę o moim stylu: Rysuję głównie pixel art do gier wideo i czerpię z nich inspirację. W szczególności jestem fanem Famicom/NES, konsol 16-bitowych i gier arcade z lat 90-tych. Grafika pikselowa moich ulubionych gier z tamtej epoki może być opisana jako jasna, pewna i czysta (ale niezbyt czysta), a nie surowa i minimalistyczna. To styl, w którym sam pracuję, ale pomysły i techniki z tego tutoriala możesz łatwo zastosować, aby stworzyć zupełnie inne rzeczy. Przeglądaj prace różnych artystów i twórz grafikę pikselową, którą lubisz!
Miękkie
Podstawowymi narzędziami cyfrowymi do grafiki pikselowej są Zoom i Ołówek do umieszczania pikseli. Przydatne będą także narzędzia Linia, Kształt, Zaznacz, Przesuń i Wiadro z farbą. Istnieje wiele bezpłatnych i płatnych programów z takim zestawem narzędzi. Opowiem Wam o tych najpopularniejszych i tych, z których sama korzystam.
Farba (bezpłatna)
Jeśli masz system Windows, wbudowany Paint jest prymitywnym programem, ale ma wszystkie narzędzia do grafiki pikselowej.
(jest wolny)
Nieoczekiwanie funkcjonalny edytor grafiki pikselowej działający w przeglądarce. Możesz wyeksportować swoją pracę jako PNG lub animowany GIF. Doskonała opcja dla początkujących.
(jest wolny)
GraphicsGale to jedyny edytor, o którym słyszałem, który został zaprojektowany specjalnie dla grafiki pikselowej i zawiera narzędzia do animacji. Został stworzony przez japońską firmę HUMANBALANCE. Jest dostępny bezpłatnie od 2017 roku i nadal cieszy się zainteresowaniem, pomimo wzrostu popularności Aseprite. Niestety działa tylko na Windowsie.
($)
Być może najpopularniejszy obecnie edytor. , wiele funkcji, aktywne wsparcie, wersje dla systemów Windows, Mac i Linux. Jeśli poważnie podchodzisz do grafiki pikselowej i nadal nie znalazłeś odpowiedniego edytora, może to być ten, którego potrzebujesz.
($$+)
GameMaker Studio 2 to doskonałe narzędzie 2D z dobrym edytorem Sprite. Jeśli chcesz tworzyć grafikę pikselową do własnych gier, bardzo wygodnie jest zrobić wszystko w jednym programie. Teraz używam tego oprogramowania podczas pracy , zbiór 50 gier retro: sprite'y i animacje tworzę w GameMakerze, a zestawy klocków w Photoshopie.
($$$+)
Photoshop to drogie oprogramowanie, dystrybuowane w ramach subskrypcji i nieprzeznaczone do grafiki pikselowej. Nie polecam jego zakupu, chyba że zajmujesz się renderowaniem ilustracji w wysokiej rozdzielczości lub nie musisz wykonywać skomplikowanych manipulacji obrazem, tak jak ja. Można w nim tworzyć statyczne sprite'y i pixel arty, jednak jest to dość skomplikowane w porównaniu ze specjalistycznym oprogramowaniem (np. GraphicsGale czy Aseprite).
inny
Mój zestaw do grafiki pikselowej. Wszystko jest czarne, dopiero teraz to zauważyłem.
Tablet graficzny ($$+)
Polecam tablety graficzne do wszelkich prac związanych z ilustracjami cyfrowymi, aby uniknąć zespołu cieśni nadgarstka. O wiele łatwiej jest zapobiegać niż leczyć. Któregoś dnia poczujesz ból, który będzie tylko narastał – dbaj o siebie od samego początku. Ponieważ rysowałem myszką, teraz ciężko mi grać w gry wymagające naciskania klawiszy. Obecnie używam Wacom Intuos Pro S.
Podpórka pod nadgarstek ($)
Jeśli nie możesz kupić tabletu, zaopatrz się przynajmniej w podpórkę na nadgarstek. Moją ulubioną jest dopasowana orteza nadgarstka Mueller Green. Pozostałe są albo zbyt ciasne, albo nie zapewniają wystarczającego wsparcia. Zaciski można bez problemu zamówić online.
96 × 96 pikseli
Finałowa walka. Capcomu, 1989
Zacznijmy! Zacznijmy od ikonki znakowej o wymiarach 96x96 pikseli. Jako przykład narysowałem orka i umieściłem go na zrzucie ekranu z Final Fight (obrazek powyżej), abyście mogli zrozumieć skalę. Ten wielki sprite dla większości gier retro, rozmiar zrzutu ekranu: 384x224 piksele.
Na tak dużym spricie łatwiej będzie pokazać technikę o której chcę mówić. Renderowanie per piksel jest również bardziej podobne do tradycyjnych form sztuki (takich jak rysowanie lub malowanie), które możesz lepiej znać. Po opanowaniu podstawowych technik przejdziemy do mniejszych duszków.
1. Wybierz paletę
Pixel to znacznie głębsza koncepcja w sztuce pikselowej niż w jakimkolwiek innym cyfrowym świecie. Sztukę pikselową definiują ograniczenia, takie jak kolory. Ważne jest, aby wybrać odpowiednią paletę, która pomoże określić Twój styl. Radzę jednak na początek nie myśleć o paletach i wybrać jeden z istniejących (lub po prostu kilka losowych kolorów) - możesz go łatwo zmienić na każdym etapie.
W tym samouczku będę używać palety 32 kolorów, dla której stworzyliśmy . W przypadku grafiki pikselowej są one często składane z 32 lub 16 kolorów. Nasza została zaprojektowana dla fikcyjnej konsoli, która pojawiłaby się gdzieś pomiędzy Famicomem a silnikiem PC. Możesz wziąć to lub cokolwiek innego - samouczek w ogóle nie zależy od wybranej palety.
2. Zgrubne kontury
Zacznijmy rysować za pomocą narzędzia Ołówek. Narysujmy szkic w taki sam sposób, jak robimy to za pomocą zwykłego długopisu i papieru. Oczywiście pixel art i sztuka tradycyjna nakładają się na siebie, zwłaszcza jeśli chodzi o tak duże duszki. Z moich obserwacji wynika, że silni artyści pixel artu są przynajmniej dobrzy w rysowaniu odręcznym i odwrotnie. Dlatego rozwijanie umiejętności rysowania jest zawsze przydatne.
3. Opracowanie konturów
Udoskonalamy kontury: usuwamy dodatkowe piksele i zmniejszamy grubość każdej linii do jednego piksela. Ale co dokładnie jest uważane za zbędne? Aby odpowiedzieć na to pytanie, musisz zrozumieć linie i nieregularności pikseli.
Nieprawidłowości
Musisz nauczyć się rysować dwie podstawowe linie w sztuce pikselowej: prostą i zakrzywioną. Za pomocą pióra i papieru chodzi o kontrolę mięśni, ale pracujemy z maleńkimi blokami koloru.
Kluczem do narysowania prawidłowych linii pikseli są postrzępione linie. Są to pojedyncze piksele lub małe segmenty, które niszczą gładkość linii. Jak powiedziałem wcześniej, pojedynczy piksel robi ogromną różnicę w sztuce pikselowej, więc nierówności mogą zrujnować całą estetykę. Wyobraź sobie, że rysujesz prostą linię na papierze i nagle ktoś uderza w stół: nierówności w grafice pikselowej wyglądają jak przypadkowe zawijasy.
Przykłady:
Skierować
Krzywe
Nieregularności pojawiają się na krzywych, gdy długość odcinków linii nie zwiększa się lub nie zmniejsza stopniowo.
Nie da się całkowicie uniknąć nierówności – mają je wszystkie Twoje ulubione gry retro (chyba, że grafika pikselowa składa się wyłącznie z prostych kształtów). Cel: Ogranicz nierówności do minimum, jednocześnie pokazując wszystko, co potrzebne.
4. Zastosuj pierwsze kolory
Pokoloruj swoją postać za pomocą wypełnienia lub innego odpowiedniego narzędzia. Paleta uprości tę część pracy. Jeśli program nie przewiduje użycia palet, możesz umieścić go bezpośrednio na obrazku, jak w powyższym przykładzie i dobrać kolory za pomocą zakraplacza.
W lewym dolnym rogu narysowałem naszego przyjaciela, poznajcie, to jest Ball. Dzięki temu łatwiej będzie zrozumieć, co dokładnie dzieje się na każdym etapie.
5. Cieniowanie
Czas wyświetlić cienie - wystarczy dodać ciemniejsze kolory do duszka. Dzięki temu obraz będzie wyglądał trójwymiarowo. Załóżmy, że mamy jedno źródło światła zlokalizowane nad orkiem na lewo od niego. Oznacza to, że wszystko co znajduje się nad i przed naszą postacią będzie oświetlone. Dodaj cienie w prawym dolnym rogu.
Forma i objętość
Jeśli ten krok jest dla Ciebie wyzwaniem, pomyśl o swoim rysunku jako o trójwymiarowych kształtach, a nie tylko o liniach i kolorze. Kształty istnieją w przestrzeni trójwymiarowej i mogą mieć objętość, którą budujemy za pomocą cieni. Pomoże Ci to zwizualizować postać bez szczegółów i wyobrazić sobie, że jest ona wykonana z gliny, a nie pikseli. Cieniowanie to nie tylko dodawanie nowych kolorów, to proces budowania kształtu. Na dobrze zaprojektowanej postaci szczegóły nie zakrywają podstawowych kształtów: jeśli zmrużysz oczy, zobaczysz duże skupiska światła i cienia.
Wygładzanie (wygładzanie)
Za każdym razem, gdy używam nowego koloru, stosuję antyaliasing (AA). Pomaga wygładzić piksele, dodając kolory pośrednie w rogach, w których spotykają się dwa segmenty linii:
Szare piksele łagodzą „przerwy” w linii. Im dłuższy odcinek linii, tym dłuższy odcinek AA.
Tak wygląda AA na ramieniu orka. Konieczne jest wygładzenie linii pokazujących krzywiznę jego mięśni
Wygładzanie nie powinno wykraczać poza ikonkę, która będzie używana w grze lub na tło o nieznanym kolorze. Na przykład, jeśli zastosujesz AA do jasnego tła, wygładzanie będzie wyglądać brzydko na ciemnym tle.
6. Zarys selektywny
Wcześniej kontury były całkowicie czarne, przez co duszek wyglądał bardzo kreskówkowo. Obraz zdawał się być podzielony na segmenty. Na przykład czarne linie na ramieniu zbyt mocno kontrastują z muskulaturą, przez co postać wygląda mniej spójnie.
Jeśli duszek stanie się bardziej naturalny, a segmentacja mniej oczywista, podstawowe kształty postaci będą łatwiejsze do odczytania. Aby to zrobić, możesz użyć konturu selektywnego - częściowo zastąp czarny kontur jaśniejszym. Na oświetlonej części duszka możesz zastosować najjaśniejsze kolory lub, gdzie duszek styka się z przestrzenią ujemną, możesz całkowicie usunąć kontur. Zamiast czarnego należy użyć koloru wybranego dla cienia - w ten sposób zostanie zachowana segmentacja (aby rozróżnić mięśnie, futro itp.).
Na tym etapie dodałem także ciemniejsze cienie. Rezultatem były trzy odcienie zieleni na skórze orka. Najciemniejszy kolor zielony można zastosować do konturu selektywnego i AA.
7. Ostatnie poprawki
Na koniec warto dodawać podkreślenia (najjaśniejsze miejsca na duszku), detale (kolczyki, ćwieki, blizny) i inne ulepszenia, aż postać będzie gotowa lub do momentu, gdy trzeba będzie przejść do następnej.
Na tym etapie można zastosować kilka przydatnych technik. Obróć rysunek w poziomie, często pomaga to w wykryciu błędów w proporcjach i cieniowaniu. Możesz także usunąć kolor - ustaw nasycenie na zero, aby zrozumieć, gdzie musisz zmienić cienie.
Tworzenie szumu (dithering, dithering)
Do tej pory używaliśmy głównie dużych, jednolitych obszarów cienia. Ale istnieje inna technika - dithering, który pozwala przejść z jednego koloru do drugiego bez dodawania trzeciego. Spójrz na poniższy przykład.
Górny gradient od ciemnego do jasnego wykorzystuje setki różnych odcieni niebieskiego.
W średnim gradiencie wykorzystuje się tylko dziewięć kolorów, ale wciąż jest zbyt wiele odcieni tego samego koloru. Powstaje tzw. banding (od angielskiego pasma – stripe), w którym dzięki grubym jednolitym paskom oko skupia się na punktach styku kolorów, a nie na samych kolorach.
Na dolnym gradiencie zastosowaliśmy dithering, który pozwala uniknąć pasmowania i wykorzystuje tylko dwa kolory. Tworzymy szum o różnej intensywności symulujący gradację kolorów. Technika ta jest bardzo podobna do rastra (obrazu rastrowego) stosowanego w druku; oraz tepowanie (ziarnisty obraz) - w ilustracjach i komiksach.
W przypadku orka trochę się wahałem, aby oddać teksturę. Część pixelartystów w ogóle z tego nie korzysta, inni wręcz przeciwnie, nie wstydzą się i robią to bardzo umiejętnie. Uważam, że dithering wygląda najlepiej na dużych obszarach wypełnionych jednym kolorem (spójrz na niebo na zrzucie ekranu Metal Slug powyżej) lub na obszarach, które powinny wyglądać szorstko i nierówno (jak brud). Zdecyduj sam, jak z niego skorzystać.
Jeśli chcesz zobaczyć przykład ditheringu na dużą skalę i w wysokiej jakości, sprawdź gry brytyjskiego studia The Bitmap Brothers z lat 80-tych lub gry na komputer PC-98. Tylko pamiętaj, że oni wszyscy są NSFW.
Kakyusei (PC-98). Elfy, 1996
Na tym obrazku jest tylko 16 kolorów!
8. Ostatnie spojrzenie
Jednym z niebezpieczeństw związanych ze sztuką pikselową jest to, że wydaje się ona łatwa i prosta (ze względu na ograniczenia związane ze strukturą i stylem). Ale ostatecznie spędzisz mnóstwo czasu na udoskonalaniu sprite'ów. To jak zagadka, którą trzeba rozwiązać – dlatego pixel art przyciąga perfekcjonistów. Pamiętaj, że jeden duszek nie powinien zajmować zbyt wiele czasu – to tylko maleńki wycinek niezwykle złożonego zbioru elementów. Ważne jest, aby nie stracić z oczu szerszego obrazu.
Nawet jeśli Twoja grafika pikselowa nie jest przeznaczona do gier, czasami warto sobie powiedzieć: „Już jest wystarczająco dobrze!” I ruszaj dalej. Najlepszym sposobem na rozwinięcie swoich umiejętności jest przejście przez cały proces od początku do końca tyle razy, ile to możliwe, wykorzystując jak najwięcej tematów.
Czasem warto zostawić duszka na jakiś czas, aby później móc spojrzeć na niego świeżym okiem.
32×32 piksele
Najpierw stworzyliśmy dużego duszka o wymiarach 96x96 pikseli, ponieważ w tym rozmiarze przypomina on bardziej rysowanie lub malowanie, ale z pikselami. Im mniejszy duszek, tym mniej jest podobny do tego, co powinien wyświetlać i tym ważniejszy jest każdy piksel.
W Super Mario Bros. Oko Mario to tylko dwa piksele, jeden na drugim. I jego ucho też. Twórca postaci Shigeru Miyamoto powiedział, że wąsy są potrzebne, aby oddzielić nos od reszty twarzy. Zatem jedną z głównych cech Mario nie jest tylko projekt postaci, ale pragmatyczny chwyt. Co potwierdza starą mądrość – „potrzeba matką wynalazków”.
Główne etapy tworzenia duszka o wymiarach 32x32 piksele są nam już znane: szkic, kolor, cienie, dalsze udoskonalanie. Ale w takich warunkach, jako wstępny szkic, wybieram kolorowe kształty zamiast rysować kontury ze względu na mały rozmiar. Kolor odgrywa ważniejszą rolę w definiowaniu charakteru niż kontur. Spójrz jeszcze raz na Mario, nie ma on żadnego zarysu. Nie tylko wąsy są interesujące. Bokobrody wyznaczają kształt uszu, rękawy ukazują ramiona, a ogólny kształt mniej lub bardziej wyraźnie ukazuje całe ciało.
Tworzenie małych ikonek to ciągły kompromis. Jeśli dodasz obrys, możesz stracić miejsce na cień. Jeśli twoja postać ma wyraźnie widoczne ręce i nogi, głowa prawdopodobnie nie powinna być zbyt duża. Jeśli skutecznie użyjesz koloru, obrysu selektywnego i wygładzania, wyrenderowany obiekt będzie wyglądał na większy niż w rzeczywistości.
W przypadku małych duszków podoba mi się styl chibi: postacie wyglądają bardzo uroczo, mają duże głowy i oczy. Świetny sposób na stworzenie kolorowej postaci na ograniczonej przestrzeni i ogólnie bardzo ładny styl. Ale być może musisz pokazać mobilność lub siłę postaci, wtedy możesz dać mniej miejsca głowie, aby ciało wyglądało na potężniejsze. Wszystko zależy od Twoich preferencji i celów.
Cały zespół w komplecie!
Formaty plików
Wynik ten może zdenerwować każdego artystę pikselowego
Obraz, który widzisz, jest wynikiem zapisania obrazu w formacie JPG. Część danych została utracona z powodu algorytmów kompresji plików. Wysokiej jakości grafika pikselowa będzie wyglądać źle, a przywrócenie jej oryginalnej palety nie będzie łatwe.
Aby zapisać statyczny obraz bez utraty jakości, użyj formatu PNG. Do animacji - GIF.
Jak prawidłowo udostępniać grafikę pikselową
Udostępnianie grafiki pikselowej w sieciach społecznościowych to świetny sposób na uzyskanie opinii i poznanie innych artystów pracujących w tym samym stylu. Nie zapomnij użyć hashtaga #pixelart. Niestety sieci społecznościowe często konwertują PNG na JPG bez pytania, co pogarsza Twoje wrażenia. Co więcej, nie zawsze jest jasne, dlaczego Twój obraz został przekonwertowany.
Istnieje kilka wskazówek, jak zapisywać grafikę pikselową w wymaganej jakości dla różnych sieci społecznościowych.
Aby plik PNG pozostał niezmieniony na Twitterze, użyj mniej niż 256 kolorów lub że plik ma mniej niż 900 pikseli na dłuższym boku. Zwiększyłbym rozmiar pliku do co najmniej 512 x 512 pikseli. I żeby skalowanie było wielokrotnością 100 (200%, a nie 250%) i aby ostre krawędzie zostały zachowane (Najbliższy Sąsiad w Photoshopie).
Animowane GIF-y do postów na Twitterze ważą nie więcej niż 15 MB. Obraz musi mieć wymiary co najmniej 800x800 pikseli, zapętlona animacja musi powtórzyć się trzykrotnie, a ostatnia klatka musi być o połowę krótsza od pozostałych – to najpopularniejsza teoria. Nie jest jednak jasne, w jakim stopniu wymagania te muszą zostać spełnione, biorąc pod uwagę, że Twitter stale zmienia swoje algorytmy wyświetlania obrazu.
O ile wiem, nie da się opublikować zdjęcia na Instagramie bez utraty jakości. Ale na pewno będzie wyglądać lepiej, jeśli powiększysz go do co najmniej 512x512 pikseli.
Źródło: www.habr.com