Comment crer un menu black gloss sur

Photoshop

Dcouvrez dans ce tutoriel Photoshop comment designer un menu horizontal puis comment
lintgrer en HTML / CSS.
Voici un tutorial pour crer de A Z un menu glossy black aqua. Sen suivra une explication pour
le dcouper et le coder en CSS / html.

Tutorial 193 - Fichier source Photoshop

clic pour tlcharger le fichier source photoshop utilis dans ce tutorial
ETAPE 1
Je cre un nouveau document, et je remplis le fond avec cette couleur : #272727. Puis avec
loutil des formes personnalises je cre un rectangle arrondi noir au milieu de mon image (peu
importe le radius, dans mon exemple il est de 10 pixels).

ETAPE 2

Japplique deux styles sur mon calque : un contour gris trs fonc, ainsi quun dgrad. Vous
pouvez vous rendre compte des styles en tlchargeant le fichier source Photoshop en haut de
cette page.

ETAPE 3
Je cre un nouveau document, et je rcupre la slection de mon rectangle (clic + ctrl sur le
calque). Je remplis de blanc cette slection, puis je la coupe en deux. Et enfin je diminue son
opacit 20%.

ETAPE 4 Facultatif

Je peux ajouter un motif mon menu, pour cela je rcupre la slection de mon rectangle, je
cre un nouveau calque et je le remplis du motif de mon choix.

ETAPE 5
Japplique un masque de fusion pour camoufler mon motif et le rendre non visible.

ETAPE 6
Sur un nouveau calque je cre une slection de 1 pixel de largeur du haut du menu vers le bas,
puis je remplis de blanc ces slections, il sagit l de sparations pour les boutons de notre menu.
Avec un masque de fusion je camoufle le haut de ces barres.

ETAPE 7
De chaque cot, je cre des barres de sparations oranges.

ETAPE 8
Je remplis chaque extrmit dune couleur au choix. Pour cela je rcupre la slection de mon
rectangle et sur un nouveau calque je la remplis de bleu. Ensuite je supprime les pixels au centre
de mon menu.

ETAPE 9
Sur mon premier calque jajoute une lueur externe, gris clair.

ETAPE 10
Voici un second menu avec un style diffrent, je le prfre au premier et je vais lutiliser pour la
suite, vous de voir celui qui est le mieux. Pour information, pour arriver au rsultat du second
menu, il suffit de supprimer les dgrads du menu (barre orange, cot bleu, et intrieur du
menu).

ETAPE 11
Jajoute mon texte, avec une lueur externe blanche sur chaque titre.

ETAPE 12
Je place tous mes calques dans un dossier et je duplique ce dossier. Je place ainsi mes deux
menus.

ETAPE 13
Je modifie la couleur de mon menu, ce deuxime menu sera utilis pour crer leffet de Rollover
au passage de la souris.

ETAPE 14
Je vais maintenant dcouper mon menu, pour cela jutilise la slection. Lastuce videmment
cest de crer et de dcouper lidentique en haut et en bas.

ETAPE 15
Une fois que ltape 14 est termine je dois pouvoir crer une sorte de mosaque de mon menu,
voici ce que jobtiens : les extrmits simples, et les boutons noir et orange.

ETAPE 16
Dans un fichier html je vais mettre le menu en place, je vais utiliser la technique du tableau pour
la mise en page et du javascript pour le Rollover. Remarque : tout ceci peut tre fait en CSS mais
ce nest pas le but de ce tutroial
Voici le code pour crer le menu :
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="48" height="70" background="tuto_wks_d28_14a.jpg"></td>
<td><a href=""><img src="tuto_wks_d28_14b1.jpg" width="97" height="70"
border="0" onMouseOver="this.src='tuto_wks_d28_14b2.jpg'"
onMouseOut="this.src='tuto_wks_d28_14b1.jpg'"></a></td>
<td><a href=""><img src="tuto_wks_d28_14c1.jpg" width="100" height="70"

border="0" onMouseOver="this.src='tuto_wks_d28_14c2.jpg'"
onMouseOut="this.src='tuto_wks_d28_14c1.jpg'"></a></td>
<td><a href=""><img src="tuto_wks_d28_14d1.jpg" width="100" height="70"
border="0" onMouseOver="this.src='tuto_wks_d28_14d2.jpg'"
onMouseOut="this.src='tuto_wks_d28_14d1.jpg'"></a></td>
<td><a href=""><img src="tuto_wks_d28_14e1.jpg" width="100" height="70"
border="0" onMouseOver="this.src='tuto_wks_d28_14e2.jpg'"
onMouseOut="this.src='tuto_wks_d28_14e1.jpg'"></a></td>
<td width="28" height="70" background="tuto_wks_d28_14f.jpg"></td>
</tr>
</table>

