Co to jest sztuka pikselowa? Przykłady i jak się tego uczyć. Sztuka pikselowa: najlepsze prace i ilustratorzy Prosta sztuka pikselowa

03.03.2020

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

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.
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
1. 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!
  
  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. 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.
2. 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ą.
3. 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 duszków w rozumieniu gier walki, Ryu to duże obszary o prostych kolorach, plus trochę cienia dla 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
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.
Część 6
Stosujemy zaawansowane techniki rysunkowe
1. Nie zapomnij o antyaliasingu (eliminowaniu nierówności konturów). Tak, wizytówką sztuki pikselowej jest widoczna „pikselacja” obrazu. Czasami jednak chcesz, aby linie wyglądały na nieco mniej zauważalne, nieco gładsze. Tutaj na ratunek przychodzi antyaliasing.
  - Dodaj kolory pośrednie do zagięć krzywej. Pomaluj jedną warstwę koloru pośredniego wokół konturu krzywej, którą chcesz wygładzić. Jeśli nadal wygląda kanciasto, dodaj kolejną warstwę, tym razem jaśniejszą.
  - Jeśli chcesz, aby duszek wtapiał się w tło, nie używaj wygładzania na zewnętrznej krawędzi duszka.
2. Naucz się korzystać z renderowania selektywnego. O co chodzi: kontur rysowany jest kolorem podobnym do tego, jaki został użyty do wypełnienia. Rezultatem jest mniej „kreskówkowy” obraz, właśnie ze względu na bardziej realistyczny wygląd konturu. Spróbuj, powiedzmy, selektywnie renderować skórę, pozostawiając klasyczny czarny kontur dla odzieży lub przedmiotów.

Pixel Art lub grafika pikselowa to cyfrowy obraz tworzony w edytorach rastrowych piksel po pikselu. Piksel to najmniejszy element graficzny obrazu. Innymi słowy, o to właśnie chodzi. Wszystkie rysunki pikselowe składają się z niezliczonych nagromadzeń punktów, które okazują się nieco nierówne, jakby źle narysowane. Ale taki jest urok takich obrazów.

Trochę historii

Jakich programów można używać do tworzenia nowoczesnej grafiki pikselowej?

Istnieje wiele darmowych edytorów rastrowych. Ale najczęściej nazywany Microsoft Paint i Adobe Photoshop. To prawda, że Paint jest uważany za mniej wygodne narzędzie do tworzenia grafiki pikselowej niż Adobe Photoshop. Dlaczego? W tym programie:
bardzo trudno jest uzyskać równość i symetrię obrazów;
podczas zapisywania ich w formacie jpg następuje poważne zniekształcenie kolorów;
Trudno jest narysować cienie i światła.
Dlatego starają się preferować Adobe Photoshop. Program ten ma znacznie większe możliwości działania niż Paint. Pozwala to na rysowanie nie pojedynczych postaci za pomocą prostych projektów, ale całych obrazów. Ponadto samą grafikę pikselową można tutaj łatwiej i szybciej edytować. Tak, możesz płynnie i naturalnie przenosić przejścia kolorów w programie Adobe Photoshop.

Jak uniknąć załamań w Pixel Art

Grafika pikselowa to zbiór pikseli w postaci kwadratowych lub prostokątnych „kropek”. Gdy obraz zostanie narysowany z takich „punktów”, staje się on kanciasty, a gładkość linii zanika. Z jednej strony to wizytówka Pixel Art, ale z drugiej strony zależy mi na większej płynności, dzięki której obraz będzie schludny i atrakcyjny dla użytkownika. Ten problem w języku artystów pikselowych nazywany jest załamaniami lub „strzępionymi krawędziami”.
Jaggies to elementy, które nadają dowolnym liniom postrzępiony wygląd. Zwykle usuwa się je w jeden z następujących sposobów:
zwiększ długość odcinka linii błądzącej o 2, 3 lub więcej pikseli;
zmniejsz długość samych pikseli w widocznym obszarze;
skonstruuj nowy odcinek linii z kilku pojedynczych pikseli;
dodaj do obszaru pojedyncze piksele z przerwą pomiędzy dłuższymi „kropkami” itp.
Aby prawidłowo wyeliminować załamania, należy pamiętać o głównej zasadzie: długość elementów zakrzywionej linii powinna stopniowo się zmniejszać lub zwiększać. Trzeba też pamiętać, że przesunięcie odcinka linii o dwa lub więcej pikseli wysokości prowadzi do zniszczenia gładkości.
Dlatego konieczna jest ciągła praktyka rysowania. Jako prostą i wizualną pomoc w uniknięciu załamań można zastosować zestaw ukośnych linii prostych.

