Partagez | 
 

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

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

Miettes

Doyenne

Bons Points (BP) : 154
MessageSujet: [Astuce] Créer et découper une barre de navigation   Jeu 9 Juil - 10:02

Dernière édition par Miettes le Lun 18 Juil - 21:52, édité 2 fois

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].
___________________


 

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

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
School of Progress :: La bibliothèque :: Tutoriels :: Arts plastiques :: Photoshop-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants