Documente online.
Zona de administrare documente. Fisierele tale
Am uitat parola x Creaza cont nou
 HomeExploreaza
upload
Upload




Animowane banery reklamowe

Poloneza


Animowane banery reklamowe

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 przy­czynił się do tak gwałtownego rozwoju World Wide Web. Po umieszczeniu na stro­nie 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.

Podstawowe wiadomości
o banerach reklamowych

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żyt­kownikó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.

Rozmiar - standardy IAB/CASIE

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 stan­dar­dowych rozmiarach. Jeśli tworzysz stronę WWW, na której zostawiłeś obszar o wy­mia­rach 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 in­ter­netowej) oraz Coalition for Advertising Supported Information and Entertainment (CASIE - Agencja reklamy i widowisk) wspólnymi sił 15515e413p ;ami utworzyły listę rozmiarów stan­dar­do­wych. Lista ta została przedstawiona wszystkim reklamodawcom i od­bior­com, którzy zaakceptowali ją przytłaczającą większością głosów. Prawie wszystkie reklamy in­ternetowe tworzone są obecnie według standardów IAB/CASIE.

Więcej informacji o standardach IAB/CASIE znajdziesz w witrynach in­ter­­netowych organizacji IAB - www.iab.net oraz CASIE - www.casie.com

 

W tabeli 24.1 zamieściłem zestawienie standardowych rozmiarów banerów rekla­mo­wych 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ą po­pularność w In­ternecie uzyskują także inne rozmiary. Stosowane one są do wy­świe­tla­nia reklam zajmujących bardzo mało miejsca, na przykład na marginesach stron lub na­wet we wcięciach akapitowych. Jeśli nie możesz się zdecydować, który rozmiar wy­brać, 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ć pod­czas 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.

 

Rozmiar pliku

Oprócz właściwych rozmiarów banera reklamowego, musisz wziąć pod uwagę rów­nież jego rozmiar fizyczny. Nie istnieje żaden standard regulujący rozmiary plików re­kla­mowych. Większość administratorów WWW definiuje maksymalną wielkość tych plików i nie przyj­mą od Ciebie reklamy o większych rozmiarach. Jeśli projektujesz reklamę prze­zna­czoną 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ć roz­miar pliku mniejszy niż 10 kB lub 12 kB. Jeśli uda Ci się stworzyć dos­ko­na­łą reklamę o rozmiarze pliku 8 kB, tym lepiej dla Ciebie. Będzie ona szybko pobierana z In­ternetu i zobaczy ją więcej użytkowników.

Umieszczanie banerów na stronach WWW

Baner reklamowy jest oczywiście takim samym obrazkiem jak każdy inny GIF, więc miej­scem, 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 rekla­mo­da­wcó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 po­now­nie odwiedza daną stronę i zobaczył reklamy inne niż te, które obejrzał poprzednim ra­zem. 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 - skryp­tów CGI (Common Gateway Interface). Wystarczy kilka godzin pracy, aby prosta wi­try­na 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.

 

Przekaz informacji

Kompletny kurs metod Madison Avenue wykracza poza zakres tej książki, ale po­wi­nie­neś 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ę. Wie­lu ludzi zamiennie używa terminów "odsłona" i "trafienie", ale jedna stro­na WWW może składać się z dwudziestu pojedynczych plików, podczas gdy in­na tylko z dziesięciu. Najlepiej jest więc zdefiniować własne terminy i wy­ko­rzys­tywać je w dyskusjach o "trafieniach".

u      CPM jest kosztem za tysiąc odsłon strony (M jest tutaj rzymskim oznaczeniem licz­by 1000). Jest to standard używany w sprzedaży reklam w Internecie. W wi­trynie o doskonałych wskaźnikach oglądalności cena za tysiąc odsłon re­kla­my może być wysoka.

u      Bezpośrednie kliknięcie definiuje sytuację, w której użytkownik szczególnie za­in­teresowany banerem reklamowym klika go, aby przejść do witryny in­ter­ne­towej 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żyt­kownik nie kliknie banera reklamowego, przynajmniej go zobaczy i za­pa­mię­ta wyświetlany na nim znak firmy.

Technika Fireworks:
tworzenie
banerów reklamowych

Mimo że banery reklamowe często są tworzone przez całe sztaby ludzi związanych z reklamą, pro­du­centów, projektantów internetowych, najlepszą metodą na zastosowanie poniższej te­chniki jest utworzenie kampanii reklamowej dla fikcyjnej firmy, wymyślonej na wła­sne po­trze­by. W taki właśnie sposób utworzymy krok po kroku baner reklamowy w Fire­works.

Na dołączonym do książki CD-ROM-ie znajdziesz przykład two­rzo­ne­go w tym rozdziale banera reklamowego "Mundane Magazine" zarówno w źród­łowym formacie PNG, jak i w wyeksportowanym jako ani­mo­wa­ny GIF.

 

Krok 1: Ustawiamy scenografię

Pierwszym krokiem w tworzeniu banera reklamowego jest zdefiniowanie właściwych wy­miarów. Niekiedy wymiary reklamy będą determinowane rodzajem projektu, ale w więk­szości przypadków będziesz musiał utworzyć baner o z góry ustalonych wy­mia­rach. W swoich projektach przestrzegam standardów IAB/CASIE i tworzę pełno­wy­mia­rowe banery o wymiarach 468 60 pikseli, które mogą być wyświetlane na więk­szoś­ci wi­tryn internetowych.

Krok 2: Piszemy scenariusz

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 re­kla­mowymi możesz stosować te same koncepcje, których używałeś przy tworzeniu zwy­kłych animacji. Obowiązuje więc zwięzłość wypowiedzi, planowanie z wyprze­dze­niem 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 kil­ku 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 "Mun­dane Magazine". Jest to czasopismo o Internecie przeznaczone dla młodych czy­tel­ników. Chcę więc utworzyć coś, co przyciągnie uwagę wielu młodych, "od­jaz­do­wych" 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?

Krok 3: Tworzymy aktorów

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ć nie­co kłopotliwe przy rysowaniu obiektów. Obiekty w banerach reklamowych i tak częs­to są kadrowane i zmniejszane, więc wolę rysować i budować obiekty w drugim, więk­szym oknie dokumentu (rysunek 24.1), czyli w swoistym rodzaju notatnika lub - trzy­ma­jąc się terminologii teatralnej - za kulisami, za którymi obiekty czekają na swój występ. Obiek­ty Fireworks mogą być w każdej chwili edytowane i łatwo przeciągane pomiędzy do­kumentami, więc tworzenie kulis jest bardzo dogodnym sposobem pracy.

Rysunek 24.1.

W trakcie budowania banera reklamowego użyj drugiego dokumentu jako szkicownika
lub kulis,
aby uchronić się przed pracą wewnątrz samej reklamy

Kompleksowe efekty, takie jak zewnętrzne cienie i blaski, zwiększą rozmiar końcowy ani­mowanego GIF-a, ponieważ w tym formacie lepiej kompresowane są obszary jed­no­li­tych 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 mniej­szy 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 mu­sisz "powiedzieć" co ma robić, aby utworzyć reklamę.

Krok 4: Akcja!

Jesteśmy już przygotowani do umieszczenia obiektów na swoich miejscach. Utwórz osob­ną 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 pew­na zaleta: wszystkie obiekty, łącznie z bitmapami, które były stwo­rzo­ne na potrzeby strony WWW lub do druku można szybko prze­ska­lo­wać i ponownie wykorzystać bez utraty jakości. Tworzenie banera reklamowego na stronę WWW wiąże się najczęściej z budowaniem zna­ków graficznych i innych ilustracji łatwo dostępnych do późniejszego wy­ko­rzystania 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ój­nego wyglądu elementów graficznych znajdujących się w jednej wi­try­nie WWW oraz reklamujących ją banerów

