Accueil  >  Graphisme  >  Habiller de rayures

Habiller de rayures

Sommaire

1. Les Préliminaires

Nous allons créer un bouton sur lequel nous allons intégrer des rayures.
Dans un premier temps, il faut lancer The Gimp et créer une nouvelle image en cliquant sur "Fichier > Nouveau ...".
Afin d'avoir un espace de travail confortable, vous pouvez choisir la taille d'image suivante : 400px * 200 px.
Et pour pouvoir par la suite intégrer votre bouton sur n'importe quel fond d'écran, il faut choisir un fond transparent dans les Options Avancées.

Création de l'image

2. Les Bases du Bouton

Nous allons dessiner le contour du bouton. Pour cela, il faut créer le nouveau calque "contour". Choisissez l'outil de sélection rectangulaire et tracez la forme du bouton désirée.
Afin d'adoucir le contour du bouton, vous pouvez faire des coins arrondis. Dans le menu "Sélection", choisissez l'option "Rectangle arrondi ..." et prenez un rayon de 25 %.
Grâce à l'outil de remplissage, remplissez la sélection de la couleur souhaitée pour le contour.
Dans le menu "Sélection", choisissez l'option "Réduire ..." et réduisez la sélection de 1px.

Nous allons maintenant nous occuper du remplissage du bouton. Il faut créer un nouveau calque "contenu", choisir l'outil de dégradé avec les couleurs souhaitées et tracer le dégradé verticalement. Choisissez "Aucune" dans le menu "Sélection".
Vous devriez obtenir quelque chose de ce style :

Bouton

3. Intégration des Rayures

Nous allons passer à la partie la plus intéressante pour ce tutoriel : l'intégration des rayures. Créez un nouveau calque appelé "rayures". Choisir l'outil de remplissage. Dans l'option des outils, sélectionnez "Remplissage avec le motif", et choisissez le motif "Stripes".

Stripes

Dans le menu "Sélection", choisir "Tout". Remplissez la sélection avec l'outil de remplissage.
Choisissez maintenant l'outil de rotation et faites pivoter la sélection de l'angle souhaité : - 30 degrés par exemple. Validez. Dans la fenêtre des calques, faites un clic droit sur le calque "Sélection flottante" et choisissez "Ancrer le calque".
Si jamais les rayures n'occupent pas tout le bouton après la rotation, n'hésitez pas à supprimer le calque "rayures" et recommencez cette étape 3 depuis le début en prenant un angle plus faible.
Vous devriez obtenir ceci :

Rayures

4. Finition des Rayures

Nous allons à présent finaliser les rayures de notre bouton. Dans la fenêtre des calques, cliquez droit sur le calque "contenu" et choisissez "Alpha vers Sélection".
Ensuite, sélectionnez le calque "rayures". Dans le menu "Sélection", choisissez "Inverser". Puis dans le menu "Edition", choisissez "Effacer". Les rayures doivent à présent recouvrir uniquement le bouton comme ceci :

Rayures du bouton

Faites un clic droit sur le calque "rayures" et cliquez sur "Alpha vers Sélection". Créez ensuite un nouveau calque et nommez le "couleurs".
Sélectionnez l'outil de remplissage et, dans ses options, choisissez "Remplissage avec la couleur de PP". Choisissez la couleur qui vous convient le mieux pour mettre en couleur les rayures (la couleur du bas du dégradé du bouton par exemple) et remplissez la sélection.

Faites "Sélection > Aucune". Dans le menu "Filtres", choisissez "Flou > Flou gaussien", prenez 1px pour le rayon du flou et validez. Si les rayures sont trop voyantes, vous pouvez aussi baisser leur opacité dans la fenêtre des calques (mettre à 85% d'opacité par exemple).
Vous pouvez masquer dès à présent le calque "rayures" en cliquant sur l'oeil qui se trouve juste à côté :

calques

5. Reflet

Pour finaliser le bouton, nous allons créer un reflet.
Faites clic droit sur le calque "contenu" et choisissez "Alpha vers Sélection". Créez un nouveau calque "reflet" au dessus de tous les calques. Prenez l'outil de dégradé et choisissez un dégradé de blanc vers transparent que vous tracerez du haut vers le bas du bouton. Faites une sélection rectangulaire sur la partie basse du bouton comme ceci :

reflet

Dans le menu "Edition", choisissez "Effacer". Puis faites "Sélection > Aucune".

6. Le Résultat final

Et voilà, vous disposez maintenant d'un joli bouton à rayures !
En enregistrant le dessin en .png, vous pourrez ainsi l'insérer dans votre site web (n'hésitez pas à découper l'image pour rogner le contour inutile). Si vous n'êtes pas satisfait des couleurs choisies au départ, n'hésitez pas à recommencer ce tutoriel.

bouton final

Pour télécharger l'exemple au format psd (format utilisable par The Gimp et Photoshop) : Cliquez ici !

Enjoy !

Revenir en haut de la page - Revenir Ó la page Graphisme