Fireworks CS3 - New Blend Modes

Adobe Fireworks CS3 - 9 Slice scaling

I can bet on the following functionality that it is just amazing for any designer and after looking at its working they would want it in every designer application. This is the 9 Slice scaling functionality.

I think it will be self descriptive through images rather than trying to explain you by writing pages of text.

Consider the following object.

After scaling it by 150% in the horizontal direction WITHOUT 9 slicing applied to it.

After scaling the same object by 150% in the horizontal direction WITH 9 slicing applied to it.

The following figure will explain you more how the guides are placed for the above object so that the curves at the end of the object donot distort when it is transformed.

The region in between the vertical guides gets scaled when the object is scaled horizontally. Similarly when the object is transformed vertically, the region between the horizontal guides gets expanded.

What you see above is done for vector objects, but the same principle works for bitmap objects also and I can bet that this is a great thing for desktop, web and mobile application UI designers.

The only disadvantage I see for it is that the object needs to be converted to a symbol for 9 slice scaling guides to be applied to it.

Fireworks CS3 - Photoshop Integration

After the Macromedia take over by Adobe, some of the integration and branding was needed on macromedia products.

Photoshop was just one example where the engineers had to reverse engineer the psd files and get the objects from it.

Photoshop live effects were added in the Property Inspector where the user could apply Photoshop filters in Fireworks. This was a great bridge for Photoshop users trying to work in fireworks. The UI (User Interface) remains same as seen in Photoshop.

Some disadvantages are that the options are not completely mapped as they are available in Photoshop. Some here and there compromises have been made.

Fireworks CS3 - Hierarchical Layers

Fireworks CS3 for me was a big release as lot of big features got added to the product. This was despite the fact that Macromedia had just been bought over by Adobe in an all cash deal. Also the designers were apprehensive about the future of this beautiful tool they had been working on for years in the Adobe league of products.

Another big help in the area of document management was the availability of hierarchical layers.

For readers and designers, from Fireworks CS3 all the layers and frames are contained in a page. A single png file can contain multiple pages.

The hierarchical layer was made available for Web Layers as well and not restricting it to the ordinary layers. The layer nesting is allowed at any levels.

The hierarchy of the layers can be changes by simply dragging and dropping them. A visual feedback to user is available on where the layer will be landing but sometimes it can be misleading.

The ‘Layer 2’ and all the child layers along with their objects are colored in yellow. This is a visual demarcation that the ‘Layer 2’ is shared across multiple pages.

Fireworks CS3 - Multiple Pages

The feature seems to me as a great boon to designers. Adobe has been marketing Fireworks as a web prototyping tool. I completely agree with them and also would like designers in other fields like application UI prototyping/designing, mobile application designing explore this gem of a tool which is a good fit for them.

From my personal experience I can assure you that the learning curve for this product from Adobe is very small. This is one of the hesitations I have found with designers who want to be productive with any new application they try their hands on.

Logically this feature have given the users another abstract level of document management where the entire website, application UI, mobile application prototype can be contained in a single PNG file. Existing users of Fireworks till its Macromedia version 8 can now think of a page as a container for independent set of layers and frames in separate pages.

Above you see a screenshot of the pages panel. As you can see this panel gives you a visual description of which page you are working on and also allows for operations like adding, deleting, duplicating pages.

Adding to the rescue of designers, if some things are common across all pages then an ordinary page can be made as a master page and all its contents would be attached to all the rest of the pages. Designers can see this in their layers panel, master page layer and its contents getting appended at the bottom.

But if some content in a page has to be shared across only certain pages, then the top most parent layer can be shared across only those pages. This layer sharing option across pages will be visible to users in the layers panel menu.

Fireworks CS3 - Rich Symbols

Symbols were existent in prior Fireworks releases but this feature aimed at giving a new dimension to the designers who could also develop their own reusable symbols. Only restriction being that the designers needed to know a little bit knowledge of JavaScript.

The above image is the panel called Common Library. It contains all the Assets which are shipped with Fireworks CS3 from animation, buttons to Rich Symbols.

The traditional symbols in Fireworks when had to be edited, the user had to enter the symbol edit mode, which would open as a new document containing the symbol. When the editing was complete all the symbol instances were updated with the edits. The limitation being that the symbol instances could not be independently skinned.

Rich Symbol was all about solving this problem. Each instance of the rich symbol could now be edited independently. The editing is done through the ‘Symbol Properties’ panel.

In the above screenshot I have selected the ‘Book Closed’ rich symbol placed on the canvas which is present under ‘Flow Diagram’ folder in Common library panel. The properties above are the ones that can be edited for this rich symbol independent of its instance.

These editable properties for a particular rich symbol are stored in a jsf file which is associated with each rich symbol png file. A designer with some basic scripting knowledge can expand on the set of editable properties for the rich symbol as per their convenience.

The shipped rich symbols are placed at the following location and each rich symbol .png file is associated with a JavaScript (.jsf) file as shown below.

I feel that this is a powerful feature but the designers who are not scripting/programming savvy will find it really difficult to exploit its full potential. Adobe has provided a ‘Create Symbol Script’ panel for such kind of designers but sometimes I find it not working. Or perhaps I feel more comfortable opening/creating jsf files in BBEdit /EditPlus.

I have also written an article an Adobe Fireworks Dev Centre where I have extended this rich symbol functionality to make them smart and intelligent. You can read the full article at the following URL:

My Article Link

Adobe Fireworks CS3 - Features

I have recently started using Fireworks and looking at the product history CS3 seemed like a jumbo release with many features making its way into the product and also the magnitude of each feature was huge.
I will look at some which I use almost on a daily basis.

1.Pages feature: This allows us to create multiple images within the same png file. Now is very easy for designers to mockup their design in a single file rather than managing multiple png files for each web page. The ability to create master page and share layer across pages for inheriting objects among all child pages is very helpful. Sharing of layers is also possible across child pages.This enables users to share certain set of objects under one page across multiple child pages.

2. The hierarchy of layers is real nice feature addition. This feature really helps in organizing the objects on the canvas and then giving the layer a self explanatory name makes it even more helpful.

3.The 9 slice scaling feature is a huge enhancement to prevent the objects from getting distorted. User can set the guides on area of object whose appearence should be maintained on vertical or horizontal scaling. Best part is that the attributes of the objects are scaled through an option and this feature can be applied to both vector and bitmap objects.

4.Rich Symbols is a real time saver. This is accessible through the Common Library Panel. Once it is dragged on the canvas, there is another panel, Symbol Properties which allows for editing of this symbol by setting a predefined set of properties in the symbol properties panel.

5.Metadata support has also been added to Fireworks CS3 png files. But the disadvantage is that the metadata format is Adobe proprietary, so any generic application will not be able to read it.

6.PS Live Effects: Photoshop Live effects have been built into Fireworks for greater breadth of effects which can be applied to the objects.

7.Some Blend modes are also added. This feature in combination with PS live effects can produce some amazing effects.

With such a huge set of features and their weight, I think fireworks CS3 is a must buy for web designers. They will not regret their decision.

Kudos to Adobe and the Fireworks team.