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 :







Gagnez de l'argent facilement m�me en restant chez vous !
Sondages, tests de produits, enqu�tes consommateur, mails r�mun�r�s, cashback, publicit�s r�mun�r�es...

Les derniers tutoriaux photoshop : Webdesign

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