Izometryczny pixel art
Tutorial
Opracowanie: Pevel
Poziom trudności: średni
Pixel art jest na pewno zajęciem pracochłonnym, więc na początku chciałbym odradzić tę formę grafiki wszystkim leniuchom. Z drugiej strony pokażę, że nie musi to być zajęcie męczące, jeśli mamy pod ręką GIMP-a. Nie ma potrzeby ściągać żadnych dodatków. Podczas pracy warto otworzyć okno dokowalne:
paleta kolorów, w celu łatwego pobierania kolorów. Praktycznie wszystkie operacje powinno się wykonywać w przybliżeniu ok. 800%, by uzyskać jak najlepszy efekt. Nie bójcie się kopiowania i wklejania, bo może się przydać przy bardziej monotonnych pracach.
Do pisania tutoriala skłoniło mnie rozpowszechnienie się pixel artu na forum przez projekt
Gimpuj Pixel Town. Poniższy tutorial pokaże, jak stworzyć techniką pixel artu budynek w rzucie izometrycznym (najbardziej rozpowszechnionym). Zachęcam do późniejszego eksperymentowania i tworzenia własnych projektów budynków.
Tutorial napisany w wersji GIMP 2.6. W innych wersjach nazwy narzędzi i pojęć mogą się różnić.
Zaczynamy 1. Tworzymy nowy obraz:
Plik -> Nowy... [Ctrl+N] o dowolnych rozmiarach. Mój ma
300x
200 px. Warstwę
Tło wypełniamy wybranym kolorem trawy. W moim przypadku jest to
#60912C.
2. Dodajemy nową, przezroczystą warstwę o nazwie
Ulice.
3. Wybieramy narzędzie
Ołówek 
[N] i dobieramy kolor ulicy. U mnie jest to
#5C5C54. Wybieramy pędzel
circle 01. Pracując w przybliżeniu
550% lub większym, naznaczamy kontur ulicy i wypełniamy go. Oczywiście, pamiętamy o
rzucie izometrycznym.
4. Czas na linie na jezdni. Jako ich kolor wybrałem
#E3E2D9. Oprócz linii, warto także urozmaić samą powierzchnię ulicy. W tym celu naniesiemy kolejny kolor (ja wybrałem
#706d60). Rysujemy kreski w równej odległości od brzegu ulicy i pasa środkowego, choć nie muszą być idealnie równe. Przyjmijmy, że są to nierówności, zanieczyszczenia i takie tam.
5. Teraz zajmiemy się wygładzaniem linii. Zastosujemy
ręczne wygładzanie, bo tak fajnie. Otóż ręczne wygładzanie polega na wypełnianiu pikseli na krawędzi kolorów kolorem pośrednim, co daje wrażenie płynnego przejścia. Przeważnie stosuje się tę technikę przy łukach, kołach, okręgach, ale także przy liniach pod skosem o kontrastowym kolorze. Zastosujemy ją przy liniach na drodze. Wybieramy pośredni kolor między kolorem jezdni a kolorem linii (na przykład
#aeada5) i rysujemy tak jak na obrazku poniżej. Jaśniejsze plamy wygładzimy za pomocą ręcznego
ditheringu. Pobieramy za pomocą narzędzia
Pobranie koloru 
{O} lub z
Palety kolorów kolor
#706d60 i rysujemy szachownicę z pikseli na krawędzi kolorów (patrz: obrazek niżej).
6. Na tej samej warstwie tworzymy chodniki. U mnie kolor chodników to
#ababab. Możemy również dodać lekki efekt wypukłości poprzez dodanie kolejnych odcieni szarości jako krawężniki. Przyjmijmy, że źródło oświetlenia znajduje się po prawej stronie, a więc ściany i krawędzie po prawej będą jaśniejsze, a te po lewej - ciemniejsze. Dobierając odpowiednio kolory:
ciemniejszy,
bazowy i
jaśniejszy tworzymy tzw. ramp. W przypadku odcieni szarości nie jest to wybór skomplikowany, ale już w przypadku nasyconych kolorów - tak, ale o tym później. Ja wybrałem jako jaśniejszą szarość:
#c1c1c1, zaś jako ciemniejszą:
#9a9a9a.
7. A teraz najważniejsze - budynek. Dodajemy nową, przezroczystą warstwę, nazwijmy ją
Budynek. Na niej zaczniemy od szkieletu prostej bryły. Na razie nie uwzględniamy szczegółów typu gzymsy, kolumienki, ale mamy na uwadze, jakiej wysokości jest budynek i ile będzie miał kondygnacji. Szkielet sporządzamy kolorem
czarnym. Pamiętajmy o zachowaniu odpowiednich kątów.
8. Już możemy przejść do doboru kolorów. Najlepiej wybierać kolory o średnim nasyceniu i jasności, tak żeby nie raziły. W moim przypadku budynek będzie z cegły, więc jako kolor bardziej oświetlonej ściany wybieram
#852d1e. Wypełniamy prawą ścianę wybranym kolorem. Teraz wybieramy ciemniejszy kolor, ale tylko nieznacznie, ponieważ będzie to ściana mniej oświetlona. Jeszcze kilka słów odnośnie wyboru koloru. Jeśli nie wiesz, co to nasycenie, jasność i odcień, zaprzyjaźnij się z suwakami po prawej w oknie wyboru koloru. Przeważnie, by uzyskać odpowiedni efekt, kolory ciemniejsze są mniej nasycone niż te jaśniejsze. Dodatkowo mogą się one różnić nieco odcieniem. Mając to na uwadze, wybieramy jako ciemniejszy kolor
#6a1c0f i wypełniamy ścianę po lewej. Krawędzie "wewnętrzne" (na styku widocznych ścian) rysujemy kolorem jeszcze jaśniejszym niż jasna ściana (na przykład
#a04030), a krawędzie na zewnątrz budynku - kolorem ciemniejszym niż nieoświetlona ściana, u mnie:
#a330a03. Dach wypełniłem bazowym kolorem chodnika (przypominam:
#ababab), który możemy wybrać narzędziem
Pobranie koloru , bo tak łatwiej. Upewnij się, że opcja narzędzia
Próbkuj wszystkie warstwy jest włączona.
9. Gdy już uzyskaliśmy przybliżony kształt budynku i jego kolory, możemy dopracować bryłę. A więc dodajemy wszelkiego rodzaju gzymsy, kolumienki, wnęki, a w razie potrzeby inne kolory elewacji. W moim przypadku zmieniłem kolor parteru na szary (chodnikowy). W tym momencie macie szansę naprawdę dać się ponieść inwencji twórczej i dodać coś od siebie. W przypadku bardziej skomplikowanych brył korzystajcie z przedstawionych wcześniej technik wygładzania krawędzi. Wszystkie części budynku, które chcemy usunąć, zamalujemy
białym ołówkiem (lub o innym, wcześniej nieużywanym kolorze), a następnie zaznaczamy te obszary
Narzędziem zaznaczania według koloru 
[Shift+O] i czyścimy zaznaczenie -
[Delete].
10. Czas na okna. Dodajemy kolejną warstwę nad warstwą
Budynek i nazywamy ją
Okna. Wybieramy kolor okien (u mnie:
#87a4a7) i rysujemy kształt okien, pamiętając o izometrii. W przypadku większych okien możemy dodać zarysy wystroju wnętrza o kolorze zbliżonym do poprzednio wybranego. Ja wybrałem
#8a9a95. Również w większych oknach dodajemy błysk kolorem
#afc9cb, rysując kreski pod kątem
45 stopni (dokładny kąt możemy uzyskać przytrzymując
Ctrl i
Shift). Dodajemy też ramy okien, z tym że zależnie od skali, będą one bardziej lub mniej widoczne. Czasami lepiej zrezygnować z ram okien lub tylko częściowo je narysować - ze strony bardziej widocznej. Podstawa to sprawdzać całokształt pracy w oryginalnym rozmiarze i oceniać, czy efekt jest zadowalający.
11. Już prawie koniec, możemy wyjść z przybliżenia i spojrzeć na naszą pracę, zastanowić się, co jeszcze można poprawić i co dodać. W moim przypadku oczywiście dodałem drzwi, reklamy nad dolnymi oknami, drobne ozdobienia na dachu i zmieniłem obwódkę szarych części budynku.
12. Teraz jeszcze zajmiemy się cieniami. Przechodzimy do warstwy
Ulice i rysujemy chodnik, tak aby pasował do budynku. Możemy też dodać jakiś trawnik lub kwietnik przed oknami. Następnie nad warstwą
Ulice tworzymy nową, przezroczystą i nazywamy ją
Cień i
czarnym ołówkiem rysujemy cień po lewej stronie. Zgodnie z tym, co wcześniej ustaliliśmy, źródło światła znajduje się po prawej. Krycie warstwy zmniejszamy do ok.
20%.
Koniec
Mam nadzieję, że tutorial się przyda. On sam nie jest dokładnym przepisem na dany efekt, co pewnie zauważyliście, a zawiera głównie wskazówki i porady, które powinny pomóc Wam w późniejszych przygodach z pixel artem. Eksperymentujcie i twórzcie, miłego GIMPowania
