Official ENIDUST Forum
Please login or register.

Login with username, password and session length
Advanced search  
Pages: [1] 2 3 ... 6

Author Topic: Lekcja nr 1 (2d): Liść - malowanie przy pomocy programu Inkscape  (Read 12843 times)

mardraq

  • Grafik 3d
  • User
  • ***
  • Posts: 75
    • View Profile
    • Blender grafika komputerowa 3d

Powszechnie wiadomym jest, że grafik 3D zajmuję się grafiką 2D, bo odbiorcy wymagają, aby model 3d był "ubrany" w piękną teksturę. Dwa najważniejsze nurty grafiki 2d- grafika rastrowa i grafika wektorowa, posiadają swoje sztandarowe darmowe programy- dla grafiki rastrowej jest to GIMP, a dla wektorowej to Inkscape. W trakcie naszej pierwszej lekcji stworzymy własny listek na bazie zdjęcia, lub jak ktoś będzie chciał, to wg własnego zamysłu. Użyjemy dwóch wspomnianych wyżej programów, przy czym GIMP będzie służył jedynie do obróbki zdjęcia.
Koniec przedmowy, zaczynamy pracę.
1. Ściągamy Inkscape'a ze strony: http://inkscape.org i instalujemy go.
2. W Gimpie (jeżeli go nie mamy, to ściągamy ze strony: http://www.gimp.org/downloads/  i instalujemy) otwieramy zrobione przez nas zdjęcie liścia.
Wybieramy narzędzie Kadrowania (1) z panelu narzędzi, ustawiamy stałe proporcje na 1:1 (2) i w panelu rysowania ładnie zaznaczamy obszar liścia. Jako, że mój liść nie ma ogonka i będę musiał go dorobić, zaznaczenie uwzględnia również przyszły ogonek. Klikamy w zaznaczony obszar i mamy wykadrowany liść.



3. Teraz muszę obrócić listek, więc z menu Obraz wybieram Przekształcenie i Obróć o 90 stopni w lewo (tak jest w moim przypadku, ale Wasze liście mogą być położone inaczej i wtedy trzeba je odpowiednio obrócić tak, aby ogonek był na dole).



4. Przeskalujemy nasz kwadraci do wymiaru 512x512 px wybierając Obraz-> Skaluj obraz, a w nowym oknie dialogowym wprowadzamy następujące dane:



5. Dajemy Plik->Wyeksportuj i wskazujemy nową nazwę naszego listka i wybrany folder eksportu. Domyślnie plik wyeksportuje się w takim formacie w jakim było nasze zdjęcie- jeżeli był to plik JPG to jako taki się wyeksportuje. Możemy zmienić format wyjściowy na PNG.



6. Otwieramy Inkscape'a i z menu  Plik wybieramy Importuj, a następnie wskazujemy nasze zdjęcie liścia. Nowe okno dialogowe pozostawiamy bez zmian.



7. Jeżeli jest taka potrzeba to "łapką" przesuwamy obraz liścia w obszar, takiej jakby "strony" i niech tam zostanie.



8. Z górnego menu wybieramy opcję Okno dialogowe Warstwy (1), po czym pojawi nam się z prawej strony (zawsze z widoku grafika) panel warstw. Ponownie z górnego menu wybierzemy ikonkę Dopasowania rysunku do okna (2) i w panelu warstw dwukrotnie klikniemy na nazwę warstwy i ją zmieniamy (3).
Zaznaczamy zdjęcie, z menu Edycja wybieramy Wytnij (zdjęcie zniknie), a następnie Edycja-> Wklej w miejscu pochodzenia. Po tej operacji, gdy klikniemy oczko przy nazwie warstwy (panel warstw), zdjęcie powinno zniknąć, a przy powtórnym kliknięciu powinno się pojawić.



Lekki oddech i trochę teorii. Warstwa, czymże jest? Wyobraźmy sobie, że na przeźroczystej folii robimy zdjęcia. Pierwsze zdjęcie zrobimy sobie, a drugie naszej dziewczynie lub chłopakowi. Gdy nałożymy obie folie, to mamy wspaniałą parę, ale gdy postanowimy coś w naszym życiu zmienić, to wystarczy, że zdejmiemy folię z dotychczasowym partnerem (partnerką) i mamy nową parę, oszczędzając czas i środki na nowe "sparowane" zdjęcie. Tak właśnie (w uproszczeniu) działają warstwy. Warstwy są obecne w każdym, lepszym programie graficznym. Są w Inkscapie, Gimpie i w Blenderze. Trzeba się do nich przyzwyczaić, bo bardzo pomagają w pracy grafika.

9. Dodajemy nową warstwę wciskając plus na panelu warstw (1), zmieniamy nazwę warstwy na np. "kontur" (2) i blokujemy warstwę pierwszą przyciskając otwartą kłudkę, tak by była zamknięta (3).



10. Klikamy na warstwę "kontur" i z bocznego menu wybieramy ikonkę Pióro: rysowanie krzywych. W obszarze rysunku drobnymi kliknięciami obrysowujemy kontur liścia. Gdy chcemy zamknąć krzywą klikamy na czerwony kwadracik oznaczający jej początek.



11. Klikamy na warstwę z konturem (1), z bocznego menu wybieramy czarną strzałkę (2) i wskazujemy kontur, tak aby był aktywny (3)- o aktywności danego elementu świadczy pojawienie się kreskowanego prostokąta z ośmioma chwytakami. W górnym pasku ikonek wybieramy ikonkę okna dialogowego wypełnienia i konturu (4), co spowoduje pojawienie się pod panelem warstw dodatkowego panelu, w którym będziemy ustawiać kolor obiektu (5).



12. Czas na pierwsze kolorowanki. Wszystkie czynności, które teraz opiszę, trzeba wykonywać zgodnie z instrukcją.
Mając aktywną warstwę "kontur" i aktywny obrys liścia, na panelu kolorów wybieramy zakładkę Wypełnienie (1) i wciskamy przycisk Jednolity kolor (2) i naciskamy "oczko" przy warstwie obrysu (3)-obrys staje się niewidoczny. Z bocznego panelu wybieramy narzędzie Pobieranie koloru (4) i na zdjęciu naszego listka klikamy w miejscu najciemniejszej zieleni- nastąpi zmiana notacji RGBA w panelu koloru (5). Wciskamy ponownie oczko przy warstwie z konturem (6) i mamy pięknie wypełniony obszar liścia (7). Przechodzimy w panelu kolorów na zakładkę Kontur i wciskamy krzyżyk, co spowoduje usunięcie linii obwódki liścia.



13. WAŻNA INFORMACJA: Gdy pracujemy na warstwach, dobrze jest zamykać kłódką warstwy, na których aktualnie nie pracujemy. Otwarta kłódka powinna być jedynie przy warstwie "roboczej".
Nad warstwą z wypełnieniem liścia dodajemy nową warstwę, na której będziemy rysować żyłki, a warstwę z wypełnieniem ukrywamy "oczkiem". Narzędziem, którym rysowaliśmy obwód liścia, rysujemy pojedyncze żyłki, aby zakończyć rysowanie poszczególnych  linii wciskamy ENTER. Jeżeli chcemy poprawić położenie punktów danej linii, to z bocznego menu wybieramy narzędzie Edycja węzłów, wskazujemy daną linię i możemy już przesuwać dowolne punkty.



14. Gdy już ułożyliśmy siateczkę liścia zgodnie z naszymi oczekiwaniami, to przy aktywnej warstwie z siatką, w obszarze rysowania wciskamy CTRL+A (zaznaczą się nam wszystkie elementy aktywnej warstwy) a z górnego menu wybieramy Obiekt-> Grupuj. Przechodzimy do zmiany koloru grupy. W zakładce Wypełnienie Panelu kolorów wciskamy krzyżyk. W zakładce Kontur ustawiamy kolor na jasną zieleń np. 128,128,0,255 (notacja RGBA). W zakładce Styl konturu ustawiamy szerokość linii na 6 px i rozmycie na ok. 7 do 8. Wszystkie podane przeze mnie parametry możecie oczywiście modyfikować, próbując różnych opcji. Powielimy sobie tak przygotowaną siatkę- PPM na warstwę siatki i z menu rozwijanego wybieramy Powiel aktywną warstwę i ukrywamy widoczność kopii. Na zakończenie wracamy do oryginalnej warstwy siatki i połączymy wszystkie linie siatki w jedną ścieżkę- dajemy CTRL+K.



Edycja 01-08-2013- Popełniłem błąd w poniższym punkcie (15)- część wspólna działa, lecz przy rozmyciach gradientu (wewnątrz figury), natomiast nie chce działać przy rozmyciach "na zewnątrz". Te rozmycia mogą zostać zlikwidowane ręcznie po eksporcie do pliku PNG, np. przy użyciu gumki w Gimpie. Za błąd przepraszam :)
15. Teraz bardzo ważna operacja, którą przy pracy z grafiką wektorową będziemy często wykonywać. Gdy rozmywamy jakiś element zdarza się, że rozmycie wychodzi poza obszar "podkładu", w naszym przypadku rozmycie żyłek wyszło poza obrys liścia i musimy pozbyć się tej części rozmycia, bo poza liściem musi być czysta przezroczystość.
Przechodzimy na warstwę kontur, zaznaczamy obiekt, kopiujemy go CTRL+C, warstwę z konturem znikamy "oczkiem" i przechodzimy do warstwy z siatką liścia i dajemy Edycja-> Wklej w miejscu pochodzenia. Na warstwie mamy teraz dwa obiekty- tło liścia i siatkę. Zaznaczamy siatkę i z menu wybieramy Obiekt-> Przesuń w dół. Z bocznego menu wybieramy narzędzie Edycja węzłów. Z wciśniętym lewym klawiszem ALT klikamy w obszar liścia- powinny nam się zaznaczyć węzły siatki, puszczamy ALT i wciskamy lewy SHIFT i klikamy drugi raz, dodatkowo powinny pojawić się węzły obrysu liścia.  Jeżeli coś nie wychodzi, to powtarzamy, aż będziemy mieli pewność, że są zaznaczone węzły siatki i obrysu. Teraz jedynie wystarczy wybrać z menu Ścieżka-> Część wspólna i rozmycia poza obrysem liścia są zlikwidowane. Możemy też spróbować drugiej opcji- w trybie obiektu wciskamy CTRL+ A i wykonujemy operacje na ścieżkach.



