Polskie Forum Użytkowników GIMP-a

---

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 (http://town.gimpuj.info). 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ć.

---

[lp] Zaczynamy

[lp] 1. Tworzymy nowy obraz: Plik -> Nowy... [Ctrl+N] o dowolnych rozmiarach. Mój ma 300x200 px. Warstwę Tło wypełniamy wybranym kolorem trawy. W moim przypadku jest to #60912C.

[lp] 2. Dodajemy nową, przezroczystą warstwę o nazwie Ulice.

[lp] 3. Wybieramy narzędzie Ołówek <olowek> [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 (http://pl.wikipedia.org/wiki/Rzut_izometryczny).



[lp] 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.



[lp] 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  <pobierz-kolor> {O} lub z Palety kolorów kolor #706d60 i rysujemy szachownicę z pikseli na krawędzi kolorów (patrz: obrazek niżej).



[lp] 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.



[lp] 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.



[lp] 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 <pobierz-kolor>, bo tak łatwiej. Upewnij się, że opcja narzędzia Próbkuj wszystkie warstwy jest włączona.



[lp] 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 <zaznaczenie-kolor> [Shift+O] i czyścimy zaznaczenie - [Delete].



[lp] 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.



[lp] 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.



[lp] 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%.



[lp] 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 ;)

---

Wreszcie skończyłam  :D

Sporo pracy, ale efekt super.

Moja praca:

(http://www.imagic.pl/files//13786/pixelart.jpg)

Coś jest chyba nie tak... Chyba trochę nierówno  :)

Świetny tutorial  :D

Heh 5 godzin roboty ale wreszcie skończyłem  :D

(http://www.gimpuj.info/replacement.png)

Zajefajny tutek 8-)
Pozdro

świetny tutorial wg. mnie bardzo dobrze opisany

(http://www.gimpuj.info/gallery/16445_20_10_09_7_43_40.png)

zajelo troche czasu ale fajny tut ;]

(http://i36.tinypic.com/2mq2d07.png)

Mój domek:
http://www.gimpuj.info/index.php?action=gallery;sa=view;id=50864

Spoko tutorial:D
Wzorowałem się na nim i na użytkowniku kapaziomal, myślę że wyszło dosyć dobrze:)
mój domek - http://www.gimpuj.info/index.php?action=gallery;sa=view;id=51913

mój PixelArt  :D

Mi chyba do konca nie wyszlo  :'(
(http://www.gimpuj.info/gallery/27687_25_11_09_8_36_51.png)

Nie mam graficznych umiejętności chociaż to lubie :(
(http://i49.tinypic.com/25pomeg.jpg)

a ja mam pytanie czy szachownice da się robić jakoś szybciej a nie tak wolno

Moje dzieło ;] zajęło mi około 4h.
Proszę o obiektywne oceny i pisać czy się nadaje do tego.

(http://www.gimpuj.info/gallery/35878_18_12_09_1_52_07.jpg)

To jest jakieś biuro/sklep z wystawą na dole. Ludzi i samochodów brak ponieważ tego jeszcze nie umiem ;D

Muszę przyznać że trochę nad tym siedziałem ale się udało za 1 razem ;D

Oto moje dzieło:
(http://www.gimpuj.info/replacement.png)


Nie jest najlepsze ale jak na 1 raz to chyba nie jest złe :P

No i teraz zauważyłem zapomniałem dać cienia... Ale już nie chce mi się edytować :P

A teraz inna praca (ale znalejziona w sieci) według mnie ktoś musiał nad tym trochę siedzieć... ;D
http://www.pixeljoint.com/files/icons/full/castillo_2006.png

To mój domek-nie za ładny ale jest :)
(http://fotoo.pl/zdjecia/files/2010-01/2c67dcfa.png)

Fajny tut.
Całe lotnisko zrobiłem sam. Jest to część którą zamierzam umieścić w mieście (oczywiście gdy będę mógł) i muszę to trochę dokończyć (ludki, auta, pas startowy itp.).
Samolot autorstwa kumalg'a.^[1]
A oto moje dzieło :
(http://www.gimpuj.info/gallery/thumb_34892_04_01_10_8_15_40.png) (http://www.gimpuj.info/gallery/34892_04_01_10_8_15_40.png)
Proszę o ocenianie, komentowanie i czy się nadaję do pixelartu.

^[1] Użyty za pozwoleniem.

Zamiast szachownicy można wykorzystać malowanie kolorem pasów ruchu itp. (ołówkiem) i przejechanie po powierzchni koloru pobranym kolorem dróg (pędzlem)

mój efekt:
(http://www.gimpuj.info/replacement.png)
nie najładniejszy wiem  :'( 

Oto moja praca :)

(http://www.gimpuj.info/gallery/37603_14_02_10_6_20_14.png) (http://www.gimpuj.info/)

Bardzo fajny tutorial.

http://town.gimpuj.info/index.php?act=jakzaczac

coś dla tych co nie wychodzi

Moje dzieło:
http://www.gimpuj.info/index.php?action=gallery;sa=view;id=61568

(http://www.gimpuj.info/replacement.png)
Robiłam to 4 godziny,ale coś mi nie wyszło  :'(

Będę wredny! na podstawie tego tuta:
(http://www.gimpuj.info/gallery/thumb_47691_23_07_10_5_03_43.png) (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=68121)

Nie chciało mi się ulicy robić.

(http://i.imagehost.org/0150/uliuca_2.png)

1 pixel art xD jak na 1 raz, moim zdaniem, nie jest źle xd

Po długim myśleniu i pracy wreszcie stworzyłem swój pierwszy PixelArt.
Naprawde sporo czasu i trudu.
(http://a.imageshack.us/img682/2703/domostwofrejdy.jpg)
@ edit 24 sierpien ;d
nowa pracka
(http://a.imageshack.us/img687/3608/zlotydom2.jpg)

A nie ma jakiegoś ehm... 'prostrzego' sposobu na narysowanie idealnych, ukośnych lin?

Shift+Ctrl nie daje odpowiedniego kąta.

Ja włączyłem sobie siatkę 10x10 i teraz rysuję od rogu do rogu takiego prostokąta 2x1. Tylko musisz dokładnie zorientować się, w które pixele celować.

Hehe wy piszecie ile wy to robiliście, a on ile? Trzy razy więcej niż wy. :d

Bardzo fajny tutorial. Jakbym chciał dodać swój puzel do pixel town, to żeby wyszło ładnie to muszę skopiować klocki sąsiadujące i sobie to złożyć sam, czy dostanę gotowe i tylko dorysować?

du it jorself.

musisz samemu wszystko zrobić, przedstawić na koniec obrazek 150x150 px

Trochę mi nie wyszło  :'( kilka godzin pracy
http://www.gimpuj.info/gallery/32201_25_02_11_11_22_53.jpg (http://www.gimpuj.info/gallery/32201_25_02_11_11_22_53.jpg)(http://www.gimpuj.info/gallery/32201_25_02_11_11_22_53.jpg)

Ocena : SUPER

mie cos wogóle nie wychodzi :( :( :(

Hej jestem nowy  8-). To mój pierwszy zawalaty  <lol> pixel-art. Wiem zapomniałem o cieniu  :(.
(http://yourimg.in/m/r2n40uk.png)
@edit
Zrobiłem 2 ;D.
(http://yourimg.in/m/k23hjdd.png)

Zwaliłeś mnie na nogi Pevel. Przyznam że to długa praca, ale za to przydaje się najbardziej przy tworzeniu gier Java. 8-)

Pozdrawiam!

(http://img818.imageshack.us/img818/4048/budyne1k.png)
Mój pierwszy pixel art. :D Wczoraj wieczorem zrobiłem sam budynek. Dzisiaj spróbuję dodać parter, trawę, ulicę, etc.

Popraw belki i kolory :)

 [lp] Nie używaj takich jaskrawych kolorów jak w ścianie najbardziej wysuniętej na prawo.
 [lp] Korzystaj z jednego koloru w wielu obiektach (może przy takiej małej pracy to nie ma znaczenia ale przy np. całych miastach ciężko będzie się zmieścić w 256 kolorach).
 [lp] Izometria jest wszędzie, a nie tylko jeśli chodzi o ściany i podłogi (mówię tu o altanach, a skoro już o nich mowa to wystarczyłyby tylko 2 kolory).
 [lp] Nie na wszystkie szyby pada światło.
 [lp] "To coś" na drzwiami nie ma zakończenia.
 [lp] Nie ma symetrii.

Tyle zauważyłem, jak coś jeszcze zobaczę to dopiszę :)

(http://i43.tinypic.com/332w8yf.png)
Co powiecie na to? Mój pierwszy tego typu pixelart  :laugh: