Pawel Zakrzewski - Adobe Certified Expert | Adobe Community Expert

Adobe Fireworks CS4 to doskonały program dedykowany do tworzenia, edycji i dostosowania grafiki dla potrzeb Internetu. Wielu z nas jednak nie docenia jego ogromu możliwości.

Stałe przywiązanie do magicznego Photoshopa, zwykle kończy się użyciem tej popularnej aplikacji w każdej niemal sytuacji. Nie zawsze jednak daje to tak dobre efekty jakich w danym przypadku oczekiwaliśmy. Niekiedy warto więc sięgnąć po ciekawą alternatywę – Adobe Fireworks CS4.

Okazuje się, że program Fireworks doskonale sprawdza się podczas tworzenia różnego typu layoutów, projektów i prototypów aplikacji czy też stron internetowych. Zakres dedykowanych narzędzi webowych Fireworksa oraz wygoda działań z pewnością przewyższają możliwości Photoshopa w tej dziedzinie.

Podkreślam jednak, że osąd ten dotyczy jedynie tworzenia elementów grafiki internetowej czy aplikacji. Niestety, tylko z punktu widzenia pracy grafika i użycia narzędzi kreatywnych, Adobe Photoshop jest zdecydowanie lepszym i wygodniejszym programem.

Warto jednak podkreślić, że pomimo wielu ograniczeń, da się z dużą łatwością przygotować doskonałe projekty stron czy aplikacji internetowych wyłącznie za pomocą Fireworks CS4. Z pewnością stanowi on doskonałą alternatywę dla zakupu wiele droższego Photoshopa w sytuacji, gdy zajmujemy się głównie (lub wyłącznie) tworzeniem stron WWW. Dostępny w pakiecie Web Standard CS4 jest doskonałym dodatkiem do uznanych aplikacji jak Adobe Dreamweaver, Flash czy Contribute.

W tym przykładzie, pokusimy się o wykorzystanie programu Fireworks CS4 do budowy prostego, interaktywnego prototypu strony internetowej zapisanego w postaci pliku PDF. Dlaczego PDF?
Format PDF już wiele lat temu stał się uznanym standardem wymiany dokumentów elektronicznych.

Przygotowanie prototypu aplikacji w tej postaci sprawi, że będzie ona dostępna i bez problemu czytelna dla (niemal) wszystkich użytkowników komputerów. Nie ma chyba bardziej uniwersalnej postaci zapisu efektów naszej pracy jak właśnie PDF.

Zachowanie oryginalnego wyglądu, możliwości wprowadzenia elementów interaktywnych sprawiają, że wielu z nas coraz częściej sięgnie po ten ciekawy program podczas tworzenia wstępnych projektów. Zdecydowanie namawiam do takich działań. Możliwości Adobe Firework CS4 są bowiem niezwykle obiecujące.

Budowa projektu za pomocą programu Adobe Fireworks nie jest trudnym zadaniem. Podobnie jak w większości innych programów graficznych, wszystkie elementy wizualne pracy możemy tworzyć samodzielnie za pomocą dostępnych narzędzi wektorowych lub bitmapowych. Możemy także importować gotowe obiekty, zdjęcia a nawet całe projekty utworzone w innym programie.

Co więcej, Adobe Fireworks pozwala otwierać finalne prace w całości przygotowane w Photoshopie i zapisane w tradycyjnym formacie PSD. Oczywiście w tym przypadku zachowana zostanie większość elementów edycyjnych w tym między innymi: warstwy, maski, edytowalne teksty, efekty (style warstw) itp.

W naszym przykładzie, wstępnie przygotowany projekt zbudowany został z kilkunastu osobnych elementów graficznych. Są to oczywiście proste elementy bitmapowe - zdjęcia dopasowane do potrzeb konkretnej pracy za pomocą narzędzi graficznych programu Fireworks.

Cały projekt nie jest oryginalny, odnajdziemy tu: złożone z kilku powtarzających się elementów tło, grafikę nagłówkową, przykładowe teksty i pozostałe elementy graficzne. Aby nadać całości bardziej tradycyjny wygląd strony WWW, pokusiłem się o wyróżnienie sekcji strony za pomocą cienkiego, wektorowego obramowania.

Dla potrzeb niniejszego artykułu, wszystkie elementy składowe projektu połączone zostały w pojedyncze grafiki reprezentujące kolejne strony serwisu. W rezultacie, cały prezentowany moduł nie jest bardzo złożony i składa się jedynie z kilku grafik bitmapowych zapisanych na osobnych warstwach. Każda z nich zawiera kolejny ekran prezentacji/strony internetowej.

Wcześniejsze spłaszczenie poszczególnych elementów warstw (podstron) nie było w tym przypadku konieczne, jednak do utworzenia budowy wstępnego, interaktywnego projektu, takie podejście ułatwia nam pracę. Pojedyncze ekrany pozwolą łatwiej skupić się na dodawaniu elementów interaktywnych co w tym przypadku jest naszym głównym zadaniem.

Naturalnie do dalszych prac możemy wykorzystać także, projekty budowane za pomocą Photoshopa lub innych programów graficznych. Dzięki użyciu Fireworks CS4 łatwo i wygodnie przekształcimy je w interaktywny PDF gotowy do wstępnej prezentacji naszym klientom.

Budowa dokumentu PNG

Na najniższej warstwie prezentowanego tu dokumentu, znajduje się projekt, który możemy nazwać głównym ekranem nawigacyjnym. Jest to typowa strona główna serwisu w tym przypadku nazwana – Home. Na pozostałych warstwach rozmieszczone są kolejne projekty podstron przykładowego serwisu WWW.

Poprzez włączenie lub wyłączenie odpowiedniej warstwy za pomocą przycisku o kształcie oczka w palecie Layers (F2) możemy łatwo przejrzeć wszystkie elementy składowe. Jak łatwo zauważyć, poza stroną główną odnajdziemy tu projekty kilku podstron serwisu wykonanych zespołu muzycznego – Openspace.

Prezentowany projekt nie zawiera jeszcze żadnych przycisków ekranowych. Główne elementy nawigacyjne (Home, Zespół, Galeria, Media, itp.) to jedynie etykiety tekstowe, które markują interaktywne przyciski ekranowe. Wykorzystamy je w dalszej pracy.

Paleta Pages – dodajemy podstrony

Adobe Fireworks pozwala wygodnie budować interaktywne projekty za pomocą palety Pages (Window>Pages lub szybciej Shift+F2), stron oraz łączy pomiędzy nimi. W praktyce, oznacza to, że do budowy interaktywnego prototypu wykorzystać musimy projekty zapisane na osobnych stronach dokumentu. To dość wygodne i całkiem intuicyjne podejście przypomina budowę tradycyjnych stron WWW.

Samo rozmieszczenie kolejnych projektów na stronach nie jest trudnym zadaniem. Wystarczy bowiem powielić istniejącą stronę i za pomocą przycisku „Oczko”, włączyć lub wyłączyć podgląd odpowiedniej warstwy. W rezultacie, kolejne podstrony naszej pracy będą różniły się jedynie konfiguracją widocznych/niewidocznych warstw.

Oczywiście możemy także budować każda stronę serwisu niejako od początku, kopiując lub importując niezbędne elementy graficzne. Niezależnie od metody należy doprowadzić do sytuacji, gdy każda strona dokumentu zawierać będzie inny projekt podstrony serwisu.

Aby przenieść kolejne warstwy na osobne strony dokumenty otwieramy paletę Pages (Shift+F2) i klikając prawym przyciskiem myszki w nazwę pierwszej strony – Page 1 rozwijamy menu kontekstowe. Na dostępnej liście wybieramy polecenie Duplicate Page.

Zaznaczamy drugą stronę serwisu i od razu nadajemy jej konkretną nazwę, w tym przypadku – „zespol”. Za pomocą zmian widoczności warstw w palecie Layers (F2) odsłaniamy oczywiście właściwy projekt podstrony.

W ten sam sposób duplikujemy przygotowaną stronę i ponownie zmieniamy nazwę nowej kopii. Omówione kroki powtarzamy kolejno dla wszystkich przygotowanych projektów podstron przenosząc je na osobną stronę.

W rezultacie, klikając w nazwy stron w palecie Layers w oknie dokumentu widoczna będzie jedynie odpowiednia strona projektu. W kolejnym kroku dodamy proste elementy interaktywne - Hot Spoty.

Dodajemy proste elementy interaktywne

Symbole typu Button

Jeśli w naszej pracy korzystamy z tekstów dodawanych za pomocą Fireworks, możemy łatwo przekształcić je w przycisk ekranowy dodając jednocześnie prosty element interaktywny – animację. Oczywiście w podobny sposób możemy także przygotować przyciski o charakterze graficznym, które nie zawierają etykiet tekstowych a jedynie czytelne i łatwe do zrozumienia grafiki.

Aby przekształcić teksty w proste przyciski ekranowe w programie Fireworks, skorzystamy z technik znanych doskonale wszystkim użytkownikom Flasha. Zaznaczamy jeden z tekstów lub odpowiednią grafikę i za pomocą polecenia Convert To Symbol (Ctrl+8) przekształcamy go w symbol typu Button.

W tym przypadku, na wstępnym etapie budowy projektu strony nie ma sensu by skupiać się na budowie animowanych detali. Może okazać się tak, że cały projekt zostanie bowiem odrzucony przez Klienta a cała praca pójdzie na marne. Spróbujmy więc przygotować przyciski ekranowe w nieco prostszy sposób. Wykorzystamy w tym celu tzw. Hot Spoty.

Dodajemy elementy interaktywne typu Hot Spot

Hot Spot to tradycyjny element interaktywny doskonale znany twórcom stron WWW. Określa on za pomocą dołączonego kodu HTML, obszar (najczęściej prostokątny) , który może stać się interaktywnym linkiem do innej strony. Grafika, która zawiera kilka zdefiniowanych obszarów Hot Spot tworzy tak zwaną Image Map – interaktywną mapę obszarów aktywnych obrazu.

Najlepszym przykładem użycia elementów Image Map i Hot Spotów jest mapa Polski z podziałem na województwa. Aby odszukać imprezy, firmy czy też lokalne biura urzędów klikamy w miniaturkę województwa by przenieść się do kolejnej strony serwisu prezentującej odpowiednie informacje.

Za pomocą programu Fireworks możemy z łatwością dodawać obszary Hot Spot budowane z myślą o projektach internetowych ale także projektując interaktywne, wielostronicowe dokumenty PDF.
Przechodzimy na główną stroną projektu – Page 1 i za pomocą skrótu (J) na klawiaturze wybieramy narzędzie Rectangle Hot Spot.

Przeciągamy nim prostokątny kształt ponad obszarem pierwszego przycisku na stronie – Home.

W podobny sposób dodajemy obszary aktywne do kolejnych elementów menu. Warto w tym miejscu zwrócić uwagę, że dla wygody końcowych użytkowników zwykle budujemy obszary aktywne nieco większe niż ramka tekstowa. Pozwoli to łatwiej korzystać z przygotowanych przycisków.

Po wprowadzeniu odpowiednich elementów aktywnych, dodamy łącza, które pozwolą na dodanie interakcji.

Dodajemy interaktywne łącza

Każdy przygotowany Hot Spot może był łączem do kolejnej strony naszego projektu. O ile to konieczne, możemy dodawać odnośniki także do dowolnych stron w Internecie a nawet plików na naszym dysku lokalnym. Wykorzystamy w tym celu panel Properties zlokalizowany w dolnej części okna Fireworks.

Aby dodać odpowiedni odnośnik, zaznaczamy pierwszy obszar aktywny – przycisk Home, a następnie w polu Link w panelu Properties z rozwijanej listy wybieramy odpowiednią stronę. W tym przypadku – Page 1 czyli główną stronę serwisu.

W podobny sposób postępujemy dalej. Zaznaczamy obszar Hot Spot ponad przyciskiem Zespół i w polu link wskazujemy stronę o tej nazwie. Kolejne łącza dodajemy analogicznie, zaznaczamy Hot Spot i wybieramy odpowiedni odnośnik w polu link.

Oczywiście możliwe jest dodawanie łączy także do innych stron. W tym także plików lokalnych na naszym dysku. W takim przypadku nie korzystamy z listy stron, zaś w polu link ręcznie wprowadzamy odpowiednią lokalizację.

Uwaga!

Aby dodać łącze do strony w Internecie adres URL powinien mieć postać: http://www.psdmag.org . Jak widać w tym przypadku nie można zapomnieć o pełnym zapisie poprzedzonym wyrażeniem http://.

W przypadku łączy do plików, innych stron na dysku lokalnym korzystamy z adresów względnych typu: innaStrona.html lub dane.pdf, pamiętając jednak, by otwierane dokumenty znalazły się w tym samym katalogu co nasz projekt. Oczywiście możemy używać także dodatkowe katalogi i wprowadzać adresy typu: strony/innaStrona.html

Na tym etapie możemy już sprawdzić działania naszej strony. Za pomocą kombinacji Ctrl+ F12 lub Cmd+Shift+F12 na Macu, otwieramy podgląd projektu w oknie domyślnej przeglądarki internetowej. Jak łatwo zauważyć, po najechaniu myszką na kolejne przyciski (Hot Spot), kursor zmienia swój kształt informując nas o wprowadzonym odnośniku. Kliknięcie w przycisk przenosi nas do wybranej strony. Niestety na kolejnej stronie nie działają już wprowadzone łącza. To właśnie musimy zmienić.

Dodajemy łącza do kolejnych stron

Za pomocą palety Pages, przechodzimy na pierwszą stroną projektu i zaznaczamy wszystkie wprowadzone Hot Spoty. Kopiujemy je (Ctrl+C lub Cmd+C na Macu) i otwierając kolejne strony wklejamy na wszystkich podstronach serwisu. W rezultacie te proste elementy nawigacyjne dostępne są na wszystkich prodstronach projektu. Pozwoli to na łatwą i szybka prezentację projekty potencjalnemu klientowi. Gotowy projekt testujemy za pomocą skrótu Ctrl+F12 lub Cmd+Shift+F12 na Macu.

Jeśli w przeglądarce internetowej wszystkie łącza działają poprawnie, możemy pokusić się o zapis ostatecznej formy naszej pracy w postaci pliku PDF. Taki dokument możemy łatwo przesłać do oceny klientowi.

Budujemy interaktywny dokument PDF

W najnowszej odsłonie programu Adobe Fireworks CS4 dodano możliwość zapisu wielostronicowych projektów w formacie PDF. Co ważne, tego typu podejście zachowuje wszystkie elementy interaktywne, wprowadzone za pomocą prostych Hot Spotów i łączy. Zobaczmy więc jak to działa.

Wybieramy polecenie File>Export (Ctrl+Shift+R lub Cmd+Shift+R na Macu) i w oknie dialogowym wskazujemy format zapisu naszej pracy – PDF. Wprowadzamy odpowiednią nazwę pracy oraz jej lokalizację na dysku i… gotowe.

Utworzony projekt zapisany w formacie PDF, zachowuje swój oryginalny wygląd (fonty, grafika, jakość) ale także wprowadzone łącza i strony. W ten sposób niemal każdy użytkownik komputera z dowolnym systemem operacyjnym, może łatwo prześledzić działanie prototypu strony WWW lub innej aplikacji na podstawie wstępnego projektu. Dużo łatwiej rozmawiać o stronie przedstawiając jej interaktywny projekt, a i klienci traktują poważniej tak przedstawione prace.