La base du bouton Aqua est toujours une forme composée de deux demi-cercles et d'un rectangle. Ce n'est pas un hasard, en effet cette forme en "gellule" permet d'obtenir me meilleur rendu. Si l'objet final était plat, le résultat serait fade en raison de l'absence de réfraction qui donne tout le relief à la composition. Commençons donc par créer la forme de base. Pour cela, créez une nouvelle image transparente de 521 pixels de large sur 320 pixels de haut (dans la version originale de ce tutoriel je donnais une hauteur d'image de 286 pixels mais cela posait problème car l'ombre était coupée en bas de l'image. Les captures sont dont celle d'une image de 286 pixels de haut, ne vous inquiétez d'éventuelles différence avec ce que vous vous avez à l'écran). Ces dimensions choisies arbitrairement ne sont pas le fait du hasard, une composition graphique doit respecter un équilibre tant dans ses dimensions que dans ses couleurs.

Créez immédiatement un nouveau calque blanc que vous placerez en arrière plan. Ce sera notre fond d'image. Pour faciliter la création de la forme de base, nous allons placer des guides. Un guide est un repère placé à un endroit choisi par l'utilisateur permettant d'améliorer les manipulations de sélection. Un guide, une fois en place, attirera le curseur de le souris lorsque celui-ci s'en trouve suffisament proche. On peut ainsi positionner avec la plus grande précision les sélections sur l'image.

Pour placez vos guides, cliquez simplement sur la règles graduée de la fenêtre d'image puis déplacer le curseur sur l'image. Vous verrez apparaître un trait pointillé rouge. Utilisez les coordonnées en bas à gauche de la fenêtre pour placer le guide.

Placez des guides horizontalement aux coordonnées 40, 143 et 244 (un au milieu de l'image et un à 40 pixels de chaque bord). Les guides verticaux devront être placés aux coordonnées 40, 128, 385 et 472 (à 40 et 128 pixel de chaque bord). Activez le calque transparent et faites une première sélection rectangulaire dans la zone la plus au centre. A l'aide de l'outil de sélection circulaire, ajoutez (touche MAJ enfoncée) deux sélections en partant des coins supérieurs les plus à l'extérieur sur chaque coté. A ce stade vous devez obtenir l'image donnée en figure 1. La sélection correspond à la forme de base du bouton Aqua.

Nous allons remplir cette sélection avec une couleur. Celle-ci donnera la couleur finale du bouton. Choisissez une couleure riche et sombre. Dans les teintes bleu, la répartition RGB (Rouge/Vert/Bleu) de respectivement 72, 123 et 182 est parfaite (figure 2). Attention, il ne s'agit pas de la couleur dominante du bouton final mais d'une valeur intermédiaire très peu présente au terme de la procédure.

La prochaine étape consiste à donner un léger relief à la forme. Pour cela, plutôt que de manipuler directement le calque, nous allons utiliser un masque.

La sélection précédente doit normalement être toujours active, nous allons la réduire uniformément via le menu Selections-> Réduire. Dans la boîte de dialogue apparaîssant à l'écran, précisez une réduction de 75 pixels. Assurez-vous d'avoir le bon calque actif et utilisez le menu contextuel dans la fenêtre des calques (clique droit). Choisissez Ajouter un masque de calque puis, dans la boîte de dialogure, cochez Sélection et Inverser le masque. Ceci nous permet d'ajouter un masque de calque automatiquement d'après la sélection. Enfin, annulez la sélection et appliquez un flou gaussien RLE très élevé (115,0 pixels par exemple). Votre image doit ressembler à la figure 4.

La réfraction de la lumière perturbe la répartition des teintes sur et derrière un objet transparent ou translucide. Les rayon lumineux étant déviés de leur trajectoire, on obtient un contraste élevé entre les zones claires et les zone sombres. Nous allons simuler ce phénomène grâce à un nouveau calque.

Avant tout, sélectionnez la forme de base sur le calque en cours avec Alpha vers sélection du menu contextuel du calque en cours (clic droit). Créez ensuite un nouveau calque noir le plus en avant plan (attention, faire MAJ+clic pour obtenir la fenêtre de dialogue d'ajout de calque). Rapetissez la sélection comme précédement mais de seulement de 50 pixels, puis déplacez-la (Touche Alt enfoncée (Alt+Maj avec certains WM) à la lisière du guide du bas (la faisant dépasser que quelques pixels). Remplissez cette sélection de blanc (figure 5).

Annulez ensuite la sélection, puis appliquez un flou gaussien RLE de quelques 60,0 pixels. Pour l'heure, tout ceci ne ressemble pas à grand chose, voici la manipulation qui va tout changer : dans la fenêtre des calques, passez celui en cours en mode Superposer. Les couleurs du calque immédiatement inférieur vont subir une modifications. Les zones noires du calque assombrissent le calque inférieur alors que les zones claires... l'éclaircissent (figure 6).

Lorsqu'un objet est éclairé et que celui-ci est placé à une certaine distance d'un élément d'arrière plan, une ombre est projetée. C'est le cas dans notre composition, il nous faut donc créer cette ombre artificiellement. Cependant, comme nous avons a faire face à une réfraction de la lumière (à cause de la forme de l'objet), la zone intérieur de l'ombre est plus clair que sa périphérie. Ceci ne pose pas de problème puisque le calque en mode superposer influe sur les couleurs de tous les calque inférieurs.

Créez un nouveau calque transparent entre le fond blanc et le calque avec la forme de base. Utilisez Alpha vers sélection du menu contextuel du calque de base pour récupérer une sélection de la forme. Réduisez cette sélection d'une quinzaine de pixels, déplacez-la le plus en bas possible, puis coulez la couleur de base dans la sélection (figure 7). Inutile d'utiliser la «pipette», le sélecteur de couleur de The Gimp 2.0 conserve un historique des couleurs définie. Notre bleu s'y trouve encore.

Annulez la sélection et appliquez un flou de 60 pixels (figure 8). L'effet d'ombre est parfaitement rendu mais un problème subsiste. La forme floue que nous venons de créer à une influance sur les couleurs du bouton et nous obtenons un effet difficilement acceptable. Nous allons donc ajouter un masque de calque nous permettant de masquer la partie du calque courant correspondant à la forme de base. Pour cela, activé le calque avec la forme de base et utilisez Alpha vers sélection comme tout à l'heure. Actuvez, à nouveau, le calque d'ombre et choisissez Ajouter un masque de calque après avoir obtenu le menu contextuel (clic droit). Dans la boîte de dialogue de configuration du masque de calque cochez Sélection et Inverser le masque. Et voilà, le tour est joué (figure 9).

Il ne nous reste plus qu'un seul élément pour notre bouton : un reflet. En effet, puisque l'ombre et la réfraction nous indique que la lumière est projetée par le haut de l'image et que notre bouton est en verre, il nous faut ajouter cet élément qui apportera la dernière touche de réalisme.

Pour la création du relfet, l'élément capitale est la forme. Il faut que celle-ci soit douce et tout en rondeur. Commencons par ajouter un calque transparent le plus en avant plan possible. Récupérez tout d'abord la sélection de la forme de base comme nous venons de le faire tant de fois déjà. A l'aide de l'outil de sélection rectangulaire, nous allons supprimer une partie de la sélection (maintenez la touche CTRL enfoncée). Une fois la sélection tromquée, réduisez-la d'une vingtaines de pixels. Vous devez obtenir une sélection proche de la figure 10.

La sélection suivant le contour de la forme de base comporte une erreur : deux angles trop aigus. Nous devons donc arrondir/adoucir la sélection. Les manipulations qui vont suivrent s'appliquent à n'importe quelles formes comportant des angles et pourrait presque constituer un tutoriel à part entière.

Première étape, utilisez le menu Sélection-> Enregistrer dans un canal pour créer une nouvelle entrée dans l'onglet des canaux de la fenêtre des calques (ou ailleurs selon votre configuration de l'interface de The Gimp 2.0). Vous pouvez, à présent annuler la sélection, nous n'en avons plus besoin, bien au contraire, cela ne serait qu'une source de confusion. Les canaux permettent de manipuler des sélections comme des images. Nous pouvons par exemple les déformer ou leur appliquer un flou. C'est exactement ce que nous allons faire pour arrondir notre sélection. Le nouveau canal actif, appliquez un flou gaussien de 35 pixels. Si nous activons l'affichage du canal supplémentaire nous verrions la figure 11.

Utilisez le menu Calque-> Couleurs-> Niveaux, vous verrez apparaître un graphique indiquant la répartition des différentes teintes de gris dans le canal (figure 12) (cochez l'affichage Logarithmique si vous ne voyez rien). Trois curseurs sont présent sous le graphique, ils vous permettent de changer la répartition des gris dans l'image en cours. Si les trois curseurs sont placés sur la même position, il n'y plus de niveaux de gris mais uniquement du blanc et du noir, bref, une forme nette. La taille de cette forme est déterminée par l'emplacement commun des trois curseurs sur la règlette. Jouez sur les réglages jusqu'à obtenir une forme qui vous convienne (figure 13).

Sur la fenêtre des canaux, masquez le nouveau canal puis utilisez le bouton en bas pour transformer le canal en sélection. Ajoutez un cinquième calque le plus avant possible et à l'aide de l'outil de remplissage par dégradé, remplissez la sélection avec un dégradé du noir (en bas) vers le blanc (en haut). Annulez la sélection et passez le calque en mode Ecran. Notre bouton Aqua est terminé (figure 14) !

En jouant sur les différents éléments graphiques de l'image, vous pourrez obtenir des effets différents et créer l'illusion du matière autre que le verre. Un bon exemple est le fait d'appliquer un flou au calque supérieur (relfet) afin de donnée un aspect plus terne ou plus dépolis au bouton. Comme le montrent les différentes illustrations à la fin de cettte page, tous les délires sont permis.