• Welcome to Forum graficzne Burning-Brushes.pl. Please log in or sign up.
 

Prawie jak beryl - animacja z GAP

Zaczęty przez Annoyer13, Styczeń 22, 2011, 18:45:50

Poprzedni wątek - Następny wątek
Tutorial by Kifer71

Autor: Kifer71
Program: GIMP 2.2.x + dodatek GAP GIMP Animation Package
Link do GAP i nie tylko.






Etap pierwszy - przygotowanie obrazów wyjściowych




1.   Otwórz lub stwórz sześć obrazów o wymiarach 300 x 200 pikseli. Równie dobrze możesz pobrać te widoczne poniżej:







   Najlepszy efekt pracy końcowej uzyskasz, gdy wszystkie obrazy wyjściowe będą miały podobną kolorystykę i małą liczbę barw. Animacja to nic innego jak plik w formacie GIF, czyli maksymalnie 256 kolorach, a co za tym idzie niskiej jakości. Obrazy zbytnio rozbudowane kolorystycznie stracą dużo na swoim wyglądzie.

2.   Zapisz obrazy pod dowolnymi nazwami, najlepiej w formacie PNG. Możesz je zamknąć.
3.   Otwórz nowy obraz o wymiarach 300 x 200 pikseli i przezroczystym tle.
4.   Zapisz go jako np.: warstwy.xcf.

   Teraz wklej utworzone wcześniej obrazy na osobne warstwy do pliku warstwy.xcf.

5.   Z menu Plik w obrazie warstwy.xcf  wybierz Otwórz jako nową warstwę i z okna dialogowego wybierz najpierw pierwszy, potem drugi obraz i tak do szóstego.
6.   Usuń warstwę Tło.

   W zakładce Warstwy ma to wyglądać tak:



7.   Zapisz obraz.
8.   Zminimalizuj obraz.

Nie zamykaj obrazu warstwy.xcf, gdyż dodatek GAP będzie z niego korzystał w dalszej pracy nad animacją.




Etap drugi - tworzenie folderu i plików animacji




9.   Utwórz nowy folder na potrzeby animacji, w którym dodatek GAP będzie zapisywał pliki w formacie XCF. Każdy taki plik będzie później osobną klatką animki. Po zakończeniu pracy będzie można go usunąć. Ja swój nazwałem animacja.
10.   Otwórz nowy, przezroczysty obraz o rozmiarach 300 x 200 pikseli.
11.   Zapisz go pod dowolną nazwą według wzoru dowolna nazwa_000001.xcf. Mój nosi nazwę animacja_000001.xcf.

Nie używaj w nazwach folderu i pliku polskich znaków diakrytycznych.

12.   Warstwę Tło obrazu animacja_000001.xcf możesz pozostawić nie wypełnioną. Pod koniec pracy z animacją dodatek GAP doda białe tło. Jeśli zamierzasz mieć inny kolor tła niż białe, to w tej chwili jest dobry moment aby wypełnić je wybranym kolorem.
13.   Z menu Video wybierz Duplicate frames...
14.   W oknie dialogowym przesuń suwak N razy (N-times) na pozycję 59 co da ci w sumie 60 klatek animacji.




Etap trzeci – animowanie obrazu pierwszego




15.   Z menu Video wybierz Move Path... (Ścieżki ruchu).

   Otworzy się okno Ścieżki ruchu (Move Path). Czerwonymi ramkami zaznaczyłem opcje, których użyjesz przy niniejszym tutorialu.



,,A" - Obraz źródłowy (Source Image/Layer), warstwa poddawana animacji,
,,B" - Tryb kroku (Stepmode), zachowanie się animowanej warstwy,
,,C" - Uchwyt (Handle) , wskazanie punktu (czerwona kropka na przecięciu linii współrzędnych w oknie podglądu J), dla którego będą ustawiane współrzędne X i Y - E położenia warstwy wybranej w Obraz źródłowy (Source Image/Layer) A,
,,D" - Aktualny punk (Current Point),    wybrany punkt animacji,
,,E" - współrzędne uchwytu C,
,,F" - Zmiana rozmiaru (Scale and Modify), Szerokość (Width) i Wysokość (Height) wyrażane w procentach,
,,G" - Perspektywa (Perspective), skalowanie perspektywy,
,,H" - Ramka kluczowa (Keyframe), określa klatkę, na której ma się zakończyć dany punkt animacji D,
,,I" - Skalowanie proporcjonalne,
,,J" - Okno podglądu,
,,K" - Edycja punktów kontrolnych:
   - ,,K1" - Dodaj punkt (Add Point), dodaje kolejny punkt animacji,
   - ,,K2" - Poprzedni punkt (Prev Point), wybór punktu animacji,
   - ,,K3" - Następny punkt (Next Point), wybór punktu animacji,
   - ,,K4" - Otwórz (Open), wybór zapisanych parametrów punktów animacji,
   - ,,K5Zapisz (Save), zapis parametrów punktów animacji do pliku,
