Firework CS4 CSS & Image Export

I’m going to explain the proper approach to layout prototype for exporting web compliant CSS & images using Firework CS4

By default, there is a web folder. Always create new folder to create div or content. Create a new layer. It becomes a new folder. Use it to create div elements for page layout. You can consider a div for header, a div for footer, a div for content. Create a new rectangle and rename the layer. The rectangle layer name will become the html <div> id. Size of new rectangle will become the size and position of div.

Any image you want to be exported to the CSS must be a slice-holder. You can optimize the image by selecting image type and format.

Don’t allow any overlapping on the text rectangle.

If you create rectangles within main rectangle, Firework will export those smaller rectangles as child of those container div. Think the layout as columns and rows so you can effectively create unique containers.

After you export as CSS & Image, you can open Dreamweaver to review the HTML and CSS codes. It is very cool…

Adobe CS4 Firework

Many are not aware of the latest CS4 Firework has evolved into far more than a lighter weight of graphic software like Photoshop. CS4 Firework has transformed into a rapid prototyping software for any design project including website or web app.

The key advantages are the ability to mix bitmap and vector images together, able to import native artwork from Photoshop, Illustrator, etc. You can scale any image with 9 Slice transformer with smart guide without distorting the images. 9 Slice scaling can be used without using symbol.

• 9 Slice Scaling
• export interactive PDF
• export AIR
• export to Flex
• export HTML/CSS

You can generate password-protected interactive PDF for clients to review and sign-off. Create AIR prototype that run on any platform. Apply lighting effects, shadow effects, styles, blend modes. Import hierarchical layers and layer effects on Photoshop PSD files. Import Illustrator AI files without losing integrity. Export Fireworks PNG files directly to Flash CS4 without losing editability on vectors, bitmaps, animations and multiple states.

CS4 Firework is designed to add it back to your design and development workflow. You can use common library to add standard compliant HTML and CSS code. It uses CSS-based fluid layout design instead of absolute positioning layout design. It is designed to develop Mockup or templates with better and quicker design work flow and ease into the development integration.

CS4 Firework Animation

F8 function is to access the Convert to Symbol to convert a object into symbol.

Set the symbol type to Animation.

Use CS4 Fireworks Measure tool in the Vector category of the Tools panel or in the Auto Shape Properties panel (the last button in the panel) to create a diagonal motion path.

Use a new layer with opacity as mask layer. Make sure State 1 is the current state. Select both mask layer and animated symbol and select Modify > Mask > Group as Mask.

CS4 Firework Updated CSS Export Script

It is worthwhile to note that there is a updated CSS Export script available here that is more standard compliant.

• Creating semantic markup is made easier by tagging text objects
• All font sizes are created using percentages, to allow for user text resizing in all devices and browsers
• Div elements with heights now also have a min-height equivalent to allow for varying amounts of content and user text resizing
• Multiple paragraph elements are now created from a single text object where appropriate, as opposed to using breaks
• There is an improved, more flexible library of HTML component symbols, including a List Item symbol to create unordered lists
• Divs with all border placements and sizes now output at the correct size and positioned more correctly

There is good CSS resources here.

CS4 Firework SmartCSS

SmartCSS started out as an extension for Fireworks CS3, now it is included as a standard feature in Fireworks CS4.

The idea of using CS4 Firework is to rapidly prototype from wireframe to mockup, from interactive PDF to CSS and Images export. It is designed to reduce the efforts and steps in workflow from scratch paper prototype, wireframe to interactive mockup. It is designed to save time and steps in creating templates. It would save developers time to handcode from scratch.

2 Export Modes:

1) uses a layout engine to analyze the placement of the objects in the Fireworks design and generate the expanding pages

2) uses absolute positioning to place the objects in the design

If your design includes overlapping objects that do not facilitate the export of expanding page content, the layout engine will be disabled, a warning will be displayed, and the CSS export option will use the absolute position mode to generate the CSS code.

When you use absolute position mode, Fireworks simply places each design object at a precise location on the browser window.

CS4 Firework Missing Document

I am invited to assist Adobe Flex User Group in both San Francisco and San Jose to explore the best practices and work flow between designers and developers on the latest Adobe products.

Firework has evolved from a design tool competing to Photoshop to a prototype tool that narrow the gap between design and code.

One critical component within CS4 Firework that is missing is Documentation. It is not included within the software or it is not linked to online documentation. In fact it takes me a while to find this link.

This is where CS3 Help here. There is no CS4 Help yet, online.