Koti Julkaisu

RSS

Adobe Fireworks 101

Adobe Fireworks 101

Adobe 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 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.

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 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

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 :D

Linkkejä aiheesta

10 Reasons Why I Prefer Fireworks CS4 To Photoshop For Web Design
50 reasons NOT to use Photoshop for Web Design
The Endless Fireworks vs. Photoshop Battle
Why I Prefer Adobe Fireworks over Photoshop for Designing Websites

Is Fireworks Better Than Photoshop?

Kirjoittajaprofiili
Kirjoittaja Mikko Vartio Twitter http://www.vart.io

Kommentit (9)

  • Erinomainen artikkeli mikko! Mahtaa aika monella aueta FW työkoneella ensiviikolla ;)

    Kommentoija Henkka, 14.08.2011 klo 21:51
  • Mahtavaa, että joku jaksaa suomen kielellä väsätä näinkin viimeisteltyjä artikkeleja! Nyt kun yleisesittely on alta pois, ehkä seuraavana walk-through opas simppeleiden elementtien luontiin, kö? :)

    Kommentoija Codeclown, 14.08.2011 klo 22:29
  • Tattis! Hahmottelen jo isompaa rallipakettia ja ihmettelen ruutuvideonauhurin ihmeellistä maailmaa…

    Kommentoija MikkoV, 14.08.2011 klo 22:33
  • Täytyy kyllä ihmetellä miten Fireworks on pysynyt taka-alalla näinkin pitkään. Otin ohjelman testiin toistamiseen reilu vuosi sitten ja on nyt ehdoton ykköstyökaluni Photoshoppien ja Illujen yli.

    Suosittelen kaikkia leiskojen ja käyttöliittymien parissa työskentelevien antamaan mahdollisuus fw:lle. Saattaa yllättää!

    Kommentoija Mikko Rajala, 14.08.2011 klo 23:32
  • Erinomainen raapaisu Fireworksista. Pitänee oikeasti käynnistää se ensimmäisen kerran.

    Kommentoija Glen, 15.08.2011 klo 08:20
  • Mielenkiintoinen artikkeli :)

    Kommentoija Sijoittaminen, 30.08.2011 klo 13:47
  • Adoben tuotteet lienevät grafiikkapuolella hyvin suosittuja. En vain ole itse koskaan oppinut tykkäämään Adoben ohjelmistojen käyttöliittymistä. ;-)

    Kommentoija kuopassa, 23.12.2011 klo 16:40
  • Ei ihan jokaisella ole kyllä kahisevaa tuon pyörittelemiseen ;)

    Kommentoija J2Media, 23.01.2012 klo 15:19
  • Olipa hyvin tehty artikkeli. Itse olen käyttänyt fireworksia “from day 1″ . Tässä on niin paljon paremmat mahdollisuudet kokonaisten sivustojen hahmotteluun verrattuna photoshoppiin, joten on lähes käsittämätöntä miksi työkalu ei ole isommin lennossa. Joku mainitsi että ei ole kahisevaa pyörittämiseen, niin 30 päiväähän tätä saa hangata ilmaiseksi. Sen jälkeen kustannus jopa harrastelijakäyttöön ei ole paha. Kokeilkaa :)

    Kommentoija Tommy, 07.02.2013 klo 06:44
Nimi *
Sähköposti *
URL
Kommentti *

Uudet jäsenet

teflnlduw
Liittyi jo aikaa sitten
yhepkroz7
Liittyi jo aikaa sitten
mczfhizod
Liittyi jo aikaa sitten
gpvwxrks
Liittyi jo aikaa sitten
samidaox34
Liittyi jo aikaa sitten

Julkaisuarkisto

Yhteistyössä

Haluatko yhteistyöhön? Ota yhteyttä.