Jeśli jako dziecko uwielbiałeś bawić się klockami Lego (lub bawisz się nimi nawet jako dorosły), prawdopodobnie zainteresuje Cię izometryczna grafika pikselowa. Może mieć charakter techniczny i bardziej przypominać naukę niż ilustrację. Ale w takiej sztuce nie ma perspektywy 3D; można przesuwać elementy środowisko z maksymalną prostotą.

Stworzymy postać jako logiczny punkt wyjścia dla grafiki pikselowej, ponieważ pomoże to określić proporcje większości innych przedmiotów, które możemy stworzyć. Najpierw jednak trzeba poznać podstawy izometrycznej grafiki pikselowej, a następnie przystąpić do tworzenia postaci; jeśli nie chcesz uczyć się podstaw i rysować sześcianu, przejdź do kroku 3. Teraz zaczynajmy.

1. Linie pikseli

Te linie są podstawą najpopularniejszego (i interesującego) stylu izometrycznej grafiki pikselowej, stylu, którego będziemy używać w tym samouczku:

Reprezentują dwa piksele na każdy piksel w dół. Linie te wyglądają stosunkowo miękko i są używane do powierzchni kwadratowych:

Najczęściej używane struktury linii (jak ta poniżej) będą działać dobrze, ale rysunek będzie stawał się bardziej kanciasty i bardziej szorstki z każdym większym przyrostem:

Dla kontrastu, oto kilka linii o nierównomiernej strukturze:

Bardzo kanciaste i nie patrz

Piękny. Unikaj ich używania.

2. Tomy

Nasza postać nie będzie dokładnie przestrzegać praw izometrii, więc najpierw utwórzmy prostą kostkę, aby ustalić proporcje.

Utwórz nowy dokument w Photoshopie z rozdzielczością 400 x 400 pikseli.

Lubię otwierać dodatkowe okno dla tego samego pliku za pomocą menu Okno > Ułóż > Nowe okno/lekcje.(Okno > Ułóż > Nowe okno…). Pozwala to na pracę w powiększeniu 600% monitoruj wyniki w oknie powiększenia 100% . Korzystanie z siatki zależy od Ciebie, ale czasami uważam, że jest bardziej uciążliwa niż pomocna.

Powiększmy dokument i utwórzmy jedną z linii 2:1

Wolę używać 5% szary kolor zamiast czarnego, dzięki czemu można następnie dodawać cienie (czarne i o niskim stopniu krycia) i móc wybierać każdy kolor z osobna za pomocą magicznej różdżki.

Istnieje kilka sposobów rysowania linii:

1. Używanie Narzędzie Linia(Narzędzie Linia) z trybem Piksele(Piksele), niezaznaczone Wygładzanie(Antyalias) i grubość 1 px. Podczas rysowania powinna pojawić się podpowiedź dotycząca kąta 26,6°. W rzeczywistości narzędzia Linia nie można nazwać wygodnym; proste linie, jeśli kąt nie jest dokładny.

2. Musisz utworzyć selekcję 20 x 40 pikseli, a następnie wybierz K ołówek(Narzędzie Ołówek) grubość 1 px i narysuj kropkę w lewym dolnym rogu zaznaczenia, a następnie przytrzymaj klawisz Zmiana kliknij w prawym górnym rogu. Photoshop utworzy automatycznie Nowa linia pomiędzy dwoma punktami. Jeśli ćwiczysz, możesz tworzyć linie proste bez podkreślania w ten sposób.

3. Musisz narysować ołówkiem dwa piksele, zaznaczyć je i kliknąć Ctrl+Alt, a następnie przeciągnij zaznaczenie w nowe miejsce, tak aby piksele spotkały się w rogach. Możesz także przesuwać zaznaczenie, używając klawiszy strzałek na klawiaturze, przytrzymując klawisz Alt. Ta metoda nazywa się Przesunięcie alternatywne(Przesunięcie Alt).

