home / articles / frontpage

Using the Image Composer button wizard

Hey! Want to create some cool web graphics but haven't enough time to fiddle around with graphics program? Then try using the new Button Wizard in Image Composer 1.5 (the version of Image Composer supplied with FrontPage 98). This Wizard is easy to use, and can be used to create the most useful type of web graphics - buttons. Some examples of buttons created with the Button Wizard are shown below:

First of all, you will need to load Image Composer. Once you have loaded Image Composer, you should use the magnification drop-down list on the toolbar to increase the magnification of the page from 50% to 100%. Alternatively, click on the Actual Size button as shown below:

This will enable you to see images in Image Composer at the same size as they will eventually appear on your web page.

From the Image Composer menu bar, select the option Insert|Button. This will display the first window of the Button Wizard. In this window you need to select a style for the button, so select one from the list. Don't worry if you can't see the exact style you are looking for - it is possible to alter all of the button settings later.

After you have chosen a style, click on the Next button to continue. In the next part of the Wizard, you need to specify the number of buttons to create (the default is one). Change this number if you want to make more than one button. After you have done this, click on the Next button to continue.

In the third part of the Wizard, you need to enter a text label for the button (the default is home). Don't worry about the specific font - this can be changed later. It is also possible to insert an image onto a button - if you do, make sure it is a small one! If you do want to include an image, make sure that you have ticked the Image check box and entered a filename for the image by clicking on the Browse button.

Clicking on the Next button will take you to the sizing part of the Wizard. Normally, the top radio button can be selected so that Image Composer automatically sizes the button to fit the text you would like to display on the button. Alternatively, if you have created several buttons with the Wizard, it is possible to ensure that they are all created at the same size. This will often make your web page look neater if you have several matching buttons.

Finally, clicking on the Next button takes you to the last part of the Wizard. Clicking on the Finish button will allow Image Composer to create your button for you. Note that it is possible to use the Back button at any stage during the Wizard to go back and change settings you aren't happy with.

After using the Button Wizard, the newly created button will be displayed. It is very likely that the button will need further work to make it look more attractive and suit your web page better. For example, the button below was created using the standard button style. As you can see, it looks very boring:

Fortunately, it is possible to alter any aspect of your button - to do this simply double-click on the button with the left mouse button. This will display the Button Editor window, which has a large number of options for changing the appearance of your button. The first part of this window - the Style click-tab, allows you to choose from a range of pre-defined styles. If you are happy with the shape of your button, then you might like to click on the Fill click-tab. This allows you to alter the fill pattern of your button. If you want the button to have a uniform fill colour, then double-click on the Fill Color and choose a new colour from the Color Picker window. Alternatively, change the setting in the Fill drop-down list to either Gradient or Texture to change the fill to either a gradient or texture, respectively. In particular, changing the texture can create some superb looking buttons. There are a number of other options to change:

• Clicking on the Label and Image click-tab will allow you to change the font and the label text for the button. If you change the text label, the button will be resized to allow the new text to fit on the button.

• The Shape click-tab is also extremely useful - it allows you to alter the shape of the button. Change the Category drop-down list to change the samples shown in the bottom part of the window. Click on one of these to change the shape of your button. Note that the window also has a Light direction option to change the direction of the highlights displayed on the button. Note that some of the shapes will be more appropriate for your web page than others - for example, only a dentist would want a toothpaste tube shape icon on their web page:

After using the Button Wizard, you can easily save your button by ensuring it is highlighted by clicking on it with the mouse once, then use the menu command File|Save For the Web. This function also allows you to save several images at once, provided they have been highlighted. Click on the Next button, and you will be asked if you want to save the image with (i.e. let the background show through) or without transparent (i.e. fill them with background colour) backgrounds. It is normally better to select the transparent option. After you have done this, click on the Next button to select the colour for the background. If your web page has a background colour that is something other than white, you will need to specify the actual colour. Alternatively, click on the second option if your web page has a background image (like the one you are reading now). After a summary of the save options, you will then be prompted for a filename to save the file as. Transparent images are normally saved in the GIF format.

Note: If you use FrontPage to edit your web pages, you can use the Windows Clipboard to copy the image from Image Composer to the FrontPage editor. To do this, select the image you have created in Image Composer, and use the command Edit|Copy from the menu bar. Switch to using FrontPage, then use the menu bar command Edit|Paste to load the image into your web page. Note that you will probably need to alter the transparency of the image after it has been loaded into FrontPage do this by using the transparency tool. Unfortunately you can only seem to paste images into FrontPage as JPEGs, and not the GIF format (which is better suited for buttons).

Handy hints:

• Once you have your buttons in Image Composer, it is possible to use the Clipboard to make copies of them. This is useful if you want to experiment with the various button styles on offer.

• Advanced users might like to create animated buttons. This is fairly straightforward provided you have a copy of Microsoft GIF Animator. A simple animated GIF can be made by making two identical buttons, then changing the text label colour. Both o f the buttons can then be pasted individually into GIF Animator to make the animated button. An example is shown below:

The creation of animated GIFs using this method may be covered in a future article if I receive sufficient email requests...

• Advanced users with plenty of time on their hands might like to use the button wizard with the FrontPage Themes Designer, and design some new Themes! A tutorial for the themes designer is available from The Complete Webmaster.

Author: Brett Burridge
Date: 04/02/1998

More articles about FrontPage
More articles by Brett Burridge
Author Biography