Jak uzyskać cień w Pixel Art

Kolejnym ważnym punktem dotyczącym grafiki pikselowej jest jej objętość. Osiąga się to, podobnie jak w innych opcjach graficznych, poprzez rozjaśnienia i cienie. Aby stworzyć cień w sztuce pikselowej, potrzebujesz płynnego przejścia od jasnego do ciemnego tonu lub od jednego koloru do drugiego. Aby uzyskać taki efekt często wykorzystuje się technologię miksowania – dithering. Inaczej mówiąc, na styku dwóch kolorów mieszają się one w szachownicę. Metoda ta powstała na tle niedoboru kwiatów. Mieszając dwa kolory w szachownicę, udało się uzyskać trzeci, którego nie było w palecie.
Jednak po znacznym rozszerzeniu palety, technologia ditheringu nadal była poszukiwana. Trzeba jednak pamiętać, że przejście z jednego koloru w drugi o szerokości jednego piksela nie wygląda dobrze. Okazuje się, że to tylko grzebień. Dlatego
minimalna strefa mieszania musi wynosić co najmniej dwa piksele. Im szersze jest to przejście, tym lepiej.
Ponadto podczas tworzenia cienia:
Ważne jest, aby określić, pod jakim kątem i z której strony światło będzie padać na obiekt. To sprawi, że rysunek „ożyje”, a także pomoże ci zrozumieć, gdzie narysować cień. Na przykład, jeśli światło pochodzi z prawej strony, obszary cienia będą znajdować się po lewej stronie itp.;
musisz użyć kolorów znacznie ciemniejszych niż podstawowe. Te. cień należy przedstawić kolorami ciemniejszymi niż sam zacieniony obszar. Na przykład, jeśli obiekt jest czerwony, jego cień będzie bordowy lub ciemnobrązowy;
nie zapomnij o półcieniu. W tym celu wybierany jest odcień znajdujący się pomiędzy kolorem bazowym a kolorem cienia w palecie. Odcień ten umieszczony jest pomiędzy warstwami tych dwóch kolorów. W rezultacie powstaje efekt płynnego przejścia z ciemnego obszaru do jaśniejszego obszaru.

Jak uzyskać wyróżnienia w sztuce pikselowej

Podświetlenie, podobnie jak cień, nadaje objętość rysowanym obiektom. Zawsze znajduje się po tej stronie, z której pada światło. Ale jeśli obiekt ma mieć błyszczącą powierzchnię, na przykład porcelanowy kubek, stalowy miecz itp., wówczas potrzebne będzie również podświetlenie w zacienionym miejscu.
Aby stworzyć podświetlenie w obszarze, w którym pada światło, musisz wziąć farbę, która będzie znacznie jaśniejsza niż główna. Po prostu nie bądź gorliwy w kwestii jasności tego miejsca - może nie wyjść naturalnie. Bardzo często podświetlenie jest przedstawiane na biało, bez przejść. To nie zdarza się w naturze. A obiekt będzie wyglądał płasko.
Aby stworzyć rozjaśnienie od strony cienia, będziesz potrzebować koloru jaśniejszego niż ten, za pomocą którego nakładany jest sam cień. I w tym przypadku konieczne jest również płynne przejście, które można osiągnąć, stosując kilka odcieni jednocześnie.
Aby to wszystko zrealizować, potrzebujesz oczywiście praktyki. A najlepiej zacząć od prostych obiektów.

Część 6: Antyaliasing
Część 7: Tekstury i rozmycie
Część 8: Świat płytek

Przedmowa

Istnieje wiele definicji sztuki pikselowej, ale tutaj użyjemy następującej: obraz jest sztuką pikselową, jeśli jest tworzony w całości ręcznie i istnieje kontrola nad kolorem i położeniem każdego narysowanego piksela. Oczywiście w pixel art nie używamy pędzli, narzędzi do rozmycia lub zdegradowanych maszyn (nie jestem pewien) oraz innych opcji oprogramowania, które są „nowoczesne” (właściwie oddane do naszej dyspozycji oznacza „do naszej dyspozycji”) , ale logicznie wydaje się to bardziej poprawne w ten sposób). Ogranicza się do narzędzi ołówka i wypełnienia.

Nie można jednak powiedzieć, że grafika pikselowa lub niepikselowa jest mniej lub bardziej piękna. Bardziej sprawiedliwe jest stwierdzenie, że grafika pikselowa jest inna i lepiej nadaje się do gier w stylu retro (takich jak Super Nintendo czy Game Boy). Możesz także połączyć poznane tutaj techniki z efektami sztuki innej niż pikselowa, aby stworzyć styl hybrydowy.

Tutaj poznasz techniczną część sztuki pikselowej. Nigdy jednak nie zrobię z Ciebie artysty... z prostego powodu: artystą też nie jestem. Nie będę was uczył anatomii człowieka, ani struktury sztuk, a o perspektywie nie powiem. W tym poradniku znajdziesz wiele informacji na temat technik pixel artu. Ostatecznie powinieneś być w stanie stworzyć postacie i scenerię do swoich gier, pod warunkiem, że będziesz zwracać uwagę, regularnie ćwiczyć i stosować się do podanych wskazówek.

- Chcę również zaznaczyć, że tylko niektóre obrazy użyte w tym tutorialu są powiększone. W przypadku obrazów, które nie są powiększone, dobrze byłoby poświęcić trochę czasu na ich skopiowanie, aby móc je szczegółowo przestudiować. Sztuka pikseli to esencja pikseli; studiowanie ich z daleka jest bezużyteczne.

Na koniec muszę podziękować wszystkim artystom, którzy w ten czy inny sposób dołączyli do mnie podczas tworzenia tego przewodnika: Shinowi za jego brudną robotę i grafikę liniową, Xenohydrogenowi za geniusz kolorów, Lunnowi za wiedzę o perspektywie, oraz Pandzie, surowemu Ahruonowi, Dayo i Kryonowi za ich hojny wkład w zilustrowanie tych stron.

Pozwólcie, że wrócę do rzeczy.

Część 1: Właściwe narzędzia

Zła wiadomość: w tej części nie narysujesz ani jednego piksela! (I to nie powód, aby to pominąć, prawda?) Jeśli istnieje powiedzenie, którego nienawidzę, to brzmi ono: „nie ma złych narzędzi, są tylko źli pracownicy”. Właściwie myślałem, że nic nie może być dalsze od prawdy (no może poza „co cię nie zabije, to cię wzmocni”), a pixel art jest tego bardzo dobrym potwierdzeniem. Celem tego przewodnika jest zapoznanie Cię z różnymi programami używanymi do tworzenia grafiki pikselowej i pomoc w wyborze odpowiedniego programu.

1. Trochę starych rzeczy

Wybierając oprogramowanie do tworzenia grafiki pikselowej, ludzie często myślą: „Wybór oprogramowania? To szaleństwo! Do stworzenia pixel artu wystarczy farba! (najwyraźniej gra słów, rysunek i program)” Tragiczny błąd: mówiłem o złych narzędziach, to jest to pierwsze. Paint ma jedną zaletę (i tylko jedną): już ją masz, jeśli używasz systemu Windows. Z drugiej strony ma wiele wad. To jest (niekompletna) lista:

*Nie można otworzyć więcej niż jednego pliku jednocześnie
* Brak kontroli palety.
* Brak warstw i przezroczystości
* Brak zaznaczeń innych niż prostokątne
* Kilka skrótów klawiszowych
* Strasznie niewygodne

Krótko mówiąc, o Paintie można zapomnieć. Teraz przyjrzymy się prawdziwemu oprogramowaniu.

2. W końcu...

