Fireworks CS4 first look

Every time I read the specs of a new version of Fireworks, I think, “that’s it, Photoshop is dead for web design, look at what this thing can do”. Then I use it, and I find the little things so unbearable, I never get around to trying out the big stuff. Indeed, in a recent ELATED newsletter, I was forced to backtrack from singing the praises of Fireworks CS3, and admit that I’d never moved to it from Photoshop, as I’d promised I would only a couple of months before.

So, will history repeat itself with this new beta version of Fireworks CS4, as released by Adobe Labs only a couple of days ago? Again, I’m looking at the features – improved styles, CSS and Flex export among others – and I’m thinking “if this works it’ll transform the way I do things”. We’ve been here before, and I’ve learned that without some fundamental reform of the way Fireworks interacts with users, I’m not shifting, however many bells and whistles it has.

You may wish to download the beta, which you can do at http://labs.adobe.com

Bugbears

Here’s a list of my Fireworks pet hates, some of which which I freely admit are derived from my long-standing use of Photoshop:

1) Interface: In CS3, only a mother could love it

2) Text handling: Terrible

3) Clipping masks: Non-existent

4) Layers palette: Barely functional. How hard can it be to disable a mask by Shift-clicking on it, and otherwise standardise interface functionality between Fireworks and Photoshop?

The new interface.

One much-needed tweak has taken place. Fireworks sports a nice new shiny coat of paint in the form of a new interface:

Fireworks CS4 Beta Interface

Fireworks CS4 Beta Interface

It looks nice enough, but after you play with it for a bit, you realise that really, everything’s still much as it was – the interface tweak is really only skin-deep. Palettes are roughly where you expect them, and the basic way Fireworks approaches user interaction hasn’t changed much.

For me, the Fireworks UI (User Interface) has always felt clunky, and the way you have to approach things hasn’t really changed. Obviously, for seasoned users this is great, as there’s no interruption in workflow, but I can’t help feeling that there needs to be a change in basic task-managment to push Fireworks forward and drive take-up amongst web designers, who mostly still use Photoshop.

A plus point is that the interface is faster than CS3, where I often found myself waiting for the interface to catch up, which is really pretty unforgivable in what purports to be a pro app.

One interesting question regarding the new interface elements is whether the other Adobe apps will follow suit. Adobe seem to to be creating an interface which is neither mac nor Windows, but rather their own, unique approach. Tools in the title bar? What are they playing at? In the end I think this is relatively unimportant so long as the apps work well, both individually and as a suite. I do think that whatever they come up with for CS4 should be the end of it for a couple of revisions, and that Adobe should then instead concentrate on features and fixes.

Text handling

One of my greatest bugbears with CS3 is that when you paste in text from another app, it retains the formatting of the original app, rather than using the style of the text area you’re pasting into. In practice this means that if you do a layout using dummy text and then want to paste new text into text areas, you have to reformat the whole lot. Maddening.

In the CS4 beta, things are slightly improved. If pasting from a text editor (in my case TextEdit on the mac), the Fireworks text formatting is honoured. The same from Word. If pasting from Photoshop, you retain the formatting from the Photoshop document. Good enough! That’s one thing to cross off the list.

Font rendering is still pretty iffy. Take the following grab, for example:

Fireworks CS4 beta taxt handling vs Photoshop CS3

Fireworks CS4 Beta (Top) vs Photoshop CS3 (Bottom) text rendering

This is a mixed text area, containing two different type treatments. The top text is Arial Bold at 20px, and the lower text is Arial Regular at 12px. As you can see the rendering is, at best, poor. By comparison, Photoshop renders the text much more nicely.

One of the more interesting features of Fireworks is its ability to style text using the Styles palette. Essentially you get a text element looking the way you want it, and then you can create a style based on that which you can apply to any other text element. It’s great, but slightly hobbled by not being able to apply separate styles to different areas of type in the same text area. That means all your headings in a layout have to be separate from the body text, for instance. I regret to say that CS4 is as irritating as ever in this respect.

Lastly, you still can’t type the name of the font you want when in the font list to jump to that font. This is simply broken in CS3, and still is in CS4.

Clipping masks

I use clipping masks all the time in Photoshop. The basic idea is that you can mask off multiple layers using a single layer, simply by option-clicking between the two layers in the Layers palette. I use it all the time, for example by masking multiple blended photos to fit a header area. Fireworks CS3 doesn’t support this, at all, and neither does CS4 by the look of it. Instead we still have the laborious process of using the masking shape on each layer that we want to mask, to produce, what is in effect, something like Photoshop’s vector mask system. Want to make the mask 2px wider in Fireworks? Bad luck; you’ll be making the change on every single layer.

The Layers palette

Here I freely admit that Photoshop has affected my thinking. I am, after all, the co-author of the Photoshop CS3 Layers Bible, but the layers palette in Fireworks is simply broken in many ways. In CS3, for instance, if you shift-click to select multiple layers, it selects a random set of layers for you rather than the ones you wanted.

I know, I know, in FW it’s not a layer, it’s an object, but it’s in the layers palette, so for me, as a Photoshop user, it’s a layer. In CS4, the shift-click behaviour simply selects.. nothing. Actually, clicking on a “layer” other than the currently selected one does nothing either. So right now, you simply don’t appear to be able to use the layers palette to select an object/layer/thing. You have to hope they’ll fix this in the final version, so we’ll maybe give them the benefit of the doubt.

Generally I simply want the Layers palette in FW to be a bit more functional. Too much to ask?

After the storm

Right, that’s my major hitlist done. How did we do? Well, we sort of have a new interface, but it behaves in the same way as the old one, and we can now paste in text from text editors and have it take on the format of the current text in Fireworks. Everything else is as broken as ever, and in some cases more so.

Let’s give them some benefit of doubt. It is a beta, and as such is subject to change before it comes out for real, but I can’t help feeling that a lot of things that matter to me won’t change at all between now and the final release.

In the next article, I’ll be looking at some of the fun new features, starting with the HTML/CSS export functions..


Subscribe to comments You can skip to the end and leave a response. Pinging is currently not allowed.
Post Tags: ,

Browse Timeline


Comments ( 15 )

Nice review. That font rendering looks terrible!

It’s a long shot, but have you tried either Command-Shift-V or Command-Option-Shift-V to paste unformatted text into Fireworks? These shortcuts seem to work with varying degrees of success in other Mac apps. Just an idea. Sounds like it’s basically OK in CS4 anyway (apart from possibly pasting from Photoshop).

Matt added these pithy words on Jun 02 08 at 10:06 pm

Nice thought, but no dice, sadly. I’ll take the CS4 approach though, that’s good enough!

admin added these pithy words on Jun 03 08 at 7:10 am

sorry to dissapoint you pal, but clipping masks exist in fireworks for a long time, both vector and raster.

on that matter there are tons of more stuff that people say “don’t exist in fireworks” and actually do.

if you don’t want to put the time to know the software it’s hard to like it. it is in our nature to fight that which changes our perceived common sense. if your common sense is photoshop you are wired from the start to not like it.

if you give thiss app a chance i assure you it will dramatically decrease your web design time without compromising quality.

i currently use fireworks for all my web design work supported by the old PS on intense image processing and retouching.

my developer passes me simple grids done in Fireworks and i am able to take the same document and transform it into something more eye appealing. this single process alone saves tons of time.

but in the end i think the old saying still stands …. when pressed by a deadline you don’t have time to give chances to different software. it’s what you know best that’s the fastest.

cheers

alecs stan added these pithy words on Jun 04 08 at 6:58 pm

I *really* want to know how to do clipping masks – how’s it done? As I say, I do use FIreworks a lot for work (under a certain amount of protest I admit), so I really do want to know how to do a clipping mask if it’s possible!

Simon

admin added these pithy words on Jun 04 08 at 8:59 pm

This is an interesting point:

“if your common sense is photoshop you are wired from the start to not like it.”

It’s like the old Gibson vs Fender, Mac vs PC debate – ie, what you start on is what you know, and nothing else will ever match up. It’s a sensible line to an extent, but I’d mention that these are two apps *made by the same company* who actively want you to be able to move between them. So why make it so hard?

Simon

admin added these pithy words on Jun 04 08 at 9:04 pm

