Accessibility

Fireworks samples

Pen and gradient tools showcase

Adobe Fireworks CS3 is the perfect tool for laying out interesting website concepts quickly and easily. This sample highlights some of my favorite Fireworks features.

Using the Fireworks pen and wonderful gradient tool, you can create some amazing effects. Fireworks layer effects and masking abilities can rapidly add another level of detail and refinement to your design.

Another reason that Fireworks is so perfect for web-based UI design is its pixel-based art board. When I build out my design in XHTML and CSS, I place the elements on the page using pixel positioning. That means I can achieve a pixel-perfect representation of the Fireworks layout on the website.

There are two pages in the sample PNG file that iterate different layouts (see Figures 1 and 2) within the same design.

Page 1 of the sample

Figure 1. Page 1 of the sample

Page 2 of the sample

Figure 2. Page 2 of the sample

Requirements

To view these samples, you need the following software and files:

Fireworks CS3

Pen Gradient Tools Showcase

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the Author

Rodger Fuller has been designing web interfaces professionally for over a decade. He is now Creative Director at his company, FullClip Creative, based in Austin, Texas. Their services include identity, web and print design, video production, and application development.