Que ce soit pour un icône ou pour un bouton web, ce tuto vous permettra de comprendre et assimiler ce qui rend un objet glossy, par son reflet, ses ombres, ou ses lumières. Bon appétit !

Rendu final:

Étape 1: Créez un nouveau projet photoshop de dimensions 217*217, fond blanc.

Étape 2: Créez un nouveau calque que nous appellerons 'base'. Ajoutons à celui-ci le carré aux coins arrondis qui sera la base du bouton. Pour cela sélectionnez l'outil 'Rectangle arrondi', réglez le rayon à 9px, et la couleur en #00508d. Laissez la touche MAJ enfoncée pour créer un carré stricte.

Étape 3: Dupliquez le calque 'base' et renommez 'reflet interne', puis placez le au dessus des autres calques. Double-cliquez sur sa vignette de calque pour changer sa couleur en blanc. Double-cliquez sur le calque pour ouvrir son style, réduisez son fond à 0%  et ajoutez lui un biseautage comme ci-dessous.

Étape 4: Nous allons ajouter un reflet à notre futur icône. D'abord dupliquez les calques 'base' et 'reflet interne'. Réduisez l'opacité du calque 'reflet interne' à 60% puis fusionnez les deux calques dupliqués précédemment (CTRL + E). Renommez le calque en 'reflet'. Faites un CTRL + T pour tourner notre objet de 180°. Descendez ensuite notre calque 'reflet' comme ci-dessous. Ajoutez un masque de fusion à ce dernier. Pour cela, allez dans l'onglet Calque > Masque de fusion > Tout faire apparaître. Sélectionnez l'outil Dégradé (G) du noir à transparent et faites comme ci-dessous.

Étape 5: Dupliquez le calque 'reflet interne' et effacez son style. Renommez votre copie de calque 'lumière'. Positionnez le au dessus de tous les autres calques et réduisez son fond à 0%. Double-cliquez sur ce calque pour ouvrir son style et ajoutez lui un contour comme ci-dessous. Dupliquez ensuite le calque 'lumière' pour plus d'intensité.

Étape 6: Nous allons ajouter de l'ombre à notre icone. Pour cela dupliquez le calque 'reflet interne' et effacez son style. Renommez votre copie de calque 'ombre1' et positionnez le par dessus tous les autres. Réduisez son fond à 0% et double cliquez dessus pour ouvrir son style. Ajoutez une ombre portée comme ci-dessous.

Étape 7: Rajoutons enfin un contour ombré. Pour cela dupliquez le dernier calque créé et renommez votre copie de calque 'ombre2'. Supprimer son style de calque. Encore une fois, réduisez le fond à 0% et placez le en dessous du calque 'ombre1'. Ouvrez son style et faites comme ci-dessous.

Étape 8: Enfin, rajoutons notre effet gloss. Prenez l'outil plume, créez un arc comme ci-dessous et fermez le. Faites un CTRL + CLICK sur la vignette du calque 'ombre1' pour le sélectionner.

Pixélisez le calque en cliquant droit > Pixelliser le calque.Allez dans l'onglet Sélection > Modifier > Contracter, puis saisissez un contraction de 2 px. Inversez alors la sélection en faisant un CTRL + MAJ + I et supprimez. Double-cliquez sur notre calque pour lui donner enfin l'effet voulu et faites comme ci-dessous.

Étape 9: Rajoutons notre joli texte EVA-SION en le positionnant juste en dessous de mon calque effet gloss, avec les propriétés de style ci-dessous.