W tym samouczku dowiesz się, jak zamienić zdjęcie osoby w grafikę pikselową, przypominającą fikcyjną postać z gry zręcznościowej z początku lat 90-tych.
James May – znany również jako Smudgethis – rozwinął ten styl w 2011 roku na potrzeby teledysku dubstepowego zespołu rockowego. Pierwszy hit Nero, Me & You, w którym stworzył animację przedstawiającą starą grę z udziałem dwóch członków Nero. Gra była platformówką rytmiczną 2D z 16-bitową grafiką podobną do Double Dragon, ale znacznie lepszą od 8-bitowych klasyków retro, takich jak Super Mario Bros.
Aby stworzyć ten styl, postacie nadal muszą być blokowe, ale bardziej złożone niż w starszych grach. I chociaż do uzyskania takiego wyglądu będziesz musiał użyć ograniczonej palety kolorów, pamiętaj, że te gry nadal miały 65 536 kolorów.
Tutaj James pokazuje, jak stworzyć postać ze zdjęcia przy użyciu prostej palety kolorów i narzędzia Ołówek.
Podobnie jak w przypadku przewodnika po animacji, będziesz potrzebować zdjęcia danej osoby. W tym samouczku James użył zdjęcia punka zawartego w plikach projektu.
Po ukończeniu zapoznaj się z 16-bitowym samouczkiem animacji After Effects, w którym James pokazuje, jak wykorzystać tę postać w AE, animować ją i zastosować efekty w grze retro.

Krok 1

Otwórz Przewodnik animacji (16-bitowy).psd i 18888111.jpg (lub wybrane zdjęcie), aby użyć go jako podstawy dla postaci. Najlepiej sprawdzi się pełnowymiarowe zdjęcie profilowe, które pomoże w uzyskaniu palet kolorów i stylów dla Twojej 16-bitowej sylwetki.
Poradnik animacji zawiera kilka póz na poszczególnych warstwach. Wybierz tę, która najlepiej pasuje do pozy na Twoim zdjęciu - ponieważ w kadrze nie mamy nóg, wybrałam standardową pozę na poziomie 1.

Krok 2

Używając narzędzia Zaznaczanie prostokątne (M), wybierz głowę ze swojego zdjęcia, skopiuj (Cmd /Ctrl + C) i wklej ją (Cmd /Ctrl + V) do Przewodnika animacji (16 bitów).psd.
Skaluj obraz, aby dopasować go proporcjonalnie. Zauważysz, że ponieważ wymiary PSD są bardzo małe, obraz natychmiast zacznie rysować piksel.

Krok 3

Utwórz nową warstwę i narysuj kontur jednopikselowym czarnym ołówkiem (B), korzystając z zawartego w niej przewodnika animacji i zdjęcia jako podstawy. \ P
Dostarczony przewodnik pomaga rozwinąć szereg postaci, od większych postaci bossów po szczuplejsze kobiety. To jest przybliżony przewodnik po komponowaniu i animowaniu moich postaci w pikselach.

Krok 4

Za pomocą narzędzia Kroplomierz (I) wypróbuj najciemniejszy obszar odcienia skóry na zdjęciu i utwórz mały kwadrat koloru. Powtórz tę czynność jeszcze trzy razy, aby utworzyć czterokolorową paletę odcieni skóry.
Utwórz kolejną warstwę poniżej warstwy konturu i użyj jednopikselowego pędzla oraz czterokolorowej palety kolorów, aby cieniować obraz (ponownie używając zdjęcia jako wskazówki). \ P
Najlepiej przechowywać wszystkie elementy kompozycji lub różne warstwy, ponieważ ułatwia to ich ponowne wykorzystanie w innych kształtach. Jest to szczególnie przydatne w przypadku złych, ponieważ większość 16-bitowych gier używa bardzo podobnych liczb. Na przykład jeden kumpel może mieć czerwoną koszulę i nóż, a drugi jest identyczny, z wyjątkiem niebieskiej koszuli i pistoletu.

Krok 5

Powtórz ten proces dla innych części figury, cieniując tkaninę, aby dopasować ją do innych elementów na oryginalnym zdjęciu. Pamiętaj, aby kontynuować próbkowanie za pomocą narzędzia Kroplomierz, aby najpierw utworzyć palety kolorów, ponieważ zapewnia to spójny zestaw kolorów, który wygląda świetnie i pasuje do stosunkowo ograniczonej palety kolorów gier 16-bitowych.

Krok 6

Dodaj dane, aby ulepszyć swoją postać za pomocą odcieni, tatuaży, kolczyków itp. Zjedz tutaj i zastanów się, jak chcesz, aby Twoja postać wyglądała w środowisku gry. Być może mogliby użyć siekiery lub mieć ramię robota?

Krok 7

Aby animować swoją postać, powtórz poprzednie kroki, korzystając z pozostałych pięciu warstw przewodnika po animacji. Opanowanie tego procesu i uzyskanie płynnych rezultatów może zająć trochę czasu, ale można pójść na skróty, ponownie wykorzystując elementy z poprzednich klatek. Na przykład w tej sekwencji sześciu klatek głowa pozostaje niezmieniona.

Krok 8

Aby sprawdzić poprawność sekwencji animacji, otwórz panel Animacja w Photoshopie i upewnij się, że aktualnie trwa tylko pierwsza klatka animacji. Aby utworzyć animację, możesz dodawać nowe klatki oraz włączać i wyłączać warstwy, ale najszybszym sposobem jest użycie polecenia Utwórz klatki z warstw w wysuwanym menu panelu (w prawym górnym rogu).
Pierwsza klatka jest pustym tłem, więc zaznacz ją i kliknij ikonę kosza na panelu (na dole), aby ją usunąć.

Grafika pikselowa (zwana dalej po prostu sztuką pikselową) staje się obecnie coraz bardziej popularna, szczególnie w grach niezależnych. Jest to zrozumiałe, ponieważ w ten sposób artyści mogą wypełnić grę dużą różnorodnością postaci, zamiast spędzać setki godzin na modelowaniu obiektów 3D i ręcznym rysowaniu skomplikowanych obiektów. Jeśli chcesz nauczyć się sztuki pikselowej, to przede wszystkim musisz nauczyć się rysować tak zwane „duszki”. Następnie, gdy duszki przestaną Cię przerażać, możesz przejść do animacji, a nawet sprzedać swoją pracę!

Kroki

Część 1

Zbieramy wszystko, czego potrzebujesz

Pobierz dobre edytory graficzne. W programie Paint można oczywiście tworzyć arcydzieła, ale jest to trudne i niezbyt wygodne. O wiele lepiej byłoby pracować w czymś takim jak:

• Photoshopa
• Paint.net
• Piksele

1. Kup tablet graficzny. Jeśli nie lubisz rysować myszką, potrzebujesz tabletu i rysika. Nawiasem mówiąc, najbardziej popularne są tablety Wacom.

   Włącz „siatkę” w swoim edytorze graficznym. Właściwie, jeśli Twój edytor graficzny nie obsługuje wyświetlania siatki, powinieneś pomyśleć o szukaniu innego programu. Siatka pozwoli Ci wyraźnie zobaczyć, gdzie i jak będzie zlokalizowany każdy pojedynczy piksel. Z reguły różaniec włącza się w menu „Widok”.

   • Może zaistnieć potrzeba nieco zmodyfikować ustawienia wyświetlania, aby mieć pewność, że każdy segment siatki faktycznie renderuje piksel. Każdy program robi to inaczej, więc szukaj odpowiednich wskazówek.

