Home Photoshop vs Fireworks

Photoshop vs Fireworks

29 september 2009 om 11:00

Carsten Altena

Meer over: Design

ps_vs_fw De titel van dit artikel is misleidend. Sinds Fireworks onder de vlag van Adobe wordt ontwikkeld en onderdeel is van de CS-suites blijven Photoshop en Fireworks uit elkaars vaarwater. Er is geen sprake van concurrentie. Integendeel, ze vullen elkaar juist aan. Mensen die dagelijks met beide applicaties werken — zoals ikzelf — weten (en je mag het uiteraard oneens zijn met me, voel je vrij om te overtuigen van het tegendeel):

Photoshop is voor beeldbewerking
Fireworks is voor webdesign

Excuses dus voor de misleiding. Hopelijk heeft de titel van dit artikel wel de aandacht kunnen trekken van de meest doorgewinterde Photoshop-gebruiker die de applicatie gebruikt voor webdesign, dat is tenminste wel de opzet.

Toegegeven, in het Macromedia-tijdperk was er sprake van een concurrentiestrijd tussen de twee paketten. Met het destijds bij Photoshop geleverde ImageReady (een soort uitgeklede Photoshop maar met een aantal op het web toegespitste features) ging Adobe de strijd aan met het op webdesign gerichte Fireworks. Sinds de overname en het verdwijnen van ImageReady is die tijd voorbij.

De poll

Als we echter de Heeftstijl.nl poll Waarmee ontwerp je websites of applicaties moeten geloven kunnen webdesigners vandaag de dag nog steeds verdeeld worden in twee kampen. Uit de poll blijkt momenteel:

70% van onze lezers gebruikt Photoshop voor webdesign
10% van onze lezers gebruikt Fireworks voor webdesign

De overige 20% bestaat voor uit 8% “anders” (ben benieuwd hoe of waarmee, vertel het ons! Zolang het maar geen MS Paint is), 7% “Direct in HTML” (een curieuze manier van designen, ben benieuwd naar jullie ervaringen daarmee) en de overige 4% gebruikt Pixelmator, The Gimp of Paintshop Pro.

Ouwe rotten en jonge broekies

Photoshop overheerst. Volgens mij is dat te danken (of wijten?) aan de volgende punten:

“oude rotten in het vak”, de oude garde die al sinds jaar en dag werkt met Photoshop
docenten (lees: “oude rotten in het vak voor de klas”)
jonge broekies die (met alle respect!) dankzij de oude rotten niet beter weten.

Bij het onstaan van het WWW was Photoshop vanaf het begin van de partij; niet verwonderlijk dat het een “industry standard” is geworden. Toch groeit het aantal webdesigners dat kiest voor Fireworks. Het gaat meestal om jongere webdesigners die met frisse moed deze applicatie eigen hebben gemaakt.

Waarom Fireworks zuigt

Ik ben stiekem wat je noemt een “oude rot in het vak”. Ooit begonnen met Photoshop 3.0, en door de jaren heen kunnen snuffelen aan alternatieven zoals Paintshop Pro en The Gimp. Zo ook een van de eerste versies van Fireworks. Mijn eerste gedachte bij het uitproberen van die software:

Wat een kl%#*te-software!

Waarom? Het leek op Photoshop maar deed alles net even anders. De interface nodigde je uit om de software te benaderen als Photoshop, maar reageerde op een aantal punten totaal anders. Frustrerend. Alsof ik tijd heb om allerlei gewoontes af of aan te leren!

Na wat doorzetten leerde in de software kennen en waarderen. Werken met Fireworks betekende voor mij een enorme boost in productiviteit. Helaas betekende samenwerken met andere webdesigners dat ik vaak terug moest schakelen naar Photoshop. Totdat ik eind 2008 samen ging werken met een groep designers dat compleet Fireworks-minded was. Mijn eerste ervaring met Adobe Fireworks CS3 was wederom wennen, maar tegenwoordig kan ik niet meer zonder deze software.

Fireworks CS3

Toch kan ik me voorstellen dat veel gebruikers die alweer een tijdje terug de CS3 suite hebben geïnstalleerd enigzins afgeknapt waren na wat uren werken met de software. De software:

ziet er uit als Photoshop maar reageert net even anders
was vooral in het begin een beetje instabiel, en liep daardoor soms vast (na wat updates verbeterde dit)
heeft een interface die soms traag reageert
laat hier en daar wel eens wat steken vallen qua tools, zoals de manier van text handling.
heeft (onder Mac OS X) een qua look en feel afwijkende interface ten opzichte van de overige applicaties in de CS-suite.

Tijdens het werken met Fireworks CS3 kreeg ik sterk het gevoel dat Adobe de software wel onderdeel van CS3 wilde maken, maar dat het op de één of andere manier een onderschoven kindje was. Wat de oorzaak precies is kan ik alleen maar raden. Problemen met het verenigen van Macromedia en Adobe code? Slecht management? Politieke toestanden binnen Adobe?

