AccueilPortailFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 une technique de découpage de barre de navigation[photoshop]

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: une technique de découpage de barre de navigation[photoshop]   Mer 15 Aoû 2007, 06:00

Je vais vous expliquer comment je découpe les barres de navigation, cette méthode n'est pas la seule bien sûre, mais c'en est une! ^^

Commencez par faire la barre de navigation complète avec photoshop, voici la mienne:



et voici ma fenêtre des calques, avec mis en évidence deux calques qui ne doivent impérivement ps avoir été fusionés avec le reste, tout le reste peut être fusioné c'est pas grâve (mais inuil)



Je vais zoomer sur la barre et avec l'outil sélection rectangulaire, je selectionne mon 1er bouton

Je fais édition => copier avec fusion
puis fichier => nouveau et je lasse les tailles, qui sont automatiquement celles de ce que je viens de copier
Je colle donc mon bouton dans cette nouvelle feuille.
Mais mon bouton est sous un fond de couleur, or je le veux sous fond transparent. Je retourne donc dans la fenêtre de ma barre de navigation complete, où le 1er bouton est toujours selectionné, je me place sur le calque "fond" et je supprime la partie du fond qui est selectionné (édition => effacer)

Faites édition => copier avec fusion et coller le bouton transparent sur le bouton non transparent de tout à l'heure. Déplacez le calque du bouton transparent de manière à ce qu'il soit posé pile dessus, n'hésitez pas à zoomer pour être très précis.
Cachez ensuite le calque du bouton non transparent en cliquant sur l'oeil dans la fenêtre es calques puis enregistrez en png

voici mon bouton:

Je retourne dans ma barre de navigation complète et je selectionne le deusième bouton, la partie du fond effacée me sert de repère pour couper au bon endroit

puis je recommence comme précédement, edition => copier avec fusion, fichier => nouveau, je colle, je suprime le fond du deusième bouton, je colle pile par dessus le calque du bouton avec fond que je cache puis j'enregistre en png, etc...
Jusqu'au bouton "membres". Quand j'ai fait mon bouton membre, que voici: , dans la barre de navigation complète je cache le calque de texte et garde une copie du fond du bouton sans le texte, le voci: , innutil de l'enregistrer juste le garder dans un coin, il servira à fabriquer le bouton "s'inscrire" plus tard!
Je fait ensuite réaparaitre le calque de texte et je coupe mes boutons suivants comme précédement.

Au bouton mp, je peux en profiter pour modifier le calque de texte pour créer un bouton nouveau mp, puis je remet le texte comme avant pour découper le dernier bouton:
et

Après avoir découpé le bouton Off, je garde la selection et je change le Off en On pour faire un bouton On identique au bouton off
et

Reste plus que le bouton s'inscrire.
J'écris "s'inscrire" directement dans le calque de texte pour avoir la même écriture

Je récupère le fond du "membre" vide gardé tout à l'heure et je le pose au dessus du s'inscrire comme ça:

Je vais maintenant faire un fondu: je fais calque => ajouter un masque de fusion => tout faire apparaitre

avec l'outil dégradé je fond le calque dans ce sens:

je passe le calque de texte au dessus:

je selectionne mon bouton bien présisément:

puis je procède comme pour tous les autres boutons pour le découper:


J'heberge tout, et si je n'ai fait aucune erreur, tout colle bien:

barre des connectés:


avec un new mp:


barre des non connectés:

_________________
Revenir en haut Aller en bas
http://collegepoudlard.virtuaboard.com
 
une technique de découpage de barre de navigation[photoshop]
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Barre de Navigation
» [Résolu] Barre de Navigation en premier plan
» Barre de navigation
» Problème de taille pour la barre de navigation [Résolu]
» [Ketsuka] Barre de navigation et presentation de mes membre

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: