Header
Partagez | 

[Astuce] Créer et découper une barre de navigation

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: [Astuce] Créer et découper une barre de navigation   Jeu 9 Juil - 10:02

Créer et découper une barre de navigation



Bonjour à tous !

Ici, nous allons voir comment réaliser rapidement une barre de navigation pour forum. Avant de commencer, vous devez déterminer les longueurs et hauteurs maximales de cette barre. Pour SoP, nous utilisons en général les dimensions suivantes : 700px de long et 50px de haut. Une fois ces dimensions choisies, nous pouvons commencer :

1/ Créez une nouvelle image avec les dimensions précédentes.

2/ Travaillez votre fond et la forme de votre barre (pour ce tuto, nous utiliserons une forme simple).
image tuto
3/ Fusionnez tous vos calques et dupliquez ce qu’il vous reste 2 fois (vous avez donc 3 calques).
image tuto

4/ Nous allons à présent ajouter le texte. Créez 3 calques de texte contenant ceci :

Calque 1 > Forum, Portail, FAQ, Rechercher, Membres, Groupes, Profil, MP, Off
Calque 2 > Forum, Portail, FAQ, Rechercher, Membres, Groupes, Profil, MP ! , Off
Calque 3 > Forum, Portail, FAQ, Rechercher, Membres, Groupes, S’inscrire, On

Placez ensuite vos textes sur vos calques de fond. Attention, veillez à ce que vos textes se superposent à peu près Wink

5/ Fusionnez chacun des calques 1 et 2 avec un calque de fond.
image tuto

6/ Pour le calque 1, repérez où se termine le texte. Nous allons devoir adapter l’image de fond pour qu’il ne dépasse pas trop du texte. Pour cela, sur le calque de fond restant, sélectionnez ce qui « dépasse » du texte à droite, faites un couper (ctrl+X), créez un nouveau calque et faites un coller (ctrl+c), déplacez ensuite ce calque pour créer une taille de fond adaptée au texte. Utilisez ensuite la gomme avec une opacité de 35% et gommez ce qui se superpose afin d’avoir un raccord « parfait ».
image tuto

7/ Fusionnez ensuite les 2 calques de fond avec le texte.
image tuto

8/
*** Méthode 1 :
Il ne vous reste plus qu’à découper vos images. Pour cela, sélectionnez le calque contenant le texte 1. Sélectionnez « forum », faites « copier » (ctrl+C), créez une nouvelle image, et collez (ctrl+V), puis enregistrez votre image. Répétez l’opération pour tous les textes et calques (attention, il est inutile de le refaire pour les mêmes textes Wink ).

Et voilà, vous avez vos images Wink (je n'en mets que quelques unes pour l'exemple)
image tuto
image tuto
image tuto


*** Méthode 2

-> Prenez l'outil tranche (elle est au même niveau que l'outil recadre (C) ) et sélectionnez chaque bouton.

image tuto

-> Ensuite, il vous suffit de faire fichier >> enregistrer pour le web. La barre de nav va être automatiquement découpée Smile

Que vous travaillez avec une forme simple ou plus travaillée, la façon de procéder reste la même Wink





Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].


Dernière édition par Miettes le Lun 18 Juil - 21:52, édité 2 fois
Revenir en haut Aller en bas


[Astuce] Créer et découper une barre de navigation
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
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Arts plastiques :: Photoshop+