Instrukcja wykonania
 
animowanego tekstu
AUTOREKLAMA
 

Uwaga: animacja jest zaprogramowana na 3 odtworzenia.
Aby powtórzyć odtwarzanie musisz ponownie wejść na stronę.


Widok panelu Warstwy
w programie Photoshop.


 
Przygotuj nowy obrazek w Photoshopie (350x60 pikseli, 72 ppi, RGB). Powinien zawierać warstwy tekstowe (w kolejności od góry) na -Stosie Warstw: 

USŁUGI, 5, NA, TO TU !!! czerwone, TO TU !!! białe cienkie, TO TU !!! białe grube, Tło.

Warstwa -Usługi- zostanie wypełniona tekstem USŁUGI, czcionką Bookman Old Style -Bold - 24 pkt. biel.

Warstwa -5- zostanie wypełniona cyfrą 5, czcionką Bookman Old Style -Bold- 150 pkt biel.

Warstwa -To tu !!!- zostanie wypełniona tym tekstem, czcionką Bookman Old Style- Italic - 36 pkt. czerwień.

Warstwę -To tu !!!- będziemy modyfikować, więc musimy ją renderować, a następnie powielić.

Na kopię wprowadzimy zaznaczenie z oryginału i poszerzymy zaznaczenie o 1 piksel. Zawartość zaznaczenia wypełnimy bielą. Z oryginału tworzymy drugą kopię i poszerzamy zaznaczenie tym razem o 2 piksele. Zawartość zaznaczenia wypełnimy bielą. Plik z obrazkiem, w formacie PSD (a więc z warstwami) jest do wglądu. Tytuł pliku -Tekst animowany 1A-.

  1. Wykonaj: -Extensis- PhotoAnimator- oraz -File- Open- (Vertical Grouped, Top to Bottom, Layer Images)
     
  2. Ukryj wszystkie warstwy oprócz -Tło- (na Layer Pane zgaś oczka).
     
  3. Uaktywnij warstwę -Tło- i zleć: - Animation - Resize Cell - (Number of Frames = 32 - ilość klatek). Animacja będzie posiadać 32 klatki.
     
  4. Uaktywnij tylko warstwę -Usługi- (na Leyer Pane) i zleć: - Animation - Resize - Cell - (Number of Frames = 6). Zajmiemy się 6 pierwszymi klatkami napisu Usługi. Kliknij dwukrotnie na Frame 1. W otwartym okienku Image Repeat Settings ustaw pozycje klatek wg załączonego rysunku. Wpisz w Location (czyli początkowej klatce) na osi X wartość 11 pikseli, co zapewni brak widoku napisu, w okienku -Move To-, X=25, gdyż taka będzie odległość litery (skrajnej, lewej) od krawędzi klatki.
     

    Rysunek 36. Extensis. Image Repeat Settings


     
  5. Mając podświetlone klatki od 1 do 6 wciśnij CTRL+C (kopiowanie klatek), następnie kliknij w 7 klatkę i wklej (CTRL+V).
     
  6. Na klatkach 7 do 12 wykonamy stopniowe ściśnięcie napisu, aż do 40% jego długości. Kliknij w 7 klatkę i zleć: -Effect- Image- Scale-. Usuń zaznaczenie: MoveTo.
     

    Rysunek 37. Extensis. Image Scale Settings.


     
  7. Skopiuj (CTRL+C) klatki 7 - 12, kliknij w klatkę 13 i wklej (CTRL+V).
  8. Zleć: - Animation - Resize Cell - (Number of Frames czyli ilość klatek=14).
     

    Animacja w części trzeciej będzie posiadać 14 klatek.

    Wykonamy w niej stopniowy powrót (rozszerzenie ściśniętego napisu) do pierwotnego wyglądu.
     

  9. Kliknij podwójnie w 13 klatkę (lub zleć: -Effects- Image- Scale-) i zmień wartości Horizontal: From = 40%, To = 100%.
     
  10. Skopiuj klatki 7-12 i wklej klikając w klatkę 27. Wpisz wszędzie wartości 100%, bez -Move To-. Uzyskaliśmy 6 klatek nie animowanych, ustawionych docelowo.
     
  11. Uaktywnij warstwę -Na- , kliknij w klatkę nr 1 i zleć: -Animation- New- Cell-. Kliknij Frame 2 i przeciągnij kursorem w miejsce Frame 1. Należy tak postąpić, gdyż PhotoAnimator kopiuje i wkleja nowe komórki zawsze jako ciąg dalszy animacji, a my zaczynamy pracę nad nową warstwą. Utworzymy teraz klatki 1-12. - Animation -Resize Cell- (12 klatek)
    Zaczniemy wyświetlać napis od 13 klatki. Kliknij w klatkę 13 i zleć: -Animation- Resize Cell- (8 klatek). Kliknij podwójnie na klatce 13 i ustaw parametry: Locations X=157, Y=0; zaznacz -Move To- i wpisz X=122, Y=0. To samo uzyskasz stosując wersję z drugiego rysunku (zmieniło się ułożenie kwadratu i namiary).

    Rysunek 38. Extensis. Image Repeat Setting.

     

     
  12. Kliknij w klatkę 13, skopiuj (klatki 13-20 ) CTRL+C. Następnie kliknij w klatkę 21 i wklej (CTRL+V).
     
  13. Zleć: -Animation - Resize Cell- (12 klatek). Kliknij w 21 klatkę podwójnie lub zleć: - Effect- Image -Repeat-.
     

    Rysunek 39. Extensis. Image Repeat Setting.


     
  14. Mamy gotowe animacje 2 warstw: -Usługi-, -Na-. Wykonamy teraz animację z cyfrą 5.
     
  15. Uaktywnij warstwę 5 i zleć: -Animation- New- Cell-.
     
  16. Kliknij Frame 2 i przeciągnij ją kursorem na lewo, na Frame 1. -Animation - Resize Cell- (6 klatek). Nie będziemy na nich wykonywać zleceń, więc zostaną puste.
     
  17. Kliknij w Frame 7 i zleć: -Animation- Resize Cell- (10 ramek). -Effect- Image- Scale- i ustaw parametry klatek 7-16 wg załączonego rysunku.
     

    Rysunek 40. Extensis. Image Scale Setting.

    Wyjaśnienia.

    Ponieważ cyfra 5 jest zdecydowanie za duża, należy ustalić parametry, czyli proporcje od jej naturalnej wielkości do docelowej, poprzez próby. Ja wybrałem zmniejszenie do 25%. Wartość X=5 wynika z konieczności przesunięcia cyfry 5 pikseli w prawo (w poziomie na osi X), tak aby nie osadziła się zbyt blisko napisu z lewej strony.
     

  18. Wypełnij klatki 17 - 32. Kliknij w klatkę 16 i skopiuj ją (CTRL+C), kliknij w klatkę 17 (CTRL+V). -Animation- Resize Cell- (wpisz ilość klatek od 17 do 32 czyli 16 ). Kliknij podwójnie w klatkę 17 i wpisz wszędzie 25% (nie będzie modyfikacji). X=5.
     
  19. Wprowadzenie następnego napisu jest powielaniem użytych już zleceń, więc opiszę tą część skrótowo.
     
  20. Uaktywnij warstwę -To tu czerwona- i kliknij w klatkę -nr1. Wykonaj zlecenie: -Animation- New Cell- musimy to zrobić, gdyż zaczynamy nową warstwę. - Przesuń kursorem klatkę 2 na miejsce klatki 1. -Animation- Resize Cell- (22 klatki) Nic nie będziemy na nich zlecać, więc zostaną puste. Kliknij w Frame 23 i zleć: -Animation- Resize Cell- (8 klatek).
     
  21. -Animator- New Layer- Nazwij nową warstwę Warstwa X i wróć -Warstwa X- i wróć -Animation - New Cell - oraz -Animation -Resize Cell- (22). Kliknij w klatkę 22 i skopiuj (CTRL+C). Kliknij w klatkę 23 i wklej (CTRL+V) i zleć: -Animation Resize- Cell (5 klatek). Kliknij na klatce 23 i zleć: -Effect- Transition- Fade- (inter, od 0 do 100%).
     
  22. Uaktywnij warstwę -To TU białe cienkie-, wykonaj zlecenie: -Animation- New Cell- musimy to zrobić, gdyż zaczynamy nową warstwę. Przesuń kursorem klatkę 2 na miejsce klatki 1. -Animation- Resize Cell- (26 klatki). Nic nie będziemy na nich zlecać, więc zostaną puste. Kliknij w Frame 27 i zleć: -Animation- Resize Cell- (4 klatki).
     
  23. Uaktywnij warstwę To TU białe grube. -Animation- New Cell - musimy to zrobić, gdyż zaczynamy nową warstwę. Przesuń kursorem klatkę 2 na miejsce klatki 1. -Animations- Resize Cell- (27 klatki) Nic nie będziemy na nich zlecać, więc zostaną puste. Kliknij w Frame 28 i zleć: -Animation -Resize Cell- (5 klatek). Następnie: -Animation -FrameRate- (Ustaw ilość ramek na sekundę - 4). eraz można zapisać animowanego GIFa. Skorzystamy ze zlecenia: - File - Eksport-. Wybieramy format pliku, ustalimy ile razy animacja ma się powtórzyć. Wybieramy opcję Dither , jeżeli obrazek zawiera subtelne przejścia między kolorami. Rodzaj Ditheru wybierz eksperymentując, ja wybrałem kropkowany. W zleceniu: -File- Save- zapiszemy plik w formacie Extensis PhotoAnimatora, aby w przyszłości łatwo wprowadzić poprawki do animacji. W powyższej animacji użyliśmy rozjaśnienie klatek przy pomocy warstwy wypełnionej zleceniem: -Efekt- Transition- Fade-.
     

Valid CSS! Valid HTML 4.01!

 

 
 

Zapraszam do wpisywania się do Księgi Gości.

gorzow-wlkp.pl