Wszystkie warstwy przedstawione zostały na rysunku 24.2. Na warstwie o nazwie back­ground umieszczone są góry, które są współużytkowane przez wszystkie klatki do­ku­men­tu. Zablokuj warstwę tła i na razie zapomnij o niej.

Aby ustawić współużytkowanie warstwy, kliknij dwukrotnie jej nazwę w pa­lecie Layers, aby wyświetlić okno dialogowe Layer Options i za­znacz opcję Shared Across Frames.

Rysunek 24.2.

Tło jest takie samo dla całej animacji, więc warstwa ta została ustawiona jako współużytkowana

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 rekla­mo­we powinny być obiektami statycznymi. Prawdopodobnie tak, ale być może zmienię zda­nie, 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 miej­scach, 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ę ani­mować te obiekty w klatkach pośrednich (rysunek 24.3).

Rysunek 24.3.

Po stworzeniu pierwszej klatki, utwórz nową klatkę, która będzie ostatnią klatką animacji. Twoja dwuklatkowa animacja ma teraz początek i koniec, co znacznie ułatwia stworzenie wszystkich klatek pośrednich

Utworzenie pierwszej i os­tat­­niej klatki przed pozostałymi pozwoli o wiele łatwiej utwo­rzyć 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

Po dwukrotnym kliknięciu nazwy klatki w palecie Frames, możemy zmienić standardową nazwę "Frame 1" na dowolną inną

 

Wreszcie możemy na poważnie zająć się animowaniem. W pierwszej klatce UFO jesz­cze nie widać, zaś w ostatniej - UFO już wylądowało. Kopiuję UFO z ostatniej klatki, wkle­jam 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 ko­lej­na 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 li­­czyć dziewięć lub dziesięć klatek. Im mniejsze wymiary będzie miała animacja i mniej­szą 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ą przy­cisku Distribute to Frames z palety Frames, więc najlepiej jest zbudować całą ani­ma­cję tylko w jednej, pierwszej klatce. W moim przykładzie jedynie zduplikowałem i roz­mieściłem we właściwych położeniach wszystkie kopie spodka. W efekcie pierw­sza klatka zawiera kilka spodków znajdujących się we właściwych położeniach, ale w nie­właściwych klatkach (rysunek 24.4).

 

Rysunek 24.4.

Po zduplikowaniu spodka i umieszczeniu kopii w odpowiednich położeniach w obszarze roboczym, możesz zacząć je rozkładać na odpowiednie klatki

Najszybszym sposobem duplikowania obiektów jest ich przeciąganie z wciś­niętym klawiszem Alt (Option).

 

Jeżeli w Twojej animacji obiekty poruszają się po linii prostej, do utwo­rze­nia pośrednich kroków animacji użyj sekwencjonowania, które zos­ta­ło opisane w rozdziale 23.

 

Ostatnia klatka animacji jest już gotowa, więc chcę ręcznie utworzyć klatki, zanim klik­nę przycisk Distribute to Frames, aby Fireworks nie utworzył żadnych klatek nakła­da­ją­cych się na klatkę końcową. W pierwszej klatce mam siedem spodków, więc mu­szę utworzyć sześć kolejnych klatek.

Po rozłożeniu spodków na klatki, mogą obejrzeć animację z wykorzystaniem kontrolek od­twarzania i utworzyć efekt opadania spodka. W tym celu, jeśli to będzie konieczne, w okre­ślonych klatkach musze go lekko przesunąć w lewo lub na prawo, aby utworzyć po­żądany efekt, czyli nierówne lądowanie UFO.

Po dojściu do miejsca, w którym następuje odtwarzanie animacji, musimy przejść do nieodzownego prze­ra­bia­nia obiektów. W naszym przykładzie zdecydowałem, że nie chcę mieć dymka w os­tat­niej klatce animacji. Ostatnie trzy klatki powinny wyglądać następująco: statek ląduje, po­jawia się dymek ze słowem, który następnie znika. Zdałem sobie również sprawę z te­go, że lądujący spodek powinien zostać uszkodzony, aby zaakcentować efekt je­go rozbicia.

Utworzenie uszkodzenia spodka jest prostym zadaniem, ale uszkodzenie musi się pojawić w siódmej i ósmej klat­ce. Po zmodyfikowaniu spodka w siódmej klatce, zaznaczam go i przeciągam z wciś­niętym klawiszem Alt Option) ikonę selekcji w palecie Frames (rysunek 24.5) z klat­ki siódmej do ósmej. Spowoduje to skopiowanie zaznaczenia z klatki 7. do klatki 8.

Najszybszym sposobem na wykonanie dodatkowej klatki na końcu animacji jest zdu­pli­ko­wanie ostatniej klatki i usunięcie z niej dymka. Przyrost rozmiaru pliku będzie bardzo ma­ły, gdyż dwie ostatnie klatki są prawie identyczne, a jedyną zmianą jest większy ob­szar jednolitego koloru w ostatniej klatce, powstały po usunięciu dymka. Aby zdu­pli­ko­wać ostatnią klatkę animacji, wystarczy przeciągnąć jej nazwę w palecie Frames na przy­cisk New Frame (Nowa klatka).

Rysunek 24.5.

Przeciągnięcie ikony selekcji z klatki
do klatki w palecie Frames powoduje przeniesienie zaznaczonych obiektów.
Po przeciągnięciu z wciśniętym klawiszem Alt obiekty zostaną skopiowane

Jedyne, co nam pozostało do zrobienia to ustawienie tempa tak, aby trzy ostatnie klatki by­ły odtwarzane nieco wolniej od pozostałych. Opóźnienia w odtwarzaniu klatek, zapę­tla­nie i tym podobne parametry można ustawiać w palecie Frames lub w zakładce Animation okna dialo­go­wego Export Preview. Podczas pracy w oknie dialogowym Export Preview (rysunek 24.6) animacje odtwarzane są bardziej płynnie niż w oknie dokumentu. W oknie tym znaj­dują się też wszystkie niezbędne kontrolki sterowania animacjami. Możesz zo­ba­czyć, że czasy trwania trzech ostatnich klatek są ustawione odpowiednio na jedną, dwie i jedną sekundę (wyrażone w setnych częściach sekundy). Najpierw za pomocą kontrolek odtwarzania znaj­du­ją­cych się w ok­nie dialogowym przetestowałem kilka różnych ustawień opóźnień. Zapęt­lanie usta­wi­łem na dziesięć razy, co wystarcza, aby animacja była zapętlana przez około 1 mi­nu­tę, gdyż jednokrotne odtworzenie banera trwa trochę ponad 5 sekund. Po od­two­rzeniu baner staje się statyczny i zachęca użytkownika do odwiedzenia strony "Mundane Ma­ga­zine" bez irytującego, ciągłego odtwarzania.

Rysunek 24.6.

Ustaw opóźnienia poszczególnych klatek i zapętlanie całej animacji. Zwróć uwagę,
że animacja
jest odtwarzana w oknie dialogowym Export Preview

Jeśli nie ustawisz niekończącego się zapętlania upewnij się, że os­tat­nia klatka animacji zawiera wszystkie elementy niezbędne do dos­tar­cze­nia użytkownikowi wszystkich żądanych informacji.

Krok 5: Usuwamy zbędne elementy

Czasami trzeba stosować dosyć drastyczne metody przy eksportowaniu animacji i tworzeniu ani­mo­wa­nego GIF-a. Pamiętaj, że musisz skupić się na przekazaniu wszystkich koniecznych infor­macji. Nie dostaniesz nagrody za to, że Twoja animacja ma dużo kolorów. Mój baner ma mniej niż 12 kB, ale jeśli utworzę większy plik, próbuję go zmniejszyć na je­den z poniższych sposobów:

u      Usuwam niektóre klatki, co może spowodować mniej płynne odtwarzanie ani­macji.

u      Przesuwam spodek bliżej pomiędzy klatkami tak, aby zmniej­szyć obszar animacji.

