Midilibre.fr
Tous les blogs | Alerter le modérateur| Envoyer à un ami | Créer un Blog


21/10/2008

[gimp] - Tutorial pour faire un boutton glossy

prev_butt.jpgVous voulez faire un peu de pub pour votre site, et fournir des jolis boutons ?
Heureusement La Linuxerie pense à vous, je vais vous expliquer comment créer un bouton en moins de quelques clic.

Le tutoriel va se passer en 2 parties, la première consistera à créer la trame qui se collera par dessus le bouton (en l'occurence un trait diagonal) et la deuxième sera le bouton en lui même.

Créez tout d'abord une image de 5 pixels par 5 pixels, avec un fond transparent, sélectionnez l'outil crayon avec la plus petit taille, et tracer une diagonale en noir (faites un clic dans le coin inférieur gauche et maintené la touche en SHIFT avant d'aller cliquez dans le coin supérieur droit). Vous avez une belle diagonale noir sur un fond transparent (n'hésitez pas à beaucoup zoomer pour voir ou vous placer vos points):

button1.jpg

Un fois cela fait, sélectionnez votre oeuvre (CTRL+A) et copier la (CTRL+C).

Nous allons maintenant créer le bouton, nous allons le faire d'une taille de 200*20 pixels, créez donc une image de cette taille en fond transparent. Ajoutez un claque (toujours transparents) et utilisez le pot de peinture (MAJ+B) et dans le menu outil cliquez sur Remplissage avec le motif (normalement il est sur "presse papier") cela signifie que vous allez remplir le calque avec une répétition de ce qui est dans le presse papier (en l'occurence notre diagonal) : cliquez n'importe ou dans le calque. Passez le calque en lumière douce. Vous devriez avoir quelque chose comme ceci :

button2.jpg

Nous avons fait le plus dur, reste à remplir l'arrière plan d'un jolie dégradé (touche L) de nombreux choix vous sont proposé par défaut. Une fois cela fait créez un nouveau calque au dessus des deux autres, nous allons maintenant placer le texte. Ecrivez ce que vous voulez, moi j'ai écrit "La Linuxerie"... allez savoir pourquoi. J'ai pris du blanc pour que cela ressorte bien. Mais pour avoir plus d'impact, il nous faut entourer le texte d'une couleur plus sombre. Faites un clic droit sur le calque avec le texte, et cliquez sur alpha vers sélection, votre texte va s'entourer. Nous allons agrandir cela en faisant : Sélection -> Agrandir ... j'ai pris 1 pixel. Nous avons donc maintenant une selection d'un pixel plus grand autour de notre texte. Créez un nouveau calque (toujours transparent) et remplissez le de la couleur souhaitez pour le tour du texte. Une fois cela fait passez ce calque en dessous du texte. Ayant pris du noir, j'ai réduit un peu l'opacité. Cela commence a prendre forme :

button3.jpg

Reste à peaufiner, nous allons rajouter un effet "glossy" par dessus le bouton, pour cela rajoutez un calque au dessus de tout les autres, et sélectionnez l'outil de sélection Elliptique (touche E) et tracer une demie ellipse(en partant au dessus de l'image) dans la partie supérieure, remplissez ce calque de blanc,  et réglez l'opacité à 20%. Dernier raffinement, créez un calque juste au dessus de votre dégradé et prenez la brosse "Sparks" tracez un trait en diagonal selon votre humeur... avec cela nous finalisons notre bouton, mais vous pouvez rajouter votre logo, un icone.... A vous de voir. Voici diverses création pour mon blog, juste en changeant le dégradé.
Voila, voila, une note à double emploi, ditacticielle et auto-promotionelle...

3.png

2.png

1.png