Animowane logo

Być może zdarzyło się Wam podziwiać na stronach WWW animowane „wizytówki”. Kolorowe, ruchome logo przyciąga uwagę. Często jest tylko elementem wystroju strony, ale bywa i tak, że służy do przekazania bardzo ważnych informacji.


Być może zdarzyło się Wam podziwiać na stronach WWW animowane „wizytówki”. Kolorowe, ruchome logo przyciąga uwagę. Często jest tylko elementem wystroju strony, ale bywa i tak, że służy do przekazania bardzo ważnych informacji.

Przygotowanie animowanej grafiki wcale nie jest trudne. W tym celu posłużyć się można niedrogimi narzędziami. Najlepszy jest Paint Shop Pro 5, któremu towarzyszy doskonały Animation Shop 1.

Baza

Mamy utworzyć miniaturową animowaną planszę, która umieszczona w witrynie internetowej będzie informować o rozpoczęciu, na przykład, konkursu.

Animowane logo
Po otworzeniu programu Paint Shop Pro 5 należy wybrać opcję New z menu File, aby utworzyć nowy rysunek. W parametrach okna dialogowego New Picture wybrać 300x100 pikseli, 72 dpi, z tłem w kolorze czerwonym. Z palety kolorów wybrać zielony: R=3,G=252,B=0. Następnie uruchomić przycisk funkcji wstawiania tekstu wpisać słowo: Konkurs, wybierając dodatkowo font: Forte, pogrubiony, 24 pkt (koniecznie z włączoną opcją „antialias”). Wtedy ukaże się piękny zielony napis na czerwonym tle.

Animowane logo
Taki napis to tzw. „floating-selection”, czyli płynna selekcja. Zachodzi konieczność zamiany napisu na warstwę taką samą, jak w Photoshopie. Należy więc wybrać opcję Promote to Layer z menu Selections i napis będzie warstwą. Można go trochę uplastycznić. Z menu Image trzeba wybrać opcję Cutout z grupy Effects. Zwykle służy do robienia wewnętrznego cienia, ale nie tylko. Przy odpowiednich ustawieniach opcji w oknie dialogowym otrzymamy efekt bardzo plastycznych liter.

Aby jeszcze bardziej uwypuklić (oddzielić optycznie od tła) napis, można dodać cień do liter za pomocą funkcji Drop Shadow z grupy Effects menu Image i po wprowadzeniu odpowiednich (patrz rysunek 2) ustawień, kliknąć OK. Efekt będzie imponujący.

Animujemy

Dalszy krok to „spłaszczenie” obrazka przez wybranie opcji Merge All (Flatten) z menu Layers/Merge. Skopiowanie obrazka do schowka [Ctrl+C] nie wymagało jego spłaszczenia. Aby go skopiować w całości, trzeba nacisnąć [Ctrl+Shift+C], z menu File wybrać opcję Run Animation Shop i utworzyć nową animację, wybierając New z menu File. Parametry powinny być identyczne jak wykonanego uprzednio rysunku (300x100 pikseli.). Teraz należy wkopiować do pierwszej klatki zawartość bufora [Ctrl+E], nie [Ctrl+V], ponieważ [Ctrl+V] kopiuje zawartość schowka z jednoczesnym utworzeniem nowej klatki). Napis składa się z 7 liter. Prawie każdą literę można podzielić na „trzy ruchy pióra”. Litera „r” da się podzielić tylko na 2 części, ale za to „k” – aż na 4.

Animowane logo
W sumie do nakreślenia napisu potrzeba 21 ruchów piórem (klatek). Używając sekwencji [Ctrl+V], trzeba utworzyć odpowiednią liczbę identycznych klatek. Po co? Transparent będziemy tworzyć „od tyłu”; ale po kolei. Używając narzędzia „pipeta” , należy ustalić kolor narzędzia na czerwony (kolor tła), wybrać narzędzie „pędzel” z bocznej listwy i w oknie Paint Brush zwiększyć jego szerokość do 20 pikseli (Width=20). Następnie trzeba przejść do 1 klatki. Przez malowanie w kolorze tła należy usunąć prawie cały napis, z wyjątkiem pierwszej pałeczki w literze „K” (patrz rysunek 3).

Animowane logo
Następnie przechodzimy do drugiej klatki i, postępując podobnie, usuwamy prawie cały napis z wyjątkiem pałeczki i górnej kreseczki w literze „K”.

Potem przechodzimy do trzeciej klatki i usuwamy wszystkie litery poza „K”. Postępując podobnie w przypadku innych liter, dochodzimy aż do dwudziestej pierwszej klatki, w której cały napis jest widoczny.

Uruchamiamy opcję Save As z menu File i wybieramy animowany GIF jako typ zapisywanego pliku. Program Animation Shop uruchamia wtedy kreatora (Wizard) służącego do tworzenia animowanych grafik w formacie GIF. Po wykonaniu optymalizacji do 128 kolorów z włączoną opcją Nearest Color otrzymujemy gotową, animowaną planszę. Plik wynikowy ma tylko 19 KB.

A co z rączką?

Czy można dodać „długopis” do napisu? Oczywiście i wcale nie jest to takie trudne (pod warunkiem wprowadzenia pewnego uproszczenia). Przejrzyjmy dostępne czcionki.

Pod klawiszem „?” ukrywa się „rączka-z-piórkiem” . Teraz na każdej klatce w odpowiednim miejscu trzeba umieścić rączkę tak, aby robiła wrażenie, że to ona wykonała napis. Należy kliknąć przycisk wstawiania napisów (zmieniwszy kolor pisaka na biały) i w polu edycyjnym wpisać „?”, wybierając czcionkę Windings o rozmiarze 24 pkt. Po przejściu przez wszystkie klatki można dodać dwie dodatkowe: na początku pojedynczą z tłem, a na końcu przedstawiającą cały napis, bez rączki.

Jeszcze tylko napis

Mimo że animacja wygląda dość dobrze, postanowiliśmy wzbogacić ją o element, który jest właściwy tylko aplikacji Animator Shop 1. Program ma dwa typy ciekawych efektów: przejścia pomiędzy klatkami animacji (Transitions) i tworzenie efektownych napisów. Skorzystajmy z tej drugiej opcji. Dodajmy wyraz, który często występuje razem ze słowem konkurs – „rozpisano”.

Animowane logo
Załóżmy, że będzie on biały (kontrastujący), przemieszczający się w jakiś sposób po ostatniej klatce z napisem konkurs. W oknie dialogowym Text Effects wpiszmy słowo „rozpisano!”, wybierzmy 24 punktową czcionkę Times New Roman i typ Bouncing. Bardzo ważne jest właściwe dobranie długości trwania efektu i ilości ramek animacji efektu na sekundę. Dziesięć ramek na sekundę i czas 0.7 sekundy dają w rezultacie 7 ramek długości trwania efektu.

Potem użyjmy przycisku Customize do ustawienia dodatkowych opcji.

Efekt? Tekst pojawia się pośrodku napisu „Konkurs” i przesuwa się do prawego, dolnego rogu, po czym wraca na miejsce. Jeżeli nie w pełni jesteśmy zadowoleni z wyniku, po kliknięciu OK z powstałej animacji można wyciąć dwie ostatnie ramki, aby całość zamykała klatka z napisem umieszczonym u dołu okna animacji, po prawej stronie. Po optymalizacji do 64 kolorów plik tej animacji ma tylko 28 KB. Mam nadzieję, że samodzielne przygotowanie prostej animowanej planszy, która będzie ozdobą witryny sieciowej, nie będzie problemem.