[Kifer71]

Kalejdoskop z wykorzystaniem GAP
Tutorial

Oryginał: Animated Kaleidoscope GIMP
Opracowanie: Kifer71
Poziom trudności: trudny

Oryginalny tutorial nosi nazwę Animated Kaleidoscope GIMP, którego autorem jest fence-post. Do wykonania tego tutoriala potrzebny Ci będzie dodatek GAP i dwa skrypty, które umieściłem w załączniku. Podzieliłem ten tutorial na kilka etapów, aby był zrozumiały i bardziej przejrzysty.

Dla leniwych znalazłem jeszcze skrypt robiący taki właśnie kalejdoskop (znajdziecie go w załączniku). Należy wrzucić go do katalogu skryptów GIMP-a (w Windowsie XP jest to domyślnie: C:\Program Files\GIMP-2.0\share\gimp\2.0\scripts). Po wrzuceniu do powyższego katalogu pojawi się on w menu Filtry -> Animacja -> Kalejdoskop. Autorem skryptu jest LightningIsMyName.

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


Zaczynamy

Etap pierwszy

1. Na początek utwórz nowy folder na potrzeby animacji - po wykonaniu animacji będziesz mógł go usunąć. Ja swój nazwałem animacja i do niego będę się odnosił w dalszej części.

2. Otwórz plik, który będziesz chciał animować (Plik -> Otwórz... [Ctrl+O]) lub stwórz go. Ważne, aby obrazek miał wymiary 100x100 pikseli. Równie dobrze możesz pobrać ten, widoczny niżej.

3. Duplikuj warstwę Tło (Warstwa -> Duplikuj warstwę [Shift+Ctrl+D]).

4. Wykorzystajmy teraz jeden ze skryptów, które pobrałeś przed rozpoczęciem tego tutoriala. Wejdź w Widok -> Crosshair Guides.

5. Na duplikacie tła wejdź w Warstwa -> Przekształcenie -> Odbij poziomo.

6. Włącz przyciąganie do siatki (Widok -> Przyciągaj do siatki) - będzie Ci łatwiej rysować zaznaczenie.

7. Wybierz narzędzie Zaznaczenie prostokątne [R] i zaznacz lewą połowę warstwy tak, jak jest to pokazane na obrazku poniżej.

8. Wybierz Warstwa -> Kadruj według zaznaczenia.

9. Usuń zaznaczenie (Zaznaczenie -> Nic [Shift+Ctrl+A]).

10. Następnie wybierz Warstwa -> Połącz w dół.

11. Teraz przejdź do Filtry -> Odwzorowania -> Kafelki... i ustaw opcje tak, jak na poniższym obrazku.

Tak powinien wyglądać nasz obraz po zastosowaniu filtru:

12. Następnie wejdź w Obraz -> Wymiary płótna, zmień wysokość na 100 pikseli i kliknij na "Zmień rozmiar".

13. Wybierz narzędzie Przesunięcie [M] i przesuń warstwę o 50 pikseli w dół tak, aby jej górna krawędź stykała się z poziomą prowadnicą.

14. Z duplikuj warstwę Tło (Warstwa -> Duplikuj warstwę [Shift+Ctrl+D]) trzy razy i nazwij wszystkie warstwy licząc od góry:

• lewy obraz
• prawy obraz
• górny obraz
• dolny obraz

15. Wyłącz widoczność () warstw lewy obraz i prawy obraz.

16. Na warstwie górny obraz wejdź w Warstwa -> Przekształcenie -> Odbij pionowo i przesuń ją za pomocą narzędzia Przesunięcie [M] o 200 pikseli w górę  tak, aby jej dolna krawędź znalazła się na poziomej prowadnicy.

17. Włącz widoczność () warstwy prawy obraz, na niej wejdź w Warstwa -> Przekształcenie -> Obróć o 90^o w lewo i przesuń ją (Przesunięcie [M]) o 100 pikseli do góry i 100 pikseli w prawo tak, aby jej lewa krawędź znalazła się na pionowej prowadnicy.

18. Włącz widoczność () warstwy lewy obraz, na niej wejdź w Warstwa -> Przekształcenie -> Obróć o 90^o w prawo i przesuń ją (Przesunięcie [M]) o 100 pikseli do góry i 100 pikseli w lewo tak, aby jej prawa krawędź znalazła się na pionowej prowadnicy.

