Jak wykonać własny, animowany banner w formacie .gif ?    

Masz swoją stronę internetową. I pewnie chciałbyś zareklamować ją w Internecie? No tak... ale tutaj jest pewnie pewien problem - nie mam bannera reklamowego. Od teraz to żaden problem! Poniżej opisze krok po kroku jak zrobić własny banner na potrzeby swojej strony WWW. A więc zaczynamy!:)

1. Pierwsze zadanie polega na zdobyciu programu Paint Shop Pro 7 oraz wchodzącego w jego skład programu "Animation Shop 3" Program ten w wersji trial (60 dniowej) możemy ściągnąć ze strony producenta (www.jasc.com) lub z jakieś strony np. www.komputerswiat.pl (mamy tam wygodną wyszukiwarkę plików)

2. Jeśli mamy już wyżej opisane programy zainstalowane na komputerze, możemy przejść do dalszej części artykułu.

3. Otwieramy wspomniane już programy. (start > programy > Jasc software > Paint Shop Pro 7; Animation shop 3)

4. Zaczniemy najpierw od zrobienia sobie "podkładu" pod banner... (jeśli nie masz pomysłu na tło, zapraszam do użycia jednego z przygotowanych przez nas! kliknij)

5. Jeśli skorzystasz z gotowego tła pod banner - możesz przejść do punktu nr..

6. Jeśli tworzysz swoje tło pod banner samodzielnie - czytaj dalej:). Musimy utworzyć nowy rysunek o wymiarach naszego bannerka czyli standartowo wymiary 400x50 i dajmy tło na kolor biały:

7. Teraz mamy już gotowe, białe tło. Wypadało by je jakoś urozmaicić:)

8. Użyjmy może najpierw jednej, tekstury w którą tradycyjnie wyposażony jest Paint Shop Pro

9. Lecz najpierw musimy dać inny kolor tła... w tym celu z przybornika narzędzi wybieramy narzędzie Flood Fill :

i ustawiamy jego kolor na np. jasnoczerwony.

10. Gdy już mamy ustawiony kolor "Flood Fill" na jasnoniebieski - klikamy raz na nasz obrazek w celu jego zapełnienia.

11. Efekt tego powinien wyglądać mniej więcej tak:

12. Nie jest to za ciekawie prawda? . No to zmieńmy to!

13. Teraz z menu "Effects" wybieramy "Texture Effects" a następnie "Straw-wall"

14. W nowo otwartym oknie ustawiamy parametry tak jak pokazuje to poniższy obrazek:

15. Dodamy teraz jeszcze jeden efekt: Zawiniętej kartki.

16. W tym celu z menu effects wybieramy "Geometric Effects" a następnie "Page curl". W nowo otwartym oknie ustawiamy wszystkie opcje tak, jak to przedstawia poniższy rysunek:

czego wynikiem będzie ładnie "podwinięty" bannerek:

17. Teraz z prawej strony umieszczamy w naszym przypadku sam tekst. Ale wy możecie umieścić tam jakiś rysunek. Nanosimy na prawą stronę tekst - nazwę naszego serwisu. W tym celu wybieramy z przybornika narzędzi ( po lewej ) ikonkę "A" i w nowo otwartym wpisujemy nasz tekst - resztę opcji ustawiamy tak jak pokazuje to nasz poniższy rysunek:

18. Teraz przyszedł czas na uruchomienie naszej aplikacji do robienia animacji - Aniamtion Shop.

19. Nasz rysunek w Paint Shop Pro wygląda mniej więcej tak:

a więc naciskamy kombinację klawisz "Ctrl + C" w celu skopiowania tego to właśnie podkładu... i przechodzimy do Animation Shop .

20. W oknie tego programu, w części roboczej - klikamy prawym przyciskiem myszki i z meny wybieramy " Paste as new animation"

21. Teraz z powrotem przechodzimy do Paint Shop Pro - w celu zrobienia przeĄroczystego napisu! Jak to zrobić? Już pokazuje!

