Tutorial du site http://www.marblemad.com UN SITE DE A A Z (2)


Etape 1

Attaquons par la réalisation des menus de navigation.
 
Créer un nouveau calque .
 
Avec l'outil Ellipse de sélection , sélectionner un cercle sur le coté gauche de la zone de contenu, sous le logo, comme indiqué dans l'image si-dessus. Pour sélectionner un cercle parfait, n'oublier pas de laisser enfoncé la touche Shift pendant la sélection.
 
Remplir la sélection en blanc.



Etape 2

Pour dupliquer le cercle afin de créer un rectangle aux bords arrondis, appuyer sur le touche Shift , Ctrl et alt du clavier puis déplacer la sélection vers le bas de la zone de contenu avec la souris, bouton gauche enfoncé.
 
Avec l'outil Rectangle de sélection , sélectionner le rectangle entre les 2 cercles comme dans l'image si-dessus puis le Remplir en blanc.



Etape 3

Avec l'outil Rectangle de sélection , sélectionner un rectangle autour de la forme créer précedament, et de la même façon que l'étape précedente, dupliquer la forme vers la droite comme dans l'image si-dessus.
 
touches clavier Shift , Ctrl et alt enfoncées, déplacer la souris, bouton gauche enfoncé, vers la droite. lacher tout quand la forme est en position.
 
Avec l'outil Rectangle de sélection , sélectionner le rectangle entre les 2 formes comme dans l'image si-dessus puis le Remplir en blanc.



Etape 4

Créer un nouveau calque .
 
Toujours avec l'outil Ellipse de sélection , sélectionner un cercle sur le coté bas gauche du rectangle de menu comme indiqué dans l'image si-dessus. Pour sélectionner un cercle parfait, n'oublier pas de laisser enfoncé la touche Shift pendant la sélection.
 
Remplir la sélection en noir.



Etape 5

Pour dupliquer le cercle afin de créer un rectangle aux bords arrondis, appuyer sur le touche Shift , Ctrl et alt du clavier puis déplacer la sélection vers le haut de rectangle de menu avec la souris, bouton gauche enfoncé.
 
Avec l'outil Rectangle de sélection , sélectionner le rectangle entre les 2 cercles comme dans l'image si-dessus puis le Remplir en noir.



Etape 6

Avec l'outil Rectangle de sélection , sélectionner un rectangle autour de la forme créer précedament, et de la même façon que l'étape précedente, dupliquer la forme vers la gauche comme dans l'image si-dessus.
 
Touches clavier Shift , Ctrl et alt enfoncées, déplacer la souris, bouton gauche enfoncé, vers la gauche. lacher tout quand la forme est en position.
 
Avec l'outil Rectangle de sélection , sélectionner le rectangle entre les 2 formes comme dans l'image si-dessus puis le Remplir en noir.



Etape 7

Dans la fenetre de calques, passer le calque en mode incrustation , opacité : 10%.
 
Enfoncer la touche Ctrl du clavier et, toujours dans le fenetre de calques, cliquer sur le calque contenant le rectangle de menu noir pour créer une sélection de celui-ci.
 
Sélectionner ensuite le calque contenant le rectangle de menu blanc puis Effacer la sélection.
 
Appliquer ensuite les Style de calque suivant :
- Ombre portée :
Mode de fusion : Produit en noir
Opacité : 75%, Angle : 135°, Distance : 0px, Grossi : 0%, Taille : 5px, Contour : Linéaire, Bruit : 0%

- Biseautage et estampage :
Style : Biseau interne
Technique : Lisser, Profondeur : 75%, Direction : Haut, Taille : 4px, Flou : 0px
Angle : 135°, Elevation : 30°, Contour brillant : Linéaire non lissé.
mode des tons clairs : superposition en blanc, opacité : 75%.
mode d'ombrage : Produit en noir, opacité : 50%.



Etape 8

Créer un nouveau calque et avec l'outil Loupe , zoomer sur le côté haut gauche du rectangle de menu au minimum a 800%.
 
Avec l'outil Crayon , forme de 1 pixel, dessiner l'élement comme indiquer sur d'exemple ci-dessus.
 
Désélectionner l'élément, avec l'outil Loupe , dézoomer en cliquant sur le bouton droit de la souris sur votre document et choisir l'option Taille écran .
 
Sélectionner l'élement avec l'outil Rectangle de sélection .

 
Touches clavier Shift , Ctrl et alt enfoncées, déplacer la souris, bouton gauche enfoncé, vers le bas pour dupliquer les petites fleches. Reproduire la manipulation autant de fois que vous avez besoin de lignes de navigation.

 
Ajouter ensuite les éléments textes au menu avec l'outil Texte horizontal .



Etape 9

Passons maintenant au rectangle de contenu.
 
Créer un nouveau calque et créer un rectangle a bords arrondis noir de la même façon qu'au début du tutorial.



Etape 10

Dupliquer le calque puis appliquer la commande Négatif de cette duplication.



Etape 11

Dans la fenetre de calque, sélectionner le calque contenant le rectangle de contenu noir et passer le en mode incrustation , opacité a 20%.
 
Sélectionner le calque contenant le rectangle de contenu blanc et passer le en mode Produit .
 
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 12

Créer un nouveau calque et recréer un nouveau rectangle a bords arrondis blanc a l'intérieur du 1er rectangle de contenu comme dans l'exemple si-dessus.



Etape 13

Dupliquer le calque.
 
Dans la fenetre de calque, sélectionner le calque contenant le 1er rectangle blanc et passer le en mode incrustation , opacité a 20%.
 
Sélectionner le calque contenant le 2eme rectangle blanc et passer le en mode Produit .
 
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 14

De la même façon que vous avez créer le rectangle de menu de l'étape 1 a 7, créer un contour d'image pour votre site.
 
Une fois toutes les étapes réalisées, Supprimer le calque contenant le rectangle noir.
 
Dans la fenetre de calque, il ne vous reste qu'a placer le claque contenant l'image juste en dessous du calque contenant le contour d'image



Etape 15

Ajouter ensuite les éléments textes au rectangle de contenu avec l'outil Texte horizontal .
 
Suite du tutorial avec l'intégration html du webdesign dans le tutorial « un site de A a Z (3) ».


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.