Piękna grafika pikselowa. Adobe Photoshop: rysuj i animuj postać za pomocą techniki Pixel Art. Co to jest sztuka pikselowa

04.11.2019

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

Przedmowa

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

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

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

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

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

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

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

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

1. Trochę starych rzeczy

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

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

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

2. W końcu...

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

3. Krem

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

Charamaker 1999 - dobry program, ale wygląda na to, że dystrybucja utknęła w martwym punkcie.

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

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

Ciąg dalszy…

Notatki tłumacza z francuskiego na angielski

Ten świetne przywództwo na podstawie grafiki pikselowej, napisanej przez Phila Razorbaka z LesForges.org. Dziękuję bardzo Philowi Razorbakowi za umożliwienie OpenGameArt.org przetłumaczenia tych przewodników i opublikowania ich tutaj. (Od tłumacza na rosyjski: nie pytałam o pozwolenie, jeśli ktoś chce, to może pomóc, nie mam doświadczenia w porozumiewaniu się po angielsku, a tym bardziej po francusku).

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

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

Adobe Photoshopie: Rysujemy i animujemy postać w Technologia pikseli Sztuka

Na tej lekcji nauczysz się rysować i animować postacie za pomocą tej techniki Sztuka pikseli. 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. Rysować jasny kolor nad obszarami, które chcesz wyróżnić. Następnie wygładź najjaśniejsze obszary za pomocą opcji Filtr > Rozmycie > Rozmycie.

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

Krok 7

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

Postać jest teraz gotowa do animacji.

III. Animacja postaci

Krok 1

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

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

Krok 2

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

● 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.

● Użyj ołówka i gumki, aby poprawić część prawa ręka 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.

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

Przedmowa

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

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

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

1. Trochę starych rzeczy

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

2. W końcu...

3. Krem

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

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

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

Ciąg dalszy…

Notatki tłumacza z francuskiego na angielski

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

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

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

Rysunki w kratkę lub grafika pikselowa są bardzo popularny wygląd artystyczne wśród uczniów i studentów. Podczas nudnych wykładów rysunki po kwadratach wybawiają od nudy. Prototypem rysowania po kwadratach był haft krzyżykowy, polegający na narysowaniu wzoru krzyża na płótnie, tkaninie oznaczonej kwadratami. Wszyscy byliśmy kiedyś studentami i uczniami i z nudów rysowaliśmy różne obrazki w pudełkach. Wyobraź sobie moje zdziwienie, gdy dowiedziałem się, że jest to praktycznie sztuka z własnymi arcydziełami i geniuszami. Zacząłem studiować temat bardziej szczegółowo i oto co z tego wyszło...

Jak rysować obrazy według komórek

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 obrazów; rozmiar ich kwadratów to 5x5 mm, a sam zeszyt ma wymiary 205 mm na 165 mm. NA w tej chwili Notesy wiosenne z kartką A4 cieszą się coraz większą popularnością wśród twórców pudełek; wymiary tego notesu to 280 mm na 205 mm.

Profesjonalni artyści tworzą swoje arcydzieła na papierze milimetrowym (papierze rysunkowym), to właśnie tam jest miejsce na swobodne poruszanie się. Jedyną wadą papieru milimetrowego jest to, że jest blady zielony, co nie jest zauważalne podczas szkicowania kolorowymi pisakami.
Wybierając notes do rysowania, zwróć uwagę na grubość papieru; jakość rysunku w komórkach zależy od jego gęstości i tego, czy pojawi się na niewłaściwej stronie kartki. Idealna gęstość arkusza to nie mniej niż 50g/m2.

Jak rysować obrazy według komórek

Do kolorowania obrazków według komórek nie potrzebujesz żadnych specjalnych narzędzi; wystarczą ołówki i długopisy. Obrazy monochromatyczne są bardzo fajne, ale naprawdę chcę dodać trochę koloru do swojego życia. Aby kolory były urozmaicone, udaj się do sklepu papierniczego i wybierz to, czego dusza zapragnie, długopisy żelowe, olej, piłka.

Długopisy kulkowe do grafiki pikselowej

Filcowe pisaki do rysunków według komórek

Jeśli lubisz rysować pisakami, masz rację, kolory flamastrów są bardzo bogate. Warto pamiętać, że pisaki dzielą się na dwie grupy: alkoholowe i wodne; są bezpieczniejsze, ale mogą nasiąkać papier. Alkohol może zamoczyć papier, a zapach też nie jest dla każdego.

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

Ołówki to kolejny rodzaj urządzeń do szkicowania. Ołówki nie są wyjątkiem pod względem różnorodności typów; są dostępne w wersji plastikowej, woskowej, drewnianej i akwarelowej. Malujemy drewnem wczesne dzieciństwo i wiemy, że często łamią rysik. Plastikowe i woskowe pękają rzadziej, ale są grubsze, co będzie mniej wygodne do rysowania. O ołówki akwarelowe nie wchodzi w rachubę, ponieważ po malowaniu ołówkiem należy zakryć rysunek zwilżonym pędzlem, co jest niedopuszczalne w przypadku arkuszy zeszytów.

Obejrzyj film o tym, jak łatwo jest rysować obrazy w komórkach i jak piękny może być wynik:

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

Grafika kropkowa - technologia pixel art

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

Zanim zaczniemy rozważać metody pixel artu, wróćmy do naszego dzieciństwa w latach 80. i 90. XX wieku. Oczywiście ci, którzy dorastali w czasach poradzieckich, pamiętają 8-bitowe gry wideo, grafikę gier zbudowaną na grafice pikselowej.

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

Weź czarno-czerwony długopis olejny i arkusz notesu w komórce.

Najpierw zróbmy prosty rysunek. Policzmy komórki, określmy kontur i pokolorujmy go według kolorów.

Na przykład narysujmy serce:

Weź liść w kratkę i długopis z czarnym tuszem, umieść 3 kropki, jak na obrazku, kropki zaznaczają, które komórki zostaną pomalowane na czarno.
Narysuj linie wskazujące kontury obrazu.
Zaznacz trzy punkty po każdej stronie, patrz rysunek.
Obszar rysunku zaznaczamy dwiema liniami.
Umieśćmy jeszcze jeden punkt po każdej stronie i narysujmy granice pod górnymi punktami.
Narysujmy 8 punktów w pionie i 4 punkty po obu stronach, jak pokazano na poniższym rysunku.
Rysując linie pionowe, jak pokazano na rysunku, całkowicie wskażemy granice rysunku.
W ten sam sposób zaznacz dolną część serca po lewej i prawej stronie.
Obrysowujemy komórki jak na naszym obrazku.
Następną rzeczą, którą musimy zrobić, to zamalować go czerwonym długopisem. część wewnętrzna serca, pozostawiając blask światła niepomalowany.
Na koniec użyj czarnego pisaka, aby zacieniować komórki oznaczone kropkami. Teraz nauczyłeś się rysować obrazy ośmiobitowe.

Jeśli uważasz, że duże i obszerne obrazy nie są dla Ciebie, powinieneś spróbować narysować zdjęcie z Internetu. Czy się boisz? Nie warto.

Brać

czarny długopis,
ołówki,
notatnik w kształcie kwadratu,
komputer,
zdjęcie lub zdjęcie z Internetu
Program Photoshop.

Do zastosowania rysunki wolumetryczne musimy policzyć liczbę komórek, które zostaną pomalowane. Przy dużych ilościach dość trudno nie popełnić błędu. Pamiętaj także, aby wybrać odcienie kolorów podobne do oryginalnego obrazu.
Zatem działajmy:

Dam Ci jedną radę, która bardzo mi pomaga: jeśli masz drukarkę kolorową, wydrukuj rysunek, jeśli nie, nie ma problemu. Narysuj siatkę 10 komórek o grubszym obrysie. Na wydrukowanym arkuszu za pomocą linijki i kontrastowego pisaka, jeśli nie ma gdzie wydrukować, możesz otworzyć obraz w programie Paint.
Życzę twórczych sukcesów.

Już w XX wieku grafika pikselowa stała się szerokim obszarem zastosowań. gry komputerowe, zwłaszcza w latach 90. Wraz z rozwojem grafiki 3D sztuka pikselowa zaczęła podupadać, ale potem wróciła do życia dzięki rozwojowi projektowania stron internetowych, pojawieniu się telefonów komórkowych i aplikacji mobilnych.

Pixel art to specjalna technika tworzenia obrazów w postaci cyfrowej, wykonywana w edytorach grafiki rastrowej, w której artysta pracuje z najmniejszą jednostką rastrowego obrazu cyfrowego – pikselem. Obraz ten charakteryzuje się niską rozdzielczością, przy której każdy piksel staje się wyraźnie widoczny. Sztuka pikselowa zajmuje dużo czasu i jest żmudna, w zależności od złożoności rysunku - piksel po pikselu.

