Polskie Forum Użytkowników GIMP-a

---

          Wziąłem się za tego tutka na prośbę Kuby - Połysk na obrazku (http://www.gimpuj.info/index.php/topic,151.0.html) . Efekt nie jest może oszałamiający, ale tut pokazuje jak się do tego zabrać. Eksperymentuj z szerokością "błysku", ilością warstw, i czasem ich wyświetlania w animacji, a twoje wyniki będą lepsze.

          Wzorowałem się na tutorialu New and Improved Animated Highlight, którego autorem jest Fencepost. Niestety nie jest on już dostępny w sieci.

          Tutorial będzie opisywał dwa sposoby tworzenia animacji. Pierwsza część dotyczy GIMP-a w wersji 2.6, co nie znaczy, że nie da się jej zastosować w 2.8, jedynie nazwy narzędzi mogą być inne. Druga pokaże nowe podejście do tworzenia animacji oparte o funkcję grupowania warstw dostępną w 2.8.

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

---

[lp] Zaczynamy

---

[lp] 1.  Otwórz nowy obraz o wymiarach 160x60px i czarnym #000000 tłem i zapisz jako animowany błysk.xcf.

[lp] 2.  Narzędziem Powiększenie <zoom> (L) powiększ widok do 300% (trzy kliknięcia na obrazie), będzie Ci wygodniej pracować.

[lp] 3.  Wybierz narzędzie Tekst <tekst> (T) i w karcie Opcje narzędzia ustaw parametry tekstu.

• Czcionka : Arial Black
• Rozmiar: 50px
• Kolor: #96b22c

[lp] 4.  Wpisz na obrazie tekst PFUG.

[lp] 5.  Narzędziem Wyrównanie (http://www.gimpuj.info/gallery/28971_30_12_12_1_13_00.png) (Q) wyśrodkuj warstwę PFUG, następnie dopasuj jej wymiary do obrazu Warstwa -> Dopasuj wymiary warstwy do obrazu (http://www.gimpuj.info/gallery/28971_30_12_12_1_22_20.png).

[lp] 6.  Zapisz obraz.

          Pamiętaj! Zapisuj obraz co jakiś czas, by nie utracić wyników pracy np. przez niespodziewaną awarię programu czy systemu.

[lp] 7.  Dodaj nowa warstwę i nazwij ją błysk #1.

[lp] 8.  Wybierz Obraz -> Konfiguruj siatkę (http://www.gimpuj.info/gallery/28971_30_12_12_1_56_22.png). Ustaw następujące parametry:

• Styl linii: Przecięcia (krzyżyki)
• Kolor: czerwony #ff0000
• Odstępy

         - Szerokość 5px
         - Wysokość 5px

Reszta bez zmian



[lp] 9.  Ustaw kolor pierwszoplanowy na biały #ffffff.

[lp] 10.  Teraz włącz widoczność siatki i przyciąganie do siatki. Obie funkcje: Włącz siatkę i Przyciągaj do siatki znajdziesz w menu Widok.

[lp] 11.  Mając aktywną warstwę błysk #1 wybierz narzędzie Gradient <gradient> (L).

[lp] 12.  W karcie Opcje narzędzia ustaw parametry gradientu:

• Gradient: Kolor pierwszoplanowy na przezroczystość
• Kształt: Dwuliniowy

Reszta bez zmain



[lp] 13.  Przeciągnij gradient od trzeciej kolumny widocznej siatki o 10px w prawo do piątej kolumny siatki.

          Podgląd z okna obrazu przy powiększeniu 300%:



          Efekt w obrazie powinien wyglądać tak:



[lp] 14.  Przytnij warstwę błysk #1. Warstwa -> Przytnij warstwę.

          Warstwa ma teraz wymiary 19x60px, aby wygodniej się ją animowało warto powiększyć jej szerokość do 20px.

[lp] 15.  Przeskaluj warstwę błysk #1 wybierając Warstwa -> Skaluj warstwę (http://www.gimpuj.info/gallery/28971_30_12_12_10_42_44.png). W oknie dialogowym skalowania odznacz skalowanie proporcjonalne. To ten łańcuszek na prawo od szerokości i wysokości. Ma być rozerwany. W opcji Szerokość wpisz 20 i kliknij przycisk Przeskaluj.

[lp] 16.  Narzędziem Przesunięcie <przesuwanie> (M) ustaw warstwę błysk #1 tak by jej prawa krawędź stykała się z lewą krawędzią obrazu. Najlepiej odwzoruje to zrzut okna obrazu.

---

          By otrzymać w miarę płynną animację, warstwę błysk #1 należy przesuwać co 5 pikseli w prawo. Tak więc w kolejnych krokach należy duplikować wspomnianą warstwę i przesuwać o 5 pikseli w prawo każdą jej kopię, aż do momentu, gdy ostatnia kopia, swą lewą krawędzią będzie stykać się z prawą krawędzią obrazu. Można też dokonać obliczeń ile razy należy zduplikować warstwę, a następnie przesuwać jej kopie w żądane miejsce. Wygodniejszy, moim zdaniem jest sposób pierwszy i to on zostanie przedstawiony w dalszej części tutoriala.

---

[lp] 17.  Duplikuj warstwę błysk #1. Otrzymasz nową warstwę o nazwie błysk #2. Przy pomocy narzędzia Przesunięcie (M) przemieść ją o 5px w prawo. Teraz kolejna duplikacja i przesunięcie nowej kopii o pięć pikseli i tak aż do uzyskania trzydziestu siedmiu warstw z błyskiem.

[lp] 18.  W karcie Warstwy kliknij PPM na warstwę PFUG i z rozwiniętego menu wybierz Kanał alfa na zaznaczenie (http://www.gimpuj.info/gallery/28971_16_05_10_5_11_54.png).

[lp] 19.  Z menu Zaznaczenie wybierz Odwróć (http://www.gimpuj.info/gallery/28971_16_05_10_2_39_59.png) (Ctrl+I).

[lp] 20.  W karcie Warstwy zaznacz warstwę błysk #1 i wyczyść zaznaczenie Edycja -> Wyczyść (Delete). Wykonaj tę operację na wszystkich warstwach z błyskiem i usuń zaznaczenie. Zaznaczenie -> Brak (http://www.gimpuj.info/gallery/28971_27_01_13_9_59_37.png) (Shift+Ctrl+A).

[lp] 21.  Teraz połącz tekst z tłem. PPM w karcie warstw kliknij na warstwę PFUG i z rozwiniętego menu wybierz Połącz w dół (http://www.gimpuj.info/gallery/28971_27_01_13_10_11_50.png).

[lp] 22.  Zmień nazwę warstwy Tło na tekst #1 i duplikuj ją.

[lp] 23.  Nową warstwę tekst #2 przesuń pod warstwę błysk #2 i duplikuj ją.

[lp] 24.  Nową warstwę tekst #3 przesuń pod warstwę błysk #3 i duplikuj ją, i tak aż do uzyskania trzydziestu siedmiu warstw z tekstem.

          W karcie warstw wygląda to następująco:



[lp] 25.  Połącz wszystkie warstwy błysków z warstwami tekstu. Kliknij PPM na warstwę błysk #1 i z rozwiniętego menu wybierz Połącz w dół. Następnie wykonaj tę czynność na warstwie błysk #2 i tak aż do warstwy błysk #37

---

[lp] 26.  Wybierz Filtry -> Animacja -> Odtwórz. W oknie Animowanie Playbacku kliknij przycisk Start. Animacja będzie się odtwarzać. Jej prędkość to dziesięć klatek na sekundę. Jeśli chcesz przyspieszyć odtwarzanie, kliknij przycisk szybkości i z rozwiniętego menu wybierz odpowiednie przyspieszenie.



          Animacja wyświetlana z prędkością dziesięciu klatek na sekundę.

---

          Widać wyraźnie, że animacja jest zbyt wolna. Można ją przyspieszyć wyświetlając większą ilość klatek na sekundę. Niestety, o ile dobrze będzie wyglądać w GIMP-ie, to już w przeglądarce ilość klatek zostanie zredukowana do dziesięciu na sekundę. Jedynym sposobem na przyspieszenie jest redukcja ilości klatek. Możesz eksperymentować z ilością usuwanych klatek. Ja postanowiłem pozostawić co trzecią.

---

[lp] 27.  Usuń zbędne warstwy, pozostawiając te z numerami: 1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34, 37.

          Podgląd z karty warstw.

---

---

          By plik wynikowy nie miał zbyt dużej wagi warto go przed zapisem do formatu gif zoptymalizować.

---

[lp] 28.  Wybierz Filtry -> Animacja -> Optymalizuj (różnica). Powstanie nowy obraz bez nazwy. We wszystkich nazwach warstw zobaczysz dodany czas i tryb wyświetlania.



[lp] 29.  W nowym obrazie wybierz Obraz -> Tryb -> Indeksowany. Otworzy się okno dialogowe Konwersja do trybu indeksowanego. Ustawienia domyślne są jak najbardziej prawidłowe. Kliknij w przycisk Konwertuj (http://www.gimpuj.info/gallery/28971_10_02_13_12_42_23.png).

[lp] 30.  Zapisz obraz wybierając Plik -> Zapisz jako (Shift+Ctrl+S). W oknie dialogowym Zapis obrazu w polu Nazwa wpisz animacja.gif i kliknij przycisk Zapisz.

[lp] 31.  W oknie dialogowym Eksport pliku zaznacz W postaci animacji i kliknij przycisk Eksportuj. W kolejnym oknie Zapisz jako GIF kliknij przycisk Zapisz i gotowe.

---

[lp] 32.  Otwórz nowy obraz o wymiarach 160x60px i czarnym #000000 tłem i zapisz jako animowany błysk.xcf.

[lp] 33.  Narzędziem Powiększenie <zoom> (L) powiększ widok do 300% (trzy kliknięcia na obrazie), będzie Ci wygodniej pracować.

[lp] 34.  Wybierz narzędzie Tekst <tekst> (T) i w karcie Opcje narzędzia ustaw parametry tekstu.

• Czcionka : Arial Black
• Rozmiar: 50px
• Kolor: #96b22c

[lp] 35.  Wpisz na obrazie tekst PFUG.

[lp] 36.  Narzędziem Wyrównanie (http://www.gimpuj.info/gallery/28971_30_12_12_1_13_00.png) (Q) wyśrodkuj warstwę PFUG, następnie dopasuj jej wymiary do obrazu Warstwa -> Dopasuj warstwę do wymiarów obrazu (http://www.gimpuj.info/gallery/28971_30_12_12_1_22_20.png).

[lp] 37.  Zapisz obraz jako animacja.xcf.

          Pamiętaj! Zapisuj obraz co jakiś czas, by nie utracić wyników pracy np. przez niespodziewaną awarię programu czy systemu.

[lp] 38.  Dodaj nowa warstwę i nazwij ją błysk #1.

[lp] 39.  Wybierz Obraz -> Skonfiguruj siatkę (http://www.gimpuj.info/gallery/28971_30_12_12_1_56_22.png). Ustaw następujące parametry:

• Styl linii: Przecięcia (krzyżyki)
• Kolor: czerwony #ff0000
• Odstępy

         - Szerokość 5px
         - Wysokość 5px

Reszta bez zmian



[lp] 40.  Teraz włącz widoczność siatki i przyciąganie do siatki. Obie funkcje: Wyświetlanie siatki i Przyciąganie do siatki znajdziesz w menu Widok.

[lp] 41.  Ustaw kolor pierwszoplanowy na biały #ffffff.

[lp] 42.  Mając aktywną warstwę błysk #1 wybierz narzędzie Gradient <gradient> (L).

[lp] 43.  W karcie Opcje narzędzia ustaw parametry gradientu:

• Gradient: Kolor pierwszoplanowy na przezroczystość
• Kształt: Dwuliniowy

Reszta bez zmain



[lp] 44.  Przeciągnij gradient od trzeciej kolumny widocznej siatki o 10px w prawo do piątej kolumny siatki.

          Podgląd z okna obrazu przy powiększeniu 300%:



          Efekt w obrazie powinien wyglądać tak:



[lp] 45.  Przytnij warstwę błysk #1. Warstwa -> Automatycznie przytnij warstwę.

          Warstwa ma teraz wymiary 19x60px, aby wygodniej się ją animowało warto powiększyć jej szerokość do 20px.

[lp] 46.  Przeskaluj warstwę błysk #1 wybierając Warstwa -> Skaluj warstwę (http://www.gimpuj.info/gallery/28971_30_12_12_10_42_44.png). W oknie dialogowym skalowania odznacz skalowanie proporcjonalne. To ten łańcuszek na prawo od szerokości i wysokości. Ma być rozerwany. W opcji Szerokość wpisz 20 i kliknij przycisk Przeskaluj.

[lp] 47.  Narzędziem Przesunięcie <przesuwanie> (M) ustaw warstwę błysk #1 tak by jej prawa krawędź stykała się z lewą krawędzią obrazu. Najlepiej odwzoruje to zrzut okna obrazu.

          Fragment okna obrazu z prawidłowo ustawioną warstwą błysk. Widok przy powiększeniu 300%:



[lp] 48.  Zmień nazwę warstwy PFUG na PFUG #1 i nazwę warstwy Tło na Tło #1.

[lp] 49.  W karcie Warstwy utwórz nową grupę warstw, klikając ikonę folderu.



[lp] 50.  Zmień nazwę grupy na klatka #1 i umieść w niej wszystkie warstwy zachowując ich pierwotną kolejność.



[lp] 51.  W karcie warstw aktywuj grupę klatka #1 i duplikuj ja klikając ikonę duplikacji (http://www.gimpuj.info/gallery/28971_10_02_13_7_50_42.png).

[lp] 52.  Rozwiń grupę klatka #2 i aktywuj warstwę błysk #2. Przesuń ją narzędziem Przesunięcie (M) o 5px] w prawo.

[lp] 53.  W karcie warstw aktywuj grupę klatka #2, duplikuj ją i w nowej grupie klatka #3 przesuń warstwę błysk #3 o 5px] w prawo.

[lp] 54.  Postępuj analogicznie z kolejnymi grupami, aż do otrzymania 37 grup.

---

          W tym momencie już możesz podejrzeć animację, co da Ci pewność, że nie popełniłeś(aś) błędu w trakcie duplikowania grup i przesuwania warstw z błyskiem.

---

[lp] 55.  Wybierz Filtry -> Animacja -> Odtwarzanie. W oknie odtwarzania powinno to wyglądać jak niżej:



[lp] 56.  W grupie warstw klatka #1 aktywuj warstwę PFUG #1 i kliknij na nią PPM, a z menu kontekstowego wybierz Kanał alfa na zaznaczenie (http://www.gimpuj.info/gallery/28971_16_05_10_5_11_54.png).

[lp] 57.  Z menu Zaznaczenie wybierz Odwróć (http://www.gimpuj.info/gallery/28971_16_05_10_2_39_59.png) (Ctrl+I).

[lp] 58.  W karcie Warstwy zaznacz warstwę błysk #1 i wyczyść zaznaczenie Edycja -> Wyczyść (Delete). Wykonaj tę operację na wszystkich warstwach z błyskiem w każdej z grup i usuń zaznaczenie. Zaznaczenie -> Brak (http://www.gimpuj.info/gallery/28971_27_01_13_9_59_37.png) (Shift+Ctrl+A).

---

[lp] 59.  Wybierz Filtry -> Animacja -> Odtwórz. W oknie Animowanie Playbacku kliknij przycisk Start. Animacja będzie się odtwarzać. Jej prędkość to dziesięć klatek na sekundę. Jeśli chcesz przyspieszyć odtwarzanie, kliknij przycisk szybkości i z rozwiniętego menu wybierz odpowiednie przyspieszenie.

---

          W odróżnieniu od poradnika w wersji 2.6, tutaj postanowiłem przyspieszyć animacje dwukrotnie. Pamiętając, iż przeglądarki wyświetlają w większości animacje z prędkością dziesięciu klatek na sekundę, nie zmieniałem czasu wyświetlania, a usunąłem zbędne klatki. Najlepiej w tym przypadku jest pracować na kopii pierwotnego pliku xcf.

---

[lp] 60.  Zapisz kopię otwartego pliku xcf. Plik -> Zapisz kopię. Nadaj jej nazwę [animacja1.xcf/i].

[lp] 61.  Otwórz plik animacja1.xcf.

[lp] 62.  W karcie warstw usuń z obrazu grupy warstw o parzystych numerach. Animacja po tym zabiegu powinna wyglądać następująco:

---

---

By plik wynikowy nie miał zbyt dużej wagi warto go przed zapisem do formatu gif zoptymalizować.

---

[lp] 63.  Wybierz Filtry -> Animacja -> Optymalizuj (różnica). Powstanie nowy obraz bez nazwy. We wszystkich nazwach warstw zobaczysz dodany czas i tryb wyświetlania.



[lp] 64.  W nowym obrazie wybierz Obraz -> Tryb -> Indeksowany. Otworzy się okno dialogowe Konwersja do trybu indeksowanego. Ustawienia domyślne są jak najbardziej prawidłowe. Kliknij w przycisk Konwertuj (http://www.gimpuj.info/gallery/28971_10_02_13_12_42_23.png).

[lp] 65.  Zapisz obraz wybierając Plik -> Wyeksportuj (Shift+Ctrl+E). W oknie dialogowym Eksport obrazu w polu Nazwa wpisz animacja.gif i kliknij Wyeksportuj.

[lp] 66.  W oknie Eksport obrazu jako GIF aktywuj opcję W postaci animacji i kliknij Wyeksportuj. Twoja animacja jest gotowa.

---

          Jakie korzyści płyną z użycia grupowania warstw w GIMP-ie 2.8? Otóż przede wszystkim masz większą kontrolę nad poszczególnymi klatkami animacji. Można np. dowolnie zmieniać kolorystykę tekstu czy błysku w dowolnym momencie tworzenia animacji, czy zmienić tło lub je usunąć.

---

[lp]Koniec

---

---

          Życzę owocnej zabawy z animacjami w GIMP-ie.

---

Do sprawdzenia. Po poprawieniu ewentualnych błędów dodam ikonę i opis do indeksu.