Extract CSS object properties

You can extract CSS object properties, such as rounded corners, gradients, drop shadows, and transformations.

  1. Select the object.
  2. Select Window > CSS Properties.
  3. Click Copy All to copy the CSS properties of the selected object. Click Copy Selected to copy individual properties.
    For more information, see Extract CSS properties from design objects  using Fireworks CS6.

Export slices as CSS sprite

You can slice objects in a document and export them as a single CSS sprite image. Using a single CSS sprite image instead of multiple images improves the loading time of a website by reducing the number of server requests.

When you export slices as a CSS sprite image, with the image file, a CSS file that contains the displacement values is also generated.

  1. Right-click the slice or group of slices.
  2. Select Export CSS Sprite.
  3. In the Export dialog box, click Export.

For more information, see Working with CSS sprites in Fireworks CS6.

Creating jQuery mobile themes

You can create jQuery mobile themes based on default sprites and swatches. You can also preview the jQuery mobile theme and export it as CSS and sprites.

  • To create a mobile theme, select Commands > jQuery Mobile Theme > Create New Theme.
  • To preview mobile themes in a browser, select Commands > jQuery Mobile Theme > Preview Theme.
  • To export a mobile theme as sprites and CSS, select Commands > jQuery Mobile Theme > Export Theme.
  • To preview the theme, select Window > Extensions > jQuery Mobile Theme In-App Preview.
  • To add an icon placeholder, select jQuery Mobile Theme > Insert Icon Placeholder.

For more information, see Create jQuery Mobile themes using Fireworks CS6.

Performance improvements

  • To address the not enough memory issue, the usage of GDI objects by Fireworks has been reduced.
  • Memory usage limit increased on Windows 64-bit computers for better stability when opening and saving large files.
  • On Mac OS, improved refresh rate of the Property Inspector when switching between objects.

Set opacity separately for fill and stroke

  1. Select the object and select the Stroke or Fill color picker. Alternatively, select the Fill or Stroke color picker from the Tools bar.
  2. Click the Opacity slider.
  3. Drag the slider to the desired value.
    On Mac OS, type the value in the text box.


Alpha support in Fill & Stroke (00:02:50)

Get an overview of Alpha support for fill and stroke revealing the time-savings and creative versatility this new feature offers.

By Patrick Foster

Color selection improvement

  • Use buttons to specify fill type options such as no fill, solid, gradient, and patterns in the Property inspector and Tools bar. Previously, these options were handled through drop-down menus.
  • You can now specify Stroke position (inside, center, outside) using the Stroke dialog box.


Quicker access to color (00:03:02)

Discover the advantages of the new and improved Color panel, reviewing what's new with fill/stroke opacity, gradients, and cut and paste of information for Hex and RGB color.

By Patrick Foster

Set the angle for gradient or pattern fills

  1. Select the object.
  2. In the Property Inspector, select the gradient or pattern fill.
  3. In the Edit Gradient or Edit Pattern dialog box, specify the angle value.

New fw.png filename extension

When you save a file, it is saved with the fw.png extension by default.

To change the default behavior, select Edit > Preferences. In the General tab of the Preferences dialog box, deselect Append .fw.png, and click OK.

You can also remove this extension in the Save As dialog box.

Miscellaneous enhancements

  • Enhancements to the Styles panel.
  • Location node for color stop in the Gradient tool is highlighted.
  • Using the Eyedropper tool, you can copy, fill, and stroke color.
    Select the Eyedropper tool, right-click the object, and select the desired option.
  • You can now locate the default Fireworks template and common library symbols in the Users directory.
    If a common library symbol is deleted, a new copy of the symbol is created when you restart Fireworks.
  • The selected object name and zoom level now do not appear in the document's title bar. This information is available in the Layers panel and application bar.
  • Updates to the path panel and swatches.
  • On Mac OS, you can now preview the image files in Google Chrome.
  • The Path option that gives quick access to many path-related commands is provided in the Window menu.
  • The Group as Mask option is provided with the right-click context menu.
  • The default optimization setting for a new file is PNG32.
  • Deprecated features:
    • AIR export
    • Create slide show
    • Flex Skinning
    • Device Central
    • Share My Screen
  • You can now lock constraints for the Crop tool using the Property Inspector.
  • Thumbnail icons for objects in the Layers panel.
  • The following assets are now available in the common library: Gesture, Icons, iPhone, jQuery Bootstrap, Wireframe, Wireframe-Ads, Wireframe-iPad, Wireframe-iPhone, and Wireframe Windows Phone 7.
  • Styles library has been updated with the following categories: Button symbol styles, fill design patterns, stroke color dots, and web button styles.
  • Tool tips are now available for the File Import operation.
  • While saving a symbol to the common library, it is retained on the canvas.
  • More options are now available for patterns and textures.
  • Inside the Gradient Fill dialog box, use CTRL+Left or CTRL+Right Arrow keys to navigate between the color stops or opacity stops. On Mac, use Command+LEFT or Command+Right.
  • Libraries are updated with more patterns and textures.

API enhancements

New methods

  • fw.appTemplatesDir: Returns the path to the template directory.
  • fw.commonLibraryDir: Returns the path to the common library directory.
  • fw.activeTool: Ascertains whether the active tool is the specified tool.
    For example, use if(fw.activeTool==Tools.pen) to discover whether the active tool is the Pen tool. This method does not depend on the tool name in the localized language.
  • fw.appPatternsDir: Returns the path to the Patterns directory.
  • fw.appTexturesDir: Returns the path to the Textures directory.
  • fw.reloadPatterns: Reloads the patterns from the Patterns directory.
  • fw.reloadTextures: Reloads the texture from the Textures directory.
  • dom.updateSymbol: Updates the symbol imported from the common library.

Updated methods

  • fw.browseForFileURL(browseType, title, previewArea, startFolder): A new optional parameter, startFolder, specifies the root directory for the Browse dialog box.
  • fw.setDocumentImageSize(boundingRectangle, resolution, currentPageOnly, interpolationMethod): A new optional parameter, interpolationMethod, takes integer values from 1 to 4 specifying bicubic, bilinear, soft, and nearest neighbor, respectively.
  • fw.saveAs(doc, url, defaultFromOptions): Default value for the defaultFromOptions parameter is changed to false. If it is set to true, the file is saved with the current optimization settings.