Tutoriel photoshop : Créer une icone glossy pour une interface web Tutoriaux photoshop > Webdesign > Tutoriel photoshop : Créer une icone glossy pour une interface web

Aujourd'hui, Nous allons voir comment faire une icone glossy.

1) Avec l'outil dégradé faites un dégradé de noir vers un gris foncé.



Puis Avec l'outil ellipse créez un cercle parfait.
Pour cela maintenant la touche SHIFT enfoncée pour garder la même proportion.


Dans la fenêtre calque décoché l'oeil correspondant à l'ellipse qu'on vient de créer. Tout en maintenant la touche CTRL cliquez sur la vignette du calque de l'ellipse dans la fenêtre calque pour avoir la sélection de son contour


Créez un nouveau calque, menu calque -> nouveau calque. (raccourci CTRL+SHIFT+N). Puis avec l'outil dégradé faites un dégradé de blanc vers transparent, du bas vers le haut.
Maintenez SHIFT pour rester bien droit pour obtenir un résultat un peu similaire


Décochez ce nouveau calque et créez en un nouveau, menu calque -> nouveau calque. (raccourci CTRL+SHIFT+N).
Toujours avec l'outil dégradé faites un dégradé mais cette fois-ci du haut vers le bas. (toujours de blanc vers transparent et en maintenant la touche SHIFT)


A présent on va réduire ce dernier dégradé pour créer un reflet. Menu édition -> transformation -> homothétie.
Prenez le point du milieu bas et remontez le légèrement. Puis prenez le point du milieu gauche et tout en appuyant sur ALT réduisez la forme.


Vous pouvez à présent faire rapparaitre l'autre calque où l'on avait effectué le dégradé


Nous voilà avec une belle "bulle" transparente.
Maintenant nous pouvons prendre un symbole une lettre... peut importe. Pour ce tuto je vais dans les formes personalisées de photoshop pour un i type "point info".
et je place le calque créé en dessous de nos 2 reflets.


A présent nous pouvons appliquer un dégradé par exemple à ce i. Menu calque -> style de calque -> incrustation de dégradé.


Pour obtenir ce rendu.


Je trouve le rendu déjà sympa j'étais hésitant à m'arrêter. Mais en rajoutant le calque de l'ellipse je me suis aperçu que le rendu pouvait être aussi joli.
Donc si vous le souhaitez dans la fenêtre calque remettez l'oeil correspondant à l'ellipse.


Duppliquez le calque, menu calque -> dupliquer le calque, passez le calque derrière l'ellipse et réduisez la forme. Menu édition -> transformation
-> homothétie.
Pour obtenir une ombre comme ceci


Pour mettre un peu de relief on va creuser le i. Pour cela cliquez sur le calque du i et appliquez une ombe interne. Menu calque -> style de calque -> ombre interne


Voilà le rendu final.

Autres tutoriaux photoshop : Webdesign

Faire une barre de navigation d'un site internet Création d'un bouton Flux RSS glossy Faire une barre de navigation, scroll barre Créer une icone de média sociaux (facebook, twitter...)