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


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 foncé (RVB:40,40,40).



Etape 2

Appliquer ensuite le Filtre > Bruit > Ajout de bruit :
Facteur : 4 %
Répartition : Uniforme
Monochromique coché



Etape 3

Puis le Filtre > Atténuation > Flou gaussien :
Rayon : 0,3 pixel



Etape 4

et pour finir avec la texture de fond, le Filtre > Renforcement > Accentuation :
Gain : 50%
Rayon : 1 pixel
Seuil : 0 niveaux



Etape 5

Dupliquer le calque de fond.
 
Changer la Luminosité/Contraste du calque dupliqué :
Luminosité : 50
Contraste : -50



Etape 6

Avec l'outil Rectangle de sélection , sélectionner un rectangle au centre du document qui sera votre fond de page web.
 
Intervertir puis Effacer la sélection.



Etape 7

Appliquer les Style de calque suivant :
 
- Ombre portée :
Mode de fusion : Produit en noir
Opacité : 100%, Angle : 135°, Distance : 0px, Grossi : 2%, Taille : 10px, Contour : Linéaire, Bruit : 0%

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



Etape 8

Pour créer le bandeau haut du site,
 
Créer un nouveau calque .
 
Sélectionner avec l'outil Rectangle de sélection un rectangle en haut du rectangle précédament créé de 3 pixels plus petit comme dans l'exemple ci-dessus.
 
Remplir la sélection en noir...

 
et, dans la fenetre de calques, passer le calque en mode incrustation , opacité à 40%.



Etape 9

Tout en gardant la sélection active, créer de nouveau un nouveau calque .
 
Remplir la sélection en blanc.
 
Dans la fenetre de calques, passer le calque en mode Produit .
 
Appliquer 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 10

Créer un nouveau calque et avec l'outil Loupe , zoomer sur n'importe qu'elle zone de votre document au minimum a 800%.
 
Avec l'outil Crayon , forme de 1 pixel, dessiner l'élement comme indiquer sur d'exemple ci-dessus.
 
Une fois terminé, sélectionner l'élement avec l'outil Rectangle de sélection puis ajouter le a la liste des motifs dans le menu Edition > Utiliser comme motif .



Etape 11

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 .
 
Remplir le calque avec le motif précédament créé.



Etape 12

Dans la fenetre de calques, passer le calque en mode incrustation , opacité : 5%.
 
Enfoncer la touche Ctrl du clavier et, toujours dans le fenetre de calques, cliquer, au choix, sur l'un des 2 calques contenant le rectangle formant le bandeau haut pour créer une sélection de celui-ci.
 
Intervertir puis Effacer la sélection obtenue.



Etape 13

Passont maintenant a la réalisation des boutons de rubriques du site.
 
Créer un nouveau calque .
 
Avec l'outil Ellipse de sélection , sélectionner un cercle sur le coté haut droit de la zone bandeau 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 14

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 bandeau haut 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 15

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 blanc.



Etape 16

Appliquer les Style de calque suivant :
 
- Ombre portée :
Mode de fusion : Produit en noir
Opacité : 100%, Angle : 135°, Distance : 0px, Grossi : 15%, Taille : 5px, Contour : Linéaire, Bruit : 0%

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

 
Passer le calque en mode incrustation , opacité à 50%.



Etape 17

Créer un nouveau calque .
 
Dans la fenetre de calques, le bouton Ctrl du clavier enfoncé, cliquer sur le calque du bouton précédament créer pour en faire une sélection.
 
Avec l'outil Dégradé , créer un dégradé horizontal du blanc (en haut de bouton) au noir (en bas de bouton).
 
Passer le calque en mode lumière tamisée , opacité à 30%.



Etape 18

Dans la fenetre de calques, sélectionner l'avant dernier calque : Celui qui contient les boutons avec les effects de calque.
 
Avec l'outil Rectangle de sélection , sélectionner un rectangle autour du bouton.
 
Touches du clavier Shift , Ctrl et alt enfoncées, déplacer la souris, bouton gauche enfoncé, vers la gauche pour dupliquer le bouton. Lacher tout quand le bouton est en place. répéter l'opération autant de fois qu'il faut de boutons.
 
Effectuer les mêmes opérations avec le dernier calque : Celui qui contient le dégradé du bouton.



Etape 19

Il ne vous reste plus qu'a ajouter vos titres de rubrique avec l'outil Texte et d'intégrer votre logo dans la zone a droite du bandeau haut.
 
Suite de la création du webdesign dans le tutorial « un site de A a Z (2) ».


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.