Pawel Zakrzewski - Adobe Certified Expert | Adobe Community Expert

Artykuł pochodzi z magazynu PSD

Prawdopodobnie wielu z nas spotkało na stronach internetowych publikacje, których kolejne strony można przekładać w sposób zbliżony do tradycyjnego oglądania gazety. Chwytamy myszką prawy, dolny narożnik i po prostu przekładamy stronicę odsłaniając tym samym kolejną. Efekt ten choć bardzo widowiskowy dziś nie jest już trudny do zrobienia. Nawet dla mniej doświadczonego użytkownika programów Adobe.

Co więcej, dzięki użyciu programu Adobe InDesign CS4 możemy utworzyć go z wielką łatwością dbając przy okazji o atrakcyjny wygląd i odpowiednią oprawę całej prezentacji.

To z pewnością bardzo zaskakujące, że do budowy interaktywnej galerii zdjęć w formacie Flash SWF wykorzystamy popularny program do składu jakim jest Adobe InDesign CS4. Jednak wygoda pracy i nieograniczone możliwości przygotowania projektu/szablonu całej pracy szybko wyjaśnią taki właśnie wybór. Co więcej, jeśli dodamy do tego nowe możliwości eksportu dostępne w najnowszej wersji InDesign CS4 wszystko od razu stanie się jasne i zrozumiałe.

W najnowszej wersji CS4, ten popularny program można wspaniale wykorzystać do tworzenia interaktywnych dokumentów PDF i SWF. Szczególnie te drugie prezentują się widowiskowo na ekranie naszych monitorów. W tym przykładzie pokusimy się o przygotowanie prostej galerii zdjęć tak by przybliżyć możliwości InDesign CS4 w zakresie tworzenia i publikacji interaktywnych dokumentów SWF. Do ukończenia pracy potrzebujemy jedynie kilkanaście/kilkadziesiąt zdjęć i nieco czasu. Uzyskany efekt z pewnością wynagrodzi nam cały nakład czasu raca włożony w przygotowanie galerii.

Oczywiście nie ma żadnych problemów by w podobny sposób przygotować intranetowe, interaktywne wydanie gazety, katalogu czy innego dokumentu przeznaczonego do druku. W takim przypadku, nie ma potrzeby tworzenia całego szablonu, ponieważ ten już istnieje. Aby przekształcić dowolną pracę w prezentację ekranową wystarczy wybrać polecenie File>Export, wskazać format SWF i odpowiednio skonfigurować opcje zapisu finalnej wersji naszej publikacji. Gotowy plik SWF możemy osadzić na dowolnej stronie WWW i nie jest to żadnym problemem nawet dla mniej doświadczonych Webmasterów.

Konfiguracja dokumentu Adobe InDesign CS4

Do budowy atrakcyjnej galerii potrzebujemy ciekawą oprawę graficzną. Dziki użyciu narzędzi InDesign jej opracowanie nie powinno sprawić nam żadnych kłopotów. Pracę rozpoczynamy od ustawienia ogólnych właściwości dokumentu. Otwieramy Adobe InDesign CS4 i za pomocą polecenia Ctrl+N lub Cmd+N na Macu budujemy nowy dokument InDesign.

Oczywiście, w związku z tym, że całość prezentowana będzie na ekranie monitora, jego właściwości będą nieco inne niż podczas tworzenia prac przeznaczonych do druku.

Do prezentacji na ekranie monitora przygotujemy stronę o pionowej orientacji. Może to nieco dziwne, jednak tak przygotowany dokument okazuje się lepiej przygotowany do proporcji monitora. Jak to możliwe? Sprawa jest całkiem prosta, będziemy budować strony rozkładowe – a popularne rozkładówki wyświetlone obok siebie, wypełnią nam ekran w sposób zbliżony do jego proporcji.

Oczywiście kwestią dodatkową pozostaje tu samo dobranie wielkości strony, jednak po kilku próbach każdy z nas samodzielnie odnajdzie rozmiar najbardziej odpowiedni do konkretnych potrzeb. W naszym przykładzie użyłem stronę o wielkości 600×800 pikseli, która prezentowana jako rozkładówka będzie miała rozmiar 1200×800 co pozwoli nam łatwo prezentować ją na większości popularnych monitorów.