16. Przechodzimy do warstwy z kopią siatki i oczywiście ją powielamy. Mamy warstwę siatka, siatka_kopia1 i siatka_kopia2.
Przechodzimy do pierwszej kopii i w panelu rysowania zaznaczamy obiekt. W panelu kolorów, w zakładce kontur zmieniamy kolor na czarny- 0,0,0,255. W zakładce styl konturu zmieniamy jego szerokość na 3, a rozmycie na 2,7. Przechodzimy do drugiej kopii, koloru nie zmieniamy (ma to być zielony jasny), natomiast zmieniamy szerokość na 0,15 a rozmycie na 0,4.



17. Podobnie jak liść został zbudowany ogonek. Teraz możemy na poszczególnych warstwach, po zaznaczeniu znajdujących się tam obiektów, zastosować filtry kolorów z menu Filtry.
Na zakończenie w panelu rysowania dodamy prostokąt (1) i ustalimy jego wymiary na 512x512 px. W prostokącie pozbędziemy się koloru wypełnienia i konturu i ustawimy go tak, aby liść był w jego centrum. Wciskamy ikonkę eksportu do bitmapy i wypełniamy nowe okno dialogowe jak na rysunku.



I oto rezultat naszej pracy:



Liść jest taki, jaki jest, bo robiliśmy go szybko. Poradnik ma za zadanie zapoznać Was z programem Inkscape, przynajmniej w stopniu, pozwalającym na samodzielną pracę.

Na zakończenie zachęcam do studiowania dostępnych w sieci tutoriali i proszę o pokazywanie własnych prac tutaj.

Oczywiście jeszcze pokaz możliwości Inkscape'a: http://mardraq.deviantart.com/art/Megan-Inkscape-134931482 .

Następna lekcja za jakieś 3 tygodnie :)






« Last Edit: September 20, 2013, 23:17:29 by mardraq »
Logged

remixir

  • User
  • Posts: 146
    • View Profile

Byłbym wdzięczny gdybyś coś zrobił także w ps'ie corelu i 3d Max Studio z ostatnim miałem najmniej do czynienia , jedynie zrobiłem to chodzący patyczak ^^. Oczywiście nie pośpieszam ale powyższy tutorial na pewno mi się przyda ^^ a i jakby co interesowało by mnie też samo "szkicowanie i rysowanie" od zera jakiegoś obiektu bo za to nawet nie wiem jak się wziąć czy trzeba do tego naprawdę mieć talent?
Logged

mardraq

  • Grafik 3d
  • User
  • ***
  • Posts: 75
    • View Profile
    • Blender grafika komputerowa 3d

Sorry mi :), ale w trakcie lekcji będą omawiane jedynie darmowe programy: Inkscape, GIMP, Blender i parę innych, które są dostępne dla każdego i w pełni legalne. Przejście z darmowego programu (jeżeli się go opanuje)  na komercyjny to czas do 2-ch tygodni.
Logged

mrksiedzu

  • User
  • Posts: 254
    • View Profile

Ja osobiście wolę darmowe programy. Takiego darmowego programu łatwiej się nauczę, z powodu większej i aktywniejszej społeczności oraz urozmaicę swoje dzieła dzięki tysiącom pluginów. Jeśli chodzi o tut, to czekam na dokończenie.
Logged

Lich555

  • User
  • Posts: 1063
    • View Profile
    • Moje zdjęcia

Bardzo fajnie że takie poradniki powstają, z pewnością skorzystam ;)
Logged

mardraq

  • Grafik 3d
  • User
  • ***
  • Posts: 75
    • View Profile
    • Blender grafika komputerowa 3d

@mrksiedzu, @Lisz555 dzięki wielkie :)