Dlatego stworzyliśmy pierwszą linię. Zaznacz go i przesuń jak w kroku 3 lub po prostu skopiuj i wklej, przesuwając nową warstwę w dół. Następnie przerzuć drugą linię poziomo przez menu Edycja > Przekształć > Odwróć w poziomie(Edycja > Przekształć > Odwróć w poziomie). Korzystam z tej funkcji tak często, że nawet stworzyłem dla niej skrót klawiaturowy!

Teraz połączmy nasze linie:

Następnie ponownie użyj Alt-Offset, odwróć kopię w pionie i połącz dwie połówki, aby ukończyć naszą powierzchnię:

Czas dodać „trzeci wymiar”. Alt-odsuń kwadratową powierzchnię i przesuń ją do 44 piks w dół:

Wskazówka: Jeśli podczas ruchu przytrzymasz klawisze strzałek Zmiana, zaznaczenie zostanie przeniesione do 10 pikseli zamiast jednego.

Aby uzyskać ładniejszy sześcian, zmiękczmy rogi, usuwając z kwadratów piksele skrajnie lewe i prawe. Następnie dodaj pionowe linie:

Teraz usuń niepotrzebne linie na dole sześcianu. Aby przystąpić do kolorowania naszej sylwetki należy wybrać dowolny kolor (najlepiej jasny odcień) i wypełnić nim górny kwadrat.

Teraz zwiększ jasność wybranego koloru o 10% (Polecam użycie suwaków HSB na panelu sterowania) do pomalowania jaśniejszych narożników wzdłuż przodu naszego kolorowego kwadratu. Ponieważ nieco przycięliśmy sześcian, te jasne linie będą wyglądać ładniej, siedząc nad czarnymi krawędziami (zamiast je zastępować), jak na obrazku poniżej:

Teraz musimy usunąć czarne krawędzie. Użyj sztuczki z drugiej metody rysowania linii dla gumki (która powinna być ustawiona na normal Narzędzie do gumki(Narzędzie Gumka), tryb Ołówek(Tryb ołówka), grubość 1 px).

Wybierz kolor górnego kwadratu za pomocą Pipety(Narzędzie Kroplomierz). Aby szybko wybrać to narzędzie podczas rysowania ołówkiem lub wypełniania, naciśnij Alt. Użyj powstałego koloru kroplomierza, aby wypełnić pionową linię na środku sześcianu. Następnie zmniejsz jasność kolorów o 15% i wypełnij lewą stronę sześcianu uzyskanym kolorem. Zmniejsz jeszcze bardziej jasność 10% dla prawej strony:

Nasza kostka jest kompletna. Po powiększeniu obraz powinien wyglądać czysto i stosunkowo gładko 100% . Możemy kontynuować.

3. Dodaj znak

Styl postaci może być zupełnie inny, możesz dowolnie zmieniać proporcje lub elementy. Zazwyczaj wybieram szczupłe ciało i nieco większą głowę. Szczupłe ciało postaci pomaga zachować proste i proste linie.

Logiczne byłoby zacząć od oczu. Gdybyśmy ściśle przestrzegali kątów izometrycznych, to na twarzy jedno oko powinno być niżej, ale w małej skali możemy pominąć tę cechę, aby twarze bohaterów były przyjemniejsze. Dzięki temu rysunek będzie schludny, nawet pomimo rozmiaru.

Robimy postać małą, bo po pewnym czasie być może zechcesz dodać do niej samochód, dom, cały plac, a nawet miasto. Dlatego postać musi być jedną z najbardziej małe elementy na ilustracji. Warto także zwrócić uwagę na wydajność graficzną; staraj się uczynić postać tak atrakcyjną, jak to możliwe minimalna ilość piksele (wystarczająco duże, aby przedstawić rysy twarzy). Ponadto małe obiekty są znacznie łatwiejsze do narysowania. Wyjątkiem jest sytuacja, gdy chcesz tylko pokazać postać, jej emocje lub podobieństwo do kogoś.

