W tym rozdziale:
u Standardowe banery reklamowe.
u Umieszczanie banerów reklamowych na stronach WWW.
u "Język" reklamy.
u Tworzenie banerów reklamowych w Fireworks.
u Rozmywanie jako sposób na oszczędzanie klatek.
Banery reklamowe - prawie wszechobecne w Sieci - są czynnikiem, który znacznie przyczynił się do tak gwałtownego rozwoju World Wide Web. Po umieszczeniu na stronie banera reklamowego sponsora, strona sama zaczyna zarabiać na siebie, a Ty możesz skupić się na projektowaniu i nie martwić się o rosnące koszty jej utrzymania.
Banery reklamowe są miejscem, w którym widać prawdziwą potęgę animowanych GIF-ów. Reklama internetowa powinna przyciągać oko i być wyświetlana u większości użytkowników. Jedynym formatem spełniającym te wymagania jest właśnie animowany GIF. Kiedy animowany GIF przestaje być zwykłym animowanym GIF-em, a staje się banerem reklamowym? Spełnione muszą zostać cztery warunki:
u Musi mieć określoną szerokość i wysokość.
u Musi mieć określony, mały rozmiar fizyczny pliku.
u Musi zostać umieszczony na stronie WWW.
u Musi coś reklamować.
Wszystkim tym warunkom przyjrzymy się w kolejnych podrozdziałach.
Gdy banery reklamowe stały się tak popularne w Internecie okazało się, że korzyścią dla reklamodawców i stron WWW wyświetlających reklamy jest utrzymanie ich w standardowych rozmiarach. Jeśli tworzysz stronę WWW, na której zostawiłeś obszar o wymiarach 450 50 pikseli na baner reklamowy, a ja prześlę Ci reklamę o wymiarach 460 60, pojawi się problem. Jeżeli dziesięciu innych ludzi prześle Ci reklamy, z których każda będzie miała inne wymiary, problem będzie jeszcze większy.
Aby go rozwiązać, dwie agencje: Internet Advertising Bureau (IAB - Biuro reklamy internetowej) oraz Coalition for Advertising Supported Information and Entertainment (CASIE - Agencja reklamy i widowisk) wspólnymi sił 15515e413p ;ami utworzyły listę rozmiarów standardowych. Lista ta została przedstawiona wszystkim reklamodawcom i odbiorcom, którzy zaakceptowali ją przytłaczającą większością głosów. Prawie wszystkie reklamy internetowe tworzone są obecnie według standardów IAB/CASIE.
|
Więcej informacji o standardach IAB/CASIE znajdziesz w witrynach internetowych organizacji IAB - www.iab.net oraz CASIE - www.casie.com |
|
W tabeli 24.1 zamieściłem zestawienie standardowych rozmiarów banerów reklamowych oraz ich nazw.
Tabela 24.1.
Standardy IAB/CASIE banerów reklamowych
Wymiary w pikselach |
Nazwa |
Full Banner (Baner pełnowymiarowy) |
|
Full Banner with Vertical Navigation Bar (Pełnowymiarowy baner z pionowym paskiem nawigacyjnym) |
|
Half Banner (Baner o połowę mniejszy od pełnowymiarowego) |
|
Square Button (Kwadratowy przycisk) |
|
Micro Button (Mikroprzycisk) |
|
Button 1 (Przycisk 1) |
|
Button 2 (Przycisk 2) |
|
Vertical Banner (Baner pionowy) |
Najpopularniejszym typem reklamy jest pełnowymiarowy baner, na drugim miejscu znajduje się najprawdopodobniej mikroprzycisk, ale coraz większą popularność w Internecie uzyskują także inne rozmiary. Stosowane one są do wyświetlania reklam zajmujących bardzo mało miejsca, na przykład na marginesach stron lub nawet we wcięciach akapitowych. Jeśli nie możesz się zdecydować, który rozmiar wybrać, użyj pełnowymiarowego banera o wymiarach 468 60 pikseli.
|
Na dołączonym do książki CD-ROM-ie znajdziesz zestaw plików PNG o standardowych rozmiarach reklam, które możesz wykorzystać podczas tworzenia banerów reklamowych w Fireworks. |
|
|
Obecnie większość osób korzystających z Internetu używa rozdzielczości 800x600 lub większej i wiele witryn jest skonstruowanych tak, aby móc pomieścić rozszerzoną zawartość poziomą. W tej sytuacji, reklamodawcy zaczęli wprowadzać baner o wymiarach 600x60. Nie znajduje się on na liście IAB/CASIE, ale można brać pod uwagę możliwość wykorzystania takiego banera, jeżeli oczywiście witryna będzie mogła przyjąć taki rozmiar. |
|
Oprócz właściwych rozmiarów banera reklamowego, musisz wziąć pod uwagę również jego rozmiar fizyczny. Nie istnieje żaden standard regulujący rozmiary plików reklamowych. Większość administratorów WWW definiuje maksymalną wielkość tych plików i nie przyjmą od Ciebie reklamy o większych rozmiarach. Jeśli projektujesz reklamę przeznaczoną na konkretną witrynę WWW, sprawdź najpierw ograniczenia narzucone przez jej administratora lub przynajmniej rozmiary reklam, które już istnieją w tej witrynie. Jeśli Twój baner nie jest jeszcze przeznaczony na żadną określoną witrynę, powinien mieć rozmiar pliku mniejszy niż 10 kB lub 12 kB. Jeśli uda Ci się stworzyć doskonałą reklamę o rozmiarze pliku 8 kB, tym lepiej dla Ciebie. Będzie ona szybko pobierana z Internetu i zobaczy ją więcej użytkowników.
Baner reklamowy jest oczywiście takim samym obrazkiem jak każdy inny GIF, więc miejscem, w którym powinien zostać umieszczony na stronie jest zwykły znacznik <img>. Gdy eksportujesz kod HTML z Fireworks, baner reklamowy jest wyświetlany właśnie za pomocą tego znacznika.
Przeważnie jednak na większości witryn internetowych uzależnionych od reklamodawców towarzyszy pewnego rodzaju rotacja banerów reklamowych, w której reklamy są umieszczane na stronie "w locie" przez serwer tak, aby użytkownik, który ponownie odwiedza daną stronę i zobaczył reklamy inne niż te, które obejrzał poprzednim razem. Serwer zapamiętuje także liczbę powtórzeń każdej reklamy, gdyż reklamodawcy płacą zazwyczaj za wyświetlenie reklamy określoną ilość razy.
Wykonanie systemu rotacji banerów reklamowych nie jest tak trudne, jak mogłoby się wydawać. W Internecie można znaleźć wiele tanich - a nawet bezpłatnych - skryptów CGI (Common Gateway Interface). Wystarczy kilka godzin pracy, aby prosta witryna internetowa zaczęła obsługiwać reklamy tak, jak witryny najbardziej profesjonalne.
|
Miejscem, w którym powinieneś rozpocząć poszukiwania skryptów CGI jest witryna CGI Resource Index znajdująca się pod adresem www.cgi-resources.com. |
|
Kompletny kurs metod Madison Avenue wykracza poza zakres tej książki, ale powinieneś znać choć kilka terminów wchodzących w skład "języka" reklamy:
u Odsłona jest jednym wyświetleniem strony z umieszczoną na niej reklamą.
u Trafienie jest żądaniem pliku, znajdującego się na serwerze (dokumentu HTML lub pliku obrazka albo pliku multimedialnego) wysyłanym przez przeglądarkę. Wielu ludzi zamiennie używa terminów "odsłona" i "trafienie", ale jedna strona WWW może składać się z dwudziestu pojedynczych plików, podczas gdy inna tylko z dziesięciu. Najlepiej jest więc zdefiniować własne terminy i wykorzystywać je w dyskusjach o "trafieniach".
u CPM jest kosztem za tysiąc odsłon strony (M jest tutaj rzymskim oznaczeniem liczby 1000). Jest to standard używany w sprzedaży reklam w Internecie. W witrynie o doskonałych wskaźnikach oglądalności cena za tysiąc odsłon reklamy może być wysoka.
u Bezpośrednie kliknięcie definiuje sytuację, w której użytkownik szczególnie zainteresowany banerem reklamowym klika go, aby przejść do witryny internetowej reklamodawcy. Średnia bezpośrednich kliknięć może być mniejsza niż 1%.
u Współczynnik kliknięć oznacza procent użytkowników odwiedzających stronę, którzy kliknęli określoną reklamę.
u Identyfikacja oznacza rozpoznanie pewnych znaków firmowych. Nawet jeśli użytkownik nie kliknie banera reklamowego, przynajmniej go zobaczy i zapamięta wyświetlany na nim znak firmy.
Mimo że banery reklamowe często są tworzone przez całe sztaby ludzi związanych z reklamą, producentów, projektantów internetowych, najlepszą metodą na zastosowanie poniższej techniki jest utworzenie kampanii reklamowej dla fikcyjnej firmy, wymyślonej na własne potrzeby. W taki właśnie sposób utworzymy krok po kroku baner reklamowy w Fireworks.
|
Na dołączonym do książki CD-ROM-ie znajdziesz przykład tworzonego w tym rozdziale banera reklamowego "Mundane Magazine" zarówno w źródłowym formacie PNG, jak i w wyeksportowanym jako animowany GIF. |
|
Pierwszym krokiem w tworzeniu banera reklamowego jest zdefiniowanie właściwych wymiarów. Niekiedy wymiary reklamy będą determinowane rodzajem projektu, ale w większości przypadków będziesz musiał utworzyć baner o z góry ustalonych wymiarach. W swoich projektach przestrzegam standardów IAB/CASIE i tworzę pełnowymiarowe banery o wymiarach 468 60 pikseli, które mogą być wyświetlane na większości witryn internetowych.
Teraz, kiedy masz już "pustą kartkę" o właściwych wymiarach i kształcie, możesz usiąść i tak długo się jej przyglądać, aż wpadniesz na jakiś pomysł. W pracy z banerami reklamowymi możesz stosować te same koncepcje, których używałeś przy tworzeniu zwykłych animacji. Obowiązuje więc zwięzłość wypowiedzi, planowanie z wyprzedzeniem oraz utrzymywanie określonych rozmiarów plików.
Spójrzmy prawdzie w oczy: w banerze o rozmiarach 10 lub 12 kB nie można utworzyć zbyt wielu aktorów lub zmian scenografii. Jeżeli nie możesz wyrazić swoich myśli w kilku wierszach tekstu, prawdopodobnie nie będziesz mógł także stworzyć dobrego banera. Myśl raczej w kategoriach haseł, a nie szerszych wypowiedzi.
Baner przedstawiony w naszym przykładzie reklamuje fikcyjne czasopismo o nazwie "Mundane Magazine". Jest to czasopismo o Internecie przeznaczone dla młodych czytelników. Chcę więc utworzyć coś, co przyciągnie uwagę wielu młodych, "odjazdowych" internautów. Scenariusz tej reklamy powinien być następujący: "UFO rozbija się przy lądowaniu na jałowej, odległej planecie. Pilot myśli: '&*/$." Niewielki scenariusz, ale co można zrobić w pliku o rozmiarach 12 kB?
Nasz mały film posiada już scenografię i scenariusz. Teraz potrzebujemy aktorów.
Banery reklamowe są celowo zmniejszane do jak najmniejszych rozmiarów i może to być nieco kłopotliwe przy rysowaniu obiektów. Obiekty w banerach reklamowych i tak często są kadrowane i zmniejszane, więc wolę rysować i budować obiekty w drugim, większym oknie dokumentu (rysunek 24.1), czyli w swoistym rodzaju notatnika lub - trzymając się terminologii teatralnej - za kulisami, za którymi obiekty czekają na swój występ. Obiekty Fireworks mogą być w każdej chwili edytowane i łatwo przeciągane pomiędzy dokumentami, więc tworzenie kulis jest bardzo dogodnym sposobem pracy.
Rysunek 24.1. W trakcie
budowania banera reklamowego użyj drugiego dokumentu jako szkicownika |
|
Kompleksowe efekty, takie jak zewnętrzne cienie i blaski, zwiększą rozmiar końcowy animowanego GIF-a, ponieważ w tym formacie lepiej kompresowane są obszary jednolitych kolorów. Na razie skoncentruj się na rysowaniu dobrze wyglądających obiektów, a efekty zostaw na później. Jeśli Twoja końcowa animacja będzie miała rozmiar mniejszy od dopuszczalnego, będziesz mógł wrócić i dodać do obiektu jakieś efekty.
W mojej reklamie "obsada" tworzona jest z następujących elementów:
u Jałowe, "nieziemskie" góry służące za scenografię.
u Obiekty tekstowe: nazwa magazynu i łatwe do zapamiętania hasło.
u Latający spodek, rozbijający się przy lądowaniu.
u Dymek ze słowem "&*/$".
Każdy z tych elementów można traktować jako aktora, niezależną jednostkę, której musisz "powiedzieć" co ma robić, aby utworzyć reklamę.
Jesteśmy już przygotowani do umieszczenia obiektów na swoich miejscach. Utwórz osobną warstwę dla każdego z aktorów. Mam czterech aktorów i dobrze byłoby ich ułożyć od razu we właściwej kolejności w stosie. Tło powinno znajdować się na spodzie, a tekst na samym wierzchu, potrzebne są więc cztery warstwy:
u Tekst;
u Dymek;
u Spodek;
u Tło.
Wielokrotne wykorzystywanie elementów Niewielka ilość informacji, jaką można przekazać za pomocą banerów reklamowych, bardzo ogranicza pracę twórczą. Jest jednak pewna zaleta: wszystkie obiekty, łącznie z bitmapami, które były stworzone na potrzeby strony WWW lub do druku można szybko przeskalować i ponownie wykorzystać bez utraty jakości. Tworzenie banera reklamowego na stronę WWW wiąże się najczęściej z budowaniem znaków graficznych i innych ilustracji łatwo dostępnych do późniejszego wykorzystania w banerze, jak pokazano na poniższym rysunku.
Opisywana strategia jest wydajna z punktu widzenia produkcji grafiki, ale sprawdza się również w projektowaniu, pozwalając na zachowanie spójnego wyglądu elementów graficznych znajdujących się w jednej witrynie WWW oraz reklamujących ją banerów |
Wszystkie warstwy przedstawione zostały na rysunku 24.2. Na warstwie o nazwie background umieszczone są góry, które są współużytkowane przez wszystkie klatki dokumentu. Zablokuj warstwę tła i na razie zapomnij o niej.
|
Aby ustawić współużytkowanie warstwy, kliknij dwukrotnie jej nazwę w palecie Layers, aby wyświetlić okno dialogowe Layer Options i zaznacz opcję Shared Across Frames. |
Rozdzielanie obiektów na odrębne warstwy umożliwia ustawienie w dowolnej chwili którejś z nich jako współużytkowanej, jeśli zdecydujesz, że znajdujący się na niej aktor ma być statyczny. Jeszcze nie jestem pewien, czy nazwa czasopisma oraz hasło reklamowe powinny być obiektami statycznymi. Prawdopodobnie tak, ale być może zmienię zdanie, gdy zobaczę rozmiar pliku animowanego GIF-a. Na razie umieszczę tekst w banerze i ustawię jego warstwę jako współużytkowaną. Pierwsza klatka animacji właściwie jest gotowa. Góry i logo znajdują się na swoich miejscach, a UFO jeszcze się nie pojawiło. Następnie tworzę ostatnią klatkę animacji, w której animacja jest na chwilę zatrzymywana przed zapętleniem. Muszę upewnić się, że UFO i dymek mają właściwe wymiary, aby ładnie wyglądały w tej klatce, zanim zacznę animować te obiekty w klatkach pośrednich (rysunek 24.3).
Utworzenie pierwszej i ostatniej klatki przed pozostałymi pozwoli o wiele łatwiej utworzyć zawartość wszystkich pośrednich klatek. Nadanie opisowych nazw klatkom pierwszej i ostatniej pozwoli upewnić się, że zawsze będą one pierwszą i ostatnią. Nazwę możemy wprowadzić w oknie dialogowym otwieranym po dwukrotnym kliknięciu nazwy klatki w palecie Frames
Wreszcie możemy na poważnie zająć się animowaniem. W pierwszej klatce UFO jeszcze nie widać, zaś w ostatniej - UFO już wylądowało. Kopiuję UFO z ostatniej klatki, wklejam je do pierwszej i przesuwam do górnej krawędzi obszaru roboczego tak, żeby było widać tylko jego mały fragment. Zatem w pierwszej klatce UFO dopiero się pojawia w zasięgu wzroku. Chcę, aby kolejna klatka była prawie identyczna z tym wyjątkiem, że spodek powinien przesunąć się bliżej w kierunku miejsca lądowania. Nie ma on zbyt długiej drogi do przebycia, a chciałbym, by pokonał ją w siedmiu lub ośmiu klatkach, więc cała animacja powinna liczyć dziewięć lub dziesięć klatek. Im mniejsze wymiary będzie miała animacja i mniejszą liczbę klatek, tym mniejszy będzie rozmiar fizyczny końcowego pliku. W dowolnym momencie możesz rozłożyć obiekty do ich własnych klatek za pomocą przycisku Distribute to Frames z palety Frames, więc najlepiej jest zbudować całą animację tylko w jednej, pierwszej klatce. W moim przykładzie jedynie zduplikowałem i rozmieściłem we właściwych położeniach wszystkie kopie spodka. W efekcie pierwsza klatka zawiera kilka spodków znajdujących się we właściwych położeniach, ale w niewłaściwych klatkach (rysunek 24.4).
Najczęściej stosowaną techniką tworzenia banerów reklamowych o dynamicznej akcji bez drastycznego zwiększania liczby klatek i rozmiaru pliku jest wykorzystanie filtra umożliwiającego tworzenie efektu poruszenia obiektu z punktu A do punktu B (rysunek 24.8). Jednym z takich filtrów jest Motion Trail dostępny w pakiecie Eye Candy 4000 LE wbudowanym do Fireworks. Spodek, zamiast w pięciu lub sześciu klatkach, porusza się jedynie w trzech, ale nadal wygląda, jakby leciał. Bez zastosowania tego filtra, zbyt długie odstępy pomiędzy poszczególnymi rysunkami spodka spowodowałyby, że zamiast się poruszać, spodek pojawiałby się i znikał.
|