the Gimp - créer un bouton web

Créer un bouton

Pour créer un bouton destiné à la création web, il faut avant tout se familiariser avec la notion de calques.

Un calque dans le domaine du montage graphique est une couche qui est à l"origine transparente et qui facilite la gestion et la manipulation de la zone de travail (qui est lui-même l'espace sur lequel vous étalez vos prouesse graphique) , www.jobook.site40.net

Assez bavardé! qu'est ce que tout cela signifie concrètement....

-->

 

Obtenir un bel effet est souvent le fruit d'un travail complexe. Cependant ce n'est pas une vérité absolue. Il est parfois possible de créer des graphismes "tape à l'oeil" simplement.

1. Comme le laisse entendre le titre du présent article, la composition se basera sur l'une des plus puissantes focntionnalités de The Gimp : Les dégradés. The Gimp est livré, de base, avec un grand nombre de dégradés mais la fonctionnalité la plus intéressante consiste à modifier ces derniers ou encore en créer de nouveaux. 

2. Ajouter un dégradé est très simple puisqu'il suffit d'utiliser le bouton prévu à cet effet situé au bas de la liste des dégradés. Immédiatement l'éditeur affiche un dégradé simple du noir (gauche) vers le blanc (droite). Celui-ci est constituté d'un seul segment ou, autrement dit, d'une seule transition d'une couleur vers une autre.

3. Nous avons besoin davantage de segments. Cliquez avec le bouton droit de la souris n'importe où dans le dégradé et sélectionnez "Couper le segment uniformément". Réglez sur 4 segments et cliquez sur "Eclater". 4. Notre dégradé, initialement constitué d'un seul segment est maintenant composé de 4 segments que je nommerai A, B, C et D. Remarquez que le dégradé en lui même reste inchangé, les couleurs de départ et de fin de chaque segment ont été adaptés en conséquence. Chaque segment est symbolisé par deux petits triangles noirs (des poignées). Le triangle blanc permet de changer la "vitesse" de transition d'une couleur à l'autre. Toutes ces poignées sont mobiles.

5. Nous allons changer ces couleurs. Modifier les couleurs d'un segment est très simple. Il suffit de sélectionner le segment concerné en cliquant sur la partie inférieure de ce dernier (là où se trouve les poignées). Le segment sélectionné apparaît en gris foncé. Là un clic droit dans le dégradé fait apparaître un menu où les entrées "Couleur de l'extémité Gauche" et "Couleur de l'extrémité Droite" permettent de changer les couleurs qui nous intéressent.

6. Nous composons notre dégradé comme suit, de gauche à droite et pour les segments de A à D : Blanc vers gris 50%, gris 50% vers noir, noir vers blanc et enfin, blanc vers... blanc. Le dernier segment n'est pas un dégradé mais une couleur uni afin obtenir une importante zone blanche. Vous pouvez déplacer les poignées comme bon vous semble pour influer sur les dégradés. Pour revenir automatiquement à des segments identiques et des dégradés linéaire, vous n'avez qu'à sélectionner tout les segments (touche [MAJ] et clic) et choisir "Redistribuer les poignées dans la sélection".

Ajouter une légende

7. A présent, entrons dans le vif du sujet en créant une nouvelle image rectangulaire (1000 pixels par 500 par exemple) et placez des guides nous permettant de dessiner la forme du bouton en chrome. Un guide horizontal au centre de l'image et deux autres repsectivement à 150 pixels de chaque bords de l'image. Nous plaçons également deux guides verticaux à 200 pixels du bord de l'image à droit et à gauche. 8. Faites une sélection de la zone centrale, choissisez votre dégradé fraîchement créé et utilisez l'outil de remplissage par dégradé. Attention, utilisez les guides pour placer le dégradé de bas en haut de la sélection. Choisissez l'un des bord de la sélection et utilisez l'outil en vous aidant des intersections de guides présent à cet endroit. Ceci est absolument nécessaire pour que le dégradé soit parfaitement horizontal.

 