Tak powinna wyglądać nasza paleta warstw:

Etap drugi

1. Utwórz nową warstwę (Warstwa -> Nowa warstwa... [Shift+Ctrl+N]) i wypełnij ją za pomocą narzędzia Wypełnienie kubełkiem [Shift+B] kolorem #000000.

2. Wybierz narzędzie Powiększenie [Z] i przybliż obraz do 400%.

3. Ustaw kolor pierwszoplanowy na #ffffff.

4. Wyłącz przyciąganie do siatki (Widok -> Przyciągaj do siatki) i usuń prowadnice (Obraz -> Prowadnice -> Usuń wszystkie prowadnice).

5. Wybierz narzędzie Ołówek [N] i ustaw pędzel na Circle (01).

6. Kliknij ołówkiem na pozycji 1, 1 i trzymając wciśnięty klawisz Shift ciągnij do pozycji 50, 50.

7. Puść Shift'a i kliknij na pozycji 51, 50, a następnie z wciśniętym klawiszem Shift ciągnij aż do pozycji 100, 1.

8. Następnie puść Shift'a i kliknij na pozycji 100, 1, przeciągaj kursor z wciśniętym klawiszem Shift dopóki nie najedziesz na pozycję 1, 0.

9. Wybierz narzędzie Zaznaczenie rozmyte , ustaw próg na 0 i kliknij wewnątrz białego trójkąta.

10. Następnie wypełnij nasze zaznaczenie za pomocą narzędzia Wypełnienie kubełkiem [Shift+B] kolorem #ffffff.

Tak powinna wyglądać nasza maska, którą wykorzystasz do prawidłowego animowania kalejdoskopu:

11. Wybierz narzędzie Powiększenie [Z] i zmniejsz widok do 100%.

12. Duplikuj "maskę" (Warstwa -> Duplikuj warstwę [Shift+Ctrl+D]) trzy razy i nazwij warstwy licząc od góry:

• prawa maska
• lewa maska
• górna maska
• dolna maska

13. Na warstwie dolna maska wejdź w Warstwa -> Przekształcenie -> Odbij pionowo.

14. Warstwę lewa maska obróć o 90^o w lewo (Warstwa -> Przekształcenie -> Obróć o 90^o w lewo).

15. Warstwę prawa maska obróć o 90^o w lewo (Warstwa -> Przekształcenie -> Obróć o 90^o w prawo).

16. Poustawiaj warstwy tak, jak jest to pokazane na screenie.

17. Zapisz plik (Plik -> Zapisz jako [Shift+Ctrl+S]) w folderze animacja pod nazwą warstwy.xcf

Etap trzeci

1. Utwórz nowy obraz (Plik -> Nowy... [Ctrl+N]) o dowolnym kolorze tła (u mnie jest to przeźroczyste tło) i wymiarach 100x100 pikseli.

2. Zapisz go w folderze animacja pod nazwą klatka_001.xcf. Nie nalegam, aby nazwa była taka sama, ale ważne, żeby trzymać się wzoru: nazwa_001.xcf.

3. Wybierz Video -> Duplicate Frames... i ustaw opcje tak, jak na screenie poniżej.

4. Teraz wejdź w Video -> Move Path.... Ważne, abyś miał/a otwarty obraz warstwy.xcf. Czerwonym kolorem zaznaczyłem opcje używane w tym tutorialu.

5. W okienku Move Path wybierz:

• Source Image/Layer (A): dolny obraz
• Stepmode (B): None
• Handle (C): Left Top
• Instant Apply (I): zaznaczone
• Clip To Frame (H): zaznaczone

6. Kliknij w Add Point (G). Zauważysz, że Current Point (D) zmieni się z [ 1] of [ 1] na [ 2] of [ 2].

7. Zmień parametr Y (E2) z 0 na -100 (słownie: minus sto).

8. Teraz możesz obejrzeć animację klikając w Anim Previev[/v]. Podgląd animacji powinen wyglądać tak:

9. Zamknij okno podglądu i tymczasowy plik z podglądem (nie zapisuj go), a następnie w oknie Move Path kliknij OK.

10. Teraz dodamy maskę do pierwszej części naszego kalejdoskopu. Otwórz okno Move Path (Video -> Move Path).

11. W oknie Move Path ustaw:

• Source Image/Layer (A): dolna maska
• Stepmode: None

12. Jeśli chcesz możesz obejrzeć animację klikając w Anim Previev. Przez cały czas powinna być widoczna tylko warstwa dolna maska.

13. Jeśli animacja wygląda poprawnie klikamy na OK w oknie Move Path.

14. Teraz wejdź w Video -> Frames Modify... i w pole Layer Pattern wpisz 1

15. W tym samym oknie kliknij w Function i z rozwijanego menu wybierz Layer Mask -> Copy layermask from layer above i kliknij w OK.

16. Nasza paleta warstw powinna wyglądać w tym momencie tak:

17. Teraz wybierz Video -> Frames Modify... i w pole Layer Pattern wpiz 0,2 (słownie: zero przecinek dwa), czyli numery warstw do usunięcia.

18. Następnie wybierz Function -> Delete layer(s) i kliknij na OK.

Etap czwarty

1. Animacja obiektu (etap trzeci, pkt. 4), ustawienia:

• Source Image/Layer: górny obraz
• Stepmode: None
• Handle: Left Top
• Instant Apply: zaznaczone
• Clip To Frame: zaznaczone
• Klikamy w Add Point
• Ustawiamy parametr Y dla drugiego punktu animacji na 100

2. Dodawanie obrazu maski warstwy (etap trzeci, pkt. 10), ustawienia:

• Source Image/Layer: górna maska
• Stepmode: None

3. Zamiana warstwy na maskę właściwą (etap trzeci, pkt. 14), ustawienia:

• identyczne, jak w etapie trzecim

4. Usuwanie warstw (etap trzeci, pkt. 17):

• numer warstwy: 0

Etap piąty

1. Animacja obiektu (etap trzeci, pkt. 4), ustawienia:

• Source Image/Layer: prawy obraz
• Stepmode: None
• Handle: Left Top
• Instant Apply: zaznaczone
• Clip To Frame: zaznaczone
• Klikamy w Add Point
• Ustawiamy parametr X dla drugiego punktu animacji na -100 (słownie: minus sto)

2. Dodawanie obrazu maski warstwy (etap trzeci, pkt. 10), ustawienia:

• Source Image/Layer: prawa maska
• Stepmode: None

3. Zamiana warstwy na maskę właściwą (etap trzeci, pkt. 14), ustawienia:

• identyczne, jak w etapie trzecim

4. Usuwanie warstw (etap trzeci, pkt. 17):

• numer warstwy: 0

Etap szósty

1. Animacja obiektu (etap trzeci, pkt. 4), ustawienia:

• Source Image/Layer: lewy obraz
• Stepmode: None
• Handle: Left Top
• Instant Apply: zaznaczone
• Clip To Frame: zaznaczone
• Klikamy w Add Point
• Ustawiamy parametr X dla drugiego punktu animacji na 100

2. Dodawanie obrazu maski warstwy (etap trzeci, pkt. 10), ustawienia:

• Source Image/Layer: lewa maska
• Stepmode: None

3. Zamiana warstwy na maskę właściwą (etap trzeci, pkt. 14), ustawienia:

• identyczne, jak w etapie trzecim

4. Usuwanie warstw (etap trzeci, pkt. 17):

• numer warstwy: 0

Etap siódmy

1. Po zakończeniu wszystkich powyższych czynności nasza paleta warstw powinna wyglądać następująco:

2. Teraz wchodzimy w Video -> Frames to Image... i ustawiamy wszystko tak, jak na screenie poniżej, a następnie klikamy na OK.

3. Utworzy nam się nowy plik bez nazwy. Zapisujemy go pod dowolną nazwą z rozszrzeniem *.gif (np. kalejdoskop.gif).

4. W oknie eksportu zaznacz Zapisz jako animację i kliknij na Eksportuj.

5. W kolejnym oknie klikasz na OK.

Koniec


Miłego GIMP-owania

[Katkas]

Katkas sorki za zwłokę.
.........................
Walcz Katkas.
Powodzenia .

Nie szkodzi

Serdecznie dziękuję za pomoc a oto rezultat mojej walki

[noss]