2. Rysuj ołówkiem i pędzlem o rozmiarze 1 piksela. Każdy edytor graficzny powinien mieć narzędzie „Ołówek”. Wybierz go i ustaw rozmiar pędzla na 1 piksel. Teraz możesz rysować... w pikselach.

   Część 2

   Praca nad podstawami

   Utwórz nowy obraz. Ponieważ uczysz się rysować w stylu sztuki pikselowej, nie powinieneś celować w epickie płótna. Jeśli pamiętasz, w grze Super Mario Bros. cały ekran miał wymiary 256 x 224 piksele, a sam Mario zmieścił się w przestrzeni 12 x 16 pikseli!

   1. Zbliżenie. Tak, w przeciwnym razie po prostu nie będziesz mógł zobaczyć poszczególnych pikseli. Tak, będziesz musiał go bardzo zwiększyć. Powiedzmy, że 800% jest całkiem normalne.

      Naucz się rysować linie proste. Wydaje się to proste, ale jeśli nagle drżącą ręką narysujesz gdzieś pośrodku linię o grubości 2 pikseli, różnica rzuci Ci się w oczy. Rysuj linie proste, aż będziesz musiał aktywować narzędzie linii prostych. Musisz nauczyć się rysować linie proste ręcznie!

      Naucz się rysować zakrzywione linie. W linii zakrzywionej powinny znajdować się, powiedzmy, jednolite „przerwy linii” (co wyraźnie widać na rysunku tuż powyżej). Powiedzmy, że zaczynając rysować linię zakrzywioną, narysuj linię prostą o długości 6 pikseli, pod nią linię prostą o długości trzech, pod nią linię prostą o długości dwóch, a poniżej linię prostą o długości jednego piksela. Z drugiej strony narysuj to samo (oczywiście w odbiciu lustrzanym). Jest to progresja uważana za optymalną. Krzywe narysowane we wzorze „3-1-3-1-3-1-3” nie spełniają standardów sztuki pikselowej.

      Nie zapomnij usunąć błędów. Narzędzie „Gumka” należy ustawić analogicznie jak ołówek, ustawiając wielkość pędzla na 1 piksel. Im większa gumka, tym trudniej nie wymazać za dużo, więc wszystko jest logiczne.

      Część 3

      Tworzenie pierwszego duszka

      1. Zastanów się, do jakich celów będzie służył duszek. Czy będzie statyczny? Ożywiony? Statyczny duszek może być w pełni wypełniony szczegółami, ale animowany lepiej jest uprościć, aby nie tracić godzin na przerysowywanie wszystkich szczegółów we wszystkich klatkach animacji. Nawiasem mówiąc, jeśli twój duszek ma być używany z innymi, to wszystkie powinny być narysowane w tym samym stylu.

         Dowiedz się, czy duszek ma jakieś specjalne wymagania. Jeśli rysujesz na przykład w ramach projektu, rozsądne jest oczekiwanie wymagań dotyczących koloru lub rozmiaru pliku. Będzie to jednak ważniejsze nieco później, kiedy zaczniesz pracować nad dużymi projektami z wieloma różnymi duszkami.

         • Obiektywnie rzecz biorąc, w dzisiejszych czasach rzadko kiedy istnieją jakiekolwiek wymagania dotyczące rozmiaru lub palety duszków. Jeśli jednak rysujesz grafikę do gry, w którą będziesz grać na starszych systemach do gier, będziesz musiał wziąć pod uwagę wszystkie ograniczenia.

      2. Zrób szkic. Podstawą każdego duszka jest szkic na papierze, na szczęście w ten sposób będziesz mógł zrozumieć, jak wszystko będzie wyglądać i w razie potrzeby możesz wcześniej coś poprawić. Ponadto możesz następnie śledzić na podstawie szkicu papierowego (jeśli nadal masz tablet).

         • Nie oszczędzaj na szczegółach swojego szkicu! Narysuj wszystko, co chcesz zobaczyć na ostatecznym rysunku.

      3. Przenieś szkic do edytora graficznego. Możesz narysować papierowy szkic na tablecie lub możesz przerysować wszystko ręcznie, piksel po pikselu - to nie ma znaczenia, wybór należy do Ciebie.

         • Podczas rysowania szkicu jako koloru konturu użyj 100% czerni. Jeśli coś się stanie, możesz później zmienić to ręcznie, ale na razie łatwiej będzie Ci pracować z czernią.

      4. Popraw kontur szkicu. W tym kontekście można oczywiście powiedzieć inaczej – wymazać wszystko, co niepotrzebne. O co chodzi - kontur powinien mieć grubość 1 piksela. W związku z tym zwiększ skalę i wymaż, usuń nadmiar... lub uzupełnij ołówkiem brakujące elementy.

         • Pracując nad szkicem, nie rozpraszaj się szczegółami - nadejdzie ich kolej.

      Część 4

      Kolorowanie duszka

      1. Przypomnij sobie teorię koloru. Spójrz na paletę, aby zobaczyć, jakich kolorów użyć. Wszystko jest tam proste: im dalej są od siebie kolory, tym bardziej się od siebie różnią; Im kolory są do siebie bliższe, tym bardziej są do siebie podobne i tym lepiej wyglądają obok siebie.

         • Wybierz kolory, które sprawią, że Twój duszek będzie zarówno piękny, jak i przyjemny dla oczu. I tak, należy unikać pastelowych kolorów (chyba że cały projekt jest wykonany w tym stylu).

      2. Wybierz kilka kolorów. Im więcej kolorów użyjesz, tym bardziej, że tak powiem, „rozpraszać” będzie twój duszek. Przyjrzyj się klasykom pixel artu i spróbuj policzyć, ile kolorów tam zastosowano.

         • Mario – tylko trzy kolory (jeśli mówimy o wersji klasycznej), a nawet te znajdują się na palecie niemal blisko siebie.
         • Sonic — mimo że Sonic jest rysowany z większą szczegółowością niż Mario, nadal opiera się na zaledwie 4 kolorach (i cieniach).
         • Prawie klasyk ikonek w rozumieniu gier walki, Ryu to duże obszary o prostych kolorach plus trochę cienia do rozgraniczenia. Ryu jest jednak nieco bardziej skomplikowany niż Sonic – dostępnych jest już pięć kolorów i cieni.

      3. Pokoloruj duszka. Użyj narzędzia Wypełnienie farbą, aby pokolorować duszka i nie martw się, że wszystko będzie wyglądało płasko i bez życia — na tym etapie nie oczekuje się, że zrobi inaczej. Zasada działania narzędzia Wypełnienie jest prosta - wypełni ono wszystkie piksele klikniętego koloru wybranym kolorem, aż dotrze do krawędzi.

      Część 5

      Dodawanie cieni

      Zdecyduj się na źródło światła. Oto sedno: musisz zdecydować, pod jakim kątem światło pada na duszka. Kiedy już się na to zdecydujesz, możesz stworzyć wiarygodnie wyglądające cienie. Tak, nie będzie „światła” w sensie dosłownym, chodzi o to, aby wyobrazić sobie, jak będzie padać na rysunek.

      • Najprostszym rozwiązaniem jest założenie, że źródło światła znajduje się bardzo wysoko nad duszkiem, nieco na lewo lub na prawo od niego.

      1. Zacznij nakładać cienie używając kolorów nieco ciemniejszych od bazy. Jeśli światło przyjdzie z góry, gdzie będzie cień? Zgadza się, gdzie bezpośrednie światło nie pada. Odpowiednio, aby dodać cień, po prostu dodaj kilka kolejnych warstw do duszka z pikselami odpowiedniego koloru powyżej lub poniżej konturu.

         • Jeśli zmniejszysz ustawienie „Kontrast” koloru podstawowego i nieznacznie zwiększysz ustawienie „Jasność”, możesz uzyskać dobry kolor do rysowania cieni.
         • Nie używaj gradientów. Gradienty to zło. Gradienty wyglądają tanio, tandetnie i nieprofesjonalnie. Efekt zbliżony do gradientów uzyskuje się stosując technikę „rozcieńczania” (patrz niżej).

      2. Nie zapomnij o półcieniu. Wybierz kolor pomiędzy kolorem bazowym a kolorem cienia. Użyj go, aby utworzyć kolejną warstwę - ale tym razem pomiędzy warstwami tych dwóch kolorów. Rezultatem będzie efekt przejścia z ciemnego obszaru do jasnego.

         Narysuj najważniejsze momenty. Najważniejszym elementem jest miejsce na duszku, z którego pada najwięcej światła. Możesz narysować podświetlenie, jeśli wybierzesz kolor nieco jaśniejszy niż podstawowy. Najważniejsze, żeby nie dać się ponieść blaskowi, to rozprasza.

Pikselowa sztuka(napisane bez łącznika) lub grafika pikselowa- kierunek sztuki cyfrowej polegający na tworzeniu obrazów na poziomie pikseli (czyli minimalnej jednostki logicznej, z której składa się obraz). Nie wszystkie obrazy rastrowe są grafiką pikselową, chociaż wszystkie składają się z pikseli. Dlaczego? Bo ostatecznie koncepcja sztuki pikselowej obejmuje nie tyle wynik, ile proces tworzenia ilustracji. Piksel po pikselu i tyle. Jeśli zrobisz zdjęcie cyfrowe, znacznie je zmniejszysz (tak, aby piksele stały się widoczne) i będziesz twierdził, że narysowałeś je od zera, będzie to prawdziwe fałszerstwo. Chociaż pewnie znajdą się naiwni prostacy, którzy będą Cię chwalić za Twoją żmudną pracę.

