We have already released several tutorials regarding the creation of customized menu buttons.

• Declic-Video had presented the tutorial "Make your own Menu-Buttons"
• TIWA vous avais proposé le tutoriel "Custom buttons by TIWA"

Today we have a TIWA re-run. It demonstrates the creation of thumbnail buttons without borders ...

Step 1 : Demand, need

Sometimes a background image for a menu will have areas that could very well serve as thumbnail or animated buttons. True, but ... then the buttons will interfere with the substance of the background.
We'll see how to make buttons without borders.

Note: What will be explained here can also be used to make custom buttons with a border! 

Step 2 : The principle

Without a border! This is not quite accurate. In fact, Studio needs a "limit" to include the thumbnail or animation on the inside. What is needed is to make the border as small as possible, either by making it very narrow, or having it overlap the image (or both!).

Step 3 : The method

We will learn to:

• Create buttons to conform to a simple contour;
• Save these buttons in a format usable in Studio (TGA);
• Use these buttons in Studio.

1. Prepare your background image :

In my case, the background image represents barrels of rum. I would like thumbnails to cover the barrels lids. The shape of the button is very simple: these are circles (or rather ellipses). The border should preferably be in shades to match the barrel edges.

2. Prepare the button :

I used Photo Shop Pro 8, but any software that can manipulate images and tga layers will work. For information, you can also read the tutorials of saby "Create transparent areas in still images with Gimp" or "Handling layers with Gimp" that will give you the foundation needed to perform all these operations with Gimp which is free. In PSP, create a new image of sufficient size, preferably white, and draw the shape you want to give your button with a thin line of color (here a gray-yellow circle). Caution: Make sure that the edge of the button is continuous and closed.

Actual Size : 200x200

3. Creating buttons :

The method is exactly that followed in other tutorials, we must make the white transparent.

With the "Magic Wand" tool, select the white interior and exterior (click on the parts of the image while holding down the "Shift" button).

Menu : Layers => New Mask Layer => Hide Selection

Only the edge!

Save the mask as an alpha channel: Layer => Load / Save Mask => Save Mask to Alpha channel Save the image in a  "Truevison Targa (*.tga)" format

Confirm by Save

Step 4 : Use in Studio

In Studio, make your custom menu by placing the buttons in the correct place and adjusting their size. Even if the border appears to be visible, don't worry, when the thumbnail is placed on the inside, you won't see anything!

Button current positioning and adjustment.

Continue with all the buttons, add the locations for the text (relative to the buttons) etc ... And look!

The menu is finished. The border is invisible!

{Thanks to Loosecannon for the fine tuning}