You may it easiest to follow this tutorial by looking at the finished product. To see the sample Fireworks PNG file, and a Fusion Template that uses the new custom style elements, download this Zip file.
This is not a super pretty design. But you want to learn the process, not how to design.
- Are you familiar with Fireworks already? If not, take some time now and work through the tutorials included with Fireworks.
They're quite good, and they will teach you how to do all you need for this process.
- You can also do similar design work using any of several other good graphics software. The crucial part of this process is being able to export "slices" from the large graphic that represents your new page layout.
- If you're not using Fireworks, you can view the PNG file with any recent image editing software. But you will not be able to manipulate the individual drawing layers of the Fireworks project, nor will you see the slice object layers.
top of page
Create Your Layout in Fireworks
In Fireworks, do this:
- File, New, 1800 pixels width, 600 pixels height
- Set the canvas color to a nice shade. In the example, the canvas is #33CCFF.
- Select the Rectangle tool, draw a large rectangle,
starting at 120 pixels down 120 pixels right to
400 pixels down, 600 pixels right.
This represents your page layout area in Fusion.
Feel free to tinker with the settings of this rectangle: give it a border and a fill color, or apply some effect such as a drop shadow or embossing. Or just leave it plain white fill, no border.
Create special MasterBorder pieces
For this example, just draw a rounded rectangle, with some embossing, and a text layer with "my website name." If you have a logo already made in Fireworks, just insert that graphic in the top left corner. Set your Canvas color to match, if you like, or experiment with other complimentary colors.
The banner is just another rounded rectangle, with a background and embossing that matches the "logo" area.
Don't put any text in here: this will be the Fusion site style banner graphic.
- Don't forget that Fusion 7 lets you offset the text from the edges of your banner by a fixed number of pixels. This allows you to be much fancier than before with your site style graphics.
(Optional) Make a Link Hotspots Area
In the area between the logo and the banner, you can place some text objects you can use for hotspot linking in Fusion. "Home, About Us, and What's New?" Feel free to change the text to suit your site, or delete the text objects entirely. You will still want to export the slice of this object.
Make nav bar buttons
In Fusion, you need two sets of buttons: one each for the primary and secondary nav bars. You want to make a regular, rollover, highlighted, and highlighted rollover variant of each button. Altogether, you need eight button graphics.
- Tip: you can also make do with only six button graphics. If you make the Highlighted button the same as the Highlighted Rollover button, you can remove possible site user confusion.
By having the image not change on mouse over, you tell the user there's nothing different linked from the Highlighted button. Clicking it brings them back to the page they're on.
- Tip #2: don't forget that Fusion 7 can now offset the text from the edges of your buttons by a fixed number of pixels. This allows you to be much fancier than before with your site style graphics.
In this example, you can make a single button by drawing a small rounded rectangle. Just change the fill color, embossing effects, etc. and export (six or) eight different button graphics to use as Fusion Nav Bar buttons.
top of page
Slice Your Pieces
Logo, Hotspot area, Banner
- Use the Slice tool to create 3 slices in the top area.
- Right-click each slice, choose Export Selected Slice.
Place the first two graphics in your MasterBorder in page view. Set up the banner in Style View. In Page View, place the banner with the Banner tool.
- Use the Slice tool to create a slice that just contains the button and a bit of the background canvas blue.
- Change the fill color, embossing, etc. and export the button slice eight times. Name the files according to how you want to use them in Fusion.
For this example, I named each exported slice as PBtn.gif for Primary Button, PRBtn.gif for Primary Rollover Button, etc.
The last slice to make is for your Fusion Site Style background. In an area below the button, make a slice 10 pixels high by 1800 pixels wide. In this example, the slice is BG.gif (for background).
If you use CSS for backgrounds, you can just use a plain color around the layout instead of a tiling graphic. When you use CSS backgrounds, you can also use the "Center in Browser" setting.
If you want a data list in your site, do this in Fireworks:
- Somewhere in the big white rectangle that represents your page layout, you could make a little icon graphic. This should not be any bigger than about 10 pixels square, or if you use data lists in your site, they will format in unexpected ways.
- Slice and export it from Fireworks separately.
Use the same basic process to create a Site Line graphic.
Variations on a Theme
You can use Fireworks to make many different variations on a site style with from one PNG layout. For example, you can:
- Simply change the Canvas color, and re-export your slices.
- Change the fill colors or Fireworks effects of the different objects, and re-export your slices.
- Use your imagination, and have fun.
top of page
Setup Your New Style in Fusion
Start a new blank site in Fusion.
- In Site View, click File, New Site, Blank Site.
- Name your site file as desired.
Why use a new blank site?
- It's safer than creating a new style in an existing site project file.
- If you hate the new style, you will not ruin any existing project work.
In Style View
- On the Style View Menu, click Style, New Style.
- In the New Style dialog, name your new style, and choose Base on None. This creates your new style with no images or other properties.
- To associate your new graphics with the banner and nav bar objects, double click the empty objects in Style View. Also set the font, color and size of the text that Fusion will put in your banner and nav bar buttons.
To avoid strange-looking results, make sure you set the same font, size and colors across each set of nav bar buttons.
- Set the style background to use the 10x1800 pixel gif file you made in Fireworks.
- Switch to the Text tab, and set up your page text elements to use complimentary colors for headings, normal text, bullet lists, etc. For best results with your text styles, remember to turn on CSS formatting in Tools, Site Settings, Browser Compatibility.
On Style View's menu, make sure to select Style, Set Style. Now you are ready to change to Page View.
In Page View
- Place the logo in the top MasterBorder, pushed all the way to the top and left.
- Place the Hotspots graphic next to the logo. Use the arrow keys to nudge to the top of the page and up next to the logo. Watch for the red ! icons that tell you objects are overlapped.
- Nudge the banner to the top of the MasterBorder, and up next to the hotspot graphic. Again, watch for the red ! icons that tell you objects are overlapped.
- Push the nav bar object all the way over to the left of the page.
- In the MasterBorder properties, set the margins like this: left margin 135, top margin 146, right margin 0, bottom whatever you want to fit other objects into.
- In the Layout Properties, set width to 468.
- On the Menu, choose Object, Size Layout to Objects.
If you want to share your site style with other Fusion designers:
- Export your file to a template.
- Zip up the nft file along with the folders and contents of the Styles and Assets. (Skip this step if you have Fusion 7.)
Your Fusion-using friends may now base a new site on your template, and get the benefit of all your hard work with a few mouse clicks. If your friends also have Fireworks, throw in the PNG file with all your buttons and other graphics so they can change the logo text, etc. and re-export the slices.
top of page
One more Fusion/Fireworks tip
When you publish with Fusion, it takes the plain graphics you created in Fireworks, and regenerates them with your banner and button text embedded in them. In all Fusion versions, this significantly "bloats" the size of the GIF files.
In this example, the raw button and banner files are 1k and 2k in size, respectively. Fusion's published graphics can be as much as 250% larger in file size, thus slowing page downloading times for your site users.
Fireworks has a batch processing tool that makes it quick and easy to fix this problem. Here's what to do:
- In Fusion, publish the site locally.
- Start Fireworks.
- On the menu, choose File, Batch Process.
- In the Batch dialog, navigate to your site /local publish/assets/images/autogen folder.
- Click the Add All button
- Click Next
- In the Batch Window, select Export, settings GIF Websnap 128.
- Click Next.
- Click Batch.
- Sit back and watch. Fireworks opens and re-exports your buttons and banners. The graphics are now almost back to their original tiny file sizes.
- FTP the site files from your hard drive to your server using WSFTP or another good FTP tool.
Never mind that Fireworks makes very nice looking buttons, banners, and other web graphics: You might find this batch processing tool almost worth the price of Fireworks all by itself.
top of page