Tutorial du site http://www.marblemad.com BANDEAU PHOTO


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:104,120,127).



Etape 2

Créer un nouveau calque .
 
Sélectionner un rectagle avec l'outil Rectangle de sélection d'une largeur de 760 pixels, toute hauteur.
 
Remplir la sélection 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 : 5px, Contour : Linéaire, Bruit : 0%

 
Pourquoi 760 pixels de largeur ?
C'est a quelques pixels de moins pret, la largeur des navigateurs internet en plein écran en 800x600 de résolution d'écran. Ainsi, votre site sera compatible 800x600 pixels ou + (Les bords colorés vont s'agrandir avec la taille de la fenetre du navigateur et la zone contenu sera centrée sur la page).



Etape 3

Créer un nouveau calque et Remplir la sélection en noir cette fois ci.
 
Avec l'outil Ellipse de sélection , sélectionner un ovale sur la partie haute de toute la largeur du document comme dans l'exemple ci-dessus.
 
Effacer ensuite la sélection.



Etape 4

Avec l'outil Rectangle de sélection , sélectionner la partie haute et basse du noir restant comme dans l'exemple ci-dessus.
 
Effacer les sélections.



Etape 5

importer maintenant votre photo dans le document.
 
Dans la fenetre de calques, cliquer sur le calque contenant la forme noir avec le bouton Ctrl enfoncé pour faire une sélection de celle-ci.
 
Cliquer ensuite sur l'icone Ajouter un masque vectoriel situé en bas de la fenetre de calques.



Etape 6

Dans la fenetre de calques, sélectionner la vignette de masque de fusion de calque contenant la photo.
 
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 7

Créer un nouveau calque .
 
Dans la fenetre de calques, cliquer sur la vignette de calque contenant la forme noir du debut pour sélectionner celle-ci.
 
Intervertir la sélection et la Remplir en noir.
 
Dilater ensuite la selection de 3 pixels et Effacer la.



Etape 8

Dans la fenetre de calques, cliquer sur la vignette de calque contenant le rectangle blanc pour sélectionner celui-ci.
 
Intervertir et Effacer la sélection.



Etape 9

Avec l'outil Rectangle de sélection , sélectionner un rectangle de 3 pixels de large au dessus a gauche de la forme créer precedament comme dans l'exemple ci-dessus.
 
Avec l'outil Dégradé , remplir la sélection d'un dégradé vertical du noir (en bas) vers le transparent (en haut).



Etape 10

En enfoncant les touches Ctrl , alt et Shift du clavier et grace à la souris, copier le dégradé précédament créer sur la partie droite du dessin comme dans l'exemple ci-dessus.



Etape 11

Dans la fenetre de calques, passer le calque en opacité 30%



Etape 12

Toujours dans la fenetre de calques, créer un nouveau calque entre le calque contenant le rectangle blanc et le calque contenant la photo.
 
Avec l'outil Rectangle de sélection , sélectionner le rectangle par dessus la forme haute du document comme dans l'exemple ci-dessus.
 
Avec l'outil Dégradé , créer un dégradé vertical du noir (en bas) au blanc (en haut) comme dans l'exemple ci-dessus.
 
Dans la fenetre de calques, passer l'opacité du calque a 30%.



Etape 13

Créer encore un nouveau calque .
 
Avec l'outil Rectangle de sélection , sélectionner un rectangle en dessous de la photo comme dans l'exemple ci-dessus.
 
Avec l'outil Dégradé , créer un dégradé vertical du noir (en bas) au blanc (en haut) comme dans l'exemple ci-dessus.
 
Dans la fenetre de calques, passer l'opacité du calque a 30%.



Etape 14

Créer encore un nouveau calque .
 
Avec l'outil Rectangle de sélection , sélectionner la ligne juste en dessous du rectangle créer précédament comme dans l'exemple ci-dessus.
 
Remplir la sélection en noir.
 
Dans la fenetre de calques, passer l'opacité du calque a 40%.



Etape 15

Créer encore un nouveau calque .
 
Avec l'outil Rectangle de sélection , sélectionner une ligne de séparation de bouton dans le rectangle précédament créer comme dans l'exemple ci-dessus.
 
Remplir la sélection en noir.
 
Déplacer la sélection de 1 pixel vers a droite en appuyant 1 fois sur la touche [fleche droite] du clavier.

 
Remplir cette nouvelle sélection en blanc.

 
Dans la fenetre de calques, passer l'opacité du calque a 40%.



Etape 16

En enfoncant les touches Ctrl , alt et Shift du clavier et grace à la souris, dupliquer autant de fois qu'il le faut les lignes précédaments crées vers la partie droite du rectangle comme dans l'exemple ci-dessus.



Etape 17

Avec l'outil Rectangle de sélection , sélectionner un rectangle englobant la partie haute du rectangle de boutons comme dans l'exemple ci-dessus.
 
Appliquer ensuite un Contour progressif de 20 pixels et Effacer la sélection 3 fois de suite.



Etape 18

Il ne vous reste plus qu'a insérer votre logo dans la partie haute du bandeau et a ajouter le nom des rubriques dans les boutons au moment de l'intégration html du webdesign.


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.