The Pixel Tutorial stworzony przez Derek Yu, przetłumaczony przez Stankola.

Witaj!

W tym 10 - cio krokowym tutorialu nauczę Cię jak stworzyć "sprite", czyli samotny, dwu wymarowy obiekt. Słownictwo pochodzi, oczywiście, z gier wideo.

Tworzenie pixel artu jest umiejętnością, której się nauczyłem, ponieważ potrzebowałem grafiki do moich gier. Po dużej ilości treningów, stałem się w tym całkiem niezły i zacząłem dostrzegać w nim "prawdziwą" sztukę, oprócz samego narzędzia. Teraz pixel art jest popularnym typem grafiki w tworzeniu gier (ostatnio niestety mniej - przyp. tłum.) czy tej wcześniej wspomnianej prawdziwej sztuce.

Ten tutorial został stworzony wiele lat temu, by uczyć ludzi podstawowych rzeczy w pixel arcie, ale trochę go poprawiłem. Są inne tutoriale, ale uważam, że są one albo zbyt skomplikowane, albo beznadziejne. Pixel art to nie fizyka. Tutaj nigdy nie musisz kalkulować jakichś wektorów, albo innych pierdół. To sztuka.

Narzędzia

Jedną z fajnych rzeczy w pixel arcie jest to, że nie potrzebujesz żadnych wymyślnych narzędzi - program graficzny wbudowany w system jest prawdopodobnie wystarczający! Oczywiście, są programy stworzone specjalnie do pixel artu, takie jak Pro Motion, czy, dla użytkowników maca, Pixen. Nigdy z nich nie korzystałem (ja korzystam z GraphicsGale i bardzo polecam - przyp. tłum.), ale słyszałem o nich wiele dobrego. W tym tutorialu będę używał Photoshopa, który jest dość drogą bestią, ale jest dobry w każdym rodzaju sztuki i jego liczne narzędzia są bardzo użyteczne w pixelowaniu.



Używanie Photoshopa do pixel artu.

