Dowiedz się, jak ręcznie robione pixel art narysuj w Photoshopie

Ilustracje pikselowe świetnie nadają się do tworzenia ikon komputerowych, obrazów izometrycznych, a nawet całych scen. Można je szybko i łatwo tworzyć za pomocą programu Photoshop, wprowadzając kilka szybkich poprawek w ustawieniach wstępnych.

Jedynym minusem jest jednak to, że pixel art wygląda najlepiej z każdym pikselem umieszczonym ręcznie, w przeciwieństwie do filtra Photoshopa. Zgadza się, ułożone ręcznie – wiem, że brzmi to trochę szalenie, zwłaszcza gdy niektóre sceny pikselowe zawierają tysiące pikseli. Ale bez umieszczenia ręki, twoja może pixel art wygląda jak zły obraz lo res, więc bądź ostrożny!

Myślę, że dobrą praktyczną zasadą przed rozpoczęciem jest to, że powinieneś być w stanie wyraźnie zobaczyć swoje dzieło jako grupę różnych kolorowych kwadratów, ale jeśli zmrużysz oczy i posmarujesz oczy, zobaczysz je jako rozpoznawalny obraz. Wyobraź sobie, że robisz mozaikę z płytek, tylko że nie potrzebujesz fugi.

Poniżej znajduje się grafika w pełnych pikselach, w tej pracy stworzymy niektóre z bardziej podstawowych części.

Tworzenie

OK, przygotujmy się do rysowania. Jeśli nie masz kopii programu Photoshop, możesz bezpłatnie pobrać kilka specjalistycznych programów do rysowania pikseli:

• Piksele (Mac)
• Graficzna wichura (zwycięstwo)
• Więcej aplikacji znajdziesz tutaj.

Bawiłem się obydwoma programami, ale wróciłem do Photoshopa, ponieważ jestem przyzwyczajony do skrótów klawiaturowych.

OK, załóżmy stronę

1. Najpierw otwórz preferencje w Photoshopie i ustaw interpolację obrazu na Najbliższy sąsiad.
2. Utwórz nową stronę o wymiarach 300 na 300 pikseli w rozdzielczości 72 dpi.
3. Wybierz narzędzie Ołówek na 1 piksel. Ołówek i gumka to jedyne narzędzia, których naprawdę potrzebujesz.
4. Czasami możesz użyć magicznej różdżki, aby wybrać obszar do wypełnienia, ale upewnij się, że wygładzanie jest wyłączone.

Jeśli używałeś narzędzia pędzla z ogromnymi 9 pikselami zamiast 1, wystąpi antyaliasing, który psuje efekt piksela o twardych krawędziach. Więc trzymaj się 1 piksela. „Bądź chudy, bądź wredny”, jak mawiała moja mama.

Gdy rysunek pikselowy jest wyświetlany w 100% (rzeczywisty rozmiar), narzędzie Pióro jest bardzo małe i ma szerokość 1 piksela, więc może być trudne do zobaczenia i edycji. Jednym z pomysłów jest powiększenie do 800%, aby móc zobaczyć, co robisz. Często mam otwarte drugie okno w Photoshopie z tym samym widokiem ekranu na poziomie 200%, więc mogę szybko zobaczyć, jak mój rysunek wygląda z bliska, a jednocześnie z nieco większej odległości.

Możemy zapisać nasz dokument roboczy jako plik PSD, a później wyeksportować go jako plik GIF do użytku w Internecie. Możemy również później powiększyć plik i przekonwertować go do formatu TIF do druku CMYK.

Zacznijmy rysować

OK, spróbujmy narysować coś takiego jak ta otwarta księga. Rysuj wokół krawędzi za pomocą narzędzia Pióro, aby utworzyć czarny kontur. Następnie wypełnij płaskie kolory strony i zakładki.

Stwórz ideę tekstu na stronie za pomocą kilku pojedynczych linii pikseli. Zobacz, jak dodajemy delikatne załamanie do linii, aby stworzyć wrażenie lekkiej krzywizny na stronie.

Na koniec dodaj kilka znaczników na środku stron i z boku zakładki. Miłym małym akcentem jest podświetlenie pojedynczego piksela w dolnym zewnętrznym rogu każdej strony, które tylko daje wskazówkę na temat krawędzi strony, a nie jest solidnym blokiem.

Po opanowaniu podstaw konturów, kolorów, podświetleń i cieniowania możesz spróbować tworzyć inne proste kształty.

Ukośne linie pikseli

Symbole pikseli, takie jak te powyżej, mogą być zaprojektowane jako seria linii, które są oddalone od siebie tylko o 90º i są bardzo kwadratami i prostokątami. Jednak czasami możesz potrzebować linii pod kątem.

Należy zauważyć, że ukośne linie wyglądają najlepiej, gdy mają regularny wzór. Kiedy są nieregularne (jak te pokazane poniżej), mogą wydawać się grudkowate i szorstkie, gdy są oglądane jako małe. Drugi przykład poniżej to znacznie gładsze kąty izometryczne, które świetnie wyglądają w pixel artach, ale nie jest to kąt „Iso” 30º, którego używałeś na zajęciach z rysunku technicznego – w rzeczywistości jest nieco bliższy 26,5º. Niestety 30º daje grudkowatą linię na 100%. Jeśli narysujesz linię, która regularnie biegnie 2 punkty powyżej i 1 punkt w górę, otrzymasz 26,5º.

