Nous avons déjà fait paraître plusieurs tutoriels qui concernent la création de boutons de menus personnalisés.
TIWA nous a laissé sa méthode. Elle est intéressante à plus d'un titre puisqu'elle n'a pas été reprise dans les tutoriaux plus récents.
Etape 1 : La demande
Studio ne permet que trois modes de mise en évidence des boutons de menus :
- Encadré par un rectangle;
- Recouvert par une couleur plus ou moins transparente;
- Souligné.
C'est quand même assez limité et on en a vite fait le tour.
Sur les DVD professionnels, on trouve généralement des "puces" qui reprennent des éléments du film. C'est ce que nous allons essayer de réaliser ici.
Etape 2 : Le principe
Evidemment, nous devons rester dans les possibilités de Studio ce qui nous crée des contraintes.
Le seul mode de mise en évidence de Studio qui peut nous servir est le mode où tout le bouton est recouvert d'une couleur. En effet c'est la seule mise en évidence qui permette d'utiliser une forme quelconque. Ceci n'est pas vraiment une limitation.
De plus, il faut que seul le bouton sélectionné soit visible (on va voir plus loin comment rendre les autres invisibles). Donc, les textes et images qui doivent rester visibles ne peuvent pas être nos boutons! En particulier, cette méthode ne peut s'appliquer qu'aux menus sans images miniatures.
Dernier point à résoudre : Comment rendre invisible les boutons non sélectionnés? Et bien, on va faire comme les caméléons, en faisant en sorte que l'image du bouton soit exactement superposée au fond. Ceci exclu donc les menus avec fond animé.
Bon trêve de considérations théoriques, on y va. Ça va devenir plus clair avec les travaux pratiques!
Accrochez vous, c'est un peu long, mais ce n'est pas compliqué!
Etape 3 : La méthode
Nous allons apprendre à :
- Découper des formes sur une image pour en faire des boutons;
- Enregistrer ces images pour avoir un contour quelconque (format tga utilisé par Studio);
- Utiliser ces images pour mettre des options de menu en évidence dans Studio.
- Préparer votre fond de menu :
| La première chose à faire est de préparer ce qui sera votre menu, mais sans y mettre les boutons (en sachant quand même où vous voulez les positionner). Voici par exemple mon menu. Les "puces" iront à droite de chaque texte. |
On a préparé les images et placé les textes. C'est tout pour le moment.
|
- Préparer la "puce" de menu :
Ici je vais utiliser des puces qui représentent le contour de l'île de la Martinique. Utilisez votre logiciel de dessin préféré pour cela.
Pour l'instant, peu importe la taille de l'image de la puce. Ce qui compte, c'est que l'extérieur de la puce soit d'une couleur unie (ici, le fond blanc) et assez contrastée avec le reste du dessin.
Une chose que je n'ai pas encore précisée : Les puces ne pourront être que d'une seule couleur (C'est la faute au standard DVD Forum). |
 |
- Préparer les boutons "caméléons" :
J'utilise ici Paint Shop Pro 8, mais tout logiciel pouvant manipuler les calques et les images tga convient.
- Lancez PSP8
- Ouvrez votre menu dans TitleDeko. Appuyez en même temps sur les touches "alt" et "Print Screen" pour copier la fenêtre active dans le presse papier.
- Basculez sur PSP et faites "ctrl"+"V" pour coller l'image. L'image de l'écran est copiée.
- Dans PSP, ouvrez l'image du bouton, et utilisez la fonction Image => Resize pour donner la bonne taille à votre puce. (Assurez vous bien que vos 2 images -- celle du menu et celle de la puce, soient bien à 100%). Je vous conseille de mettre l'image de la puce à l'endroit ou elle sera placée pour juger plus facilement de la taille.
| Voici ce que vous devez avoir : |
Ajustement des puces pour leur donner la bonne taille
|
| Grâce au "Magic Wand", sélectionnez la partie blanche de la puce et faites "Ctrl"+"C" pour la coller dans le presse papier. |
 |
| Sélectionnez l'image de votre menu et faites "Ctrl"+"E" (Paste as a new selection) pour coller le presse papier comme une nouvelle sélection. Déplacez le cadre blanc avec la souri pour le mettre à l'endroit où vous voulez avoir le bouton et cliquez pour le fixer à l'image à sa place. |
A l'endroit de la puce, on voit le fond du futur menu.
|
| Recommencez avec toutes les puces. Il n'est pas obligatoire qu'elles soient toutes identiques même si c'est mon cas ici! |
Les 3 images caméléon des boutons.
|
Bon, on est maintenant prêt à créer les images pour nos boutons.
- Création des boutons :
| Sélectionnez l'outil de sélection rectangulaire. |
 |
|
Pour chacune des puces:
- Sélectionnez un rectangle qui ne mord pas à l'extérieur du rectangle blanc;
- "Ctrl"+"C" pour copier la sélection;
- "Ctrl"+"V" pour coller la sélection dans une nouvelle image.
|
Chaque puce est maintenant une image à fond blanc "clonant" une partie du fond.
|
On se retrouve ainsi avec autant d'images que de (futurs) boutons. Il n'y a plus qu'à en faire des images transparentes (format 'tga' qui est le format utilisé par Studio).
Pour cela :
| Prenez le "Magic Wand" (Régler avec une tolérance qui ne soit pas trop faible s'il y a des points de couleur dans le blanc comme ici) et sélectionnez la partie blanche. |
 |
| Créer le masque : Sélectionner le menu "Layers => New mask layer => Hide selection" |
Créer un masque qui rend la sélection transparente.
|
Il n'y a plus que l'image de la puce.
Enregistrez ce masque dans la couche Alpha : Sélectionner le menu "Layers => Load/Save Mask => Save to Alpha Channel" |
Enregistrer le masque dans la couche Alpha de l'image.
|
Faire "Save" sur la boîte de dialogue. Puis faire un "Enregistrer sous" en choisissant le format "True Vision (tga)".
Conseil : donner des noms "parlant" du genre "puceFilm.tga", "puceBonus.tga" ...
Allez...le plus dur est fait, on continue ?
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.
Etape 4 : Utilisation dans Studio
Retournez dans Studio et ouvrez votre menu. Recherchez vos images. Placez chaque puce à sa place et éventuellement modifiez sa taille. Si c'est bien fait, elles doivent être complètement invisibles. On a tout fait pour cela non?
Conseil : Ne vous mettez pas tout de suite en mode menu sinon vous aurez du mal à positionner les puces |
Ici les trois puces sont placées et sélectionnées. Sans cela, on ne les verrait pas!
|
| Il n'y a plus qu'à en faire des boutons normaux de style "mise en évidence avec la forme du bouton". |
Et voilà !! Une fois sélectionnée, la puce apparaît.
|
De préférence, augmentez l'opacité de la couleur de mise en évidence (pourquoi pas 100%?) pour que la puce apparaisse franchement.