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]
DrukujPobierz PDF
Autor Wątek: Malutki tuksik  (Przeczytany 18123 razy)
0 użytkowników i 1 Gość przegląda ten wątek.
RRH
Gość
« : 05.05.2008, 13:19:04 »

Malutki tuksik
Tutorial

Opracowanie: RRH
Na podstawie: Tutoriaux TheGimp
Poziom trudności: średni





Witam w moim kolejnym poradniku!

Moim pierwszym dla Inkscape'a.
Początkowo opierałem się na poradniku, który można znaleźć na crystalxp.net.
Poradnik ten był jednak napisany dla GIMP-a. Mi chodziło o dokładne odwzorowanie pierwowzoru.
Takiego jednak na początku nie znalazłem. Uznałem więc, że powinien nim być ten znaleziony na yellowicon.com. Stąd w późniejszych etapach starałem się opierać właśnie na tym. Piszę te słowa już po zakończeniu pisania tutoriala. Sprawa wygląda więc tak, że jeżeli przyjąć, że oryginałem jest ten z yellowicon.com, tiny tux, którego wykonasz, różni się nieznaczenie od niego. Delikatnie różnią się nóżki pingwinka stojącego i odcień brzuszka.
Obiecuję, że jak tylko ustalę autora oryginału, napiszę suplement, jak uzyskać takiego czy innego, zbliżonego do oryginału tuksika. A tymczasem zapraszam do wykonania poradnika. Przyda ci się trochę czasu i cierpliwości.

Tutorial napisany w wersji Inkscape 0.46. W innych wersjach nazwy narzędzi i pojęć mogą się różnić.



Zaczynamy

Orange Point I. Ciało - podstawy

W tej części postaram się udowodnić, że w Inkscape pewne rzeczy możemy zrobić tylko raz.
Zobaczymy jak łatwo połączyć dwie symetryczne połówki. Wykonamy więc tylko pół pingwinka, a resztę odbijemy.

Lime Point 1. Utwórz nową warstwę ciało.

Ustaw prowadnice:

  • pionowe: 88 oraz 256 px;
  • poziome: 80 oraz 431 px.

Z punktu A poprowadź do punktu B krzywą za pomocą Pióra [Shift+F6]:

01a

Otrzymaną krzywą zduplikuj [Ctrl+D] oraz Odbij poziomo [H]. Dopasuj do siebie.
Zaznacz obie połówki za pomocą Wskaźnika F1, Połącz [Ctrl+K]. Wybierz edycję węzłów [F2], zaznacz dwa węzły i użyj Połącz zaznaczone węzły końcowe .
Pamiętaj, aby połączyć górne jak i dolne węzły.
Otrzymany obiekt wypełnij czernią. Usuń kontur , bo nie będzie już nam potrzebny.
Warstwę nazwij ciało.

01b

Lime Point 2. Skrzydełka.

Stwórz nową warstwę o nazwie skrzydełka.
Ustaw następujące prowadnice:

  • pionowe: 63, 112 oraz 123 px;
  • poziome: 310, 275 oraz 255 px;

Utwórz taki obiekt:

02a

Obiekt zduplikuj [Ctrl+D], odbij [H] i umieść po przeciwnej stronie.

02b

Lime Point 3. Brzuch.

Utwórz nową warstwę brzuszek nad warstwą ciało.
Ustaw prowadnice - możesz wykorzystać poprzednie:

  • pionowe: 119, 204 i 257 px;
  • poziome:  395, 363 oraz 89 px.

Poprowadź taką krzywą [Shift+F6]:

03a

Tak jak poprzednio, połącz obie połówki, a następnie wypełnij kolorem #bfbfbff.
Kontur nie będzie potrzebny.
Całość prezentuje się tak:

03b

Lime Point 4. Oczy.

Utwórz nową warstwę i nazwij ją oczy.
Wybierz Elipsę [F5] i przeciągnij zaznaczenie od (185, 367) do (208, 340).
Wypełnij obiekt kolorem czarnym i obróć go [Ctrl+Shift+M] (Obiekt -> Przekształć) o -19 stopni.
Możesz zrobić to ręcznie obserwując podczas przeciągania pasek stanu. Jest to nawet wygodniejsze.
Jeżeli miałeś wybrany kontur, usuń go . Zduplikuj [Ctrl+D] oczko i wybierz Obiekt->Przekształć [Ctrl+Shift+M]. W zakładce Przesuń wpisz 123 poziomo. W zakładce Obróć Kąt - 38.

Lime Point 5. Dzióbek.

Stwórz nową warstwę i nazwij ją dzióbek.
Utwórz następujące prowadnice:

  • pionowe:  222, 240 i 258 px;
  • poziome: 335, 324, 315 i 293 px;

Z ich pomocą uwtórz taką krzywą :

05a

Wiesz już co masz robić. Połącz obie połówki i wypełnij je kolorem #ffb300ff. Usuń kontur .
Całość wraz z oczami prezentuje się tak:

05b

Lime Point 6. Nogi.

Na samym dole utwórz warstwę nogi.
Ustaw następujące prowadnice:

  • pionowe: 120, 124, 136, 177, 207 oraz 219 px;
  • poziome: 114, 106, 96, 82, 78 oraz 75 px;

Postaraj się utworzyć taki obiekt:

06a

06b

Obiekt wypełnij kolorem #f8ae00ff i usuń kontur .
Zduplikuj go [Ctrl+D], Odbij poziomo [H] i Przesuń [Ctrl+Shift+M] o 195px.

Oto nasz słodki tuksik w dotychczasowej okazałości:

06c

Orange Point II. Ciało - cieniujemy pingwinka

Jak dotąd stworzyliśmy podstawową wersję tuksa. Teraz naszym zadaniem będzie tchnąć w niego życie.

Lime Point 7. Utwórz nową warstwę nad ciało i nazwij ją ciało-blask.

Przejdź do warstwy ciało i skopiuj ją. Uaktywnij nową warstwę i Wklej w miejscu pochodzenia (menu Edycja). Przesuń w górę [Ctrl+Shift+M] o 2px. Zabarw na biało i następnie utwórz gradient liniowy poprzez dwukrotne kliknięcie na obiekcie - pojawi się gradient przechoadzący z bieli do przezroczystości. Dolny punkt kontrolny gradientu powinien mieć alfę 55.
Spójrz na obrazek:

07

Lime Point 8. Utwórz nową warstwę i nazwij ją ciało-blask2.

Ponownie skopiuj ciało i wklej na nową warstwę (w miejscu pochodzenia ). Zabarw je na biało. Zduplikuj [Ctrl+D] ją i przesuń [Ctrl+Shift+M] w dół o 6px.
Zaznacz oba obiekty z tej warstwy (za pomocą [Shift]) i wybierz Ścieżka -> Różnica lub po prostu [Ctrl+-].
Przesuń [Ctrl+Shift+M] obiekt o 1px w dół. Zamień wypełnienie nowo powstałego obiektu na gradient liniowy przechodzący z bieli do przezroczystości:

08

Ustaw krycie warstwy na 70.

Lime Point 9. Utwórz nową warstwę nad warstwą brzuch

i nazwij ją ciało-blask3. Stwórz mniej więcej taki owalny kształt:

09a

Wypełnij go białym gradientem od góry do końca obiektu i ustaw widoczność warstwy na około 55.

Utwórz nową warstwę nad ciało-blask3 i nazwij ją ciało-blask4. Skopiuj obiekt z warstwy ciało-blask3 i Wklej w miejscu pochodzenia na nowej warstwie. Przesuń obiekt o 15px w dół i zastosuj gradient z góry do dołu:

09b

Ustaw widoczność warstwy na 15.
Całość powinna prezentować się tak:

09c

Lime Point 10. Blask na skrzydełkach.

Warstwa skrzydełka powinna znajdować się pod warstwą brzuch. Jeżeli tak nie jest, zrób to teraz.
Utwórz nad nią warstwę o nazwie skrzydełka-blask. Skopiuj z warstwy skrzydełka lewe skrzydło i wklej na nową warstwę w tym samym miejscu .
Wypełnij obiekt bielą. Zajmiemy się teraz stworzeniem gradientu dwuliniowego.
Uaktywnij narzędzie Gradient i kliknij dwukrotnie na skrzydełku.
Ustaw kierunek gradientu w taki sposób:

