Witamy, Gość. Zaloguj się lub zarejestruj.
Czy dotarł do Ciebie email aktywacyjny?


Zaloguj się podając nazwę użytkownika, hasło i długość sesji

Strony: [1] 2 3  Wszystkie
DrukujPobierz PDF
Autor Wątek: Izometryczny pixel art  (Przeczytany 95570 razy)
0 użytkowników i 1 Gość przegląda ten wątek.
ƥevel
√ ι ק

Reputacja: 20 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
JID: Pevel@jabber.org
Licencja: CC-NC-BY-SA
Wiadomości: 592
Galeria Użytkownika


Filozof śniadaniowy


Zobacz profil
« : 29.08.2009, 19:53:53 »

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



Lime Point Zaczynamy

Lime Point 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.

Lime Point 2. Dodajemy nową, przezroczystą warstwę o nazwie Ulice.

Lime Point 3. Wybieramy narzędzie Ołówek 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.



Lime Point 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.



Lime Point 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  Narzędzie do pobierania koloru {O} lub z Palety kolorów kolor #706d60 i rysujemy szachownicę z pikseli na krawędzi kolorów (patrz: obrazek niżej).



Lime Point 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.



Lime Point 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.



Lime Point 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 Narzędzie do pobierania koloru, bo tak łatwiej. Upewnij się, że opcja narzędzia Próbkuj wszystkie warstwy jest włączona.



Lime Point 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 wg koloru [Shift+O] i czyścimy zaznaczenie - [Delete].



Lime Point 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.



Lime Point 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.



Lime Point 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%.



Lime Point 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 Mrugnięcie


« Ostatnia zmiana: 30.09.2009, 23:11:12 wysłane przez INSEKT » Zapisane

mevi
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 1
Galeria Użytkownika

mevi


Zobacz profil
« Odpowiedz #1 : 04.10.2009, 22:17:30 »

Wreszcie skończyłam  Chichot

Sporo pracy, ale efekt super.

Moja praca:



Coś jest chyba nie tak... Chyba trochę nierówno  Uśmiech

Świetny tutorial  Chichot
Zapisane
zgreedeek
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 2
Galeria Użytkownika

zgreedeek


Zobacz profil
« Odpowiedz #2 : 08.10.2009, 20:00:07 »

Heh 5 godzin roboty ale wreszcie skończyłem  Chichot



Zajefajny tutek Cool
Pozdro
Zapisane
michi228
Nowicjusz

Reputacja: 0 Offline Offline

GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 14
Galeria Użytkownika



Zobacz profil
« Odpowiedz #3 : 20.10.2009, 19:45:06 »

świetny tutorial wg. mnie bardzo dobrze opisany

Zapisane

kapaziomal
Nowicjusz

Reputacja: 0 Offline Offline

GIMP: 2.4
Licencja: Copyright
Wiadomości: 3
Galeria Użytkownika


; )


Zobacz profil
« Odpowiedz #4 : 23.10.2009, 09:27:55 »

zajelo troche czasu ale fajny tut ;]

Zapisane

krzysiek1311
Gość
« Odpowiedz #5 : 03.11.2009, 17:35:00 »

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

Reputacja: 0 Offline Offline

Wiadomości: 1
Galeria Użytkownika

moro151


Zobacz profil
« Odpowiedz #6 : 03.11.2009, 20:15:07 »

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
Zapisane
moniqusia91
Nowicjusz

Reputacja: 0 Offline Offline

Płeć: Kobieta
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 1
Galeria Użytkownika



Zobacz profil
« Odpowiedz #7 : 03.11.2009, 22:04:12 »

mój PixelArt  Chichot

* moniq.xcf (92.34 KB - pobrany 798 razy.)

* moniq.jpg (19.14 KB, 300x200 - wyświetlony 1724 razy.)
Zapisane
Johnykalesony
Użytkownik

Reputacja: 0 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: CC-NC-BY-SA
Wiadomości: 841
Galeria Użytkownika


<jakiśwyjątkowomądrytekst>


Zobacz profil WWW
« Odpowiedz #8 : 25.11.2009, 08:37:38 »

Mi chyba do konca nie wyszlo  Płacz
Zapisane


Moją grafikę można spotkać na: www.kdm.rybnik.pl oraz https://www.facebook.com/shookuprybnik
L_O_G_A_N
Gość
« Odpowiedz #9 : 27.11.2009, 20:32:17 »

Nie mam graficznych umiejętności chociaż to lubie Smutny
Zapisane
ksaw20
Gość
« Odpowiedz #10 : 17.12.2009, 17:46:19 »

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

Reputacja: 0 Offline Offline

Wiadomości: 3
Galeria Użytkownika

Neos


Zobacz profil
« Odpowiedz #11 : 18.12.2009, 12:27:08 »

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



To jest jakieś biuro/sklep z wystawą na dole. Ludzi i samochodów brak ponieważ tego jeszcze nie umiem Duży uśmiech
« Ostatnia zmiana: 18.12.2009, 13:52:51 wysłane przez Neos » Zapisane
lejsander
Użytkownik

Reputacja: 0 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: Copyright
Wiadomości: 19
Galeria Użytkownika



Zobacz profil
« Odpowiedz #12 : 25.12.2009, 01:37:51 »

Muszę przyznać że trochę nad tym siedziałem ale się udało za 1 razem Duży uśmiech

Oto moje dzieło:



Nie jest najlepsze ale jak na 1 raz to chyba nie jest złe Język

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

A teraz inna praca (ale znalejziona w sieci) według mnie ktoś musiał nad tym trochę siedzieć... Duży uśmiech
http://www.pixeljoint.com/files/icons/full/castillo_2006.png
« Ostatnia zmiana: 28.12.2009, 06:56:50 wysłane przez lejsander » Zapisane

kokmi09
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 3
Galeria Użytkownika

kokmi09


Zobacz profil
« Odpowiedz #13 : 03.01.2010, 14:52:37 »

To mój domek-nie za ładny ale jest Uśmiech

Zapisane
Strony: [1] 2 3  Wszystkie
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aTutorialeTutorialeGIMPRóżneWątek: Izometryczny pixel art
Skocz do: