(09-11-2008)

Prosta animacja (GIF)

1. Naszą pracę zaczynamy od wymyślenia co ma się w animacji dziać, jakie elementy będą występowały.  Ja postanowiłam  zrobić grzybka zmieniającego kolor.

 

Przykładowo mój scenariusz wygląda następująco:

- Grzybek patrzy na kapelusz,

- Jest niezadowolony,

- koncentruje się,

- świeci,

- zmienia się stopniowo kolor kapelusza,

- grzybek jest zadowolony,

- kolor migając wraca do normalności,  

- animacja się zapętla,

 

Następnie otwieramy wzór,  szkic, który chcemy animować.

 

Grzyb1

 

2. Mój był dość duży, a chciałam by animacja służyła mi np jako avatar, dlatego zmniejszyłam go do formatu 100 x 100 px

 

Grzyb2

 

3.  Poprawiłam kontur na wyraźniejszy. Zrobiłam to na nowej warstwie.

 

Grzy3

 

4.  Wybrałam kolory i pokolorowałam grzybka. Każdy kolor znajduje się na osobnej warstwie

 

Grzyb4

 

5. Elementy,  które będą statyczne połączyłam ze sobą.  W tym przypadku kontur, kropki i nóżka grzybka nie będą się zmieniały.

 

Grzyb5

 

6.  Na nowych warstwach narysowałam oczka i usta.

 

Grzyb6

 

7. Wiemy, że następnie grzybek ma patrzeć do góry.  Duplikujemy  potrzebne do tego warstwy.  Kopie przydadzą się później.

 

Grzyb7

 

8.  Łączymy ze sobą jeden kapelusz, jeden kontur statyczny, oczy i buźkę w jedna warstwę.  Uśmiechnięty Grzybek z czerwonym kapeluszem  na jednej warstwie będzie naszą pierwszą klatką animacji.  Na nim animacja będzie się zapętlała.

 

Grzyb8

 

9.  Nasza animacja nie wymaga wiele wysiłku i by grzybek patrzył do góry wystarczy skopiować pierwszą warstwę (klatkę animacji) i przemalować oczka.

 

Grzyb9

 

10.  Następnie grzybek ma patrzeć do góry i mieć smutną minę.  Kopiujemy poprzednią warstwę i zmieniamy uśmiech na smutne usta odwrócone w dół.

Podobnie postępujemy  z kolejna klatką.  Wiemy, że tu grzybek ma się koncentrować. Kopiujemy poprzednią warstwę i przemalowujemy minę grzybka.

 

Grzyb10

 

11.  Teraz grzybek ma świecić. zakładamy, że blask będzie się składał z trzech klatek i z dwóch kolorów blasku.  Kopiujemy poprzednią warstwę i dodajemy blask żółty. Kopiujemy tą samą warstwę ponownie i dodajemy blask zielony, może nieco większy niż żółty i przesuwamy nas blask żółty.  Teraz kopiujemy blask żółty i przesuwamy na sam wierzch. 

 

Grzyb11

 

12. Następnie grzybek ma patrzeć do góry zaciekawiony na zmieniający się kolor kapelusza. Kopiujemy warstwę gdzie grzybek patrzy do góry i przesuwamy na górę .

 

Grzyb12

 

13. Przemalowujemy grzybkowi usta.

 

Grzyb13

 

14. Teraz wykorzystam kopie podstawowych warstw które odłożyłam na później. Duplikuję kontur i kapelusz. Teraz z poprzedniej warstwy zaznaczam, kopiuję minę grzybka i wklejam  jako nową warstwę.  Powinna nam się sama wkleić dokładnie w tym samym miejscu co pierwowzór.

 

Następnie chcę pokazać zmieniający się kolor kapelusza. W tym celu  na warstwie z konturem zaznaczam pusty obszar kapelusza. Powiększam zaznaczenie o 1 px.  (Zaznaczenie -> powiększ zaznaczenie). Tworzę nową czysta warstwę i przesuwam pod kontur ale nad czerwonym kapeluszem.  Teraz na tej nowej warstwie gradientem wypełniam fragment zaznaczenia ( jak na obrazku niżej). 

 

Grzyb14

 

15.  Kopiuję warstwy i sklejam po jednej by stworzyć klatkę animacji. Z pozostałymi postępuję podobnie jak poprzednio,  tyle że gradient robię trochę większy. Powtarzam czynność, aż cały grzybek będzie zakolorowany.  

Grzyb15


16. Teraz nasz niebieski grzybek ma patrzeć do góry i być uśmiechnięty.  Potrzebuję do tego uśmiechniętej miny z warstwy na dole. Zaznaczam ją i kopiuję.

Wyłączam do tego celu chwilowo warstwy wyżej by zobaczyć to co chcę skopiować.
Kopiuję najpierw warstwę z całym kapeluszem zakolorowanym i wklejam minę uśmiechniętego grzybka patrzącego do góry. Łączę warstwy ponownie w jedną.

Grzyb16

17.  Teraz chcę by grzybek zamrugał oczkami.  Kopiuję poprzednią warstwę i na nią naklejam oczka skopiowane z klatki gdzie grzybek miał je zamknięte.

Grzyb17

18. Scalam warstwy jak zawsze w jedną.

Grzyb18

19.  Podobnie postępuję z oczkami otwartymi. Przeklejam na zduplikowanego poprzedniego grzybka. 
Aby uzyskać efekt mrugania muszę mieć ustawione za zmianę warstwy z oczami zamkniętymi i otwartymi. Tak z 4-5 wystarczy.

Grzyb19

20. Teraz nasz niebieski grzybek musi wrócić do normalności. Założyłam, że ma się to stać przez mruganie.  By to uzyskać muszę na zmianę ustawić niebieskiego uśmiechniętego i czerwonego uśmiechniętego grzybka z warstwy z samego początku. Dzięki temu nasza animacja się zapętli.

Grzyb20


21.  Następnie pora na tło. rysuję tło na nowej warstwie i ustawiam na sam dół.

Grzyb21


22.  Kopiuję wiele razy i ustawiam warstwy tak by pod każdym grzybkiem była warstwa z tłem.

Grzyb22

23.  Zaczynając od góry każdego grzybka łączę z tłem.

Grzyb23



24.  Teraz możemy podejrzeć efekt naszej animacji. Wchodzimy w Filtry-> animacja -> Playback  i  włączamy podgląd tego co stworzyliśmy.

Grzyb24

25.  Jeśli wszystko jest w porządku czas skleić nasze warstwy w plik .gif.  By gif nie zajmował nam za dużo miejsca, należy plik zoptymalizować. Wchodzimy ponownie w Filtry -> animacja ->  Optymalizuj dla formatu GIF.
Otworzy nam się nowe okno z dostosowanym już plikiem.

Grzyb25

26.  Czas zapisać nasze dzieło w formacie docelowym jakim jest gif.  By to zrobić otwieramy Plik -> Zapisz jako -> nazwa.gif  i klikamy ok.  Otworzy nam się okno opcji zapisu zaznaczamy "Zapisz w postaci animacji" i OK. Potem pojawi się okno z ustawieniem prędkości. Docelowo jest 100. Możemy przyśpieszyć lub spowolnić naszego gifa wpisująć mniejszą lub większą liczbę.

Grzyb26

27. Zapisujemy i gotowe.

Grzyb27