Czy spróbujemy narysować coś innego, nieco bardziej geometrycznego i wykorzystującego więcej tych wzorów linii?

Nieregularna linia wygląda na 100% grudkowatą.

Gładki wzór linii pod różnymi kątami.

Narysujmy dziennik pikseli

Linie wzdłuż długości są łatwe, wiemy już, jak to zrobić, ale co powiesz na te zaokrąglone końce?

Te dwa są regularnymi wzorami, ale zmieniają się od szerokich linii poziomych do kwadratów, a następnie linii pionowych. Wygląda na postrzępioną, ale jeśli przesuniesz oczy, wydaje się w porządku!

Górna prawa krzywa na końcu tułowia jest również odwrotnym wzorem lewej dolnej części. Często liczę piksele lub zapamiętuję pewne kombinacje. Kombinacja pikseli na kole to…

• 3 kwadraty (w poprzek)
• 2
• 111
• 222 (niepięte)
• 6
• 2
• Pierwszy

Na początku jest to trochę trudne, jak przy użyciu krzywych Beziera w programie Illustrator, ale wkrótce poczujesz to. Długość kłody jest łatwa, po prostu używamy systemu 2 wzdłuż 1 i ustawiamy kłody tak długie lub krótkie, jak chcemy.

Mniejsze koncentryczne okręgi na końcu tworzą ładny wzór pierścieni, a niektóre obszary ciemniejszego cieniowania na dnie kłody nadają jej głębi. Najpierw nadajemy pniu drzewa płaski kolor jodły, a następnie, aby stworzyć głębię, możemy stworzyć dithering, umieszczając piksele o kontrastowym kolorze po obu stronach naszych linii o wysokim/słabym oświetleniu.

Możesz budować wzory i czynić je bardziej złożonymi. Bądź jednak ostrożny — im bardziej realistyczny i skomplikowany, tym bardziej rozmyty może być obraz, gdy ma być powielany w małym rozmiarze.

Dodałem kilka losowych pikseli do dziennika #3, ponieważ chciałem, aby wyglądał szorstko i wyróżniał się nieco od wiewiórki.

Do ostatniej kłody pracowałem w obszarze z okorowaną korą i małą gałązką. Stwierdziłem, że najlepiej najpierw wykończyć obszar lub styl, a następnie popracować nad nim bardziej szczegółowo. Nie wydaje mi się, żebym mógł od podstaw narysować pozbawiony kory pień wzorem ditheringu - zamiast tego po prostu dodawałem kolejne warstwy i warstwy. Proste poziomy działają najlepiej!

Nieregularny rysunek pikseli

Przejdźmy do czegoś bardziej nieregularnego, na przykład wiewiórki siedzącej na naszym kłodzie. W przypadku czegoś tak skomplikowanego najlepiej zacząć od ołówka i papieru.

Najpierw narysowałem na swojej stronie kwadrat izometryczny, aby uzyskać odpowiednie wymiary. Ponieważ używamy tego przykładu do celów redakcyjnych, wykorzystałem zdjęcie jako źródło inspiracji. Potem zaczynam szkicować. Zwracam szczególną uwagę na kąt na obu uszach i stopach, ponieważ chcę, aby podążały za liniami izometrycznymi.

Jak widać szczegóły są bardzo minimalne - chcę tylko najpierw wypracować podstawowy kształt i kąty proste. Resztę robimy w Photoshopie.

Wprowadź szkic, nałóż nową warstwę i włącz krycie, aby wyraźnie widzieć piksele, które chcesz utworzyć. Nie jest to twarda i szybka zasada, ale uważam, że grafika pikselowa wygląda najlepiej, gdy ma czarne kontury.

Tutaj krążę wokół mojej wiewiórki za pomocą narzędzia Pióro i tworzę czarny kontur. Jedną rzeczą, której należy unikać, jest zbijanie się, w którym piksele konturu dotykają więcej niż jednej strony. Jeśli narysujesz dodatkowy kwadrat, po prostu wymaż go gumką (również z szerokością 1 piksela, zobacz czerwone kółko), będzie wyglądał ładniej, a publiczność ci podziękuje.

Nadal wygląda trochę niechlujnie, ale będzie kształtować! Kluczowe linie na ilustracji również pomagają nadać mu odważny wygląd. Tylko upewnij się, że mają ciemny kolor, który nie jest czarny, aby dodać trochę kontrastu. Nazwij mnie radykałem, ale wybrałem brąz.

Gdy kształt jest gotowy, wypełnij wnętrze ładnym kolorem o średniej tonacji (delikatny brąz) i być może użyj jasnego koloru, aby wydobyć niektóre refleksy.

Zasada czarnego konturu nie jest twarda i szybka, zostawiłem kilka kluczowych czarnych linii pod przednią szczęką i łapą, ponieważ trudno było zobaczyć, co się dzieje.

Konkluzja

Ręczne umieszczanie, usuwanie i manipulowanie pikselami to miejsce, w którym w grę wchodzi ta umiejętność. Raz na jakiś czas. Ale kiedy już to opanujesz, możesz narysować prawie wszystko – wystarczy odrobina cierpliwości. Mam nadzieję, że to pomoże i zainspiruje Cię do tworzenia własnych wspaniałych dzieł!