We have all had this problem when making a web site – You are creating a mock-up of your web site, and you have a distinct number of menus. You want to create buttons that are the same width across as the header and that are spread out evenly across your site. Fireworks has a couple of menus that help with this.

In the example below, I am creating a menu where I have the number of buttons that I want, I just need to figure out a consistent width for all of them to span the full width of the header evenly. Firework has a tool in the align panel just for this.

Select all of your buttons (without the text, because it may become distorted), and go up to the Modify menu, and select Group. The shortcut for this is Command (control on the PC) +G. This makes all of the buttons one item. Then, select the header, since it is the item that you want the buttons to match its width to, and hold down shift and click on the menu, and with both selected, go to the Align panel and select Match Width. Make sure that the that the alignment is set to relative to object and not relative to canvas. This makes sure that the menus are stretched evenly to match the other object that you have selected.

If you want a set of items to match the width of your site, and your canvas is set to the width of your site, then you simply change the sitting to Relative to Canvas. This makes it so simple, and takes the guess work out of sizing your menus! Then, simply take the text and drag it so that it snaps to the center of each menu button.

I am a professional graphic designer and web designer with years of experience. I am also an illustrator and Wordpress theme creator and author of this design blog. I write tutorials and build custom websites. I do what I love, and I love what I do! You can:

Follow Me on Twitter,
Join Me on Facebook, &
Or Follow James George on Google+

Wow! There are 1335+ articles, tutorials & freebies here. Wanna have some fun? Try this: