Site de tutoriaux photoshop

Créer une icone glossy pour une interface web

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? outil d?grad? faites un d?grad? de noir vers un gris fonc?.
Icone glossy


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

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
Icone glossy

Cr?ez un nouveau calque, menu calque -> nouveau calque. (raccourci CTRL+SHIFT+N). Puis avec l'outil d?grad? 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
Icone glossy

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? 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)
Icone glossy

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.
Icone glossy

Vous pouvez ? pr?sent faire rapparaitre l'autre calque o? l'on avait effectu? le d?grad?
Icone glossy

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 outil forme personalis?e pour un i type "point info".
et je place le calque cr?? en dessous de nos 2 reflets.
Icone glossy

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

Pour obtenir ce rendu.
Icone glossy

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.
Icone glossy

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
Icone glossy

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
Icone glossy

Voil? le rendu final.
Icone glossy





Gagnez de l'argent facilement même en restant chez vous !
Sondages, tests de produits, enquêtes consommateur, mails rémunérés, cashback, publicités rémunérées...




Tutoriaux photoshop

Les derniers tutoriaux photoshop : Webdesign

Tutoriaux photoshop : Créer une icone de média sociaux (facebook, twitter...)Créer une icone de média sociaux (facebook, twitter...)
Tutoriaux photoshop : Faire une barre de navigation, scroll barreFaire une barre de navigation, scroll barre
Tutoriaux photoshop : Flux RSS glossyFlux RSS glossy
Tutoriaux photoshop : Création d'un boutonCréation d'un bouton
Tutoriaux photoshop : Faire une barre de navigation d'un site internetFaire une barre de navigation d'un site internet
SW-Conception.com - Création de site internet