Recréez le style d'Aero avec The GIMP !

Vous avez sans doute remarqué le fait que des designers de Windows Vista ont fait un très beau travail.

Ce tutoriel a pour rôle de vous apprendre à recréer Aero à votre guise.
Il est très facile de faire ceci avec Photoshop.
Mais ceux qui n'ont pas voulu télécharger ledit logiciel ou qui ne veulent pas l'acheter peuvent très bien s'en sortir avec GIMP.

Vous pourrez comme cela l'utiliser pour votre site, votre logiciel, ou pour ce que vous voulez.

Voilà, alors sortez GIMP et au travail !

Il fallait bien un chapitre d'introduction, alors je mets ci-dessous quels outils de GIMP nous allons nous servir :

• Sélection ;

• Masque rapide ;

• Dégradés ;

• Chemins ;

• Et c'est tout !

Ouais mais y'a pas grand-chose de plus sur ce logiciel...

Ce n’est pas faux. En fait, GIMP est un logiciel "bas niveau", c'est-à-dire qu'il ne dispose que d'outils basiques, mais quand on sait s'en servir, on peut faire plein de choses.

Pour presque tous les outils que nous allons utiliser (suivit de l'image

), il y a pas mal d'informations supplémentaires sur son utilisation dans la partie des notes (la dernière partie du tutoriel).
Pensez à y jeter un coup d'œil !

Voici sans plus attendre les opérations !

Oui bon... je ne sais pas trop comment ça s'appelle, alors j'ai mis ce titre-là.
Pour mieux voir ce dont il s'agit, voici un petit screenshot venant tout droit de mon bureau :

Le sélecteur de fenêtres sur Vista (ALT + TAB)

Et nous allons recréer ça :

Ce n'est pas bien compliqué : Il ne s'agit que d'un rectangle arrondi à fond translucide, un flou, une bordure bicolore, et une ombre floue et marquée.

Pourquoi une bordure bicolore ?

Je ne sais pas si vous avez déjà remarqué, mais sur la fenêtre active les bordures hautes et gauches sont blanches et bas et droites sont turquoise.

Le coin bas-gauche d'une fenêtre sous Vista

Eh bien pour les fenêtres translucides, c'est pareil.
Mais si vous regardez sur le screenshot que j'ai fait plus haut, il n'y a pas de bordure bleue.

Au moment de la capture d'écran, cette fenêtre n'était pas active.

Donc ne mettez cette bordure bicolore seulement si vous le voulez. Ce n'est en rien une obligation, vous pouvez très bien faire une bordure blanche.

Créez une image gimp (de la taille que vous voulez).
Vous pouvez mettre un fond transparent, ou une image de fond.

Si vous faites cette image pour votre site, il faudra appliquer le flou à l'image de fond (ou ne pas mettre de flou, au choix).
En effet si vous mettez un fond transparent à votre cadre, il ne pourra pas être flouté (ah vous aviez deviné ? :D )

Vous connaissez les guides ? Ils vous seront très utiles !

Vous devriez placer 4 guides qui délimiteront le cadre (sans l'ombre).
Vous pourrez ainsi retrouver facilement la sélection de base (pensez à activer le magnétisme des guides !).

Laissez un peu d'espace de chaque côté pour l'ombre !

Personnellement, j'ai laissé 40 pixels de chaque côté.

Le plan de travail

Pour que vous soyez à l'aise avec tout, je vous conseille d'afficher les fenêtres ancrables : calques - canaux - chemins - historique d'annulation
Vous pouvez les fusionner, tout ce que vous voulez, mais elles sont très utiles, et à mon avis, pas que pour ce tutoriel.

Pour obtenir un rectangle arrondi, il existe une option dans le menu de sélection rectangulaire. Pour cela prenez l'outil de... sélection rectangulaire !
Dans le menu de l'outil (juste en-dessous de la boîte à outils), cherchez un peu l'option "coins arrondis". Activez-la et prenez un rayon quelconque. Par défaut, c'est 5 pixels.
Chaque sélection rectangulaire que vous ferez aura ses coins arrondis avec le rayon donné. Celui des fenêtres de vista, c'est 6 ou 7px (Prenez celui que vous voulez).

Lorsque vous ne voudrez plus arrondir vos sélections, le mieux sera de décocher l'option coins arrondis, car vous conserverez le rayon.

Ci-contre l'outil de sélection rectangulaire, paramétrée correctement.

Il existe aussi un filtre nommé rectangle arrondi dans le menu sélection qui permet de transformer la sélection actuelle en rectangle arrondi. Elle peut s'avérer plus utile, comme plus restreinte car elle demande un rayon en % et beugge un peu pour les rayons autour de 100% (il fait apparaître des bourrelets)

Selon la taille de votre rectangle, la mesure du rayon en % sera différente.
Il faudra donc comparer avec les arrondis des vraies fenêtres de Vista et trouver le bon rayon (et une fois trouvé, il est conseillé de la noter quelque part).

Pour l'exemple de ce tutoriel (un rectangle de 220x120 px), le rayon approprié est 9% (enfin, moi j'ai pris 9%, après vous faites ce que vous voulez).
Rien ne vous interdit de prendre un rayon plus grand ou plus petit (ou ne pas arrondir le rectangle aussi).