Utwórzmy nową warstwę. Oczy potrzebują tylko dwóch pikseli – po jednym dla każdego oka, z pustym pikselem pomiędzy nimi. Pomijając jeden piksel na lewo od oczu, dodaj pionową linię:

Teraz dodaj kolejną warstwę i narysuj poziomy pasek dwóch pikseli, to będą usta. Do poruszania się użyj klawiszy strzałek na klawiaturze, a kiedy znajdziesz idealną pozycję, przesuń warstwę w dół. Zrób to samo z brodą, powinna to być dłuższa linia:

Narysuj włosy i czubek głowy, a następnie wygładź kąciki. Powinieneś otrzymać coś podobnego do tego:

Teraz zostaw pusty piksel obok drugiego oka, dodaj bokobrody (które pomogą również narysować uszy postaci) i kilka dodatkowych pikseli nad nimi, aż do linii włosów. Następnie zostaw kolejny pusty piksel, w tym miejscu zacznie się ucho i linia oznaczająca koniec głowy. Śmiało, złagodź kąty w miejscu styku linii:

Dodaj piksel na górę ucha i zmień kształt głowy, jeśli chcesz; głowy są zwykle rysowane już w okolicy szyi:

Narysuj linię od brody - to będzie klatka piersiowa. Początek szyi będzie znajdował się w okolicy uszu, kilka pikseli w dół i kilka pikseli po przekątnej, tak aby ramiona naszej postaci były widoczne:

Teraz w miejscu, w którym kończą się ramiona, dodaj pionową linię długości 12 pikseli, aby utworzyć zewnętrzną część dłoni, a wnętrze będzie dwa piksele w lewo. Połącz linie na dole za pomocą kilku pikseli, aby utworzyć dłoń/pięść (w tym przypadku nie ma żadnych szczegółów, więc zignoruj ​​ten element) i tuż nad miejscem, w którym kończy się dłoń, dodaj linię 2:1 , który będzie pełnił funkcję talii, następnie narysuj linię klatki piersiowej i uzyskaj kompletną górną część ciała. Drugie ramię postaci nie jest widoczne, ale będzie wyglądać normalnie, ponieważ jest zakryte tułowiem.

Powinieneś skończyć z czymś takim:

Oczywiście możesz użyć dowolnych proporcji; Wolę rysować różne warianty następny, zanim zdecydujesz, który jest najlepszy.

Teraz dla dolnej części tułowia dodamy więcej pionowych linii. Lubię wyjeżdżać 12 pikseli między podeszwą a talią. Nogi są bardzo łatwe do narysowania, wystarczy trochę wydłużyć jedną nogę, co sprawi, że postać będzie wyglądać bardziej obszernie:

Teraz dodamy kolor. Znalezienie dobrego koloru skóry jest zawsze trudne, więc jeśli chcesz użyć tego samego koloru, co w tym samouczku, jego kod #FFCCA5. Dobór kolorów pozostałych elementów nie powinien stanowić problemu. Następnie określ długość rękawów, położenie kroju koszuli i jej styl. Teraz dodaj ciemny pasek oddzielający koszulę od ciała. Wolę, żeby wszystkie elementy dekoracyjne były jaśniejsze niż czarne (zwłaszcza gdy wiele elementów jest na tym samym poziomie, np. od koszuli po skórę czy spodnie). Pozwala to uzyskać niezbędny kontrast bez nadmiernej szorstkości obrazu.

Możesz dodać efekty świetlne do prawie każdej strefy kolorów. Unikaj też duża ilość cienie lub użycie gradientów. Kilka pikseli więcej ( 10% Lub 25% ) wystarczy jasny lub ciemny kolor, aby elementy wyglądały trójwymiarowo i zniwelowały płaskość ilustracji. Jeśli chcesz dodać odrobinę koloru do obszaru, który już ma 100% jasność, spróbuj zmniejszyć jego nasycenie. W niektórych przypadkach (na przykład podczas rysowania włosów) może się tak zdarzyć w dobry sposób zmienić odcienie.

Istnieje wiele opcji włosów, które możesz wypróbować. Oto kilka pomysłów:

W miarę tworzenia postaci małe rzeczy, takie jak styl ubioru, długość rękawów, długość spodni, akcesoria, ubiór i kolor skóry, przydadzą się dla urozmaicenia.

Teraz pozostało tylko złożyć oba elementy razem i ocenić, jak wyglądają w jednym ustawieniu:

Jeśli chcesz wyeksportować swoje dzieło, idealnym formatem jest PNG.

To wszystko, zadanie wykonane!

Mam nadzieję, że ta lekcja nie była zbyt skomplikowana. Myślę, że mówiłem maksymalna ilość porady i techniki estetyczne. Możesz dowolnie rozbudowywać swój izometryczny pikselowy świat - budynki, samochody, wnętrza, zewnętrza. Zrobienie tego wszystkiego jest możliwe, a nawet interesujące, choć nie takie łatwe.

Tłumacz: Shapoval Aleksiej

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

Krok 1

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

Krok 2

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

Krok 3

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

Krok 4

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

Krok 5

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

Krok 6

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

Krok 7

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

Krok 8

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

Rysowanie na poziomie pikseli ma swoją niszę sztuki piękne. Za pomocą prostych pikseli powstają prawdziwe arcydzieła. Oczywiście można tworzyć takie rysunki na kartce papieru, ale znacznie łatwiej i poprawniej jest tworzyć obrazy za pomocą edytorów graficznych. W tym artykule szczegółowo przeanalizujemy każdego przedstawiciela takiego oprogramowania.

Najpopularniejszy na świecie edytor graficzny, który potrafi pracować na poziomie pikseli. Aby utworzyć takie zdjęcia w tym edytorze, wystarczy wykonać kilka wstępnych kroków konfiguracyjnych. Tutaj znajdziesz wszystko, czego potrzebuje artysta, aby tworzyć sztukę.

Ale z drugiej strony taka obfitość funkcjonalności nie jest potrzebna do rysowania grafiki pikselowej, więc nie ma sensu przepłacać za program, jeśli zamierzasz go używać tylko do określonej funkcji. Jeśli jesteś jednym z takich użytkowników, radzimy zwrócić uwagę na innych przedstawicieli, którzy skupiają się szczególnie na grafice pikselowej.

Edytuj Pyxel

Program ten ma wszystko, czego potrzeba do stworzenia takich obrazów i nie jest przesycony funkcjami, których artysta nigdy nie będzie potrzebował. Konfiguracja jest dość prosta, paleta kolorów pozwala zmienić dowolny kolor na pożądany ton, a swobodne poruszanie się oknami pomoże Ci dostosować program do własnych potrzeb.

PyxelEdit posiada funkcję ustawiania kafelków na płótnie, co może być przydatne przy tworzeniu obiektów o podobnej treści. Wersja próbna jest dostępna do pobrania na oficjalnej stronie internetowej i nie posiada żadnych ograniczeń w użytkowaniu, dzięki czemu można wypróbować produkt przed dokonaniem zakupu.

Twórca pikseli

Pod względem wyglądu i funkcjonalności jest to najzwyklejszy edytor graficzny, tyle że ma ich kilka dodatkowe funkcje do tworzenia obrazów pikselowych. Jest to jeden z niewielu programów dystrybuowanych całkowicie bezpłatnie.

Twórcy nie pozycjonują swojego produktu jako nadającego się do tworzenia grafiki pikselowej, nazywają to doskonałym sposobem na rysowanie logo i ikon.

GrafikaGale

W prawie każdym tego typu oprogramowaniu starają się wprowadzić system animacji obrazu, który najczęściej okazuje się po prostu bezużyteczny ograniczone funkcje i nieprawidłowe wykonanie. GraphicsGale też nie jest z tym zbyt dobry, ale przynajmniej ta funkcja może działać normalnie.

Jeśli chodzi o rysowanie, wszystko tutaj jest dokładnie takie samo jak w większości edytorów: podstawowe funkcje, duże paleta kolorów, możliwość tworzenia wielu warstw i nic dodatkowego, co mogłoby zakłócić Twoją pracę.