Jeśli w pracy chcemy dodać także różne elementy dodatkowe, możemy rozważyć użycie marginesów, które ułatwiają pozycjonowanie elementów na stronie. W naszym przypadku, galeria nie będzie bardzo rozbudowana, toteż nie było konieczności dodawania linii pomocniczych marginesów.

Co bardzo ważne, w oknie nowego dokumentu wskazujemy opcję Facing Pages (Rozkładówki, Strony widzące) aby można było przygotować układ galerii złożonych z dwóch stron prezentowanych obok siebie. Do tworzenia interaktywnej galerii SWF taki układ sprawdza się najlepiej. Wskazujemy więc jeden łam, i marginesy o zerowej wielkości, zaznaczamy opcję Facing Pages oraz początkowo 3 strony dokumentu i rozpoczynamy budowę szablonu

Tworzymy makietę/szablon galerii

Do prezentacji zbioru fotografii wykorzystamy jeden stały układ graficzny. Naturalnie nie będzie konieczności by powtarzać rozkład typowych elementów na każdej stronie, wykorzystamy w tym celu Master Page czyli stronę wzorcową InDesign. Dzięki użyciu wzorca możemy łatwo i szybko [przygotować makietę dla wielu stron jednocześnie. Co więcej, modyfikacja wzorca automatycznie uaktualnia wszystkie strony zbudowane na jego podstawie.

To niezwykle wygodne podejście jest całkowicie nieodzowne podczas tworzenia dokumentów wielostronicowych przygotowanych z myślą o druku, doskonale sprawdzi się także w naszej interaktywnej, elektronicznej pracy. Zamiast budować interfejs galerii na kolejnych stronach, użyjemy wzorzec i automatycznie zastosujemy raz przygotowany układ na wszystkich stronach tej elektronicznej publikacji.

Do budowy szablony – Master Page przechodzimy do palety Window>Pages (F12) i dwukrotnie klikamy w miniaturkę A Master widoczną w górnej sekcji okna.

W ten sposób przechodzimy do edycji wzorca naszej pracy

Oczywiście sposób prezentacji fotografii czy też innych prac graficznych jest sprawą indywidualnego wyboru. W naszym przykładzie pokusiłem się o przygotowanie prostych elementów graficznych (prostokąty, prostokątne ramki graficzne), o stonowanej szarej kolorystyce, które doskonale kontrastują z kolorowymi zdjęciami.

Tego typu galeria cechuje się prostotą i czytelnością i nadaje naszej pracy ciekawy charakter. Jeśli jednak tego typu stylistyka galerii nie przypadła do gustu lub po prostu nie nadaje się do prezentacji naszych prac, możemy pokusić się o przygotowanie dowolnego, innego układu. Co ważne nie ma tu żadnych ograniczeń!

Aby prezentować prace na neutralnym tle dodałem prostokątną ramkę graficzną w tle galerii. Nadałem jej odcień szarości na poziomie 5-10% czerni.

Oczywiście, aby zmiany widoczne były na obu stronach galerii, konieczne jest powielenie ramki także na prawą stronę projektu.

Ten krok dotyczy wszystkich elementów jakie dodamy do naszej pracy. Aby zachować spójny wygląd lewej i prawej strony rozkładówki, na stronie wzorcowej dodajemy elementy o jednakowym położeniu na obu stronach. Niekiedy, w zależności od projektu możemy pokusić się o wprowadzenie efektu lustrzanego odbicia, który pozwoli zachować symetryczny wygląd całej rozkładówki.

Jako że pracujemy nad dokumentem elektronicznym prezentowanym jedynie na ekranie komputera, nie ma konieczności by do elementów graniczących z krawędziami strony dodawać spady. Ich obecność nie ma wpływu na finalną wersję naszej pracy. Jeśli więc przekształcamy w interaktywny projekt SWF istniejący dokument InDesign nie ma konieczności usuwania czy też korekty elementów wychodzących na spad.

Po dodaniu tła przystępujemy do wprowadzenia kolejnych elementów layoutu naszej galerii.

W naszym przykładzie pokusiłem się o dodanie białej ramki graficznej, która posłuży mi za tło do prezentowania osobnych fotografii. Dodatkowo, za pomocą opcji dostępnych przyciskiem fx nadałem jej efekt cienia.

Aby ten nie był zbyt intensywny, dopasowałem jego odcień (rozjaśnienie za pomocą zmniejszenia wartości parametru Opacity) oraz odległość od obiektu bazowego – ramki.

Kolejny krok to dodanie podpisu pod zdjęciem. W naszym przykładzie buduję niewielką galerię prac wykonanych za pomocą obiektywu wyposażonego w funkcję Macro, toteż cała galeria posiada jeden, stały tytuł. Umieściłem go w dolnej części białej ramki i aby zachować spójny wygląd całości nadałem jasno szary kolor tekstu.

Oczywiście zarówno miejsce prezentacji tytułu galerii jak i wykorzystany krój pisma, kolorystyka zależy przede wszystkim od charakteru naszej pracy i indywidualnych upodobań.

W dalszej części pokusimy się o użycie narzędzia Rectangle Frame Tool (F) i dodanie pustej, prostokątnej ramki do prezentacji zdjęcia. Jej wielkość powinna być ściśle skorelowana z rozmiarem fotografii, jaki będziemy tu prezentować.

Najwygodniej byłoby tak, że obrazek od razu pasuje do przygotowanej ramki. Jeśli nie, warto jest zadbać aby zachować proporcje ramki zgodne z proporcjami wykorzystanych fotografii. Pozwoli to na szybkie i automatyczne dopasowanie ich wielkości w ramce.

Aby ułatwić sobie to właśnie zadanie, możemy od razu dla pustej ramki graficznej wprowadzić odpowiednie opcje dopasowanie. W tym celu klikamy ramkę prawym klawiszem myszki i wskazujemy polecenie Fitting>Frame Fitting Options.

W wyświetlonym oknie dialogowym wybieramy jeden ze sposobów dopasowania najlepszy dla naszej pracy. Wskazanie opcji Fit Content Proportionaly pozwala automatycznie dopasować zdjęcie (lub inna grafikę) do wielkości ramki. Jednak w tym przypadku konieczne było wcześniejsze zachowanie proporcji dla ramki graficznej. Zdjęcie o innych proporcjach nie wypełnia jej całkowicie, co nie zawsze daje dobry efekt.

Aby zabezpieczyć się przed taką sytuacją możemy wskazać także opcję Fill Frame Proportionally. Pozwoli ona na zachowanie proporcji oryginalnej fotografii i doskonale dopasuje ją do wielkości przygotowanej ramki graficznej.

W tym przypadku możemy jednak przyciąć część zdjęcia, jeśli jego proporcje znacznie odbiegają od kształtu samej ramki.

Użycie odpowiedniej wielkości zdjęć zdecydowanie ułatwia pracę i całkowicie rozwiązuje problem dopasowania.
W naszej pracy wybrałem opcję Fill Frame Proportionally, która zapewnia mi wypełnienie całej ramki graficznej z zachowaniem proporcji oryginalnych fotografii. Jako że te są wcześniej dopasowane do wielkości naszej pracy nie będę miał żadnych problemów z ich automatycznym dopasowaniem.

Uwaga!

Aby szybko dopasować serię zdjęć do naszego projektu najwygodniej jest wykorzystać paletę Actions (Zadania/Operacje) i wykonać cały proces automatycznie. Podczas dopasowanie wielkości możemy dodatkowo wyostrzyć pomniejszane fotografie. Pozwala to na osiągnięcie lepszej ich jakości w budowanej galerii.

Ostatnim krokiem w naszej galerii jest dodanie drobnej ramki, która stanowi naturalną granicę każdej fotografii. W tym celu ponownie wybieramy narzędzie Rectangle Tool (M) i rysujemy prostokąt wokół przygotowanej ramki graficznej. Nadajemy mu szary obrys o nasyceniu około 20% czerni.

Gotowy moduł (białe tło, podpis, ramka graficzna na fotografię oraz dodatkowe obramowanie) musimy szybko przenieść na drugą stronę rozkładówki. W tym celu wraz ze wciśniętym klawiszem Shift zaznaczamy kolejno białą ramkę, podpis, ramkę na zdjęcie oraz obrys. W ten sposób aktywne są wszystkie elementy, które powinniśmy przenieść na prawą stronę rozkładówki.

W tym celu wraz ze wciśniętym klawiszem Alt (kopia) oraz Shift (zachowanie pionu) przeciągamy moduł na drugą stronę. Dzięki liniom Smart Guides, właściwe ułożenie go na drugiej stronie nie powinno stanowić żadnego problemu. Jeśli jednak nie dowierzamy tej niezwykle przydatnej, nowej funkcji Adobe InDesign, możemy skorzystać z możliwości pozycjonowania obiektów za pomocą współrzędnych X i Y w górnym pasku opcji programu.

Zapewniam jednak, że dzięki wykorzystaniu nowych linii pomocniczych – Smart Guides nie jest to jednak konieczne.

W ten właśnie sposób przygotowaliśmy sobie makietę do prezentacji zdjęć. Kolejny krok to dodanie samych zdjęć, dzięki użyciu wzorca - Master Page nie będzie to trudnym zadaniem.

Dodajemy kolejne strony i zdjęcia

Aby zakończyć pracę z makietą ponownie skorzystamy z palety Pages (F12). Dwukrotnie klikamy w miniaturkę strony o numerze 1 i przechodzimy do pracy z pierwszą stroną naszego projektu. Tu zgodnie z założeniem widoczne są od razu wszystkie dodane elementy wzorca. W podobny sposób zbudowane są pozostałe strony naszej pracy. Klikamy dwukrotnie w miniaturkę strony drugiej by szybko przejść do widoku pierwszej rozkładówki projektu. Tu właśnie rozpoczniemy dalszą pracę.

Jeśli spróbujemy zaznaczyć dowolny element strony łatwo się zorientujemy, że są one zablokowane do przypadkowej edycji. To bardzo wygodne, projekt edytujemy na szablonie (Master Page) zaś na kolejnych stronach wprowadzamy jedynie konkretne elementy. Jak jednak dodać zdjęcie, skoro przygotowana ramka graficzna jest także zablokowana?

Posłużymy się tu niewielkim trikiem. Jeśli wraz ze wciśniętymi klawiszami Ctrl+Shift lub Cmd+Shift na Macu, klikniemy przygotowaną ramkę na zdjęcie automatycznie odblokujemy ją.

Pozwoli to na łatwe dodawanie zdjęć. Co ważne, dopóty nie zmienimy jej położenia na konkretnej stronie, modyfikacja jej położenia ramki na stronie wzorca Master Page, automatycznie zaktualizuje także tę stronę. Daje to naprawdę wspaniałe możliwości i znacznie ułatwia późniejszą edycje galerii.

Po odblokowaniu ramki nie pozostaje nic innego jak zaimportować pierwszą fotografię. W tym celu wybieramy polecenie File>Place (Ctrl+D lub Cmd+D na Macu) i wskazujemy odpowiedni plik graficzny.

Osadzony obrazek automatycznie dopasował się do ramki graficznej zgodbnie z metodą dopasowania jaką wskazaliśmy na wzorcu.

W podobny sposób możemy oczywiście odblokować (Ctrl+Shift+kliknięcie lub Cmd+Shift+Kliknięcie) ramkę na prawej stronie rozkładówki i zaimportować kolejny obrazek. Także ten zostanie automatycznie dopasowany do ramki.

Oczywiście w podobny sposób można dodawać kolejne strony, a następnie wypełniać je odpowiednimi zdjęciami. Spróbujmy jednak wykonać to nieco szybciej.

Rozpoczynamy od dodania dwóch kolejnych stron galerii. Wykorzystamy w tym celu przycisk Add New Page widoczny w dolnej części palety Pages.

Po dodaniu kolejnych stron odblokowujemy ramki graficzne, nie dodajemy jednak kolejnych fotografii. Teraz bowiem powielimy przygotowane strony by uniknąć konieczności odblokowania ramek graficznych na wszystkich dodawanych stronach naszej publikacji.

W tym celu zaznaczamy obie rozkładówki w palecie Pages i przeciągamy je na miniaturkę Create New Page w dolnej części palety.

Automatycznie powstała nam kopia wskazanych stron zawierających odblokowane do edycji ramki graficzne. W podobny sposób powielamy dwie (lub szybciej teraz już nawet cztery) strony naszej pracy i dodajemy tyle rozkładówek ile to konieczne do prezentacji wszystkich prac z danej serii.

Po dodanie kolejnych stron, postaramy się szybko wypełnić je odpowiednią treścią. Przechodzimy na czwartą stronę projektu, zaznaczamy ramkę graficzną i wybieramy polecenie File>Place (Ctrl+D lub Cmd+D na Macu) w oknie dialogowym wskazujemy teraz całą serie fotografii i potwierdzamy wybór.

Tuż obok kursora myszki widoczna jest teraz niewielka miniaturka pierwszej wybranej fotografii, Jeśli to właśnie ją chcielibyśmy umieścić na kolejnej stronie po prostu klikamy ramkę graficzną na stronie.

Obrazek automatycznie dopasował się do wskazanej ramki.

Obok kursora widoczna jest teraz miniaturka kolejnej fotografii. Naturalnie, jeśli to jest odpowiednie zdjęcie, wskazujemy ramkę na prawej stronie i osadzamy je w galerii. Jeśli jednak w tym miejscu chcielibyśmy wykorzystać inne zdjęcie, za pomocą klawiszy – strzałek na klawiaturze możemy wskazać odpowiednie zdjęcie i dopiero wówczas osadzić je na prawej stronie. Przechodzimy na kolejne strony i kontynuujemy dodawanie dalszych zdjęć.

Aby ułatwić sobie pracę, możemy za pomocą skrótu Ctrl+- lub Cmd+-, pomniejszyć podgląd rozkładówek tak by na ekranie widać było kilka stron jednocześnie.

W tym trybie możemy nieco szybciej dodawać kolejne fotografie na stronach naszej galerii.

Eksport do postacie Flash SWF

No cóż, krótko mówiąc, eksport do pliku Flash SWF nie jest pasjonującym zadaniem. Jeśli nie zależy nam na szczególnych ustawieniach, wystarczy wybrać polecenie File>Exprt (Ctrl+E lub Cmd+E na Macu) by przejść do okna eksportu.

W tym miejscu wskazujemy odpowiednią lokalizację na dysku oraz nadajemy właściwą nazwę pliku wyjściowego. Następnie na liście dostępnych formatów wskazujemy SWF przechodzimy do kolejnego okna dialogowego.

Uwaga!

Jeśli przygotowany w ten sposób plik miałby być prezentowany w Internecie, nazwa wyjściowa nie może zawierać spacji, znaków specjalnych typu :, ; .- / * ani polskich znaków. O ile to konieczne, nazwy złożone budujemy wykorzystując dolne podkreślenie. W rezultacie postaje nam nazwa „moja_galeria” zamiast „moja galeria”. Z punktu widzenia serwera WWW ma to istotne znaczenie.

W oknie dialogowym Export SWF wskazujemy zakres stron jaki chcielibyśmy wyeksportować, stopień kompresji oraz docelową wielkość naszego projektu. Namawiam, by nieco poeksperymentować w tych ustawieniach. Zmiana jakości, wielkość może mieć olbrzymi wpływ na szybkość ładowania tak przygotowanej galerii.

O ile nie przygotowaliśmy strony tytułowej całej galerii eksport do formatu SWF możemy ograniczyć do samych rozkładówek, po prostu omijając pierwszą stronę InDesign. Możemy jednak pokusić się o przygotowanie atrakcyjnej okładki (strony tytułowej) całej galerii i wówczas eksportować całą pracę.

Gotowa galeria doskonale prezentuje się na neutralnym tle w oknie przeglądarki internetowej.

O ile to konieczne, właściwości przygotowanej w ten sposób strony WWW możemy dowolnie modyfikować za pomocą edycji jej źródła lub może wygodniej wykorzystując w tym celu Adobe Dreamweavera CS4 lub inny edytor kodu HTML.