Designers being designers have used Photoshop forever. It is sad to see that they also seem to use it for web design. Right tool for the right job I say. So, if you use Photoshop for web, or even Ilustrator, listen up.
Since I wrote the last post about PS vs FW, I’ve seen a few other posts and none of them go into specifics. So, here is a list. There is 1 thing people forget the easiest though when comparing, which is why they can’t fully be compared. Photoshop is pixel based, while Fireworks is vector. Fireworks can also manipulate bitmaps, but Photoshop only uses the term vector to certain objects while working in Photoshop. Once exported, they are no longer vector, which is HUGE. Anywho, here you go.
Things they do similar:
- They both have a similar layout, thanks to Owl panels in CS4.
- They both have styles (layer styles in Photoshop)
- They both have layers and layer groups
- Some similar tools (clone stamp, tragic wand…)
- Export jpg, gifs, png (8, 24, 32), psd, tiff, flat png, swf, etc
- Same type engine – hmmm (personal note, would love more control over text)
- They can both put text on a path
- They both can mask, select bitmaps, clone, pen tool, paint (though not anywhere near the same)
Now these are similar remember not exactly alike, but many of the tools are called the same thing. For instance they both can have layer effects. Fireworks calls it Photoshop Live Effects, but has the same options. Photoshop has Adjustment layers, but both can use levels, curves, hue and saturation and others.
So some major differences are:
- Animated .gifs
- Gradients – they both have them, but Fireworks does it better
- They both integrate well with Dreamweaver and Flash, except vector shapes in Photoshop end up being bitmaps still when brought into Flash.
- Text – They supposedly have the same font engine, but there is room for improvement in Fireworks
- Export slices
They both have animated .gifs, but do it very differently. Gradients goes to Fireworks because it is on a vector object, plus you see the start and stop points and it’s super easy to manipulate. Again the difference between when something is vector or not goes to Fireworks. If I am going to Flash, which is a vector program btw, why would I use something pixel based unless I am manipulating an image? I wouldn’t. But technically, Photoshop can go to Flash. I can open a PSD in Flash and make a symbol. The big difference here is Fireworks can make symbols. It’s more similar to Illustrator at this level than Photoshop. Exporting. I won’t go into some rant here. Photshop simply doesn’t have the same control over exporting as Fireworks does. Plus it makes a smaller file if optimizing. Thanks to fellow Fireworks geeks like Matt Stow and David Hogue, we have enhanced Exports that actually export nice CSS. At least to the point where it makes it easy to manipulate and I have a nice starting point. OK, onward we go.
- Filters – you can bring in Photoshop filters inside Fireworks
- They both export PDF’s, except Fireworks can make interactive ones, but Photoshop has more typical PDF options. Unfortunately, Fireworks does not embed fonts.
- They both can make an *almost* instant web gallery (just a minute or 2 depending on how many images)
- Define is a slice as an image or html (Fireworks can do a background image, PS can’t)
- They both export CSS, but PS and AI use Absolute positioning
- They both have align features, but FW can align to the stage/canvas but PS can auto-align layers.
- They can both do a slideshow, although Photoshop does one via a PDF presentation, and FW can do one of all document pages and ends up a swf.
So what does Photoshop do better?
- Image Manipulation
- Defining and selection areas of a bitmap using a variety of means, such as… Alpha channels, Quick Select tool, Quick Mask mode
- Rubber stamp, yes they both have one, but there is NO contest as to which one is better and can do more.
- Healing brush and similar tools
- Brushes (so many to choose from)
- Defining your own brush and/or pattern
- Color management and CMYK, which FW does not do
- Actions (Fireworks can be scripted, but this is just something I’ve done for so long that it’s a presonal thing. I can make an action and a droplet to do most repetitive tasks in Photoshop so fast and I couldn’t make a script that fast.)
- Batch commands and droplets
- Even through Photoshop is a bitmap program, you can open/place something as a smart object. Allows for resizing bitmaps, and can update an Illustrator document later and the ability to make an image a Smart Object so it can be re-sized without degradation to the image. (smaller back to normal size, not bigger)
- Content-aware scaling (amazing feature)
- video manipulation
- vanishing point
So what can Fireworks do?
- Pages and Master pages
- Shared Layers between Pages
- Application development (like AIR)
- User Interfaces
- Common Library of commonly used items like HTML, Flex components, and custom symbols I can make myself
- Making symbols like for Flash – Drag and Drop from FW to Flash (try that with PS. FW retains them as vector)
- Exporting MXML and other options
- Interactive alignments like Flash
- Rollovers and States
- The ability to make wireframes and then make them working html or an interactive PDF (with hotspots liked to Pages) and get client approval on layout before time is wasted on a design
- Background slices, foreground etc.
- 9-slice scaling
- CSS Export – Matt Stow’s better CSS Export
- Pathfinder (Illustrator’s Pathfinder, but on crack)
- Auto shapes including some 3D
- Special Characters panel (but will it be there next version?)
- Commands unique to web
- A preview of rollovers etc. without having to open a Save for Web window
- Send to email
- Vector shapes, real vector shapes
- Ability to easily make a hotspot, new button, etc
- Via property inspector, manipulate a variety of fills types, patterns, stroke options and more
- Someone is making a new plug-in every day
Quite a list, huh? I have seen the most amazing logos, drawings, etc. come from Fireworks. People use it in the most amazing ways daily. I have been using Photoshop since version 1. I’ve been certified in it for years and years. I’ve taught it for over 12 now. But I use the right tool for the right job, and for me, anything, anything at all for the web, I use Fireworks. I can make a site 10 times faster in Fireworks than Photoshop any day of the week.
But, like other web geeks, I am not always the designer as well. Often I am given a PSD file. What then? Not a problem. In CS4 they make that process much less painful. I can not only bring in a Photoshop file, but I can export back out of Fireworks as one as well if needed. Sometimes, some things don’t always come across exactly the same. Masks sometimes need to be re-linked, but all in all, it works pretty well. All layers are 100% opacity so that would also need to be changed. Fonts can have different spacing at times as well. All-in-all though, it can be pretty seamless.
Once you dig in, find how useful Pages can be, do a wireframe or 2 you’ll be just as hooked as the rest of us who consider themselves to be Fireworks Evangelists.A shout to guru Jim Babbage (http://www.communitymx.com/author.cfm?cid=1036) Who is the nicest guy, and knows his stuff in Fireworks.
Here are some helpful links, though not remotely a complete list.