Waarom Fireworks heerst

Gelukkig behoren de problemen en gevoelens die ik had bij Fireworks met de komst van versie CS4 volledig tot het verleden. De applicatie is qua interface nu een volwaardig lid van de CS-suite, voelt stabiel aan en is vriendelijk in gebruik. Graag licht ik hier een aantal features uit die laten zien hoe Fireworks je werk als webdesigner vele malen efficiënter maken, ten opzichte van Photoshop.

De user interface

Met CS4 is de user interface volledig in lijn met de rest van de CS4 suite. Bij CS3 was er (vooral onder OS X) duidelijk sprake van verschillen ten opzichte van bijvoorbeeld Photoshop en Illustrator. De interface is onder OS X praktisch gelijk aan de Windows versie. Het ziet er professioneel uit en werkt lekker vlot. Net als bij de rest van de suite is de workspace naar smaak in te delen, en is er een iconic mode, iconic mode with panel names en een expanded mode.

Bitmaps en vectoren

Fireworks beschikt over vrijwel alle belangrijkste tools en filters van Photoshop om bitmaps te kunnen bewerken. Maar ook het maken van vector-graphics is mogelijk met het pakket. En dan niet zoals in Photoshop, waarbij een vector in feite maar een masker is. Denk meer aan een soort uitgeklede Adobe Illustrator, maar krachtig genoeg om maskers, buttons, iconen en illustraties te maken.

Non-destructieve effecten

Op elke vector en bitmap kunnen effecten worden aangebracht en weer verwijderd, zoals schaduw, kleurcorrectie en vervaging. Ook zijn alle Photoshop filters beschikbaar onder Photoshop Live Effects. Het is dus mogelijk om elk object afzonderlijk een stapel effecten te geven, denk aan kleurcorrecties, schaduweffecten enzovoorts, die elk moment kunnen worden aangepast of zelfs verwijderd, zonder dat je de bitmap of vector zelf daar mee aanpast.

Symbols

Als je met Flash hebt gewerkt, zal de term symbol je wel wat zeggen. Een symbol is een herbruikbare graphic, animatie of button. Heel handig wanneer je een element, zoals een button of pictogram, meerdere malen wil gebruiken in een design. Bij het wijzigen van een symbol zullen andere “instances” daarvan binnen het document automatisch aangepast worden. Dat scheelt een hoop gedoe wanneer – ik noem maar wat – je klant je vraagt om alle knoppen rood in plaats van groen te maken, en het lettertype te veranderen.

De libraries

Symbols komen in de Library terecht. Ook dit principe zullen de Flashers onder ons wel kennen. Vanuit de library kun je je vaak gebruikte knoppen, iconen en illustraties naar het canvas slepen. Ook is er een “common library” beschikbaar, waarin allerlei standaard GUI elementen en iconen in te vinden zijn. Hiermee kan de designer bijvoorbeeld eenvoudig een interactie ontwerp maken.

9 slice scaling

Wederom zullen de Flashers onder jullie bekend zijn met dit fenomeen. 9 slice scaling stelt de gebruiker in staat een symbol of (sinds CS4) vector of bitmap op te delen in een tabel van 3 x 3, waarbij met het scalen het object het middelste vlak vervormt (met uitzondering van tekst) maar de overige intact blijven. Op die manier manier vervormen bijvoorbeeld ronde hoeken niet. Het aanpassen van de breedte van een knop of panel is dus een simpele kwestie van de scale tool te gebruiken, zonder je zorgen te hoeven maken over de verhoudingen en afmetingen van de hoeken van het element. Geen gepiel dus met ankerpunten (zoals ik dat altijd deed in Photoshop).

Pages

pages

Gebruikers van InDesign (en van Illustrator sinds CS4) zijn er mee bekend: Pages maakt het mogelijk om binnen een document meerdere pagina’s te hebben. Dus geen tientallen PSD’s van verschillende pagina’s maar een enkel compact bestand. Het heeft wel wat weg van Layer Comps in Photoshop, maar het is krachtiger en veel eenvoudiger in gebruik. Het is mogelijk om layers te verdelen over de verschillende pages (denk bijvoorbeeldc aan een linker kolom dat op een aantal pagina’s gelijk moet zijn). Verder is het mogelijk om een masterpage aan te maken, die bijvoorbeeld de achtergrond en de navigatie van de site bevat. Een aanpassing in een masterpage of gesharede layer is dus te zien op elke andere page die gebruikt maakt daarvan. Dankzij pages is het aanpassen van een design dus niet een kwestie van meerdere Photoshop-bestanden aanpassen, maar één enkel Fireworks-bestand.

States

states

Binnen pages kun je ook states (voorheen frames) aanmaken. Je kan states gebruiken om animaties te maken, maar ook om – de naam zegt het al – een andere staat van de pagina te maken. Denk aan kleine toevoegingen of veranderingen op de pagina, zoals het uitklappen van een menu of wisselen van een visual binnen een carrousel.

Styles

Ook styles kennen we wel van InDesign. Een style kan dingen als lettertype, grootte, kleur, effect etcetera omvatten. Noem het maar je Cascading Stylesheet binnen je Fireworks bestand. Wanneer je besluit dat de bodytekst niet verdana maar arial moet worden gezet bijvoorbeeld, hoef je enkel de style aan te passen en de aanpassingen zullen door het hele document, op elke page, automatisch doorgevoerd worden. Het goede nieuws voor oude Fireworks gebruikers is dat styles sinds CS4 document gebonden zijn.

Prototype

Als je wil kun je dus je hele website opmaken in Fireworks: elke page, state binnen een enkel bestand. Je kunt nog een stap verder gaan en je ontwerp interactief maken door hotspots aan te brengen in de daarvoor bestemde weblayer. Het Fireworks document kan daarna worden geëxporteerd als keurige XHTML/CSS (een enorme verbetering ten opzichte van CS3), of PDF. Dat laatste is vooral handig als je een klant bijvoorbeeld een werkend prototype wil emailen, als een compact PDF-document.

Integratie met andere CS software

Fireworks integreerd naadloos met andere software binnen de CS-suite: bijvoorbeeld, bij het inladen van illustrator of photoshop bestanden blijven lagen, vectoren en effecten intact. Vice versa weet Photoshop ook raad met Fireworks bestanden, al zullen alle handigheidjes van Fireworks zoals Symbols, 9 slice scaling en Pages niet beschikbaar zijn. Ook het exporteren van Fireworks bestanden naar Flash en Flex is naadloos.

Features, features, features…

En dit is nog maar het topje van de ijsberg. Fireworks zit stampesvol met features, bijvoorbeeld: geweldige texthandling (en eindelijk de mogelijkheid om tekst in vormen laten lopen), smart guides (zoals in Illustrator), ingebouwde Adobe Kuler, “Share My Screen”, en ga zo maar door.

Trial

Heb ik je interesse gewekt? Ik hoop het! Download hier de trial-versie van Fireworks CS4.

Tutorials

Dit artikel is niet bedoeld als tutorial. Daarvoor kun je bijvoorbeeld beter terecht op een van de volgende plekken:

Kosten

Hopelijk ben je na je 30 dagen trial helemaal verkocht. Fireworks CS4 maakt deel uit van Adobe’s Web Standard, Design Premium en Master Collection collectie maar is ook los verkrijgbaar voor een vriendelijk prijsje. Check de Adobe Store voor de meest actuele prijzen, of als je student of docent bent, de Adobe Education Store.

Conclusie

Hopelijk heb ik de oude rotten en misleidde jonge honden onder jullie kunnen inspireren om Fireworks CS4 eens te proberen. Ben heel benieuwd naar jullie opmerkingen en vragen naar aanleiding van dit artikel, en hopelijk jullie ervaringen met de software. Wanneer je een tijdje hebt kunnen wennen aan de software kun je niet meer zonder de gemakken van Fireworks:

De vernieuwde interface die voelt en oogt als elke andere applicatie uit de CS-suite
Het werken met vectoren en bitmaps
De vrijheid van het werken met non-destructieve effecten
Het gemak van herbruikbare symbols
De standaard design-elementen uit de common library
9-slice scaling
De mogelijkheid om in een document meerdere pages en states te hebben
De styles: als het ware de cascading stylesheet van je document
De mogelijkheden die het pakket heeft om prototypes te maken, exporteerbaar als HTML of PDF
De integratie met andere CS-software
Etcetera…

Fireworks CS4 eist, net als bij elk nieuw stuk uitgebreide software dat je gebruikt, wat inspanning om te leren kennen. Ik hoop daarom dat je (zoals je destijds misschien hebt gedaan bij het leren werken met Photoshop) het geduld kan opbrengen en er eens goed voor gaat zitten.

Tip: begin klein en simpel, spring niet gelijk in het diepe. Denk bijvoorbeeld aan je eigen portfolio of de “website voor de bakker op de hoek”. Zo leer je op een ontspannen manier deze nieuwe tool kennen. Ik hoop dat je net als ik ervaart hoe Fireworks CS4 je werk makkelijker, sneller en leuker zal maken. Gebruik Photoshop voor waar het onverslaanbaar in is: state of the art beeldbewerking. Maar doe jezelf niet tekort als het om webdesign gaat: Fireworks is dan de beste keus. Affijn, tot zover mijn pleidooi voor Fireworks, dat hopelijk een nieuwe de facto standaard zal worden op het gebied van webdesign.

UPDATE

Interessant artikel van Jon en Leigh Hicks. Thanks Ivo voor de tip!
Zoals Hicks en enkele lezers al hebben gemeld, CS4 is niet geheel bugvrij. Schijnbaar crashed de software ook nog eens vaker onder Snow Leopard. Gelukkig zit Adobe niet stil, draai de updater voordat je begint aan CS4!

Over de auteur