22. Musimy utworzyć nowy, przeĄroczysty obrazek o wymiarach np. 200x50 jak to zrobić? Wybieramy z menu "File" - "New image" i w nowo otwartym oknie wpisujemy takie to opcje, jakie przedstawia poniższa ilustracja (oczywiście możemy zmienić rozmiary obrazka na taki... na jaki nam odpowiada) :

23. Teraz pora wstawić tam tekst. W tym celu ponownie wybieramy z przybornika narzędzi ( po lewej ) narzędzie o nazwie "Text Entry" z "A" na ikonce.

24. Wpisujemy w otwarte okno tekst i dajemy kolor tekstu. Przypominam tylko, że tekst powinien zmieścić się na wcześniej utworzonym, nowym rysunku. A więc do dziela!

25. Jeśli już umieściliśmy tekst na rysunku, i wszystko gra... ponownie wciskamy kombinację klawiszy "ctrl + c" w celu skopiowania właśnie zrobionego napisu do pamięci. Przechodzimy do programu Animation Shop i ponownie klikając na polu roboczym prawym przyciskiem myszki wybieramy z menu opcje "Paste as new animation"

26. Jeśli mamy już wklejony nasz tekst jako nowa animacja... to z menu "Effects" wybieramy "Insert image transition" i w nowo otwartym oknie ustawiamy tak parametry jak na ilustracji (oczywiście można zmienić rodzaj animacji... ale poćwiczmy nanrazie na tym przykładzie) :

27. Powyższe zmiany zatwierdzamy kliknięciem w ok. Na ekranie powinno nam się ukazać 6 klatek z "znikającym" napisem. Teraz przechodzimy do okienka animacji w którym mamy nasze tło. Musimy je powielić tyle razy, ile klatek wyszło nam przy "znikającym napisie" w naszym wypadku będzie to 6 klatek - takich samych klatek.

28. Aby to zrobić klikamy raz na klatkę z tłem (naokoło powinna się pojawić niebieska ramka) a następnie wciskamy kombinację klawiszy " CTRL + C " w celu skopiowania rysunku do pamięci. Po wykonaniu tej czynności naciskamy kolejną kombinacje klawiszy "Ctrl + L" w celu wklejenia nowych klatek. Czynność tę powtarzamy tle razy, ile potrzeba nam klatek - w naszym wypadku potrzebujemy 6 klatek razem - czyli musimy dorobić 5 bo jedna już jest - więc czynność tę powtarzamy 5 razy.

29. Kiedy już to zrobimy ustawmy sobie tak te okna w polu roboczym (rozmiary możemy zmieniać za pomocą kółka w myszce) :

30. Takie ustawienie jak powyżej ułatwi nam prace.

31. Teraz czeka nas mozolna praca... musimy ten tekst wstawić klatka po klatce do naszej animacji.

32. A więc zaczynajmy. Klikamy na pierwsza klatkę z napisem... wciskamy "Ctrl + C" w celu skopiowania. Przechodzimy do pierwszej klatki z naszym tłem pod banner - i wklejamy ( klikamy prawym przyciskiem myszki na tę klatkę i z menu wybieramy " Paste into selected frame" Czyli - wklej do zaznaczonej klatki/ramki.

33. Czynność te powtarzamy z każdą klatką na zasadzie:

- kopiujemy drugą klatkę napisu i wklejamy ją w druga klatkę tła.

34. Jeżeli wszystko zrobiliśmy dobrze, kliknijmy sobie teraz z menu "View" a następnie "Animation" i zobaczymy podgląd animacji. powinien on wyglądać mniej więcej tak:

35. Wystarczy jeszcze tylko zapisać nasz efekt pracy!!! W tym celu klikamy na ikonke dyskietki i w oknach które się pojawiają klikamy cały czas na next.

36. I to już koniec! Mamy gotowy bannerek!:)


Autor:autor: Piotr Lamk
Projektowanie stron internetowych
Serwis webmastera i grafika