IDUX

I recently gave a presentation at the Adobe MAX 2010 conference and in Los Angeles on using Adobe Fireworks to export the initial CSS and HTML code which can then be easily modified in Dreamweaver. At the start of the session I spent about 10 minutes showing some of the most common issues people run into when setting up a Fireworks file for CSS export and how to fix them. I think I received more feedback about those 10 minutes than I did for the remainder of the session!

(more…)

One of the most common page elements we need when creating wireframes and comps are tables, and one of the most common questions about Fireworks is how to quickly and easily draw tables like this without having to draw and position many (even dozens or more) individual rectangles for each table cell:
When we create wireframes and comps we often are not yet certain how many rows or columns a table will need, and the row widths and column heights may vary throughout the table. If the tables are drawn with individual rectangles or even with individual intersecting lines, it can take much time, effort, and attention to detail to change the size of the overall table. Fireworks offers two autoshapes that can make creating tables a bit faster and easier.

(more…)

I will be giving a presentation on the workflow from Fireworks to Dreamweaver using CSS and Images export at Adobe MAX in Los Angeles in a few days, and the demonstration will include a new Fireworks template for creating a portfolio web site.

Download the Fireworks Portfolio Template Here

The zip file contains the portfolio template, instructions on how to add it to the Fireworks templates, and examples of the exported CSS and HTML for the pages in the template.

The Adobe MAX 2010 session recording is now available online:

Yet another grid system has been published to help designers create consistent layouts. The Square Grid offers templates for Illustrator, Photoshop, and InDesign, a PDF to print for sketching, and an HTML and CSS framework for coding with the grid.

However, they do not offer a template for designers who use Fireworks, so I created one using their 28 pixel square grid (35 columns at 980 pixels wide.)

Download the Square Grid Template for Fireworks Here

There are many grid systems out there, but I like how the creator of this grid took the time to identify a few golden ratio column widths. Nice touch.