Thursday, November 16, 2006

Adobe: Fireworks Better for Web Pre-Production than Photoshop/Illustrator

From the horses mouth. Adobe affirms what I've been saying for years.

...building out a few variations on two different themes is incredibly time-consuming. Applications like Photoshop and Illustrator (that are layer-based and not page-based) can become very complex very quickly — hundreds of layers organized in "layer comps" to represent pages, sequences like step wizards. Trying then to flatten these layer groups into some sort of format the client can view (such as a flattened JPEG placed in PowerPoint or converted to PDF) is all throwaway work. In addition, defining a click-through navigation to communicate site navigation would require going further — say, to Dreamweaver — to tie those flattened pages together.

Read the original article from the Adobe Edge Newsletter.

I'll forgive the guys I work with for for being misguided on this issue because they're younger but I've been using Photoshop since about version 2 and when I got my hands on the first beta of Fireworks I dropped Photoshop liked a hot potatoe. I had already been accustomed to object oriented vector graphics using Symbols from Flash and FutureSplash before that. So I've been sold on objects over layers for some time. I see tons of time being wasted digging through layers upon layers of static content all day. The fact is that Adobe's Image Ready was a hurried knock-off of Fireworks that came out almost a full year after the first version of Fireworks. It's a fact.

Now, let me walk you through a scenerio that really demonstrates the superiority of Fireworks' vector paradigm over the Image Ready workflow.

In Image Ready, you create a slice using the slice tool.

You want to modify the slice, so you have to change to the Slice Selection Tool and if you want to resize the slice to pixel accuracy, you have to transform the slice with the transform handles while looking at the Info panel.

In Fireworks, however, you create the slice and if you want to modify it, you just select it as you would anything else (Ctrl+A) with the same selection tool you use to select anything else. If you want to resize it, you have two options. Use the same transform tool you use to transform anything else or as I prefer, to use the great Property Inspector and edit the X, Y coordinates and width and height of the object with pixel precision. None of that dragging the resize handles while while looking at the Info panel.

Another awesome feature that none of the Adobe products can pull of is the find and replace tool. Say you want supply the client with a bunch of different color variations of a layout. All you have to do is add a frame for design varient, paste the contents of the first frame to that frame and find and replace the color on that frame with the new color. Fireworks even replaces the color in gradients, text, strokes and solid fills or any combination of those elements. To create variations like this in photoshop or image ready you would have to make tons of different layers, selections and different fills. On the other hand, in Fireworks, everything is editable all the time.

Now when it comes to slices and html capabilites, Fireworks is way more developed. In Image Ready you can't specify if the slice should contain html and enter actual html in the slice as you can in Fireworks. How about being able to open an html document in Fireworks? Symbols. Convert an element into a symbol and you can edit the symbol with a simple double-click, edit and all the instances of the symbol are updated in your document. You sure can't do any of that in Image Ready by a long shot. I could go on and on but the rumor is that Image Ready is going to scrapped and replaced with Fireworks. I find this endlessly amusing. My current team has pretty much persecuted me for using Fireworks but it looks like if they ever want to go to the next version of the adobe creative suite they're going to have to get with the Fireworks program and lose their misconceptions. If I had to use Image Ready and not use Fireworks I would have to find another job..that's how strongly I feel about it. Photoshop is a great tool for print graphic and photo editing but leaves a lot to be desired as a web graphics tool. Being constantly hassled about what color mode I'm in and creating layers filled with content that can't be edited in the real time way that Fireworks vector objects is brutally antiquated to me. As far as the html output, I code by hand and don't really trust any program to write code for me but the extensibility of the html and xhtml export options with JavaScript makes it possible to output in any way you desire.

The future does indeed look bright for Fireworks and rightly so.