Nous avons déjà fait paraître plusieurs tutoriels qui concernent la création de boutons de menus personnalisés.

• Déclic-Vidéo avait présenté le tutoriel "Créer vos propres boutons de menu"
• CaptainJo avait réalisé le tutoriel audio "Créer ses propres boutons de menu"
• TIWA vous avait proposé le tutoriel "Les boutons personnalisés de TIWA"

Aujourd'hui TIWA récidive. Il vous propose la création de minis boutons sans bord...

Etape 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)

Etape 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 !).

Etape 3 : La méthode

Nous allons apprendre à :

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

1. 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.

2. Préparer le bouton :

J'utilise ici Photo Shop Pro 8, mais tout logiciel pouvant manipuler les calques et les images tga convient. Pour information, vous pouvez également lire les tutoriels de saby "Créer des zones de transparence dans une image avec Gimp" ou "Gimp et les calques"qui vous donneront les bases nécessaires à réaliser toutes ces opérations avec Gimp qui est gratuit. 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). Attention : Veillez bien à ce que le bord du bouton soit un trait continu et fermé.

Taille réelle : 200x200

3. Création des boutons :

La méthode est exactement celle suivie dans les autres tutoriels, il faut rendre la partie blanche transparente.

A l'aide de l'outil "Magic Wand" sélectionner les parties blanches intérieures et extérieures (cliquer 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 Enregistrer l'image en format "Truevison Targa (*.tga)"

Confirmer par Save

Etape 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. 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 !

Bouton en cours de positionnement et d'ajustement.

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

Le menu terminé. Les bord sont imperceptibles!