[ GIMP] Bouton Metalique

MrYann · 01 Nov 2006 9:26

Cette création est mise à disposition sous un contrat [url=http://creativecommons.org/licenses/by-nc-sa/2.0/fr/[/url]Creative Commons[/url].

Dans ce tutorial, nous allons tenter de creer entièrement, sans image de base, un bouton de type métallique.
Si c'est la premier fois que vous faites ce tuto, ou si vous etes un novice dans the GIMP, ne modifiez que quand on vous le propose.

Voici le resultat de mon tutorial:

Le tutorial se déroulera en 4 étapes, qui sont les suivantes:

Création du fond métalique
Création de la surface du bouton
Le texte
Les derniers effets

1-Création du fond métallique

Lancez The GIMP, puis dans la fenetre principale, puis faites : fichier > nouveau (ou ctrl + N)
Vous obtenez la fenetre suivante, remplissez la de la même manière que ce qui suit :

Le logiciel va vous ouvrir cette fenêtre:

Maintenant, dans la fenetre principale, vous allez changer la couleur d'arrière plan (AP), (celle qui est blanche)...

... par un gris plutot clair, a peu près comme celui qui suit:

Pour mieux effectuer le dégrader qui va suivre, changer le zoom en bas à gauche de 100% par 50% pour obtenir la fenetre suivante :

Puis allez dans l'outils de dégradé (L), en verifiant bien que le type de dégradé soit linéaire, et que la case a chocer "inverser" soit bien décocher. Ensuite, effetcuez votre dégradé du haut vers le bas, pour obtenir ce qui suit :

Nous ballons maintenant utiliser l'outil de retournement (Shift + F), en cochant vertical. (On aurais pu eviter cette étape en inversant le dégradé dans l'étape precedente).

Puis cliquez sur l'image afin d'operer votre dégradé. Vous obtenez un resultat proche du suivant:

Maintenant, nous allons donner l'effet de metal. Pour cela, faites :
Filtres > Bruit > Dispersion RVB
Comme dans la capture qui suit, ne modifiez rien sinon que de décocher la case "Indépendant RVB".

Le resultat est le suivant :

Ca resemble plus à la télé de la grand-mère qu'a du métal. Donc faites :
Filtres > Flou > Flou cinétique
Dotn vous remplissez la fenetre comme ce qui suit : (Pensez a cocher la case "Aperçu" qui ne l'est pas par défaut):

Le resultat est le suivant:

Nous avons désormais notre métal.

2-Création de la surface du bouton

Maintenant, il faut creer notre bouton en lui même, qui devra avoir l'air enfoncer dans le métal. Pour cela, prenez l'outils de Selection Eliptique (E), puis faites une selection circulaire sur votre image, tout en maintenant la touche SHIFT appuyée, pour garder un cercle, et non un ovale....

Ensuite, centrez votre selection en maintenant la touche ALT appuyée, tout en déplacant la selection avec le bouton Gauche de la Souris. Tachez d'obtenir un resultat similaire au suivant :

Ensuitte, allez dans :
Selection > Adoucir
Puis laissez les paramètre par défault :

Une fois cet adoucissement fait, faites votre dégradé, sans changer les couleurs de premier plan (PP) ou d'arrière plan (AP) que nous avons modifiés tout a l'heure. Le dégradé doit etre fait en partant du haut gauche du cercle de selection, pour arriver au bas droit de la selection, comme dans la capture qui suit :

Maintenant, allez dans :
Selection > Reduire la selection
Puis remplissez comme dans la capture qui suit :

Nous obtenons une nouvelle selection, plus petite, dans la quelle nous allons refaire un dégradé, mais cette fois ci en cochant la case inverser. Faites le dégradé exactement dans le même sens que le precedent (En partant du haut gauche du cercle de selection, pour arriver au bas droit de la selection)

Vous devriez obtenir le resultat suivant :

Nous avons maintenant notre bouton enfoncé dans le métal, il nous reste le texte...

3-Le texte

Pour le texte, je ne voyus conseille pas d'écrire de la litérature en masse, le support n'est pas appropriée, même un mot pourrai gacher le bouton. J'ai utilisé la polices livrée avec windows "Webdings" qui permet de faire d'amusants logos avec tout les signes divers qu'elle propose. J'ai choisis la lettre P majuscule, voyez vous même celles qui peuvent vous plaire...
Prenez donc l'outil texte (T) et taper votre texte dans la fenetre qui vien d'apparaitre...

N'hesitez pas sur la taille de la police, il faut que cela soit visible, mais ne dépassez pas le bouton, et ne soyez pas non plus juste a coté du bord. Pour la police Webdings, une taille autour de 200 devrai suffir...
Mettez aussi la couleur du texte en blanc, même si cela n'aura pas une importance immense pour la suite...

Vous pouvez utiliser l'outil de deplacement (M) pour recentrer le calque de texte .
Pour les débutants, veillez à ne déplacer le calque du texte que quand vous êtes sur les zones de textes, sinon, c'est le calque de fond qui sera déplacé...

Une fois centré, vous devriez obtenir un resultat similaire au suivant :

Si la taille de caractère ne vous convien pas, vous pouvez toujours reprendre l'outil de texte (T) et jouer avec les valeurs pour obtenir un resultat convenable.
Pour les debutants, notez qu'il faut veiller a etre sur le calque de texte, et que vous ne pourrez effectuer de modification sur le calque que si vous cliquez sur la zone blanche qui correspond a la lettre (ici, la loupe) sinon, Gimp va creer un nouveau calque de texte...

Voci l'état de vos calques, vous devriez etre selectionné sur le calque L ou du moins celui qui porte le nom du texte que vous avez saisi:

Pour les opérations suivantes, veillez a bien selectionner le calque d'Arrière-plan.
Notez que vous pouvez a tous moment le renomer en faisant un clique droit dessus et en éditant les attributs...

Puis faites :
Filtres > Cartes > Reppoussage d'après une carte
Vous devrierz obtenir une fenettre similaire a la suivante. Remplissez la exactement comme celle qui suit (cochez inverser le relief et changez la valeur de la profondeur par 4):

Nous obtenons ce qui suit, le resultat n'est pratiquement pas visible :

Dans la fenetre des calques, cliquez sur le petit oeil a coté du calque de texte, ce qui le rendra invisible :

Le resultat est similaire au suivant :

4-Les derniers effets

Pour un meilleur effet, je vous conseille de remettre le calque du texte en visible et de descendre comme ce qui suit la valeur de l'opacité, mais cela depend du webdings que vous avez choisis :

Dernière étape, optionelle, allez dans :
Script-Fu > Decors > Ajouter une bordure
Et remplisez la fenêtre comme ce qui suit.

Pour finir, enregistrez l'image :
Fichier > enregistrer l'image
Je vous conseille le png, quie est un excellent format web (voir liens). Si vous voulez conserver l'état de vos calques, pour pouvoir ensuite les retoucher sans avoir a tous recommencer, enregistrez sous le format xcf, qui est le format des fichiers de The GIMP.

Voila, le tutorial est terminé, j'espère que vous avez reussi, donc, Bon GIMP !!!!