Wszelką wiedzę jaką zdobyłem, to właśnie za pośrednictwem sieci, dlatego dla mnie, normalną rzeczą jest dzielenie się nią. Mam nadzieję, że przy pomocy tych i innych sieciowych poradników, zrodzą się talenty graficzne na miarę Magdy Dadeli- http://mdadela.4ormat.com/  , które zechcą łaskawie współpracować z grupą Enidust. :)
Logged

gasdq

  • User
  • Posts: 21
    • View Profile

Fajnie, że ktoś pomyślał o taki poradniku, iż zamierzam się uczyć modelować w 3d itp... skorzystam na 100%.Poradnik fajnie objaśniony.
Logged

mardraq

  • Grafik 3d
  • User
  • ***
  • Posts: 75
    • View Profile
    • Blender grafika komputerowa 3d

@gasdq dzięki :)

Skończone  ;D

Jeżeli zostaną zauważone jakieś niedoróbki, coś jest niejasne, zbyt trudne (ha, ha, właśnie trudne jest) to proszę o info.
Logged

gloobuss

  • User
  • Posts: 33
    • View Profile

@mardraq
A osobiście na jakim programie ci się najlepiej pracuje ( chodzi mi o takie profesjonalne... nawet płatne ) ?
Logged

mardraq

  • Grafik 3d
  • User
  • ***
  • Posts: 75
    • View Profile
    • Blender grafika komputerowa 3d

Osobiście używam jedynie wolnego oprogramowania.
3d: Blender do modelowania różnych rzeczy, L3DT do tworzenia terenów, tree[d] do generowania drzew.
2d: Gimp do grafiki rastrowej, Inkscape do grafiki wektorowej, xNormal do wypalania map normalnych (gdy Blender nie daje rady).
Moje prace często są mieszanką różnych technik- np. liść zrobiony w Inkscape lub Gimpie umieszczę na gałązce wykonanej w Blenderze z teksturą zrobioną w Gimpie, zrobię z tego obrazek gałązki w Blenderze, dla którego mapę normalnych wykonam w Gimpie, i już jest taki łączony element, który zostanie umieszczony na drzewie wygenerowanym w tree[d], które to drzewo, Matiis zaimportuje do swojego silnika :)
« Last Edit: July 26, 2013, 10:09:22 by mardraq »
Logged

Ratharr

  • User
  • Posts: 186
    • View Profile
Odp: 2D Lekcja nr 1: Liść - malowanie przy pomocy programu Inkscape
« Reply #10 on: July 26, 2013, 16:43:31 »

Fajny pomysł na zrobienie czegoś takiego, osoby chętne do nauki na pewno będą zainteresowane :)
Logged

mardraq

  • Grafik 3d
  • User
  • ***
  • Posts: 75
    • View Profile
    • Blender grafika komputerowa 3d
Odp: 2D Lekcja nr 1: Liść - malowanie przy pomocy programu Inkscape
« Reply #11 on: July 27, 2013, 18:21:44 »

Mam taką nadzieję :)
Logged

Lich555

  • User
  • Posts: 1063
    • View Profile
    • Moje zdjęcia
Odp: 2D Lekcja nr 1: Liść - malowanie przy pomocy programu Inkscape
« Reply #12 on: July 27, 2013, 18:31:10 »

Takie pytanie, w późniejszych lekcjach zamierzasz nauczyć może o bardziej złożonych rzeczach? Mam taką nadzieję, że będziesz "wspinał się po drabinie gdzie każdy szczebel będzie trudniejszy do wyjścia, będzie wymagał więcej wysiłku, lecz będzie też ciekawszy". :D
Logged

mardraq

  • Grafik 3d
  • User
  • ***
  • Posts: 75
    • View Profile
    • Blender grafika komputerowa 3d
Odp: 2D Lekcja nr 1: Liść - malowanie przy pomocy programu Inkscape
« Reply #13 on: July 27, 2013, 19:20:32 »

Wszystko zależy od tego, czy lekcje spotkają się z odzewem, tzn. czy pojawią się w danym temacie prace użytkowników. Jeżeli będzie chociaż kilka prac, to znaczy, że lekcje maja sens i można iść dalej. :)
Logged

Lich555

  • User
  • Posts: 1063
    • View Profile
    • Moje zdjęcia
Odp: 2D Lekcja nr 1: Liść - malowanie przy pomocy programu Inkscape
« Reply #14 on: July 28, 2013, 11:00:03 »

Oczywiście rozumiem ;) Obiecuje Ci że ja coś zrobię i natychmiastowo tutaj moje "dzieło" zamieszczę, lecz czas muszę znaleźć, a teraz nie chcę siedzieć cały czas w domu. A takie pytanie, myślisz że ile zajmie zrobienie tej pracy?
Logged
Pages: [1] 2 3 ... 6