Najlepsza praca w pikselach. Pikselowa sztuka. Pikselowa sztuka. Grafika pikselowa. Podstawowe zasady sztuki pikselowej

Termin „grafika pikselowa” nie jest wszystkim znany, ani nie jest to undergroundowy slang. Co Wikipedia pomoże się dowiedzieć. Najważniejszą rzeczą do zrozumienia jest to, że Pikselowa sztuka zależy od sposobu, w jaki wzór został utworzony (piksel po pikselu), a nie na podstawie wyników. W związku z tym rysunki uzyskane za pomocą filtrów lub specjalnych rendererów również nie są w nim uwzględnione. W pierwszej części artykułu, a może nawet serii artykułów poświęconych tej sztuce, pokażę kilka prac, które mi się podobały.

Niesamowite ilustracje, świetne cieniowanie. (Sztuka pikselowa Polyfonkena).

Temat jest dość szeroki. Istnieją różne odmiany kości.

Ilustracje Roda Hunta są bardzo kolorowe i realistyczne. Artysta łączy grafikę wektorową ze sztuką pikselową.

Brazylijsko-niemieccy blogerzy Thiago, Pi, Jojo i Mariana prezentują się jako urocze, śmiejące się pikselowe postacie.

Ten obraz został namalowany przez Juana Manuela Daportę przy użyciu tylko MS Paint! Praca trwała 8 miesięcy. Imponujący.

Piksele żyją również poza ekranami komputerów. To niesamowite, jak dobrze rozumiane są fabuły pikselowanych zdjęć.

Kosmiczne wojny w stylu Super Robot Wars. W świecie sztuki pikselowej Roberson ma swój niepowtarzalny styl.

Miasto szalonych lalek. Ilustracja, choć narysowana w wektorze, nadal wygląda jak grafika pikselowa. Interesująca praca.

Ten kierunek sztuki pikselowej jest dla mnie szczególnie interesujący. Obrazy te nie są rysowane na ekranie, ale na płótnie farbami akrylowymi. To arcydzieło zostało wykonane przez Ashley Anderson.

Miasta pikseli to osobny duży temat. Zwykle jest wiele szczegółów i fabuł. Na tym zdjęciu nasyp i kolorowe balony oraz bar sushi, a nawet protestujący.

Pixel Art jest bardzo popularny w grach nawet w dzisiejszych czasach i jest ku temu kilka powodów!

Co więc urzeka Pixel Art:

Postrzeganie. Sztuka pikselowa wygląda niesamowicie! Wiele można powiedzieć o każdym pikselu w duszku.
Nostalgia. Pixel Art przywraca wspaniałe nostalgiczne uczucie dla graczy, którzy dorastali grając na Nintendo, Super Nintendo lub Genesis (tak jak ja!)
Łatwość nauki. Pixel art to jedna z najłatwiejszych do opanowania sztuk cyfrowych, zwłaszcza jeśli jesteś bardziej programistą niż artystą ;]

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

Do pomyślnej nauki potrzebny jest Adobe Photoshop. Jeśli go nie masz, możesz pobrać bezpłatną wersję próbną ze strony Adobe lub torrenta.

Co to jest sztuka pikselowa?

Zanim zaczniemy, wyjaśnijmy, czym jest Pixel Art, nie jest to tak oczywiste, jak mogłoby się wydawać. Najłatwiejszym sposobem zdefiniowania tego, czym jest Pixel Art, jest określenie, czym nim nie jest, a mianowicie: wszystkiego, w którym piksele są tworzone automatycznie. Oto kilka przykładów:

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

Narzędzie rozmycia: wykrywanie pikseli i ich replikacja/edycja w celu utworzenia nowej wersji poprzedniego obrazu. Znowu nie wykres pikselowy.

Narzędzie do wygładzania(głównie generowanie nowych pikseli w różnych kolorach, aby coś było „gładkie”). Musisz ich unikać!

Niektórzy powiedzą, że nawet kolory generowane automatycznie nie są Pixel Artem, ponieważ wymagają warstwy do efektów mieszania (mieszania pikseli między dwiema warstwami zgodnie z danym algorytmem). Ale ponieważ większość urządzeń obsługuje obecnie miliony kolorów, to stwierdzenie można zignorować. Jednak używanie niewielkiej liczby 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 krzywizny wypełnionych pikseli, narzędzia te są uważane za przyjazne dla Pixel Art.

Stwierdziliśmy zatem, że Pixel Art wymaga dużej uwagi podczas umieszczania każdego piksela w sprite, najczęściej ręcznie i przy ograniczonej palecie kolorów. Zabierzmy się teraz 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 go zmniejszyć, wszystko będzie wyglądać na rozmyte. Jeśli spróbujesz go przeskalować, wszystko będzie wyglądało akceptowalnie, o ile użyjesz skalowania, które jest wielokrotnością dwóch (ale oczywiście nie będzie jasności).

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

Na przykład, jeśli chcesz, aby Twoja gra wyglądała dwa razy lepiej na iPhonie 3GS („Tak, naprawdę chcę nadać mojej grze pikselowy wygląd retro!”), który ma rozdzielczość ekranu 480x320 pikseli, musisz pracować przy połowie rozdzielczości w tym przypadku będzie to 240x160 pikseli.

Otwórz nowy dokument programu Photoshop ( Plik → Nowy…) i ustaw rozmiar tak, aby odpowiadał rozmiarowi ekranu gry, a następnie wybierz rozmiar dla swojej postaci.

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

Wybrałem 32x32 piksele nie tylko dlatego, że świetnie pasuje do wybranego rozmiaru ekranu, ale także dlatego, że 32x32 piksele to również wielokrotność 2, co jest wygodne dla silników zabawkowych (rozmiary kafelków są często wielokrotnością 2, tekstury są wyrównane wielokrotnością 2 itd.

Nawet jeśli silnik, którego używasz, obsługuje dowolny rozmiar obrazu, zawsze możesz spróbować pracować z parzystą liczbą pikseli. W takim przypadku, jeśli obraz wymaga skalowania, rozmiar zostanie lepiej podzielony, co zapewni lepszą wydajność.

Jak narysować postać w pikselach

Pixel Art jest znany z wyraźnej i łatwej do odczytania grafiki: możesz zdefiniować rysy twarzy, oczy, włosy, części ciała za pomocą zaledwie kilku kropek. Jednak rozmiar obrazu komplikuje zadanie: im mniejsza postać, tym trudniej ją narysować. Aby podejść do zadania bardziej praktycznie, wybierz najmniejsze cechy 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ędzla(Narzędzie Pędzel) i natychmiast go zobaczysz (powinno być drugie na liście). Musisz tylko zmienić jego rozmiar na 1px (możesz kliknąć na pasku opcji narzędzia i zmienić jego rozmiar lub po prostu przytrzymać klawisz [ ).

Również będziesz potrzebować Narzędzie do usuwania(Eraser Tool), kliknij go (lub naciśnij klawisz E) i zmień jego ustawienia, wybierając z listy rozwijanej Tryb:(Tryb:) Ołówek(Ołówek) (ponieważ w tym trybie nie ma ditheringu).

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

ej! Jestem pikselowany!!

Możesz już zacząć od Lineart (gdzie rysowanie odbywa się za pomocą linii), ale bardziej praktycznym sposobem jest narysowanie sylwetki postaci. Dobrą wiadomością jest to, że na tym etapie nie musisz być zawodowcem, po prostu spróbuj wyobrazić sobie wymiary części ciała (głowa, ciało, ramiona, nogi) i pozę wyjściową postaci. Spróbuj zrobić coś takiego na szaro:

Na tym etapie nie musisz być profesjonalistą

Zauważ, że zostawiłem też trochę pustego miejsca. Tak naprawdę nie musisz wypełniać całego płótna, zostaw miejsce na przyszłe kadry. W takim przypadku bardzo przydatne będzie zachowanie dla wszystkich tego samego rozmiaru płótna.

Po ukończeniu sylwetki nadszedł czas, aby . Teraz musisz bardziej uważać na rozmieszczenie pikseli, więc na razie nie martw się o ubrania, zbroję itp. Aby być po bezpiecznej stronie, możesz dodać nową warstwę, aby nigdy nie stracić oryginalnej sylwetki.

Jeśli uważasz, że narzędzie Ołówek jest zbyt wolne do rysowania, zawsze możesz użyć (Narzędzie Linia), pamiętaj tylko, że nie będziesz w stanie ustawić pikseli tak dokładnie, jak za pomocą ołówka. Będziesz musiał skonfigurować jak poniżej:

Wybierz naciskając i przytrzymując Narzędzie Prostokąt(Narzędzie Prostokąt)

Przejdź do panelu opcji narzędzia na liście rozwijanej Wybierz tryb narzędzia(Tryb rysowania konturów) wybierz Piksel , zmień Waga(Szerokość) o 1px (jeśli jeszcze nie zostało zrobione) i odznacz Antyalias(Wygładzanie). Oto jak powinieneś być:

Zwróć uwagę, że nie wykonałem dolnego zarysu stóp. Jest to opcjonalne, ponieważ stopy nie są tak ważną częścią nóg, aby je wyróżniały, a na płótnie zapisujesz jedną linię pikseli.

Stosowanie kolorów i cieni

Teraz jesteś gotowy, aby zacząć kolorować naszą postać. Nie martw się o wybór odpowiednich kolorów, będą one później bardzo łatwe do zmiany, po prostu upewnij się, że każdy ma „swój własny kolor”. Użyj domyślnych kolorów na karcie Próbki(Okno → Próbki).

Pokoloruj swoją postać, jak pokazano poniżej (ale nie krępuj się i używaj własnych kolorów!)

Dobry, kontrastowy kolor poprawia czytelność Twojego atutu!

Zwróć uwagę, że nadal nie wykonałem żadnych konturów ubrań ani włosów. Zawsze pamiętaj: zapisz jak najwięcej pikseli z niepotrzebnych konturów!

Nie trać czasu na malowanie każdego piksela. Aby przyspieszyć, 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, to też trzeba będzie skonfigurować. Wybierz Narzędzie Wiadro farby na pasku narzędzi (lub po prostu naciśnij klawisz G) i zmień tolerancja(Tolerancja) na 0 i odznacz Antyalias(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 antyaliasingu.

Kolejnym krokiem, który będzie wymagał od Ciebie pewnej wiedzy, jest rozjaśnianie i cieniowanie. Jeśli nie masz wiedzy, jak pokazać jasne i ciemne strony, to poniżej dam ci małą instrukcję. Jeśli nie masz czasu lub ochoty, aby się tego nauczyć, możesz pominąć ten krok i przejść do sekcji Spice Up Your Palette, ponieważ w końcu możesz po prostu sprawić, by cieniowanie wyglądało jak mój przykład!

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

Postaraj się nadać kontury tak, jak chcesz/możesz, ponieważ po tym zasób zaczyna wyglądać ciekawiej. Na przykład teraz możesz zobaczyć nos, skrzywione oczy, czuprynę włosów, fałdy w spodniach itp. Możesz też dodać na nim kilka jasnych plam, będzie wyglądał jeszcze lepiej:

Używaj tego samego źródła światła podczas cieniowania

A teraz, tak jak obiecałem, mały przewodnik po świetle i cieniach:

Urozmaicić swoją paletę

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

Photoshop ma duży wybór kolorów w standardowej palecie, ale nie polegaj na nim zbytnio. Najlepiej tworzyć własne kolory, klikając główną paletę na dole paska narzędzi.

Następnie w oknie Color Picker przejrzyj prawy pasek boczny, aby wybrać kolor, a główny obszar, aby wybrać żądaną jasność (jaśniejszy lub ciemniejszy) i nasycenie (bardziej soczysty lub ciemniejszy).

Po znalezieniu właściwego kliknij OK i zmienić konfigurację narzędzia Wiadro z farbą. Nie martw się, możesz po prostu odznaczyć pole wyboru „Sąsiadujące”, a kiedy malujesz nowym kolorem, wszystkie nowe piksele z tym samym kolorem tła również zostaną zamalowane.

To kolejny powód, dla którego ważne jest, aby pracować z niewielką liczbą kolorów i zawsze używać tego samego koloru dla tego samego elementu (koszula, włosy, hełm, zbroja itp.). Ale nie zapomnij użyć innych kolorów dla innych obszarów, w przeciwnym razie nasz rysunek będzie zbyt przebarwiony!

Usuń zaznaczenie opcji „Sąsiadujące”, 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, tylko upewnij się, że dobrze komponują się z tłem.

Na koniec wykonaj test koloru tła: utwórz nową warstwę pod postacią i wypełnij ją różnymi kolorami. Jest to konieczne, aby Twoja postać była widoczna na jasnym, ciemnym, ciepłym i zimnym tle.

Jak widać, wyłączyłem wygładzanie krawędzi we wszystkich narzędziach, z których do tej pory korzystałem. Nie zapomnij zrobić tego również w innych narzędziach, na przykład Namiot eliptyczny(Owalny obszar wyboru) 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 klawisz M), aby zaznaczyć obszar, kliknij prawym przyciskiem myszy i wybierz Swobodna transformacja(Swobodne przekształcenie) lub po prostu naciśnij Ctrl + T . Aby zmienić rozmiar zaznaczonego obszaru, przeciągnij jeden z uchwytów znajdujących się wzdłuż obwodu ramki transformacji. Aby zmienić rozmiar zaznaczenia z zachowaniem proporcji, przytrzymaj klawisz Shift i przeciągnij jeden z uchwytów narożnych.

Jednak Photoshop automatycznie wygładza wszystko, co jest edytowane za pomocą Swobodna transformacja więc przed edycją przejdź do Edycja → Preferencje → Ogólne(Ctrl + K) i zmień interpolacja obrazu(Interpolacja obrazu) wł. Najbliższa okolica(Najbliższy sąsiad). Krótko mówiąc, w Najbliższa okolica nowa pozycja i rozmiar są obliczane z grubsza, nie są stosowane żadne nowe kolory ani przezroczystości, a wybrane kolory są zachowywane.

Integracja rysunku 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 Cocos2d. Dlaczego rozważam tylko iPhone'a? Bo dzięki serii artykułów o Unity (np.: lub Gra w stylu Jetpack Joyride w Unity 2D) wiesz już, jak z nimi pracować w Unity, a z artykułów o Crafty (Gry przeglądarkowe: Snake) i Impact (Wprowadzenie do tworzenia gier przeglądarkowych na platformie Impact) nauczyłeś się, jak umieszczać je na płótnie i tworzyć gry przeglądarkowe.

Jeśli jesteś nowy w Cocos2D lub ogólnie w programowaniu iPhone'a, sugeruję, abyś zaczął 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, nazwij go PixelArt i wybierz iPhone'a jako urządzenie. 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 prawo. Skompiluj, uruchom, a na ekranie zobaczysz swojego duszka:

Pamiętaj jednak, jak omówiliśmy wcześniej w tym samouczku, chcieliśmy sztucznie skalować piksele, aby każdy piksel wyraźnie różnił się od pozostałych. Dodaj więc tę nową linię w metodzie inicjalizacji:

Skala bohaterów = 2,0;

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

Dzieje się tak, ponieważ Cocos2d domyślnie spłaszcza rysunek podczas jego skalowania. Nie potrzebujemy tego, więc dodaj następującą linię:

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

Zwróć uwagę na korzyści płynące z używania grafiki Pixel Art - możemy użyć mniejszego obrazu niż ten, który jest wyświetlany na ekranie, oszczędzając dużo pamięci tekstur. Nie musimy nawet tworzyć osobnych obrazów dla wyświetlaczy siatkówki!

A co dalej?

Mam nadzieję, że podobał Ci się ten samouczek i nauczyłeś się trochę więcej o sztuce pikselowej! Przed rozstaniem chcę ci udzielić kilku rad:

Zawsze staraj się unikać wygładzania, gradientów lub zbyt wielu kolorów w zasobach. To dla twojego własnego dobra, zwłaszcza jeśli jesteś jeszcze początkującym.
Jeśli NAPRAWDĘ chcesz naśladować styl retro, sprawdź sztukę w 8-bitowych lub 16-bitowych grach konsolowych.
Niektóre style nie wykorzystują ciemnych konturów, inne nie uwzględniają wpływu światła lub cienia. Wszystko zależy od stylu! W naszej lekcji nie rysowaliśmy cieni, ale to nie znaczy, że nie powinieneś ich używać.

Dla początkującego Pixel Art wydaje się być najłatwiejszą do opanowania grafiką, ale w rzeczywistości nie jest tak prosta, jak się wydaje. Najlepszym sposobem na poprawę swoich umiejętności jest praktyka, praktyka, praktyka. Gorąco polecam publikowanie swoich prac na forach Pixel Art, aby inni artyści udzielili Ci porady - to świetny sposób na poprawę swojej techniki! Zacznij od małych rzeczy, ćwicz ciężko, zbieraj informacje zwrotne i możesz stworzyć niesamowitą grę, która przyniesie Ci dużo pieniędzy i radości!

W dzisiejszych czasach programy takie jak Photoshop, Illustrator, Corel ułatwiają pracę projektantowi i ilustratorowi. Z ich pomocą można w pełni pracować bez rozpraszania się rozmieszczeniem pikseli, jak miało to miejsce pod koniec ubiegłego wieku. Wszystkie niezbędne obliczenia wykonuje oprogramowanie - edytory graficzne. Ale są ludzie, którzy pracują w innym kierunku, nie tylko innym, ale wręcz przeciwnie. Mianowicie zajmują się tym samym oldschoolowym układaniem pikseli, aby uzyskać niepowtarzalny efekt i atmosferę w swojej pracy.

Przykład sztuki pikselowej. Fragment.

W tym artykule chcielibyśmy porozmawiać o osobach zajmujących się pixel art. Przyjrzyj się bliżej ich najlepszym pracom, które już ze względu na złożoność realizacji można bez przesady nazwać dziełami sztuki współczesnej. Dzieła, które oglądane zapierają dech w piersiach.

Pikselowa sztuka. Najlepsze prace i ilustratorzy

Miasto. Autor: Zoggles

Bajkowy zamek. Autor: Tinuleaf

średniowieczna wioska. Autor: docdoom

Wiszące ogrody Babilonu. Autor: Zaćmienie Księżyca

Dzielnica mieszkaniowa. Autor:

Pikselowa sztuka(pisane bez myślnika) lub Pikselowa sztuka- kierunek sztuki cyfrowej, polegający na tworzeniu obrazów na poziomie pikseli (tj. minimalnej jednostki logicznej, z której składa się obraz). Nie wszystkie obrazy rastrowe są sztuką pikselową, chociaż wszystkie składają się z pikseli. Czemu? Bo ostatecznie pojęcie pixel art obejmuje nie tyle wynik, co proces tworzenia ilustracji. Piksel po pikselu i to wszystko. Jeśli robisz zdjęcie cyfrowe, mocno je zmniejsz (tak, aby piksele stały się widoczne) i twierdzisz, że narysowałeś je od podstaw - będzie to prawdziwe fałszerstwo. Chociaż na pewno znajdą się naiwni prostaczkowie, którzy będą cię chwalić za ciężką pracę.

Teraz nie wiadomo dokładnie, kiedy powstała ta technika, korzenie giną gdzieś na początku lat 70-tych. Jednak technika komponowania obrazów z małych elementów sięga znacznie bardziej starożytnych form sztuki, takich jak mozaiki, haft krzyżykowy, tkanie dywanów i koralików. Sama fraza „pixel art” jako definicja sztuki pikselowej została po raz pierwszy użyta w artykule Adele Goldberg i Roberta Flegala w czasopiśmie Communications of the ACM (grudzień 1982).

Pixel art znalazł najszersze zastosowanie w grach komputerowych, co nie jest zaskakujące – umożliwił tworzenie niewymagających zasobów obrazów, a jednocześnie wyglądających naprawdę pięknie (przy czym zabiera im dużo czasu od artysty i wymagają pewnych umiejętności, a więc implikują dobrą płacę) . Rozkwit, najwyższy punkt rozwoju, oficjalnie nazywa się grami wideo na konsole 2. i 3. generacji (początek lat 90.). Dalszy postęp w technologii, pojawienie się najpierw 8-bitowego koloru, a potem True Color, rozwój grafiki trójwymiarowej – wszystko to w końcu zepchnęło pixel art na drugi plan i trzecie plany, a potem całkowicie zaczął się wydawać, że pixel art dobiegł końca.

O dziwo, ale to właśnie postęp naukowy i technologiczny zepchnął grafikę pikselową na ostatnie pozycje w połowie lat 90., a później przywrócił ją do gry – odsłaniając przed światem urządzenia mobilne w postaci telefonów komórkowych i PDA. W końcu, bez względu na to, jak przydatne jest nowomodne urządzenie, wszyscy wiemy, że jeśli nie możesz przynajmniej grać na nim w pasjansa, jest ono bezwartościowe. Otóż tam, gdzie jest ekran o niskiej rozdzielczości, jest pixel art. Jak mówią, witaj z powrotem.

Oczywiście różne elementy retrogradacyjne odegrały swoją rolę w powrocie grafiki pikselowej, która uwielbia nostalgię za starymi, dobrymi grami z dzieciństwa, mówiąc: „Och, teraz tego nie robią”; esteci, którzy potrafią docenić piękno pixel art, oraz niezależni deweloperzy, którzy nie dostrzegają współczesnych piękności graficznych (a czasami, choć rzadko, po prostu nie wiedzą, jak je wdrożyć we własnych projektach), dlatego rzeźbią pixel art . Ale nadal nie dyskontujmy projektów czysto komercyjnych - aplikacji na urządzenia mobilne, reklamy i projektowanie stron internetowych.Tak więc teraz pixel art, jak mówią, jest szeroko rozpowszechniony w wąskich kręgach i zasłużył sobie na swoisty status sztuki „nie dla wszystkich” . I to pomimo tego, że dla prostego laika jest to niezwykle przystępne, bo do pracy w tej technice wystarczy mieć pod ręką komputer i prosty edytor graficzny! (nawiasem mówiąc, umiejętność rysowania również nie boli) Dość słów, do rzeczy!

2. Narzędzia.

Czego potrzebujesz, aby stworzyć grafikę pikselową? Jak wspomniałem powyżej, wystarczy komputer i dowolny edytor graficzny zdolny do pracy na poziomie pikseli. Możesz rysować w dowolnym miejscu, nawet na Game Boyu, nawet na Nintendo DS, nawet w Microsoft Paint (inna sprawa, że rysowanie w tym ostatnim jest wyjątkowo niewygodne). Edytorów rastrowych jest bardzo dużo, wiele z nich jest na tyle darmowych i funkcjonalnych, że każdy może samodzielnie decydować o oprogramowaniu.

Rysuję w Adobe Photoshop, ponieważ jest to wygodne i ponieważ minęło dużo czasu. Nie będę kłamać i mówić mamrocząc sztucznymi zębami, że „Pamiętam, że Photoshop był wciąż bardzo mały, był na Macintoshu i miał numer 1.0”. Tak nie było. Ale pamiętam Photoshopa 4.0 (a także na Macu). I tak dla mnie kwestia wyboru nigdy nie stała. A zatem nie, nie, ale dam rekomendacje dotyczące Photoshopa, zwłaszcza gdy jego możliwości pomogą znacznie uprościć kreatywność.

Potrzebujesz więc dowolnego edytora graficznego, który pozwala rysować narzędziem w jednym kwadratowym pikselu (piksele mogą być też niekwadratowe, np. okrągłe, ale nas w tej chwili nie interesują). Jeśli twój edytor obsługuje dowolny zestaw kolorów, świetnie. Jeśli pozwala również na zapisywanie plików – po prostu świetnie. Byłoby miło wiedzieć, jak pracować z warstwami, ponieważ podczas pracy nad dość złożonym obrazem wygodniej jest rozłożyć jego elementy na różne warstwy, ale w zasadzie jest to kwestia przyzwyczajenia i wygody.

Mamy zacząć? Prawdopodobnie czekasz na listę tajnych sztuczek, rekomendacji, które nauczą Cię rysować grafikę pikselową? A prawda jest taka, że jest tego niewiele. Jedynym sposobem, aby nauczyć się rysować grafikę pikselową, jest rysowanie siebie, próbowanie, próbowanie, nie bój się i eksperymentuj. Zapraszam do kopiowania cudzych prac, nie bój się wydawać się nieoryginalnym (tylko nie podawaj cudzej pracy jako własnej, hehe). Ostrożnie i wnikliwie analizuj pracę mistrzów (nie moich) i rysuj, rysuj, rysuj. Kilka przydatnych linków czeka na Ciebie na końcu artykułu.

3. Zasady ogólne.

Jest jednak kilka ogólnych zasad, które warto poznać. Jest ich naprawdę niewiele, nazywam je „zasadami”, a nie prawami, bo mają raczej charakter doradczy. W końcu, jeśli uda Ci się narysować genialną grafikę pikselową z pominięciem wszystkich zasad - 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. Rozszyfruję: wszystko, co rysujesz, składa się z pikseli, a piksel powinien być odczytywany we wszystkim. Nie oznacza to, że w obrazie nie może być w ogóle elementów, na przykład 2x2 piksele, czy 3x3. Ale nadal lepiej jest budować obraz z pojedynczych pikseli.

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

W żadnym wypadku nie mówię, że to jest złe. Ale nadal nie jest zbyt ładna. Aby było pięknie, pamiętaj o jeszcze jednej zasadzie: rysuj bez załamań, zaokrąglaj gładko. Istnieje coś takiego jak załamania - fragmenty, które są niesprawne, nadają liniom nierówny, poszarpany wygląd (w anglojęzycznym środowisku artystów pikselowych nazywa się je jaggies):

Załamania pozbawiają rysunek naturalnej gładkości i piękna. A jeśli fragmenty 3, 4 i 5 są oczywiste i łatwe do skorygowania, sytuacja jest bardziej skomplikowana w przypadku innych - długość pojedynczego kawałka w łańcuchu jest tam zerwana, wydawałoby się to drobiazgą, ale zauważalną drobnostką. Trzeba trochę praktyki, aby nauczyć się widzieć i unikać takich miejsc. Załamanie 1 jest wybijane z linii, ponieważ jest pojedynczym pikselem - podczas gdy w obszarze, w którym jest zaklinowany, linia składa się z segmentów po 2 piksele. Aby się go pozbyć, złagodziłem wejście krzywej w zagięcie, wydłużając górny segment do 3px i przerysowując całą linię w segmentach 2px. Przerwy 2 i 6 są identyczne - są to już fragmenty o długości 2 pikseli w obszarach zbudowanych z pojedynczych pikseli.

Podstawowy zestaw przykładów ukośnych linii, które można znaleźć w prawie każdym podręczniku pixel art (moja nie jest wyjątkiem), pomoże uniknąć takich przerw podczas rysowania:

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

Łatwe, prawda? To po prostu wymaga nawyku. Wiedza o tym, jak rysować ukośne linie w odstępach co 2 piksele, pomoże w izometrii, więc następnym razem przyjrzymy się temu bliżej. Ogólnie linie proste są świetne - ale tylko do momentu, gdy pojawi się zadanie narysowania czegoś cudownego. Tutaj potrzebujemy krzywych i wielu różnych krzywych. Przyjmujemy prostą zasadę zaokrąglania linii krzywych: długość elementów krzywych powinna się stopniowo zmniejszać/zwiększać.

Wyjście z linii prostej do zaokrąglenia przebiega płynnie, wskazałem długość każdego segmentu: 5 pikseli, 3, 2, 2, 1, 1, znowu 2 (już w pionie), 3, 5 i dalej. Niekoniecznie Twój przypadek będzie używał tej samej sekwencji, wszystko zależy od wymaganej gładkości. Kolejny przykład zaokrąglania:

Ponownie unikamy załamań, które tak bardzo psują obraz. Jeśli chcesz sprawdzić poznany materiał, tutaj mam skórkę do Winampa narysowaną przez nieznanego autora, puste miejsce:

Na zdjęciu są poważne błędy, a po prostu nieudane zaokrąglenia i znalezione załamania - spróbuj poprawić obraz na podstawie tego, co już wiesz. To wszystko dla mnie z liniami, proponuję trochę narysować. I nie daj się zwieść prostocie przykładów, rysowania możesz nauczyć się tylko rysując - nawet tak proste rzeczy.

4.1. Narysujemy butelkę z żywą wodą.

1. Kształt obiektu, podczas gdy nie możesz użyć koloru.

2. Czerwony płyn.

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

4. Dodaj białe światła na bańce i ciemnoczerwony cień o szerokości 1 piksela na płynnych obszarach graniczących ze ścianami bańki. Wygląda dobrze, prawda?

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

4.2. Rysujemy arbuza.

Narysujmy okrąg i półkole - będą to arbuz i wycięty kawałek.

2. Zaznaczmy wycięcie na samym arbuzie, a na plastrze - granicę między skórką a miazgą.

3. Wypełnij. Kolory z palety, średni odcień zieleni to kolor skórki, średni czerwień to kolor miazgi.

4. Oznacz obszar przejściowy od skórki do miazgi.

5. Jasne paski na arbuzie (w końcu wygląda jak on). I oczywiście nasiona! Jeśli skrzyżowasz arbuza z karaluchami, rozprzestrzenią się.

6. Przywodzimy na myśl. Używamy bladoróżowego koloru, aby wskazać światła nad nasionami w sekcji, a układając piksele we wzór szachownicy, uzyskujemy pewną objętość z wyciętego plasterka (metoda nazywa się ditheringiem, o czym później). Używamy ciemnoczerwonego odcienia, aby wskazać zacienione miejsca w sekcji arbuza i ciemnozielonego (ponownie piksele szachownicy), aby nadać objętość samemu arbuzowi.

5. Roztrząsanie.

Dithering lub mieszanie to technika mieszania pikseli w wyraźnie uporządkowany (nie zawsze) wzór w dwóch sąsiadujących obszarach o różnych kolorach. Najprostszym, najczęstszym i najskuteczniejszym sposobem jest zamiana pikseli we wzór szachownicy:

Odbiór zrodził się z powodu (a raczej wbrew) ograniczeń technicznych - na platformach z ograniczonymi paletami, dithering umożliwił, poprzez zmieszanie pikseli dwóch różnych kolorów, uzyskanie trzeciego, którego nie było w palecie:

Teraz, w erze nieograniczonych możliwości technicznych, wielu twierdzi, że potrzeba ditheringu zniknęła sama. Jednak właściwe jej wykorzystanie może nadać Twojej pracy charakterystyczny styl retro, który rozpoznają wszyscy fani starych gier wideo. Osobiście lubię używać ditheringu. Nie znam tego zbyt dobrze, ale kocham to.

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 same warcaby). Więcej jest możliwe. Lepiej nie robić mniej.

Poniżej znajduje się przykład złego ditheringu. Pomimo tego, że taką technikę często można zaobserwować na duszkach z gier wideo, trzeba mieć świadomość, że ekran telewizora znacząco wygładził obraz, a takiego grzebienia, a nawet w ruchu, nie utrwaliło oko:

Cóż, dość teorii. Proponuję trochę więcej poćwiczyć.

Pixel art można narysować w dowolnym programie do grafiki rastrowej, jest to kwestia osobistych preferencji i doświadczenia (oraz możliwości finansowych oczywiście). Ktoś używa najprostszego Painta, ja to robię w Photoshopie – bo po pierwsze długo w nim pracuję, a po drugie jest mi tam wygodniej. Jakoś postanowiłem wypróbować darmowy Paint.NET, nie podobało mi się to - to jak z samochodem, który rozpoznaje zagraniczny samochód z automatyczną skrzynią biegów w Zaporożu raczej nie usiądzie. Mój pracodawca dostarcza mi licencjonowane oprogramowanie, więc mam czyste sumienie przed Adobe Corporation… Chociaż ceny za ich programy są nie do pomyślenia i płoną za to w piekle.

1. Przygotowanie do pracy.

Utwórz nowy dokument z dowolnymi ustawieniami (niech będzie miał 60 pikseli szerokości, 100 pikseli wysokości). Głównym narzędziem artysty pikselowego jest ołówek ( Narzędzie Ołówek, wywoływany klawiszem skrótu B). Jeśli pasek narzędzi ma włączony pędzel (i ikonę przedstawiającą pędzel), najedź na niego kursorem, naciśnij i przytrzymaj LPM- pojawi się małe rozwijane menu, w którym należy wybrać ołówek. Ustaw rozmiar pióra na 1 piksel (w górnym panelu po lewej stronie rozwijane menu Szczotka):