De la sphère au bouton... version Glassy
 
De nombreux sites web arborent un style assez futuriste. Ils sont souvent composés d'une mutitude d'éléments recourant à des effets visuels divers et variés. Parmis ces éléments on trouve des boutons, des sphères à l'aspect Glassy. Le présent tutoriel vous propose de réaliser dans un premier temps une sphère puis sur cette base un bouton... tous deux Glassy évidement
 
Etape 1 : Création du document
Créez une nouvelle image (Ctrl+N ou Fichier > Nouveau...) de 400x400 pixels (par exemple) avec un fond transparent pour vous laisser un maximun de liberté d'intégration par la suite.
Nous allons maintenant placer des guides qui vont indiquer le centre de l'image afin de nous faciliter la tâche :Image > Guides > Nouveau guide (par pourcentage) et sélectionner Horizontal pour la direction et 50% pour la position.Répétez l'opération mais en sélectionnant cette fois ci Vertical pour la direction.
 
Avant d'aller plus loin, voici l'organisation des futurs calques.  

 
 
Etape 2 : Forme de base
Passons à la création de ce qui sera une sphère
Tout d'abord il vous faut choisir une couleur. Pour ce tutorial j'ai opté pour la couleur #00b7d2.
Créez un nouveau calque transparent et nommez le fond.
A l'aide de l'outil Sélection elliptique (E) maintenez la touche Shift enfoncée pour réaliser une sélection circulaire de 140px de rayon environ. Remplissez la sélection avec la couleur de premier plan (Ctrl+, ou Edition > Remplir avec la couleur de PP).
 
Comment réaliser la sélection à partir du centre de cette dernière et non pas à partir d'un bord ?
En appuyant sur la touche Ctrl une fois la sélection débutée. Maintenant, effectuez votre sélection en toute simplicité en partant du centre de l'image symbolisé par les guides
 

 
 
Etape 3 : Un reflet garçon !
Créez un nouveau calque transparent et nommez le reflet.
Effectuez un clic droit sur le calque fond puis sélectionnez Alpha vers sélection. Nous récupérons ainsi la couche alpha du calque sous forme d'une sélection.
Réduisez la sélection d'environ 50px (Sélection > Réduire > 50px).
Toujours en ayant l'outil de sélection activé, maintenez la touche Alt enfoncée pour déplacer à l'aide du clavier la sélection à environ 3px du sommet du cercle.
 
Utilisateurs de systèmes libres, déplacer la sélection au clavier vous incommode et vous préféreriez utiliser la souris ? Qu'à cela ne tienne, en maintenant la touche Alt enfoncée, activez la touche Shift et déplacez la sélection.
Une autre méthode est d'acviter l'outil Déplacer et de positionner l'option Affecte à Transformer la sélection (bouton du milieu) puis de déplacer la sélection.
 

 
Echangez les couleurs (X) pour que la couleur blanche passe en couleur de premier plan, puis sélectionnez l'outil Dégradés (L). Choisissez le dégradé de type PP vers Transparent.
Replacez-vous sur le calque reflet puis réalisez un dégradé en partant du haut de la sélection jusqu'au guide horizontal en maintenant le bouton Ctrl enfoncé afin d'obtenir une droite parfaite.
Réglez l'opacité du calque reflet à 90%.
 

 
 
Etape 4 : Une lueur apparue au loin...
Effectuez un clic droit sur le calque fond puis sélectionnez Alpha vers sélection.
Créez un nouveau calque transparent et nommez le lueur.
A l'aide de l'outil Dégradés (L) réalisez un dégradé de type radial PP vers Transparent en le commençant environ 3px sous la sélection jusqu'au 1/3 de l'objet.
 

 
Il faut maintenant supprimer le trop plein. Néanmoins, au lieu de se contenter de supprimer ce qui déborde de la sphère nous allons en supprimer un peu plus afin de donner un meilleur effet.
Pour cela, réduisez la sélection de 3px (Sélection > Réduire > 3px) puis inversez la (Ctrl+I ou Sélection > Inverser).
 

 
Au lieu de réaliser une découpe nette adoucissez la sélection de 5px (Sélectection > Adoucir).
Enfin supprimez la sélection (Ctrl+K ou Edition > Effacer).
 

 
 