Voir le menu en action : http://www.wks.fr/tutorial_help/tutorial_193/index.html

Jespre que vous aurez maintenant compris un peu plus la technique du Rollover, quand la
cration du menu en lui-mme, ce doit tre du gteau pour vous non ?

[Tutoriel photoshop CS3] Crer un fond d'cran sympa

Voici un tutoriel qui m'a servi a faire un des wallpaper que j'ai dja post.
C'est une traduction d'un tutoriel existant et que vous pouvez trouver ICI
Pour raliser ce tutoriel il serait prfrable d'avoir fait avant le tutoriel de
ptite_chipiecration d'un logo afin de maitriser les reflets sur une sphre

Etape 1 : le fond
Pour commencer ouvrez un nouveau document de la taille de votre ecran. Pour l'exemple je vais
prendre une rsolution de 1920x1200 pixels et d'une rsolution de 72px/pouce
Avec l'outil rectangle (U) avec les options suivantes

Vous vous retrouvez donc avec deux calque : le calque arriere plan et le calque forme 1
Dans le style de calque du calque forme 1 (double clic sur le calque ou menu Calque/Style de
calque) ajouter une incrustation de dgrad avec les rglages suivants :

Le rsultat devant donner ceci

tape 2 : Ralisation de la sphre

Avec l'outil ellipse (U) dessiner un cercle parfait en maintenant la touche Maj enfonce pendant le
dessin
Vous allez vous retrouver avec un troisime calque du nom Forme 2 et le rsultat suivant

A ce calque Forme 2 appliquer un style de calque incrustation de dgrad avec les rglages
suivants:

Le rsultat sur la sphre devra correspondre a ceci

Copier le calque Forme 2 en faisant Ctrl + J, supprimer le style de calque (incrustation de

dgrad) en faisant un clic droit sur le calque et faire Effacer le style de calque. Changer la
couleur du calque forme en noir.
Appeler l'outil de transformation manuelle Ctrl +T ou menu Edition/Transformation manuelle du
trac dformer le pour obtenir l'effet de l'image ci dessous.

Appliquer a ce calque un style de claque avec :

Ombre interne

Lueur interne

Etape 3 Les motifs de la sphre

Tlcharger des brush Swirl que vous pouvez trouver sur Deviantart
Crer un nouveau calque que vous renommerez Swirl et a l'aide d'une brosse Swirl et de
la couleur blanchedessiner comme l'exemple ci dessous. Si vos Swirls sont trop net vous pouvez
leur appliquer uneattnuation/flou gaussien

En maintenant la touche Alt enfonce cliquer entre le calque Forme 2 copie (cercle noir) et le
calque des Swirl pour transformer le calque en masque d'crtage comme montr ci dessous

Crer un nouveau calque que l'on va nommer: Vert et avec une brosse a contour doux dessiner
sur la sphre avec la couleur 6B9801 et la recouvrir compltement. En maintenant la
touche Alt enfonce cliquer entre le calque des Swirl et le calque Vert pour transformer le calque
en masque d'crtage comme montr ci dessous et lui appliquer un mode de fusion Couleur

Les motifs a l'intrieur de la sphre dpendent de la brosse Swirl que vous aurez utilis voici
quelques exemples de rsultats

Etape 4 les reflets

Pour les reflets je vous renvoie au tutoriel fait par Ptite_chipie que vous pouvez voir Ici
Voici les reflets appliqus. Pour chaque reflets l'outil ellipse (U) un calque forme est donc cre a
chaque reflets
Premier reflet vert lumineux on renomme le calque: Vert

Deuxime reflet blanc on renomme le calque : Blanc

D'autres reflets peuvent tre ajouts selon cette mthode

Etape 5 Le dcors
Pour le dcors crer un nouveau calque entre le calque Forme 1 (le fond dgrad) et le
calque Forme 2 de la sphre
A l'aide de brush de votre choix (ici ce sera des fleurs) raliser le dcor en dessinant de couleur
blanc et en passant le calque en mode fusion incrustation. Si vous faites plusieurs calques
spars de dcors cela aura pour effet de faire des nuances de couleurs. Alors qu'un seul calque
de dcors ne vous donnera qu'une seule couleur unie pour ce dernier.

Pour un dernier effet je vous renvoi au tutoriel de Lin'@art sur l'effet non.
Vous pouvez le trouver ICI