Podstawowe zasady sztuki pikselowej

Najważniejszym elementem sztuki pikselowej jest tzw. line art – inaczej mówiąc jego kontury. Pixel art wykonywany jest za pomocą linii – prostych i zakrzywionych.

Proste linie

Zasada konstruowania linii w sztuce pikselowej jest taka, że powinny one składać się z segmentów, które w miarę postępu rysowania przesuwają się w bok o jeden piksel. Unikać główny błąd dla początkujących artystów zajmujących się sztuką pikselową: piksele nie powinny się stykać, tworząc kąt prosty.

W przypadku linii prostych możesz ułatwić sobie zadanie, korzystając z jednego ze znanych przykładów prostych ukośnych:

Jak widać na rysunku, wszystkie przedstawione na nim linie proste składają się z identycznych segmentów pikselowych, przesuniętych w bok o odległość jednego piksela, przy czym najpopularniejsze to segmenty jedno, dwu i czteropikselowe. Takie proste linie proste w grafice pikselowej nazywane są „idealnymi”.

Linie proste mogą mieć inny wzór, na przykład możesz naprzemiennie segmentować dwa piksele segmentem jednego, ale takie linie nie będą wyglądać tak pięknie, zwłaszcza gdy obraz zostanie powiększony, chociaż nie naruszają zasad sztuki pikselowej .

Zakrzywione linie

Linie proste są łatwiejsze do wykonania, ponieważ unikają załamań, co nie ma miejsca w przypadku linii zakrzywionych. Ich konstrukcja jest trudniejsza, ale linie krzywe trzeba rysować znacznie częściej niż linie proste.

Oprócz tego samego zakazu tworzenia kątów prostych z pikseli, rysując zakrzywione linie, należy pamiętać o naturze ich przemieszczenia. Długość segmentów pikseli powinna zmieniać się równomiernie, stopniowo – płynnie rosnąć i równie płynnie opadać. Grafika pikselowa nie pozwala na załamania.

Jest mało prawdopodobne, że jednym ruchem ręki narysujesz idealną zakrzywioną linię bez łamania jednej zasady, więc możesz zastosować dwie metody: rysuj linie, rysując jeden piksel za drugim, lub narysuj regularną krzywą, a następnie ją popraw poprzez usunięcie dodatkowych pikseli z gotowej „ramki”.

Roztrząsanie

W sztuce pikselowej istnieje coś takiego jak dithering. Reprezentuje specyficzny sposób mieszania pikseli różne kolory aby uzyskać efekt przejścia kolorów.

Najpopularniejszą metodą ditheringu jest układanie pikseli w szachownicę:

Metoda ta zawdzięcza swój wygląd ograniczeniom technicznym palety kolorów, bo żeby dostać np. fioletowy, konieczne było narysowanie czerwonych i niebieskich pikseli w szachownicę:

Później często używano ditheringu, aby przekazać objętość obrazów za pomocą światła i cienia:

Aby grafika pikselowa z ditheringiem działała prawidłowo, obszar mieszania kolorów musi mieć szerokość co najmniej dwóch pikseli.

Programy do grafiki pikselowej

Aby opanować tworzenie grafiki w stylu pikselowym, możesz użyć dowolnego edytor graficzny, który obsługuje ten typ rysowania. Wszyscy artyści pracują z różnymi programami w zależności od swoich preferencji.

Wiele osób do dziś woli rysować pikselami w znanym standardowym programie systemu operacyjnego Windows - Microsoft Paint. Program ten jest naprawdę łatwy do nauczenia, ale ma to też swoją wadę - jest dość prymitywny, np. nie obsługuje pracy z warstwami i ich przezroczystością.

Kolejnym łatwym w obsłudze programem do grafiki pikselowej, którego wersję demonstracyjną można znaleźć całkowicie bezpłatnie w Internecie, jest GraphicsGale. Być może wadą programu jest to, że nie obsługuje zapisywania grafiki pikselowej w formacie .gif.

Posiadacze Komputery Mac możesz spróbować pracować z darmowym programem Pixen. Użytkownicy systemu operacyjnego Linux powinni sami przetestować programy GrafX2 i JDraw.

I oczywiście doskonałą opcją do tworzenia grafiki pikselowej jest program Adobe Photoshop, który ma szeroką funkcjonalność, pozwala pracować z warstwami, obsługuje przezroczystość i zapewnia prosta praca z paletą. Korzystając z tego programu, przyjrzymy się prostym przykładom samodzielnego rysowania grafiki pikselowej.

