About Slicing and Exporting Pages with Your Graphics Software

Both Macromedia Fireworks and Adobe Photoshop provide image slicing and exporting functions. However, I prefer the slicing and exporting tools found in Fireworks better than in Photoshop. On the other hand, I like the typographic effects, image editing features, and overall design control I get with Photoshop. Navigation and button bar in Macromedia Fireworks (You can make navigation bars and buttons in Macromedia Fireworks quickly and easily. Buttons can be sliced and exported to make navigation bars for use in Macromedia Dreamweaver.) As well, in many cases, I have legacy documents that are in Photoshop file format. My point here is that I use both applications when I design Website screens. You might favor one over the other. But for slicing, exporting, and integration with Dreamweaver, Fireworks wins hands down in my opinion. Not to worry though, Fireworks opens native Photoshop files with layers and the text is completely editable.

As long as versions are up to date, the integration is seamless. You could design all your pages and navigation graphics in Photoshop and then open them in Fireworks to optimize, slice, and export. If you create pages in Photoshop, you can save the files as PSD format. Then, you can open the PSD file directly in Fireworks. You can tweak the page and slice and export. Lastly, you can save the file as PNG so that it is easily edited and re-exported in the future. Macromedia was purchased by Adobe in
April 2005, but Fireworks and Photoshop still remain individual products.


In the future, it will be interesting to see how Adobe integrates the applications to create a Web graphics tool that will enable even the newest Web portfolio designer to create Web screens and output them to Web pages quickly and easily. The process is good now, however there always be improvements made to digital workflows as technology progresses. We have overviewed various pieces in the Web production process up to this point. Here’s a complete instruction for Fireworks:

Make a Web page layout in Macromedia Fireworks MX 2004:

1. Open Macromedia Fireworks and immediately go to Window>Properties and Window>Tools to show the tool bar and property inspector. Both palettes may be open on start up.

2. Go to File> New and create a document at the size you want your Web pages to be: use 800 x 600.

3. Set the resolution of the document to 72 dpi and choose a Web safe background color from the palette.

4. Start by creating a page header and navigation bar. If you are using HTML text-based navigation, you can skip this section. Your navigation will not be graphical. That’s fine and very appropriate for a Web portfolio. But if you want get a bit fancier, the following are a few steps on how to create page
headers and graphical navigation buttons. To make a page header, create a box that spans the top of your Web page (800 wide by 75 high). Set the header box to the desired color and then add text
to the bar or open an image and drag it into the Web page document directly from its window (see next). Scale the graphic accordingly in the Web page document and then place it on the
navigation bar.

The header text should state the page name, for example bio or resume would be typical headers (categories). To make the navigation buttons, create boxes or circles (around 50 x 50
pixels) and align them vertically or horizontally. Then overlay the corresponding category text. Be sure to align the text and the buttons correctly so that the visual appeal is consistent. If you need help with alignment, you can go to the menu item View> Grid and View>Guides - Drag guides from the rulers on to the page. Align elements using the guides. Leave the rest of the page blank. We will add layers to this content area later on when we open the newly sliced Web pages in Dreamweaver.

5. If you want to push the pages further in Fireworks, you can open the Web graphics you created into your screen designs by dragging and dropping from window to window, copying and pasting, and by importing. The easiest way is to drag and drop. You can open images in Macromedia Fireworks and drag from one window to the next. Each image comes over on to its own layer. Use the scale tool or simply click CRTL+T and you will get a free transformation bounding box around the graphic. Hold the
corner node and shift key and scale the graphic; hit return to complete the operation. You can design pages with graphics completely using Fireworks or place the individual images on the Web pages later using Dreamweaver.