Extracting CSS properties from design objects in Fireworks

In this article you'll learn how to extract the properties (rounded corners, opacity, and more) of a selected object in Fireworks and map the design to CSS3 for use on the web.

Visual designers usually design websites with a design tool, such as Adobe Fireworks. After the design is approved, the design file is often sent to a web designer. The web designer uses the static design to translate it to a web page using HTML, CSS, JavaScript, and various image assets. If a design cannot be represented using CSS code alone, image files are exported as slices and stitched together using HTML and JavaScript.

As CSS3 gains momentum and support in modern browsers, many design aspects can be represented purely by using CSS. You can use the Fireworks CSS Properties panel and simplify this sometimes tedious process. Using the CSS Properties panel, you can extract the design properties of objects in Fireworks that can be represented in CSS. In this example, you'll see how this feature reduces the effort that is normally required when manually translating graphic effects to browser-specific CSS properties.

You'll use the CSS Properties panel to map all the properties of a Fireworks object that can be represented in CSS. After the desired object is selected, the panel lists the extracted properties in the CSS Properties panel. You'll discover that many design characteristics—such as rounded corners, gradients, drop shadows, and transformations that you create in in Fireworks—can be easily translated to CSS.

The CSS Properties panel also lists browser-specific CSS properties in order to maintain design consistency in the most popular browsers such as Mozilla Firefox, Google Chrome, Apple Safari, Opera, and Microsoft Internet Explorer.

Using the CSS Properties panel in Fireworks

After installing Fireworks CS6, the new panel interface in Fireworks will display the CSS properties of a selected object on the canvas. To see how it works, either create some new artwork on the canvas or open an existing PNG file to work with a site's design. You'll select an object on the canvas in order to extract its CSS properties:

1. Open the CSS properties panel by selecting Window > CSS Properties (see Figure 1).

The CSS Properties panel appears. The different sections of the panel are identified in Figure 2.

2. To copy the CSS Properties for the artwork, choose from one of the following options:

• To select and copy all of the extracted properties, click the Copy All button.
• To select a subset of properties, press Shift while clicking the desired rules—or press Control+click (Windows) or Command+click (Mac) to select the desired rules—and then click the Copy Selected button.
• To copy browser-specific properties, select the browser and click the Copy All button. You can deselect the Include Comments check box to exclude the comments from the copied properties.

Using this approach, you can extract the CSS properties and copy the rules in order to paste them into a CSS file of your choice. Open the CSS stylesheet of a website in Adobe Dreamweaver. After pasting the new styles, return to the HTML page and press the Live View button in the top of the Document window. Live View enables you to preview the page as it appears in a browser. Alternatively, choose File > Preview in Browser to view the HTML page in a browser to test it. The design object will appear exactly as it was displayed in Fireworks.

The new functionality to extract CSS rules from graphic artwork in Fireworks CS5 or later will effectively increase your web design workflow as you produce pages. Using the CSS Properties panel, you can quickly see which design characteristics are supported in CSS3. (Not all CSS3 properties can be represented in Fireworks; it shows only the CSS3 properties than can be mapped.) By simply copying the generated rules, you can update sites to use the industry-standard code with minimal effort. Additionally, the CSS is compatible across browsers to ensure that the site will load quickly and appear as expected when you launch the live site.