,,L" - Instant Apply, włącza i wyłącza widok w oknie podglądu, J, warstwy wybranej w Obraz źródłowy (Source Image/Layer)  A,
,,M" - Od ramki (From Frame), określa, od której klatki rozpocznie się animowanie warstwy wybranej w Obraz źródłowy (Source Image/Layer)  A,
,,N" - Do ramki (To Frame), określa klatkę ostatnią, na której zakończy się animowanie warstwy wybranej w Obraz źródłowy (Source Image/Layer)  A,
,,O" - Podgląd animacji (Anim Preview), umożliwia obejrzenie animacji przed jej zapisaniem,
,,P" - Ok, zapisanie animacji.

16.   Jako Obraz źródłowy (Source Image/Layer) w rozwijanym menu ustaw warstwę [/i]obraz_1.png[/i].
17.   Tryb kroku (Stepmode) ustaw na Brak (None).
18.   Uchwyt (Handle) ustaw na Środek (Center).
19.   Ustaw współrzędne E, X = 150, Y = 100.
20.   Zaznacz opcję Instant Apply.
21.   Kliknij w Dodaj punkt (Add Point).
22.   Kliknij w zakładkę Perspektywa (Perspective).
23.   Zmień parametry x1 i x2 na 0.700.
24.   Wróć do zakładki Zmiana rozmiaru (Scale and Modify).
25.   Kliknij w Skaluj proporcjonalnie .
26.   Zmień Wysokość (Height) na 1. W oknie podglądu będzie widoczna tylko cienka linia.
27.   Zmień współrzędną uchwytu Y na 0 (E).
28.   Suwak Od ramki (From Frame) automatycznie ustawił się na pierwszą klatkę animacji i tak go pozostaw.
29.   Suwak Do ramki (To Frame) ustaw na dziesiątą klatkę.



   W tym momencie warto zapisać ustawienia punktów kontrolnych.

30.   Kliknij w Zapisz (Save) K5.
40.   W oknie dialogowym wybierz folder, w którym zapiszesz parametry punktów.
41.   Nazwij plik do_góry.path_points.
42.   Kliknij w Ok.
43.   W oknie Ścieżki ruchu (Move Path) kliknij w Podgląd animacji (Anim Preview).
44.   W oknie dialogowym kliknij w Exact obiect on frames.
45.   Rozmiar podglądu (Scale preview) ustaw na 100.
46.   Tempo ramkowe (Frame rate) ustaw na 8.



   Po kliknięciu w Ok pojawią się dwa okna: nowy obraz bez nazwy i okno podglądu animacji. Obejrzyj animkę. Zamknij oba okna nie zapisując obrazu.

47.   Jeśli animacja jest prawidłowa w oknie Ścieżki ruchu (Move Patch) kliknij w Ok.

   Podgląd animacji:



   Po zamknięciu okna Ścieżki ruchu (Move Path) możesz jeszcze raz obejrzeć animację wybierając z menu Video opcję Playback.... To okno podglądy różni się od poprzedniego. Nie będę opisywał jego opcji, niemniej warto się nim pobawić i poznać jego opcje.




Etap czwarty – animowanie obrazu drugiego




48.   Otwórz okno Ścieżki ruchu (Move Patch) (menu Video -> Move Path...)
49.   Jako Obraz źródłowy (Source Image/Layer) w rozwijanym menu ustaw warstwę [/i]obraz_2.png[/i].
50.   Powtórz kroki z punktów 1720.
51.   Kliknij dwa razy w Dodaj punkt (Add Point). W Aktualny punk (Current Point) powinieneś(aś) zobaczyć "[ 3] z [ 3]".
52.   Teraz kliknij dwa razy w Poprzedni punkt (Prev Point). W Aktualny punk (Current Point) powinieneś(aś) zobaczyć "[ 1] z [ 3]".
53.   Przejdź do zakładki Perspektywa (Perspective).
54.   Parametry x3 i x4 ustaw na 0.700.
55.   Wróć do zakładki Zmiana rozmiaru (Scale and Modify).
56.   Kliknij w Skaluj proporcjonalnie .
57.   Zmień Wysokość (Height) na 1.
58.   Zmień współrzędną uchwytu Y na 200 .
59.   Kliknij w Następny punkt (Next Point), aby przejść do drugiego punktu animacji ([ 2] z [ 3]).
60.   W opcji Ramka kluczowa (Keyframe) ustaw suwak na pozycji 10.
61.   Kliknij w Następny punkt (Next Point), aby przejść do trzeciego punktu animacji ([ 3] z [ 3]).
62.   W zakładce Perspektywa (Perspective) ustaw parametry y2 i y4 na 0.600.
63.   Wróć do zakładki Zmiana rozmiaru (Scale and Modify).
64.   Sprawdź czy znak symbolizujący skalowanie proporcjonalne jest ,,rozerwany" , jeśli nie, kliknij go.
65.   Zmień Szerokość (Width) na 1.
66.   Współrzędną uchwytu X ustaw na 300.
67.   Suwak Do ramki (To Frame) ustaw na dwudziestą klatkę.
68.   Podejrzyj animację zaznaczając w oknie ustawień podglądu opcję Exact object on frames.
69.   Po obejrzeniu animki zamknij zbędne okna.
70.   Jeśli animacja wygląda poprawnie to zapisz parametry punktów animacji do pliku klikając w Zapisz (Save) K5 i nadając mu nazwę do_góry_i_w_prawo.path_points.
71.   Zapisz animację klikając Ok w oknie Ścieżki ruchu (Move Path).

   Podgląd animki:






Etap piąty – animowanie obrazu trzeciego




72.   Otwórz okno Ścieżki ruchu (Move Patch) (menu Video -> Move Path...)
73.   Jako Obraz źródłowy (Source Image/Layer) w rozwijanym menu ustaw warstwę [/i]obraz_3.png[/i].
74.   Powtórz kroki z punktów 1720.
75.   Kliknij dwa razy w Dodaj punkt (Add Point). W Aktualny punk (Current Point) powinieneś(aś) zobaczyć "[ 3] z [ 3]".
76.   Teraz kliknij dwa razy w Poprzedni punkt (Prev Point). W Aktualny punk (Current Point) powinieneś(aś) zobaczyć "[ 1] z [ 3]".
77.   Przejdź do zakładki Perspektywa (Perspective).
78.   Parametry x3 i x4 ustaw na 0.600.
79.   Wróć do zakładki Zmiana rozmiaru (Scale and Modify).
80.   Kliknij w Skaluj proporcjonalnie
81.   Zmień Szerokość (Width) na 1.
82.   Zmień współrzędną uchwytu X na 0 .
83.   Kliknij w Następny punkt (Next Point), aby przejść do drugiego punktu animacji ([ 2] z [ 3]).
84.   W opcji Ramka kluczowa (Keyframe) ustaw suwak na pozycji 20.
85.   Kliknij w Następny punkt (Next Point), aby przejść do trzeciego punktu animacji ([ 3] z [ 3]).
86.   Przejdź do zakładki Perspektywa (Perspective).
87.   Zmień parametry x1 i x2 na 0.700.
88.   Wróć do zakładki Zmiana rozmiaru (Scale and Modify).
89.   Sprawdź czy znak symbolizujący skalowanie proporcjonalne jest ,,rozerwany" , jeśli nie, kliknij go.
90.   Zmień Wysokość (Height) na 1.
91.   Zmień współrzędną uchwytu Y na 0 (E).
92.   Suwak Od ramki (From Frame) ustaw na 10.
93.   Suwak Do ramki (To Frame) ustaw na 30.
94.   Obejrzyj animkę klikając w Podgląd animacji (Anim Preview) w oknie Ścieżki ruchu (Move Path).

   Podgląd animki przy zaznaczonej opcji Exact object on frames w oknie ustawień podglądu:



95.   Jeśli animacja wygląda poprawnie to zapisz parametry punktów animacji do pliku klikając w Zapisz (Save) i nadając mu nazwę w_prawo_i_do_góry.path_points.
96.   Zapisz animację klikając Ok w oknie Ścieżki ruchu (Move Path).




   Teraz już pójdzie szybciej :) .
   Kolejne etapy będę opisywał mniej szczegółowo. Podstawowe ruchy to otwarcie okna Ścieżki ruchu (Move Path), wybranie opcji Brak w Tryb kroku (Step Mode), ustawienie Uchwytu (Handle) na Środek i zaznaczenie opcji Instant Apply.



97.   Obraz źródłowy -  obraz_4.png.
98.   Suwak Od ramki (From Frame) ustaw na 20.
99.   Suwak Do ramki (To Frame) ustaw na 40.
100.   Klikając w Otwórz (Open) K4 otwórz zapisane parametry punktów animacji z pliku do_góry_i_w_prawo.path_points.
101.   Modyfikuj ramkę kluczową drugiego punktu animacji zmieniając ją z 29 na 30.
102.   Obejrzyj animkę.
103.   Jeśli wszystko jest jak należy możesz zapisać animację.




Etap siódmy – animowanie obrazu piątego




104.   Obraz źródłowy -  obraz_5.png.
105.   Suwak Od ramki (From Frame) ustaw na 30.
106.   Suwak Do ramki (To Frame) ustaw na 50.
107.   Klikając w Otwórz (Open) K4 otwórz zapisane parametry punktów animacji z pliku w_prawo_i_do_góry.path_points.
108.   Obejrzyj animkę.
109.   Jeśli wszystko jest jak należy możesz zapisać animację.




