Malutki tuksik
Tutorial
Opracowanie: RRH
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
I. Ciało - podstawyW 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.
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
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
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
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.
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
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
II. Ciało - cieniujemy pingwinkaJak dotąd stworzyliśmy podstawową wersję tuksa. Teraz naszym zadaniem będzie tchnąć w niego życie.
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
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.
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
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.
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
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
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
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 -
#ffff00ff2 -
#ffb300ffUtwó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
III. część - siedzący pingwinek z otwartym dzióbkiemW 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.
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 –
#ff0000ff2 –
#5b0000ffStwó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
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!