Tout d'abord, créez une image d'une taille importante (512 par 512 pixels par exemple). Ceci vous permettra ensuite de redimensionner le ou les boutons que vous aurez créer pour les adapter facilement à n'importe quelle situation. Choisissez une image transparente lors de la création, ce qui vous permettra d'adapter le fond de la même manière que la taille du bouton.

Afin de faciliter les manipulations qui vont suivre, placez des guides au centre de l'image mais également à une distance égale par rapport à chaque bord de l'image. Enfin, ajoutez un fond blanc afin de travailler avec un plus grand confort visuel (figure 1). Prévoyez une marge siffusament importante entre les guides et le bord de l'images, vous pourrez toujours tronquer cette bordure une fois le travail terminé.

Créez un nouveau calque transparent. Avec l'outil de sélection circulaire, sélectionnez la zone située entre les guides de bordure puis remplissez cette sélection avec une couleur de votre choix. Cet exercice est prévus pour être facilement modifiable en changeant uniquement ce calque (et donc la couleur de remplissage de la sélection) (figure 2).

C'est maintenant que tout ce complique (mais tout est relatif). Créez un nouveau calque transparent puis déplacez-y votre sélection en maintenant la touche Alt enfoncée. Notez que certains gestionnaires de fenêtre (sur systèmes UNIX) peuvent poser problèmes ici. En effet, Enlightenment, par exemple, utilise ce "key-modifier" de la même manière que The Gimp mais pour déplacer les fenêtres. Si vous rencontrez ce problème, la méthode la plus simple est de modifier le "key-modifier" dans la configuration du gestionnaire de fenêtre (avec enlightenment, modifier votre fichier ~/.enlightenement/keybindings.cfg). Déplacez donc cette sélection vers le bas jusqu'à atteindre le bord de l'image. A présent, nous allons supprimer une partie de la sélection, celle qui se trouve sur le cercle de couleur. C'est ici la touche Ctrl qu'il faut utiliser avec l'outil de sélection circulaire. Attention, en utilisant Ctrl le premier clic de souris définit le centre de la sélection. Etendez la sélection jusqu'aux guides de bordure.

Vous devez obtenir une sélection en croissant le lune placée en bas du cercle. Utilisez le menu Sélection-> Rapetisser pour réduire la taille de la sélection de 10 pixels. Enfin, remontez la sélection sur le cercle comme sur la figure 3 puis remplissez la sélection de blanc avec l'outil adéquate.

Annulez la sélection avec Sélection-> Aucune et appliquez un flou gaussien (Filtres-> Flou-> Flou gaussien (RLE)) d'une trentaine de pixels. Enfin, dernière manipulation pour ce calque, changez le mode en Superposer dans la fenêtre des calques et canaux (figure 4).

Créez un nouveau calque, toujours transparent et appliquez exactement les même manipulations concernant les sélections. Une fois la sélection en croissant obtenue et placée dans la partie supérieure du cercle, utilisez Sélection-> Enregistrer dans un canal. Cliquez ensuite sur l'onglet Canaux de la fenêtre des Claques et Canaux pour prendre le contrôle du nouveau canal. Affichez ce dernier en cliquant sur l'oeil. L'image devrait devenir grisée, ceci est parfaitement normal. Annulez la sélection si celle-ci est toujours active puis appliquez un flou avec le même filtre et les même valeurs que précédement.

Utilisez ensuite Image-> Couleurs-> Niveaux pour modifier la répartition des couleurs. Jouez avec les réglages jusqu'à obtenir une forme nette et de la taille qui vous convient. Vous devriez obtenir un résultat approchant la figure 5. Enfin, au bas de la fenêtre des claques et canaux, vous trouverez un bouton représentant une sélection en pointillés. Celui-ci permet de transformer votre canal en sélection. Masqué le canal en cours et utilisez ce bouton puis, enfin, revenez sur les calque et votre image.

Une nouvelle sélection arrondie est présente. Nous venons d'utiliser une technique très courant consistant à utiliser un canal comme support temporaire pour modifier la forme d'une sélection. Cette technique vous permettra une fois que vous la maîtriserez d'arrondir et d'adoucir n'importe quel sélection.

Revenons à nos moutons en remplissant la sélection avec un dégradé du bas (noir) vers le haut (blanc) puis passer le calque en mode Ecran (figure 6). Nous en avons finit avec ce calque.

Notre bouton commence à ressembler à quelque chose mais cela manque de relief. Créez un nouveau calque et sélectionnez le cercle dans son ensemble à l'aide des guides. Utilisez Sélection-> Vers chemin pour transformer la sélection en courbes de Bézier. Dans la fenêtre des calques et canaux, cliquez sur l'onglet Chemins, une entrée nommée selection_to_path doit être présente. En bas de cette fenêtre, un bouton permet de tracer le chemin (la courbe) à l'aide d'un pinceau. Choisissez dans la fenêtre des pinceaux (double clic que le pinceau en cours) le Circle 19x19, c'est-à-dire le plus gros.

Assurez-vous que la couleur en cours soit bien le noir puis utilisez le fameux bouton (tooltip = chemin du coup de pinceau). Le résultat est donné en figure 7.

Appliquez un flou gaussien très important, re-sélectionnez la zone circulaire de base, inversez la sélection (Sélection-> Inverser), puis supprimer avec Ctrl (figure 8). Le bouton est terminé.

Dans le cas d'un thème ou de boutons purement décoratifs, nous nous arrêterions là mais dans la plupart des cas, le bouton comporte une mention ou un symbole.

Il est relativement facile d'ajouter une mention à notre bouton. Cependant, pour bien faire, il est nécessaire de prendre en compte un point important : Le bouton est translucide, ce qui implique que si quelque chose est placé à sa surface, une ombre est portée.

Commençons par ajouter la mention. Si vous utilisez l'option Texte Dynamique, vous n'aurez pas besoins de créer un calque supplémentaire. Celui-ci sera automatiquement créé. Inversement avec l'outil texte classique, qui est moins souple à l'usage car il ne permet aucune modification du texte par la suite, vous devrez ajouter un calque transparent suplémentaire avant d'utiliser l'outil.

Préférez donc l'outil Texte Dynamique, en particulier pour une décoration de page Web, car vous aurez sans doute plusieurs boutons semblable à créer. Ajoutez votre texte, choisissez la police et la taille qui vous convient et validez. Glissez ensuite le texte au centre du bouton (figure 9). Dupliquez ensuite le calque et activez le calque de texte du dessou.

Décalez légèrement le texte par rapport à l'original. Utilisez ensuite le menu Calques-> Mettre aux dimensions de l'image et appliquez un flou gaussien. Enfin, réglez la transparence dans la fenêtre des calques et canaux pour obtenir un effet réaliste pour l'ombre (figure 10).

Et voilà, nous en avons finit. Cette composition vous servira de base pour tous vos boutons. La seule chose qui vous restera à faire sera de créer plusieurs calques transparents contenant la forme circulaire de base remplie d'une couleur différente (figure 11).

Figure 12