Ludzie myślą wtedy: „OK, Paint jest dla mnie zbyt ograniczony, więc użyję programu Photoshop (albo Gimp albo PaintShopPro, to to samo), który ma tysiące funkcji”. Może to być dobre lub złe: jeśli znasz już jeden z tych programów, możesz tworzyć grafikę pikselową (przy wyłączonych wszystkich opcjach automatycznego wygładzania i wielu zaawansowanych funkcjach). Jeśli nie znasz jeszcze tych programów, spędzisz dużo czasu na ich nauce, nawet jeśli nie będziesz potrzebować wszystkich ich funkcjonalności, co będzie stratą czasu. Krótko mówiąc, jeśli używasz ich od dłuższego czasu, możesz tworzyć pixel art (ja osobiście używam Photoshopa z przyzwyczajenia), ale poza tym znacznie lepiej jest korzystać z programów specjalizujących się w pixel art. Tak, istnieją.

3. Krem

Istnieje o wiele więcej programów przeznaczonych do grafiki pikselowej, niż mogłoby się wydawać, ale tutaj rozważymy tylko najlepsze. Wszystkie mają bardzo podobne cechy (kontrola palet, powtarzające się podglądy kafelków, przezroczystość, warstwy itp.). Różnią się wygodą... i ceną.

Charamaker 1999 to dobry program, ale dystrybucja wydaje się być wstrzymana.

Graphics Gale jest znacznie przyjemniejszy i łatwiejszy w użyciu, a jego cena detaliczna wynosi około 20 dolarów, co nie jest takie złe. Dodam, że wersja próbna nie jest ograniczona czasowo i zawiera wystarczającą ilość zestawu, aby stworzyć całkiem niezłą grafikę. To po prostu nie działa z .gif, co nie stanowi takiego problemu, ponieważ .png i tak jest lepszy.

Oprogramowaniem częściej używanym przez artystów pikselowych jest ProMotion, który jest (oczywiście) wygodniejszy i szybszy niż Graphics Gale. O tak, jest kochana! Pełną wersję można kupić za niewielką kwotę… 50 euro (78 dolarów).
Nie zapominajmy o naszych przyjaciołach z Mac! Pixen to dobry program dostępny dla komputerów Macintosh i darmowy. Niestety nie mogę powiedzieć więcej, ponieważ nie mam komputera Mac. Uwaga tłumacza (z francuskiego): Użytkownicy Linuksa (i nie tylko) powinni wypróbować , a GrafX2. Zachęcam do wypróbowania ich wszystkich w wersjach demonstracyjnych i sprawdzenia, która będzie dla Ciebie najwygodniejsza. W końcu to kwestia gustu. Wiedz tylko, że gdy zaczniesz używać programu, bardzo trudno będzie przejść na inny.

Ciąg dalszy nastąpi…

Notatki tłumacza z francuskiego na angielski

To świetny poradnik na temat grafiki pikselowej, napisany przez Phila Razorbaka z LesForges.org. Wielkie dzięki dla Phila Razorbacka za umożliwienie OpenGameArt.org przetłumaczenia tych przewodników i opublikowania ich tutaj. (Od tłumacza na rosyjski: nie pytałam o pozwolenie, jeśli ktoś chce, to może pomóc, nie mam doświadczenia w porozumiewaniu się po angielsku, a tym bardziej po francusku).

Notatka tłumacza z języka angielskiego na język rosyjski

Jestem programistą, a nie artystą czy tłumaczem, tłumaczę dla moich znajomych artystów, ale cokolwiek dobrego się zmarnuje, niech zostanie tutaj.
Oryginał w języku francuskim znajduje się gdzieś tutaj www.lesforges.org
Tłumaczenie z francuskiego na angielski tutaj: opengameart.org/content/les-forges-pixel-art-course
Tłumaczyłem z angielskiego, bo nie znam francuskiego.
I tak, to moja pierwsza publikacja, więc sugestie dotyczące projektu są mile widziane. Dodatkowo ciekawi mnie pytanie: czy pozostałe części należy opublikować jako osobne artykuły, czy też lepiej jest zaktualizować i uzupełnić tę część?

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:

Postrzeganie. Pixel Art wygląda niesamowicie! Wiele można powiedzieć o każdym pojedynczym pikselu w duszku.
Nostalgia. Pixel Art przywraca nostalgiczne uczucie graczom, którzy dorastali grając na Nintendo, Super Nintendo lub Genesis (jak ja!).
Ł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 pikselowany 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óbnik 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 = YES; ; ) return 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!