Etape 5 : Ajout d'ombres internes
 Afin de renforcer l'effet de volume nous allons ajouter des ombres internes.
Créez un nouveau calque qui aura pour nom ombres puis réinitialisez les couleurs de premier plan et d'arrière plan (Ctrl+D).
Récupérez la sélection de la couche alpha du calque fond (clic droit sur le calque fond puis sélectionnez Alpha vers sélection). A l'aide de l'outil de Sélection elliptique (E) placez vous à l'intersection des guides puis commencez par appuyer sur la touche Ctrl afin de passer la sélection en mode de soustraction puis commencez à réaliser la sélection. Laissez la touche Ctrl enfoncée pour obtenir une sélection en mirroir.
Essayez d'obtenir le même résultat que ci-dessous.
 

 
Remplissez la sélection obtenue de noir.
Tout ceci est trop net à mon goût, pour vous aussi ? Parfait, on va y remédier
Récupérez la sélection du calque fond puis repositionnez vous sur le calque ombres. Appliquez un flou gaussien (Filtres > Flou > Flou gaussien) RLE de 15px. Passez le calque en mode Superposer et réglez son opacité à 30%.
 

 
Voilà, la sphère est terminée \(^_^)/
Au fait, pourquoi est ce que je vous ai fait récupérer la sélection du calque fond avant de réaliser le flou gaussien ? Pour que le flou ne déborde pas de la sphère et ainsi vous économiser une inversion de sélection suivie d'une suppression
 

 
 
Etape 6 : Création du bouton
En se basant sur la présente sphère nous allons réaliser un bouton du plus bel effet.
Normalement la sélection de la couche alpha du calque fond est toujours active, si ce n'est pas le cas récupérez là
Créez un nouveau calque et nommez le bordure. Placez le au sommet de la pile de calques.
Nous allons réaliser une bordure de 10 pixels : agrandissez la sélection de 10px (Sélection > Agrandir) puis placez vous sur le calque fond. Là, allez dans le menu Calque > Transparence > Soustraire de la sélection pour soustraire la couche alpha du calque fond de la sélection.
Il ne vous reste plus qu'à vous repositionner sur le calque bordure et de remplir la sélection d'une couleur. Ici j'ai opté pour du blanc.
 

 
Pour donner un peu de relief à cette bordure ajoutez lui un biseau de 5px en allant dans le menu Script-Fu > Décor > Ajouter un biseau. Ne cochez aucune case.
Ajoutez lui maintenant une ombre. Allez dans Script-Fu > Ombre > Ombre portée et entrez les valeurs suivantes.
Il ne reste plus qu'à ajouter un élément qui donnera un sens au bouton.  
 

 
ci, j'ai choisi d'utiliser un symbole fourni par la police Webdings.
A l'aide de l'outil Texte (T) créez donc un calque texte avec pour police Webdings d'une taille de 210 pixels, de couleur blanche, les cases Indices d'ajustement et Lissage cochées. Entrez le caractère @.
Déplacez le calque à l'aide de l'outil Déplacer (M) afin de le centrer.
Il ne reste plus qu'à ajouter une ombre comme précédemment mais cette fois-ci en choisissant une opacité de 65. Enfin il ne vous reste plus qu'à passer le calque de l'ombre de l'élément en mode Lumière douce.
Le bouton est achevé !
 

 
 
Quelques exemples :

 
 
  Gimp4you : De la sphère au bouton... version Glassy

Je crois que tu vas me faire installer TheGimp

Bravo pour cet excellent tuto, et pour les autres

Tres Tres bon tuto !!! Je crois que je vais faires boutons comme ca pour mon site !

Coucou !

J'ai un coup de foudre pour votre tutorial et je t'en remercie

Je suis en train de créer un site écologique et que j'espère qu'il va devenir commercial si cela marche. Ai-je le droit de créer des boutons inspirant de ce tutorial ?

Le bouton sera en forme d'une goutte d'eau.

Bisous

Bonjour Orboreale et merci

Ce tutoriel est et reste un guide offrant toute liberté de création.
Bien évidemment son utilisation pour réaliser une image n'implique aucune restriction d'utilisation de vos créations.

Je vous remercie beaucoup piouPiouM

C'est un excellent tuto...faut que j'essaie !!!  

Très bon tutoriel  
Voici mon résultat:

Magnifique tuto!

J'en ai profiter pour faire une image contre la cigarette.

Erf moi le fond ! Je sais pas pourquoi mais il s'est mis en bleu  

http://img165.imageshack.us/my.php?image=boutongimplp7.jpg

Sinon Bon tuto ! J'ai tout compris

Très joli tuto qui nous donne un très bon rendu, merci à toi

Bravo, vraiment,

Voici le mien

quand je l'ai fait, il y avait un peu d'aliasing, alors j'ai mit un flou cinetique, et finalement c'est different mais je trouve ca bien, pour un débutant.

C'est quoi de l'aliasing?

L'aliasing, c'est une sorte d'effet "escalier", un peu comme des crans, c'est visible dans les jeux aussi .

Mais j'ai du raté une manip, puisque dans le tuto, il n'y a pas d'aliasing.

A plus

L'aliasing, c'est ça:

Clique dessus pour agrandir

Exellente retranscription du tuto ! (je l'avais fait avec celui de gimp4you )

Mon résultat est pas mal, j'ai un peu d'aliasing , je voudrais savoir comment l'enlever

Désolé, je n'ai pas ma création avec moi (problèmes )

J'aime bien la variante anti-cigarette, mais tu devrais centrer le signe, et faire une barre qui se distingue plus de la cigarette, sinon je trouve la cigarette très bien !

Merci pour vos avis

@GlOuP's^^' : il n'y a pas réellement de solution pour enlever l'aliasing sur une création. La seule qui me vient à l'esprit de suite (au levé du lit donc ) est de réaliser une sélection de la sphère moins 1px en veillant bien à ce que la case Lissage des options de l'outil de Sélection elliptique (E) soit cochée. Ensuite inverser la sélection (Ctrl+I) puis supprimer (Ctrl+K).

Ou appliquer un Flou (gaussien ou cintéique) sur ton calque comportant de l'aliasing, comme les autres l'ont fait.

Aussi, tu peux enregistrer en XCF et tu enregistres en PNG après

L'ajout de flou ne donne pas un résultat aussi propre que la recoupe. Mal utilisé il risque aussi de dégrader la forme ainsi que sa texture.

Le fait d'enregistrer en XCF ou en PNG ne va ajouter d'aliasing

Exact,

Tu peut regarder mon bouton, c'est different de l'original, mais bon

voilà la mienne et merci pour vos réponses!

Pas mal Kurios !

Pour ma part :

Chui assez content de moi pour une première ! J'avoue il y a un peu d'aliasing

Vos critiques sont les bienvenues !

GlOuP's^^' il est manifique   il y a juste un dégradé sur tout le bouton qui n'été pa dans le tuto mais moi je le trouve très beau  

Et piouPiouM, merci beaucoup pour ce super tuto      

Superbe le tien GlOuP's^^

Merci beaucoup .. ça me touche beaucoup étant un débutant!
Mais de quel dégradé tu parles kairiwill ?

Euhh .. un truc aussi : ça ne sert à rien de mettre les "^^'" .. pasque déjà que j'aime pas trop mon pseudo !