Etap ósmy – animowanie obrazu szóstego




110.   Obraz źródłowy -  obraz_6.png.
111.   Suwak Od ramki (From Frame) ustaw na 40.
112.   Suwak Do ramki (To Frame) ustawił się automatycznie na 60 i tak go pozostaw.
113.   Klikając w Otwórz (Open) K4 otwórz zapisane parametry punktów animacji z pliku do_góry_i_w_prawo .path_points.
114.   Modyfikuj ramkę kluczową drugiego punktu animacji zmieniając ją z 49 na 50.
115.   Obejrzyj animkę.
116.   Jeśli wszystko jest jak należy możesz zapisać animację.

   Terza znów na piechotę ;) .




Etap dziewiąty – powtórne animowanie obrazu pierwszego




117.   Otwórz okno Ścieżki ruchu (Move Path).
118.   Jako Obraz źródłowy (Source Image/Layer) w rozwijanym menu ustaw warstwę [/i]obraz_1.png[/i].
119.   Tryb kroku (Stepmode) ustaw na Brak (None).
120.   Uchwyt (Handle) ustaw na Środek (Center).
121.   Ustaw współrzędne E, X = 150, Y = 100.
122.   Zaznacz opcję Instant Apply.
123.   Kliknij w Dodaj punkt (Add Point).
124.   Kliknij w zakładkę Perspektywa (Perspective).
125.   Zmień parametry y1 i y3 na 0.600.
126.   Wróć do zakładki Zmiana rozmiaru (Scale and Modify).
127.   Kliknij w Skaluj proporcjonalnie .
128.   Zmień Szerokość (Width) na 1.
129.   Zmień współrzędną uchwytu X na 0 (E).
130.   Suwak Od ramki (From Frame) ustaw na 50.
131.   Suwak Do ramki (To Frame) pozostaw na 60.
132.   Obejrzyj animkę.

   Podgląd animki przy zaznaczonej opcji Exact object on frames w oknie ustawień podglądu:



133.   Jeśli animacja wygląda prawidłowo zapisz parametry punktów animacji do pliku nadając mu nazwę w_prawo.path_points.

   W tym momencie możesz zadać pytanie po co ten plik skoro animacja jest prawie gotowa, podobnie jak nie wykorzystane  parametry z pliku do_góry.path_points. Odpowiedź jest prosta, choćby do stworzenia drugiej animacji. Dzięki nim praca jest szybsza i przyjemniejsza.

134.   W oknie Ścieżki ruchu (Move Path) kliknij Ok w celu zapisania animki.




Etap dziesiąty – tworzenie pliku animacji




135.   Z menu Video wybierz opcję Ramki do obrazu... (Frames to Image...)
136.   W oknie dialogowym ustaw suwak Do ramki (To Frames) na 59. W jakim celu? Ramka pierwsza i sześćdziesiąta są takie same, więc ta ostatnia jest zbędna.
137.   Zmień wpis w Nazwa bazowa warstwy (Layer Basename) z frame_[######] (41ms) na frame_[######] (66ms), co zmniejszy ilość klatek na sekundę z 24 na 15.



138.   Kliknij Ok. Utworzony zostanie nowy obraz o nazwie frame_000001.xcf.
139.   W zakładce Warstwy powyższego pliku zmodyfikuj atrybuty następujących warstw:
   - frame_000001 (66ms),
   - frame_000010 (66ms),
   - frame_000020 (66ms),
   - frame_000030 (66ms),
   - frame_000040 (66ms),
   - frame_000050 (66ms),
zmieniając fragment ,,66ms" na ,,1000ms".

   (W zakładce Warstwy klikasz dwa razy LPM na nazwę warstwy i zmieniasz jej nazwę)

140.   Z menu Filtry wybierz Animacja -> Optymalizuj (różnica). Powstanie nowy obraz.
141.   Z menu Zaznaczenie wybierz Wszystko.
142.   Z tego samego menu wybierz Zmniejsz.
143.   W oknie dialogowym ustaw 1 piksel.
144.   Z menu Obraz wybierz Kadruj obraz.

   W jakim celu kadrujesz obraz? Zapisz animację przed kadrowaniem i przyjrzyj się lewej i dolnej krawędzi animacji. Wnioski nasuną się same.

145.   Zapisz obraz pod dowolną nazwą w formacie GIF, pamiętając o zaznaczeniu opcji ,,Zapisz jako animację" w oknie eksportu.

   I to by było na tyle.
   Gratuluję, stworzyłeś(aś) piękną animację.




K71




Tutorial by Kifer71, rozpowszechniany na licencji CC-NC-BY-SA.