Banner internetowy - tworzenie animacji (Adobe ImageReady)

Bannery to najbardziej popularne reklamy na stronach WWW . Występują w wielu różnych formach i rozmiarach.

Spróbujemy przygotować reklamę - bilboard o rozmiarze 750 x 100 pikseli, możliwą do zamieszczenia na wszystkich popularnych portalach. Najczęściej bannery tego typu budowane są za pomocą programu Macromedia Flash i wykorzystują animacje wektorowe - to prawda.

Co jednak zrobić mając do dyspozycji jedynie program Adobe Photoshop i jednocześnie zainstalowany z nim ImageReady? Odpowiedź jest niezwykle prosta - przygotować banner w programie ImageReady!

Zaczynamy od przygotowania ogólnego projektu bannera. Zazwyczaj zawiera on wszystkie niezbędne elementy graficzne, tj. logo, niewielką grafikę czy fotografię i podstawowe hasło (hasła) reklamowe 5.

Aby przygotować najprostszą formę reklamy - banner statyczny, wystarczy zoptymalizować wielkość pliku i gotowe... Należy jednak zwrócić szczególną uwagę na format zapisu i wagę bannera. Najczęściej statyczne bannery o rozmiarze 750 x 100 nie powinny przekraczać 15-20 kB, warto o tym pamiętać.

Aby budować animacje, należy przygotować wszystkie hasła bannera. W moim przykładzie teksty te znajdują się na oddzielnych, odpowiednio nazwanych warstwach bannera 6.

5 Banner w programie ImageReady...

6 ... teksy na warstwach bannera...

W oknie Animation (Window/Animation) przygotujemy kolejne klatki animowanego GIF-a. W pierwszej klatce widać już statyczne tło (grafika, logo) - w naszym przykładzie warstwę kwiatek_tlo oraz pierwsze hasło bannera. W tym momencie ustaliłem także czas trwania tej klatki - 2 sekundy 7.

Przycisk Duplicates current frame (ten z podwiniętym narożnikiem dostępny w palecie Animation) dodaje nową klatkę animacji.

Wyświetlimy tu drugie hasło bannera. W tym celu wyłączam (ikona z oczkiem) widoczną warstwę tekstową i w jej miejsce włączam warstwę z drugim hasłem.

Aby dodać kolejne klatki animacji, postępujemy analogicznie.

Dodajemy nową klatkę, wyłączamy obecne hasło i włączamy nowe. I tak kolejno, aż wyświetlone zostaną wszystkie odsłony bannera 8.

7 ... czas trwania klatki...

8 Dodajemy nową klatkę, wyłączamy obecne hasło i włączamy nowe.

Ostatni krok to optymalizacja animacji i zapis w postaci pliku GIF.

W programie ImageReady wyboru ustawień kompresji dokonujemy w podobnym do Photoshopa oknie Optimize (Window/Optimize) 9.

Aby zachować możliwie niewielką wagę pliku i jednocześnie dobry widok, wykorzystałem 64 kolory wraz z opcją roztrząsania - Dither 10.

9 Okno Optimize (Window/Optimize)

10 ... opcją roztrząsania - Dither...

W rezultacie mój banner nie przekracza 20 kB i doskonale nadaje się do prezentacji na stronach internetowych.

Do podglądu bannera w oknie przeglądarki internetowej stosujemy przycisk z ikoną Internet Explorer dostępny w palecie z narzędziami programu 11. Jeśli widok, który uzyskamy, nas satysfakcjonuje - banner jest gotowy do publikacji.