Tutorial du site http://www.marblemad.com MENU FLOTTANT


Etape 1

Créer un nouveau document de la taille de votre futur site internet. Généralement, on part sur une base de 800x600 pixels auquel on substitura les bords du navigateur internet en plein écran soit environ 780x441 en incluant la barre google.
 
Créer un nouveau calque .
 
Le Remplir en gris bleu moyen (RVB:88,88,88).



Etape 2

Créer un nouveau calque .
 
Sélectionner un rectagle avec l'outil Rectangle de sélection d'une largeur de 760 pixels en laissant quelques pixels en haut et en bas du document comme dans l'exemple ci-dessus.
 
Remplir la sélection en blanc.



Etape 3

Créer un nouveau calque .
 
Dilater la sélection de 3 pixels.
 
Sélectionner comme couleur de premier plan la couleur RVB : 26,152,200.
 
Remplir la sélection avec la couleur de premier plan .



Etape 4

Avec l'outil Rectangle de sélection , sélectionner un rectangle sur le haut du rectangle blanc.
 
Effacer la sélection.



Etape 5

Appliquer ensuite le Style de calque :
Ombre interne :
Mode de fusion : Produit en noir
Opacité : 75%, Angle : 135°, Distance : 0px, Maigri : 0%, Taille : 5px, Contour : Linéaire, Bruit : 0%



Etape 6

Créer un nouveau calque .
 
Avec l'outil Rectangle de sélection , sélectionner un rectangle en bas de la partie blanche du haut du site comme dans l'exemple ci-dessus.
 
Choisir comme couleur de premier plan la couleur RVB : 236,220,61.
 
Remplir la selection avec la couleur de premier plan .



Etape 7

Créer un nouveau calque .
 
Avec l'outil Rectangle de sélection , sélectionner un rectangle en haut a gauche du site.
 
Remplir la selection avec en blanc.
 
Appliquer ensuite le Style de calque :
Ombre portée
Mode de fusion : Produit en noir
Opacité : 75%, Angle : 135°, Distance : 0px, Grossi : 0%, Taille : 8px, Contour : Linéaire, Bruit : 0%



Etape 8

Créer un nouveau calque .
 
Dilater la sélection de 3 pixels.
 
Sélectionner comme couleur de premier plan la couleur RVB : 121,121,121.
 
Remplir la sélection avec la couleur de premier plan .



Etape 9

Avec l'outil Rectangle de sélection , sélectionner un rectangle sur le haut du rectangle blanc comme dans l'exemple ci-dessous.
 
Effacer la sélection.



Etape 10

Avec l'outil Rectangle de sélection , sélectionner une ligne pour séparer les boutons du menu flotant comme dans l'exemple ci-dessus.
 
Effacer la sélection.
 
Répéter autant de fois qu'il vous faut de boutons.



Etape 11

Créer un nouveau calque .
 
Avec l'outil Rectangle de sélection , sélectionner le rectangle que forme de 1er bouton du menu flotant comme dans l'exemple ci-dessous.
 
Avec l'outil Dégradé , appliquer un dégradé vertical du blanc (en haut) au noir (en bas).
 
Dans la fenetre de calques, passer l'opacité du calque a 20%.



Etape 12

Avec l'outil Rectangle de sélection , sélectionner les 3 pixels du haut du bouton sur toute la largeur.
 
Remplir la sélection en noir.



Etape 13

En enfoncant les touches Ctrl , alt et Shift du clavier et grace à la souris, dupliquer le dégradé sur tous les boutons du menu flotant.



Etape 14

Il ne vous reste plus qu'a insérer votre logo dans la partie haute du menu flotant et a ajouter le nom des rubriques dans les boutons.


Copyright Jérome Boulinguez 1995/2007
Tous les éléments de ce site sont la propriété de leurs auteurs respectifs.
Toutes reproductions, distributions, commercialisations, copies sous quelques formes que ce soit est strictement interdit sous peine de poursuites.