Charamaker

Character Maker 1999 to jeden z najstarszych tego typu programów. Został stworzony, aby stworzyć indywidualne postacie lub elementy, które następnie zostaną wykorzystane w innych programach animacyjnych lub zaimplementowane gry komputerowe. Dlatego nie nadaje się zbytnio do tworzenia obrazów.

Interfejs nie jest zbyt dobry. Prawie żadnego okna nie można przenosić ani zmieniać jego rozmiaru, a domyślny układ nie jest zbyt dobry. Można się jednak do tego przyzwyczaić.

Pro Motion NG

Program ten jest idealny niemal we wszystkim, zaczynając od przemyślanego interfejsu, w którym istnieje możliwość przesuwania okien niezależnie od głównego w dowolne miejsce i zmiany ich rozmiaru, a kończąc na automatycznym przejściu z zakraplacza na ołówek , co jest po prostu niezwykle wygodną funkcją.

W przeciwnym razie Pro Motion NG to po prostu dobre oprogramowanie do tworzenia grafiki pikselowej na dowolnym poziomie. Wersję próbną można pobrać z oficjalnej strony internetowej i przetestować, aby podjąć decyzję o dalszym zakupie pełnej wersji.

Aseprit

Można słusznie uznać za najwygodniejszy i piękny program do tworzenia grafiki pikselowej. Sam projekt interfejsu jest tego wart, ale to nie wszystkie zalety Aseprite. Istnieje możliwość animowania obrazu, ale w przeciwieństwie do poprzednich przedstawicieli, jest on realizowany kompetentnie i wygodny w użyciu. Jest wszystko, czego potrzebujesz, aby stworzyć piękne animacje GIF.

Pikselowa sztuka(Grafika pikselowa) jest obecnie bardzo popularna w grach i jest ku temu kilka powodów!

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

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

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

Aby skutecznie się uczyć, będziesz potrzebować 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: Definiowanie pikseli i ich replikowanie/edytowanie w celu utworzenia Nowa wersja poprzedni obraz. 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 Pixel Art.

W ten sposób dowiedzieliśmy się, że Pixel Art wymaga dużo 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 powiększenia wielokrotności dwóch (ale oczywiście nie będzie ostre).

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 opiera się to na rozmiarze ekranu urządzenia, na które kierujesz reklamy, i liczbie „pikseli”, które chcesz zobaczyć.

Na przykład, jeśli chcesz, aby gra wyglądała dwa razy większa na ekranie iPhone'a 3GS („Tak, naprawdę chcę nadać mojej grze pikselowy wygląd retro!”), którego rozdzielczość ekranu wynosi 480x320 pikseli, musisz pracować z połową rozdzielczości V w tym przypadku będzie miał wymiary 240 x 160 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 Magicznej Różdżki) - bardzo użyteczne narzędzie, które zaznacza wszystkie piksele tego samego koloru, a następnie konfigurujemy je w taki sam sposób, jak narzędzie „Wiadro z farbą” – bez tolerancji i bez wygładzania.

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

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

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

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

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

Urozmaicaj swoją paletę

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

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

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

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

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

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

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

Wreszcie zrób to próba koloru Tło: 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, bez stosowania nowych kolorów i krycia, zachowując wybrane kolory.

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!

Tworzyć 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 wygładzania, więc nasz facet nadal wygląda na „pikselowany”. Skompiluj, uruchom i… tak, to działa!

Zobacz korzyści płynące z używania Pixela Grafika artystyczna- możemy użyć mniejszego obrazu niż ten wyświetlany na ekranie, oszczędzając dużo 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ć styl 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 nauki, 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!

Adobe Photoshop: rysuj i animuj postać w Technologia pikseli Sztuka

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, szkic wygląda na gładszy ludzkie oko. 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ź rozjaśnienia 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ł.

● Podświetl lewa ręka narzędzie 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.