Retrouvez cet article dans : Linux Magazine HS 22
NIVEAU : AVANCE
Contrairement au précédent tutoriel, celui-ci présent un bouton très travaillé. Les effets de lumière, de transparence et de métal sont parmi les plus "tape à l'oeil" mais demandent beaucoups de manipulations et de précision. La preuve en image.
1. L'ensemble de ce tutoriel repose quasiement sur la précision du placement des éléments sur les calques. Pour obtenir cette précision tant dans les proportions que pour les alignements, nous utiliserons abusivement les guides. Leur placement est donc très important. L'image de base, comme pour la plupart des articles de ce hors série est un carré de 512 pixels de coté. La capture ci-contre montre les positions verticales des guides. Les valeurs horizontal sont identiques à la différence des deux guides manquants.
2. Commencons par la bordure du bouton. Procédez à une sélection circulaire s'inscrivant dans les guides les plus à l'extérieur. Définissez ensuite une couleur de premier plan correrpondant à un gris 50% (TSV : 0,0,50) et remplissez la sélection de cette couleur sur un calque transparent créé à cet effet. Sélectionnez ensuite une zone circulaire s'inscrivant dans les guides les plus au centre pour les quatres cotés et coupez la sélection. Nous obtenons la base de notre bordure.
3. Créez un nouveau calque transparent et activez le masque rapide. Procédez à une sélection elliptique entre le guide B et F verticalement et l'équivalent à B horizontalement. Supprimez la sélection et procédez de même entre D et H.
4. Désactivez le masque rapide et remplissez la sélection obtenue de blanc. Annulez enfin la sélection et appliquez un flou gaussien de quelques 50 pixels de rayon.
5. Eliminez l'exédent central en faisant une sélection de la partie intérieur de la bordure et en la supprimant. On remarquera un léger effet parasite à l'endroit de la suppression. Ceci provient du flou important qui vient d'être appliqué mais ce n'est pas un problème, la suite des manipulations masquera ce défaut.
6. Ajoutez un calque au dessus de ceux déjà existant et faites une sélection elliptique entre les guides C et G verticalement et l'équivalent B et H horizontalement. Remplissez de blanc.
7. Encore une fois, annulez la sélection et appliquez un flou gaussien, cette fois moitier moindre (25 pixels).
8. Sélectionnez l'ensemble de l'image puis utilisez l'outil de déformation par rotation. Dans la fenêtre des paramètres, spécifiez une rotation de 45°. Appliquez la transformation et ancrez la sélection flottante en cliquant sur l'icône correspondante dans la liste des calques. Comme précédement, supprimez une sélection circulaire de l'intérieur du bouton.
9. Le détail est important dans cette création très travaillée. Pour cette raison nous allons encore ajouter d'autres effets. Créez un nouveau calque transparent entre les deux claques précédents (effet en huit et effet tourné à 45°). Procédez à une sélection circulaire de l'ensemble du bouton puis réduisez cette sélection de 4 pixels. Remplissez de noir, annulez la sélection et appliquez un flou gaussien de 30 pixels de rayon. Déplacez ensuite le calque dans son ensemble de 4 pixels vers la gauche et le haut.
10. Sur le même calque, sélectionnez la zone interne du bouton, agrandissez la sélection de 8 pixels et remplissez cette sélection de noir. Comme précédement, annulez la sélection et appliquez à nouveau un flou gaussien de 30 pixels. Oui, nous appliquons le flou deux fois de suite sur une partie du calque. Pour en terminer avec ce dernier, récupérer la sélection depuis le canal alpha sur le calque à l'anneau gris, inversez la sélection et supprimez-là sur le calque que nous venons de travailler. Notez que nous aurions parfaitement pu utiliser un masque de calque ici mais cela ne représente pas vraiment d'intérêt puisque nous ne comptons pas reprendre cet élément. Cela alourdirait inutilement le fichier et l'occupation mémoire.
11. Nous en avons presque fini avec la bordure, nous y reviendrons ensuite pour homogénéiser le tout. Définissez une couleur de prermier plan complètement saturée (100 %) et avec une valeur avoisinant les 70%, la teinte n'a pas d'importance. Si, au final, la couleur ne convient pas, nous pourrons toujours la changer en fin de réalisation. Ajoutez à présent un calque juste sur le fond blanc (sous tous les calques de la bordure) remplissez avec la couleur de premier plan.
12. Revenez au noir pour la couleur de premier plan et ajoutez un calque noir immédiatement au dessus celui que nous venons d'ajouter. Procédez ensuite à une sélection circulaire du centre du bouton, réduisez de 64 pixels et remplissez de blanc.
13. Annulez la sélection et appliquez au calque un flou gaussien très important de quelques 200 pixels de rayon. Passez ensuite le calque en mode "lumière dure" et règlez son opacité sur 50%. Nous venons d'apporter la première brique de ce qui donnera du relief au centre du bouton.
14. Apportons maintenant un soupçon de réfraction. Faites une sélection elliptique entre les guides D et G et l'équivalent au guide C horizontalement (le bord de la zone centrale). Reduisez la sélection de 32 pixels et déplacez-là lègèrement vers le bas de manière à ce qu'elle affleure la bordure du bouton. remplissez de blanc.
15. Encore une fois, annulez la sélection et appliquez un flou gaussien, cette fois de 50 pixels environs. Enfin, passer le calque en mode "lumière douce".
16. Nous approchons de la fin. Créez un nouveau calque transparent au dessus du précédent puis activez la fonction de masque rapide. Faites ensuite une sélection de la zone centrale du bouton, réduisez de 8 pixels et supprimer le contenu. Faites une autre sélection entre les guides C et G et, horizontalement de la bordure de l'extérieur du bouton. Réduisez la sélection de 32 pixels et remplissez de la couleur d'avant plan (noir). Nous obtenons deux croissants.
17. Désactivez le masque rapide, remplissez la sélection de blanc, annulez la sélection et appliquez un léger flou gaussien (15 ou 20 pixels). Sélectionnez ensuite l'ensemble de l'image et utilisez l'outil de transformation par rotation pour tourner le contenu de la sélection de -45° (notez la rotation négative). Passez ce calque en mode "Eclaircir seulement" ou "Ecran" et règlez son opacité sur 80%.
18. Créez un nouveau calque transparent et faites une sélection elliptique en partant verticalement du guide F et horizontalement du centre de la bordure (équivalent au guide B sur l'autre axe). Etendez cette sélection jusqu'au haut de l'image.
19. Pour que cette effet prenne sa position tout seul comme un grand, réduisez la sélection de 96 pixels (distance du bord de l'image jusqu'à la limite de la zone centrale du bouton). Définissez le blanc comme couleur de premier plan et utilisez l'outil de dégradé vers transparent du haut de la sélection vers le bas. Appliquez enfin un flou gaussien très léger (5 pixels) pour adoucir légèrement la bordure de ce reflet.
20. Voici le dernier élément graphique à ajouter. Insérez un calque au dessus du précédent et sélectionnez l'intérieur du bouton. Réduisez ensuite la sélection de 4 pixels, inversez la sélection et remplissez de noir. Annulez la sélection et appliquez, encore une fois, un flou gaussien de 15 pixels de rayon. Enfin, passez ce calque en mode "Superposer".
21. Notre conposition est riche en calque. La capture ci-contre montre l'organisation général de ces derniers au cas où vous auriez perdu le fil. Nettoyons l'image en sélectionnant la zone interne du bouton et en ajoutant un masque de calque d'après celle-ci pour plusieurs éléments : le fond de couleur, l'effet de relief et la bordure interne. Ce dernier calque ne nécessite pas forcément un masque dans l'état. Le noir du mode "Superposer", par définition, n'agit pas sur le fond blanc. Cependant comme le fond peut changer mieux vaut prévoir en conséquence.
22. Pour gagner de la mémoire et simplifier les manipulations à venir, nous pouvons fusionner une partie des calques. Les quatres qui composent la bordure, par exemple ne présentent pas d'intéret individuelement. Ceci fait, nous pouvons jouer avec les courbes ou le contraste pour améliorer l'effet métalique. Nous pouvons également ajouter une ombre en ajoutant un dernier calque au dessus du fond avec une forme noire floue.
23. Ajouter un calque de couleur en mode "Couleur" en tout premier plan, avec un masque adéquate permettra de teinter légèrement le métal. Le coeur du bouton pourra être facilement décliné en différentes couleurs.
24. Pour une utilisation dans une page Web, nous pouvons décliner le bouton en version allumée ou éteinte. C'est un jeu d'enfant puisqu'il suffit de désactiver le calque de couleur.
25. Le choix de la couleur de base est également un point qu'il est possible d'utiliser. Avec une couleur vive on donnera l'impression de luminosité. Pour peu que l'on ajoute un calque de la même couleur et un masque de calque permettant de colorer uniquement la face interne de la bordure, nous obtenons quelque chose de très lumineux.
