Krzysztof Zawadzki – blog

Adobe Fireworks CS3

Na początku przygody z grafiką i tworzeniem stron korzystałem z Photoshopa. Jednakże kiedy zacząłem pracować jako web developer w Szkocji, mój kolega współpracownik polecił mi Fireworksa CS3. Jest to program, który łączy ze sobą możliwość korzystania z grafiki wektorowej i rastrowej. Producent, firma Adobe na swojej stronie opisuje Fireworksa jako wydajne narzędzie do tworzenia prototypów stron internetowych i aplikacji.

Idealny tam gdzie prostota ma dominować

Większość web designerów, których znam, w pracy nad stroną www posługuje się Photoshopem. Jest on najsilniej zakorzenionym narzędziem i stał się wręcz standardem w branży. Uważam jednak, że nie w każdym przypadku jego wybór jako narzędzia do tworzenia stron jest uzasadniony. Pracując nad projektem, który z założenia ma być estetyczny, prosty, i w którym usability powinno dominować nad bogatymi czynnikami wizualnymi, Photoshop wydaje się być przysłowiową armatą na zająca.

Wybór odpowiedniego narzędzia

Oczywiście nie twierdzę, że Fireworks jest pod każdym względem lepszy lepszy. Chodzi mi o to, że wybór odpowiedniego narzędzia do danego zadania przekłada się na wydajność i nawet jakość wykonania. Photoshop zawsze pozostanie standardem w branży projektowania high-endowej grafiki dla sieci i do druku. Oczywiste jest, że wtedy swoimi możliwościami przewyższa Fireworksa. Jednakże do budowania stron internetowch Fireworks wyprzedza swojego starszego przyszywanego brata (bo początkowo produkowanego przez firmę Macromedia).

Bitmapa vs. Wektor

Przy pierwszym użyciu, rzuciła mi się w oczy lekkość i szybkość programu w porównaniu do Photoshopa, w którym pracować można tylko przy użyciu bitmap. Z tego powodu wszelkie operacje edycji stworzonych elementów są znacznie bardziej skomplikowane, niż takie same operacje w grafice wektorowej. Zmiana koloru czy gradientu obiektu w Fireworksie to kwestia dwóch kliknięć w pasku właściwości obiektu. W Photoshopie do tego celu wykorzystuje się dwa elementy: obiekty i ich maski.

Autokształty

Fireworks dostarcza bardzo dużą liczbę łatwo edytowalnych automatycznych kształtów. Stworzenie prostokąta o zaokrąglonych rogach w dowolnym kącie jest niezmiernie proste i szybkie. Również edytowanie takiego prostokąta to żaden problem. Photoshop niestety zachowuje się w takiej sytuacji niezbyt przyjaźnie, deformuje zaokrąglone rogi. Krzywe Beziera działają jakby wyjęte z Illutratora. Oprócz tego mamy zestaw narzędzi do grafiki rastrowej: stempel, różczka, narzędzia wyostrzania, rozmycia i inne.

Wybieranie obiektów i filtry

Znacznie wydajniej można edytować stworzone elementy dzięki automatycznemu zaznaczaniu. Wystarczy najechać kursorem (pointer tool) na dany obiekt, a ten podświetli się i klikając na niego zostaje wybrany. Ta funkcja była również obecna w programie Paint Shop Pro. Zaznaczę, że w Photoshopie aby wybrać daną warstwę z obszaru roboczego należy skorzystać aż z dwóch narzędzi. Na uwagę zasługuje funkcja nakładania filtrów (cienie, wypukłości, rozmycia, przenikanie i inne) na obiekty. Dany filtr można w każdej chwili edytować lub szybko usunąć. Narzędzia tekstowe pracują doskonale, na tekst również można nałożyć filtr.

Cięcie i zapis

Niezwykle rozbudowany jest również system cięcia i zapisu grafiki. Do wyboru mamy najpopularniejsze formaty, wraz z oknem, w którym można porównać zoptymalizowane pliki i wybrać najbardziej odpowiedni format czy kompresję. Niestety nie korzystałem z funkcji automatycznego kodowania pociętej strony. Mam złe doświadczenia z tego typu funkcjonalnościami i zawsze ręcznie generuję kod. Aczkolwiek Adobe chwali się na swoich stronach, że w pakiecie CS4, stworzony projekt może być zakodowany automatycznie do poprawnego kodu CSS i HTML. Będę musiał sprawdzić, na ile jest to prawdziwe i wydajne.

PNG vs. PSD

Domyślny format zapisu Fireworksa to PNG, co umożliwia (w przeciwieństwie do Photoshopa – PSD) przeglądanie stworzonych projektów w innych programach.

Nie do druku

Do niewątpliwych wad Fireworksa należy brak obsługi kolorów CMYK, więc nie nadaje się jako narzędzie do tworzenia elementów do druku. Istnieją jednakże metody eksportu RGB np. do programu Illustrator.

Dodatkowe możliwości

Wymienione przeze mnie cechy Fireworksa to tylko mała część jego możliwości. Zachęcam do zapoznania się z tym programem. Polecam również stronę speckyboy.com, gdzie na jednym z wpisów autorzy przedstawiają 75 rozszerzeń do Fireworksa czyniąc go jeszcze większym rywalem dla Photoshopa.

Przykład wykorzystania programu

Jako przykład możliwości Fireworksa przedstawię wykonaną przeze mnie witrynę Htmluj.pl, która za kilka dni ujrzy światło dzienne. W celu zabezpieczenia przed kradzieżą pozwoliłem sobie dodać półprzeźroczysty napis, który mam nadzieję nie będzie przeszkadzał w odbiorze projektu. Strona będzie pod adresem: htmluj.pl. A tutaj widok projektu strony.

Htmluj.pl - przykład wykorzystania programu Fireworks

Dodatki

Na zakończenie podaję linka do ciekawego wpisu na blogu spoongraphics.co.uk, gdzie autorzy przedstawiają 20 trików przyspieszających pracę w Photoshopie. Część z nich można zastosować do Fireworksa. Tutoriali do Fireworksa można szukać na youtube.com, jest ich wiele. Jako przykład, że strony można tworzyć nie tylko w Fireworksie czy Photoshopie wklejam linka do tutoriala o tworzeniu strony w Illustratorze. Przy okazji polecam serwis Vectortuts!