Efekt jest bardzo fajny i tutorial świetnie wykonany, zresztą jak zwykle.

Oto moje dzieło zrobione za drugim podejściem, bo za pierwszym byłem za szybki i pomieszałem ustawienia.



Znalazłem też dwa małe błędy.

8.   Z menu Widok wybierz Kadruj warstwę.

Powinno być Warstwa

20.   Zmień nazwę warstwy kopia: Tło na dolny obraz.

Nazwa warstwy powinna brzmieć Tło, bo to nie jest kopia.

[heex307]

Świetny tutek, fajny efekt, dobrze przetłumaczony i
łatwy w zrobieniu. Na dole efekt mojej pracy.

[masiek]

Bardzo fajny tutorial ..dobrze opisany
Pierwszy efekt:

a teraz w szybszej wersji

[smolawl]

Świetny tutorial dzięki niemu zapoznałem się z GAPem.

Mój wynik:

[Grolak]

A mi się nie chce robić więc ściągnałem skrypta i otworzyłem za pomocą WinRARa i ten plik dałem do Documments and Settings/Właściciel/.gimp 2.4/scripts i gdy odświeżyłem skrypty to pokazał mi sie błąd że nie może odczytać, itp.

Ziomioslaw: w Windowsie używa się backslashy.

[Kifer71]

Grolak poniżej masz skrypt działający u mnie na 2.4.5. Skopiuj do notatnika i zapisz jako scm.

Kod:

;Duplicate Layer to the top

(define (script-fu-animated-kaleidoscope-duplicate-layer img layer1)

     (let* (

    (duplicate) (position)
     )


;undo group
(gimp-image-undo-group-start img)

(set! position (car(gimp-image-get-layer-position img layer1)))
(set! position (- position 1))

(set! duplicate (car(gimp-layer-new-from-drawable layer1 img)))
(gimp-image-add-layer img duplicate 0)

(gimp-image-set-active-layer img duplicate)

;end of undo group
(gimp-image-undo-group-end img)

))