Pour ce tutoriel j'ai choisi d'utiliser le filtre rectangle arrondi car le rayon en % est le même pour les réductions du rectangle de base. Si vous voulez utiliser l'option coins arrondis, il faudra alors, pour chaque réduction, partir de la sélection de base (arrondie) et la réduire avec le filtre approprié du menu sélection.

Voilà votre sélection principale, c'est celle dont nous allons nous servir le plus, celle-ci et une autre : identique, mais réduite de 1px.
Vous avez deux choix : soit transformer cette sélection en chemin pour la retrouver plus facilement, soit la retrouver tout seul à chaque fois.
Personnellement, je choisis la 2e option, car la première peut s'avérer parfois imprécise.
(Je vous rassure, la différence se voir à peine à l'œil nu :p )
Et puis retrouver cette sélection ne sera pas difficile grâce aux guides.

Allez, on attaque la bordure !

Si vous ne voulez qu'une bordure unie, ne vous occupez pas du calque "bordure bleue" dont je parle dans cette partie.

Donc d'abord, créez deux nouveaux calques : "bordure blanche" et "bordure bleue" (je me servirai de ces deux noms pour les distinguer par la suite).
Prenez la sélection arrondie principale, et remplissez-la de blanc (dans le calque "bordure blanche").
Dans le deuxième calque, remplissez cette même sélection de la couleur #2cd3fe.

Je vous conseille de cocher "remplir toute la sélection", et de masquer votre calque de fond (blanc, image, ou autre couleur).

Ensuite, placez le calque "bordure bleue" au-dessus de "bordure blanche".

Ensuite on veut que le bleu apparaisse en bas et à droite.
On va donc faire une sélection en diagonale.
Il faudra ensuite utiliser le masque rapide.

Hein ? Le masque rapide ? C'est quoi ça ?

Le masque rapide est un simple et bon moyen d'éditer la sélection comme on veut.

Cela permet de transformer la sélection en calque de niveaux de gris Vous pouvez ensuite "peindre" dans ce calque pour modifier la sélection. L'avantage c'est que ce calque peut être modifié tout comme un calque normal, on peut donc lui appliquer des filtres, des motifs, etc. Il suffit de désactiver le masque rapide ensuite pour transformer le calque en sélection.
Cela permet de plus les sélections translucides, en effet si le masque rapide contient du gris, la sélection obtenue avec ne sera pas totalement opaque !

Donc nous allons créer notre sélection en diagonale grâce au masque rapide.

Hé attends une minute, c'est quoi cette histoire de sélection translucide?

C'est une bonne question qui est difficile à aborder.
Vous le savez peut-être déjà, mais la sélection correspond à la partie de l'image qui sera affectée par tout ce que l'on fait avec GIMP.

Mais enfaite, la sélection dans GIMP, bien qu'elle apparaisse comme un contour en pointillés, est un calque en niveaux de gris.
Dans ce calque, tout ce qui est blanc fait partie de la sélection. Ce qui est noir en est exclus.

Cependant, les niveaux de gris ne se limitent pas qu'a deux couleurs : en effet ils incluent toutes les nuances de gris qu'il peut exister (254 en tout). Imaginez qu'un pixel de notre sélection soit gris moyen, il serait à la fois dans la sélection et en dehors.

Ben c'est un peu comme ça que cela fonctionne : les modifications apportés à un sélection grise ne seront pas opaques, elles seront translucides (d'où le nom de sélection translucide). C'est un peu comme quand on règle l'opacité d'un calque à 50%. On le voit moins, et on peut voir derrière les autres calques.
Plus la sélection sera claire, plus les modifications qui lui seront apportés à l'image seront opaques; à l'inverse, plus elle se rapproche du noir, moins elles se verront.

