Home >> Communication >> Site Planning >> Part Four: Optimizing and Exporting

Part Four: Optimizing and Exporting

After you have finished your expanded mockup in Photoshop and pulled down guides to mark slices, then it's time to save your Photoshop file in your raw images folder and then open the .psd file in Fireworks where you will draw a slice across parts of the design to export slices as individual images.

Back to Phase Two: Information Architecture

I: Open your Photoshop file in Fireworks

You can view and edit your photoshop layout in Fireworks. Fireworks can recognize all of your Photoshop layers and since Fireworks 4, it can recognize effects you have applied to layers in Photoshop (such as drop shadows, color, tint, emboss, etc.).

II. Draw Slices Individual Images (that were separated by guides) and Export these Slices as GIF or JPG

NOTE: In Fireworks, do not forget that you only need to define the slice areas once! Once you have the green screen over a section of your layout, do not draw another slice over this same area!

The software in the Humanities lab is now Fireworks 4, but the Fireworks 3 tutorial explains the purpose behind slicing graphics, and why this is an efficient way to work.

Slicing Your Layout With Fireworks 3 (why do you need to slice up your layout?)

Slicing Your Layout With Fireworks 4 (simplified step-by-step explanation with screenshots)

Save all of your exported images inside the appropriate images folder in your defined site folder on your zip disk.

Next Section: Part Five, Create a Template in Dreamweaver