Le style Reflets et Gélatine

Très en vogue ces temps-ci sur le web, le style Reflets & Gélatine a conquis de nombreux webmasters (dont nous ....) Voici donc comment réaliser de beaux onglets de navigation dans un style high-tech. Ne reste plus ensuite qu'à leur appliquer un joli script Hypercell pour un mouseover sympathique et fringant .... La mise en place est facile : il suffit de bien suivre les étapes ....

Voici exactement ce à quoi nous voulons arriver :....

Créer un nouveau document en couleurs RVB de 300*300 pixels. La taille importe peu mais essayez de travailler sur des dosuments assez grands au



départ, quitte à réduire ensuite la zone de travail. Nommez le comme bon vous semble et ne vous occupez pas de la résolution : laissez celle par défaut. Choisissez un arrière-plan blanc.

Créez un nouveau calque. Tapez plusieurs fois Maj+U pour faire apparaitre l'outil Rectangle Arrondi dans la palette d'outils. Mettez le rayon entre 15 et 20 pixels puis dessinez le bouton en faisant un joli Cliquer/glisser.

Sélectionnez l'outil "rectangle" (Touche M) puis dessinez un rectangle de sélection sur le bas du bouton puis cliquez sur "suppr" afin d'enlever le bas de l'onglet.

Mettons maintenant un dégradé (Touche G) et ouvrez l'éditeur de dégradé (en haut à gauche en cliquant dessus) et parametrez l'éditeur de dégradé comme suit :

Dans la palette des calques, vérouillez les pixels transparents. Cela va permettre de faire un dégradé qui ne s'applique qu'à l'onglet

Avec l'outil Dégradé, tracez ensuite un dégradé comme indiqué ci-dessous :

Ajoutez ensuite un style de calque (en double-cliquant sur le calque) et reglez les différents paramètres comme suit :

Ajoutons lui une jolie lueur externe pour donner de la luminosité. Pour cela, aller ensuite dans > Lueur externe (toujours dans la boite de dialogue Style de calque). Essayez de lui donner les memes règlages que sur l'image qui suit..... sachant que vous pouvez expérimenter d'autres réglages pour d'autres effets .....

Voilà ce à quoi votre image doit ressembler à cette étape

Huitième étape

Il va maintenant falloir lui donner un aspect de reflet sur le dessus.... Pour cela, sélectionnez le calque du bouton puis > Sélection > Modifier > Contracter et entrez un paramètre de 2

Activez l'outil " rectangle de sélection " (Touche M) Tout en appuyant sur la touche Alt, dessinez un cadre partant du bas du bouton vers le haut en laissant une partie de la première sélection visible ...

Neuvième étape

Dans la foulée, sans déselectionner, créez un nouveau.calque. Appuyez sur la touche X puis Alt + Retour Arrière pour remplir la sélection de blanc. Déselectionnez. Ensuite > Filtres > Atténuation > Flou Gaussien

Dixième étape

Voilà, c'est fini ! Vous devriez normalement vous retrouver avec une image comme celle ci-dessous ...