C'est là toute la force du masque rapide : éditer l'intensité des modifications faites à l'image ! Et croyez-moi c'est très très utile !

Donc j'en étais où déjà?
Ah oui, nous allons créer notre sélection en diagonale grâce au masque rapide.

Là, encore deux solutions :

• Soit on active directement le masque rapide et on applique un dégradé noir/blanc en essayant de bien viser,

• Soit on fait d'abord notre sélection diagonale, et on lui applique ensuite un flou avec le masque rapide.

Cela va sans dire que la deuxième solution est la meilleure.
Prenez donc l'outil sélection à main levée, et faites une diagonale comme cela :

Diagonale (zoom x2)
Ensuite, fermez la sélection par le haut :

La sélection, la vraie

Ensuite, activez le masque rapide, sélectionnez tout, et appliquez un flou gaussien (5px doivent suffire pour avoir un bon rendu, bien entendu, plus l'arrondi est grand, plus le rayon devrait être grand).

Ensuite, retirez le masque rapide pour voir votre belle sélection en pointillés...comme celle d'avant !

Super, j'ai une sélection qui n'a pas changé et je ne sais pas quoi en faire !

Bien sûr que si elle a changé, maintenant elle est floue!
Prenez le calque "bordure bleue", et enlevez la sélection (touche suppr)...
Et admirez !
Votre beau rectangle bleu et blanc.
Bon c'est toujours pas une belle bordure, mais bon on n'a plus grand-chose à faire pour l'avoir.

Fusionnez les deux calques de bordure.
Et ensuite reprenez la sélection du début : le rectangle

Ne sélectionnez pas votre rectangle arrondi ! Prenez le rectangle original (celui des guides).

Ensuite réduisez la sélection de 1 pixel (menu/sélection/réduire)
Et après, arrondissez ça. Utilisez le même rayon (dans mon cas 9%).

Pour ceux qui utilisent l'option coins arrondis, vous réduirez votre sélection déjà arrondie, la différence de rendu ne se verra pas à l'oeil nu.

Vous pouvez appuyer sur suppr.

Gardez la sélection, vous en aurez besoin juste après.

Vous voilà avec votre belle bordure bicolore !

Une belle bordure toute fraiche !

Cette partie va être très courte.
Il faut prendre la couleur que vous voulez pour le fond (prenez dans les tons bleus ça rend mieux, en effet si vous prenez du rouge la bordure bleue ressortira un peu trop :-° ...)
Personnellement, j'ai pris #93c0ce.
Prenez l'outil de remplissage et mettez l'opacité vers 40% (c'est la valeur que j'ai prise, vous pouvez en prendre une autre).
Ensuite, ben remplissez.

Vous pouvez créer un nouveau calque pour le fond.

Simple, toujours avec la même sélection que pour le fond translucide, sur le calque du fond (si vous en avez un), juste un petit flou gaussien.
Sur le screenshot du début, j'avais mis le flou à 6px. En réalité, il faut mettre plus, pour qu'il se voit. Mettre un flou de 10px me parait raisonnable.

Notre cadre commence à ressembler à quelque chose !

Pour avoir une belle ombre de contour, il en faudra deux.
Qui dit deux ombres dit... Deux calques !

Oui je sais c'est nul.

Bon deux calques : "ombre forte" et "ombre faible".
Placez "ombre forte" au-dessus de l'autre.
Ensuite il faut créer le chemin qui servira à "tracer" l'ombre.

Pour faire cela, rien de plus simple, sélectionnez votre rectangle de base (celui des guides dont je vous ai parlé au début), arrondissez-le (comme pour la bordure), et allez dans menu/sélection/vers chemin.
Et voilà, vous avez votre chemin !

bon ensuite le plus difficile c'est de ne pas faire une ombre trop marquée, mais assez pour qu'elle se voit.
L'ombre des cadres Vista est en fait composée de deux ombres : une qui accentue le contour blanc et bleu, et l'autre qui est plutôt faible et qui est là juste pour faire beau.

Prenez le calque "ombre forte", et prenez une couleur noire en couleur de premier plan.

Sélectionnez tout le calque (Ctrl + A) et tracez le chemin avec une épaisseur de 3px, ou 2.5px, au choix.

Tracer le chemin? Qu'est-ce que tu nous invente encore?

Ah oui j'ai oublier de vous expliquer... :-°
...