[Tutoriel] Réaliser un bouton

Voici un nouveau tutoriel pour The Gimp, où vous apprendrez à créer un bouton, utilisable sur votre site web par exemple.

Première étape, créez un nouveau document du double de la taille désirée (ici donc, 128×128) avec fond transparent.

Créez un nouveau calque nommé Fond Bouton, puis allez dans le menu Sélection >> Rectangle Arrondi et prenez un rayon de 100% :

Rectange Arrondi

Remplissez ensuite la sélection obtenue de noir, puis réduisez la sélection de deux pixels (Sélection >> Réduire).
Créez un nouveau calque nommé Centre Bouton puis sélectionnez le blanc comme couleur de Premier Plan, et l’outil de dégradé, en mode PP vers Transparent et Radial. Réalisez ensuite un dégradé du centre de la sélection vers le bord.

Vous devriez obtenir ceci :

Etape 1

Astuce : vous pouvez créer deux guides, l’un horizontal, l’autre vertical, tous les deux à 50% de la largeur de l’image avec le menu Image >> Guides >> Nouveau guide par pourcentage, afin de faciliter le positionnement du pointeur ;)

On va maintenant insérer le Motif Central du bouton. J’ai choisi d’intégrer un Symbole Mandalorien. Mais vous pouvez tout aussi bien utiliser une brosse ou un caractère d’une police d’écriture (vous trouverez de nombreuses polices sur le site Dafont.com).

Insérez donc le symbole par le moyen de votre choix dans un nouveau calque nommé Motif Bouton, et débrouillez-vous pour qu’il soit de couleur noire ;)
Dupliquez le calque, puis inversez les couleurs de la copie : Calque >> Couleurs >> Inverser.
Placez le calque (normalement blanc) sous l’original (normalement noir) et appliquez-lui un flou gaussien de 15 pixels environ.
Il ne vous reste plus qu’à changer le mode de ce calque (j’ai pour ma part choisi le mode Fusion de Grain), et si vous le souhaitez, à ajoutter une ombre portée à votre bouton : sélectionnez le calque Fond Bouton et appliquez le script Ombre Portée, en prenant soin de réduire les décalages en X et Y (menu Script-Fu >> Ombre >> Ombre Portée).

Et voici le résultat (presque) final :

Final

Comme vous le constatez il y a pas mal d’aliasing, donc nous alons réduire la taille de l’image par deux (environ). N’oubliez pas d’enregistrer votre image finale au format PNG ou GIF !

Articles sur le même sujet:

Vendredi 12 octobre 2007 Gimp

Laisser une réponse


Pages

Recherche

Archives

Liens

Meta