Open-Studios.eu, la création de sites devient simple

AccueilForumLivre d'orRessourcesTutoriels

  • Accueil forums
  • Accueil site
  • Liste des membres
  • Règles
  • Recherche
  • Inscription
  • S'identifier

Vous n'êtes pas identifié.

Pages: 1

 

  • Accueil forums
  •  » Graphisme
  •  » Faire une barre glossy sur GIMP

#1 13/07/2008 14:30:33

Kenny
Administrateur
Date d'inscription: 02/03/2008
Messages: 584

Faire une barre glossy sur GIMP

Bonjour et bienvenue sur ce tutoriel qui va vous apprendre à réaliser une barre glossy sur ce logiciel gratuit de graphisme qu'est GIMP.
On appelle glossy le fait de faire un effet translucide, brillant, "crystallisé". C'est ce qu'on va apprendre à faire ici. Voici le résultat final :

http://www.open-studios.eu/img/tutos/glossy/bleu.png


Vous pourrez utiliser cet effet pour vos barres de menus, boutons, …




Premièrement, je commence par créer un nouveau document (Fichier > Nouveau…). Ici, je vais mettre 600x600 pixels, même si le résultat final ne fera qu'environ 500x50. Mais je préfère avoir plus d'espace pour travailler.

Nous allons commencer par faire la base (le rectangle arrondi). Créez un nouveau calque appelé "Base". Prenez l'outil sélection rectangulaire. "Lissage" doit être coché ainsi que "Coins arrondis" (le rayon doit être défini à 5,0). Le reste doit être décoché.
Faites une sélection d'environ 500x50 pixels (vous pouvez voir les dimensions de votre sélection en bas). Elle doit être à peu près centrée.
À présent, remplissons cette sélection. Ici, je prends une couleur bleu flashy (33c9db en notation HTML).

Nous allons en profiter pour faire l'ombre portée dès maintenant. Allez dans Filtres > Ombres et lumières > Ombre portée...
Configurez décalage X et Y à 0 et rayon du flou à 4. Couleur noire et opacité 80.

Gardez votre sélection et créez un nouveau calque appelé contour intérieur. Nous allons faire ce contour qui donne un effet de plus à notre barre.
Allez dans Sélection > Réduire... de 1px et faites Sélection > Bordure... à 1px. Définissez la couleur de premier plan en blanc.
Allez dans l'outil dégradé. Dans dégradé, choisissez PP vers Transparent, forme linéaire.
Changez l'opacité du calque contour intérieur à 80.

Faites clic droit sur le calque Base et cliquez sur Alpha vers Sélection. Créez un nouveau calque appelé Reflet. Nous allons maintenant faire le reflet.
Allez dans Sélection > Réduire... de 3px. Ensuite, prenez l'outil Sélection en mode Soustraire et enlevez environ la moitié du bas de la sélection :
http://www.open-studios.eu/img/tutos/glossy/selection.png


Vérifiez que la couleur de premier blanc est en blanc et faites un dégradé PP vers transparent de haut en bas de cette manière :
http://www.open-studios.eu/img/tutos/glossy/degrade.png


C'est terminé ! Sauf si vous voulez rajouter encore une petite touche. Créez un nouveau calque Reflet noir et placez-le en haut de base. Faites clic droit sur le calque Base et cliquez sur Alpha vers Sélection et prenez l'outil Sélection en mode Soustraire et enlevez une grande partie du haut de la sélection :
http://www.open-studios.eu/img/tutos/glossy/selection2.png


Définissez la couleur de premier plan à noir et faites un dégradé PP vers transparent de haut en bas de la sélection sans dépasser cette sélection.
Changez ensuite l'opacité de ce calque à 9.




Voilà, c'est terminé ! En plus, la couleur est entièrement modifiable car il suffit juste de changer la couleur du calque base. Exemple en rose :
http://www.open-studios.eu/img/tutos/glossy/rose.png


Télécharger le XCF

À très bientôt pour plus de tutos sur Open-Studios !

Hors ligne

 

 

Pages: 1

  • Accueil forums
  •  » Graphisme
  •  » Faire une barre glossy sur GIMP

Pied de page des forums

Powered by PunBB
© Copyright 2002–2005 Rickard Andersson