 | | Sujet: Créer et découper une barre de navigation Mer 11 Fév - 18:33 | |
| Bonjour à tous !
Dans ce tuto, nous allons voir comment réaliser une barre de navigation et comment la découper.
/!\ ce tuto demande du temps et le patience ! /!\
Allons y !
~~~~~ La forme ~~~~~
1/ Créer tout d’abord une nouvelle image de dimension 700* 45 px avec un fond transparent.
2/ Donnons une forme à notre barre de nav. Etant donné que c’est bientôt la st valentin, je vais lui mettre des cœurs de chaque coté (brushes trouvés sur Devianart) puis je vais faire un rectangle légèrement arrondi (tracer un rectangle normal, faire clique droit >> sélection et choisir « rectangle arrondi). Appelez ce calque « forme »
3/ Ajoutons un peu de couleur. Créez un nouveau calque appelé « couleur ».Toujours pour rester dans mon thème St Valentin, je choisis du rouge et rose en dégradé.
Vous devriez avoir quelques choses de ce style.
4/ ajoutons maintenant un cadre à notre image. Créez un nouveau calque appelé « cadre ». Sélection votre calque forme et faire clique droit >> alpha vers sélection (dans la fenêtre des calques). Retournez ensuite sur votre calque de « cadre » et faites : édition >> tracer la sélection. Faites ensuite les réglages désirés.
~~~~~ Le texte ~~~~~
C’est ici que ça va se compliquer un peu (juste un peu ^^). Nous allons créer 4 calques de texte :
> Le premier contiendra : Forum, Portail, FAQ, Rechercher, Membres, Groupes, Profil, MP, Off
> Le second : MP !
> Le troisième : S’enregistrer
> Le quatrième : On
On y va !
1/ Prenez l’outil « texte », choisissez votre police et écrivez le texte du calque 1 (ci-dessus). Réglez la taille de votre police afin que tout le texte entre dans la barre de nav, placez le où bon vous semble.
2/ Dupliquer ce calque. Choisissez une autre couleur de texte afin de faire ressortir celui-ci. Remplacer le « MP » par « MP ! ». Une fois cette modification effectuée, grâce à l’outil « rectangle de sélection » sélectionnez le reste du texte (tout sauf « MP ! ») et supprimez le. Vous avez votre second calque.
3/ De la même couleur que le « MP ! », créez un nouveau calque de texte contenant « s’enregistrer » et, placer le au dessus du texte « membre » du premier calque.
4/ Enfin, créez un calque de texte contenant « On » de la même couleur que le premier calque de texte et placez le à coté de « s’enregistrer ».
Vous avez à présent vos 4 calques.
~~~~~ La préparation avant la découpe ~~~~
Ici, nous allons préparer nos calques afin de les découper.
1/ Tout d’abord, fusionnez ensemble les calques « forme », « couleur » et « cadre ».
2/ Dupliquez ensuite ce calque 3 fois. Et nommez chacun des calques comme suit :
> « nav_membre »
> « nav_invité »
> « nav_MP »
3/ Sur le calque « nav_membre » fusionnez le 1er calque de texte (celui avec tous les mots)
4/ Sur le calque « nav_invité », fusionnez les calques de texte « s’enregistrer » et « on »
5/ Enfin, sur le calque « nav_MP », fusionnez le calque de texte contenant « MP ! »
Le calque « nav_invité » est beaucoup trop long nous allons devoir le réduire. Pour cela, prenez l’outil « sélection rectangulaire ». Sélectionnez la partie droite de votre calque et faites « couper » (ctrl+X ). Faites ensuite « coller » (ctrl+V) et placez correctement cette sélection pour qu’elle corresponde au reste du calque. Placez ensuite cette copie en dessous du calque « nav_invité » et fusionnez.
Voici en image :
| Spoiler: | | |
>> Avant :
>> Copie de sélection
>> Après
 |
~~~~~ La découpe ~~~~
La partie la plus longue….
1/ Sélectionnez le calque « nav_membre ».
2/ Grâce à l’outil « sélection rectangulaire », sélectionnez le premier élément de votre barre de navigation (autrement dit, le mot « forum »). Repérez bien en bas la largeur de votre sélection (voir ce qui est surligné sur l’image)
3/ Faites « copier » (ctrl+c), puis faites « Fichier >> nouveau » (ou ctrl+n). Entrez la largeur que vous avez retenu, choisissez un fond transparent.
4/ Faites « coller ».
5/ Enregistrez.
Il ne vous reste plus qu’à répéter la même opération pour toute la barre.
/!\ Voici ce qu’il faut faire lorsque que vous êtes au « MP » /!\
1/ Refaites les opérations si dessus pour le texte « MP »
2/ Avant de poursuivre et de passer au « on », sélectionnez le calque « nav_mp » et faite copier (ctrl+c) puis nouveau (ctrl+N) et collez votre calque. Ainsi vous garderez les mêmes dimensions 
Pour la barre des invités, il vous suffit de sélectionner le calque « nav_invité » et de reproduire les mêmes opérations.
Voilà, vous avez fait une barre de nav’
Pour toutes questions concernant le tuto, c'est par [ ici] |
|
