Polskie Forum Użytkowników GIMP-a

To jest zalążek kolejnego tutorialu

Tytuł: ?
Autor: noss (http://www.gimpuj.info/index.php?action=profile;u=4)
Program: Gimp 2.2.* + GAP
Poziom trudności: **

Przedstawiam kolejny tutorial o animacji w Gimpie. Jest to prosta animacja znana z bannerów tworzonych we flashu i dosyć łatwa do uzyskania w Gimpie.
Poradnik jest podzielony na kilka części, gdzie w pierwszej jest wszystko opisane maksymalnie szczegółowo. Kolejne części będą modyfikacjami pierwszej.
Wszystkie efekty można wykorzystać do innych celów, np. na logo strony WWW lub banner.
Tutorial przeznaczony jest dla osób początkujących lub średnio zaawansowanych, znających podstawy obsługi Gimpa lub innych programów graficznych.
Jeśli jesteś całkowicie początkujący i nic z tego nie rozumiesz zapoznaj się najpierw z wątkiem Nie wiesz jak zacząć? Zajrzyj tu! (http://www.gimpuj.info/index.php/topic,871.0.html)

I. Prosty reflektor
(http://www.gimpuj.info/replacement.png)

II. Rotator - Prosty reflektor
(http://www.gimpuj.info/replacement.png)

III. Rotator - Jeżdżąca "dziura" #1
(http://www.gimpuj.info/replacement.png)

IV. Rotator - Jeżdżąca "dziura" #2

---

Wstęp
Aby uzyskać poniżej opisane animacje niezbędne jest zainstalowanie dodatku GAP, który niestety nie współpracuje poprawnie z wersją niestabilną Gimpa 2.3.*.
Przed rozpoczęciem zabawy trzeba utworzyć nowy folder na dysku, który jest również niezbędny do uzyskania animacji za pomocą GAP.
Zarówno w nazwie folderu jak i ścieżce nie mogą się znajdować polskie ogonki.
Ja nazwałem swój specjalny folder "UB" i umieściłem go w "C:\grafika\GAP\UB".

I. Rotator - Prosty reflektor
1. Rozpoczynamy od pobrania przygotowanego przeze mnie obrazka: maska warstwy (http://images20.fotosik.pl/111/ef3d0d3829a19d60.png) i zapisania go na dysku.
Info: Wzorując się na mojej masce można stworzyć własną z innymi kształtami, jednak z zachowaniem kolorystyki w skali szarości oraz rozmiarów.

2. Otwieramy w Gimpie nasz userbar który chcemy animować.

3. Wklejamy naszą maskę pobraną przed chwilą na nowej warstwie.
W Windows wystarczy plik z maską przeciągnąć na otwarty userbar, zostanie on zaimportowany i umieszczony jako naowa warstwa.

4.

---

Przedstawiam prosty tutorial na napis przypominający zardzewiały metal lub stare złoto. Przykładem jego wykorzystania po pewnych modyfikacjach jest tabliczka powyżej.
Zainspirował mnie pomysł przy próbie stworzenia pluszowego napisu, ale jak widać ten wyszedł mi lepiej.

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

---

(http://www.gimpuj.info/gallery/4_21_07_08_1_22_12_0.png) Zaczynamy

(http://www.gimpuj.info/gallery/4_21_07_08_1_22_12_2.png)  1. Zaczynamy od utworzenia nowego obrazka z białym kolorem tła o rozmiarze np. 400x200px.

(http://www.gimpuj.info/gallery/4_21_07_08_1_22_12_1.png)  2. Następnie tworzymy napis o kolorze #858585 za pomocą narzędzia Tekst <tekst> [T]. Wykorzystałem czcionkę Arial Bold o rozmiarze 128px z włączoną opcją Wygładzaj.
Można użyć innej czcionki, lecz nie za cienkiej jak i nie zbyt grubej. Rozmiar powinien być również podobny, na końcu można ewentualnie cały napis przeskalować do potrzebnych wymiarów.



(http://www.gimpuj.info/gallery/4_21_07_08_1_22_12_3.png)  3. Przed zmianą narzędzia klikamy na Path from Text, co utworzy nam ścieżkę z konturu tekstu.



(http://www.gimpuj.info/gallery/4_21_07_08_1_22_12_4.png)  4. Pobieramy zaznaczenie z warstwy tekstowej poprzez kliknięcie prawym przyciskiem myszy na nazwie tej warstwy w Palecie Warstw wybierając Kanał alfa na zaznaczenie.

(http://www.gimpuj.info/gallery/4_21_07_08_1_24_08.png)  5. Tworzymy nową warstwę nad warstwą tekstową Warstwa -> Nowa warstwa [Shift+Ctrl+N]

(http://www.gimpuj.info/gallery/4_21_07_08_1_22_12_1.png)  6. Wybieramy narzędzie do malowania, czyli pędzel P i przechodzimy do jego opcji.




(http://www.gimpuj.info/gallery/4_21_07_08_1_22_12_0.png)  7. Jako pędzel wybieramy Pencil Sketch#2, dodatkowo włączamy Drganie oraz Użyj koloru z gradientu



(http://www.gimpuj.info/gallery/4_21_07_08_1_22_12_4.png)  8. Upewniamy się, że mamy aktywną nowo utworzoną warstwę, przechodzimy do zakładki Ścieżki gdzie klikamy na ikonkę Rysuje wzdłuż ścieżki. W wyskakującym okienku zaznaczamy Rysuj narzędziem: Pędzel. Powracamy do palety warstw.









(http://www.gimpuj.info/gallery/4_21_07_08_1_24_08.png)  5. Opisany następny punkt.

(http://www.gimpuj.info/gallery/4_21_07_08_1_22_12_1.png)  6. Kolejny opisany punkt. I tak dalej, i tak dalej... Aż do ostatniego.



(http://www.gimpuj.info/gallery/4_21_07_08_1_22_12_0.png) Koniec

---

Znowu tekst autora. Jego uwagi, wskazówki lub inne.

Zakończenie i pożegnanie. Zazwyczaj autorzy kończą tutorial czymś w stylu "Miłego GIMPowania. :)" itp.

---

kropki
(http://www.gimpuj.info/gallery/4_21_07_08_1_22_12_0.png)
(http://www.gimpuj.info/gallery/4_21_07_08_1_22_12_1.png)
(http://www.gimpuj.info/gallery/4_21_07_08_1_22_12_2.png)
(http://www.gimpuj.info/gallery/4_21_07_08_1_22_12_3.png)
(http://www.gimpuj.info/gallery/4_21_07_08_1_22_12_4.png)
(http://www.gimpuj.info/gallery/4_21_07_08_1_24_08.png)

---

Przepraszam za powolne tępo twórcze, ale mam zapierdziel w pracy i po pracy już mi się nie chce nic robić ;)

---

Tutorial powstał na podstawie artykułu "GIMP tworzenie szablonów stron WWW" opublikowanego w Magazynie INTERNET 5/2007, którego autorem jest Włodzimierz Gajda.
Tutorial został stworzony dzięki zgodzie Włodzimierza Gajdy, za co serdecznie mu dziękuję.

Całość jest podzielona na dwie części, pierwsza pokazująca jak wykonać obrazki w Gimpie i druga tłumacząca kodowanie w HTML.

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

---

[lp] Zaczynamy

[lp] 1. Na początku wyjaśnię, że specyficzną właściwością tego menu jest wykorzystanie efektu rollover (podmiana obrazków) z wykorzystaniem jedynie dwóch obrazków! Dzięki temu nie występuje przypadłość mignięcia obrazka po najechaniu na niego pierwszy raz myszką.

Potrzebujemy do stworzenia naszego menu ikonek, które można stworzyć samemu w Gimpie (są do tego tutoriale na forum) lub pobrać z sieci.
Wykorzystałem sposób drugi i użyłem ikonek ze strony


[lp] 2. Opisany następny punkt.

[lp] 3. Kolejny opisany punkt.



[lp] 4. Opisany następny punkt.

[lp] 5. Kolejny opisany punkt. I tak dalej, i tak dalej... Aż do ostatniego.



[lp] Koniec

---

Znowu tekst autora. Jego uwagi, wskazówki lub inne.

Zakończenie i pożegnanie. Zazwyczaj autorzy kończą tutorial czymś w stylu "Miłego GIMPowania. :)" itp.

---