Merci d'avoir suivit ce tutorie

Vous verrez dans ce tutoriel Photoshop comment raliser un menu horizontal style Windows
Vista.
Voici une mthode pour crer un menu pour un site internet. Celui-ci reprend franchement le
style trs glossy web2.0 de la version windows Vista !
La ralisation nest pas franchement compliqu, mais elle demande une certaine rigueur, de plus
le tutorial est un peu long. Alors munissez-vous dune bonne dose de patience

Fichier PSD : tutorial 211

clic pour tlcharger le fichier source Photoshop utilis dans ce tutorial
ETAPE 1
Je cre un nouveau document sur fond noir. Puis jutilise loutil slection pour crer un rectangle
au milieu de mon image. Je cre un nouveau calque (menu calque > nouveau calque) et je
remplie laide de loutil pot de peinture ma slection en blanc. Je nomme ce calque (en double
cliquant dessus dans la bibliothque des calques) en fond.

ETAPE 2
Japplique maintenant sur mon calque fond deux styles de calque. Calque > style de calque >
contour puis incrustation de dgrad.
Astuce : Le fichier source photoshop est disponible en haut de cette page. Je tlcharge celui et
je rcupre le style de calque que je dois utiliser dans cette tape. Pour ce faire il faut faire un
clic droit sur le calque puis copier le style, je reviens ensuite dans mon image je clic droit sur le
calque fond puis coller le style de calque.

ETAPE 3
Cette tape est facultative : elle consiste : sur un nouveau calque je rcupre la slection de
mon fond que je remplie avec un motif, puis je diminue fortement son opacit avec un masque de
fusion.
Pour information cette tape nest franchement pas trs utile :/

ETAPE 4

Je cre un nouveau calque que je vais appeler reflet principal. Je rcupre la slection de mon
calque fond puis je remplie cette slection avec cette couleur : #525870. Je coupe cette slection
en deux dans le sens horizontale (jutilise loutil de slection et la touche suppr). Jutilise ensuite
un masque de fusion pour camoufler lgrement le bas de ce reflet.

ETAPE 5
Jutilise loutil des formes personnalises pour crer un rectangle arrondies sur mon document,
voir ci-dessous pour le placement du rectangle.

ETAPE 6
Je lui applique plusieurs styles de calque : comme pour ltape 2 je me rends dans le fichier
source photoshop fournis en haut de page pour rcuprer le style de calque (voir le calque
appel Forme 1).

ETAPE 7

Je cre un nouveau calque et je le nomme Reflet 2. Je rcupre la slection de mon rectangle

arrondie et je remplie cette slection avec cette couleur #525870. Je coupe cette slection en
deux dans le sens horizontale (jutilise loutil de slection et la touche suppr).

ETAPE 8
Je cre encore un nouveau calque et je le nomme sparation. Je vais crer les barres de
sparations qui serviront diffrencier les liens prsents dans notre menu.
Je cre une barre de 2 pixels de large qui commence en haut et qui finie en bas de mon
rectangle arrondies. Je duplique cette barre autant de fois que je veux de sparation.
Puis je supprime 4 pixels en haut et 4 pixels en bas. Et pour finir le lui applique une incrustation
de dgrad (je rappelle que vous trouverez le style de calque dans le fichier psd disponible en
haut de page).

ETAPE 9
Jajoute maintenant mon texte qui correspond a mes futurs liens, sur ceux-ci jajoute simplement
une incrustation de couleur grise.

ETAPE 10
Dans cette tape il y a deux choses faire : premirement je rcupre la slection de mon
calque fond, et en bas je cre un dgrad de noir 100% vers noir 0% dopacit.
Ensuite avec laide de la plume je cre droite de mon menu une forme comme ci-dessous.

ETAPE 11
Jy ajoute une incrustation de dgrad ainsi quun contour (je rappelle que vous trouverez le style
de calque dans le fichier psd disponible en haut de page).

ETAPE 12
Je vais crer une bordure biseaute sur ma forme. Pour cela je cre un nouveau calque et je
rcupre la slection de ma forme, ensuite je dplace la slection de 2 pixels droite et
gauche et je supprime.

Jutilise maintenant un masque de fusion (calque > masque de fusion > tout faire apparaitre) pour
camoufler le haut et le bas de ma bordure.

ETAPE 13
Je rajoute mon nom en bas gauche et voila le menu termin.
Pas mal non ?

Mot-cls : Charte graphique Expert Glossy Naviguation Photoshop