Jak narysować grafikę pikselową w Photoshopie

Podobnie jak w typach tradycyjnych sztuki piękne, wielka wartość w sztuce pikselowej mają kształt, cień i światło, więc zanim nauczysz się rysować grafikę pikselową, zadaj sobie trud zapoznania się z podstawami rysowania - poćwicz rysowanie ołówkiem na papierze.

Rysunek „Balon”

Zacznijmy od najprostszej rzeczy - narysuj zwyczajność balon. Utwórz nowy plik w Photoshopie z rozdzielczością ekranu 72 dpi. Nie ma sensu ustawiać dużych rozmiarów obrazu - to sztuka pikselowa. Wybierz pędzel, twardy i nieprzezroczysty, ustaw rozmiar na 1 piksel.

Narysuj mały zakrzywiony półłuk od lewej do prawej, prowadząc go od dołu do góry. Pamiętaj o zasadach pixel artu: zachowaj te same proporcje segmentów, przesuń je w bok o piksel, nie pozostawiając załamań i kątów prostych. Następnie odbij ten łuk, rysując górna część piłka.

Na tej samej zasadzie narysuj spód kulki i nić. Wypełnij kulkę kolorem czerwonym za pomocą narzędzia Wypełnienie. Teraz pozostaje tylko dodać objętości – nasza piłka wygląda na zbyt płaską. Pomaluj ciemnoczerwony pasek w prawym dolnym rogu kuli, a następnie potrząsaj obszarem. W lewym górnym rogu kuli narysuj podświetlenie białych pikseli.

Zobacz jakie to proste - piłka jest gotowa!

Rysunek „Robota”

Spróbujmy teraz narysować obrazek w tradycyjny sposób, a dopiero potem wyczyścimy te piksele, które naruszają zasady sztuki pikselowej.

Otwórz nowy dokument i wykonaj przybliżony szkic przyszłego robota:

Teraz możesz wyczyścić wszystko, co przeszkadza i w razie potrzeby dodać piksele:

W ten sam sposób narysuj dolną część ciała robota. Nie przegap okazji, aby narysować „idealne” linie proste w odpowiednich miejscach.

Szczegółowo opisz ciało robota. Wiele doświadczeni artyści Przed rozpoczęciem pracy radzą przygotować sobie paletę – zestaw kolorów, który wykorzystasz podczas tworzenia pracy w stylu pikselowym. Pozwala to na największą integralność obrazu. Utwórz paletę na wolnym obszarze przestrzeni roboczej Photoshopa - na przykład w postaci kwadratów lub plam kolorów. Następnie do wyboru żądany kolor, kliknij go za pomocą narzędzia Kroplomierz.

Możesz zacząć wypełniać kontury. „Pomaluj” korpus robota głównym kolorem. Nasz kolor to lawendowy błękit.

Zmień kolor konturu - wypełnij go ciemnoniebieskim. Zdecyduj, gdzie na rysunku znajduje się źródło światła. Dla nas znajduje się on gdzieś powyżej i na prawo przed robotem. Narysujmy klatkę piersiową naszej postaci, dodając jej objętość:

Z prawa strona zaznacz najgłębszy cień na rysunku, biegnący wzdłuż konturu ciała. Z tego cienia, od krawędzi do środka, narysuj jaśniejszy cień, który znika w zamierzonych obszarach oświetlonych przez źródło światła:

Dodaj podświetlenia robota we wszystkich obszarach, które mają odbijać światło:

Nadaj nogom robota cylindryczny wygląd, używając cienia i światła. W ten sam sposób wykonaj dziury z kółek na klatce piersiowej robota:

Teraz udoskonalmy obraz, dodając omówiony wcześniej element pixel artu – dithering – do zacienionych obszarów korpusu.

Nie trzeba robić ditheringu na pasemkach, ani na nogach – są już za małe. Używając ciemnych i jasnych pikseli, narysuj rząd nitów na głowie robota zamiast zębów, a także dodaj zabawną antenę. Wydawało nam się, że ręka robota nie została narysowana zbyt dobrze – jeśli napotkasz ten sam problem, wytnij obiekt w Photoshopie i przesuń go w dół.

To wszystko - nasz zabawny robot pikselowy jest gotowy!

Z tego filmu dowiesz się, jak stworzyć animację pixel art w Photoshopie:

Weź to dla siebie i powiedz swoim znajomym!

Przeczytaj także na naszej stronie:

Pokaż więcej