Tutorial du site http://www.marblemad.com BANDEAU A ICONES


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 moyen de valeur RVB : 184,184,184



Etape 2

Créer un nouveau calque .
 
Avec l’outil Rectangle de sélection , sélectionner un rectangle au centre du document de toute la hauteur de celle-ci. Détail important : il faut que la largeur de votre rectangle soit divisible par le nombre de rubriques principales que procédera votre site. Dans notre exemple, j’ai créé un rectangle de 522 pixels pour y placer 6 rubriques de 87 pixels. Noter bien cette largeur de rubrique car elle vous sera utile très bientôt.
 
Remplir la sélection en blanc.
 
Appliquer 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%



Etape 3

Toujours avec l’outil Rectangle de sélection , sélectionner un rectangle en partie haute de toute la largeur de la zone blanche créé précédemment comme dans l’exemple ci contre. Si vous devais placer un logo dans cette zone, sélectionner le rectangle un peu plus haut que le mien.
 
Choisir comme couleur de premier plan la couleur de valeur RVB : 145,186,220 et comme [couleur d’arrière-plan] la couleur de valeur RVB : 223,239,255.
 
Avec l’outil Dégradé en mode Dégradé linéaire et de type Premier plan - Arrière-plan, créer un dégradé verticale de haut en bas en sélectionnant avec la souris un point un bas de la sélection puis, en gardant le bouton de la souris enfoncé ainsi que la touche Shift du clavier, déplacer votre pointeur de souris vers le point haut de la sélection.



Etape 4

Créer un nouveau calque .
 
Avec l’outil Rectangle de sélection , sélectionner du côté gauche du dégradé, un rectangle de 15 pixels de large a 15 pixels au dessus le bas de dégradé jusqu'à une 30ene de pixel en dessus comme dans l’exemple ci-contre.
 
Remplir la sélection en blanc.
 
Avec les touches Ctrl + alt , glisser/déposer avec la souris le rectangle rempli de blanc de la largeur d’une rubrique calculé a l’étape 2 moins les 15 pixels de largeur du rectangle. Ici : 87 – 15 = 72 pixels.



Etape 5

Avec l’outil Lasso polygonal , créer une sélection entre les deux rectangles blancs avec un biseau a 45° de chaque côté comme dans l’exemple ci-contre. Pour tracer des verticales, des horizontales et des lignes a 45°, enfoncer la touche Shift pendant votre sélection.
 
Remplir la sélection en blanc.



Etape 6

Avec l’outil Rectangle de sélection , sélectionner un rectangle englobant la totalité de la forme créé précédemment. Avec les touches Ctrl + alt , glisser/déposer avec la souris la sélection autant de fois que vous avez de rubriques principales.



Etape 7

Créer un nouveau calque .
 
Dans la fenêtre de calques, cliquer sur le calque contenant la forme blanche créée précédemment avec la touche Ctrl du clavier enfoncé afin de créer une sélection de la forme contenu dans ce calque.
 
Utiliser la flèche basse du clavier pour décaler la sélection de 1 pixel vers le bas.
 
Avec l’outil Dégradé linéaire , créer un dégradé horizontal du noir au blanc comme dans l’exemple ci-dessus.

 
Dans la fenêtre de calque, passer l’opacité du calque a 15%.



Etape 8

Créer un nouveau calque .
 
Avec l’outil Rectangle de sélection , sélectionner une ligne entre les 2 premières zones de rubriques du site comme dans l’exemple ci-dessus.
 
Remplir la sélection en noir.
 
Avec les touches Ctrl + alt , glisser/déposer avec la souris la sélection autant de fois que vous avez de rubriques principales.



Etape 9

Appliquer un Contour progressif de 10 pixels puis Effacer plusieurs fois la sélection pour obtenir le même résultat que dans l’exemple ci-dessus.
 
Dans la fenêtre de calque, passer l’opacité du calque a 30%.



Etape 10

Créer un nouveau calque .
 
Avec l’outil Rectangle de sélection , sélectionner un rectangle de 5 à 7 pixels de haut et de toute la largeur du site juste en dessous de la partie blanche du haut comme dans l’exemple ci-dessus. < br>
Avec l’outil Dégradé linéaire , créer un dégradé horizontal du noir au blanc comme dans l’exemple ci-contre.
 
Dans la fenêtre de calque, passer le calque en mode Produit et l’opacité du calque a 15%.



Etape 11

Attaquons maintenant une forme rectangulaire à bords arrondies ressemblant à un écran afin de créer une unité aux icones qui seront placées par-dessus plus tard.
 
Créer un nouveau calque .
 
Avec l'outil Ellipse de sélection , sélectionner un petit cercle dans dans l’exemple ci-dessus. Pour sélectionner un cercle parfait, n'oublier pas de laisser enfoncer la touche Shift pendant la sélection.
 
Remplir la sélection en blanc.

 
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 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 12

Avec l'outil Rectangle de sélection , sélectionner un rectangle autour de la forme créer précédemment, et de la même façon que l'étape 11, dupliquer la forme comme dans l'image si-dessus.
 
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 13

Dans la fenêtre de calques, cliquer sur le calque contenant la forme blanche créée précédemment avec la touche Ctrl du clavier enfoncé afin de créer une sélection de la forme contenu dans ce calque.
 
Contracter la sélection de 4 pixels.
 
Créer un nouveau calque .
 
Sélectionner comme couleur de premier plan une couleur bleu de valeur RVB : 84,125,214

 
Remplir la sélection avec la couleur de premier plan .



Etape 14

Appliquer le Style de calque :

Style : Biseau interne
Technique : Lisser, Profondeur : 100%, Direction : Haut, Taille : 2px, Flou : 2px
Angle : 135°, Elevation : 30°, Contour brillant : Linéaire non lissé.
mode des tons clairs : superposition en blanc, opacité : 75%.
mode d'ombrage : superposition en blanc, opacité : 75%.

Et le Style de calque :

Taille : 1px
Position : Extérieur
Mode de fusion : normal
Opacité : 60%
Type : Couleur
Couleur : R:117, V:163, B:242



Etape 15

Créer un nouveau calque .
 
Dans la fenêtre de calques, cliquer sur le calque contenant la forme bleu créée précédemment avec la touche Ctrl du clavier enfoncé afin de créer une sélection de la forme contenu dans ce calque.
 
Avec l’outil Dégradé radial , créer un dégradé du blanc au noir comme dans l’exemple ci-dessus.
 
Dans la fenêtre de calques, passer le calque en mode lumière tamisée et une opacité de 50%



Etape 16

Créer un nouveau calque
 
Remplir la sélection de blanc.
 
Avec l’outil Ellipse de sélection , sélectionner une ellipse incluant la partie droite basse du rectangle blanc créé précédemment comme dans l’exemple ci-dessus.
 
Effacer la sélection.



Etape 17

Dans la fenêtre de calques, passer le calque en mode incrustation , opacité a 40%.
 
Toujours dans la fenêtre de calques, liés tous les calques contenant les éléments de l’écran ( Il doit y en avoir 4 ) puis Fusionner les calques liés .



Etape 18

Faite faire une Rotation d’une 30ene de degrés a l’écran comme dans l’exemple ci-dessus.
 
Ajouter le Style de calque :
Ombre portée
Mode de fusion : Produit en noir
Opacité : 40%, Angle : 135°, Distance : 3px, Grossi : 0%, Taille : 8px, Contour : Linéaire, Bruit : 0%



Etape 19

Avec l’outil Rectangle de sélection , sélectionner un rectangle englobant la totalité de la forme d’écran. Avec les touches Ctrl + alt , glisser/déposer avec la souris la sélection autant de fois que vous avez de rubriques principales.



Etape 20

Il ne reste plus qu’a ajouter vos icones et les textes de rubrique en dessous de chaque icône.
 
Si vous avez un logo, placer le a gauche dans la zone en dégradé bleu.


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.