Souscrire à la mise à jour des articles par email - Tous les tutos - Recherche - Tutoriaux par Catégorie / Auteur / Mois
| |
 |
Par Le Papy - Dernière mise à jour le dimanche 25 octobre 2009
1614 Visites ::
0 Commentaires ::  (Nombre de votes: 7)
Catégorie: Tutos Studio 1-15 / Menus - Tutos récents
Publié le mercredi 11 mars 2009
Créé le mardi 9 décembre 2008 08:22 |
 |
Nous avons déjà fait paraître plusieurs tutoriels qui concernent la création de boutons de menus personnalisés.
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.
- 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. |
 |
- 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
|
- 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! |
|
|
|
|
| Partager/sauvegarder cet article |
|
|