1. Création de bouton
2. Modifier une image

Gimp : création des images pour un bouton

Nous allons nous servir de Gimp pour créer très rapidement deux images pour faire ce genre de bouton :

Il est expliqué comment faire ce genre de bouton sur la page suivante : clique ici

1. Lance le Gimp
2. Fais Fichier -> Nouveau
3. Entre une largeur de 150 et une hauteur de 22, et sélectionne Remplir avec : Transparence, puis valide




Fichier -> Nouveau




4. Sélectionne l'outil loupe, coche auto redimensionner la fenêtre, et met notre image assez grosse :




Zoom




5. Fais un clic droit sur l'image Sélection -> tout :




Zoom




6. Tu as remarqué que l'on peut directement faire cela dans le menu de l'image sans faire de clic-droit... Mais avec l'habitude, ça va plus vite ainsi !


7. Menu Sélection -> rectangle arrondi et entre un rayon de 60 : la sélection s'arrondit


8. Maintenant, sélectionne une couleur de ton choix dans le menu de gauche en cliquant sur le noir, puis fais Édition -> remplir avec la couleur de PP :




Remplissage




9. Notre rectangle arrondi est maintenant bien vert...
10. Créé un nouveau calque avec remplissage transparence et nomme le masque




Nouveau calque




11. Ce nouveau calque est sélectionné par défaut, et la sélection est toujours valide...
12. On va maintenant réduire notre sélection : Sélection -> Réduire, et réduire d'une valeur de 1px
13. Nous allons maintenant appliquer un dégradé à cette sélection : resélectionne la couleur noire et prend l'outil de dégradé




Outil de dégradé




14. On fait un dégradé de bas en haut sur notre sélection : clique sans relacher de bas en haut de notre sélection, en pressant la touche Ctrl (cela permet de faire bien droit)
15. Quand tu relaches, le dégradé se fait :




Dégradé obtenu




16. Dans le mode du calque, sélectionne écran, et ton bouton apparaît par magie...




Mode écran




17. Fichier -> enregistrer, nomme le bouton.xcf (format du Gimp).
18. Fichier -> enregistrer une copie, nomme le bouton.png, exporter, valider, et on a notre superbe bouton...





19. Pour faire le même avec une impression de renfoncement, créé un nouveau calque masque2
20. Cette fois, ne diminue pas la sélection, mais applique un dégradé de haut en bas
21. Sélectionne le mode écran, et cache le calque masque en cliquant sur l'oeil à côté




Cacher un calque




22. Tu obtiens un nouveau bouton et Fichier -> enregistrer une copie, nomme le bouton2.png
23. Résultat :

et

24. Encore plus fort : fais Sélection -> Aucune, puis sélectionne le calque Arrière-plan (il doit être surligné en bleu)
25. Maintenant, sélectionne du bleu foncé, prend l'outil de remplissage, et clique au milieu de notre image




Magie !




26. Tu obtiens directement un bouton bleu sans effort... Cool le Gimp !


27. Tu peux récupérer le fichier au format Gimp ici : bouton.xcf