Mise en garde: ce tutoriel a été réalisé à partir de mini vidéo en Flash. Il faut que votre navigateur supporte le flash et que le lecteur flash (ou plugin) soit installé. Si ce n'est pas le cas, merci de bien vouloir faire la mise à jour ou procéder à l'installation. Chaque cadre blanc ci-dessous représente une vidéo d'explication. Il vous faut cliquer sur le bouton "PLAY" du lecteur en dessous du cadre blanc pour débuter la lecture de la vidéo (il se peut qu'il vous faille patienter un petit peu fonction de votre vitesse de connexion avant que la première vidéo ne se charge dans le cache de votre ordinateur). A noter qu'il est préférable de regarder les vidéos dans l'ordre présenté.

Ce tutoriel a été écrit par un Novice pour des Novices. Il complète le tutoriel précédent "Créer vos propres boutons de menu".

Dans l'éditeur de menu de Studio, un certain nombre de boutons sont inclus, afin que vous puissiez les utiliser dans vos menus. Si vous n'êtes pas satisfait par cette collection de boutons, vous pouvez les améliorer, voire même en créer de nouveaux. Je vous propose au travers de ce tutoriel de créer des boutons du plus simple au plus compliqué en utilisant un logiciel de retouche d'image. Pour ce tutoriel, nous utiliserons Adobe Photoshop CS3.

Après avoir compris le principe , vous pourrez en créer à loisir ou modifier les existants.

Pour information, vous pouvez également lire le tutoriel de saby "Créer des zones de transparence dans une image avec Gimp" qui vous donnera les bases nécessaires à réaliser toutes ces opérations avec Gimp.

Etape 1 / Pour Débuter - Quels Fichiers

On va se servir de fichiers "boutons" existants pour savoir lesquels on peut utiliser avec Photoshop CS3

Etape 2 / Création de notre premier bouton simple (pas d'incrustation de miniature)

A partir d'un fichier ayant les bonnes caractéristiques , on va créer notre premier bouton simple en le "dessinant" (pas une oeuvre d'art, mais c'est un début)

Etape 3 / Sauvegarde puis visualisation avec Studio

Pour ne pas mélanger nos boutons avec les originaux, il vaut mieux créer un répertoire pour les sauver. On créera ce répertoire dans le répertoire "buttons" de Studio. Ce sera plus simple pour aller les chercher dans Studio. Détail de sauvegarde:

• Décochez votre profil ICC si vous voulez envoyer vos boutons à "quelqu'un ..."
  (qui sait.. on va peut être avoir une nouvelle rubrique "téléchargements de boutons" - si vous êtes intéressés, nous pouvons les mettre à disposition dans notre page Téléchargements)

Etape 4 / A RETENIR :

En regardant les caractéristiques des boutons existants , voici ce qu'il faut retenir:

• Couleur RVB 8 bits
• Contenu de l'arrière plan : Transparent
• On pourrait utiliser n'importe quel type de fichier avec un fond transparent MAIS comme Studio utilise des .tga ou .tif ... mieux vaut utiliser un de ces 2 types.

BONUS

Création d'un bouton (sans incrustation de miniature) à partir d'une image existante

BONUS BIS

Création d'un bouton (sans incrustation de miniature) à partir d'une image contenant du texte

Pour aller plus loin

Dans les boutons précédents, que j'appellerais boutons "pleins" , il n'est pas possible d'incruster de miniature. Dans ces deux exemples, nous allons voir comment procéder pour pouvoir le faire.

A cause de nombreux bugs pour la création de menus, il vaut mieux se servir d'un menu existant et de remplacer les éléments que l'on veut changer plutôt que de vouloir créer le sien à partir de "Fichier-Nouveau Menu". C'est un peu plus long car, par exemple, pour les boutons , il faut les redimensionner, mais cela fonctionne à merveille (pour preuve faite, ces 2 exemples à partir de "Fichier-Nouveau Menu" et vous n'aurez pas, entre autres, la transparence des boutons).

1. Notre premier bouton avec incrustation de miniature à partir d'une image existante.
   Ce tuto n'a pour but que d'expliquer comment faire.... c'est un exemple pour donner une méthode... il est vrai que le bouton par lui même est...... laid, très laid. Mais bon !

2. Bonus : création d'un bouton avec incrustation de miniature à partir de l'image d'arrière plan pour que le bouton fasse partie "du décor" . Là encore, j'ai pris des formes simples pour expliquer une méthode rapide et assez simple.

Alors à vos boutons !! Et n'hésitez pas à nous envoyer vos plus belles réalisations... Le partage, c'est aussi envoyer aux autres ce que nous avons nous même créé.

CaptainJo