Excellent review Simon! Text handling has been one of my pet-peeves with Fireworks as well. As far as UI goes, I’m not such a stickler for following Apple’s UI guidelines for the sake of following guidelines, but at least make it *better.* Although you call it a “skin deep” change, do you think its a step forward, back, or neither?

Best wishes.

Kristopher added these pithy words on Jun 05 08 at 3:14 pm

Hi Kristopher. Good question. I’m not sure. It’s better than the old CS3 Fireworks, but I’d say a regression from the Photoshop CS3 interface, which I really like.

Simon

admin added these pithy words on Jun 05 08 at 4:02 pm

Hey Simon

yeah, I can see why you get frustrated with FW. I too use both (plus illustrator) and there are elements that each app could learn from the others. For instance, in Photoshop why do I not have better control over paths? If I want to join to open end points of a vector path in Illustrator I hit Cmd-J and they’re joined… not so in PS or FW. I’ve always thought FW should have an ‘artwork’ and ‘preview’ mode like Illustrator that you can toggle between as it can get really confusing trying to find the edges of a vector shape with no fill in a full raster preview mode.

PS could learn a lot about web optimisation for graphics from FW. If I try saving for web in PS I end with files that are HUGE (for web at least), so I usually end up taking those into FW anyway to TRULY optimise them. Generally I’ll reduce their size to around a half or sometimes a quarter this way!!!

Then we come to FW’s layer handling which you rightly point out is a poor cousin to PS with fewer options in the layer palette itself and more stuff linked to the actual object through the objector inspector palette – a bit confusing really for UI.

And the circle goes on and on… come on Adobe, you write all of them, so write them all as well as each other for the same feature sets.

To be fair, Adobe have NEVER written an app that could handle text well apart from InDesign. Illustrator makes MASSIVE files when using a lot of text (always twice the size that equivalent Freehand files used to be back in the day, but had nicer drawing tools than Freehand… so it was always good to use both, as now with PS and FW). PS is very clunky and slow with text, quite buggy palettes as well that don’t always update to show the font/colour/size of the text I just selected, but rather showing me settings I last used for a different block of text… very poor. FW was and still is (Macromedia legacy) awful and even PageMaker used to be bad compared to Quark. For the company that INVENTED PostScript (and PS fonts) you’d think they’d be better at implementing it inside their own apps huh!?

Right, anyway, onto the reason for my comment – your request for mask knowledge in FW. It’s right there at the bottom of the layers palette – add mask (same icon as photoshop’s add mask button in the layers palette!). If you make a new mask you can copy and paste either bitmap or vector items into the ‘mask’ channel for that layer and it’ll mask the item with that shape. Of course, it works in the same way as PS with Black>White greyscale shades allowing Alpha transparency for masks, but I’ve a feeling it works THE OPPOSITE WAY… ie: Black is fully revealed, white is fully masked, whereas PS uses black for masking and white for revealing – another quirk Adobe should have fixed when they first bought the company out. There is another way to make masks… draw your ‘mask’ object, make sure it’s layer is above the layer you want to mask, select both objects (or layers) then go to the Modify Menu>Mask>Group as Mask. To split the mask from the object again afterwards, just click the masked layer and ungroup… they’ll split into 2 separate layers again. This has been in Fireworks right from the beginning but was always a little obscure for PS users. Hope that helps :)

Oh… if you want to edit a mask, double-click it (for raster masks) or use the direct selection tool for vector masks and you’ll be able to grab the mask/contents separately.

M-RES added these pithy words on Jun 27 08 at 5:31 pm

Great comments M-RES! I totally agree that the three “generator” apps (PS, FW, AI) could really learn a lot from each other, but sadly I don’t really trust Adobe to make the right decisions!

I guess part of the issue is that they don’t want to annoy long-term users of any of the apps by genuinely changing the interfaces to be more standard, but I do think that in the long run it’ll be necessary.

As regards this whole “Group as mask” thing in FW, I can sort of get it working but it just seems to add a translucency too. Plus you can’t use a single object to mask multiple layers (a la PS’s clipping masks) I don’t think?

admin added these pithy words on Jul 01 08 at 4:52 pm