10a

Kliknij dwukrotnie na jednym z punktów kontrolnych. Pojawi się Edytor gradientu.

10b

Kliknij dwa razy w A by dodać nowe punkty.
Mamy teraz cztery punkty kontrolne. Z rozwijanej listy wybierz pierwszy i w pole B wpisz #ffffff00, by gradient przechodził do przezroczystości. Tak samo postąp z ostatnim punktem. Punkt drugi i trzeci w polu RGBA powinien mieć wartość #ffffffff.
Spójrz na skrzydełko. Gradient w czasie edytowania powinien przyjąć postać czterech punktów, które możemy przesunąć. Zróbmy więc to.
Ułóż punkty kontrolne mniej więcej tak:

10c

Zaznacz teraz obiekt i zduplikuj go [Ctrl+D]. Następnie obróć [Ctrl+Shift+M] o -8%. Dla ułatwienia zabarw go na jakiś kontrastowy kolor. Następnie przesuń w ten sposób:

10d

Zaznacz oba obiekty i wykonaj różnicę ścieżek [Ctrl+-].
Przejdź do warstwy ciało i skopiuj znajdujący się tam obiekt. Wklej na warstwę skrzydełka-blask. Następnie wykonaj różnicę obu obiektów.
Wklejony obiekt przesuń [Ctrl+Shift+M] o 18px w prawo.
Krycie warstwy, na której stworzyliśmy blask skrzydełka, ustaw na 35.
Zduplikuj [Ctrl+D] blask i dopasuj go nad drugim skrzydełkiem.

Lime Point 11. Błysk w oczach.

Nad warstwą oczy utwórz nową i nazwij ją oczy-blask. Z warstwy oczy skopiuj lewe oko i wklej na nową warstwę. Używając okna dialogowego Przekształć [Ctrl+Shift+M] zmniejsz wklejony obiekt do 15px szerokości (co da około 16px wysokości przy zachowaniu proporcji).
Następnie ustaw w ten sposób:

11a

Błysk wypełnij gradientem liniowym z góry do dołu przechodzącym od bieli do przezroczystości.
Następnie zduplikuj obiekt [Ctrl+D], odbij poziomo [H] i przesuń [Ctrl+Shift+M] o 122px.
Ustaw krycie warstwy na 70.

11b

Lime Point 12. Cieniujemy brzuch.

Zaznacz warstwę brzuch. Uaktywnij narzędzie Gradient i kliknij dwukrotnie w obiekt tam znajdujący się. W okienku Wypełnienie i kontur ustaw wypełnienie na gradient radialny . Twoim zadaniem będzie dodanie i ustawienie takich punktów kontrolnych gradientu:

12a

Dodaj więc te punkty albo w edytorze gradientu, albo poprzez podwójne kliknięcie na linie wskazujące kierunek gradientu.
Ustaw im następujące kolory – pamiętasz pole B w jednym z powyższych zrzutów?

1. #ffffffff;
2. #afafafff;
3. #d1d1d1ff;
4. #f9f9f9ff;
5. #ffffffff;

Wzmocnimy nieco nasz efekt poprzez dodanie blasku. Stwórz nową warstwę i nazwij ją brzuch-światło. Na niej utwórz takie koło [F5] (kolor nie jest ważny, bo zaraz go zmienimy na biały):

12b

Rozmyj obiekt używając wartości 35 i zmień jego kolor na biały .
Dodamy nieco cienia na dole brzucha, na warstwie brzuch-cień. W tym celu utwórz taki obiekt:

12c

Aby to zrobić posłuż się operacją różnica , odejmując od brzuchu okrąg.
Wypełnij go gradientem od dołu do góry obiektu. Na dole gradient przyjmie kolor #999999ff,  na górze #b3b3b300 (brak krycia). Następnie rozmyj promieniem o mocy 7.

12d

Utwórz nową warstwę nad brzuch-światło i nazwij ją brzuch-światło2. Przejdź do warstwy brzuch i skopiuj go na nową warstwę (w tym samym miejscu ).
Na tej warstwie stwórz mniej więcej taki owal :

12e

Zaznacz oba obiekty znajdujące się tam (okrąg i brzuch) i wykonaj operację Część wspólna (Ścieżka -> Część wspólna).

Wypełnienie nowego obiektu zamień na gradient liniowy przechodzący z bieli do całkowitej przezroczystości:

12f

Na koniec ustaw przezroczystość warstwy na 50%.
Tak powinien prezentować się nasz pingwinek:

12g

Lime Point 13. Cieniujemy dzióbek.

Po pierwsze potrzebujemy zmienić kolor dzióbka na #ffd30bff. Następnie utwórz nową warstwę i nazwij ją dzióbek-rozmycie. Wklej na nią obiekt dzióbka z warstwy dzióbek.
Zduplikuj [Ctrl+D] dzióbek i zmniejsz go [Ctrl+Shift+M] do szerokości 57px przy zachowaniu proporcji. Następnie wykonaj operację różnicy [Ctrl+-] tych dwóch obiektów.
Nowo powstały obiekt wypełnij kolorem #ff8b00ff, a kolor konturu ustaw na #ffb300ff. Szerokość konturu powinna mieć 2px.

13a

Rozmyj obiekt o promieniu 15.
Skopiuj dzióbek z warstwy dzióbek i wklej na warstwę dzióbek-rozmycie. Zostanie zaznaczony górny obiekt. Teraz przytrzymaj [Alt] wraz z [Shift] i kliknij w miejsce gdzie znajduje się rozmyty obiekt. Pamiętaj, że środek jest pusty.
Ustaw maskę poprzez menu Obiekt -> Maska -> Ustaw.

13b

Utwórz nową warstwę nad warstwą  dzióbek-rozmycie i nazwij ją dzióbek-połowa. Wklej na nią dzióbek z warstwy dzióbek.

13c

Tak jak na powyższym rysunku utwórz prostokąt [F4] zasłaniający połowę dzióbka.
Wykonaj różnicę .
Na tą połowę nałożymy następujący gradient :

13d

1. ma mieć kolor #ffe90bff;
2. #ffe80b33;
3. przesuniesz przesuwając myszką z przyciśniętym klawiszem [Shift];

Czekają nas już tylko dwie czynności związane z dzióbkiem. Więc do dzieła!
Utwórz nową warstwę i nazwij ją dzióbek-blask. Wklej na nią dzióbek z warstwy dzióbek.
Zduplikuj go [Ctrl+D] i dla ułatwienia zabarw na jakiś kontrastowy kolor i następnie przesuń [Ctrl+Shift+M] o -6px w pionie.

13e

Wykonaj różnicę . Nowo powstały obiekt wypełnij gradientem białym przechodzącym do przezroczystości z góry do końca dzióbka. Ustaw Krycie na 70.

13f

Pozostaje nam zrobienie cienia.
Stwórz nową warstwę pod warstwą dzióbek i nazwij ją dzióbek-cień. Na niej utwórz taki obiekt:

13g

Ten z kolei wypełnij czarnym gradientem z góry do dołu, rozmyj wartością 20 i ustaw krycie warstwy na 30.

13h

Lime Point 14. Cieniujemy nogi

Wypełnimy jeszcze raz lewą nogę, ale tym razem gradientem. W tym celu utwórz taki gradient radialny :

14a

Punkty powinny być wypełnione kolorem:

1 - #ffff00ff
2 - #ffb300ff

Utwórz nową warstwę o nazwie nogi-blask01. Skopiuj na nią nogę z warstwy nogi i następnie ją zduplikuj [Ctrl+D]. Duplikat dla ułatwienia zabarw jaskrawym kolorem. Przesuń go [Ctrl+Shift+M] następnie o 4px w dół. Wykonaj różnicę z drugim obiektem z tej warstwy.
Ponownie dla ułatwienia możesz zabarwić na jaskrawy kolor powstały obiekt. Następnie przesuń jego lewą dolną część w prawym kierunku, tak jak na obrazku:

14b

Obiekt wypełnij białym gradientem od lewej do prawej.
Utwórz nową warstwę i nazwij ją nogi-blask02. Podobnymi technikami utwórz obiekt taki jak poniżej. Tym razem zamiast gradientu wypełnij go bielą i ustaw krycie na 70. Obiekt powinien być przesunięty o 4px od dołu.

14b

Żeby się nie rozpisywać, stwórz taki obiekt i wypełnij go kolorem #e8a400ff. Zrób to na warstwie nogi-bok. Jest to dokładnie ta sama czynność co powyżej, ale w tym wypadku nie przesuwasz obiektu.

14e

Z kolei na warstwie nogi-blask03 wykonaj takie krzywe :

14f

Ustaw im krycie na 80.
I to już ostatni element nóżki. Stwórz nową warstwę i nazwij ją nogi-cień.
Na niej utwórz taki owal :

14g

Wypełnij go kolorem #a67300ff, rozmyj wartością 9 oraz ustaw krycie warstwy na 45.

Jeżeli zablokowałeś wszystkie warstwy składające się na nogę (a jest to dobra praktyka), odblokuj je .
Zaznacz je , zduplikuj [Ctrl+D], odbij poziomo [H] i umieść w miejscu, gdzie pierwotnie znajdowała się prawa noga.

Pierwsza wersja malutkiego tuksika jest gotowa!

wynik1

Oto jak powinien prezentować się rozkład naszych warstw :

warstwy

Orange Point III. część - siedzący pingwinek z otwartym dzióbkiem

W tej części utworzymy drugą wersję tuksika. Będzie on siedział i miał rozwarty pyszczek.
Dzięki tej wersji możliwe stanie się utworzenie 4 wersji pingwinka.
Zatem zaczynamy.

Lime Point 15. Otwarty dzióbek.

Stwórz nową warstwę i nazwij ją dzióbek2. Utwórz następujące prowadnice:

  • pionowe: 223, 228, 250 i 257 px;
  • poziome: 335, 333, 322, 314 i 276 px;

Z ich pomocą stwórz taką krzywą :

15a

Krzywą zduplikuj [Ctrl+D], odbij poziomo [H], połącz obie połówki [Ctrl+K] i połącz węzły na górze i dole. Następnie obiekt wypełnij żółto-pomarańczowym gradientem radialnym , który już masz w swojej bazie gradientów:

15b

Utwórz nową warstwę i nazwij ją dzióbek2-połowa. Na nią wklej cały dzióbek i odejmij od niego lewą połówkę (operacja różnica ), tak by pozostała prawa. Gradient pozostanie ten sam, więc przesuń go tylko:

15c

Utwórz nową warstwę o nazwie paszczka. Ustaw prowadnice:

  • pionowe: 230, 235, 242 i 257 px;
  • poziome: 313, 312, 306, 292 i 282 px;

Następnie stwórz taką krzywą :

15d

Tak jak poprzednio, stwórz z tej krzywej pełny obiekt. Kiedy to już zrobisz wypełnij go następującym gradientem :

15e

1 – #ff0000ff
2 – #5b0000ff

Stwórz nową warstwę i nazwij ją dzióbek2-blask. Umieść ją pod paszczką.
Skopiuj na nią paszczkę i przeskaluj proporcjonalnie [Ctrl+Shift+M] do 62px szerokości.
Zastosuj biały gradient :

15f

Utwórz kolejną warstwę i nazwij ją dzióbek2-blask2. Wykonaj na niej górny blask dzióbka. Zrób to tak samo, jak w przypadku zamkniętego dzióbka - przesunięcie o 6px i różnica.
Pokażę tylko obraz:

15g

Dodajmy jeszcze cień.

15h

Wypełnij go czarnym gradientem idącym po skosie, rozmyj wartością 20 i ustaw krycie na 40.

Powinieneś otrzymać takiego pingwinka:

15i

Lime Point 16. Nogi siedzącego tuksa.

