Steps for Completing your Project Web Site

Use Fireworks to Slice your Layout

Open your Photoshop layout file (which you saved in your raw_Photoshop folder) in Fireworks.

Fireworks is a Web graphics editing program that will let you do a whole bunch of more complicated Web tasks-- but we are only going to use it for one thing... to slice the individual graphics from the guides and export them as GIF files.

There is only one tool in Fireworks that you need to worry about for now: The Slice Tool.

First, zoom in on your layout with the magnifying tool (right under the slice tool) and then Select the Slice Tool.

Use the Slice Tool to seperate your navigation and heading into seperate graphics. Be very careful that you draw your slices exactly along the guides.

Here the Home button has been sliced. We can see that it has been designated a GIF (you can select GIF or JPG file formats by going to Window-->Optimize to show the Optimize window.

Now export the graphic by right clicking on the green slice (NOT where that white circle is, which will give you different options) and choosing Export Selected Slice...

Give your file a new name (example: Home-on.gif) and make sure you save your file in the images folder within the Finalproject folder.

If the graphic you have just exported is a rollover image, then your next step is to export the other version (the ON or OFF version that is hidden in the layers).

Do this by hiding the layer with the graphic you exported, and showing the layer of the other version.

Then right-click on the same green slice again and export this graphic, just as you did the other one. Make sure to save this one in the same images folder in your project root folder, and give this graphic a different name (i.e., Home-off.gif)

You should NOT draw another green slice over the first slice you made

Make a slice for each graphic on the page. For each rollover graphic, make sure you export the slice twice, once with the ON layer showing and the OFF hidden, and then again with ON hidden and OFF showing. Never make a slice over top of another slice.

Remember to export On and Off versions of your navigation graphics and each heading graphic for all of your inside pages (you should have all of the graphics for all of your pages in this one file.)

Previous Step                  Next Step