Adobe Fireworks 101

 

fireworks-cs5-splash-screen-thAdobe Fireworks on digitaalisen suunnittelun salainen ase. Photoshop on standardi työkalu mitä tulee graafiseen suunnitteluun, mutta Fireworks on täsmätyökalu webin visualisointiin.

Mikä on Adobe Fireworks
Adobe Fireworks julkaistiin vuonna 1998 Macromedia tuoteperheeseen (mm. Flash, Dreamweaver ja Freehand) verkkografiikan luontiin. Fireworks on pikseligrafiikan ja vektorimuotojen ainutlaatuinen hybridi; vektorit visualisoidaan reaaliajassa suoraan pikseleinä. Pohjimmiltaan Fireworks on vektorityökalu, jonka tasohierarkiassa rasteroitu kuvagrafiikka ja polkumuotoiset vektorit ovat sulassa sovussa omina layereinaan.

Yleinen työnkulku verkkosivustojen ulkoasujen luonnissa tapahtuu Photoshopin ja Illustratorin kesken. PS ja AI kehitettiin jo ennen internetin valtavirtaistumista ja molempien työkalujen yhteensopivuus ruudulle suunniteltavan grafiikan kanssa on enemmänkin sovellettua kun vastaavasti Fireworks on kehitetty nimenomaan verkkografiikan ympärille. Printtimateriaalin työstöä Fireworksilla ei kannata edes miettiä, sillä 300dpi ja CMYK ovat myrkkyä Fireworksille.

Fireworksin ydinalueita ovat verkkografiikan (leiskaaminen, ikonit, bannerit) lisäksi vahvasti myös käyttöliittymäsuunnittelu (Wireframes, UI-prototyping) sekä verkkosivujen teknisen totetuksen tarvittavat viipalointi ja optimointi (Slicing, Export).

Fireworksin toimintaperiaate
Fireworks on objektipohjainen työkalu, jossa jokainen dokumentissa esiintyvä elementti löytyy myös Photoshopin tapaan Layers-paneelista. Erona on lähinnä nimeämiskäytäntö, Photoshopin termit Folders ja Layers tottelevat Fireworksissa nimiä Layers ja objects.

Properties Panel
Fireworksin ydin on Properties Panel. Kun käyttäjä valitsee ruudulta tai Layers-paneelista objektin, Properties Panel (PI) muuttaa näkymänsä vastaamaan kyseisen objektin ominaisuuksia. Vastaava paneeli löytyy myös Flashista ja Dreamweaverista.

properties-inspector

Properties Panel

Valittu elementti voi olla tekstiä, valokuva, vektoripolku, Group, symboli, maski tms. Shift-pohjassa voi valita monta objektia, jolloin PI näyttää yhteenvedon valituista objekteista. Vaikka elementtien parametrit vaihtelevat yksilöllisesti, PI näyttää aina valitun elementin koordinaatit dokumentissa, leveys/korkeus-tiedot pikseleinä sekä mahdolliset tehosteet (Filters).

Tools Panel
Yhtenäinen elementti muiden Adobe ohjelmien kanssa Layers-paneelin lisäksi on Työkalu-paneeli. Fireworksin työkalupaneelista löytyvät välineet rasteroidun bitmap-grafiikan, vektorimuotojen, tekstin muokkaamiseen sekä webbileiskan pilkkomistyökalut.

toolspanel

Tools Panel

Fireworksin työkalut ovat yksinkertaisia, mutta tekevät tehtävänsä omassa lajissaan. Vakavempaan kuvankäsittelyyn sopii ehdottomasti Photoshop ja haastavaan kuvitukseen soveltuu Illustrator, mutta Fireworks kykenee myös selviytymään molemmista tehtävistä kunnialla.

Tuttua ja tuntematonta
Fireworks pystyy tallentamaan ja lataamaan tuttuja PSD ja AI tiedostomuotoja. Fireworksin oma tallennusformaatti on PNG, joka voi aiheuttaa hämmennystä; Macromedian insinöörit keksivät ujuttaa PNG-tiedostomuotoon lisää metatietoja , sisältäen kaikki layerit, objektit yms. dokumentista löytyvän datan. Fireworksin PNG-lähdetiedostoja voi katsastella millä tahansa kuvaformaatteja toistavalla ohjelmalla, kuten esim webbiselaimessa.

Symbolit

symbol
Symbol Properties

Fireworks ei tue Smart Objecteja, mutta tarjoa tilalle Indesignista ja Flashista tutut Symbolit. Verkkosivulla toistuvien elementtien käyttöön tarkoitettu Symbolit antavat mahdollisuuden luoda nopeasti vaikkapa rautalankamallin sivustosta. Symboliin tehdyt ulkoasu-muutokset päivittyvät monisivuisessa Fw-dokumentissa kerralla. Leiskoissa yleisimmät Symbolin käyttötapaukset ovat lomake-elementeissa, napeissa ja tehokkaimillaan kokonaisissa Footer/Header alueissa.

Styles
Symbolien lisäksi Fireworks tarjoaa edistyneen Styles-toiminnon, jossa käytetty tyyli (Style) kattaa koko dokumentin CSS-tyylitiedostojen tapaan. Jos otsikolle tai leipätekstille on luotu oma Style, voidaan samaa Styleä käyttää jokaisella sivulla ja tarvittavat muutokset päivittyvät jokaiselle sivulle automaattisesti.

Ripeään työskentelyyn Fireworks tarjoaa ruudulta elementtien leikkaa-liimaa (copy/paste) toiminnallisuuden eri Adobe ohjelmien välillä. Fireworksissa luodun Symbol-objektin copypasteaminen Flashiin siirtyy muuttumattomana vilauksessa tai vektorielementin kopioiminen Illustratorista Fireworksiin onnistuu vaivatta.

Filters

filters
Filters

Photoshopissa layeriin liittyvät tehosteet löytyvät Layer Style paneelin alta, Fireworksin vastaavanlaiset tehosteet löytyvät Properties Paneelin Filter-kohdasta. Filtereitä voi pinota miltei loputtomasti päällekkäin ja voidaan kytkeä päälle/pois, “flattaamatta” koskaan niitä itse objektiin.

Yhteenveto
Fireworks on tehokas työkalu, mutta tietoisuus ja yleisyys tästä on jäänyt Adoben lippulaivatuotteiden alle. Fireworksin tulevaisuus silti näyttää valoisalta – ketterän leiskaamisen, mobiili UI-suunnittelun ja CSS3-tekniikoiden myötä Fireworksin käyttäjäkanta kasvaa joka päivä.

Vakiintunelle Photoshop-käyttäjälle Fireworks saattaa vaikuttaa omituiselta, mutta modernissa webbisuunnittelussa on ihan tervettä oppia uusia hyödyllisiä asioita 😀