*********************
TUTO_TEMPLATE (DESIGN)
*********************


////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////

Motif début :

------------------------------------------------------------------


- Créer un nouveau document (fichier, nouveau), en 1 par 3, nommé le "scilines".

>> ILLUSTRATION motif

- Prenez l'outil zoom (Z), et faite un zoom en 1600 %.

>> ILLUSTRATION motif_2

- Prenez l'outil de sélection (M), faite une sélection de 1px en haut. Remplissez le de noir.

>> ILLUSTRATION motif_3

- Cliquer sur : (édition, utiliser comme motif).

>> ILLUSTRATION motif_4

- Nommé le "scilines", puis validez sur OK.

>> ILLUSTRATION motif_5


------------------------------------------------------------------

/Motif fin

////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////

------------------------------------------------------------------

Création du Template début :

------------------------------------------------------------------


- Créer un nouveau document (fichier, nouveau) en 800 par 600, j'ai pris une résolution assé petite pour être sur quelle s'adapte dans toutes les résolutions et sur tout les navigateurs.

>> ILLUSTRATION 1

- Placer votre fond comme indiqué, puis créer un nouveau calque (Ctrl, Shift, N) nommé le barre bas. Avec l'outil de sélection (M), sélectionner une zone comme je l'ai fais. Remplissez le avec la couleur = #9E9C9C.

>> ILLUSTRATION 2

- Clic droit sur le calque, puis options de fusion. Mettre ensuite les valeurs que j'ai mis dans ombre portée, lueur externe, incrustation en dégradé (couleur du dégradé = #6A6A6A et #C1BDBD), les couleurs sont du plus foncé au plus clair.

> ILLUSTRATION 3 >> ILLUSTRATION 4 >>> ILLUSTRATION 5

- Ensuite dupliquer votre calque (claque, dupliquer le calque)

>> ILLUSTRATION duplic

- Placer le comme sur l'illustration

>> ILLUSTRATION 6

- Cliquer sur votre calque en maintenant Ctrl enfoncé, il y aura des pointillés autour de la sélection.

>> ILLUSTRATION 7

- Appuyer sur Ctrl, Shift et N en meme temps, cela va vous créer un nouveau calque. Remplissez votre calque de n'importe quelle couleur. Mettez le fond sur 0%, puis clic droit sur votre calque et options de fusion. Incrustation de motif, et mettre le motif que l'on a fait dans l'étape plus haute à une opacité de 13%.

>> ILLUSTRATION 8

- Dupliquer votre calque avec les motifs que vous venez de faire. Placer le sur la barre du haut cette fois ci ( /!\ le calque doit être placé au dessus du calque de la barre du haut, sinon les motifs ne seront pas visible /!\ ).

>> ILLUSTRATION 9

- Voila ce que vous devez avoir :

>> ILLUSTRATION 10

- Prenez ensuite le lasso polygonal (L) :

>> ILLUSTRATION 11

- Faite à peu près la même sélection que moi et remplissez là avec la couleur = #9E9C9C.

>> ILLUSTRATION 12

- Refaite la meme étape que celle avec les motifs avec la barre.

>> ILLUSTRATION 13

- Dupliquer votre calque (claque, dupliquer le calque). Puis cliquer sur : (édition, transformation, symétrie axe horizontal).

>> ILLUSTRATION 14

- PLacez votre calque comme ceci :

>> ILLUSTRATION 15

- Créer un nouveau calque (Ctrl, Shift, N) et faite un zoom en 1600% avec l'outil loupe (Z) sur la barre du bas de votre header. Prenez ensuite l'outil de sélection (M) et faite comme sur l'illustration, une bande blanche et une noir.

>> ILLUSTRATION 16

- Mettre l'opacité sur 30%.

>> ILLUSTRATION 17

- Dupliquer autant de fois que vous le voulez pour obtenir un résultat proche de celui-ci.

>> ILLUSTRATION 18

- Dupliquer le calque barre bas, avec ses scilines et placez-les en bas de votre page.

>> ILLUSTRATION 19

- Créer un nouveau calque (Ctrl, Shift, N), puis remplissez le avec du blanc. Placez le ensuite en dessous de tout les autres calques. Vous devez obtenir quelque chose comme sa :

>> ILLUSTRATION 20

- Créer à nouveau un calque (Ctrl, Shift, N), prenez l'outil de sélection (M) et faite une sélection à peu près comme la mienne. Remplissez là avec la couleur = #9E9C9C.

>> ILLUSTRATION 21

- Sélectionnez le calque barre bas, puis clic droit dessus, cliquez sur copier le style de calque.

>> ILLUSTRATION 22

- Sélectionnez maintenant le calque que vous venez de faire. Clic droit et cette fois ci, coller le style de calque.

>> ILLUSTRATION 23

- Créer un nouveau calque (Ctrl, Shift, N), prenez l'outil de sélection (M), faite une sélection comme la mienne et remplissez là avec la couleur = #A6A5A5. Veuillez à bien placer le calque en dessous de la barre qu'on a créé à l'étape précédente.

>> ILLUSTRATION 24

- Prenez l'outil texte (T), et sur votre calque barre bas, écrivez le texte que vous voulez. Dans mon exemple j'ai mis Link à chaque fois, mais mettez un truc du style Home, Gallery, ...

> ILLUSTRATION 25 >> ILLUSTRATION 26

- Répéter autant de fois l'opération que nécessaire.

>> ILLUSTRATION 27

- Vous devez obtenir quelque chose dans ce style :

>> ILLUSTRATION template_tuto

- Vous pouvez aussi l'améliorer. Cela ma prit quelques secondes et sans forcer. Donc vous pouvez faire beaucoup mieux que moi je vous rassure.

>> ILLUSTRATION template_tuto2


------------------------------------------------------------------

/Création du Template fin

////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////


Outil de réalisation : Photoshop CS

::JmB

Je vais essayer on verra bien le resultats mais moi j'ai photoshop7.0 et c'est pas pareil bon bah je vais quand meme essayer!!!

Bon des courageux l'on finit ste tuto ?

Moi non j'ai rien compri ^^

Jme fais chier à faire un tuto design en fr, et personne arrive à le refaire...
sniff..sniffff..... T_T

Tu aurait pu le faire apres le concourt =) Mais bon c'est pas grave, c'est tres bon et cela servira surement u generation future =P

En faite il est pas recent, seulement sur le forum où je l'avais posté est maintenant fermé.
Donc autant en faire profiter ..

j'ai essayé mais je ne pense pas que le résultat soit super

http://img382.imageshack.us/img382/5799/design2fq2.jpg

ps : première utilisation de photoshop j'ai mis un truc du genre 1 heure pour le faire le design