AccueilPortailFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 ajouter les boutons inscription et on à une barre de navig

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Lunard
Chef
Chef
avatar

Féminin
Nombre de messages : 642
Age : 28
Date d'inscription : 01/04/2006

MessageSujet: ajouter les boutons inscription et on à une barre de navig   Jeu 25 Juin 2009, 22:44

Ce tuto est la suite de celui-ci:
http://lunard.naturalforum.net/photoshop-f15/dcouper-une-barre-de-navigation-avec-repres-et-tranches-t301.htm

Nous avons une barre de navigation connecté découpée selon le tutoriel précédent, et nous voulons ajouter les boutons manquants, c'est à dire S'inscrire et On

voici ma barre de navigation:

et son découpage:


La première question à se poser est: où veux t-on que se trouvent les boutons s'inscrire et on sur la barre de navigation des non inscrits?
Avant sur forumactif, le bouton s'inscrire se trouvait par défaut après le bouton recherche, et était suivit du bouton On. Depuis peu les boutons membres, groupe et profil peuvent être visibles également des non inscrits, par défaut les non-inscrits voient, dans l'ordre:
forum (portail) (calendrier) faq search s'inscrire membres groupes on
on peut changer ces permissions dans "utilisateurs et groupes" => "permissions spéciales", pour revenir à l'ancien affichage par exemple, mais on peut réalisé des centaines de combinaisons pour faire une barre de navigation sur mesure.

Pour ce tuto, je vais dire que je veux les nouveaux réglages par défaut de forumactif, donc la barre des non connectés comme ceci:
Forum Portail Faq Search S'inscrire Membres Groupes On


Mon bouton S'inscrire sera donc entre le bouton Search et le bouton Membre, et je veux qu'il n'y ai pas de coupure dans la barre, or les boutons Search et Membre de la barre de navig non connecté sont les même que ceux de la barre connectés, impossible d'en faire deux versions.

Le bouton S'inscrire sera à droite du bouton Search. A droite du bouton Search de la barre de navig connecté, il y a le bouton Membres; donc la partie gauche du bouton membres se colle parfaitement à la droite du bouton Search, on va donc utiliser la gauche du bouton membres pour créer la gauche du bouton s'inscrire.

De même,
le bouton S'inscrire sera à gauche du bouton Membres. A gauche du bouton Membre de la barre de navig connecté, il y a le bouton Search; donc la partie droite du bouton search se colle parfaitement à la droite du bouton Membres, on va donc utiliser la droite du bouton Search pour créer la droite du bouton s'inscrire.

En conclusion, on va construire notre bouton S'inscrire en utilisant la gauche du bouton membres et la droite du bouton search.

[ Si j'avais voulu placer mon bouton s'inscrire entre les boutons search et on, comme dans l'ancienne barre de navig par défaut:
j'aurais du utiliser la gauche du bouton membre, car celui ci se trouve à la droite du bouton search, et que je veux mon s'inscrire à la droite du boutons search
Si je décide de remplacer le texte Off en On, pour créer un bouton On strictement identique au bouton off mis à part le texte, j'aurais du utiliser la droite du bouton Mp, car il se trouve à la gauche du bouton Off et que je veux placer mon s'inscrire à la gauche du bouton On ]

Un peu compliqué?
Pour résumer, on se demande entre quel et quel bouton le S'inscrire se trouvera, et on utilise pour le réaliser la partie gauche du bouton se trouvant à droite du bouton qui est à gauche du s'inscrire. Et inversement pour la partie droite du s'inscrire. Une fois qu'on a la gauche et la droite, on a plus qu'à les fondre.

Pour ceux qui auraient le plus de mal à me suivre: posez vous ces questions:
1- quel bouton sera à gauche du s'inscrire?
2- quel bouton est à droite du bouton de la réponse précédente dans la barre connecté?
On utilisera la partie gauche de ce bouton pour réaliser le s'inscrire
4- quel bouton sera à droite du s'inscrire?
5- quel bouton est à gauche du bouton de la réponse précédente dans la barre connecté?
On utilisera la partie droite de ce bouton pour réaliser le s'inscrire
Le s'inscrire sera composé d'un fondu entre ces deux boutons


Bien assez parlé, vous avez tous du trouver quels boutons serviront à la gauche et à la droite de votre S'inscrire, passons à la réalisation.

1) On crée une nouvelle image de la même hauteur que la barre de navig, et de longueur correspondant environ à la taille que prendra le bouton s'inscrire, ou un peu plus grand, on recadrera en longueur à la fin.
On sélectionne le bouton dont à dis qu'il servirait à la partie gauche du bouton, on laisse le texte et une couleur de fond, et on le colle dans la nouvelle image, tout à gauche



2) On cache le calque texte et le calque fond dans la barre de navigation, et on copie avec fusion la même chose. On le colle au même endroit sur la nouvelle image, l'intérêt d'avoir copié avec le texte et le fond tout à l'heure est de s'assurer qu'il n'y aura aucun décalage de hauteur du bouton s'inscrire avec les autres boutons, et aidera à placer le texte à la bonne hauteur plus tard. Une fois le bouton sans fond et texte bien placé, on peut masquer le bouton avec fond et texte.



3) On sélectionne le bouton dont on a dit qu'il servirait à la droite de notre bouton s'inscrire, sans texte et sans fond, on le copie avec fusion et on le colle dans la nouvelle image, à droite.
Si votre barre de navigation a une forme complexe, il peut être utile de copier coller avant le bouton avec le fond, pour s'assurer qu'on place bien le bouton sans fond à la bonne hauteur, comme on a fait tout à l'heure. Ici c'est inutile puisque ma barre de navigation est droite, je verrais tout de suite si je ne l'ai pas mis à la bonne hauteur. Bien sûr si notre barre n'est pas sous transparence png, on aura pas besoin de s'embêter avec ça.



4) On ajoute le texte s'inscrire. En cachant les calques qui sont par dessus et en remettant visible le premier qu'on a copié collé, on peut s'assurer que le texte est à la bonne hauteur. On ajuste également les parties gauche et droite si on se rend compte qu'on a pris une image trop grande pour le texte.



5) On voit bien qu'il y a une coupure, il faut fondre les boutons. Pour ça j'utilise une gomme très douce et suffisamment grosse pour effacer doucement la partie gauche du calque "droite" et la partie droite du calque "gauche". On peut utiliser des masque de fusion pour pouvoir revenir en arrière plus facilement si on se trompe (très utile pour les barre de navigation ayant une forme un peu complexe)



6) On cache le calque d'arrière plan et on peut enregistrer
voici mon bouton:


On va vérifier qu'il se fond bien dans la barre:


parfait =D


Pour le bouton On, on utilise le même principe.
Il sera à droite du groupes, et devras utiliser la fin de la barre de navig à droite pour la refermer. On se servira donc de la gauche du bouton Profil (parce qu'il est à droite du bouton Groupe) et de la droite du bouton Off qui termine la barre.



et voilà:


on vérifie:
parfait


A vous de jouer maintenant =D

_________________
Revenir en haut Aller en bas
http://collegepoudlard.virtuaboard.com
 
ajouter les boutons inscription et on à une barre de navig
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Barre de recherche d'Internet Explorer disparue : petit truc pour la retrouver
» Ajouter des boutons à l'éditeur des messages avec restrictions
» [Résolu] Barre de Navig en Widget sur le côté
» probleme pour faire un lien avec mes boutons
» (résolu)recherches effectuées dans la barre déroulante"recherche" de Neuf

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Le fofo de Lunard :: étagère 3: Tutos et astuces :: ● Tutoriels :: Photoshop-
Sauter vers: