Building smarter comps
Let's start where most websites begin — in a bar, restaurant, or café, someone scribbles a site map or sketches a potential layout on a napkin. From there, the concept makes its way into Adobe Photoshop where a designer puts together the pixel-based vision, one layer at a time. Before long, he or she has shuffled the pixels into place to form the first page.
Then, additional pages are produced by creating new layer groups while turning off others. During a recent visit to a customer, we observed one designer working on a comp in Photoshop that contained more than 150 layers — 90% of which were toggled off at any given moment. To show the client, she had to tediously export a JPEG, turn layer groups on and off, re-export, turn layer groups on and off, re-export, and so on.
With Adobe Fireworks® CS3, this process can now be greatly streamlined. Instead of having to work with a single Photoshop file consisting of an unwieldy number of layer groups, you can begin to build Photoshop comps logically: one PSD equals one web page. Then, using the new Pages panel in Fireworks CS3, you can import the individual PSD files as actual pages. Fireworks CS3 now understands the native PSD file format and can maintain the appearance of the layers and layer groups, even to the point of editing layer effects and styles. After importing the PSD files as pages, layers and layer groups can be shared across multiple pages. Imagine only having to create a navigation bar once and then being able to distribute it across numerous comps. Change any element on a shared layer, and it updates on all the pages. Finally, by quickly adding hotspots to proposed navigational elements, Fireworks can export the page comps to the web with one click. Not only can clients now see the proposed layouts, but they can interact with them as well.