(define (script-fu-animated-kaleidoscope inimg inlayer framenumber inpart in)

     (let*
(
(height (car(gimp-drawable-height inlayer))) ;layer height

(width (car(gimp-drawable-width inlayer))) ;layer height

(img (car (gimp-image-new width height RGB)))

(layer (car (gimp-layer-new-from-drawable inlayer img)))

(layer2) (layer3)

(offset (/ width framenumber))

(repeat 1)

(stroke (car (gimp-vectors-new img "Selection Triangle")))

(id)

(name)
)

;undo group
;(gimp-image-undo-group-start img)

(gimp-image-add-layer img layer -1)

(if (= inpart 0)
(set! id (car (gimp-vectors-stroke-new-from-points stroke 0 18 #( 0 100 0 100 0 100 50 50 50 50 50 50 0 0 0 0 0 0) TRUE)))
)
(if (= inpart 1)
(set! id (car (gimp-vectors-stroke-new-from-points stroke 0 18 #( 100 100 100 100 100 100 50 50 50 50 50 50 100 0 100 0 100 0) TRUE)))
)
(if (= inpart 2)
(set! id (car (gimp-vectors-stroke-new-from-points stroke 0 18 #( 0 100 0 100 0 100 50 50 50 50 50 50 100 100 100 100 100 100) TRUE)))
)
(if (= inpart 3)
(set! id (car (gimp-vectors-stroke-new-from-points stroke 0 18 #( 0 0 0 0 0 0 50 50 50 50 50 50 100 0 100 0 100 0) TRUE)))
)

(gimp-vectors-stroke-scale stroke id (/ width 100) (/ height 100))

(if (= 1 in)
(set! in -1) )

(if (= 0 in)
(set! in 1) )

(while (> framenumber 0)
(begin

(script-fu-animated-kaleidoscope-duplicate-layer img layer)

(set! layer2 (car (gimp-image-get-active-layer img)))


(if (= inpart 0)
(begin

(gimp-drawable-offset layer2 TRUE 0 (* (* offset repeat) in) 0)
;(gimp-free-select img 6 #( 0 100 50 50 0 0) 2 TRUE FALSE 0)

) )

(if (= inpart 1)
(begin

(gimp-drawable-offset layer2 TRUE 0 (* (- 0 (* offset repeat)) in) 0)
;(gimp-free-select img 6 #( 100 100 50 50 100 0) 2 TRUE FALSE 0)
) )

(if (= inpart 2)
(begin

(gimp-drawable-offset layer2 TRUE 0 0 (* (- 0 (* offset repeat)) in))
;(gimp-free-select img 6 #( 0 100 50 50 100 100) 2 TRUE FALSE 0)
) )

(if (= inpart 3)
(begin

(gimp-drawable-offset layer2 TRUE 0 0 (* in (* offset repeat)))
;(gimp-free-select img 6 #( 0 0 50 50 100 0) 2 TRUE FALSE 0)
) )

(gimp-vectors-to-selection stroke 2 TRUE FALSE 0 0)

(gimp-selection-invert img)

(gimp-edit-clear layer2)

(gimp-selection-none img)

(script-fu-animated-kaleidoscope-duplicate-layer img layer2)

(set! layer3 (car (gimp-image-get-active-layer img)))

(gimp-drawable-transform-rotate-simple layer3 1 TRUE 0 0 TRUE)

(set! layer2 (car (gimp-image-merge-down img layer3 2)))

(script-fu-animated-kaleidoscope-duplicate-layer img layer2)

(set! layer3 (car (gimp-image-get-active-layer img)))

(gimp-drawable-transform-rotate-simple layer3 0 TRUE 0 0 TRUE)

(gimp-drawable-transform-flip-simple layer3 1 TRUE 0 TRUE)

(set! layer2 (car (gimp-image-merge-down img layer3 2)))

(gimp-drawable-set-name layer2 (string-append "Frame " (number->string repeat) " (replace)")
)

(set! repeat (+ 1 repeat))

(set! framenumber (- framenumber 1))

) )

(gimp-image-remove-layer img layer)

(gimp-display-new img)

;end of undo group
;(gimp-image-undo-group-end img)

;Refresh View
(gimp-displays-flush)

))

(define (script-fu-animated-kaleidoscope-square inimg inlayer framenumber inpart in)


     (let*
(
(height (car(gimp-drawable-height inlayer))) ;layer height

(width (car(gimp-drawable-width inlayer))) ;layer height

)
(if (= width height)
(script-fu-animated-kaleidoscope inimg inlayer framenumber inpart in) () )

(if (not (= width height))
(gimp-message "The drawable must be a square! (Width=Height)") () )
))

(script-fu-register
"script-fu-animated-kaleidoscope-square"
"<Image>/Filters/Animation/Kalejdoskop..."
"kaleidoscope Animation"
"LightningIsMyName (LIMN) and fencepost"
"LightningIsMyName (LIMN)"
"January, 2008"
""
SF-IMAGE "Image"     0
SF-DRAWABLE "Drawable"  0
SF-ADJUSTMENT "Ilość ramek" '(25 2 150 1 1 0 1)
SF-OPTION "Wybierz część obrazu" '("Lewa część" "Prawa część" "Dolna część" "Górna część")
SF-OPTION "Kierunek ruchu" '("Do środka" "Na zewnątrz")
)

[oleyka]

Mam pytanie do Kifera.
Skorzystałam z Twojego skryptu do tworzenia kalejdoskopu. Wszystko zadziałało super. Gdy jednak patrzę na Twój avatar, to mam wrażenie, że tam kierunek ruchu jest ustawiony i do środka, i na zewnątrz. Czy tak jest faktycznie, czy to tylko złudzenie (może ma znaczenie rodzaj wczytanej grafiki?). I drugie pytanie czy za pomocą "skryptu dla leniwych" da się ten efekt (tak jak w Twoim avatarze) osiągnąć?
Proszę o wyrozumiałość i pozdrawiam.

[Koras]

Moja praca:


Naprawde super efekt, dzięki za tutorial 

[Damian UKF]

moje dzieło

[mantas]

"4.   Z menu Widok wybierz Crosshair Guides."
Ja nie mam tej opcji!...Co się stało??

[koala]

mam problem ściągnąłem skrypt dla leniwych ale kiedy próbuje go użyć wyskakuje mi błąd: "Bad syntax of binding spec in let*" co z tym zrobić ? Mam gimpa 2.6.6

[freshnrg]

i takie coś mi wyszło po wielu próbach