9. Nous arrivons à une partie technique du tutoriel. Faites une sélection circulaire en partant de l'intersection du guide central avec le guide de droite. Utilisez l'outil de sélection elliptique, cliquez sur l'intersection puis, sans bouger et en maintenant enfoncé le bouton de la souris appuyez sur [MAJ] et [CTRL]. Etendez la sélection jusqu'au guide immédiatement inférieur. Choisissez ensuite l'outil de sélection rectangulaire, appuyez sur la touche [CTRL], cliquez à gauche de la sélection actuelle et sur le guide central puis étendez cette sélection de manière à couper la moitier de la sélection active (le cercle). La touche [CTRL] permet de soustraire une sélection à une autre déjà existante. Nous obtenons une sélection en demi-cercle. 10. Nous allons remplir cette sélection avec notre dégradé. Cependant, nous devons utiliser d'autres règlage pour l'outil de remplissage afin de donner un effet de relief à l'ensemble. Double-cliquez sur l'outil de remplissage par dégradé pour faire appraître ses options. Là, assurez-vous que le dégradé soit bien le bon et choisissez une forme radiale et cochez la case "Inverser". Pour le remplissage, partez du haut de la sélection et allez vers le bas en vous servant, encore une fois, des intersections de guides qui se trouve à ces emplacements. 11. Procédez exactement aux mêmes manipulations de l'autre coté de l'image. Vous obtenez un résultat similaire à l'image ci-contre, une forme de... petit canoé indien. 12. Créez un nouveau calque transparent puis cliquez sur le bouton dans le coin en bas à gauche de l'image. Vous activez ainsi la fonction de masque rapide vous permettant, en quelque sorte, de dessiner vos sélections. Sélectionnez tout d'abord le rectangle central du bouton et supprimez la sélection. Utilisez ensuite l'outil de sélection elliptique avec les touches [MAJ] et [CTRL] comme précédement pour sélectionner et supprimer les "bouts". 13. Désactivez la fonction de masque rapide. Vous obtenez une sélection. Nous allons conserver celle-ci afin de l'utiliser par la suite sans avoir à repasser par l'étape précédente. Utilisez le menu Sélection/Enregistrer dans un canal. Un nouvel élément est apparu dans la liste des canaux, correspondant à votre sélection que vous pourrez aisément récupérer à tous moments. Assurez-vous que le nouveau calque soit bien actif et utilisez Sélection/Réduire pour légèrement réduire la sélection (quelques 15 ou 20 pixels pour une image comme celle-ci). Inversez la sélection avec [CTRL]+[I] et remplissez de la couleur de premier plan (noir) avec [CTRL]+[,]. 14. Annulez la sélection en cours avec [CTRL]+[MAJ]+[A] ou en cliquant à l'extérieur puis utilisez Filtres/Flou/Flou gaussien. Spécifiez une valeur de rayon de 20 pixels pour le flou et appliquez le filtre. Enfin, réglez l'opacité du calque sur 30%. 15. Une grande partie du nouveau calque n'est pas utile, voire génant pour l'ensemble. Nous allons donc masquer toute la partie du calque qui ne se trouve pas dans le bouton. Pour cela, allez dans la liste des canaux, sélectionnez le canal avec la sélection enregistrée et cliquez sur la petite icône représentant un carré rose. Vous récupérez une sélection identique à celle enregistrée précédement. Revenez sur le calque grisatre et dans la liste des calques, cliquez avec le bouton droit avant de choisir "Ajouter un masque de calque". Dans la boîte de dialogue choisissez "Sélection" afin que la sélection active soit utilisée pour créer un masque ne laissant apparaître que l'intérieur de la sélection. 16. Notre bouton commence clairement à prendre forme. Ajoutez encore un calque transparent au dessus de tous les autres. Cette fois nous allons ajouter une ombre à l'ensemble. Habituellement, l'ombre se place sous les calques de l'objet parce que les calques en question dissimulent l'ombre. Il n'est pas toujours intéressant de procéder de cette façon, vous comprendrez pourquoi un peu plus loin. La sélection étant toujours active, enfoncez la touche [ALT], cliquez et déplacez-là vers le bas. Notez que c'est la sélection qui est déplacée et non son contenu. Remplissez de noir, annulez la sélection et appliquez le filtre de flou gaussien avec un rayon de 50 pixels. 17. Comme précédement, récupérez la sélection depuis le canal prévus à cet effet. Créez ensuite un masque pour le calque avec l'ombre. Attention, cette fois le masque est toujours créé d'après la sélection mais vous devez cocher "Inverser le masque" afin de masquer ce qui est contenu dans la sélection et de laisser paraître le reste du calque. 18. Les calques sont organisés comme donné ci-contre. Vous pouvez, au besoin, ajouter un masque sur la base du bouton (le calque avec les dégradés) et un calque blanc en arrière plan. Ceci vous permettra d'ajouter un fond autre que blanc. 19. Le résultat est déjà plus qu'intéressant, surtout avec le peu de calques et d'effets utilisés. Mais nous pouvons ajouter un peu de couleur. Pour cela, il suffit d'ajouter un calque entre l'ombre et le reste. Choisissez une couleur de premier plan relativement pastel (saturation faible et valeur élevée) puis créez le nouveau calque en spécifiant le remplissage par la couleur de premier plan. Passez ensuite le calque en question en mode "Couleur" et réglez son opacité sur quelques 30%. 20. Bien entendu, vous pouvez ajouter un fond texturé à l'ensemble et jouer sur les différents calques pour optimiser l'effet et adapter l'ensemble à votre site. 21. Une fois un résultat satisfaisant obtenu, vous pouvez fusionner quelques calques. Dès lors, à l'aide de simples copier/coller, vous pouvez adapter la taille du bouton comme il vous plaira. En effet, la partie centrale peut-être supprimée et dupliquée comme bon vous semble. Supprimer toute la partie central vous permettra d'obtenir une sphère qui fera une puce CSS très sympathique.

-->