Tutorial du site http://www.marblemad.com SITE A ONGLETS


Etape 1

Créer un nouveau document de 800x600 pixels.
Remplir le fond de la couleur RGB : 112,107,106.
 
Créer un nouveau calque .
 
Avec l'outil Ellipse de sélection , sélectionner un cercle sur le coté haut gauche du document 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.

 
Choisir la couleur RGB : 226,215,180 comme couleur de premier plan puis Remplir la sélection de la couleur de premier plan .



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 sur le bord droit du document 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 de la même couleur que les cercles.



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 2, dupliquer la forme 2 fois en bas du document comme dans l'image si-dessus.
 
touches clavier Shift , Ctrl et alt enfoncées, déplacer la souris, bouton gauche enfoncé, vers le bas. lacher tout quand la forme est en position et renouveler la manipulation pour dupliquer la forme a nouveau.



Etape 4

Comme pour l'étape 2, avec l'outil Rectangle de sélection , sélectionner le rectangle entre les 2 formes du haut comme dans l'image si-dessus puis le Remplir de la même couleur que les formes.



Etape 5

Avec l'outil Rectangle de sélection , sélectionner ensuite le bord haut droit du rectangle a bords arrondis dans l'image ci-dessus puis dupliquer la sélection comme pour les étapes 2 ou 3 : appuyer sur le touche Shift , Ctrl et alt du clavier puis déplacer avec la souris, bouton gauche enfoncé, la sélection vers le haut comme dans l'image ci-dessus.
 



Etape 6

Sélectionner ensuite le bord haut gauche du rectangle a bords arrondis et comme dans l'étape précedente, dupliquer la sélection et l'aligner a gauche de l'élément créer a l'étape précedente.
 
Une fois l'élément en place, appliquer une inclinaison dans le menu Edition > Transformation > Inclinaison . cliquer sur le petit rectangle central du bas avec la souris et bouton enfoncé, déplacer le curseur vers la gauche pour obtenir une inclinaison d'a peu prés 45°.
 
Appliquer l'inclinaison en double-cliquant a l'intérieur de la sélection.



Etape 7

répéter l'étape 5 et 6 pour réaliser la même escroisance sur la gauche de l'élement bas du document comme dans l'image ci-dessus.



Etape 8

Créont maintenant les autres onglets. Avec l'outil Rectangle de sélection , sélectionner l'onglet haut droit comme dans l'image ci-dessus.
 
Appuyer ensuite sur les touches clavier : Ctrl + c pour copier la sélection puis Ctrl + v pour coller la sélection dans un nouveau calque.
 
Dans la fenetre de calques, passer le calque nouvellement créer sous le calques contenant la forme principale.



Etape 9

Avec l'outil déplacement , déplacer le nouvelle onglet aligné a gauche de l'onglet de droite.
 
Changer la luminosité de l'onglet dans le menu Image > Réglages > Teinte/Saturation :
Teinte : 0
Saturation : 0
luminosité : -21



Etape 10

Reproduire les étapes 8 et 9 autant de fois qu'il vous faut d'onglets en diminuant de plus en plus la luminosité.



Etape 11

Dans la fenetre de calque, sélectionner le calque contenant la forme principale.
 
Avec l'outil Rectangle de sélection , sélectionner un rectangle autour de l'élément bas du document.
 
Changer la luminosité de l'élément bas dans le menu Image > Réglages > Teinte/Saturation :
Teinte : 0
Saturation : 0
luminosité : -21



Etape 12

Passont maintenant au menu de navigation.
 
Créer un nouveau calque .
 
Avec l'outil Ellipse de sélection , sélectionner un cercle sur le coté haut gauche du document 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.
 
Choisir la couleur du dernier onglet (ici RGB : 152,145,123) comme couleur de premier plan puis Remplir la sélection de la couleur de premier plan .



Etape 13

comme dans l'étape 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 sur le bord droit du document 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 de la même couleur que les cercles.
 
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 12, dupliquer la forme en haut de l'interface comme dans l'image si-dessus.
 
touches clavier Shift , Ctrl et alt enfoncées, déplacer la souris, bouton gauche enfoncé, vers le haut. lacher tout quand la forme est en position.



Etape 14

avec l'outil Rectangle de sélection , sélectionner le rectangle entre les 2 formes puis le Remplir de la même couleur que les formes pour obtenir un rectangle aux bords arondies.



Etape 15

Il ne vous reste plus qu' ajouter votre logo dans la zone haut/gauche a côté des onglets.
 
Aprés la découpe pour l'intégration HTML, placer vos liens de rubrique dans les onglets comme dans l'image ci-dessus.
 
Remplisser le menu des sous-rubriques de votre site. Ici, j'ai créer une séparation sous la forme d'une ligne en pointillé entre chaque liens dans le menu ainsi qu'une petite fleche devant chaques liens.



Etape 16

Ajouter ensuite votre contenu dans la zone a droite du ou des menus de nagivation.
 
Utiliser l'élément bas du webdesign pour placer votre copyright !!


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.