Tutoriel photoshop : Faire une barre de navigation d'un site internet Tutoriaux photoshop > Webdesign > Tutoriel photoshop : Faire une barre de navigation d'un site internet

Dans ce tutoriel nous allons voir comment créer une barre de navigation pour un site internet.
1) Créer un nouveau document. (pour mon exemple j'ai choisi de mettre un fond noir)


2) Prenez l'outil rectangle et faite une forme rectangulaire de la largeur de votre menu.


3) Maintenant on va appliquer 2 effets sur ce rectangle : Incrustation de dégradé, contour.
Dans la fenêtre calques cliquez sur l'icone et sélectionnez incrustation de dégradé.
(Sinon allez dans le menu calque -> style de calque -> incrustation de dégradé. Ou encore double cliqué sur le calque et allez sur incrustation de dégradé)
Voici mes paramêtres :


Au niveau du dégradé ça donne ça :


4) A présent un contour. Cliquez sur contour.
Voici mes paramêtres :


5) Validez. Voici ce que vous devriez avoir à présent


6) Maintenant on va faire les séparation de nos différents onglets le plus facilement du monde. Prenez l'outil trait (situé au même endroit que le rectangle précédent)
Sélectionner une couleur foncé proche des couleurs précédemment utilisées.
Tracez un trait de 1px de la hauteur de votre barre de navigation. (l'épaisseur du trait se règle dans les options situées en dessous du menu du logiciel)
Renouvelez une fois la manipulation en choisissant cette fois-ci une couleur claire.
Placé les 2 traits l'un à coté de l'autre



7) Ecrivez votre texte.
Pour avoir à nouveau une séparation, nous allons d'abord faire un groupe. Dans la fenêtre calque cliquez sur le calque correspondant au trait foncé puis en maintenant la touche CTRL cliquez sur le calque correspondant au trait clair, (pour sélectionner les calques) et appuyez sur CTRL+G.
Sinon allez dans le menu calque -> nouveau -> nouveau groupe d'après les calques. Nommé ce groupe séparation.
Vous n'aurez qu'à dupliquer ce groupe pour avoir à nouveau la barre de séparation entre chaque onglet.
Ptite astuce pour dupliquer facilement un calque ou un groupe de calque : Sélectionnez le calque ou groupe de calque à dupliquer et tout en appuyant sur les touches CTRL+ALT appuyez sur une touche de flèche directionnelle. (haut, bas, gauche, droite)
Sinon le raccourci est CTRL+J, ou sinon menu calque -> dupliquer le calque (ou dupliquer le groupe)

Voilà le résultat final :

Autres tutoriaux photoshop : Webdesign

Création d'un bouton Flux RSS glossy Faire une barre de navigation, scroll barre Créer une icone glossy pour une interface web Créer une icone de média sociaux (facebook, twitter...)