Obecnie nie wiadomo, kiedy dokładnie powstała ta technika; korzenie zaginęły gdzieś na początku lat siedemdziesiątych. Jednak technika komponowania obrazów z małych elementów sięga znacznie starszych form sztuki, takich jak mozaiki, haft krzyżykowy, tkanie dywanów i beading. Samo określenie „pixel art” jako definicja sztuki pikselowej zostało po raz pierwszy użyte w artykule Adele Goldberg i Roberta Flegala w czasopiśmie Communications of the ACM (grudzień 1982).

Najszersze zastosowanie sztuki pikselowej miało miejsce w grach komputerowych, co nie jest zaskakujące - umożliwiło tworzenie obrazów, które nie wymagały zasobów i wyglądały naprawdę pięknie (jednocześnie zajmowały artyście dużo czasu i wymagały pewnych umiejętności i dlatego wymagał dobrych zarobków). Okres świetności, najwyższy punkt rozwoju, oficjalnie nazywany jest grami wideo na konsole drugiej i trzeciej generacji (początek lat 90.). Dalszy postęp technologii, pojawienie się najpierw 8-bitowego koloru, a potem True Color, rozwój grafiki trójwymiarowej – wszystko to z czasem zepchnęło sztukę pikselową na dalszy plan i na trzecie miejsce, a potem zaczęło się wydawać, że koniec nadeszła sztuka pikselowa.

Co ciekawe, to właśnie Pan Postęp Naukowo-Technologiczny w połowie lat 90. wypchnął grafikę pikselową na ostatnie pozycje, by później przywrócić ją do gry – wprowadzając na świat urządzenia mobilne w postaci telefonów komórkowych i PDA. W końcu niezależnie od tego, jak przydatne może być nowe urządzenie, ty i ja wiemy, że jeśli nie możesz przynajmniej zagrać na nim w pasjansa, jest to bezwartościowe. Cóż, tam, gdzie jest ekran o niskiej rozdzielczości, jest sztuka pikselowa. Jak to mówią, witaj ponownie.

Oczywiście różne elementy wsteczne odegrały swoją rolę w powrocie grafiki pikselowej, uwielbiającej nostalgię za starymi, dobrymi grami z dzieciństwa, mówiąc: „Ech, już tak nie robią”; esteci potrafiący docenić piękno pixel artu oraz niezależni programiści, którzy nie dostrzegają współczesnych piękności graficznych (a czasami, chociaż rzadko, po prostu nie wiedzą, jak je wdrożyć we własnych projektach), dlatego rzeźbią pixel art. Ale nadal nie lekceważmy projektów czysto komercyjnych - aplikacji na urządzenia mobilne, reklamy i projektowania stron internetowych.Tak więc teraz pixel art, jak mówią, jest szeroko rozpowszechniony w wąskich kręgach i zyskał sobie status sztuki „nie dla wszystkich”. I to pomimo tego, że jest ona niezwykle przystępna dla przeciętnego człowieka, bo do pracy w tej technice wystarczy mieć pod ręką komputer i prosty edytor graficzny! (swoją drogą umiejętność rysowania też nie zaszkodzi) Dość słów, przejdźmy do rzeczy!

2. Narzędzia.

Czego potrzebujesz do tworzenia grafiki pikselowej? Jak wspomniałem powyżej, wystarczy komputer i dowolny edytor graficzny, który potrafi pracować na poziomie pikseli. Rysować można wszędzie, nawet na Game Boyu, nawet na Nintendo DS, nawet w Microsoft Paint (inna sprawa, że ​​rysowanie w tym drugim jest wyjątkowo niewygodne). Istnieje ogromna różnorodność edytorów rastrowych, wiele z nich jest darmowych i dość funkcjonalnych, dzięki czemu każdy może sam wybrać oprogramowanie.

Rysuję w Adobe Photoshopie, bo jest to wygodne i robię to od dawna. Nie będę kłamać i powiem, mamrocząc protezy, że „Pamiętam, że Photoshop był jeszcze bardzo mały, był na Macintoshu i miał numer 1.0”. Ale pamiętam Photoshopa 4.0 (a także na Macu). Dlatego dla mnie kwestia wyboru nigdy nie była kwestią. I dlatego nie, nie, ale dam zalecenia dotyczące Photoshopa, zwłaszcza tam, gdzie jego możliwości pomogą znacznie uprościć kreatywność.

Potrzebny jest więc dowolny edytor graficzny, który pozwala na rysowanie narzędziem o wielkości jednego kwadratowego piksela (są też piksele niekwadratowe, np. okrągłe, ale w tej chwili nas one nie interesują). Jeśli Twój edytor obsługuje dowolny zestaw kolorów, świetnie. Jeśli umożliwia także zapisywanie plików, to świetnie. Byłoby miło, gdyby wiedział, jak pracować z warstwami, ponieważ pracując nad dość złożonym obrazem, wygodniej jest ułożyć jego elementy w różne warstwy, ale w zasadzie jest to kwestia przyzwyczajenia i wygody.

Zaczniemy? Pewnie czekasz na listę sekretnych technik, rekomendacje, które nauczą Cię rysować pixel art? Ale prawda jest taka, że ​​w zasadzie nic takiego nie istnieje. Jedynym sposobem, aby nauczyć się rysować grafikę pikselową, jest narysowanie jej samodzielnie, próbowanie, próbowanie, nie bój się i eksperymentuj. Śmiało możesz powtarzać cudzą twórczość, nie bój się, że wyda ci się to nieoryginalne (tylko nie udawaj czyjejś pracy jako swojej, hehe). Uważnie i starannie analizuj dzieła mistrzów (nie moje) i rysuj, rysuj, rysuj. Na końcu artykułu czeka na Ciebie kilka przydatnych linków.

3. Zasady ogólne.

Istnieje jednak kilka ogólnych zasad, których znajomość nie zaszkodzi. Jest ich naprawdę niewiele, nazywam je „zasadami”, a nie prawami, bo mają raczej charakter zalecający. W końcu, jeśli uda Ci się narysować genialną grafikę pikselową omijającą wszelkie zasady - kogo to obchodzi?

Najbardziej podstawową zasadę można sformułować w następujący sposób: minimalną jednostką obrazu jest piksel i jeśli to możliwe, wszystkie elementy kompozycji powinny być do niego proporcjonalne. Pozwólcie, że rozłożę to na czynniki pierwsze: wszystko, co rysujecie, składa się z pikseli, a piksel musi być czytelny we wszystkim. Nie oznacza to, że obraz w ogóle nie może zawierać elementów, np. 2x2 piksele, czy 3x3. Jednak nadal lepiej jest konstruować obraz z pojedynczych pikseli.

Obrys i ogólnie wszystkie linie rysunku powinny mieć grubość jednego piksela (z nielicznymi wyjątkami).

Wcale nie twierdzę, że to coś złego. Ale nadal nie jest zbyt ładnie. A żeby było pięknie pamiętajmy jeszcze o jednej zasadzie: rysuj bez załamań, zaokrąglaj płynnie. Istnieje coś takiego jak załamania – fragmenty wytrącające się z ogólnego porządku, nadające liniom nierówny, postrzępiony wygląd (w anglojęzycznym środowisku pixelartystów nazywane są one jaggies):

Pęknięcia pozbawiają rysunek naturalnej gładkości i piękna. I jeśli fragmenty 3, 4 i 5 są oczywiste i można je łatwo poprawić, to z pozostałymi sytuacja jest bardziej skomplikowana - tam długość pojedynczego elementu w łańcuszku jest zerwana, wydawałoby się to drobnostką, ale drobiazg jest zauważalny. Aby nauczyć się dostrzegać te miejsca i ich unikać, potrzeba trochę praktyki. Załamanie 1 zostaje wyrzucone z linii, ponieważ jest pojedynczym pikselem - natomiast w obszarze, w którym został wstawiony, linia składa się z odcinków po 2 piksele. Aby się tego pozbyć, złagodziłem wejście krzywej w zagięcie, wydłużając górny segment do 3 pikseli i przerysowałem całą linię w segmentach po 2 piksele. Przerwy 2 i 6 są do siebie identyczne - są to już fragmenty o długości 2 pikseli w obszarach zbudowanych z pojedynczych pikseli.

Podstawowy zestaw przykładów nachylonych linii prostych, które można znaleźć w prawie każdym podręczniku pixel artu (mój nie jest wyjątkiem), pomoże uniknąć takich załamań podczas rysowania:

