Fireworks CS4 beta: My top five new features

1 Jan 1970

Adobe has for the first time released Fireworks CS4 as a public beta. When Adobe bought Macromedia, many Fireworks users were worried that Fireworks would be dropped, as it trod on too many Adobe product toes. The CS3 release was lacking in major developments, and felt like it had been rushed out - which contributed to fears for its future. Luckily, it has not only been spared the chop, but has seen (in my opinion) the most significant set of improvements for several versions. Here are my top five things I like about the new version.

1. Smart guides, snapping and measurements

This may seem like a trivial change, but it is one which makes such a difference to working with FW, that I'm cautiously saying this is my number one new feature. To try and describe it as simply as possible, as you create anything, or move it around, guides appear when your object is aligned with others.

Screenshot of Fireworks' guide measurements

This is a massive time saver when doing pretty much any layout design, as straight away you can line up boxes, text and images with elements you already have. It does this in what feels like a very smart and natural way, snapping in the right place and requiring little thought or input - it just works.

Fireworks guide measurements

Along with that, there's a nice new feature for using guides - if you hold down SHIFT, it overlays the measurements between sets of guide lines on the page, and when you're creating new shapes, the dimensions of what you're creating are overlaid. It sounds like such a tiny thing, but since so much of creating web mockups is about measuring things to pixel sizes, and trying to make them consistent, this removes the step of having to create something and then go back and resize it to the correct dimensions later.

2. Interface improvements

This release also sees FW's interface coming into line with other Adobe Suite products. While I haven't been convinced of this worked well in Dreamweaver, in Fireworks (as a graphic app, the interface's natural home) it works well.

There have been a number of fixes to long standing interface bugs and niggles. For example many of the icons have been redesigned, making them look far more modern and in-keeping. Many of the commands and panels have improved interfaces and more now give previews (for example using the 'Add arrowhead' command was always a hit and miss affair, but now with a preview it is actually usable!).

Pages panel

You can now select multiple pages at once, and have the option to right click pages and states for more options (something bizarrely missing in previous versions). Flash-based panels (which in some cases were originally developed by external developers) now all have a much more consistent look and feel. Symbols can now be edited in place, like Flash. The autoshape and symbol properties are now tabs of the main property inspector, which also makes much more sense as a user.

These are just a few examples -- there are literally dozens of similar enhancements. Many of these improvements are small but taken together they are more than the sum of their parts and add up to a better, more professional experience.

3. Live gradients

Another frequently used (well, if you're into trendy Web 2.0-style designs) area of FW which has previously been a bit hit and miss was applying gradients and gradient masks. You'd make your changes, and then the canvas would update - there was always trial and error in getting it right. In CS4, you get a realtime preview of the changes you make as you drag the gradient handle. It just feels so much slicker - and makes you wonder why it didn't do that before!

4. Nine-slice scaling tool

Nine-slice scaling has been around for a while, originally in Flash and introduced in Fireworks CS3, and allows you to scale items - keeping parts of it in proportion while distorting others. This is useful for scaling buttons or boxes, where you might want the corners and edges to stay undistorted when the box is resized.

9-slice tool menu

Previously Fireworks had required you to create a symbol, which you had to mark as being nine-slice-able - not very quick or user friendly. CS4 sees the addition of the Nine-slice tool to the set of existing transformation tools, which allows you to pick any object, adjust the nine-slice guides (which have fairly sensible defaults in most cases) and resize it directly. This is to me like the new guides feature -- you don't realise how much time it saves you until you start using it.

9-slice transform example

The only thing which isn't quite right about it is that the nine-slice guides disappear as soon as you begin resizing, and reset themselves to default positions again if you transform it again. Hopefully this will be addressed by the final release.

5. Styles

One area which Fireworks has always been lacking is in the global management of colours and styles. Every element of your design exists on it's own - there has never been a strong way of linking the style of items together (for example to define a global colour, or say "headings are always red").

This release sees a radical overhaul of the styles functionality. Although FW has had some form of styles for a long time, they have never been very user friendly to use. In fact I've been using FW for nearly 10 years, and never really understood them.

Styles toolbar

The new system allows you to set and name styles much as software like Quark Express, or even MS Word does - you could define a style with a blue border, red fill and a drop shadow. This can then be applied to as many objects as you like. If you adjust one of them (e.g. make the fill green) you can choose whether this just affects the one object, or modifies the style definition to affect all the objects with that style.

This is one feature which I think will be massively useful (hence why I make it in my top 5), although the implementation as it stands doesn't feel completely finished. Hopefully this is something that will also be refined before the full release.

Best of the rest

Although I've picked out my top five new features, there are also a host of other improvements in there which I think are significant and interesting developments:

  • Text management - has been updated to use the same engine as other Adobe products. The drawback is that your text rendering changes when you import a CS3 document; the benefit is that you can swap between FW, Photoshop and Illustrator without dramatic changes in font rendering. You can also wrap text in non-rectangular boxes, which is surprisingly useful when mocking up web pages. The main downside is that the text doesn't look as close to how browsersrender it as previously.
  • Frames have been renamed to states - an indication that FW is no longer considered a tool for creating animated gifs (leave that to Flash?) but for creating mockups and wireframes of rich web applications
  • HTML and CSS output - this isn't something I use as I've never been able to trust the output of program vs creating it by hand, but there seems to have been a significant amount of work on this as a feature. Will be interested to see how this develops. Interestingly lots of Flex and AIR output options too - again not something I use much at the moment, but this may be an incentive to explore.

There's also a massive number of other improvements, which are detailed on the Adobe Labs site.

See also: Dreamweaver CS4 beta first look

Permalink
Share it with the world:

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
Security Code: