I used to be a Photoshop user. In fact, my first foray into the weird world of web design was cracking open Photoshop Elements when I was 15, and in collaboration with Microsoft FrontPage, I created a website for my Media Studies coursework which would be described as truly horrific. Still, it didn’t matter to me because I was in awe of Photoshop: the simplicity, the power it wielded and the seemingly endless possibilities. For someone who had previously been restricted to pen, pencil and paper it felt so liberating.
Onwards I marched with it, getting a copy of Adobe Photoshop CS for my 16th birthday (geek!), and all through my A-Levels and University work it was all I used. Web Design and Photoshop seemed to go hand in hand. So, when I joined Creode and was asked to use Fireworks instead, I was anxious about this new piece of software, and why I was being asked to switch from my beloved Photoshop. Not wanting to upset the powers that be, I made the switch.
At first I found the task daunting, it had taken me quite some time to master all the tricks of Photoshop. However, after playing around with Fireworks, I found myself going “Ahh, that’s pretty neat!” a lot more often than I did with PS. But what are some of these ‘pretty neat’ features that Fireworks has over Photoshop?
Plus Points
Pages
All in One Place
Pages in Fireworks are an absolute godsend. When working on designs for Creode, it’s very rare there’s less than 10 different page templates to design. In Photoshop, this would mean creating the homepage as a PSD, copying it, editing it and resaving it for as many pages as necessary. With Fireworks, you keep all pages within one document, which is for me, the biggest timesaver.
Master Page
You have the ability to set a master page in Fireworks. This is a base page for which all other pages in your document follow stylistically. They’re usually used for things like the background of the site and the header (things which won’t change throughout the site). Also, if you’re using guides, if you set up the guides in the Master layer, there’s no more copying/pasting the guides to each individual page.
And say you got feedback from the client, and they loved it all but wanted to change a couple of things in the header. In Fireworks, you edit just the Master Page and all other pages follow suit. Not the same in Photoshop, unfortunately.
File Size
A 10-Page Photoshop set of designs could easily exceed 300MB if you’re creating an image-heavy site. Here at Creode, we use DropBox to sync all our current work, and if we were using Photoshop, each new design would account for a whopping great 15% of our total 2GB usage limit. The same design in Fireworks would rarely exceed 40MB, and in many cases is a lot less than that.
Shapes
Infinite Scalability
Fireworks is predominantly a Vector-based program, meaning that if you put a 240×240 circle into a Fireworks Document, you could change it to any dimensions you like without the circle becoming pixelated or jagged. This allows for lightning fast changes to designs. Fireworks also has a handy Properties panel at the bottom of your Work screen, which you can fine tune a whole host of properties of a shape, including dimension, position, colour, and you can even add Filters.
Filters
Photoshop is lauded for it’s vast array of filters and layer styles you can apply to elements. One thing I personally like about Fireworks is that you aren’t given access to most of the filters. I certainly am not sad I can’t use the Plastic Wrap filter in my designs. When used correctly, Fireworks isn’t even that restrictive. You can add an unlimited number of effects to an element, and even some basic Photoshop layer styles in case you just can’t let go!
Styles
A Style is a set group of filters applied to an element. Say I added an Inner Shadow, some Noise and adjusted the Curves of an element, and wanted to re-use that graphic style, all I’d do is save that as a Style, and it can be re-used infinite times in the document. Better still, if I decide I don’t want the Inner Shadow anymore, I can take it off the style, update the style, and all of the elements with the style applied to it update as well.
Everything Else
Cost
Fireworks CS5 costs $299.99 whereas Photoshop CS5 costs $699.99. That’s a huge saving if you’re only going to do web work. Obviously, Photoshop CS5 is much more feature-rich than Fireworks as a piece of graphics-editing software, and I have to admit that Content-Aware Fill is some kind of witchcraft, but I can think of very few instances where I’d use that in a website design.
Performance
Photoshop’s crashing issues are well documented. A search on Google will yield lots of forum posts, articles and even whole websites dedicated to this problem. Whilst Fireworks is not perfect (I remember Fireworks CS4 having a lovely habit of crashing at times), it is still more reliable and quicker to use than Photoshop due to it being less processor-intensive. All the better for when you have deadlines to meet!
So Why Is Photoshop So Popular?
Photoshop is here to stay. It’s clearly the number one web design tool for a reason. As someone who is now an avid Fireworks user, I can only really think of the following reasons:
Brushes
Brushes are something Fireworks lacks entirely. Brushes are such a powerful part of Photoshop, and can be absolute beautiful when used correctly. I’m not sure Fireworks will ever include Brushes as a part of it, because Brushes are a mainly raster-based design tool. People love Brushes, and with so many beautiful brush sets available out there I do sometimes find myself opening Photoshop, painting a brush on an empty document, saving it as a PNG, and opening it in Fireworks ready to use on my design.
Freebies
There’s a HUGE market of Photoshop freebies out there. Sites like www.premiumpixels.com and www.psd365.com offer really high-quality stuff for free, and for designers starting out they must be amazingly handy resources. I mean, if Premium Pixels was around when I was starting, maybe my Media Studies coursework wouldn’t have been a disaster after all. There are freebie sites for Fireworks (fireworkslab.com is one of the nicer ones) but they just don’t have the same traction behind them as the PS ones do.
Piracy
It may be controversial, but I think one of the main reasons Photoshop is so widely used is because it’s so easy to get a hold of. Googling ‘Photoshop CS5’, the second suggested search is ‘Photoshop CS5 Serial Number’. Many people can’t afford the $699.99 fee for it when getting into the business, and turn to piracy as a way of keeping up with everyone else. Fireworks doesn’t seem to have the same problem, as it seems to be a tool used primarily by those already with experience in the design world.
Conclusion
I know this hasn’t been the most unbiased of articles ever written, but I truly believe Fireworks is a much more efficient tool for agencies to use. There’s so many features that seem ideal for agency use – time-saving features, space-saving features, brain-saving features – that it seems like the most obvious thing in the world to make the switch.
On 25 Aug 2011, Eduardo Godoy wrote:
Nice!
I work at EOU – agencie from Brazil.
I agree and i use fireworks, but the people here dont like it!
They used ps for long time and dont want lear about other programs.
By the way…
the fireworks users is growing up!
I hope adobe still doing improvements to fw.
tks
On 26 Aug 2011, prakko wrote:
new trick and tutorial aren’t available for fireworks that’s why it is not more popular as photoshop.
On 27 Aug 2011, John Aspinall wrote:
Totally agree, been using Fireworks since its inception, have tried going into Photoshop lots of times but found it frustrating to use – why the hell cant you select an object on the canvas??? Bordering on ridiculous IMO!
Pages feature is brilliant when working on incremental design changes, like you said.
On 30 Aug 2011, Tony wrote:
You can do all of the above in Photoshop as well.
Pages is called Layer Comps in Photoshop
Shapes are also available in Photoshop
Filters and Styles are all available in Photoshop
Cheap. True but you also do not get as many features as Photoshop provides.
Crashing. Doesnt happen to me very often to be honest.
Of course, I’m biased towards Photoshop
On 30 Aug 2011, Marc wrote:
@Eduardo – it’s a shame that your agency won’t make the switch, but maybe given time they’ll see how beneficial it will be!
@prekko – that is very true, although I know http://abduzeedo.com do some really good FW tutorials for beginner-intermediate users.
@John – you actually can select elements on the canvas in Photoshop, it’s just not obvious at all! There’s a tiny checkbox called ‘Auto Select’ which you need to check when using the select tool. Still a nightmare to use, though.
@Tony – While Shapes are available in PS, i think the scalability and ease of editing them is far better in FW. And although Layer Comps are a start, they’re still not as easy to use as Pages, in my opinion. I’ll give you Filters and Styles though, ha!
On 08 Sep 2011, blue2x wrote:
Creating effects or vector objects in fireworks requires fewer steps than photoshop, and thus accelerating your work flow.
On 12 Sep 2011, Lorenzo wrote:
I’m addicted to Fireworks, but the fact is simple:
Fireworks is focused on web/UI/screen design. Photoshop is for pixel manipulation.
Obviously we all know that the whole world uses Photoshop for everything, even without asking if it is the right tool for the job we’re doing.
On 12 Sep 2011, EP wrote:
I use Fireworks, Photoshop, or Illustrator, depending on who I’m working with. I personally prefer Fireworks, and I believe the PS-FW debate is less a question of *what* the apps do and more a question of *how* they do it.
A subtle but fundamental usability advantage of Fireworks over Photoshop is that it’s an object-oriented app. This makes it much more suitable for complex compositions:
- You select objects on a canvas, and you can see they’re selected with a bounding box (without having to enable “layer outines”). You spend more time actually interacting with the canvas, instead of a tiny Layers panel.
- A single Properties panel reflects the properties of the selected object: dimensions, position, color, etc. are all conveniently located in a single, context-sensitive panel. No bouncing between Layers, control bar, Character, etc.
- Selected objects can be easily copied to the clipboard. Select, Edit, Copy, Paste.
These don’t sound like fancy features, and that’s because we take them for granted in so many apps. Illustrator, InDesign, OmniGraffle, iWork, Flash Pro, and many others work this way. This is why it’s so easy for a Photoshop user to ramp up in Fireworks, and so hard for anyone else to learn Photoshop.
In Photoshop’s defense, it wasn’t designed as a tool for creating anything from scratch (or if it was, most early “desktop publishers” weren’t using it that way). Photoshop was an editing tool: you started with an existing photo or scan, made some adjustments, and integrated the final work into a PageMaker or QuarkXPress comp.
Still, Photoshop became popular with web designers in the 90s for 3 reasons:
- It was way more popular than its early competitors (namely, Fractal Painter).
- Popular layout tool QuarkXPress couldn’t be used for presenting pixel-based work.
- Fireworks was originally marketed as a tool for optimizing web graphics, not creating them. Most designers still believe this.