The most recognized feature of Fireworks is its web-prototyping ability, but the application is capable of much more. One area where it does especially well is creating graphics for diagrams, charts and other technical illustrations.

The pie- and flowchart autoshapes, various arrows and connector lines are a good place to start creating standard diagrams quickly and easily, but if you want your design stand out, Fireworks provides the tools to do that as well. Today I will show you a technique that takes advantage of those tools.

By the end of the tutorial, you will be able to create the following 3D diagram:

It looks a bit like the 3D effects in Windows Vista. Briefly, the trick is to create a source object using the Cube Autoshape, and then multiply it using the Twist and Fade command, and finally style indivdual elements using the Subselection tool.

The tutorial is compatible with Fireworks MX 2004, Fireworks 8, Fireworks CS3 and CS4. It is comprised of the following steps:

1. Creating the source object
2. Replicating with Twist and Fade
3. Where to go from here  

1. Creating the source object 

1.  Start with a 300x300 white canvas
2. Open the Auto Shapes panel (Window >> Auto Shapes, or click on the Assets panel and select the Shapes tab.)
3. Locate the Cube Auto Shape and drag an instance of it onto the canvas.
4. From the Property Inspector, set its fill color to light gray (#CCCCCC)
The entire document will be created in grayscale, because this object is part of a printable PDF manual. If your project is web-based, you can easily make the object colorful by adding a color fill after the last step.
5. Leave the stroke as it is, but decrease the tip size to 1
6. Using the Property Inspector, enter the following values for dimensions and coordinates:



7. Using the two Offset handles, shape the object according to the image below:



8. Your object’s dimensions will likely be off now, so use the Property Inspector again to enter 208 and 143 for width and height, respectively.
9. Since Auto Shapes are grouped paths, we can select each path individually. Switch to the Subselection tool (A) and click the top rectangle of the auto shape. It will be selected and now you can style it independently from the main object.
   

Do not ungroup the object, because its sub-elements will irreversibly lose their group styles and settings. Use the subselection tool for manipulation.


10. With the top rectangle selected, set its fill color to #999999
11. Select the left side of the cube the same way and set its fill color to #666666
12. Create a label using the Text tool; set it to Times New Roman, black, 19 and write “Layer 0” and position it in the upper left corner of the object, as seen on the image below:



13. Group the text and the cube together (Modify >> Group, or Ctrl+G)

Now that our basic image is done, we are ready to use it as a source object in the next step: Replicating with Twist and Fade. Turn to the next page to see how it's done.