u      Tworzę obszary jednolitych kolorów, na przykład w miejscu gór posiadających teks­tury. Obszary jednolitych kolorów są lepiej kompresowane.

u      Usuwam niektóre kolory, wyrzucając je z palety.

u      Usuwam efekty, na przykład wewnętrzną fazę z tekstu i spodka, aby uzyskać więk­sze obszary jednolitych kolorów.

u      Zmniejszam niektóre obiekty, na przykład tekst tak, aby było widać więcej jed­no­­litego niebieskiego koloru tła.

Niekiedy warto zrezygnować z wartości artystycznych grafiki, a polepszyć wartość pre­zen­tacyjną i prędkość ładowania banera reklamowego.

Ostateczny wygląd banera "Mundane Magazine" możesz zobaczyć na rysunku 24.7.

Barwną wersję banera reklamowego tworzonego w tym rozdziale znaj­dziesz w kolorowej wkładce.

 

Technika Fireworks:
Rozmywanie jako sposób
na oszczędzanie klatek

Przeważnie chcesz, aby baner reklamowy był dynamiczną, szybko zmieniającą się ani­ma­cją. Musisz jednak - jak zawsze - wziąć pod uwagę przepustowość łączy inter­ne­to­wych i rozmiary plików. Każda dodatkowa klatka animacji zwiększa rozmiar koń­co­we­go pliku.

Rysunek 24.7.

W końcowym banerze reklamowym animacja odtwarzana jest w małym obszarze i w niewielkiej liczbie klatek. Dobrze kompresowane jest tło o jednolitym kolorze. Rozmiar pliku banera jest mniejszy niż 12 kB

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 (ry­su­nek 24.8). Jednym z takich filtrów jest Motion Trail dostępny w pakiecie Eye Candy 4000 LE wbu­dowanym 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ł.

 

Rysunek 24.8.

Spodek szybko przelatuje przez cały baner, a wszystko kosztem jedynie trzech klatek.

 

W drugim banerze "Mundane Magazine" zostały wyko­rzys­tane elementy tworzone na potrzeby pierwszego banera. Two­rze­nie banerów będących dalszym ciągiem poprzednich jest często sto­so­wa­ną techniką, która pomaga w lepszej identyfikacji wizualnej.

Na dołączonym do książki CD-ROM-ie znajdziesz opisywany w tym roz­dziale baner w formacie animowanego GIF-a oraz jako źródłowy plik PNG Fireworks.

 

Podsumowanie

Banery reklamowe są bardzo popularnym i praktycznym zastosowaniem animo­wa­nych GIF-ów. Tworząc banery reklamowe w Fireworks, musisz pamiętać o nastę­pu­ją­cych rzeczach:

u      Banery reklamowe powinny mieć ustalone, standardowe wymiary. Zanim za­czniesz tworzyć baner, upewnij się, że zdefiniowałeś dla niego właściwy roz­miar, tak aby mógł być wykorzystywany na wielu różnych witrynach WWW.

u      Większość witryn internetowych ma zdefiniowane maksymalne rozmiary akcep­towanych przez nie plików. Rozmiar pliku banera reklamowego powi­nien być mniejszy niż 12 kB.

u      Zastosowanie filtra poruszenia umożliwia usunięcie zbędnych klatek animacji, bez żadnego wpływu na jej płynne odtwarzanie.

W następnym rozdziale poznasz sposoby dostosowywania Fireworks do własnych potrzeb.


Document Info


Accesari: 4061
Apreciat: hand-up

Comenteaza documentul:

Nu esti inregistrat
Trebuie sa fii utilizator inregistrat pentru a putea comenta


Creaza cont nou

A fost util?

Daca documentul a fost util si crezi ca merita
sa adaugi un link catre el la tine in site


in pagina web a site-ului tau.




eCoduri.com - coduri postale, contabile, CAEN sau bancare

Politica de confidentialitate | Termenii si conditii de utilizare




Copyright © Contact (SCRIGROUP Int. 2024 )