Jak widać linia prosta składa się z odcinków o tej samej długości, przesuniętych w trakcie jej rysowania o jeden piksel - tylko w ten sposób uzyskuje się efekt liniowości. Najpopularniejsze metody konstrukcji to segmenty o długości 1, 2 i 4 pikseli (są też inne, ale przedstawione opcje powinny wystarczyć do realizacji niemal każdego pomysłu artystycznego). Z tych trzech najpopularniejszy można śmiało nazwać segmentem o długości 2 pikseli: narysuj segment, przesuń pióro o 1 piksel, narysuj kolejny segment, przesuń pióro o 1 piksel, narysuj kolejny segment:

Nie jest to trudne, prawda? Wszystko czego potrzebujesz to nawyk. Możliwość rysowania nachylonych linii prostych w odstępach co 2 piksele pomoże w izometrii, więc następnym razem przyjrzymy się temu bardziej szczegółowo. Ogólnie linie proste są świetne - ale tylko do czasu, gdy pojawi się zadanie narysowania czegoś cudownego. Tutaj potrzebujemy krzywych i wielu różnych krzywych. I bierzemy pod uwagę prostą zasadę zaokrąglania zakrzywionych linii: długość elementów krzywej powinna stopniowo się zmniejszać/zwiększać.

Wyjście z prostej do zaokrąglenia odbywa się płynnie, wskazałem długość każdego segmentu: 5 pikseli, 3, 2, 2, 1, 1, znowu 2 (już pionowe), 3, 5 i tak dalej. Twój przypadek niekoniecznie będzie korzystał z tej samej sekwencji, wszystko zależy od wymaganej gładkości. Inny przykład zaokrąglenia:

Ponownie unikamy załamań, które tak bardzo psują obraz. Jeżeli chcesz sprawdzić zdobyty materiał to tutaj mam skórkę do Winampa narysowaną przez nieznanego autora, blankiet:

Na rysunku występują poważne błędy i po prostu nieudane zaokrąglenia, a także załamania - spróbuj poprawić obraz na podstawie tego, co już wiesz. To wszystko, co mam z liniami, sugeruję, żebyś trochę narysował. I nie pozwól, aby prostota przykładów Cię zmyliła, rysować możesz tylko rysując – nawet najprostsze rzeczy.

4.1. Narysuj butelkę wody żywej.

1. Kształt obiektu, na razie nie musisz używać koloru.

2. Czerwony płyn.

3. Zmień kolor kieliszka na niebieski, dodaj zacienione obszary wewnątrz bańki i jasny obszar na zamierzonej powierzchni płynu.

4. Dodaj białe refleksy na bańce i ciemnoczerwony cień o szerokości 1 piksela na obszarach cieczy graniczących ze ściankami bańki. Wygląda całkiem nieźle, co?

5. Podobnie rysujemy butelkę z niebieskim płynem - tutaj ten sam kolor szkła, plus trzy odcienie niebieskiego dla płynu.

4.2. Rysowanie arbuza.

Narysujmy okrąg i półkole - będzie to arbuz i wycięty plasterek.

2. Zaznaczamy wycięcie w samym arbuzie, a w plasterku – granicę pomiędzy skórką a miąższem.

3. Wypełnienie. Kolory z palety, średnia zieleń to kolor skórki, średnia czerwień to kolor miąższu.

4. Zaznaczmy obszar przejścia od skórki do miąższu.

5. Jasne paski na arbuzie (w końcu wygląda jak sam). I oczywiście – nasiona! Jeśli skrzyżujesz arbuza z karaluchami, one same odpełzną.

6. Przypominamy o tym. Używamy bladoróżowego koloru, aby wskazać rozjaśnienia nad nasionami w sekcji, a układając piksele w szachownicę, uzyskujemy pozory objętości z wyciętego segmentu (metoda nazywa się ditheringiem, więcej o tym później ). Używamy ciemnoczerwonego odcienia, aby wskazać zacienione obszary w przekroju arbuza, oraz ciemnozielonego odcienia (ponownie piksele we wzór szachownicy), aby nadać objętość samemu arbuzowi.

5. Roztrząsanie.

Dithering, czyli mieszanie, to technika mieszania pikseli w dwóch sąsiednich obszarach o różnych kolorach w zdecydowanie uporządkowany (nie zawsze) sposób. Najprostszym, najczęstszym i najskuteczniejszym sposobem jest naprzemienne układanie pikseli w szachownicę:

Technika narodziła się dzięki (a raczej pomimo) ograniczeń technicznych - na platformach z ograniczoną paletą, dithering umożliwił poprzez zmieszanie pikseli dwóch różnych kolorów uzyskanie trzeciego, którego nie było w palecie:

Obecnie, w epoce nieograniczonych możliwości technicznych, wielu twierdzi, że potrzeba ditheringu sama zniknęła. Jednak jego właściwe wykorzystanie może nadać Twojemu dziełu charakterystyczny styl retro, rozpoznawalny dla wszystkich fanów starych gier wideo. Osobiście lubię stosować dithering. Nie jestem w tym zbyt dobry, ale i tak to kocham.

Dwie dodatkowe opcje ditheringu:

Co musisz wiedzieć o ditheringu, aby móc z niego korzystać. Minimalna szerokość strefy mieszania musi wynosić co najmniej 2 piksele (te linie w szachownicę). Więcej jest możliwe. Lepiej nie robić mniej.

Poniżej znajduje się przykład nieudanego ditheringu. Pomimo tego, że podobną technikę często można spotkać na spriteach z gier wideo, trzeba mieć świadomość, że ekran telewizora znacząco wygładził obraz, a takiego grzebienia, i to nawet w ruchu, nie było widać gołym okiem:

No cóż, dość teorii. Radzę ci jeszcze trochę poćwiczyć.

Pixel art można rysować w dowolnym programie do pracy z grafiką rastrową, jest to kwestia osobistych preferencji i doświadczenia (oczywiście także możliwości finansowych). Niektórzy używają najprostszego Painta, ja robię to w Photoshopie - bo po pierwsze długo w nim pracuję, a po drugie jest mi tam wygodniej. Kiedy już zdecydowałem się wypróbować darmowy Paint.NET, nie spodobało mi się to - to tak jak z samochodem: jeśli rozpoznasz zagraniczny samochód z automatyczną skrzynią biegów, prawdopodobnie nie trafisz do Zaporożca. Mój pracodawca dostarcza mi licencjonowane oprogramowanie, więc sumienie mam czyste przed korporacją Adobe... Chociaż za swoje programy pobierają niewyobrażalne ceny i będą się za to palić w piekle.

1. Przygotowanie do pracy.

Utwórz nowy dokument z dowolnymi ustawieniami (niech szerokość będzie wynosić 60, wysokość 100 pikseli). Głównym narzędziem artysty pikselowego jest ołówek ( Narzędzie Ołówek, wywołany klawiszem skrótu B). Jeśli pędzel (i ikona pędzla) jest włączony na pasku narzędzi, najedź na niego kursorem, kliknij i przytrzymaj LMB– pojawi się małe rozwijane menu, w którym należy wybrać ołówek. Ustaw rozmiar pisaka na 1 piksel (w górnym panelu po lewej stronie znajduje się rozwijane menu Szczotka):

Sztuka pikseli dla początkujących. | Wstęp.

Sztuka pikseli dla początkujących. | Wstęp.

