Fireworks CS4 Beta - Live Gradients

Gradients are an integral part of every design application. I find anything designer has some degree of gradient applied to it. It may vary from a subtle gradient to one which is clearly distinguishable.

Fireworks had this tool from long back but had a workflow limitation where the gradient was not live. In other words when the gradient handles were moved around they did not reflect the changes on canvas until the mouse click was released.

Fireworks CS4 beta version just hit the nail on its head and solved this problem. Somehow now I feel that this is was a big limitation in Fireworks CS3 when I have got so much used to the live gradient present in the beta version.

In the above image a radial gradient has been applied to a vector object. It consists of 3 user defined operations.

1. The circular head of the gradient handle moves around the dark yellow circle in the gradient.

2. The rectangular end of the gradient increases the radius of circle.

3. When the cursor is placed in the line, it changes to rotational icon which can change the direction of gradient.

All the above 3 mentioned customizable options in a gradient are live now in Fireworks CS4 beta. In the previous version of Fireworks releases, the mouse click had to be released to see the change in gradient effect. There is a small performance hit on some occasions but I can easily survive with it.

Fireworks CS4 beta - Style Improvements

1. It will list all the styles which are used in the current document.
2. If there are any more documents in the current Fireworks CS4 beta session, all the documents will be listed in the drop down menu. The user can access the style library used in that document as well.
3. This will load the stl file in the current session of Fireworks. It will be added to the drop down menu in panel and will be visible for all documents in that Fireworks session only.
4. When the mouse is hovered on a style in the styles panel, the style name will be reflected in this region.
5. This will load the contents of the stl file in the "Current Document" drop down option in styles panel and will be available only for the current document.
6. Through this option the stl file will be loaded and copied it in the user settings location. The stl library file imported will be available across multiple documents and multiple sessions of Fireworks.
7. A user can create custom stl library files. This option will save the styles in ‘Current Document’ as a stl library file.

The following options are available in the Property Inspector panel of Fireworks.

8. This will delete the style which is mentioned in the drop down menu.
9. This will break the link of the style on the current object. Any edits to this style will not be propagated to other objects which have the same style applied to it.
10. This option can be used when a user wants to revert back to the original style after it has been edited.
11. After a style has been applied to an object and the style is modified. Pressing this button will propagate the changes across all the objects where this style is applied.
12. This button is used to create a new style. Existing attributes of the selected object will be the attributes of the new style being created.

Other Workflow operations:

1. Alt + Drag will redefine the style in the "Current Document" field in Styles Panel.
2. All, used and unused styles are saved in the png file.
3. Deleting the Live Styles from Properties Inspector will delete it only from the current Document option. To delete it from the Library, use the panel delete option.
4. Copy a style and paste it into another document will paste the object and add the style associated with it in the Styles panel.
5. Copy Paste attributes will also paste the style in the styles panel.
6. When a Style is created from a group/autoshape, only the effects will be defined in the created style. The fill and stroke options are unchecked by default and hence they will not be picked up in the style. When the fill and stroke options are checked they will be picked up in the style created.
7. When you apply a style to a group/autoshape, the path attributes are NOT applied to all the sub-elements & only the effect is applied to the entire group.
8. When a style is redefined from a group/autoshape, only the effects are redefined. All the path attributes are ignored.
9. When an object with style name "Temp" is copy pasted into a new document which also has the style name "Temp", the new object pasted gets the + sign added to it.
10. Importing a png file which contains styles will pop up a dialog if the style in the current file and the file which is being imported has a clash in style names.

Fireworks CS4 Beta - Smart Guides

Aligning objects can be a real problem at times. Fireworks CS4 beta solves this problem common amongst designers by introducing the feature “Smart Guides”

This feature itself I believe can be a sole reason driving the upgrade to CS4 for many designers worldwide.

Whenever an object is brought in close proximity to any other object on the canvas, the guides become visible automatically which automatically to the closest pixel value.

The alignment happens to any kind of object, be it vector, bitmap, AutoShapes, groups or any other object. The alignments possible in respect to any other object are:

1. Horizontal top.
2. Horizontal bottom.
3. Vertical left.
4. Vertical right.
5. Center of object.
6. Center of canvas

The alignment happens by showing a dotted line which becomes visible in all the above cases of alignment.

If a user wants to hide the dynamic lines which get generated, they can do so by un-checking the option “Show Smart Guides”.

Fireworks CS4 Beta - Stronger PSD support

1. In CS4, when a psd file is opened/imported a dialog box will pop up from where the user can choose the way objects will be brought into Fireworks. The dialogs can be suppressed through this preference setting.
2. Image Layers refer to the bitmap objects of Photoshop. Either the bitmap objects can be brought into Fireworks with editable effects or the effects along with the object can be converted to a complete flat image using this preference setting.
3. The text preference setting can bring the text as editable or as a bitmap converted image.
4. Shape Layers refer to the vector objects in Photoshop.
• The “Editable path and effects” setting will bring the object as editable vectors. But this may changes the appearance.
• “Flattened bitmap images” preference setting will bring all the vector object and effects applied on them as a single bitmap image.
• The last preference option seem to bring the best of both, where the shape layers will converted to bitmap object but the effects applied on to it will be editable in Fireworks.
5. Fireworks has two sets of filters, one being its native set and the other one borrowed from Photoshop. Through this preference setting, when a psd file is imported/opened the user will have the option to map the effects contained in the psd file to either Fireworks native filters or to the Photoshop filters which are also present in Fireworks. Since the algorithm for same filter might differ, there may be slight difference in filter appearance also.
6. The appearance of clipping masks in psd files when brought into Fireworks as editable, changes quite a lot. This preference setting will solve this problem to a certain extent where the clipping masks and the base object will be converted to a single bitmap object maintaining the same appearance as seen in Photoshop.

Thus all the object types can now be controlled independently through this preference settings dialog. The tooltips for each of the preference is also quite self explanatory.

NOTE: The above preferences will be applied to the objects when user selects “Custom Settings From Preferences” option from the Import/Open dialog’s last drop down menu.

When a file is saved as a psd file from Fireworks, the user can control the individual object’s save type settings. Controlling the individual object type saving setting is possible after selecting “Custom” from the first drop down menu.

Other feature details

1. When a file is saved from Fireworks, the layers have the blend mode set to “Pass Through”. This will be helpful in some cases where the blend mode is set to Screen for layers in Fireworks.

2. When a mask has been created through Paste Inside option, it will be flattened when exported as a psd. This will maintain the appearance but the tradeoff is that the mask will be lost.

3. Content layer solid fills, all color spaces and bit depths and Color profiles in a PSD file will be converted to RGB 8 bit when opened/imported into Ignite.

4. When a psd file is opened, slices and guides are carried into Fireworks CS4.

Fireworks CS4 Beta - PDF Export

Adobe owns the PDF file format and has become the standard for document sharing across web.

With the introduction of Pages feature in Fireworks CS3, the ability of exporting the Fireworks png file as a pdf file became a next feature for this release. Also this seemed to be quite beneficial to any product where a designer might not be actual presenter to client. Or if the client interaction is only through mails.

This functionality of exporting all the pages of fireworks png file as different pages of a pdf document is a great help to people just mentioned above. The export to PDF functionality can be accessed via File ->Export and using the option as shown below.

Along with the format availability, there are multiple customizations which are also possible so that how the output pdf file will appear and behave. The following dialog can be accessed via the Options button which becomes visible after selecting the “Adobe PDF (*.pdf)” format.

After the pdf file has been generated, it can be viewed automatically in a pdf reader if the user checks the option of “View PDF after Export”.

Fireworks CS4 Beta - States panel improvements

Formerly Frames panel

1. This icon in the state indicates that there are some objects within it but none of them is selected.
2. This icon indicates that the state has no object contained within it.
3. This icon indicates the presence of selected object in this state.

Other major changes:

1. Contextual menu has been added to the panel similar to Pages and Layers panel.
2. When the user in a condition similar to point 3 as above, dragging the darkened circle will move the selected object from the current frame to the frame where the circle is dropped into.

Fireworks CS4 Beta - Pages panel Improvements

1. Master Page can be collapsed now. The thumbnail will be hidden in this mode for the master page. Thumbnails for other pages will not be affected by this action. Clicking on the highlighted arrow icon in the panel will perform the action.
2. When a page gets duplicated from the panel menu or the shortcut icon in the panel, the duplicated page will be placed right below the original page. Earlier in CS3 the duplicated page used to get added as the last page. Also the naming convention will quickly allow the user to find out the origin of duplicated page.
3. Pages panel now support the contextual menu within it. The menu can be accessed by right clicking on any page. It will not be functional from the blank area in the panel. This menu is same as the panel menu.
4. This gives a feedback to the user on the number of pages in the document. Just a glance at this place will give the information to the user.
5. This drop down menu is extremely helpful to users who operate on multiple pages and still would like to keep the panel small in width. Also the user gets information of the different pages present in the document. The master page is appended with an asterisk. This is similar to the drop down which was present in the Document Window.

Other major changes:

1. Pages panel now allow for multi-selection of pages by holding the Shift/Ctrl key.
2. Since multi-selection of pages is now possible, multiple pages can be deleted and duplicated.
3. When operations are performed with multiple selected pages, the history steps step generated is single. But the JavaScript behind it has multiple commands under a single step referring to all the pages.
4. The Pages panel now has Auto numbering in the panel visible. This auto number is not part of the actual page name. It gets updated when the pages are re-ordered.
5. Any new page added or duplicated gets added just below the currently selected page.
6. When pages are dragged for re-ordering, deleting or duplicating the icon changes to a grabber icon.
7. Fireworks CS3 allowed users to create page names with special characters in it. A restriction has been placed for it. (Special Character ex: / : \ < > | ? * “)

A major limitation of CS3 was that the user could not create same Layer name across different pages. In CS4, unique Layers naming constraint is not present anymore where users can have the same layer name across any page.

Fireworks CS4 Beta - Features

Adobe Fireworks CS3 released with a mega feature pack in the spring of 2007. The CS4 version is more about polishing those features to make them fit easily with the designers. This release focuses more on the usability issues of designers and also for the feature discoverability.

Apart from the polishing of existing features, there are some big requested features which have also been added in the CS4 release.

1. User Interface has gone a complete overhaul

2. Smart Guides are a real time saver while aligning objects on canvas.

3. Better Photoshop integration in this beta release.

4. PDF Export is now possible. All the pages in the png file now become pages of pdf file.

5. 9 Slice Scaling is available as a tool. No need to create a symbol to 9 slice scale the objects.

6. Live Styles Improvements- Designers have the flexibility of creating new styles,

7. Symbol In place Edit similar to the Flash work flow for components.

8. Live Gradients. Moving the handles of gradients makes the changes live on canvas.

9. Screenshot Tool is available on windows and works similar to Mac screenshot.

10. Frames is now renamed to ‘State’

11. Asynchronous saving for documents.

12. Flex Skinning

13. AIR Package creation

14. Text Engine has been re-architected.

15. Exporting the layout as CSS and Images.

16. Better support for Nested Symbols

17. New Path panel for vector based operations

18. Color Palette panel has a new look and extended the earlier functionality.

19. Usability changes to Pages, Layers and States panel. All these panels now have right click enabled in them.

20. Two new tools have been added ‘Arrow Line’ and ’Measure Tool’

Tune in to further posts where I try to explain some of the features mentioned above.

Adobe announces Fireworks CS4 beta on labs !

Fellow designers and Fireworks users.

Adobe just announced the availability of its web designing and prototyping tool Fireworks CS4 beta on labs.

Please follow the below link to visit the labs site from where you can download a copy of the public beta version.

http://labs.adobe.com/technologies/fireworkscs4/

In the subsequent posts I will walk you through some of the changes and enhancements made in this release. I welcome all feedback/suggestion/bug discussion for the beta version of Fireworks CS4.

Have a great time exploring the powerful features and also reading the subsequent posts for feature related details.