Programy do tworzenia grafiki pikselowej. Wprowadzenie do sztuki pikselowej w grach Rysunki pikselowe ołówkiem

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

Przedmowa

Istnieje wiele definicji sztuki pikselowej, ale tutaj użyjemy tego: obraz sztuki pikselowej, jeśli jest w całości wykonany ręcznie i istnieje kontrola nad kolorem i położeniem każdego rysowanego piksela. Niewątpliwie w pixel art włączenie lub użycie pędzli lub narzędzi do rozmycia lub maszyn do degradacji (maszyny zdegradowane, nie jestem pewien) i inne opcje oprogramowania, które są „nowoczesne” nie są przez nas wykorzystywane (w rzeczywistości oddane do naszej dyspozycji oznaczają „do naszej dyspozycji utylizacja” , ale logicznie wydaje się to bardziej poprawne). Ogranicza się do narzędzi takich jak „ołówek” i „wypełnianie”.

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

Więc tutaj poznasz techniczną część sztuki pikselowej. Jednak nigdy nie uczynię cię artystą... z tego prostego powodu, że ja też nie jestem artystą. Nie nauczę was anatomii człowieka ani struktury sztuki, nie powiem zbyt wiele o perspektywie. W tym poradniku znajdziesz wiele informacji na temat technik pixel art. Ostatecznie będziesz musiał umieć tworzyć postacie i scenerię do swoich gier, o ile będziesz zwracać uwagę, regularnie ćwiczyć i stosować te wskazówki.

- Chcę również zaznaczyć, że tylko niektóre obrazy użyte w tym przewodniku są powiększone. W przypadku obrazów, które nie są powiększone, dobrze byłoby poświęcić trochę czasu na skopiowanie tych obrazów, aby móc je szczegółowo przestudiować. Pixel art to esencja pikseli, nie ma sensu badać ich z daleka.

Na koniec muszę podziękować wszystkim artystom, którzy dołączyli do mnie przy tworzeniu tego przewodnika w taki czy inny sposób: Shinowi za jego brudną robotę i grafikę liniową, Xenohydrogen za geniusz kolorów, Lunn za jego znajomość perspektywy oraz Pandzie, surowemu Ahruonowi, Dayo i Kryonowi za ich hojny wkład w zilustrowanie tych stron.

Wróćmy wię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 jest powód, aby to pomijać, prawda?) Jeśli jest takie powiedzenie, którego nie mogę znieść, to „nie ma złych narzędzi, tylko źli pracownicy”. Właściwie myślałem, że nic nie może być bardziej odległe od prawdy (chyba że „co cię nie zabije, to cię wzmocni”), a pixel art, bardzo dobry dowód. Ten przewodnik ma na celu zapoznanie Cię z różnymi programami używanymi do tworzenia grafiki pikselowej i pomoc w wyborze właściwego.

1. Niektóre stare rzeczy

Wybierając oprogramowanie do tworzenia pixel art, ludzie często myślą: „Wybór oprogramowania? To szaleństwo! Wszystko, czego potrzebujemy do stworzenia pixel art, to malowanie!(podobno gra słów, rysunek i program)” Tragiczny błąd: Mówiłem o kiepskich narzędziach, to jest pierwsze. Paint ma jedną zaletę (i tylko jedną): już ją masz, jeśli używasz systemu Windows. Z drugiej strony ma wiele niedociągnięć. To jest (niepełna) lista:

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

Krótko mówiąc, o Paint można zapomnieć. Teraz zobaczymy prawdziwe oprogramowanie.

2. W końcu...

Ludzie wtedy myślą: „Ok, Paint jest dla mnie zbyt ograniczony, więc użyję mojego przyjaciela Photoshopa (albo Gimp lub PaintShopPro, to to samo), który ma tysiące możliwości”. To może być dobre lub złe: jeśli znasz już jeden z tych programów, możesz wykonać grafikę pikselową (wyłączając wszystkie opcje automatycznego wygładzania i wyłączając wiele zaawansowanych funkcji). Jeśli nie znasz jeszcze tych programów, spędzisz dużo czasu na ich nauce, nawet jeśli nie potrzebujesz wszystkich ich funkcji, co byłoby stratą czasu. Krótko mówiąc, jeśli używasz ich od dłuższego czasu, możesz tworzyć pixel art (osobiście używam Photoshopa z przyzwyczajenia), ale poza tym znacznie lepiej korzystać z programów specjalizujących się w pixel art. Tak, istnieją.

3. Krem

Istnieje znacznie więcej programów do grafiki pikselowej, niż mogłoby się wydawać, ale tutaj rozważymy tylko najlepsze. Wszystkie mają bardzo podobne cechy (sterowanie paletą, podgląd powtarzających się kafelków, przezroczystość, warstwy itd.). Różnice, jakie mają w wygodzie ... i cenie.

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

Graphics Gale jest o wiele przyjemniejszy i łatwiejszy w użyciu, a jego cena wynosi około 20 USD, co nie jest takie złe. Dodam, że wersja próbna nie jest ograniczona czasowo i zawiera wystarczająco dużo zestawu, aby zrobić wystarczająco dobrą grafikę. Tylko, że to nie działa z .gif, co nie jest takim problemem, ponieważ .png i tak jest lepsze.

Oprogramowaniem najczęściej używanym przez artystów zajmujących się pikselami jest ProMotion, który jest (oczywiście) wygodniejszy i szybszy niż Graphics Gale. I tak, jest cenna! Pełną wersję można kupić za niewielką kwotę... 50 euro (78 USD).
Nie zapominajmy o naszych przyjaciołach z Maca! Pixen to dobry program dostępny dla komputerów Macintosh i jest darmowy. Niestety nie mogę powiedzieć więcej, bo nie mam Maca. Uwaga tłumacza (francuski): Użytkownicy Linuksa (i inni) powinni spróbować i GrafX2 . Zachęcam do wypróbowania ich wszystkich w wersjach demonstracyjnych i zobaczenia, która odpowiada Twojej wygodzie. W końcu to kwestia gustu. Pamiętaj tylko, że gdy zaczniesz korzystać z programu, przełączenie się na coś innego może być bardzo trudne.

Ciąg dalszy nastąpi…

Notatki tłumacza z francuskiego na angielski

To świetny przewodnik po pixel art napisany przez Phila Razorbacka z LesForges.org. Wielkie podziękowania dla Phila Razorbacka za umożliwienie OpenGameArt.org przetłumaczenia tych przewodników i opublikowania ich tutaj. (Od tłumacza na rosyjski: nie prosiłem o pozwolenie, jeśli ktoś ma ochotę, możesz pomóc, nie mam wystarczającego doświadczenia w komunikowaniu się po angielsku, a co dopiero po francusku).

Notatka tłumacza z angielskiego na rosyjski

Jestem programistą, nie artystą ani tłumaczem, tłumaczę dla moich znajomych artystów, ale co dobrego straconego, niech tu będzie.
Oryginał w języku francuskim 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 mój pierwszy post, więc sugestie projektowe są mile widziane. Dodatkowo pytanie brzmi, czy pozostałe części powinny być publikowane jako osobne artykuły, czy lepiej zaktualizować i uzupełnić ten?

4,7 (93,8%) 158 głosów

Rysunki według komórek lub sztuka pikselowa to bardzo popularna forma sztuki wśród uczniów i studentów. Na żmudnych wykładach rysowanie po komórce pozwala uniknąć nudy.Pierwotnym pierwowzorem rysowania po komórce było haftowanie krzyżykowe, gdzie wzór haftu nanoszony był na płótno, tkaninę oznaczoną komórkami. Wszyscy byliśmy kiedyś studentami i uczniami i znudziliśmy się rysowaniem różnych obrazów w celach, jakie było moje zdziwienie, gdy dowiedziałem się, że to właściwie sztuka z jej arcydziełami i geniuszami. Zacząłem bardziej szczegółowo badać ten problem i oto, co z tego wyszło...

Co rysować rysunki na komórkach

Ta sztuka jest dostępna dla każdego, najważniejsze jest wyraźne podążanie za komórkami. Zeszyty szkolne idealnie nadają się do rysowania obrazu, wielkość ich kwadratów to 5x5 mm, a sam zeszyt to 205 mm na 165 mm. W chwili obecnej popularność wśród artystów w komórkach zyskują notesy wiosenne z kartką A4, rozmiar tego notesu to 280mm na 205mm.

