Gimp - Bouton arrondi
Commencez par créer un document de 400px*400px avec un fond blanc. Créez ensuite un nouveau calque que vous appellerez forme de base.
Nous allons maintenant utiliser des guides. Tout d'abord, assurez vous que ces guides soient bien affichés. Pour cela, rendez-vous dans « affichage / afficher les guides ». Si cette option est sélectionnée, ne touchez à rien.
Pour placer un guide sur le document, il vous suffit de cliquer sur la règle, de maintenir le bouton de votre souris enfoncé et de tirer vers la zone éditable. En tirant de la règle supérieure, vous créerez un guide horizontal. En tirant de la règle de gauche, vous créerez un guide vertical.
Lors de ce déplacement de guide, vous pouvez observer sa position :
Placez quatre guides. Deux guides horizontaux à 40 et à 360. Deux guides verticaux à 100 et à 200. Vous devriez obtenir le résultat suivant :
Remarque : si les règles ne sont pas affichées par défaut, activez celles-ci via « affichage / afficher les règles ».
Créez maintenant une sélection avec l'outil de sélection de région rectangulaire (raccourci : R). Créez cette sélection suivant les guides (assurez-vous que l'option "Affichage / Aligner sur les guides" soit bien activée).
Pour arrondir les coins de ce rectangle, nous allons utiliser l'outil qui se trouve dans « sélection / rectangle arrondi ». Choisissez une valeur de 95.
Vous obtenez une sélection qui sera la forme principale de notre bouton. Remplissez cette sélection avec la couleur de votre choix.
Nous allons maintenant mémoriser cette sélection en la transformant en chemin. Un chemin est un tracé sous forme de courbes de bézier (à la manière d'un outil de tracé vectoriel) qui permet de créer :
* une sélection
* son tracé avec l'outil de dessin de son choix (crayon, pinceau, gomme...)
* une ligne dont on peut paramétrer l'épaisseur, le trait...
C'est un outil très utile et très efficace autant pour la récupération d'une sélection que pour le tracé d'une courbe.
Mais revenons à notre mémorisation de sélection et rendons-nous dans l'onglet « Chemin » pour mémoriser notre sélection.
Cliquez sur le bouton « sélection vers chemin ». Vous voyez maintenant un nouveau chemin apparaître dans la fenêtre. Pour le récupérer par la suite, il vous suffira de cliquer deux fois sur celui-ci. Il vous sera possible ensuite de récupérer votre sélection en cliquant sur le bouton « chemin vers sélection ». Il est également possible de copier ce chemin, de le tracer ou de le jeter à la corbeille...
Faites une copie du premier chemin car nous allons le déplacer et sa nouvelle position va être enregistrée. Nous pourrons ainsi récupérer les sélections suivant les deux positions du chemin.
Normalement, votre sélection initiale est toujours présente dans le fenêtre d'édition. Si ce n'est pas le cas, récupérez-la grâce au chemin. Cliquez deux fois sur le chemin copié cliquez sur le bouton « chemin vers sélection ».
Maintenant, nous allons éditer cette sélection grâce au chemin. Dans les options de l'outil chemin, sélectionnez « deplacer ». Allez ensuite dans le fenêtre d'édition et faites descendre le chemin en le faisant glisser.
Revenez dans la fenêtre des outils. Passez le curseur (sans cliquer) sur le bouton « créer une sélection ». Le message suivant apparaît :
Il vous donne les touches sur lesquelles appuyer pour effectuer une édition de sélection via le chemin. Appuyez sur la touche Ctrl de votre clavier en cliquant sur « créer une sélection ».
Nous allons créer, de cette sélection un reflet sur le bouton. Pour cela, nous allons d'abord réduire cette sélection : « Sélection / Réduire ». Choisissez une réduction de 2px.
Remarque : notez la présence des options Agrandir et Bordure qui fonctionnent de la même façon que l'option Réduire... Je déconseille toutefois l'utilisation de l'option bordure qui transforme la sélection en bordure. Préférez l'utilisation d'un chemin que vous tracerez par la suite...
Créez un nouveau calque auquel vous donnez le nom « reflet ». Dans ce calque replissez la sélection avec un dégradé allant du blanc vers le transparent (du haut vers le bas).
Récupérez maintenant la sélection initiale via l'onglet des chemins. Sélectionnez le chemin que vous n'avez pas déplacé et transformez-le en sélection. Réduisez cette sélection de 16px. Créez un nouveau calque que vous appellerez « blanc intérieur » et dans ce calque, replissez la sélection de blanc.
Supprimez la sélection (Ctrl+Shift+a ou menu "Sélection / Aucune") et appliquez un flou gaussien de 40px.
Allez maintenant dans l'onglet des claques et appliquez au calque « blanc intérieur » le mode « superposer ». Ce mode va non seulement limité l'affichage du calque au contenu des calques inférieurs mais aussi adapter mon blanc à leur couleur.
Il nous reste à voir la création d'un chemin. Pour cela, allez dans la fenêtre des outils et cliquez sur le bouton « créer et modifier des chemins »
. Tout à l'heure, nous avons sélectionné dans les options du chemin le mode d'édition « Déplacer ». Pour pouvoir dessiner un chemin, il faut sélectionner l'option « Tracer ».
Nous allons créer une forme dont les bordures courbées traverseront le bouton. Allez dans le fenêtre d'édition et cliquez pour créer le premier point. Allez un peu plus haut sur la forme et cliquez sans relâcher le bouton de la souris. Maintenant, tirez. Votre droite se transforme en courbe. Continuer à tirer, ce que vous êtes en train de créer est la tangente de votre courbe. Vous remarquerez que plus la tangente est grande, plus la courbe se prononce. Lorsque vous créerez le point suivant, sa courbe dépendra de la même tangent.
Remarque : pour fermer une forme, cliquez sur le premier point en appuyant sur la touche du clavier Ctrl.
Créez une forme dans ce style :
Maintenant, créez à partir de ce chemin une sélection. Créez un nouveau calque que vous appellerez « couleur sup » et dans ce calque, remplissez la nouvelle sélection avec une nouvelle couleur. Appliquez à ce claque le mode « superposer » pour que la nouvelle forme ne dépasse pas celle de notre bouton.