Retrouvez cet article dans : Linux Magazine Hors série 31
Qui ne sait pas aujourd'hui réaliser un bouton Aqua avec The Gimp ? Le Web grouille littéralement de tutoriels en tout genre et il existe même plusieurs Script-Fu permettant d'automatiser les manipulations. Poussons donc un peu plus loin la difficulté. Que se passe-t-il si je ne veux pas un bouton Aqua, mais tout un mur de boutons ? Réponse en image...
La difficulté ici réside dans le fait qu'il n’est pas possible de travailler un bouton après l'autre. Il faut raisonner globalement et trouver des techniques permettant d'appliquer le même effet à un ensemble d'objets. Voici un défi destiné à appréhender des techniques de retouches globales. Bienvenue dans la création graphique holistique. En piste !
1- Après avoir créé une image d'une dimension quelconque (ici 800x600) et avec un remplissage blanc, utilisez le filtre [Image], Filtres, Rendu, Motif, Grille avec les paramètres ci-contre.
 2- Appliquez ensuite directement un flou gaussien RLE de 15 pixels de rayon. Ceci nous permet d'adoucir la grille et d'arrondir les coins des cases blanches qui seront nos boutons Aqua. Nous partons sur une base carrée, mais il est parfaitement possible de procéder de même avec des boutons ronds.
3- Zoomez sur l'image, puis utilisez l'outil Seuil. Celui-ci peut se trouver dans votre boîte à outils (selon votre configuration), mais est également accessible depuis [Image], Outils, Outils de couleurs, Seuil.
4- En gardant un œil sur l'image, déplacez la poignée noire située au centre de la réglette. Cela fait varier le seuil et détermine, du même coup, le contour des boutons. Vous devez obtenir un résultat proche de celui présenté ici.
5- Utilisez ensuite l'outil de sélection par couleur ([MAJ]+[O]) sur l'un des carrés blancs. L'ensemble des carrés est sélectionné. Activez ensuite le masque rapide.
6- Le masque colore les espaces entre les carrés. Toujours avec l'outil de sélection par couleur, cliquez sur l'un de ces espaces (en rouge+noir donc). Vous obtenez une nouvelle sélection. Basculez sur l'outil de sélection rectangulaire (R), puis enfoncez [ALT] ([ALT]+[MAJ] si ça ne marche pas) pour cliquer et déplacer la sélection vers le haut. Remplissez de la couleur de premier plan (noir par défaut) avec [CTRL]+[virgule].
7- Répétez l'opération pour remplir petit à petit la majorité de la surface de chaque carré. Ceci fait, vous obtenez une zone elliptique (ou presque) sur chaque futur bouton.
 8- Désactivez le masque rapide pour obtenir la sélection correspondante. Immédiatement, créez un nouveau calque transparent et transformez la sélection en masque de calque avec [Calque], Ajouter un Masque de calque. Choisissez Sélection.
 9- Revenez sur le calque transparent et déplacez la sélection qui doit toujours être active avec [ALT]. Vous devez faire en sorte que la moitié de la sélection pour chaque carré recouvre le carré en dessous.
 10- Remplissez la sélection de blanc avec [CTRL]+[MAJ]+[point] (c'est un remplissage par couleur d'arrière-plan qui, par défaut, est le blanc). Rien n'est visible et pour cause. Le masque fait son travail et empêche la partie, qui n'est pas dans l'ancienne sélection, d'être visible. Annulez toute sélection avec [CTRL]+[MAJ]+[A] et appliquez à nouveau un flou gaussien. Rien n'est visible. Vous devez ajouter un calque avec un remplissage de couleur (ou de dégradé comme ici) entre la grille et le calque actuellement actif pour voir quelque chose.
 11- Puisque nous y sommes, ajoutez un masque de calque à ce nouvel élément. Peu importe le remplissage. Activez le calque avec la grille, copiez, puis activez le masque, collez. Ajoutez encore un calque, blanc, juste au-dessus du calque avec la grille. C'est notre fond. La grille peut d'ailleurs être masqué (petit œil dans la liste des calques).
12- Après la réflection, passons à la réfraction. La lumière arrive par le haut et provoque un reflet, mais une partie de la lumière entre dans les boutons qui la réfractent à la manière d'une loupe. Simuler cet effet est relativement simple. Récupérez la sélection depuis le masque du calque des reflets avec [Calque], Masque vers Sélection. Ajoutez ensuite un calque rempli de noir juste sous le calque des reflets. Déplacez ensuite la sélection avec [ALT] comme ci-contre (jouez sur l'opacité du calque pour vous repérer par rapport au bas des boutons).
13- Remplissez la sélection de blanc, puis annulez toute sélection. Enfin, appliquez un flou gaussien RLE de 15 pixels de rayon.
 14- Passez le calque en mode Superposer. Nous avons notre réfraction. Si l'intensité lumineuse ne vous paraît pas suffisante, vous pouvez dupliquer ce calque. L'effet en sera augmenté d'autant.
15- Nous allons renforcer l'effet de bord sur les boutons. Puisque la lumière est concentrée du fait de la réfraction, il est normal que les boutons présentent une bordure plus sombre. Ajoutez un nouveau calque, rempli de noir, juste sous le calque de réfraction. Récupérez ensuite la sélection depuis le masque du calque des boutons (celui avec la couleur).
 16- Utilisez [Image], Sélection, réduire et diminuez la sélection de deux ou trois pixels. Coupez ensuite la sélection avec [CTRL]+[X].
17- Appliquez un flou gaussien RLE de 10 pixels de rayon, puis ajoutez un masque de calque quelconque. Enfin, copiez/collez le masque du calque des boutons (celui avec le fond en couleur) dans le nouveau. Passez éventuellement le calque en mode Superposer.
 18- Qui dit " lumière, réflection et réfraction " dit, forcément, " ombre ". Nous pourrions ajouter une simple ombre noire, comme pour n'importe quel objet. Cependant, comme les boutons sont censés être transparents ou, du moins, translucides, l'ombre doit être colorée. Pour obtenir un tel effet, nous devons utiliser une copie du calque contenant la couleur que nous placerons juste sous l'original. Remplissez ensuite son masque de blanc (opacité totale), puis récupérez la sélection depuis le masque du calque d'origine.
19- Déplacez ensuite la sélection (touche [ALT]) vers le bas. Inversez la sélection puis, après vous être assuré que c'est bien le masque et non le calque qui est actif, remplissez de noir.
 20- Annulez toute sélection et appliquez un flou gaussien RLE de 10 pixels sur le masque. Nous obtenons notre effet d'ombre. Afin de s'assurer qu'il n'entrera pas en interaction avec le fond des boutons dans le cadre de manipulations à venir, récupérez à nouveau la sélection depuis le masque du calque précédent. Activez ensuite le masque d'ombre et remplissez la sélection de noir. Vous pourrez ainsi, si nécessaire, avoir une ombre de couleur différente de celle du bouton.
21- Nous avons beaucoup joué avec les calques et les masques. Voici l'empilement correct qui doit être utilisé.
22- Perfectionnons un peu. Ajoutez un calque transparent le plus en haut de la pile, puis récupérez la sélection depuis le masque du calque de couleur. Sélectionnez votre nouveau calque et faites [Image], Sélection, Réduire en spécifiant une réduction de 12 pixels. Remplissez la sélection de noir.
 23- Annulez la sélection, puis appliquez un flou gaussien RLE de 15 pixels. Cachez ce nouveau calque (icône œil dans la liste des calques), sélectionnez l'ensemble avec [CTRL]+[A], copiez avec [CTRL]+[C], activez le masque du calque de couleur et collez avec [CTRL]+[V] (vous pouvez également copier/coller directement un calque dans un masque depuis la liste des calques en vous passant de sélection, c'est une question d'habitude).
24- Nous venons d'ajouter la touche finale : un petit spot lumineux qui n'a rien de réaliste, mais qui semble toutefois améliorer le rendu. Notre travail est terminé.
25- Comme nous sommes des gens intelligents et réfléchis (si, si !), notre petite création est facilement modulable. En effet, nous avons deux calques qui déterminent la couleur des boutons. De ce fait, si nous remplissons ces deux calques d'une couleur unie, comme 477CB7 en notation HTML, nous obtenons un bel ensemble de bouton Aqua dans le plus pur style.
26- Rien ne nous empêche même d'utiliser un motif comme " Dried mud ", à condition, cependant, d'appliquer un gros flou au calque d'ombre.
 Retrouvez cet article dans : Linux Magazine Hors série 31