7 May 2012
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.
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.
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:
The CSS Properties panel appears. The different sections of the panel are identified in Figure 2.
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.