As regards this whole “Group as mask” thing in FW, I can sort of get it working but it just seems to add a translucency too. Plus you can’t use a single object to mask multiple layers (a la PS’s clipping masks) I don’t think?

…Just group them first

chris harley added these pithy words on Oct 17 08 at 3:52 pm

Well fireworks and photoshop has different groups of users. With Fireworks you get speed of making web graphpics. With Photoshop you get elegant ways of doing things with graphics. But to me Fireworks is always preferable. Photoshop really nags me off when selecting layers. In firworks as it’s vector, slecing is just a mouse click on the object. I can make a cool aqua interface within 5-6 minutes which takes more than double time in photoshop. For my works i manage to get most of the things done in Fireworks. Thank God that Adobe didn’t stop the development of Fireworks.

Mahbub added these pithy words on Oct 26 08 at 5:51 am

Hi Mahbub,

Yep, I agree with you about actually making the final graphic – Photoshop’s slicing and dicing tools are really undercooked. But given that the bulk of the work should be in the ideas in the first place, which for me are easier to execute in PS, I stick with Photoshop.

Of course, if you could properly open a PSD in Fireworks, you could do the creative bit on PS then slice and dice in FW. What’re the chances of that I wonder?

Simon

admin added these pithy words on Oct 26 08 at 8:15 am

I am a longtime user of Photoshop , but when it comes to work with Flash, FW is much more friendlier. That old exporting option is worth of gold. I haven’t tried new FW yet but that wrapping text problem and clipping problem could be serious miss. Hope it will be fixed in final cs4 version. I liked interface from FW8. Any drastic change would ruin my opinion about FW. Only thing beside slicing that makes PS superior over FW are filters, and I hoped that will be fixed since adobe took FW, yet, no sign that will ever happen.I hoped, in fact, Adobe team would fuse the best of this two programs together in one new PS or FW.

Probono added these pithy words on Oct 29 08 at 7:33 am

I think there are great things about FW, don’t get me wrong, and as regards the melding of the two apps, I don’t think that’s likely to happen. Adobe are moving PS towards print and photographers, and FW is the web design tool, creating two separate markets. That said, I would totally buy a version of PS with Fireworks’ vector and slicing tools.

I know I should be using FW for web design, as it’s clearly what it’s designed for, but its limitations are too much for me still. I think mostly it’s that thoroughly unlovable interface, along with the type issues. Plus no easy clipping masks (that I can get working anyway) and no way to add both a vector and bitmap mask to an image. “Bleurch!” sums it up. I never did like the Macromedia way of doing things and still don’t!

Simon

admin added these pithy words on Oct 29 08 at 8:49 am

I’m experienced in both FW and PS. On the surface, there’s lots to love about FW. The line tool’s width and rounded recgangle radius are both parametric! And i can easily change the angle of a line. Try changing the angle of shape layer line in PS, or the width of it! I love how easy it is to add “texture” to a shape’s fill. These features at first made me fall in love with FW… i began to understand why it’s such an easy to use program for the web.

But when i really started to get deep into it, i ran across many weaknesses. In FW, you can’t combine shapes without permanently committing to it. In PS you can create a shape layer, add shapes to it, cut out shapes from it, etc. Each shape is always retained for later editing, which is great!

PS’s “blending options” are far more powerful than FW’s equivalent. FW has the same features, but they seem to be there mainly for compatibility for if you import a PSD into FW. For example, in FW, you can’t add a gradient overlay other than black to white. WTF?! You can’t add a Stroke made with a gradient or a fill. You can’t add a fill pattern with your own image. Very limiting stuff!

Clipping Masks that work like in PS are missing and FW’s regular masking features are not a good replacement.

You can’t take advantage of the web’s large selection of free PS brushes, if you use FW. For example, if you want to make a grungy style page, it helps to have grungy brushes. Sure, you have some flexibility in FW’s brush engine (which i really like!), but it would be great if you can create your own brush like you can in PS. This is a biggie. I’m reading a lot of web tutorials on creating web mockups, and many use custom PS brushes.

johnb added these pithy words on Feb 04 09 at 8:38 pm

Add a Comment


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


© Copyright 2007 Simon Meek . Thanks for visiting!