Jeszcze kilka przydatnych kombinacji. " klawisz kontrolny+” i „ klawisz kontrolny-"powiększ i pomniejsz obraz. Warto również wiedzieć, że naciśnięcie klawisz kontrolny i „ (cytaty w jodełkę lub klucz rosyjski „ mi") włącza i wyłącza siatkę, co jest bardzo pomocne przy rysowaniu grafiki pikselowej. Odstępy siatki również należy dostosować do własnych potrzeb; niektórzy uważają, że wygodniej jest, gdy wynoszą 1 piksel; ja jestem przyzwyczajony do szerokości komórki wynoszącej 2 piksele. Kliknij Ctrl+K(lub przejdź do Edytować->Preferencje), przejdź do rzeczy Prowadnice, siatka i plasterki i zainstaluj Linia siatki co 1 piksel(Powtarzam, 2 jest dla mnie wygodniejsze).

2. Rysunek.

Wreszcie zaczynamy rysować. Po co tworzyć nową warstwę ( Ctrl+Shift+N), zmień kolor pióra na czarny (naciśnij D ustawia domyślne kolory, czarno-biały) i narysuj głowę postaci, w moim przypadku jest to ta symetryczna elipsa:

Sztuka pikseli dla początkujących. | Wstęp.

Sztuka pikseli dla początkujących. | Wstęp.

Jego dolna i górna podstawa mają długość 10 pikseli, następnie znajdują się tam segmenty po 4 piksele, trzy, trzy, jeden, jeden i pionowa linia o wysokości 4 pikseli. Proste linie w programie Photoshop można wygodnie rysować za pomocą programu Zmiana, chociaż skala obrazu w sztuce pikselowej jest minimalna, technika ta czasami pozwala zaoszczędzić dużo czasu. Jeśli popełniłeś błąd i narysowałeś za dużo, popełniłeś błąd – nie denerwuj się, przełącz się na narzędzie do gumki ( Gumka też klawisz l lub „”. mi") i usuń to, czego nie potrzebujesz. Tak, pamiętaj o ustawieniu gumki również na rozmiar pisaka na 1 piksel, aby wymazywała piksel po pikselu, oraz tryb ołówka ( Tryb: Ołówek), w przeciwnym razie umyje niewłaściwą rzecz. Wracając do ołówka, przypomnę, poprzez „ B»

Generalnie ta elipsa nie jest narysowana ściśle według zasad pixel artu, ale wymaga tego koncepcja artystyczna. Ponieważ jest to przyszła głowa, będzie miała oczy, nos, usta – wystarczająco dużo szczegółów, które ostatecznie przyciągną uwagę widza i zniechęcą do pytania, dlaczego głowa ma tak nieregularny kształt.

Kontynuujemy rysowanie, dodając nos, wąsy i usta:

Sztuka pikseli dla początkujących. | Wstęp.

Sztuka pikseli dla początkujących. | Wstęp.

Teraz oczy:

Sztuka pikseli dla początkujących. | Wstęp.

Sztuka pikseli dla początkujących. | Wstęp.

Proszę zwrócić uwagę, że przy tak małej skali oczy nie muszą być okrągłe - w moim przypadku są to kwadraty o boku 5 pikseli, bez narysowanych punktów rogowych. Po powrocie do pierwotnej skali będą wyglądać całkiem okrągło, a wrażenie kulistości można wzmocnić za pomocą cieni (więcej na ten temat w dalszej części lekcji). Na razie lekko dostosuję kształt głowy, usuwając kilka pikseli w jednym miejscu i dodając je w innym:

Sztuka pikseli dla początkujących. | Wstęp.

Sztuka pikseli dla początkujących. | Wstęp.

Rysujemy brwi (nie ma nic złego w tym, że wiszą w powietrzu – taki jest mój styl) oraz fałdy mimiczne w kącikach ust, dzięki czemu uśmiech staje się bardziej wyrazisty:

Sztuka pikseli dla początkujących. | Wstęp.

Sztuka pikseli dla początkujących. | Wstęp.

Narożniki nie wyglądają jeszcze zbyt dobrze, jedna z zasad sztuki pikselowej mówi, że każdy piksel kreski i elementów może stykać się nie więcej niż z dwoma sąsiednimi pikselami. Ale jeśli dokładnie przestudiujesz sprite'y z gier z końca lat 80. i początku 90., ten błąd można tam znaleźć dość często. Wniosek – jeśli nie możesz, ale naprawdę chcesz, to możesz. Ten szczegół można później odtworzyć podczas wypełniania za pomocą cieni, więc na razie kontynuujmy rysowanie. Tułów:

Sztuka pikseli dla początkujących. | Wstęp.

Sztuka pikseli dla początkujących. | Wstęp.

Na razie nie zwracaj uwagi na kostki, wygląda to niezręcznie, naprawimy to, gdy zaczniemy wypełniać. Mała poprawka: dodaj pas i fałdy w okolicy pachwiny, a także podkreśl stawy kolanowe (za pomocą małych 2-pikselowych fragmentów wystających z linii nóg):

Sztuka pikseli dla początkujących. | Wstęp.

Sztuka pikseli dla początkujących. | Wstęp.

3. Wypełnienie.

Dla każdego elementu postaci wystarczą nam na razie trzy kolory – główny kolor wypełnienia, kolor cienia i kolor obrysu. Ogólnie rzecz biorąc, można wiele doradzić w zakresie teorii koloru w pixel art, na początkowym etapie nie wahaj się podglądać dzieł mistrzów i dokładnie analizować, w jaki sposób dobierają kolory. Obrys każdego elementu można oczywiście pozostawić czarny, ale w tym przypadku elementy na pewno się połączą; ja wolę używać niezależnych kolorów, które są zbliżone do głównego koloru elementu, ale z niskim nasyceniem. Najwygodniej jest narysować małą paletę gdzieś w pobliżu swojej postaci, a następnie pobrać z niej kolory za pomocą narzędzia Kroplomierz ( Narzędzie do zakraplania, I):

Po wybraniu żądanego koloru aktywuj narzędzie Wiadro ( Wiadro z farbą, G). Pamiętaj także o wyłączeniu w ustawieniach funkcji Wygładzanie; potrzebujemy wypełnienia, aby wyraźnie działało w obrębie narysowanych konturów i nie wychodziło poza nie:

Sztuka pikseli dla początkujących. | Wstęp.

Sztuka pikseli dla początkujących. | Wstęp.

Wypełniamy naszą postać, jeśli nie możemy wypełnić, rysujemy ją odręcznie ołówkiem.

Sztuka pikseli dla początkujących. | Wstęp.

Sztuka pikseli dla początkujących. | Wstęp.

Zwróć uwagę na kostki - w związku z tym, że te obszary mają tylko 2 piksele grubości, musiałem zrezygnować z obrysu z obu stron i narysowałem go jedynie po zamierzonej stronie cienia, pozostawiając linię głównego koloru o grubości jednego piksela. Zwróćcie też uwagę, że brwi pozostawiłam czarne, chociaż nie ma to większego znaczenia.

Photoshop ma przydatną funkcję wyboru kolorów ( Wybierz->Zakres kolorów, wbijając kroplomierz w żądany kolor, otrzymamy zaznaczenie wszystkich obszarów o podobnym kolorze i możliwość ich natychmiastowego wypełnienia, ale do tego potrzebne są elementy twojej postaci, aby znajdowały się na różnych warstwach, więc na razie będziemy uważaj tę funkcję za przydatną dla zaawansowanych użytkowników Photoshopa):

Sztuka pikseli dla początkujących. | Wstęp.

Sztuka pikseli dla początkujących. | Wstęp.

4. Cień i dithering.

Teraz wybierz kolory cieni i przechodząc na ołówek ( B) ostrożnie rozłóż zacienione miejsca. W moim przypadku źródło światła znajduje się gdzieś z lewej strony i powyżej, przed postacią - dlatego prawe strony zaznaczamy cieniem z naciskiem skierowanym w dół. Twarz będzie najbogatsza w cień, ponieważ znajduje się tam wiele małych elementów, które z jednej strony wyróżniają się za pomocą cienia, a z drugiej same rzucają cień (oczy, nos, fałdy twarzy):

Sztuka pikseli dla początkujących. | Wstęp.

Sztuka pikseli dla początkujących. | Wstęp.

Cień to bardzo potężne narzędzie wizualne, dobrze zaprojektowany cień będzie miał pozytywny wpływ na wygląd postaci i wrażenie, jakie będzie ona wywierać na widzu. W pixel art pojedynczy piksel umieszczony w niewłaściwym miejscu może zniszczyć całe dzieło, a jednocześnie pozornie takie drobne poprawki mogą sprawić, że obraz będzie znacznie ładniejszy.

Jeśli chodzi o roztrząsanie’, a na obrazie o tak miniaturowych wymiarach jest moim zdaniem zupełnie zbędny. Sama metoda polega na „mieszaniu” dwóch sąsiadujących ze sobą kolorów, co osiąga się poprzez nakładanie na siebie pikseli. Aby jednak dać wam wyobrażenie o technice, nadal będę wprowadzać małe obszary mieszania, na spodniach, na koszuli i trochę na twarzy:

Sztuka pikseli dla początkujących. | Wstęp.

Sztuka pikseli dla początkujących. | Wstęp.

Ogólnie rzecz biorąc, jak widać, nic szczególnie skomplikowanego. Pikselowa sztuka Atrakcyjność tej sztuki polega na tym, że po opanowaniu niektórych wzorów każdy może sam dobrze rysować – po prostu uważnie studiując dzieła mistrzów. Choć tak, odrobina wiedzy z podstaw rysunku i teorii koloru nie zaszkodzi. Idź po to!

Przeglądając dziś rano Internet, chciałem napisać post o Pixel Art i szukając materiałów trafiłem na te dwa artykuły.

Adobe Photoshop: rysuj i animuj postać przy użyciu techniki Pixel Art

Na tej lekcji nauczysz się rysować i animować postacie przy użyciu techniki Pixel Art. Aby to zrobić, potrzebujesz tylko programu Adobe Photoshop. Rezultatem będzie GIF z biegnącym astronautą.

Program: Adobe Photoshop Stopień trudności: początkujący, średniozaawansowany Wymagany czas: 30 min – godzina

I. Konfiguracja dokumentu i narzędzi

Krok 1

Z paska narzędzi wybierz Ołówek - będzie to główne narzędzie naszej lekcji. W ustawieniach wybierz typ pędzla Twardy Okrągły, a pozostałe wartości ustaw jak na obrazku. Naszym celem jest, aby stalówka ołówka była jak najostrzejsza.

Krok 2

W ustawieniach narzędzia Gumka (gumka) wybierz opcję Tryb ołówka, a pozostałe wartości ustaw tak, jak pokazano na obrazku.

Krok 3

Włącz siatkę pikseli (Widok > Pokaż > Siatka pikseli). Jeśli w menu nie ma takiej pozycji, przejdź do ustawień i włącz akcelerację grafiki Preferencje > Wydajność > Przyspieszenie grafiki.

Uwaga: siatka będzie widoczna na nowo utworzonym płótnie tylko po powiększeniu o 600% lub więcej.

Krok 4

W Preferencjach > Ogólne (Control-K) zmień tryb interpolacji obrazu na tryb najbliższego sąsiada. Dzięki temu granice obiektów pozostaną tak wyraźne, jak to tylko możliwe.

W ustawieniach Jednostki i miarki ustaw jednostki miarki na piksele. Preferencje > Jednostki i miarki > Piksele.

II. Tworzenie postaci

Krok 1

A teraz, gdy wszystko jest już gotowe, możemy przystąpić bezpośrednio do rysowania postaci.

Naszkicuj swoją postać z wyraźnym konturem, uważając, aby nie przeciążyć jej drobnymi szczegółami. Na tym etapie kolor w ogóle nie ma znaczenia, najważniejsze jest to, że kontur jest wyraźnie narysowany i rozumiesz, jak postać będzie wyglądać. Ten szkic został przygotowany specjalnie na tę lekcję.

Krok 2

Zmniejsz skalę szkicu do wysokości 60 pikseli, używając skrótu klawiaturowego Control+T lub Edycja > Swobodna transformacja.

Rozmiar obiektu wyświetlany jest na panelu informacyjnym. Należy pamiętać, że ustawienia interpolacji są takie same, jak w kroku 4.

Krok 3

Powiększ szkic o 300-400%, aby ułatwić pracę i zmniejszyć krycie warstwy. Następnie utwórz nową warstwę i narysuj kontury szkicu za pomocą narzędzia Ołówek. Jeśli znak jest symetryczny, tak jak w naszym przypadku, możesz obrysować tylko połowę, a następnie zduplikować go i odwrócić jako lustro (Edycja > Przekształć > Odwróć w poziomie).

Rytm: Aby narysować złożone elementy, podziel je na części. Kiedy piksele (kropki) w linii tworzą „rytm”, na przykład 1-2-3 lub 1-1-2-2-3-3, dla ludzkiego oka szkic wydaje się gładszy. Jeśli jednak forma tego wymaga, rytm ten może zostać zakłócony.

Krok 4

Kiedy kontur jest już gotowy, możesz wybrać główne kolory i pomalować duże kształty. Zrób to na osobnej warstwie poniżej konturu.

Krok 5

Wygładź kontur, rysując cień wzdłuż wewnętrznej krawędzi.

Kontynuuj dodawanie cieni. Jak zapewne zauważyłeś podczas rysowania, niektóre kształty można poprawić.

Krok 6

Utwórz nową warstwę dla rozjaśnień.

Z listy rozwijanej w panelu Warstwy wybierz tryb mieszania Nakładka. Pomaluj jasnym kolorem obszary, które chcesz podkreślić. Następnie wygładź najjaśniejsze obszary za pomocą opcji Filtr > Rozmycie > Rozmycie.

Uzupełnij obraz, następnie skopiuj i odbij gotową połowę obrazu, a następnie połącz warstwy z połówkami, aby utworzyć cały obraz.

Krok 7

Teraz astronauta musi dodać kontrast. Użyj ustawień Poziomy (Obraz > Dopasowania > Poziomy), aby rozjaśnić obraz, a następnie dostosuj odcień za pomocą opcji Balans kolorów (Obraz > Dopasowania > Balans kolorów).

Postać jest teraz gotowa do animacji.

III. Animacja postaci

Krok 1

Utwórz kopię warstwy (Warstwa > Nowa > Warstwa przez kopię) i przesuń ją o 1 piksel w górę i 2 piksele w prawo. Jest to kluczowy punkt animacji postaci.

Zmniejsz krycie oryginalnej warstwy o 50%, aby zobaczyć poprzednią klatkę. Nazywa się to „obieraniem cebuli” (w liczbie mnogiej).

Krok 2

Teraz zegnij ręce i nogi swojej postaci, jakby biegł.

● Wybierz lewą rękę za pomocą narzędzia Lasso

● Używając narzędzia FreeTransformTool (Edycja > FreeTransform) i przytrzymując klawisz Control, przesuń krawędzie kontenera tak, aby dłoń cofnęła się.

● Najpierw wybierz jedną nogę i lekko ją rozciągnij. Następnie ściśnij drugą nogę odwrotnie, tak aby postać miała wrażenie, że chodzi.

● Za pomocą ołówka i gumki dopasuj część prawego ramienia poniżej łokcia.

Krok 3

Teraz musisz całkowicie przerysować nową pozycję rąk i nóg, jak pokazano w drugiej części tej lekcji. Jest to konieczne, aby obraz wyglądał wyraźnie, ponieważ transformacja znacznie zniekształca linie pikseli.

Krok 4

Zrób kopię drugiej warstwy i odwróć ją poziomo. Teraz masz 1 podstawową pozę i 2 w ruchu. Przywróć krycie wszystkich warstw do 100%.

Krok 5

Przejdź do opcji Okno > Oś czasu, aby wyświetlić panel Oś czasu i kliknij opcję Utwórz animację klatki.

Pixel Art (grafika pikselowa) jest bardzo popularna w grach nawet obecnie i jest ku temu kilka powodów!

Co więc sprawia, że ​​Pixel Art jest urzekający:

1. Postrzeganie. Pixel Art wygląda niesamowicie! Wiele można powiedzieć o każdym pojedynczym pikselu w duszku.
2. Nostalgia. Pixel Art przywraca nostalgiczne uczucie graczom, którzy dorastali grając na Nintendo, Super Nintendo lub Genesis (jak ja!).
3. Łatwe do nauki. Pixel Art to jedna z najłatwiejszych do nauczenia się form sztuki cyfrowej, szczególnie jeśli jesteś bardziej programistą niż artystą ;]

A więc chcesz spróbować swoich sił w Pixel Art? Następnie podążaj za mną, gdy pokażę Ci, jak stworzyć prostą, ale skuteczną postać do gry, której możesz użyć we własnej grze! Dodatkowo, jako bonus, przyjrzymy się, jak zintegrować go z grami na iPhone'a!

Aby skutecznie się uczyć, będziesz potrzebować programu Adobe Photoshop. Jeśli go nie masz, możesz pobrać bezpłatną wersję próbną ze strony Adobe lub z torrenta.

Co to jest sztuka pikselowa?

Zanim zaczniemy, wyjaśnijmy, czym jest Pixel Art, ponieważ nie jest to tak oczywiste, jak mogłoby się wydawać. Najłatwiejszym sposobem zdefiniowania, czym jest Pixel Art, jest zdefiniowanie, czym ona nie jest, a mianowicie: czymkolwiek, w czym piksele są tworzone automatycznie. Oto kilka przykładów:

Gradient: Wybierz dwa kolory i oblicz kolor pikseli pomiędzy nimi. Wygląda fajnie, ale to nie Pixel Art!

Narzędzie rozmycia: Identyfikacja pikseli i ich replikacja/edycja w celu utworzenia nowej wersji poprzedniego obrazu. Powtórzę: nie sztuka pikselowa.

Gładkie narzędzie(w zasadzie generowanie nowych pikseli w różnych kolorach, aby uzyskać coś „gładkiego”). Musisz ich unikać!

Niektórzy powiedzą, że nawet automatycznie generowane kolory to nie Pixel Art, bo wymagają warstwy do miksowania efektów (mieszania pikseli pomiędzy dwiema warstwami według danego algorytmu). Ponieważ jednak większość urządzeń radzi sobie obecnie z milionami kolorów, stwierdzenie to można zignorować. Jednak używanie kilku kolorów jest dobrą praktyką w Pixel Art.

Inne narzędzia, takie jak (linia) lub Narzędzie Wiadro farby(Wiadro z farbą) również automatycznie generuje piksele, ale ponieważ można je ustawić tak, aby nie wygładzały wypełnianych pikseli, narzędzia te są uważane za przyjazne dla grafiki pikselowej.

Tym samym odkryliśmy, że Pixel Art wymaga dużej uwagi podczas umieszczania każdego piksela w ikonce, najczęściej ręcznie i przy ograniczonej palecie kolorów. Zabierzmy się już do pracy!

Początek pracy

Zanim zaczniesz tworzyć swój pierwszy zasób Pixel Art, powinieneś wiedzieć, że Pixel Art nie może być skalowany. Jeśli spróbujesz to zmniejszyć, wszystko będzie wyglądać na rozmazane. Jeśli spróbujesz go powiększyć, wszystko będzie wyglądać dobrze, o ile użyjesz wielokrotności dwa zoomu (ale oczywiście nie będzie ostre).

Aby uniknąć tego problemu, musisz najpierw zrozumieć, jak duża ma być Twoja postać lub element gry, a następnie zabrać się do pracy. Najczęściej opiera się to na rozmiarze ekranu urządzenia, na które kierujesz reklamy, i liczbie „pikseli”, które chcesz zobaczyć.

Na przykład, jeśli chcesz, aby gra wyglądała dwa razy większa na ekranie iPhone'a 3GS („Tak, naprawdę chcę nadać mojej grze pikselowy wygląd retro!”), którego rozdzielczość ekranu wynosi 480x320 pikseli, musisz pracuj z połową rozdzielczości, w tym przypadku będzie to 240x160 pikseli.

Otwórz nowy dokument programu Photoshop ( Plik → Nowy…) i ustaw rozmiar ekranu gry na dowolny, a następnie wybierz rozmiar swojej postaci.

Każda komórka ma wymiary 32 x 32 piksele!

Wybrałem 32x32 piksele nie tylko dlatego, że idealnie pasują do wybranego rozmiaru ekranu, ale także dlatego, że 32x32 piksele to także wielokrotność 2, co jest wygodne dla silników zabawek (rozmiary płytek są często wielokrotnościami 2, tekstury są wyrównane jako wielokrotność 2, itp.

Nawet jeśli używany silnik obsługuje dowolny rozmiar obrazu, zawsze możesz spróbować pracować z parzystą liczbą pikseli. W takim przypadku, jeśli obraz będzie wymagał skalowania, rozmiar zostanie lepiej podzielony, co ostatecznie przełoży się na lepszą wydajność.

Rysowanie postaci Pixel Art

Wiadomo, że Pixel Art to przejrzysta i łatwa do odczytania grafika: za pomocą zaledwie kilku kropek można określić rysy twarzy, oczy, włosy, części ciała. Jednak rozmiar obrazu komplikuje zadanie: im mniejsza postać, tym trudniej jest ją narysować. Aby być bardziej praktycznym, wybierz najmniejszą cechę charakteru. Zawsze wybieram oczy, ponieważ są jednym z najlepszych sposobów na ożywienie postaci.

W Photoshopie wybierz Narzędzie ołówek(Narzędzie Ołówek). Jeśli nie możesz go znaleźć, po prostu naciśnij i przytrzymaj narzędzie Narzędzie Pędzel(Narzędzie Pędzel), a zobaczysz je natychmiast (powinno być drugie na liście). Wystarczy, że zmienisz jego rozmiar na 1 piksel (możesz kliknąć pasek opcji narzędzia i zmienić jego rozmiar lub po prostu przytrzymać klawisz [).

Będziesz także potrzebował Narzędzie do usuwania(Narzędzie Gumki), kliknij więc na nie (lub naciśnij E) i zmień jego ustawienia wybierając z rozwijanej listy Tryb:(Tryb:) Ołówek(Ołówek) (ponieważ w tym trybie nie ma wygładzania).

Teraz zacznijmy pikselować! Narysuj brwi i oczy, jak pokazano na obrazku poniżej:

ej! Mam piksele!!

Można już zacząć od Lineartu, ale bardziej praktycznym sposobem jest narysowanie sylwetki postaci. Dobra wiadomość jest taka, że ​​na tym etapie nie musisz być profesjonalistą, po prostu spróbuj wyobrazić sobie rozmiar części ciała (głowa, tułów, ramiona, nogi) i wyjściową pozę postaci. Spróbuj czegoś takiego w kolorze szarym:

Na tym etapie nie musisz być profesjonalistą

Zauważ, że zostawiłem również trochę białej przestrzeni. Tak naprawdę nie musisz wypełniać całego płótna, zostaw miejsce na przyszłe klatki. W tym przypadku bardzo przydatne będzie zachowanie tego samego rozmiaru płótna dla wszystkich.

Po skończeniu sylwetki przyszedł czas . Teraz musisz ostrożniej rozmieszczać piksele, więc nie martw się o ubrania, zbroję itp. Na wszelki wypadek możesz dodać nową warstwę, aby nigdy nie stracić swojej oryginalnej sylwetki.

Jeśli uważasz, że narzędzie Ołówek działa zbyt wolno, aby rysować, zawsze możesz go użyć (Narzędzie Linia), pamiętaj tylko, że nie będziesz w stanie ustawić pikseli tak precyzyjnie, jak za pomocą ołówka. Będziesz musiał skonfigurować jak pokazano niżej:

Wybierać , naciskając i przytrzymując Narzędzie Prostokąt(Narzędzie Prostokąt)

Przejdź do panelu opcji narzędzia z listy rozwijanej Wybierz tryb narzędzia(Tryb śledzenia ścieżki) wybierz Pixel, zmień Waga(Grubość) na 1px (jeśli jeszcze tego nie zrobiono) i odznacz Wygładzanie(Wygładzanie). Oto jak powinieneś to mieć:

Zauważ, że nie zrobiłem dolnego konturu stóp. Jest to opcjonalne, ponieważ stopy nie są tak ważną częścią nóg, aby je podkreślać, a to pozwoli zaoszczędzić jedną linię pikseli na płótnie.

Stosowanie kolorów i cieni

Teraz możesz przystąpić do kolorowania naszej postaci. Nie martw się o dobór odpowiednich kolorów, później będzie je bardzo łatwo zmienić, tylko upewnij się, że każdy z nich ma swój „własny kolor”. Użyj domyślnych kolorów na karcie Próbki(Okno → Próbki).

Pokoloruj swoją postać jak na obrazku poniżej (ale możesz wykazać się kreatywnością i użyć własnych kolorów!)

Dobry, kontrastowy kolor poprawia czytelność Twojego zasobu!

Proszę zwrócić uwagę, że nadal nie opisałem ubrań ani włosów. Zawsze pamiętaj: zaoszczędź jak najwięcej pikseli od niepotrzebnych konturów!

Nie ma potrzeby tracić czasu na malowanie każdego piksela. Aby przyspieszyć pracę, użyj linii dla tego samego koloru lub Narzędzie Wiadro farby(Narzędzie Wiadro z farbą), aby wypełnić luki. Nawiasem mówiąc, będziesz musiał go również skonfigurować. Wybierać Narzędzie Wiadro farby na pasku narzędzi (lub po prostu naciśnij klawisz G) i zmień Tolerancja(Tolerancja) na 0, a także odznacz Wygładzanie(Wygładzanie).

Jeśli kiedykolwiek będziesz musiał użyć Magiczna różdżka(Narzędzie Magiczna Różdżka) - bardzo przydatne narzędzie, które zaznacza wszystkie piksele o tym samym kolorze, a następnie ustawia je w taki sam sposób, jak narzędzie „Wiadro z farbą” - bez tolerancji i wygładzania.

Następnym krokiem, który będzie wymagał pewnej wiedzy z Twojej strony, są uniki i cieniowanie. Jeżeli nie masz wiedzy jak pokazać jasne i ciemne strony to poniżej podam Ci krótką instrukcję. Jeśli nie masz czasu ani ochoty się tego uczyć, możesz pominąć ten krok i przejść do sekcji „Uatrakcyjnij swoją paletę”, ponieważ na koniec możesz po prostu ustawić cieniowanie tak samo, jak w moim przykładzie!

Użyj tego samego źródła światła dla całego zasobu

Spróbuj nadać mu kształty, jakie chcesz/możesz, bo wtedy zasób zacznie wyglądać ciekawiej. Teraz widać np. nos, zmarszczone oczy, czuprynę, zagniecenia w spodniach itp. Można też dodać na tym trochę jasnych plamek, będzie to wyglądać jeszcze lepiej:

Podczas cieniowania używaj tego samego źródła światła

A teraz, tak jak obiecałam, mały przewodnik po światłach i cieniach:

Urozmaicaj swoją paletę

Wiele osób używa domyślnej palety kolorów, ale ponieważ wiele osób używa tych kolorów, możemy je zobaczyć w wielu grach.

Photoshop w swojej standardowej palecie posiada duży wybór kolorów, jednak nie należy na nim zbytnio polegać. Najlepszym sposobem na utworzenie własnych kolorów jest kliknięcie głównej palety na dole paska narzędzi.

Następnie w oknie Próbnika kolorów przeglądaj prawy pasek boczny, aby wybrać kolor, a w obszarze głównym wybierz żądaną jasność (jaśniejszy lub ciemniejszy) i nasycenie (jaśniejszy lub ciemniejszy).

Po znalezieniu tego, którego szukasz, kliknij OK i ponownie skonfiguruj narzędzie Wiadro z farbą. Nie martw się, możesz po prostu odznaczyć pole „Sąsiadujące” i podczas malowania nowym kolorem wszystkie nowe piksele o tym samym kolorze tła również zostaną wypełnione.

To kolejny powód, dla którego ważne jest, aby pracować z małą liczbą kolorów i zawsze używać tego samego koloru dla tego samego elementu (koszule, włosy, hełm, zbroja itp.). Pamiętaj jednak, aby użyć innych kolorów w innych obszarach, w przeciwnym razie nasz rysunek będzie zbyt przekolorowany!

Odznacz opcję „Sąsiadujący”, aby wypełnić wybrane piksele tym samym kolorem

Zmień kolory, jeśli chcesz i uzyskaj bardziej efektowną kolorystykę postaci! Możesz nawet zmienić kolor konturów, upewnij się tylko, że dobrze komponują się z tłem.

Na koniec wykonaj test koloru tła: utwórz nową warstwę pod swoją postacią i wypełnij ją różnymi kolorami. Ma to na celu zapewnienie, że Twoja postać będzie widoczna na jasnym, ciemnym, ciepłym i chłodnym tle.

Jak już widać, wyłączyłem antyaliasing we wszystkich narzędziach, z których do tej pory korzystałem. Nie zapomnij zrobić tego także w innych narzędziach, np. Markiza eliptyczna(Namiot owalny) i Lasso(Lasso).

Za pomocą tych narzędzi możesz łatwo zmienić rozmiar wybranych części, a nawet je obrócić. Aby to zrobić, użyj dowolnego narzędzia do zaznaczania (lub naciśnij M), aby wybrać obszar, kliknij prawym przyciskiem myszy i wybierz Darmowa transformacja(Swobodna transformacja) lub po prostu naciśnij Ctrl + T. Aby zmienić rozmiar zaznaczonego obszaru, przeciągnij jeden z uchwytów znajdujących się na obwodzie ramki transformacji. Aby zmienić rozmiar zaznaczenia przy zachowaniu proporcji, przytrzymaj klawisz Shift i przeciągnij jeden z narożnych uchwytów.

Jednak Photoshop automatycznie wygładza wszystko, co było edytowane za pomocą narzędzia Darmowa transformacja więc przed edycją przejdź do Edycja → Preferencje → Ogólne(Ctrl + K) i zmień Interpolacja obrazu(Interpolacja obrazu) włączona Najbliższy sąsiad(Najbliższy sąsiad). Krótko mówiąc, kiedy Najbliższy sąsiad nowa pozycja i rozmiar są obliczane z grubsza, nie są stosowane żadne nowe kolory ani krycie, a wybrane kolory pozostają zachowane.

Integracja Pixel Art z grami na iPhone'a

W tej sekcji dowiesz się, jak zintegrować naszą grafikę pikselową z grą na iPhone'a za pomocą frameworka gry Cocos2d. Dlaczego rozważam tylko iPhone'a? Bo dzięki serii artykułów o Unity (przykładowo: , czy Gra w stylu Jetpack Joyride w Unity 2D) wiesz już jak z nimi pracować w Unity, oraz z artykułów o Crafty (gry przeglądarkowe: Snake) i Impact (Wprowadzenie do tworzenia gier przeglądarkowych na Impact) nauczyłeś się wstawiać je do obszaru roboczego i tworzyć gry przeglądarkowe.

Jeśli jesteś nowy w Cocos2D lub ogólnie w tworzeniu aplikacji na iPhone'a, sugeruję rozpoczęcie od jednego z samouczków Cocos2d i iPhone'a. Jeśli masz zainstalowane Xcode i Cocos2d, czytaj dalej!

Utwórz nowy projekt iOS → cocos2d v2.x → szablon cocos2d iOS, nadaj mu nazwę PixelArt i jako urządzenie wybierz iPhone'a. Przeciągnij utworzoną grafikę pikselową, na przykład: sprite_final.png do swojego projektu, a następnie otwórz HelloWorldLayer.m i zastąp metodę inicjalizacji następującą:

-(id) init ( if((self=)) ( CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = TAK; ; ) zwróć self; )

Ustawiamy duszka po lewej stronie ekranu i obracamy go tak, aby był skierowany w prawą stronę. Skompiluj, uruchom, a na ekranie zobaczysz swojego duszka:

Pamiętaj jednak, że jak wspomnieliśmy wcześniej w tym samouczku, chcieliśmy w sztuczny sposób zwiększyć skalę pikseli, aby każdy piksel był wyraźnie odróżnialny od pozostałych. Dodaj więc tę nową linię do metody inicjalizacji:

Skala bohatera = 2,0;

Nic skomplikowanego, prawda? Skompiluj, uruchom i... czekaj, nasz duszek jest zamazany!

Dzieje się tak, ponieważ domyślnie Cocos2d wygładza rysunek podczas jego skalowania. Nie potrzebujemy tego, więc dodaj następujący wiersz:

Ta linia konfiguruje Cocos2d do skalowania obrazów bez antyaliasingu, więc nasz facet nadal wygląda na „pikselowany”. Skompiluj, uruchom i... tak, to działa!

Zwróćmy uwagę na zalety stosowania grafiki Pixel Art – możemy zastosować mniejszy obraz niż ten wyświetlany na ekranie, oszczędzając przy tym sporo pamięci tekstur. Nie musimy nawet tworzyć oddzielnych obrazów dla wyświetlaczy Retina!

Co dalej?

Mam nadzieję, że podobał Ci się ten samouczek i dowiedziałeś się trochę więcej o sztuce pikselowej! Zanim się rozstanę, chcę dać ci kilka rad:

• Zawsze staraj się unikać stosowania wygładzania, gradientów lub zbyt wielu kolorów na swoich zasobach. To dla twojego dobra, szczególnie jeśli jesteś jeszcze początkujący.
• Jeśli NAPRAWDĘ chcesz naśladować wygląd retro, spójrz na grafikę w 8-bitowych lub 16-bitowych grach konsolowych.
• Niektóre style nie wykorzystują ciemnych konturów, inne nie uwzględniają efektu światła lub cienia. Wszystko zależy od stylu! W naszym poradniku nie rysowaliśmy cieni, ale to nie znaczy, że nie należy ich używać.

Dla początkującego Pixel Art wydaje się najłatwiejszą grafiką do nauczenia, jednak w rzeczywistości nie jest to tak proste, jak się wydaje. Najlepszym sposobem na doskonalenie swoich umiejętności jest praktyka, praktyka, praktyka. Gorąco polecam publikowanie swoich prac na forach Pixel Art, aby inni artyści mogli udzielić Ci porad – to świetny sposób na udoskonalenie swojej techniki! Zacznij od małych rzeczy, dużo ćwicz, otrzymuj opinie, a możesz stworzyć niesamowitą grę, która przyniesie Ci dużo pieniędzy i radości!