Dodaj następne prowadnice:

pionowe: 106, 109, 121, 131, 152, 171, 175, 210, 214, 227 i 230 px;
poziome: 183, 180, 158, 151, 130, 122, 102, 94, 88, 80, 73 i 68 px;

Z ich pomocą utwórz taki obiekt na warstwie nogi2, którą umieść na samym szczycie stosu warstw:

16a

16b

Wypełnij go żółto-pomarańczowym gradientem w ten sposób:

16c

Utwórz nową warstwę nogi2-blask, a na niej taki obiekt:

16d

Chyba już wiesz jak to zrobić? Szerokość (przesunięcie) jego powinna mieć 4px.
W czasie odejmowania pozostaną niepotrzebne ścieżki – usuń je.
Wypełnij go bielą i ustaw krycie na 70.

Wykonaj jeszcze dwa razy operację odejmowania na warstwach nogi2-dół1 i nogi2-dół2.
Szerokość obu obiektów ma 4px, czyli są przesuwane o 4 piksele do góry.
Dolny ma wypełnienie gradientem pomarańczowo-żółtym , a górny żółto-pomarańczowym . Dodatkowo dolny ma ustawiony tryb krycia warstwy na Zwielokrotnij.

16e

16f

Utworzymy jeszcze efekt światła na stópce na warstwie nogi2-światło:

16g

Wypełnij go białym gradientem i ustaw krycie na 60.

I ostatnią rzeczą, jaką stworzymy, będzie rozmycie wokół nóżki.
Stwórz warstwę nogi2-rozmycie pod nogi2. Wklej na nią nogę z nogi2.
Przesuń nieco, wypełnij kolorem #ffef00ff i rozmyj o sile 10.

16h

Odznacz teraz wszystkie warstwy składające się na lewą nogę, zduplikuj je [Ctrl+D], odbij poziomo [H] i przesuń w prawo [Ctrl+Shift+M] o 190px.

Druga wersja pingwinka jest gotowa!
Gratuluję wytrwałości.

wynik2

Po tych modyfikacjach możemy stworzyć pingwinka w czterech pozach:


Zobacz również moją kompozycję:




Miłej zabawy!


« Ostatnia zmiana: 19.05.2008, 10:52:09 wysłane przez RRH » Zapisane
mx2
Użytkownik

Reputacja: 3 Offline Offline

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


nikt z nikąd


Zobacz profil
« Odpowiedz #1 : 25.06.2008, 20:09:05 »

hehe to będę pierwszym który doda tu swego pingwina Chichot
hhe miałem problemy w niektórych punktach , dlatego niektóre elementy robiłem po swojemu 
a oto pingwin

Zapisane

<brak>
NokiZ
Użytkownik

Reputacja: 2 Offline Offline

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



Zobacz profil
« Odpowiedz #2 : 14.11.2008, 21:12:55 »

A oto moje pierwsze dzieło w grafice wektorowej ,wykonane w programie Inkscape Chichot fajny tutek Chichot
Oto mój Pingwinek w stylu gangsta Chichot
Zapisane
MisaAmane
Użytkownik

Reputacja: 2 Offline Offline

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


Elfen Lied <3


Zobacz profil WWW
« Odpowiedz #3 : 07.01.2010, 20:37:22 »

Ej czy wam tez nie laduja sie zdięcia ? Smutny
Zapisane



Sooly
Emeryt

Reputacja: 9 Offline Offline

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



Zobacz profil WWW
« Odpowiedz #4 : 08.01.2010, 17:46:23 »

Obrazków już nie ma, spotkasz się z tym w wielu starych poradnikach.
Zapisane

WAiKS
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 1
Galeria Użytkownika

WAiKS


Zobacz profil
« Odpowiedz #5 : 21.12.2013, 22:44:32 »

Witam,
może i jestem nowy i zielony (Język) ale fajnie by było gdybym w tutku zobaczył obrazki a nie ikony usuniętej grafiki.
OwerAndOut K.
Zapisane
Strony: [1]
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aTutorialeTutorialeInkscapeWątek: Malutki tuksik
Skocz do: