In a previous article, I explained how FrontPage 98 users could use Image Composer's Button Wizard to help create eye catching buttons for their web pages. Whilst the Wizard is a great help, it does have one major limitation - there are only a limited number of button templates. Unfortunately, at the time of writing, Microsoft haven't released any additional buttons.
However, help is at hand! I have done some snooping around the Image Composer folder on my Hard Disk, and have found out that it is possible to add extra button templates. This could be useful if you don't want to use any of the presets supplied with the program. It could also be useful if (for example) you want to create a large number of buttons based on your company logo.
Before I go on, I would like to point out that the procedures outlined below should be regarded as a subject for advanced users. I will not accept any responsibility if you break your copy of Image Composer!
Step 1: Create the graphics to be used for the button template
As an example, I will create a button template in the shape of a television. The graphics can be created in any package, and should ideally be no larger than 150 pixels wide. It is best if the images are grey scale, or any textures or fills applied to the buttons won't show up very well.
Although you can use any program to create your images, there is a catch. As you are no doubt aware, there is an option in the Shape click-tab part of the Button Wizard that will allow you to change the direction of the light source lighting your button. There are eight preset directions, each increasing by 45º over the previous. I therefore made eight identical images, each lightsourced from a different direction (see below):
My images were created in the Imagine 3D rendering package. A 3D package is ideally suited for button creation due to the ease of changing the direction of lighting (but many high end vector graphics programs will also allow you to alter light sourcing).
Step 2: Make the thumbnail image for the Button Editor window
One of the images (it doesn't matter which one) should be imported into Image Composer. Use the Select Color Region magic wand (in the Cutout palette) to give the image a transparent background (in this instance, the area around the edge of the television). To do this, click on the regions of background color so that they change to the currently selected color, then click on the Erase button. Of course, if the program you create your images in supports transparency then you are a lot more lucky than I am!
Once the image has a transparent background, resize it to exactly 64 by 64 pixels (Image Composer has a tool to do this in the Arrange palette - make sure the Keep aspect ratio check box is unchecked). Save this image in the C:\Program Files\Microsoft Image Composer\Buttons\Shapes\ folder (or equivalent) using the File|Save Selection As command. The image should be saved as a true color TIFF (ensure keep transparency and compressed are both ticked) and the filename should be buttonname.tif - in my case as television.tif. From now on, this little image will act as the thumbnail of the button visible in the Button Editor window.
Step 3: Create the main images
For each of the eight main images you have created, you should save each of them using a similar procedure to that shown above. All should be saved as transparent TIFF files. There are a number of important differences this time:
For example, the television lit from below was saved as television_11_270.tif.
Step 4: Make a text file to describe the set of images
If you have ventured into the Image Composer\Buttons\Shapes\ folder, you will no doubt have seen that each button has a small text file associated with it. The file takes the form of buttonname.txt, in this case it will be television.txt. Now comes the tricky part: adding the content to the file. As far as I am aware, Microsoft have not revealed the exact format of these text files, so I have had to figure it out on my own.
The content of the television.txt file is shown below:
3,0,0,1 1,11,0,19,54,95,86 1,11,45,19,54,95,86 1,11,90,19,54,95,86 1,11,135,19,54,95,86 1,11,180,19,54,95,86 1,11,225,19,54,95,86 1,11,270,19,54,95,86 1,11,315,19,54,95,86
This series of numbers may seem meaningless, but they are vital in letting the Image Composer program know about the button template:
This box has the co-ordinates of 19,54 (top left) to 95,86 (bottom right). These are the two co-ordinates that are entered into the television.txt file as the last four digits of each line (except the top one, obviously).
Step 5: Test that button template!
Having got this far, the fun begins. In Image Composer, make a new button using any of the presets. When a button has been created, it is a good idea to cut 'n' paste it a few times so there are plenty of buttons to play with. Then, when you double click on a button to open the Button Editor window, your new template will have sneaked into it! (see below):
Don't forget that as with all the other buttons, it is possible to change the fill pattern, size and label. Below are some examples of images created with the new button template:
Notice how the button is resized depending on the size of the text label.
And that's it. All we need now is for some good designers to come up with some great new buttons for us to use on our sites...
Author: Brett Burridge
Date: 04/30/1998
More articles about FrontPage
More articles by Brett Burridge
Author Biography