Standard button

To create a button from any of the standard supplied patterns, such as this example:

1. Click Button style.

2. Select the required button style, in this case click Gouged.

3. Slide the Colour adjustment factor slider to the desired colour density, in this case 170.

4. Click the Font selection button and make the following settings:

• Font = MS Sans Serif
• Size = 14
• Font style = Bold
• Color = White
• Click OK.

4. Move the cursor to the Button text entry box, and type 'Demo'.

The button has now been created, and the image can be saved to file by clicking File, Save.

Clicking File, Save button details saves the components and settings of the button so that it can be reloaded at some other time for modification.

Standard button with image imposed

To create a button from any of the standard supplied patterns, with an image pasted to it like this sample:

1. Click Button style.

2. Select the required button style, in this case click Panel.

3. Click Picture, New picture and select the blend.bmp file that accompanies this tutorial.

4. When the dialog box appears asking if the image should be made transparent, click no.

3. Slide the Colour adjustment factor slider to the desired colour density, in this case 182.

4. Click the Font selection button and make the following settings:

• Font = MS Sans Serif
• Size = 12
• Font style = Bold
• Color = White
• Click OK.

4. Move the cursor to the Button text entry box, and type 'Home'.

The image can now be saved to file by clicking File, Save.

Additional note: The Picture, Remove picture option will redisplay the button image with the picture removed, whilst the Picture, Add picture will restore a removed picture back onto the button.

Non-standard button

To create a copy of a button which has been saved from another source, such as the one above:

1. Click File, Duplicate a button. A file dialog box appears. Select the image ( in this case MWTEllipse.bmp which accompanies the tutorial ).

2. Click Button style, Loaded image.

The button image is now available for you to manipulate just as a standard button as described above. In this case, the marble effect has been applied, and the text added.

You can duplicate other buttons in the same way, by simply cutting them from a web page ( note that some may be subject to copyright ! )

Creating texture masks

From version 3.2, a number of texture masks are supplied with the registered version of My Web Toolbox.

Whilst the option was NOT designed for this use, it is possible to create interesting colour versions of these textures for use in other applications by utilizing the BUTTON CREATION option.

The WOODGRAIN image is used as an example

1. Click File, Duplicate a button. From the Open File dialog box, select the required texture file, in this case woodgrain.bmp

2. Click Button style, Loaded image

3. Now it is simply a matter of selecting the desired colour to apply to the image, using the colour selection button, and colour adjustment slider. In this case the HTML colour Sienna has been applied to produce

4. When the desired colour is achieved, click File, Save, and save the coloured texture image.

The saved texture can now be used in other applications. Following are a few sample buttons created using different colour combinations of the WOODGRAIN texture which has been coloured in the manner described above and applied to the button image ( using the Picture menu option ) as described above.

Depending on the application, you may get varying effects from the same texture image. The above button images take the full texture bitmap, and reduce it to fit the button image. This can lead to compression or expansion of the texture depending on the application.

In the following button, the Meranti texture image was cut using the Chop Image option of this program to more closely match the final button size. This reduced the amount of compression or expansion of the texture image, giving a different grain effect to the Meranti button above.

What's more, you can use textures of your own creation in a similar fashion. The texture masks must be created in shades of grey for input to the application. Remember that the bottom left pixel colour will be treated as a transparent colour, so ensure it is a colour which does not appear elsewhere in the image eg: black.

---

Click here to download a zipped copy of this tutorial.

Registration

Ordering and registration information