Slicing/Exporting/Web Templates in Fireworks

It's no secret, or at least it shouldn't be,that Fireworks is primarily a web designers tool. It's main purpose is to create web templates, interfaces and graphics. Over the past few months, with the release of CS3, there are a lot of newcomers to Fireworks - namely ImageReady folks who may or may not be thrilled with the fact that they now must use Fireworks to do their slicing and exporting of html. Well, no matter what you're background, I welcome you to the wonderful world of Fireworks!

I have been using Fireworks since version 3 and to be honest the first year that I owned the software, I didn't have a clue what to do with it! So, I know where many of you are coming from. You may have the added frustration that Fireworks doesn't look like the other Adobe products - not yet anyway - so the interface may take a while to get used to. However, I think you'll find the Fireworks is very web designer friendly. It's not a watered down version of Photoshop or a beefed up version of ImageReady. It is a standalone application that handles bitmaps and vectors well, so it's much more efficient than having to switch back and forth between Illustrator and Photoshop to handle vectors and bitmaps in a design destined for the web. However, importing Photoshop and Illustrator files may give you unexpected results. I'm sure compatibility issues are a top priority for future versions of Fireworks. We'll all just have to be a little patient!

I'm not going to go into a lot of detail in this tutorial, I'm assuming you already know how to draw a slice and have basic html knowledge, instead I'm just going to point out things I've discovered after years of experience using Fireworks as a web template tool.

Slicing the Template

Below is a screenshot of the template I'll be using for this example. It looks familiar doesn't it?

The template that I have created below is very similar to many sites you'll find on the web. Basically, it has a header where the logo and tab links are contained, a left column for more links, a center column for content and a right column for a search box and other content. It also contains a footer where text links, copyright statements, etc. will be placed.

Slicing

How you slice the template or interface is very important. First off, you want to make sure you have no overlapping slices. Secondly, images that will serve as buttons or links (like the tabs in my example) need to be individual slices. Lastly, it's a good idea to make the parts of the template that will contain the content of the web page, like the middle column, be exported as html slices and not image slices.

The below image shows the template sliced. The light green slices indicate image slices, the brighter green slices indicate html slices.

To slice the template, select the Slice tool. Draw over each area that you would like to make an individual slice.

Slices are ALWAYS placed on the Web Layer in Fireworks. Here you can turn on and off their visibility, name them, delete them, etc.

Image slices are used for any part of the template that will need to exported as an individual image. For instance, the logo should be its own slice so it can be optimized properly and have a link assigned to it, each tab needs to be an individual slice for the same reason, the gradient image below the tabs also needs to be an image slice. .

Below is the Properties Inspector for Image Slices:

You can define several things about the slice in the Properties Inspector such as the slice's : name, type (Image or HTML), link, Alt tag, target (whether the link will open up in the same window or a new one, and even choose it's optimize settings (GIF, JPEG, etc.), however I've found it best to do optimizing in the exporting stage where I can preview the results.

Below: Optimize settings for slices in Properties Inspector

HTML Slices

HTML slices are just that - HTML. You can click on the Edit button and type in the text you would like to be in the slice, however it's probably better to do this in Dreamweaver or whatever editor you choose.

Below: HTML Slice in Properties Inspector

Once everything is sliced properly, the next part is exporting and we'll handle that in the second part of this article.