Adobe Fireworks

Blog Moved!

2008-10-30T01:00:00.000-07:00

Hi all,

Thank you for being a patient reader for all the posts I have accumulated in the past.
I am now moving this blog to a newer address http://blogs.adobe.com/sarthaksinghal

Let us all begin this new innings.

Thanks
Sarthak Singhal

Thank you all the creative professional attendees

2008-07-15T22:16:00.000-07:00

The Fireworks event was a huge success which happened at Adobe Campus in Bangalore on July 12, 2008.

Despite being a Saturday designers from the top companies had come over to share their experience and learn more about the Fireworks product and its features.

The audience count was more than 40 and they had a great time. The labs session was also quite appreciated amongst the designers who got a personalized assistance from the Fireworks engineering team as to how the features work and helps increase their productivity.

Once again, thank you to all the people who had come over to make the event a huge success.

Adobe event in Bangalore for designers and Fireworks users.

2008-06-24T00:46:00.000-07:00

Greetings Creative Professionals...

We at Adobe, welcome you to the showcase of Adobe Fireworks CS4 public Beta.

Sessions	Time	Duration
Welcome By Engineering Manager, Fireworks	10:00 -10:15	15 min
Keynote By Product Management, Fireworks	10:15 – 10:30	15 min
General Session Wire framing, prototyping and designing using Fireworks	10:30 -11:30	1 hr
Q & A	11:30 – 11:45	15 min
Tea meeting	11:45 – 12:00	15 min
Fireworks CS4 Beta Demo By Adobe Experience Designers	12:00 – 13:00	1 hr
Q & A	13:00 – 13:15	15 min
Hands on session with Fireworks CS4 Beta (This session can be extended post lunch based on your demand)	13:15 – 14:00	45 min
Networking lunch	14:00

Kindly, forward this invite to your designer friends who might be interested in this event.

Please send a mail to "fwcs4bta@adobe.com" to confirm your participation.

Thanking you,
Adobe Fireworks Team
Bangalore

Fireworks CS4 Beta - Live Gradients

2008-06-17T07:06:00.000-07:00

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 - 9 Slice scaling Tool

2008-06-17T07:03:00.000-07:00

As I mentioned in the earlier posts during CS3 time, this was one of the requests which was high on my list. In Fireworks CS4, my wish has been granted.

This request implementation will help out innumerable designer when doing any sort of design work involving scaling. The tool will be great to all the other designers who have got addicted to the intelligent 9 Slice scaling added in CS3 version of Fireworks.

My request was to remove the limitation of converting an object to symbol to apply 9 slice scaling settings to it.

Now, designers need not create a symbol out of the existing object to apply 9 slice guides to it. The tool is accessible via scaling tools options as shown below.

The 9 slice scaling tool cannot be applied to a symbol.

The 9 slice guides are available on a per object per session basis. The guides do not remember the settings. Hence when the object looses selection the guide settings are also lost. The next time 9 slice scaling is done, the guides will appear at the default location.

Fireworks CS4 beta - Style Improvements

2008-06-09T03:58:00.001-07:00

It will list all the styles which are used in the current document.
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.
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.
When the mouse is hovered on a style in the styles panel, the style name will be reflected in this region.
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.
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.
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.

This will delete the style which is mentioned in the drop down menu.
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.
This option can be used when a user wants to revert back to the original style after it has been edited.
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.
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:

Alt + Drag will redefine the style in the "Current Document" field in Styles Panel.
All, used and unused styles are saved in the png file.
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.
Copy a style and paste it into another document will paste the object and add the style associated with it in the Styles panel.
Copy Paste attributes will also paste the style in the styles panel.
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.
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.
When a style is redefined from a group/autoshape, only the effects are redefined. All the path attributes are ignored.
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.
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

2008-06-04T23:27:00.001-07:00

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:

Horizontal top.
Horizontal bottom.
Vertical left.
Vertical right.
Center of object.
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

2008-06-04T22:52:00.000-07:00

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.
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.
The text preference setting can bring the text as editable or as a bitmap converted image.
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.

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.
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

2008-06-03T05:45:00.001-07:00

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

2008-06-03T05:42:00.001-07:00

Formerly Frames panel

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

Other major changes:

Contextual menu has been added to the panel similar to Pages and Layers panel.
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

2008-06-03T05:37:00.000-07:00

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.
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.
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.
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.
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:

Pages panel now allow for multi-selection of pages by holding the Shift/Ctrl key.
Since multi-selection of pages is now possible, multiple pages can be deleted and duplicated.
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.
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.
Any new page added or duplicated gets added just below the currently selected page.
When pages are dragged for re-ordering, deleting or duplicating the icon changes to a grabber icon.
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 - New User Interface

2008-06-03T05:28:00.000-07:00

The entire application interface has been given a face lift. The grey theme of the application gives a ‘different’ look to the application.

The panels and all the related UI elements have been redone to be in sync with the new UI look and feel.

The panels can be docked and docked along with other panels. They can also be kept floating around the canvas workspace. Also the panels can be tied to the ends of screen where a blue line will become visible when they are dragged to that side of the screen. The below image show panels floating around the workspace. Clicking on the panel will expand it to access them.

The above image shows the options present to show the panels. Iconic mode is the smallest mode where just the panel icons will be visible. Clicking on the icon will expand it.

Mac users can also get a choice between the classic Mac floating feel of the application or the windows style of tabs for documents and fixed place for panels.

This option will bring in the tabs for the document. If the user wants they can pull out any document from the set of tabs and make them floating.
The broad bar present on the top of application where the shortcuts are present can be removed using this option.

There are many more functionalities present in the handling of panel adjustments and the UI for the application for you to explore. If you feel any problems and are stuck feel free to ask me.

Fireworks CS4 Beta - Features

2008-06-03T01:40:00.000-07:00

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.

Fireworks CS3 - New Blend Modes

2008-06-03T01:33:00.000-07:00

Adobe announces Fireworks CS4 beta on labs !

2008-06-03T01:31:00.000-07:00

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.

Adobe Fireworks CS3 - 9 Slice scaling

2008-06-03T00:00:00.001-07:00

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

2008-06-02T23:38:00.000-07:00

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.

JavaScript Engine in Fireworks

2008-06-02T21:41:00.000-07:00

Adobe Fireworks has had a scripting engine built into it since a long time. This is similar to other Macromedia family application like Flash.

The scripting interface to the application is a great way in enhancing the product to ones own suitability. Users have created numerous scripts which prevents them from doing the same operations again and again.

After you do an operation on the canvas, copy that step from the ‘History’ panel and paste it in a text editor. You will be able to see the JavaScript that is equivalent of the operation just performed. Just to let you know things like drag and drop from the panels to canvas is not scriptable and does not generate history step.

Also some steps in the history have a cross mark applied to it indicating that the step cannot be done as a script operation.

The following link will take you to Fireworks Exchange where users have uploaded their scripts which can be helpful to other designers who are not very conversant with the scripting skills and yet yearn for such functionalities.

Apart from the JavaScript support, the application also supports Action Script 2 events. This is a great feature where power users can create custom panels. Some examples of the custom panels in Fireworks are ‘Color Palette’, ‘Symbol Properties’ and many more in the ship version of the product. Apart from them the panels under Commands menu are all Flash panels which communicate with Fireworks.

Fireworks CS3 - Hierarchical Layers

2008-06-02T21:36:00.000-07:00

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

2008-06-02T21:00:00.000-07:00

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

2008-06-02T05:44:00.000-07:00

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

2008-06-02T04:31:00.000-07:00

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.