Przedstawiam i opisuję tutaj w jaki sposób zrobić ciekawe i efektowne animowane przejście w rotatorze userbarów.
Ogólnie jest to prosta animacja zapisana do formatu GIF, mniej lub bardziej pokombinowana.
Efekty pokazane poniżej są przykładowymi przejściami jakie mi wpadły do głowy, każdy może wymyślić coś innego bardziej mu pasującego i oryginalnego. Efekt jest pokazany na przykładzie dwóch zmieniających się obrazków, ale w analogiczny sposób można go wykonać na większej ilości UB'eków.
Tutorial również można śmiało wykorzystać do innych celów np. rotator bannerów czy sygnatur.
1. prosta zamiana
2. zamiana z blaskiem
3. zamiana z przenikaniem
4. najazd od dołu
5. najazd od góry
6. najazd na przemian
7. styl Chucka Norrisa z półobrotu
8. zjazd w dół
9. przepychanie w dół
10. układanka od dołu
11. układanka 2 od dołu (dużo pracy
)
12. przepychanie trzech userbarów w dół
Wszystkie poradniki mają dwa wspólne elementy czyli początek i koniec. Żeby nie dublować tych samych opisów kilka razy wspólna część czyli początek i koniec zostały wydzielone i osobno opisane tutaj.
Zalecam czytanie tutorialu po kolei, a nie tylko wybranych punktów, bo w dalsze części efekty opisuję mniej szczegółowo i bardziej skrótowo i można się czasami nie połapać.
Wspólny początek - Nowy obrazOtwieramy nasze userbarki w GIMPie. Oba muszą być w trybie RGB, jeżeli są indeksowane to trzeba je przerobić na RGB "Obraz - Tryb - RGB". Na pasku tytułowym danego obrazka obok jego nazwy znajduje się ta informacja.
Teraz kopiujemy jeden obrazek na drugi na nową warstwę. Na jednej warstwie jest jeden UB'ek a na drugiej drugi. Warstwę na spodzie nazywamy "UB1", a tę na górze "UB2".
Zapisujemy go jako np. "
ub-baza.xcf".
Dla bezpieczeństwa warto zapisywać naszą pracę co kilka minut "Ctrl + S".
Jesteśmy w punkcie wyjściowym dla wszystkich niżej opisanych porad.
Wspólny koniec - Optymalizacja + zapisTeraz go zoptymalizujemy. Zmieniamy tryb na Indeksowany "Obraz - Tryb - Indeksowany" "Alt + I". Maksymalną ilość kolorów pozostawiamy na 255 i przełączamy Dithering kolorów na "Brak".
Teraz drugi krok optymalizacji. Wchodzimy w "Filtry - Animacja - Optymalizuj (dla formatu GIF)". Utworzy się nowy obrazek. Od tej pory pracujemy na tym nowym obrazku.
Trzecia optymalizacja naszej animacji to ustawienie czasu wyświetlania się danej klatki. Warstwy teraz pełnią dodatkową rolę klatek animacji. Klikamy na warstwie "UB1(100ms)" i zmieniamy 100 na np. 3000, tak samo czynimy z drugą kluczową warstwą, "UB2(100ms)(combine)".
Czas widoczności ustawiliśmy na 3 sekundy (3000ms) dla każdej kluczowej klatki. Pozostałe klatki przejściowe pozostawiamy bez zmian.
Na marginesie dodam żeby nie ustawiać czasu mniejszego niż te 100ms bo niektóre przeglądarki czasami źle to wyświetlają.
Warto jeszcze zobaczyć efekt naszej pracy "Filtry - Animacja - Playback"
Ostateczną czynnością jest zapisanie do GIFa. W pierwszym okienku wybieramy "Zapisz jako animację" w drugim nic nie zmieniamy. I już.
1. Prosta zamianaNajpierw stosujemy się do punktu "Wspólny początek" a następnie "Wspólny koniec". W ten sposób osiągnęliśmy to, że obrazki będą się wyświetlały na zmianę jak widać poniżej.
To jest najprostsza, najszybsza i najłatwiejsza metoda.
Oto efekt naszej pracy "1. Prosta zamiana":
2. Zamiana z blaskiemOtwieramy nasz obrazek "ub-baza.xcf", i zapisujemy go jako np. "ub2.xcf".
Na palecie "Warstw" klikamy warstwę "UB1", a następnie tworzymy nową warstwę i w wyskakującym okienku jako nazwę wpisujemy "biala#1" (kolejno tworzone warstwy będą się same numerowały). Jako "Typ wypełnienia warstwy" wybieramy biały.
Teraz tworzymy jeszcze cztery nowe warstwy. Wystarczy kliknąć cztery razy z Shift'em na ikonce "Nowa warstwa". Następnie klikamy warstwę "UB2" i tworzymy kolejne pięć białych warstw (pięciokrotnie klikamy na ikonce "Nowa warstwa" z wciśniętym Shift'em).
Tak powinno wyglądać okienko warstw:
Obowiązkowo zapisujemy "Ctrl + S".
Przechodzimy do właściwej animacji.
Duplikujemy warstwę "UB1" czterokrotnie. Kopie umieszczamy nad warstwami i odpowiednio ustawiamy im krycie: "biala#1" - 60, "biala#2" - 30, "biala#9" - 30 i "biala#10" - 60.
Duplikujemy czterokrotnie warstwę "UB2". Kopie umieszczamy nad warstwami i odpowiednio nadajemy im krycie: "biala#4" - 30, "biala#5" - 60, "biala#6" - 60 i "biala#7" - 30.
Na rysunku jest to dokładniej opisane, która kopia nad którą warstwą i jakie ma krycie.
Teraz klikamy kolejno na każdą z tych ośmiu z duplikowanych warstw z ustawionym różnym kryciem prawym przyciskiem myszy i wybieramy "Połącz w dół".
Po tej operacji powinniśmy mieć takie warstwy:
Teraz przechodzimy do punktu
"Wspólny koniec - Optymalizacja + Zapis"Oto efekt naszej pracy "2. Zamiana z blaskiem":
3. Zamiana z przenikaniemOtwieramy nasz obrazek "ub-baza.xcf" i zapisujemy go jako "ub3.xcf".
Trzykrotnie duplikujemy warstwę
UB1. Powstałe trzy kopie przesuwamy powyżej warstwy
UB2.
Następnie trzykrotnie duplikujemy warstwę
UB2 i przesuwamy ją jako czwartą od góry.
Dla ułatwienia zmianiamy im nazwy jak na rysunku:
Teraz ustawiamy odpowiednio krycie warstwom:
UB1 - 100 (bez zmian, to będzie pierwsza klatka kluczowa)
UB2 - 25 - 25
UB2 - 50 - 50
UB2 - 75 - 75
UB2 - 100 (bez zmian, to będzie druga klatka kluczowa)
UB1 - 25 - 25
UB1 - 50 - 50
UB1 - 75 - 75
Warstwę
UB1 oraz
UB2 duplikujemy po trzy razy.
Rozmieszczamy je odpowiednio jak na rysunku:
Teraz łączymy odpowiednie pary warstw:
Warstwa właściwa z przezroczystością np.
UB2 - 25 z warstwą
kopia: UB1,
UB2 - 50 z warstwą
kopia: UB1#1 itd. Warstw kluczowych czyli
UB1 i
UB2 z niczym nie łączymy.
Po bezbłędnie wykonanym procesie otrzymujemy takie warstwy:
To już prawie koniec, teraz przechodzimy do punktu
"Wspólny koniec - Optymalizacja + Zapis" i po wszystkim.
Oto efekt naszej pracy: "3. Zamiana z przenikaniem":
4. Najazd od dołuOtwieramy nasz obrazek "ub-baza.xcf" i zapisujemy go jako "ub4.xcf".
Powiększamy obrazek lupą do 1100%. Ustawiamy poziome prowadnice kolejno od góry: pierwsza - 2px, druga - 6px, trzecia - 12 (Celowo nierówno, bo wychodzi fajniejszy efekt przyhamowania).
Warstwę
UB1 i
UB2 duplikujemy po trzy razy i umieszczamy odpowiednio jak na rysunku.
Wyłączamy widoczność wszystkich warstw poza
UB1.
Będziemy pracować na palecie warstw posuwając się od dołu do góry.
Wybieramy narzędzie "Przesuwanie warstw i zaznaczeń M".
Zaznaczamy drugą warstwę od dołu
kopia: UB2 i włączamy jej widoczność.
Przechodzimy do okna edycyjnego. Strzałkami na klawiaturze przesuwamy tę zaznaczoną warstwę w dół do najniższej prowadnicy (12px).
Zaznaczamy trzecią warstwę od dołu
kopia: UB2#1, włączamy jej widoczność i przechodzimy do okna edycyjnego. Strzałkami na klawiaturze przesuwamy warstwę w dół do środkowej prowadnicy (6px).
Analogicznie postępujemy z pozostałymi warstwami (tymi skopiowanymi) czyli:
kopia: UB2#2 - prowadnica najwyższa (2px)
kopia: UB1 - (12px)
kopia: UB1#1 - (6px)
kopia: UB1#2 - (2px)
Warstw
UB1 i
UB2 nie ruszamy, to będą nasze klatki kluczowe.
Tak powinno wyglądać okienko warstw (Podgląd - Gigantyczny):
Nie zapomnijmy zapisać naszej pracy "Ctrl+S"
I dojechaliśmy do standardowego punktu czyli
"Wspólny koniec - Optymalizacja + Zapis".
Oto efekt naszej pracy: "4. Najazd od dołu":
5. Najazd od góryPostępujemy analogicznie jak w powyższym przykładzie tyle że odwrotnie względem góry i dołu
Oto efekt naszej pracy: "5. Najazd od góry":
6. najazd na przemianRównież postępujemy analogicznie jak w powyższym przykładzie tyle żedla jednego userbarka mieżymy od dołu a drugiego od góry
Oto efekt naszej pracy: "6. najazd na przemian":
7. styl Chucka Norrisa z półobrotuOtwieramy nasz obrazek "ub-baza.xcf", i zapisujemy go jako np. "ub7.xcf".
Warstwy
UB1 i
UB2 duplikujemy po trzy razy i rozmieszczamy tak jak na screenie poniżej:
Zmieniamy im odpowiednio nazwy dla większej przejrzystości:
Wyłączamy widoczność wszystkich warstw poza
UB1 i
1 kopia UB2.
Będziemy włączać widoczność kolejno dla warstwy którą będziemy obracać.
Za pomocą narzędzia "Warstwa - Przekształcenie - Dowolny obrót"
Shift+R będziemy obracać kolejno warstwy:
Uaktywniamy warstwę
1 kopia UB2 i obracamy ją o kąt: -90 (minus 90);
warstwę
2 kopia UB2 obracamy o kąt -20;
natomiast
3 kopia UB2 o -5.
Warstwę
1 kopia UB1 o -90;
2 kopia UB1 -20;
oraz ostatnią
3 kopia UB1 -5.
Dla jasności na zrzucie poniżej dopisałem którą warstwę o jaki kąt obrócić.
Zpisujemy jeszcze raz na koniec
Ctrl + S.
Teraz przechodzimy do punktu
"Wspólny koniec - Optymalizacja + Zapis"Oto efekt naszej pracy "7. styl Chucka Norrisa z półobrotu":
8. zjazd w dółOtwieramy nasz obrazek "ub-baza.xcf", i zapisujemy go jako np. "ub8.xcf".
Duplikujemy po trzy razy warstwy
UB1 i
UB2 jak na screenie poniżej:
Zmieniamy nazwy warstw tak jak widać poniżej:
Powiększamy widok na 1600%.
Ustawiamy trzy poziome prowadnice: 2, 6 i 12 licząc od góry.
Mając wybrane narzędzie przesuwania
M strzałkami w dół przesuwamy odpowiednio warstwy do prowadnic:
1 kopia UB1 - 2
2 kopia UB1 - 6
3 kopia UB1 - 12
1 kopia UB2 - 2
2 kopia UB2 - 6
3 kopia UB2 - 12
Poniżej dopisałem którą warstwę przesunąć do której prowadnicy:
Trzykrotnie duplikujemy warstwę
UB1 i
UB2. Kopie rozmieszczamy jak zaznaczyłem czerwonymi kropkami na screenie.
Teraz będziemy łączyć odpowiednie pary warstw jak zaznaczyłem na screenie.
Łączymy poprzez kliknięcie na górnej warstwie z dwóch które chcemy połączyć PPM i wybieramy "Połącz w dół".
Po łączeniu otrzymujemy takie warstwy:
Możemy jeszcze sprawdzić czy czegoś nie sknociliśmy poprzez "Filtry - Animacja - Playback".
Zapisujemy obrazek
Ctrl + S i przechodzimy do punktu
"Wspólny koniec - Optymalizacja + Zapis"PS. W ten sam analogiczny sposób można zrobić zjazd do góry.
Oto efekt naszej pracy "8. zjazd w dół":
9. przepychanie w dółOtwieramy nasz obrazek "ub-baza.xcf", i zapisujemy go jako np. "ub9.xcf".
Duplikujemy warstwę
UB1 i kopi zmieniamy nazwę z
kopia: UB1 na
kopia: UB1 #1, następnie duplikujemy tę warstwę trzy razy. W ten sposób otrzymaliśmy już ponumerowane warstwy.
Teraz identycznie duplikujemy warstwę
UB2 i kopi zmieniamy nazwę na
kopia: UB2 #1, duplikujemy tę warstwę trzykrotnie.
Paleta warstw powinna tak wyglądać:
Teraz rozmieszczamy warstwy zgodnie ze screenem:
Powiększamy widok na 1600%.
Następnie ustawiamy na obrazku dwie poziome prowadnice od góry, jedną na 3px i drugą na 9px.
Teraz będziemy postępować z zaznaczonymi parami warstw zgodnie z opisem na screenie.
Np. warstwę
kopia: UB1 #1 przesuwamy strzałkami o trzy piksele w dół. mając uprzednio wybrane narzędzie do przesuwania
M, tak aby górna krawędź dotykała prowadnicy
3.
Drugą warstwę z pary czyli
kopia: UB2 #1 przesuwamy do góry o tyle pikseli, żeby dolną krawędzią dotykała prowadnicy
3.
Analogicznie postępujemy z pozostałymi parami według opisu na screenie:
Teraz łączymy warstwy w parach. W palecie warstw klikamy zawsze na górną z pary prawą myszą i wybieramy "Połącz w dół".
Otrzymujemy takie warstwy:
Uruchamiamy Playback i sprawdzamy czy wszystko wyszło tak jak powinno.
Jeżeli jest w porządku to standardowo przechodzimy do punktu
"Wspólny koniec - Optymalizacja + Zapis"PS. W ten sam analogiczny sposób można zrobić przepychanie w górę lub mieszane na zmianę.
Oto efekt naszej pracy "9. przepychanie w dół":
10. układanka od dołu, 11. układanka 2 od dołuNie będę już opisywał tych efektów bo one mi się słabo podobają a roboty przy nich na tydzień chyba bym miał, szczególnie przy 11. Każdy kto przerobi wszystkie efekty do tego miejsca powinien sobie już sam poradzić.
12. Rotator trzech lub czterech UBOpiszę jeszcze rotator z trzema lub czterema UB'ekami, jeśli mi powiecie jaki ma być zastosowany efekt. Zrobię tylko jeden taki opis bo już nie mam sił.
Ten tut mnie prawie wykończył
PS. Opisane metody są przykładami efektów które można uzyskać.
Jeżeli ktoś by znalazł w sieci jakiś inny ciekawy efekt przejścia to ja mogę go tutaj zdekodować i opisać.
Znalazłem coś dla leniwych pod adresem
http://ubanimator.com/, znajdziecie tam gotowe narzędzie on-line do podobnych animacji z punktów 1, 3, 9