Profesjonalni artyści tworzą swoje arcydzieła na papierze milimetrowym (papierze rysunkowym), to jest miejsce do wędrowania. Jedyną wadą papieru milimetrowego jest jego jasnozielony kolor, który nie jest zauważalny podczas szkicowania kolorowymi pisakami.
Wybierając notes do rysowania, zwróć uwagę na gęstość papieru, od jego gęstości zależy jakość Twojego rysunku według komórek, czy prześwituje po niewłaściwej stronie kartki. Idealna gęstość arkusza to nie mniej niż 50g/m2.

Jak rysować rysunki według komórek

Do kolorowania rysunków według komórek nie są potrzebne żadne specjalne narzędzia, wystarczą wszelkie ołówki i długopisy. Obrazy monochromatyczne są bardzo fajne, ale naprawdę chcę dodać kolory do mojego życia. Aby kolory stały się różnorodne, idź do sklepu papierniczego i wybierz to, czego dusza zapragnie, długopisy żelowe, olejek, długopis.

Długopisy do pixel art

Markery do rysunków według komórek

Jeśli lubisz rysować flamastrami, masz rację, kolorystyka flamastrów jest bardzo bogata. Warto pamiętać, że flamastry dzielą się na dwie grupy: alkohol i woda, woda jest bezpieczniejsza, ale mogą zamoczyć papier. Alkohol może również nasiąkać papierem, a zapach jest również silny dla amatora.

Ołówki do rysunków według komórek

Ołówki, inny rodzaj urządzenia do szkicowania. Ołówki nie są wyjątkiem w różnorodności typów, są plastikowe, woskowe, drewniane i akwarelowe. Rysujemy drewnem od wczesnego dzieciństwa i wiemy, że często wybijają się na prowadzenie. Plastikowe i woskowe łamią się rzadziej, ale są grubsze, co będzie mniej wygodne w rysowaniu. O ołówkach akwarelowych nie może być mowy, ponieważ po malowaniu ołówkiem trzeba zakryć rysunek zwilżonym pędzlem, a to jest niedopuszczalne w przypadku kartek zeszytu.

Obejrzyj film o tym, jak łatwo jest rysować rysunki według komórek i jak piękne może to być w rezultacie:

Jeszcze kilka schematów rysowania, które mi się podobały:

Dot Graphics - technologia Pixel Art

Ustaliliśmy, jakie akcesoria są potrzebne, teraz zapoznajmy się z technologią. Technologia pixel art jest bardzo prosta, to grafika punktowa.

Zanim przejdziemy do rozważań na temat sposobów sztuki pikselowej, cofnijmy się do dzieciństwa lat 80. i 90. Oczywiście ci, którzy dorastali w epoce postsowieckiej, pamiętają 8-bitowe gry wideo, grafiki do gier, które są zbudowane na grafice pikselowej.

Najlepszym sposobem na opanowanie czegokolwiek jest praktyka, spróbujmy opanować grafikę pikselową:

Weźmy czarno-czerwony olejowy długopis i kartkę zeszytu w kratkę.

Zacznijmy od prostego rysunku. Policzmy komórki, określmy kontur i udekorujmy według kolorów.

Na przykład narysujmy serce:

Bierzemy liść w klatce i długopis z czarną pastą, wstawiamy 3 kropki, jak na rysunku, kropki zaznaczamy, które komórki zostaną zamalowane na czarno.
Rysujemy linie oznaczające kontury obrazu.
Zaznacz trzy punkty z każdej strony, patrz rysunek.
Zaznacz obszar figury dwiema liniami.
Umieśćmy jeszcze jeden punkt z każdej strony i narysujmy granice pod górnymi punktami.
Narysuj 8 punktów pionowo i 4 punkty po obu stronach, jak pokazano na poniższym rysunku.
Rysując pionowe linie, jak pokazano na rysunku, w pełni wskażemy granice figury.
W ten sam sposób zaznacz dolną część serca po lewej i prawej stronie.
Okrążamy komórki, jak na naszym obrazie.
Następną rzeczą, którą musimy zrobić, to pomalować wnętrze serca czerwonym długopisem, pozostawiając niezamalowane światło.
Na koniec zaciemnij komórki oznaczone kropkami czarnym długopisem. Teraz nauczyłeś się rysować 8-bitowe obrazy.

Jeśli wydaje Ci się, że duże i obszerne zdjęcia nie są dla Ciebie, powinieneś spróbować narysować zdjęcie z Internetu. Przestraszony? Nie jest tego warte.

Brać

czarny długopis,
ołówki,
notatnik w kratkę,
komputer,
zdjęcie lub obrazek z internetu
program Photoshop.

Aby zastosować rysunki trójwymiarowe, musimy policzyć liczbę komórek, które zostaną zamalowane. Trudno nie pomylić się przy dużych liczbach. Pamiętaj też, aby wybrać odcienie kolorów podobne do oryginalnego obrazu.
Więc zróbmy to:

Udzielę jednej rady, która bardzo mi pomoże, jeśli masz drukarkę kolorową, wydrukuj zdjęcie, jeśli nie, to nie jest straszne. Narysuj siatkę 10 komórek z grubszym konturem. Na wydrukowanym arkuszu za pomocą linijki i kontrastowego długopisu, jeśli nie ma gdzie drukować, możesz otworzyć obraz w programie Paint.
Kreatywny sukces dla Ciebie.

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

Przedmowa

Wróćmy więc do rzeczy.

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

1. Niektóre stare rzeczy

Krótko mówiąc, o Paint można zapomnieć. Teraz zobaczymy prawdziwe oprogramowanie.

2. W końcu...

3. Krem

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

Ciąg dalszy nastąpi…

Notatki tłumacza z francuskiego na angielski

Notatka tłumacza z angielskiego na rosyjski

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 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 Art, 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 więc, ż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 zwiększyć skalę, 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 32x32px nie tylko dlatego, że świetnie pasuje do wybranego rozmiaru ekranu, ale także dlatego, że 32x32px jest również wielokrotnością 2, co jest przydatne w przypadku zabawkowych silników (rozmiary kafelków są często wielokrotnościami 2, tekstury są wyrównane). itp.

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 odzież, 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.: czy 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!

Pixel Art (Pixel Art) - przetłumaczony z języka angielskiego jako pixel art. Piksel to najmniejszy element graficzny w obrazie cyfrowym.

Tak więc Pixel Art oznacza dosłownie sztukę malowania pikselami.

Dla jasności spójrzmy na ten przykład:

Owlboy (gra w pixel art)

Tak wyglądają gry pixel art.

Bardzo często takie grafiki są wykorzystywane w grach indie, ponieważ mają bardzo rozpoznawalny styl gry komputerowej.

Pixel Art to jednak nie tylko grafika, duszki i zdjęcia do gier, to cały kierunek sztuki cyfrowej i graficznej.

Piękne zdjęcia rysuje się za pomocą pixel art:

Nie pomylisz tej grafiki retro z niczym.

Niektóre obrazy w tym stylu są całkiem godne, aby umieścić je na pulpicie.

Są też bardzo fajni artyści, którzy pracują w tym stylu.

Spójrz na ten obrazek. Każdy piksel został tutaj narysowany osobno i ręcznie. To jak układanie mozaiki, tak jak kiedyś i robią teraz.

Powiększając ten obraz, możemy z bliska zobaczyć, jak wszystko jest zrobione:

Unikalny styl grafiki pikselowej polega na tym, że występują dość ostre przejścia kolorów i brak antyaliasingu. Weźmy na przykład inną pracę w grafice cyfrowej na dość przeciętnym poziomie, sprawdź tę rysunek dziewczyny w okularach(18+) na blogu www.econdude.pw.

Jest to rysunek za pomocą myszki komputerowej w programie SAI2.0.

Jeśli jednak zbliżysz to zdjęcie, możesz zobaczyć dithering:

Nie ma wyraźnych przejść kolorów i odcieni, ale w pixel art przejścia są wyraźne.

Na przykład zobacz, jak wykonać przejścia między kolorami w grafice pikselowej:

Jest to obraz przybliżony, jeśli spojrzysz na niego z daleka z wysoką rozdzielczością, przejście kolorów będzie dość płynne, ale tutaj widać wyrazistość i spójność stylu.