[img = left]ww.derekyu.com/images/extras/pencil-tool.gif[/img] eśli używasz Photoshopa, Twoją główną bronią jest pencil tool (ołówek, skrót klawiszowy, "B), który jest alternatywą dla brush tool (pędzla). Ołówek sprawia, że rysujesz pojedyńczy pixel, bez żadnego anty-aliasingu.

Dwa inne narzędzia, które Ci się przydadzą to marquee tool (zaznaczenie, skrót klawiszowy "M") i magic wand (magiczna różdżka, skrót "W") do wybierania i przesuwania, czy kopiowania i wklejania. Zapamiętaj, że jeśli trzymasz klawisz "Shift" lub "Alt", gdy zaznaczasz obszar możesz dodawać, lub odejmować obszar z aktualnej selekcji. To się przydaje, gdy rzeczy, które chcesz zaznaczyć nie są idealnym kwadratem.

Będziesz także używał eyedropper (pipeta, skrót klawiszowy "I") by pobierać kolory. Zachowywanie kolorów jest ważne w pixel arcie z wielu powodów, więc będziesz musiał pobierać użyte wcześnej kolory i malować nimi ponownie.

Upewnij się, że nauczyłeś się skrótów, bo dzięki nim możesz zachować dużo czasu i energii. Niezłym z nich jest "X", który zamienia pierwszy i drugi kolor miejscami.

Linie

Pixele są małymi blokami posiadającymi określony kolor. Pierwszą rzeczą, jaką musisz się nauczyć jest używanie tych bloków efektywnie, by móc narysować jaki tylko chcesz typ lini. Porozmawiajmy o dwóch głównych typach lini, prostymi i krzywymi.

Proste linie.

Wiem, co sobie myślisz - to jest takie łatwe, by się tym przejmować! Ale w pixel arcie, nawet proste linie mogą być problematyczne. To, czego chcemy unikać to tzw. "jaggies" - małe wyrwy w lini, które sprawiają, że wygląda ona nieczysto. Jaggies powstają, gdy jeden z kawałków linii jest większy lub mniejszy niż otaczające go kawałki.



Krzywe linie.

Dla krzywości upewnij się, że kawałki linii zmniejszają lub powiększają się równo. W tym przykladzie czysta krzywa idzie tak: 6 > 3 > 2 >1, a krzywa z jaggy 3 > 1 < 3.



Podsumowanie.

Umiejętność rysowania czystych linii pixelami jest istotne w pixel arcie. Później nauczymy się jeszcze anty-aliasingu, który sprawi, że wasze linie będą wyglądały jeszcze czyściej.

Koncept

Pierwsze, co potrzebujesz to dobyry pomysł! Spróbuj zwizualizować, co chcesz narysować, albo w głowie albo na papierze. Wkład w pracy w ten element tworzenia pixel artu pozwoli Ci się skoncentrować na prawdziwym pixelowaniu.

Rzeczy, nad którymi musisz się zastanowić.

1. Do czego obrazek będzie używany? Czy jest to na stronę internetową, czy do gry? Czy będę musiał później to animować? Jeśli będziesz animował swoją pracę, możesz dać mu mniej szczegółów, bo nie będą one tak zauważalne, jak w przypadku statycznego pixel artu, gdzie szczegóły są bardzo ważne. Pomyśl, w którą stronę idzie Twoja praca i rób ją jak najlepiej możesz.

2. Jakie mam ograniczenia? Jak wcześniej napisałem, zachowanie kolorów jest bardzo ważne. Jednym z tego powodów jest to, że jeśli pracujesz nad grą, Twoją paleta może być mocno ograniczona. Poza tym musisz zwrócić uwagę na wymiary obrazka i to, jak będzie się komponował z otoczeniem.

Zapasy? Czemu nie!

Dla tego tutoriala nie mam tak naprawdę żadnych ograniczeń, ale chciałem się upewnić, że obrazek będzie dość duży, byś mógł dokładnie zobaczyć, co dzieje się w każdym kroku. Zdecydowałem się wykorzystać Lucha-Prawnika (Lucha Libre to hiszpańskie zapasy - przyp. tłum.), kopiącego dupę wrestlera jako mój model. Może być użyty w bijatyce, czy czymś podobnym, z ruchami jak “Habeus Corpse Blaster” (cokolwiek to znaczy - przyp. tłum.).



Outline

Czarny outline nada nam dobrą, podstawową strukturę psotaci, więc jest to fajna rzecz na start. Później pokażę Ci jak zmienić kolor outline na realistyczniejszy.

Dwa rodzaje outline'a.

Są dwa sposoby na stworzenie outline'a. Możesz go narysować odręcznie, a potem wyczyścić, albo zacząć umieszczać pixele tak, jak jak mają trwać w końcowej pracy od razu.

Sposób tworzenia outline'a powinieneś dobrać do wielkości obrazka oraz do swoich umiejętności w pixelowaniu. Jeśli praca jest bardzo duża, dużo łatwiej jest zarysować jego szkic, by uchwycić główny kszałt, a potem to wyczyścić.

W tym tu tutorialu postać jest bardzo duża, więc będę używał właśnie tej metody. Poza tym jest ona dużo łatwiesza do pokazania tekstem i obrazkami.

Krok 1: Brudny outline

Używając swojej myszki, bądź tabletu, naszkicuj brudny outline dla swojego obrazka. Upewnij się, że nie jest ZBYT brudny, bo wtedy efekt końcowy może różnić się od tego, czego oczekiwałeś.



Tutaj widać, że umieszczam swój outline prawie dokładnie na moim szkicu.


Krok 2: Wyczyść outline

Po pierwsze, przybliż obraz, tak na 6x czy 8x, abyś mógł dokładnie widzieć każdy pixel. A teraz sprzątaj outline! Po prostu usuwaj grupy pixeli (outline powinien być cały czas jednym pixelem), uważaj na jaggies i wszystkie małe detale.

Nawet duże pixele żadko przekraczają rozmiar 200 na 200 pixeli. Fraza "rób więcej z mniejszych" nigdzie nie brzmi prawdziwiej, niż w pixelowaniu. W przyszłości zobaczysz, że jeden pixel robi wielką różnicę.



Zachowaj outline prostym. Detale dodasz później, ale teraz skoncentruj się na definiowaniu większych kawałków, jak ułożenie mięśni. Nie od razu będziesz widział efekty, więc bądź cierpliwy.

Kolory

Kiedy skończyłeś outline, możesz wypełnić pola kolorami. Wybieranie odpowiednich kolorów może być trochę skomplikowane, w tym tutorialu nie ma miejsca na cały artykuł o kolorach, więc przedstawię Ci tylko parę podstawowych rzeczy, które warto wiedzieć.

With the outline done, we have a coloring book of sorts that we can fill in. Paint buckets and other fill tools will make it even easier for us. Picking colors can be a little more difficult, however, and color theory is a topic that is beyond the scope of the tutorial. However, here are a few basic concepts that are good to know.


HSB Color Model



HSB to (H)ue - odcień, (S)aturation - nasycenie, and (B)rightness - jasność. To jeden z numerycznych reprezentacji kolorów na komputerze. Innymi z nich są np. RGB czy CMYK, o których prawdopodobnie już słyszałeś. Większość programów używa HSB do wybierania koorów, więc lecimy z tym koksem:

Odcień - czyli to, co rozumiesz pod pojęciem "kolor". No wiesz, jak czerwony, pomarańczowy, niebieski itp.

Nasycenie - zmienia intensywność koloru. 100% natężenia daje Ci najjaśnieszy kolor, w miare zmniejszania nasycenia kolor staje się bardziej szary.

Jasność - jasność koloru. Koniec. Aha, 0% jasności daje czarny, 100% biały.

Wybór kolorów.

To, jakie kolory wybierzesz należy tylko do Ciebie, ale mam dla Ciebie parę uwag, które powinieneś zapamiętać:

1. Mniej nasycone i te z mniejszą wartością jasności wyglądają bardziej "ziemsko" i mniej kreskówkowo.

2. Pomyśl o tzw. color wheel, kole kolorów - im dalej te kolory są od siebie na tym kole, tym gorzej wyglądają przy sobie. Z drugiej strony, kolory takie jak czerwony i pomarańczowy, które są blisko siebie na kole wyglądają dobrze razem.



3. Im więcej kolorów używasz, tym bardziej Twój obrazek będzie rozmyty. By stworzyć dobrą pracę używaj dwóch lub trzech głównych kolorów - pomyśl o postaci Mario, który ma tylko czerwony i brązowy, a napewno zapamiętasz go do końca życia!

Aplikacja tych kolorów jest bardzo łatwa. Jeśli używasz Photoshopa, musisz najpierw zaznaczyć obszar, który chcesz wypełnić magiczną różdzką ("W"), a następnie nacisnąć "Alt + F" - aby wypełnić obszar pierwszym kolorem - lub "Ctrl + F", aby wypełnić obszar drugim kolorem.



Cieniowanie

Cieniowanie jest milowym krokiem w stawaniu się bogiem w pixelowaniu. To tutaj właśnie obrazki nabierają głębi i stają się świetne, albo zamieniają się w koszmar. Jeśli wbijesz sobie do głowy to, co za chwilę Ci napiszę to nie masz się czego obawiać, bo Twoje obrazki będą świetnie pocieniowane.

Krok 1: Wybór źródła światła

Najpierw musimy wybrać sobie źródło światła. Jeśli Twój obrazek jest częścią większej scene, mogą tam być różne lokalne źródła (jak lampy, ogień, palące się lampy, itp.). To może skomplikować trochę cieniowanie Twojej pracy. W wiekszości przypadków jednak wybranie jednego, głównego źródła światła (jak słońce) jest najlepszym pomysłem. W niektórych grach używa się obrazków, które nie mają zdefiniowanego źródła i w każdym miejscu dobrze pasują.

Przeważnie wybieram dalekie źródło światła, które jest gdzieś nad postacią i przed nią, więc wszystko, co jest na górze, lub z przodu jest troszeczkę jaśniejsze, a reszta jest pocieniowana. Takie światło wygląda najnaturalniej na obrazkach.



Krok 2: Cieniowanie

Kiedy już zdefiniowaliśmy źródło światła możemy zacząć cieniować miejsca najbardziej od niego oddalone jakimś ciemniejszym kolorem. Nasz model światła - "góra i do przodu" dyktuje nam, że takie rzeczy, jak spód twarzy, ramion, nóg, itp. powinien być pocieniowany.

Pamiętaj, że zabawa pomiędzy światłem i cieniem sprawia, że rzeczy z płaskich zamieniają się w wypukłe. Zrób z papieru kulkę, a potem ją rozłóż i połóż na stole - dlaczego jesteś w stanie stwierdzić, że nie jest już płaski? To dlatego, że możesz widzieć małe cienie dookoła gnieceń. Używaj cieni, aby wybrzuszyć ubrania, zdefiniować muskulaturę, włosy, futro, zgięcia, itp.



Krok 3: Lekkie cienie

Teraz użyj jaśniejszego odcienia, niż wcześniej, który może być użyty do lekkich cieni. Cieniujesz obszary, do których dochodzi słońce, ale nie tak dużo, jak normalnie. Lekkie cienie możesz wykorzystać również do przejścia od cieni do normalnego koloru, szczególnie na krzywych powierzchniach.



Step 4: Rozjaśnienie

Miejsca, w których światło dokładnie "uderza" w obiekt powinny mieć na sobie rozjaśnienie. Uważaj na nie, nie nakładaj ich tak dużo jak cieni.

Zawsze nakładaj rozjaśnienia po cieniach, aby oszczędzić sobie ból głowy. Jeśli nie masz cieni, przeważnie twoje rozjaśnienia będą zbyt duże.



Czego nigdy nie robić.

Cieniowanie - dokładnie w tym miejscu wiele początkujących się pogrzebuje. Tu masz parę zasad, do których zawsze powinieneś sie stosować, gdy cieniujesz:

1. Nie używaj gradientów (to takie płynne przejścia między kolorami... bardzo płynne). To największy błąd nowicjuszy

2. Nie używaj "pillow-shadingu". Pillow shading ma miejsce, gdy kolory przechodzą od outline do środka - od najciemniejszego do najjaśniejszego.

3. Nie użyawaj zbyt dużo cieni. Łatwo jest pomyśleć "więcej kolorów oznacza więcej realizmu". W prawdziwym swięcie jesteśmy przyzwyczajeni do patrzenia na duże skrawki światła lub cienia - nasz mózg filtruje wszystko pomiędzy. Używaj najwięcej dwóch kolorów do cieniowania (ciemny i bardzo ciemny) oraz dwóch kolorów do rozjaśniania (jasny i prawie biały).

4. Nie używaj bardzo podobnych kolorów. Nie ma żadnego powodu byś używał dwóch kolorów, które wyglądają prawie tak samo, chyba, że chcesz, aby Twój obrazek wyglądał na rozmyty.

Dithering

Zachowanie małej liczby kolorów jest czymś, co bardzo utrudnia pracę pixel artyście. Jednym ze sposobów na osiągnięcie głębszego cieniowania bez używania większej liczby kolorów jest technika zwana "ditheringiem. Podobnie jak w "cross-hatchingu" czy "stripllingu", technik używanych w sztuce tradycyjnej, bierzesz dwa kolory i je mieszasz z różną intensywnością składników, aby stworzyć nowe kolory.

Prosty przykład.

Oto prostu przykład, jak wykorzystując 2 kolory stworzyłe 4 różne odcienie używając ditheringu.



Zaawansowany przykład.



Porównaj obrazek na górze, który jest stworzony przy pomocy photoshopowego gradient toola i dolny, który jest stworzony tylko przez trzy kolory używając ditheringu. Zauważ, że do płynnych przejść między kolorami trzeba używać różnych połączeń tych kolorów. Spróbuj poeksperymentować z tym patentem.

Aplikacja ditheringu.

Dithering może dać Ci ten fajny powiew gier retro, bo bardzo dużo starych gier posiadało ciężkie, ogromne kawałki ditheringu ze względu na ograniczone palety (spójrz na Saga Genesis dla dużo przykładów ditheringu). To nie jest coś, czego używam bardzo często, ale tutaj dla treningu zaaplikowałem (prawdopodobnie trochę z nim przedobrzyłem) dithering na nasz obrazek.



Możesz używać ditheringu ile tylko chcesz. Ale szczerze, widziałem tylko paru ludzi, którzy potrafią dobrze posługiwać się tą techniką.

Selektywny Outline

Selektywny outlining, albo “selout” jest trochę jakby cieniowaniem outline. W przeciwieństwie do używania czarnego outline'a, aplikujemy kolor, który jest bliższy kolorowi obrazka. Ponadto, operujemy jasnością, pozwalamy, aby źródło światła dyktowało nam, gdzie mamy go rozjaśnić.

Do tego momentu mieliśmy czarny outline. Nie ma w tym nic złego, serio, razem z nim obrazek wygląda całkiem dobrze i trzyma wszystkie obaszary dobrze odseparowane od siebie, co sprawia, że nasz zapaśnik się nie rozmywa. Ale jeśli używamy czarnego, poświęcamy realizm na rzecz kreskówkowego wyglądu.



Zauważ, że użyłem selout także do podkreślenia jego mięśni. Wreszcie obrazek zaczyna być spójną całością, a nie tylko zlepkiem mniejszych fragmentów.

Porównaj obrazek z seloutem do oryginału:



Anty Aliasing

Anty aliasing działa na prostej zasadzie: dodawanie koloru pośredniego pomiędzy postacią, a tłem by to wygładzić. Na przykład, jeśli masz czarną linię na białym tle, wtedy dodajesz szare pixele na końcach linii.

Technika 1: Wygładzanie krzywych.

Generalnie musisz dodawać pośrednie kolory na rogach dopóki linia nie będzie wyglądać czysto. Jeśli wygląda szarpliwie dodaj kolejną, jaśniejszą warstwę pixeli.

Nie wydaje mi się, żebym mógł to jakoś lepiej wyjaśnić, bo to bardzo skomplikowane i robię to na wyczucie. Po prostu spójrz na obrazek i zrozumiesz, co mam na myśli.



Technika 2: Szflifowanie półkola.



Technika 3: Wygładzanie końca linii.



Aplikacja

A więc zantyaliasujmy naszą postać. Pamiętaj, że jeśli to, co rysujesz ma wyglądać dobrze na tle każdego koloru NIE MOŻESZ antyaliasować jego zewnętrznych końców. W przeciwnym razie otrzymanasz beznadzieją aurę dookoła postaci, wyglądającą jak Zaturas.



Efekt, jak widać, jest niewielki, ale sprawia dużą różnicę.

Dlaczego robić to odręcznie?

Możesz zapytać dlaczego poprostu nie włączyliśmy filtru w programie, który by sprawił, że obrazek będzie wyglądał smuklej. Odpowiedź jest jasna: żaden filter nie wygładzi Twojego obrazka tak dobrze, jak możesz to zrobić Ty odręcznie. Masz totalną kontrolę, nie tylko nad liczbą kolorów, jakich używasz, ale też jakich i gdzie. I Ty wiesz lepiej niż jakikolwiek filter, jakie obszary mają być wygładzone, a które stracą swoją jakoś, jeśli je zantyaliasujesz.

Kończenie

Łał! to już ten czas, kiedy możesz wyłączyć komputer i wziąć zimne piwo. Ok... ale jeszcze nie teraz! Ostatnia część to sprawa, która odróżnia amatora od zaprawionego profesjonalisty.

Oddal się i spójrz dokładnie na swoją postać. Cały czas może być trochę słaby. Weź się za niego i upewnij się, że wszystko jest idealne. To jest prawdopodobnie najprzyjemniejsza część tworzenia pixeli. Dodaj małe detale, które sprawią, że Twój obrazek będzie bardziej interesujący. Twoje umiejętności i doświadczenie w pixelowaniu pokaże się właśnie tutaj.



Możesz się zastanawiać dlaczego oczy Lucha Prawnika cały czas były omijane albo dlaczego dokument, który trzymał był pusty. A więc, to dlatego, że to są male detale, które chciałem zostawić na koniec. Do tego poprawiłem trochę jego ramiona, dodałem rozporek na spodniach, i... czym byłby facet bez swoich sutków? Dorysowałem mu je.

I wreszcie, koniec! Prawnik waży jedynie (albo, jeśli masz duże wymagania: aż) 45 kolorów przy rozmiarach 150 na 115 pixeli! Teraz możesz wziąć to piwo.

Proces tworzenia.

To zawsze fajnie wygląda. Oto mały, animowany .gif pokazujący ewolucję naszej postaci.



Końcowe porady.

1. Naucz się podstaw sztuki i trenuj umiejętności w tradycyjnych mediach. Wszystkie umiejętności i wiedza nabyte w rysowaniu, czy malowaniu przydadzą się w pixelach.

2. Zaczynaj od małych obrazków. Trudną rzeczą jest nauczenie się, jak dodawać dużo szczegółów do małych prac, a nie tworzenie ich ogromnymi.

3. Przeglądaj prace innych pixel artystów. Nie bój się, że będziesz nieoryginalny. Lekkie ściąganie z pixelowych bogów jest najlepszą drogą nauki. Wypracowanie własnego stylu zajmuje bardzo dużo czasu.

4. Jeśli nie masz tabletu, kup go sobie. Stres wynikający z pojedyńczego klikania myszką nie zaimponuje laskom (albo facetom, nieważne). Ja używam małego tabletu Wacom Graphire2, który pasuje do mnie idealnie - lubie to, jaki jest mały, ile miejsca zajmuje na moim biurku i jak łatwo jest przenośny. Przetestuj tablet, zanim go kupisz.

5. Pokazuj swoje prace innym (http://pix.art.pl, pierwsze prace wrzucamy na forum - przyp.tłum.). Kto wie, może znajdziesz też trochę nowych, kujonowatych kumpli?

6. Jak będziesz zarabiał kasę za pixele to wyślij mi trochę!

Wszystkich miłośników pixeli zapraszam w imieniu całej polskiej pixelartowej społeczności na pix.art.pl. :*