Header

Partagez | 

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

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

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

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

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).


3/ Fusionnez tous vos calques et dupliquez ce qu’il vous reste 2 fois (vous avez donc 3 calques).


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.


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 ».


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


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









*** Méthode 2

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



-> 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
-
» Astuce barre de navigation en haut pour forum en invision
» [Photofiltre Studio X] Barre de Navigation - Simple
» bug sur la barre de navigation
» Faire bouger la barre de navigation
» Centrer la barre de navigation et le logo du forum
Réponse rapide

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

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens