Tuto : Boutons Miniatures (ou Animés) personnalisés sans bord

1. La demande

Il arrive quelquefois qu'une image de fond de menu présente des zones qui pourraient très bien servir de boutons miniatures ou animés. Oui mais ... les boutons ont généralement une bordure ce qui ne colle pas avec l'image du fond.

Nous allons donc voir comment réaliser des boutons sans bordure.

Remarque : Ce qui est expliqué ici peut aussi servir à faire des boutons personnalisés avec une bordure ! (qui peut le plus, peut le moins)

2. Le principe

Sans bordure ! C'est quand même un peu vite dit. En fait, Studio a besoin d'une "limite" pour pouvoir inscrire la miniature ou l'animation à l'intérieur. Ce qu'il faut, c'est rendre cette frontière la plus discrète possible, soit parce qu'elle est très fine, soit parce qu'elle se confond avec l'image, (soit les deux !)

3. La méthode

Nous allons apprendre à :

a) Créer des boutons limités à un simple contour..
b) Enregistrer ces boutons dans un format utilisable dans Studio (format tga)
c) Utiliser ces boutons dans Studio

a. Préparer votre image de fond

Dans mon cas, l'image de fond représente des tonneaux de rhum. Je voudrais que les miniatures couvrent les couvercles des tonneaux.

La forme du bouton est très simple : il s'agit de cercles (ou plutôt d'ellipses).

La bordure sera de préférence dans des tons paille.

b. Préparer le bouton

J'utilise ici PSP8, mais tout logiciel pouvant manipuler les calques et les images tga convient.

Dans PSP, créez une nouvelle image de taille convenable, de préférence blanche, et dessinez la forme que vous voulez donner à votre bouton à l'aide d'un trait fin de la couleur choisie (ici un cercle gris-jaune).

Taille réelle : 200x200

Attention : Veillez bien à ce que le bord du bouton soit un trait continu et fermé.

c. Création des boutons

La méthode est exactement celle suivie dans les autres Tutos :

1. Rendre la partie blanche transparente :

• A l'aide de l'outil "Magic Wand" sélectionner les parties blanches intérieures et extérieures (cliquez sur les parties de l'image avec l'outil en maintenant "Shift" enfoncé)

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

Il ne reste que le bord!

• Sauver le mask dans la couche alpha : Layer => Load / Save Mask => Save Mask to Alpha channel

Confirmez par Save

• Enregistrez l'image en format "Truevison Targa (*.tga)"

4. Utilisation dans Studio

Dans Studio, il ne vous reste plus qu'à faire votre menu personnalisé en y plaçant les boutons au bon endroit et en ajustant leur taille.

Bouton en cours de positionnement et d'ajustement.

Même si à ce niveau le bord vous semble trop visible, ne vous inquiétez pas, lorsque la miniature sera à l'intérieur, on ne verra plus rien !

Continuez avec tous les boutons, ajoutez les emplacements pour les textes (liés aux boutons) etc... La routine quoi !

Et Voila !

Le menu terminé. Les bord sont imperceptibles!