Vous êtes ici :   Accueil » Bouton dégradé
  
Tutos GuppY
Tuto WEB
The Gimp

 1013796 visiteurs

 5 visiteurs en ligne

DONNER UN EFFET DE RELIEF A UN BOUTON

Le but de ce tuto est de réaliser un bouton avec une bordure en relief.

La dénomination de bouton est en fait incorrecte... en ce qui concerne la réalisation d'une skin pour GuppY, cette image prendra place en haut d'une boîte latérale afin de recevoir le titre de celle-ci.

 
 

Le bouton fini :

uniform_noir.jpg
Il s'agit bien sûr d'un exemple, les dimensions doivent être modifiées en fonction des besoins.
La fenêtre des calques :
La description de celle-ci permet de comprendre assez facilement comment et de quoi est constitué cette image.
 
Attention une fenêtre de calques se lit de bas en haut  !!!
 
 Organisation des calques  Explications
fenetre_calques.jpg - 1 - Nous commencerons par créer un Arrière-plan blanc.

- 2- Nous couvrirons cet arrière plan de la même couleur que le fond de la skin (ici : gris).

- 3 - Nous réaliserons ensuite une forme rectangulaire arrondie de couleur noire.

- 4 - Après avoir réduit la sélection de 1px, afin de conserver une bordure noire, nous remplirons celle-ci par un dégradé gris.

- 5 - Nous réduirons ensuite une nouvelle fois  la sélection de 8 px et la remplirons  de noir

-6- Nous récupèrerons ensuite la sélection rectangulaire arrondie du départ (celle du calque 3) et nous y ajouterons une ombre portée

Restera pour finir à découper l'image afin de conserver le juste nécessaire à la réalisation de l'image.

La Démarche :

Créer une nouvelle image et mise en place des guides

Dans la "Boîte à outils", veiller à ce que la couleur de premier-plan soit noire et celle d'arrière-plan blanche.

ppnoir_apblanc.jpg

- Créer une nouvelle image Fichier>>Nouveau

- Dans la fenêtre "Créer une nouvelle image", régler la largeur à 200px et la hauteur à 100px.
Toujours dans cette même fenêtre, dérouler les "Options avancées" afin de régler la résolution (X et Y) à 72pixels/in puis veiller à être en "Couleur RVB" et l'option de remplissage de l'arrière plan avec la "Couleur d'arrière-plan"

- Placer 2 guides horizontaux : un à 20px du haut, l'autre à 54px.
- Placer 2 guides verticaux : un à 10px du côté gauche, l'autre à 185px.
 

si nécessaire un tuto pour placer les guides se trouve ici
 
position_guide.jpg
Voici le résultat.
 

Calque du fond

- créer une nouveau calque transparent, le nommer : "couleur fond" et le remplir avec l'outil de remplissageoutil_remplissage.jpg avec une couleur grise, dans cet exemple code : b4b4b4 (attention dans "The Gimp", ne pas mettre le symbole # avant le code)
 

Si nécessaire un tuto pour créer des calque se trouve ici

 
couleur_fond.jpg
Voici le résultat.

Créer une sélection rectangulaire arrondie:

- créer un nouveau calque et le nommer :"fond uni arrondi"

- Sélectionner l'outil "Sélection rectangulaireoutil_rectangle.jpg et tracer dans la fenêtre de travail un rectangle qui suit les guides.
- Pour arrondir les coins du rectangle : menu Sélection>>Rectangle arrondi et régler dans la fenêtre "Script-Fu : Rectangle arrondi", la valeur à 65%

rectangle_arrondi.jpg
Voici le résultat.

Remplir le fond du bouton par une couleur unie
- Sélectionner l'outil de remplissage outil_remplissage.jpg(couleur de premier-plan : noire code : 000000) et cliquer à l'intérieur de la sélection
fond_arrondi.jpg
Voici le résultat.

Créer une bordure
 
Pour réaliser cette bordure nous allons en fait réduire la sélection précédente de 1px sur le pourtour afin de conserver un liseré noir.

- créer un nouveau calque et le nommmer "dégradé"
- Réduire la sélection de 1px : menu Sélection>>Réduire...


fenetre_reduction.jpg
reduction1.jpg
Voici le résultat.

Réalisation du dégadé
- Sélectionner l'outil "dégradé"outil_degrade.jpget choisir comme couleur de premier plan et pour couleur d'arrière plan.

Traçage du dégradé
Positionner la souris en X=50 et Y=0, maintenir le bouton gauche enfoncé et tirer un trait oblique environ x=200 et y=80 .
.
tracage_degrade.jpg

Plusieurs essais seront peut-être nécessaires afin d'obtenir le résultat attendu.
 
degrade_gris.jpg
Voici le résultat.

Réaliser l'intérieur du bouton
 
- Créer un nouveau calque et le nommer : "couleur milieu"
- Réduire la sélection de 8px : menu Sélection>>Réduire... et régler cette valeur dans la fenêtre "Réduction de la sélection".

 
reduction8.jpg
Voici le résultat.
- Remplir la sélection de couleur noire avec l'outil de remplissage.
 
couleur_milieu.jpg
Voici le résultat.
Placer l'ombre portée
 
Cette ombre devra faire le contour du bouton, il nous faut donc récupérer la sélection de la forme arrondie noire du calque 3 (fond uni arrondi).

Pour cela :
- se placer sur le calque 3 de la boîte des calques, faire un clic droit et activer la commande "alpha vers sélection" (des traits pointillés doivent entourer cette forme arrondie noire).
- Ouvrir menu Filtre>>Ombre et lumière>>Ombre portée et régler la fenêtre "Script-Fu : Ombre portée", comme ci-dessous :
 
fenetre_ombre_portee.jpg

- Valider
ombre_portee.jpg
Voici le résultat.
 

Découper l'image :

- Se placer sur le calque tout en haut de la pile
- Effectuer une sélection rectangulaire tout autour de l'image (sans oublier l'ombre portée)
- Ouvrir le menu Image>>découper la sélection
 

si nécessaire un tuto expliquant la découpe d'une image se trouve ici

decoupe_selection.jpg
Voici le résultat.
 
- Enregistrer l'image au format .xcf afin de conserver l'original avec tous ses calques, il sera alors possible de réaliser des boutons avec d'autres couleurs sans à avoir  tout à recommencer.

- Enregistrer une nouvelle fois l'image au format  souhaité (jpg, png) afin de pouvoir l'insérer dans une skin.

Variantes :

En repartant du fichier au format .xcf, il est très facilement possible d'obtenir d'autres variantes de ce bouton.
Il suffit par exemple  de se placer sur le calque "couleur milieu" de récupérer la sélection (clic droit puis "alpha vers sélection") et de remplir cette sélection par une couleur de son choix.
 
uniform_bleu.jpg
uniform_vert.jpg
uniform_rouge.jpg

Astuces :

En désactivant l'Arrière-plan et le calque "fond", il est possible d'isoler le bouton
 


uniform_mauve.png
uniform_bleu_roi.png

Date de création : 28/05/2015 05:36
Catégorie : The Gimp - Pratique
Page lue 7435 fois
Précédent  
  Suivant

 
Vous êtes ici :   Accueil » Bouton dégradé

Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe
DFrHaA
Recopier le code :


  Nombre de membres 17 membres
Connectés :
( personne )
Snif !!!
Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.
DFrHaA
Recopier le code :
2 Abonnés

Conformément à la loi française Informatique et Liberté (article 34), vous disposez d'un droit d'accès, de modification, de rectification et de suppression des données vous concernant.

Sitemap