Oto kolejny przykład, jest to dość klasyczny rysunek w stylu picquel:

http://www.gamer.ru/everything/pixel-art-dlya-nachinayuschih

Po powiększeniu zdjęcia nie wyglądają zbyt ładnie, ale jeśli spojrzysz na grafikę pikselową z daleka, w wyższej rozdzielczości, może wyglądać cudownie.

Czy możesz sobie wyobrazić, jak świetną robotę wykonują ci artyści?

Czasami mówią, że Pixel Art jest robiony, ponieważ jest tańszy, mówią, że niezależni programiści po prostu nie mają zasobów, aby tworzyć nowoczesną grafikę 3D, więc używają najprostszej rzeczy, jaką mogą wymyślić, rysowania w podstawach edytory graficzne piksele.

Jednak każdy, kto kiedykolwiek narysował cokolwiek w stylu Pixel Art, powie, że jest to prawie najbardziej zasobożerny (przede wszystkim czasochłonny) styl graficzny.

Animacja w stylu Pixel Art i ogólnie piekielna robota.

http://www.dinofarmgames.com/a-pixel-artist-renounces-pixel-art/

Dlatego trzeba jeszcze udowodnić, że Pixel Art to „leniwy styl”, powiedziałbym nawet, że wręcz przeciwnie, nie jest to najbardziej NIELENISTY styl graficzny.

Jednak każdy może nauczyć się rysować coś prostego w stylu Pixel Art i nie potrzebujesz żadnych specjalnych programów, wystarczy prosty edytor graficzny.

Jeśli chcesz nauczyć się rysować w tym stylu, jak w każdym innym przypadku potrzebujesz dużo praktyki i możesz zacząć np. od artykułów na temat Habré: Kurs sztuki pikseli

Znajdziesz tam również podstawowe zasady sztuki pikselowej.

Oto jeden przykład, jak rysować grafikę pikselową (przyspieszone wideo - szybkie rysowanie) na poziomie początkującym, możesz nauczyć się rysować w ten sposób w zaledwie tydzień:

Pixelart:: rysunek statku kosmicznego

Czasami w tym stylu powstają absolutnie szalone rysunki, nie mogę nawet uwierzyć, że ktoś je narysował i chcę wiedzieć, ile czasu na to poświęcono. Przykład:

https://www.youtube.com/watch?v=vChMzRnw-Hc

Widzisz to zdjęcie Sarah Carrigan ze StarCrafta? Co to jest według Ciebie i jak to się robi?

Ten człowiek zbudowany z klocków w grze minecraftb, prace trwały 23 tygodnie.

W przybliżeniu widać, że to wszystko są osobne bloki.

Formalnie nie jest to już sztuka pikselowa, ale nawet „sztuka bloków Minecrafta”, ale esencja stylu pozostaje taka sama i jest to największy rysunek w pikselach i rekord świata, według autora.

W rzeczywistości, jeśli analizujesz jakieś zdjęcie lub obraz w przybliżeniu, oczywiste jest, że składa się ono również z pikseli, jak każdy obraz w ogóle. Ale cała różnica polega na tym, że grafikę pikselową tworzy się ręcznie dla każdego piksela.

Na inny przykład artyści i animatorzy Paul Robertson i Ivan Dixon stworzyli to:

PIKSELE SIMPSONÓW

Wydaje się, że to gigantyczna praca i nawet przy użyciu dodatkowych narzędzi (są filtry, które zamieniają zdjęcia w pixel art), zajęłoby to bardzo dużo czasu.

Osobiście uważam, że obrazy Pixel Art to prawdziwa sztuka współczesna w najlepszym tego słowa znaczeniu.

Każdy obraz Pixel Art ma bardzo wyraźną wartość i możesz to zobaczyć, poczuć to.

Może to docenić nawet osoba, która tego dobrze nie rozumie.

Jednak niestety ten gatunek sztuki nie jest zbyt popularny i jest obecnie uważany za przestarzały, a powrót do niego w ostatnich latach w postaci wielu gier ze steama w stylu pixel art również zaczyna irytować ludzi. Chociaż osobiście uważam, że ten retro styl grafiki jest już klasykiem, a prawdziwy klasyk nigdy nie umrze.