Le Forum de la Naruto Constant Team
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.

Le Forum de la Naruto Constant Team


 
Accueil[Tuto] Design Fb_nct10Twitter Ninja TookenDernières imagesRechercherS'enregistrerConnexion
Le Deal du moment :
Cartes Pokémon : la prochaine extension ...
Voir le deal

 

 [Tuto] Design

Aller en bas 
+2
John-Bond
JmB
6 participants
AuteurMessage
JmB
Chuunin
JmB


Nombre de messages : 341
Localisation : Paris
Date d'inscription : 18/07/2005

[Tuto] Design Empty
MessageSujet: [Tuto] Design   [Tuto] Design EmptyVen 12 Aoû 2005 - 0:40

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


Dernière édition par le Ven 12 Aoû 2005 - 6:09, édité 2 fois
Revenir en haut Aller en bas
http://jmbdesign.free.fr/
John-Bond
Chuunin
John-Bond


Nombre de messages : 216
Age : 32
Date d'inscription : 21/05/2005

[Tuto] Design Empty
MessageSujet: Re: [Tuto] Design   [Tuto] Design EmptyVen 12 Aoû 2005 - 0:58

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!!! +1**
Revenir en haut Aller en bas
JmB
Chuunin
JmB


Nombre de messages : 341
Localisation : Paris
Date d'inscription : 18/07/2005

[Tuto] Design Empty
MessageSujet: Re: [Tuto] Design   [Tuto] Design EmptySam 13 Aoû 2005 - 1:33

Bon des courageux l'on finit ste tuto ?
Revenir en haut Aller en bas
http://jmbdesign.free.fr/
Akabane
Senseï
Akabane


Nombre de messages : 589
Localisation : Un peu partout.Cherche les GetBackers pour les exterminer !
Date d'inscription : 04/07/2005

[Tuto] Design Empty
MessageSujet: Re: [Tuto] Design   [Tuto] Design EmptySam 13 Aoû 2005 - 2:35

Moi non j'ai rien compri ^^
Revenir en haut Aller en bas
JmB
Chuunin
JmB


Nombre de messages : 341
Localisation : Paris
Date d'inscription : 18/07/2005

[Tuto] Design Empty
MessageSujet: Re: [Tuto] Design   [Tuto] Design EmptyDim 14 Aoû 2005 - 2:37

Jme fais chier à faire un tuto design en fr, et personne arrive à le refaire...
sniff..sniffff..... T_T
Revenir en haut Aller en bas
http://jmbdesign.free.fr/
Neoxys
Senseï
Neoxys


Nombre de messages : 544
Localisation : Dans ma Conscience
Date d'inscription : 17/07/2005

[Tuto] Design Empty
MessageSujet: Re: [Tuto] Design   [Tuto] Design EmptyDim 14 Aoû 2005 - 4:09

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
Revenir en haut Aller en bas
http://www.pokebase.net/site
JmB
Chuunin
JmB


Nombre de messages : 341
Localisation : Paris
Date d'inscription : 18/07/2005

[Tuto] Design Empty
MessageSujet: Re: [Tuto] Design   [Tuto] Design EmptyDim 14 Aoû 2005 - 4:54

En faite il est pas recent, seulement sur le forum où je l'avais posté est maintenant fermé.
Donc autant en faire profiter .. hummmmmmm*
Revenir en haut Aller en bas
http://jmbdesign.free.fr/
[B£H£]
Elève à l'académie
[B£H£]


Nombre de messages : 16
Age : 33
Date d'inscription : 23/09/2006

[Tuto] Design Empty
MessageSujet: Re: [Tuto] Design   [Tuto] Design EmptySam 23 Sep 2006 - 20:20

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

https://2img.net/r/ihimizer/img382/5799/design2fq2.jpg

ps : première utilisation de photoshop Smile j'ai mis un truc du genre 1 heure pour le faire le design Sad
Revenir en haut Aller en bas
naru naruto
Genin
naru naruto


Nombre de messages : 166
Age : 29
Localisation : Troyes (10)
Date d'inscription : 26/06/2006

[Tuto] Design Empty
MessageSujet: [Tuto] Design   [Tuto] Design EmptySam 23 Sep 2006 - 23:19

Bah c'est bien pour une première utilisation de photoshop thumright
Moi c'était encore pire !!
Revenir en haut Aller en bas
Contenu sponsorisé





[Tuto] Design Empty
MessageSujet: Re: [Tuto] Design   [Tuto] Design Empty

Revenir en haut Aller en bas
 
[Tuto] Design
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Un design quelqu'un à dit un design ^^
» Pub & Design
» beta design
» design
» Design

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Le Forum de la Naruto Constant Team :: Créations et loisirs :: Graphisme-
Sauter vers: